split bill: reorder flow

src/pages/checkout/components/BriefMenuCard.tsx

@@ -6,13 +6,24 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { selectCart } from "features/order/orderSlice";
 import { useNavigate, useParams } from "react-router-dom";
+import { useGetOrderDetailsQuery } from "redux/api/others";
 
 export default function BriefMenuCard() {
   const { t } = useTranslation();
   const { items } = useAppSelector(selectCart);
-  const totalItems = items.length;
-  const { subdomain } = useParams();
+  const { subdomain, orderId } = useParams();
   const navigate = useNavigate();
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+      // return it t0 60000 after finish testing
+    },
+  );
+  const totalItems = items.length || orderDetails?.orderItems.length;
 
   return (
     <>

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,23 +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 { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
+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";
+
+type SplitWay = "customAmount" | "equality" | "payForItems" | null;
 
 export default function CheckoutButton({ form }: { form: FormInstance }) {
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { orderType } = useAppSelector(selectCart);
-  const navigate = useNavigate();
   const { handleCreateOrder } = useOrder();
-  const { subdomain } = useParams();
+  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(() => {
-    navigate(`/${subdomain}/split-bill`);
-  }, [navigate, subdomain]);
+    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 {
@@ -34,24 +70,56 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
   );
 
   return (
-    <Layout.Footer className={styles.checkoutButtonContainer}>
-      {shouldShowSplitBill && (
-        <Button
-          className={styles.splitBillButton}
-          onClick={handleSplitBillClick}
-        >
-          {t("checkout.splitBill")}
-        </Button>
-      )}
+    <>
+      <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>
+        <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}
+      />
+    </>
   );
 }