apply SplitBillChoiceBottomSheet logic

src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx

@@ -1,46 +1,60 @@
 import { Card } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import ProTitle from "components/ProTitle";
-import { useNavigate, useParams } from "react-router-dom";
-import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
+import { CustomAmountChoiceBottomSheet } from "./CustomAmountChoiceBottomSheet";
+import { EqualltyChoiceBottomSheet } from "./EqualltyChoiceBottomSheet";
+import { PayForYourItemsChoiceBottomSheet } from "./PayForYourItemsChoiceBottomSheet";
 import styles from "./SplitBill.module.css";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
   onSave?: (value: string) => void;
+  onSelectSplitWay?: (way: "customAmount" | "equality" | "payForItems") => void;
 }
 
 export function SplitBillChoiceBottomSheet({
   isOpen,
   onClose,
-  // onSave,
+  onSelectSplitWay,
 }: SplitBillChoiceBottomSheetProps) {
   const { t } = useTranslation();
-  // const [value, setValue] = useState(initialValue);
   const { isRTL } = useAppSelector((state) => state.locale);
-  const { subdomain } = useParams();
-  const navigate = useNavigate();
-  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
-    skip: !subdomain,
-  });
 
-  // const handleSave = () => {
-  //   onSave(value);
-  //   onClose();
-  // };
+  const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
+  const [isEqualityOpen, setIsEqualityOpen] = useState(false);
+  const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);
 
   const handleCancel = () => {
-    // setValue(initialValue);
     onClose();
   };
 
+  const handleCustomAmountClick = () => {
+    onSelectSplitWay?.("customAmount");
+    onClose();
+    setIsCustomAmountOpen(true);
+  };
+
+  const handleEqualityClick = () => {
+    onSelectSplitWay?.("equality");
+    onClose();
+    setIsEqualityOpen(true);
+  };
+
+  const handlePayForItemsClick = () => {
+    onSelectSplitWay?.("payForItems");
+    onClose();
+    setIsPayForItemsOpen(true);
+  };
+
   return (
+    <>
     <ProBottomSheet
       isOpen={isOpen}
       onClose={handleCancel}
@@ -60,7 +74,7 @@ export function SplitBillChoiceBottomSheet({
       >
         <Card
           className={styles.backToHomePage}
-          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+          onClick={handleCustomAmountClick}
         >
           <div
             style={{
@@ -89,7 +103,7 @@ export function SplitBillChoiceBottomSheet({
 
         <Card
           className={styles.backToHomePage}
-          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+          onClick={handleEqualityClick}
         >
           <div
             style={{
@@ -118,7 +132,7 @@ export function SplitBillChoiceBottomSheet({
 
         <Card
           className={styles.backToHomePage}
-          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+          onClick={handlePayForItemsClick}
         >
           <div
             style={{
@@ -146,5 +160,21 @@ export function SplitBillChoiceBottomSheet({
         </Card>
       </div>
     </ProBottomSheet>
+
+    <CustomAmountChoiceBottomSheet
+      isOpen={isCustomAmountOpen}
+      onClose={() => setIsCustomAmountOpen(false)}
+    />
+
+    <EqualltyChoiceBottomSheet
+      isOpen={isEqualityOpen}
+      onClose={() => setIsEqualityOpen(false)}
+    />
+
+    <PayForYourItemsChoiceBottomSheet
+      isOpen={isPayForItemsOpen}
+      onClose={() => setIsPayForItemsOpen(false)}
+    />
+    </>
   );
 }