SATE-EasyReceipt-front/src/pages/dashboard/receipt-issuing-order/custom/hello-techno/create.tsx

import { Box, Step, StepLabel, Stepper } from "@mui/material";
import { getHTAdjustData } from "api/custom/hello-techno";
import { createReceiptIssuingOrder } from "api/custom/hello-techno/receipt-issuing-order";
import { PageID, TabID } from "codes/page";
import { getValue } from "components/hook-form/RHFAutoComplete";
import useAPICall from "hooks/useAPICall";
import useDashboard from "hooks/useDashBoard";
import useSnackbarCustom from "hooks/useSnackbarCustom";
import { useEffect, useMemo, useState } from "react";
import useConfirm, { ConfirmDataProps } from "./hooks/useConfirm";
import useInputReceiptStep from "./hooks/useInputReceiptStep";
import useInputSMSSendAddress from "./hooks/useInputSMSSendAddress";
import useSelectParkingStep from "./hooks/useSelectParkingStep";

export default function ReceiptIssuingOrderCreate() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO,
    TabID.NONE
  );

  const { success, error } = useSnackbarCustom();

  const [mode, setMode] = useState<
    "parking_select" | "input_receipt" | "input_address" | "confirm" | "done"
  >("parking_select");

  const step = useMemo(() => {
    switch (mode) {
      case "parking_select":
        return 0;
      case "input_receipt":
        return 1;
      case "input_address":
        return 2;
      case "confirm":
        return 3;
      case "done":
        return 4;
    }
  }, [mode]);

  const getConfimData = (): ConfirmDataProps => {
    return {
      customerName: selectParkingStep.values("customerCode.label"),
      parkingName: selectParkingStep.values("parkingManagementCode.label"),
      adjustSeqNo: selectParkingStep.values("adjustSeqNo"),
      amount: inputReceiptStep.values("amount"),
      date: inputReceiptStep.values("date"),
      address: inputSMSSendAddress.values("address"),
      memo: inputReceiptStep.values("memo"),
    };
  };
  const getFormData = () => {
    return {
      ...selectParkingStep.values(),
      ...inputReceiptStep.values(),
      ...inputSMSSendAddress.values(),
    };
  };

  const adjustDataAPI = useAPICall({
    apiMethod: getHTAdjustData,
    backDrop: true,
    onSuccess: ({ data }) => {
      inputReceiptStep.setAdjustData(data);
      setMode("input_receipt");
    },
    onFailed: () => {
      error("精算履歴が存在しません");
    },
  });

  const selectParkingStep = useSelectParkingStep({
    onNext: () => {
      const { customerCode, parkingManagementCode, adjustSeqNo } =
        getFormData();
      if (adjustSeqNo) {
        adjustDataAPI.callAPI({
          customer_code: getValue(customerCode),
          parking_management_code: getValue(parkingManagementCode),
          adjust_seq_no: adjustSeqNo,
        });
      } else {
        inputReceiptStep.setAdjustData(null);
        setMode("input_receipt");
      }
    },
  });

  const inputReceiptStep = useInputReceiptStep({
    onNext: () => {
      setMode("input_address");
    },
    onPrev: () => {
      setMode("parking_select");
    },
  });
  const inputSMSSendAddress = useInputSMSSendAddress({
    onNext: () => {
      confirm.setData(getConfimData());
      setMode("confirm");
    },
    onPrev: () => {
      setMode("input_receipt");
    },
  });

  const confirm = useConfirm({
    onNext: () => {
      send();
    },
    onPrev: () => {
      setMode("input_address");
    },
  });

  const createAPI = useAPICall({
    apiMethod: createReceiptIssuingOrder,
    backDrop: true,
    onSuccess: () => {
      setMode("done");
      success("成功しました");
    },
    onFailed: () => {
      error("失敗しました");
    },
  });

  const send = () => {
    const { callAPI, makeSendData } = createAPI;

    const formData = getFormData();
    const sendData = makeSendData({
      customer_code: getValue(formData.customerCode),
      parking_management_code: getValue(formData.parkingManagementCode),
      adjust_seq_no: formData.adjustSeqNo,
      receipt_use_date: formData.date,
      receipt_amount: formData.amount,
      sms_phone_number: formData.address,
      memo: formData.memo,
    });

    callAPI(sendData);
  };

  useEffect(() => {
    setHeaderTitle("領収証発行依頼作成");
    setTabs(null);
  }, []);
  return (
    <Box sx={{ p: 1, m: 1 }}>
      <Stepper activeStep={step}>
        <Step>
          <StepLabel>駐車場選択</StepLabel>
        </Step>
        <Step>
          <StepLabel>領収証情報入力</StepLabel>
        </Step>
        <Step>
          <StepLabel>SMS送信先入力</StepLabel>
        </Step>
        <Step>
          <StepLabel>確認</StepLabel>
        </Step>
        <Step>
          <StepLabel>完了</StepLabel>
        </Step>
      </Stepper>
      {mode === "parking_select" && selectParkingStep.element}
      {mode === "input_receipt" && inputReceiptStep.element}
      {mode === "input_address" && inputSMSSendAddress.element}
      {mode === "confirm" && confirm.element}
      {mode === "done" && <Box sx={{ p: 1, py: 3, m: 1 }}>受付しました。</Box>}
    </Box>
  );
}