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

import { Box, Step, StepLabel, Stepper } from "@mui/material";
import { HTParking } from "api/custom/hello-techno";
import { createReceiptIssuingOrder } from "api/custom/hello-techno/receipt-issuing-order";
import { PageID, TabID } from "codes/page";
import useAPICall from "hooks/useAPICall";
import useDashboard from "hooks/useDashBoard";
import useSnackbarCustom from "hooks/useSnackbarCustom";
import { useEffect, useMemo, useState } from "react";
import { CreateContextProvider } from "./contexts/CreateContext";
import useConfirm, { ConfirmDataProps } from "./hooks/useConfirm";
import useCreate from "./hooks/useCreate";
import useInputReceiptStep from "./hooks/useInputReceiptStep";
import useInputSMSSendAddress from "./hooks/useInputSMSSendAddress";
import useParkingList from "./hooks/useParkingList";

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

  useEffect(() => {
    setHeaderTitle("領収証発行依頼作成");
    setTabs(null);
  }, []);
  return (
    <CreateContextProvider>
      <Create />
    </CreateContextProvider>
  );
}
function Create() {
  const { parking, adjustData } = useCreate();

  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: parking?.customer_name ?? "XXXXXXXXXXXX",
      parkingName: parking?.parking_name ?? "XXXXXXXXXXXXXXX",
      adjustSeqNo: adjustData ? String(adjustData.adjust_seq_no) : "",
      amount: inputReceiptStep.values("amount"),
      date: inputReceiptStep.values("date"),
      address: inputSMSSendAddress.values("address"),
      memo: inputReceiptStep.values("memo"),
    };
  };
  const getFormData = () => {
    return {
      ...parking,
      ...inputReceiptStep.values(),
      ...inputSMSSendAddress.values(),
    };
  };

  const selectParkingStep = useParkingList({
    onNext: (parking: HTParking) => {
      inputReceiptStep.init();
      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: formData.customer_code ?? "",
      parking_management_code: formData.parking_management_code ?? "",
      adjust_seq_no: adjustData?.adjust_seq_no,
      receipt_use_date: formData.date,
      receipt_amount: formData.amount,
      tax_amount: formData.tax_amount,
      sms_phone_number: formData.address,
      memo: formData.memo,
    });

    callAPI(sendData);
  };

  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>
  );
}