web-menu-react-version-/src/pages/checkout/components/CheckoutButton.tsx

import { Button, FormInstance, Layout, message } from "antd";
import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import useOrder from "../hooks/useOrder";
import { EqualltyChoiceBottomSheet } from "pages/pay/components/splitBill/EqualltyChoiceBottomSheet";
import { SplitBillChoiceBottomSheet } from "pages/pay/components/splitBill/SplitBillChoiceBottomSheet";
import { CustomAmountChoiceBottomSheet } from "pages/pay/components/splitBill/CustomAmountChoiceBottomSheet";
import { PayForYourItemsChoiceBottomSheet } from "pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet";
import useGidtAmount from "../hooks/useGidtAmount";
import { GiftType } from "components/CustomBottomSheet/GiftTypeBottomSheet";

type SplitWay = "customAmount" | "equality" | "payForItems" | null;

export default function CheckoutButton({ form }: { form: FormInstance }) {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const { orderType, giftDetails, items } = useAppSelector(selectCart);
  const { handleCreateOrder } = useOrder();
  const { handleCreateGiftAmount } = useGidtAmount();
  const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
  const [
    isSplitBillChoiceBottomSheetOpen,
    setIsSplitBillChoiceBottomSheetOpen,
  ] = useState(false);
  const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
  const [isEqualityOpen, setIsEqualityOpen] = useState(false);
  const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);

  const handleSplitBillClick = useCallback(() => {
    if (selectedSplitWay === "customAmount") {
      setIsCustomAmountOpen(true);
    } else if (selectedSplitWay === "equality") {
      setIsEqualityOpen(true);
    } else if (selectedSplitWay === "payForItems") {
      setIsPayForItemsOpen(true);
    } else {
      setIsSplitBillChoiceBottomSheetOpen(true);
    }
  }, [selectedSplitWay]);

  const handleRemoveSplitWay = useCallback(() => {
    setSelectedSplitWay(null);
    dispatch(updateSplitBillAmount(0));
  }, [dispatch]);

  const handlePlaceOrderClick = useCallback(async () => {
    try {
      await form.validateFields();
      if (
        orderType === OrderType.Gift &&
        giftDetails?.giftType === GiftType.Vouchers
      ) {
        handleCreateGiftAmount();
      } else {
        if (items.length > 0) {
          handleCreateOrder();
        } else {
          message.error(t("checkout.noItems"));
        }
      }
    } catch (error) {
      console.log(error);
    }
  }, [handleCreateOrder, handleCreateGiftAmount, form, orderType, giftDetails]);

  const shouldShowSplitBill = useMemo(
    () => orderType === OrderType.DineIn,
    [orderType],
  );

  const getSplitButtonTitle = useMemo(() => {
    if (selectedSplitWay === "customAmount") {
      return t("splitBill.customAmount");
    } else if (selectedSplitWay === "equality") {
      return t("splitBill.divideEqually");
    } else if (selectedSplitWay === "payForItems") {
      return t("splitBill.payForItems");
    }
    return t("checkout.splitBill");
  }, [selectedSplitWay, t]);

  return (
    <>
      <Layout.Footer className={styles.checkoutButtonContainer}>
        {shouldShowSplitBill && (
          <Button
            className={styles.splitBillButton}
            onClick={handleSplitBillClick}
          >
            {getSplitButtonTitle}
          </Button>
        )}

        <Button
          type="primary"
          shape="round"
          className={styles.placeOrderButton}
          onClick={handlePlaceOrderClick}
        >
          {t("checkout.placeOrder")}
        </Button>
      </Layout.Footer>

      <SplitBillChoiceBottomSheet
        isOpen={isSplitBillChoiceBottomSheetOpen}
        onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
        onSelectSplitWay={setSelectedSplitWay}
      />

      <CustomAmountChoiceBottomSheet
        isOpen={isCustomAmountOpen}
        onClose={() => {
          setIsCustomAmountOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />

      <EqualltyChoiceBottomSheet
        isOpen={isEqualityOpen}
        onClose={() => {
          setIsEqualityOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />

      <PayForYourItemsChoiceBottomSheet
        isOpen={isPayForItemsOpen}
        onClose={() => {
          setIsPayForItemsOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />
    </>
  );
}