apply SplitBillChoiceBottomSheet logic

src/pages/pay/components/PayButton.tsx

@@ -1,25 +1,59 @@
 import { Button, FormInstance, Layout } from "antd";
-import { selectCart } from "features/order/orderSlice";
+import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import useOrder from "pages/checkout/hooks/useOrder";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { CustomAmountChoiceBottomSheet } from "./splitBill/CustomAmountChoiceBottomSheet";
+import { EqualltyChoiceBottomSheet } from "./splitBill/EqualltyChoiceBottomSheet";
+import { PayForYourItemsChoiceBottomSheet } from "./splitBill/PayForYourItemsChoiceBottomSheet";
 import { SplitBillChoiceBottomSheet } from "./splitBill/SplitBillChoiceBottomSheet";
 
+type SplitWay = "customAmount" | "equality" | "payForItems" | null;
+
 export default function PayButton({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const { orderType } = useAppSelector(selectCart);
   const { handleCreateOrder } = useOrder();
+  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(() => {
-    setIsSplitBillChoiceBottomSheetOpen(true);
-  }, []);
+    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 getSplitButtonTitle = useMemo(() => {
+    if (selectedSplitWay === "customAmount") {
+      return t("splitBill.payAsCustomAmount");
+    } else if (selectedSplitWay === "equality") {
+      return t("splitBill.divideTheBillEqually");
+    } else if (selectedSplitWay === "payForItems") {
+      return t("splitBill.payForYourItems");
+    }
+    return t("checkout.splitBill");
+  }, [selectedSplitWay, t]);
 
   const handlePlaceOrderClick = useCallback(async () => {
     try {
@@ -43,7 +77,7 @@ export default function PayButton({ form }: { form: FormInstance }) {
             className={styles.splitBillButton}
             onClick={handleSplitBillClick}
           >
-            {t("checkout.splitBill")}
+            {getSplitButtonTitle}
           </Button>
         )}
 
@@ -60,6 +94,25 @@ export default function PayButton({ form }: { form: FormInstance }) {
       <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}
       />
     </>
   );