apply SplitBillChoiceBottomSheet logic

2025-12-04 01:11:09 +03:00
parent 265fb4b983
commit 29423036cd
9 changed files with 770 additions and 26 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -412,6 +412,13 @@
    "payAsCustomAmount": "دفع كمبلغ مخصص",
    "payAsSplitAmount": "دفع كمبلغ مقسم",
    "divideTheBillEqually": "تقسيم الفاتورة الى حسب العدد",
-    "payForYourItems": "دفع للطلبات الخاصة بي"
+    "payForYourItems": "دفع للطلبات الخاصة بي",
+    "enterCustomAmount": "أدخل المبلغ المخصص",
+    "amountPlaceholder": "0.00",
+    "divisionPreview": "معاينة التقسيم",
+    "yourAmount": "مبلغك",
+    "selectedTotal": "المجموع المحدد",
+    "splitBillAmount": "مبلغ تقسيم الفاتورة",
+    "removeSplitWay": "إزالة طريقة التقسيم"
  }
 }
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -424,6 +424,13 @@
    "payAsCustomAmount": "Pay as Custom Amount",
    "payAsSplitAmount": "Pay as Split Amount",
    "divideTheBillEqually": "Divide the Bill Equally",
-    "payForYourItems": "Pay for Your Items"
+    "payForYourItems": "Pay for Your Items",
+    "enterCustomAmount": "Enter Custom Amount",
+    "amountPlaceholder": "0.00",
+    "divisionPreview": "Division Preview",
+    "yourAmount": "Your Amount",
+    "selectedTotal": "Selected Total",
+    "splitBillAmount": "Split Bill Amount",
+    "removeSplitWay": "Remove Split Way"
  }
 }
--- a/src/components/OrderSummary/OrderSummary.tsx
+++ b/src/components/OrderSummary/OrderSummary.tsx
@@ -21,7 +21,7 @@ import styles from "./OrderSummary.module.css";

 export default function OrderSummary() {
  const { t } = useTranslation();
-  const { useLoyaltyPoints } = useAppSelector(selectCart);
+  const { useLoyaltyPoints, splitBillAmount } = useAppSelector(selectCart);
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
  const { orderType } = useAppSelector(selectCart);
@@ -62,6 +62,14 @@ export default function OrderSummary() {
            <ProText type="secondary">{t("cart.tax")}</ProText>
            <ArabicPrice price={taxAmount || 0} />
          </div>
+          {splitBillAmount > 0 && (
+            <div className={styles.summaryRow}>
+              <ProText type="secondary">
+                {t("splitBill.splitBillAmount")}
+              </ProText>
+              <ArabicPrice price={splitBillAmount} />
+            </div>
+          )}
          <Divider className={styles.summaryDivider} />
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText strong type="secondary">
--- a/src/features/order/orderSlice.ts
+++ b/src/features/order/orderSlice.ts
@@ -69,6 +69,7 @@ interface CartState {
  pickupTime: string;
  pickupType: string;
  order: any;
+  splitBillAmount: number;
 }

 // localStorage keys
@@ -185,6 +186,7 @@ const initialState: CartState = {
  pickupTime: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TIME, ""),
  pickupType: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TYPE, ""),
  order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
+  splitBillAmount: 0,
 };

 const orderSlice = createSlice({
@@ -632,6 +634,9 @@ const orderSlice = createSlice({
        localStorage.setItem(CART_STORAGE_KEYS.ORDER, JSON.stringify(state.order));
      }
    },
+    updateSplitBillAmount(state, action: PayloadAction<number>) {
+      state.splitBillAmount = action.payload;
+    },
  },
 });

@@ -669,6 +674,7 @@ export const {
  updatePickupTime,
  updatePickUpType,
  updateOrder,
+  updateSplitBillAmount,
 } = orderSlice.actions;

 // Tax calculation helper functions
@@ -775,7 +781,7 @@ export const selectGrandTotal = (state: RootState) => {
      ? Number(state.order.restaurant?.delivery_fees) || 0
      : 0;

-  return subtotal + taxAmount - totalDiscount + deliveryFee;
+  return subtotal + taxAmount - totalDiscount + deliveryFee - state.order.splitBillAmount;
 };

 export default orderSlice.reducer;
--- a/src/pages/pay/components/PayButton.tsx
+++ b/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}
      />
    </>
  );
--- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
@@ -0,0 +1,112 @@
+import { Button, Form, InputNumber } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  selectCart,
+  selectGrandTotal,
+  updateSplitBillAmount,
+} from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+  onRemoveSplitWay?: () => void;
+}
+
+export function CustomAmountChoiceBottomSheet({
+  isOpen,
+  onClose,
+  onRemoveSplitWay,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { splitBillAmount } = useAppSelector(selectCart);
+  const grandTotal = useAppSelector(selectGrandTotal);
+  const [amount, setAmount] = useState<string>(
+    splitBillAmount > 0 ? splitBillAmount.toString() : "",
+  );
+
+  useEffect(() => {
+    if (isOpen && splitBillAmount > 0) {
+      setAmount(splitBillAmount.toString());
+    }
+  }, [isOpen, splitBillAmount]);
+
+  const handleSave = () => {
+    const numAmount = parseFloat(amount) || 0;
+    dispatch(updateSplitBillAmount(numAmount));
+    onClose();
+  };
+
+  const handleRemoveSplitWay = () => {
+    setAmount("");
+    dispatch(updateSplitBillAmount(0));
+    onRemoveSplitWay?.();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("splitBill.payAsCustomAmount")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={400}
+      snapPoints={[400]}
+    >
+      <div
+        style={{
+          padding: "20px 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <div>
+          <ProInputCard title={t("splitBill.payAsCustomAmount")}>
+            <Form.Item
+              label={t("splitBill.amount")}
+              name="amount"
+              style={{ position: "relative", top: -5 }}
+            >
+              <InputNumber
+                value={amount}
+                onChange={(value) => setAmount(value?.toString() || "")}
+                placeholder={t("splitBill.amount")}
+                max={grandTotal.toString()}
+                min={"0"}
+                style={{ width: "100%", fontSize:"1rem" }}
+              />
+            </Form.Item>
+          </ProInputCard>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            marginTop: 20,
+          }}
+        >
+          <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
+            {t("splitBill.removeSplitWay")}
+          </Button>
+          <Button
+            type="primary"
+            style={{ flex: 1, boxShadow: "none" }}
+            onClick={handleSave}
+            disabled={!amount || parseFloat(amount) <= 0}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
+      </div>
+    </ProBottomSheet>
+  );
+}
--- a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
@@ -0,0 +1,310 @@
+import { Button } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import PeopleIcon from "components/Icons/PeopleIcon";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import {
+  selectCart,
+  selectGrandTotal,
+  updateSplitBillAmount,
+} from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { ProGray1 } from "ThemeConstants";
+import PayForActions from "../../../split-bill/components/PayForActions";
+import TotalPeopleActions from "../../../split-bill/components/TotalPeopleActions";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+  onRemoveSplitWay?: () => void;
+}
+
+interface SplitBillTmp {
+  totalPeople?: number;
+  payFor?: number;
+}
+
+export function EqualltyChoiceBottomSheet({
+  isOpen,
+  onClose,
+  onRemoveSplitWay,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { tmp } = useAppSelector(selectCart);
+  const grandTotal = useAppSelector(selectGrandTotal);
+
+  const splitBillTmp = tmp as SplitBillTmp;
+  const totalPeople = splitBillTmp?.totalPeople || 1;
+  const payFor = splitBillTmp?.payFor || 1;
+
+  // Calculate split amount
+  const splitAmount = useMemo(() => {
+    if (totalPeople > 0) {
+      return (grandTotal / totalPeople) * payFor;
+    }
+    return 0;
+  }, [grandTotal, totalPeople, payFor]);
+
+  // Update splitBillAmount when values change
+  useEffect(() => {
+    if (isOpen && splitAmount > 0) {
+      dispatch(updateSplitBillAmount(splitAmount));
+    }
+  }, [isOpen, splitAmount, dispatch]);
+
+  const handleSave = () => {
+    dispatch(updateSplitBillAmount(splitAmount));
+    onClose();
+  };
+
+  const handleRemoveSplitWay = () => {
+    dispatch(updateSplitBillAmount(0));
+    onRemoveSplitWay?.();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("splitBill.divideTheBillEqually")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={600}
+      snapPoints={[600]}
+    >
+      <div
+        style={{
+          padding: "20px 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <ProInputCard title={t("checkout.splitBill")}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1rem",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: "1rem",
+                }}
+              >
+                <Button
+                  type="text"
+                  shape="circle"
+                  style={{
+                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                    position: "relative",
+                    top: -10,
+                  }}
+                >
+                  <PeopleIcon />
+                </Button>
+                <ProText
+                  style={{
+                    fontSize: "1rem",
+                    marginTop: 3,
+                    color: ProGray1,
+                  }}
+                >
+                  {t("checkout.totalPeople")}
+                </ProText>
+              </div>
+
+              <TotalPeopleActions />
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: "1rem",
+                }}
+              >
+                <Button
+                  type="text"
+                  shape="circle"
+                  style={{
+                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                    position: "relative",
+                    top: -10,
+                  }}
+                >
+                  <PeopleIcon />
+                </Button>
+                <ProText
+                  style={{
+                    fontSize: "1rem",
+                    marginTop: 2,
+                    color: ProGray1,
+                  }}
+                >
+                  {t("checkout.payFor")}
+                </ProText>
+              </div>
+
+              <PayForActions />
+            </div>
+          </div>
+        </ProInputCard>
+
+        {/* Spinner Visualization - Blank Spin Wheel */}
+        {totalPeople > 0 && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              padding: 16,
+              alignItems: "center",
+            }}
+          >
+            <ProTitle level={5} style={{ marginBottom: 8 }}>
+              {t("splitBill.divisionPreview")}
+            </ProTitle>
+            <div
+              style={{
+                position: "relative",
+                width: 200,
+                height: 200,
+                margin: "0 auto",
+              }}
+            >
+              <svg
+                width="200"
+                height="200"
+                viewBox="0 0 200 200"
+                style={{
+                  transform: "rotate(-90deg)",
+                }}
+              >
+                {Array.from({ length: totalPeople }).map((_, index) => {
+                  const anglePerSlice = 360 / totalPeople;
+                  const startAngle = index * anglePerSlice;
+                  const endAngle = (index + 1) * anglePerSlice;
+                  const isSelected = index < payFor;
+
+                  // Convert angles to radians
+                  const startAngleRad = (startAngle * Math.PI) / 180;
+                  const endAngleRad = (endAngle * Math.PI) / 180;
+
+                  // Calculate path for pie slice
+                  const radius = 90;
+                  const centerX = 100;
+                  const centerY = 100;
+
+                  const x1 = centerX + radius * Math.cos(startAngleRad);
+                  const y1 = centerY + radius * Math.sin(startAngleRad);
+                  const x2 = centerX + radius * Math.cos(endAngleRad);
+                  const y2 = centerY + radius * Math.sin(endAngleRad);
+
+                  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
+
+                  const pathData = [
+                    `M ${centerX} ${centerY}`,
+                    `L ${x1} ${y1}`,
+                    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+                    "Z",
+                  ].join(" ");
+
+                  return (
+                    <path
+                      key={index}
+                      d={pathData}
+                      fill={isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"}
+                      stroke="#fff"
+                      strokeWidth="2"
+                    />
+                  );
+                })}
+              </svg>
+              {/* Center circle to make it look like a blank wheel */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 60,
+                  height: 60,
+                  borderRadius: "50%",
+                  backgroundColor: "var(--background)",
+                  border: "3px solid var(--primary)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 18,
+                  fontWeight: 600,
+                  color: "var(--primary)",
+                  zIndex: 10,
+                }}
+              >
+                {payFor}
+              </div>
+            </div>
+            <ProText
+              style={{
+                textAlign: "center",
+                marginTop: 12,
+                fontSize: 16,
+                fontWeight: 600,
+              }}
+            >
+              {t("splitBill.yourAmount")}: {splitAmount.toFixed(2)}
+            </ProText>
+          </div>
+        )}
+
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            marginTop: 20,
+          }}
+        >
+          <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
+            {t("splitBill.removeSplitWay")}
+          </Button>
+          <Button
+            type="primary"
+            style={{ flex: 1, boxShadow: "none" }}
+            onClick={handleSave}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
+      </div>
+    </ProBottomSheet>
+  );
+}
--- a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
@@ -0,0 +1,211 @@
+import { Button, Card, Image } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import ArabicPrice from "components/ArabicPrice";
+import ProText from "components/ProText";
+import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+  onRemoveSplitWay?: () => void;
+}
+
+export function PayForYourItemsChoiceBottomSheet({
+  isOpen,
+  onClose,
+  onRemoveSplitWay,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { items } = useAppSelector(selectCart);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+  // Calculate total for selected items
+  const selectedTotal = items
+    .filter((item) => selectedItems.has(item.uniqueId || item.id.toString()))
+    .reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedItems(new Set());
+      dispatch(updateSplitBillAmount(0));
+    }
+  }, [isOpen, dispatch]);
+
+  const handleItemToggle = (uniqueId: string) => {
+    const newSelected = new Set(selectedItems);
+    if (newSelected.has(uniqueId)) {
+      newSelected.delete(uniqueId);
+    } else {
+      newSelected.add(uniqueId);
+    }
+    setSelectedItems(newSelected);
+
+    // Calculate and update split bill amount
+    const newTotal = items
+      .filter((item) => newSelected.has(item.uniqueId || item.id.toString()))
+      .reduce((sum, item) => sum + item.price * item.quantity, 0);
+    dispatch(updateSplitBillAmount(newTotal));
+  };
+
+  const handleSave = () => {
+    dispatch(updateSplitBillAmount(selectedTotal));
+    onClose();
+  };
+
+  const handleRemoveSplitWay = () => {
+    setSelectedItems(new Set());
+    dispatch(updateSplitBillAmount(0));
+    onRemoveSplitWay?.();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("splitBill.payForYourItems")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={515}
+      snapPoints={[515]}
+    >
+      <div
+        style={{
+          padding: "0 20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 12,
+          maxHeight: "500px",
+          overflowY: "auto",
+        }}
+      >
+        {items.length === 0 ? (
+          <ProText
+            type="secondary"
+            style={{ textAlign: "center", padding: 20 }}
+          >
+            {t("cart.emptyCart")}
+          </ProText>
+        ) : (
+          items.map((item) => {
+            const itemId = item.uniqueId || item.id.toString();
+            const isSelected = selectedItems.has(itemId);
+            const itemTotal = item.price * item.quantity;
+
+            return (
+              <Card
+                key={itemId}
+                style={{
+                  border: "none",
+                  cursor: "pointer",
+                }}
+                onClick={() => handleItemToggle(itemId)}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: 12,
+                    alignItems: "center",
+                  }}
+                >
+                  <Image
+                    src={item.image}
+                    alt={item.name}
+                    width={60}
+                    height={60}
+                    preview={false}
+                    style={{
+                      borderRadius: 8,
+                      objectFit: "cover",
+                    }}
+                  />
+                  <div
+                    style={{
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 4,
+                    }}
+                  >
+                    <ProText style={{ fontSize: 14, fontWeight: 500 }}>
+                      {item.name}
+                    </ProText>
+                    <ProText type="secondary" style={{ fontSize: 12 }}>
+                      {t("cart.quantity")}: {item.quantity}
+                    </ProText>
+                    <ArabicPrice price={itemTotal} />
+                  </div>
+                  <Button
+                    type={isSelected ? "primary" : "default"}
+                    shape="circle"
+                    style={{
+                      width: 32,
+                      height: 32,
+                      minWidth: 32,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {isSelected ? "✓" : "+"}
+                  </Button>
+                </div>
+              </Card>
+            );
+          })
+        )}
+
+        {selectedTotal > 0 && (
+          <div
+            style={{
+              padding: 16,
+              backgroundColor: "rgba(255, 183, 0, 0.08)",
+              borderRadius: 8,
+              marginTop: 8,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <ProText style={{ fontSize: 16, fontWeight: 600 }}>
+                {t("splitBill.selectedTotal")}:
+              </ProText>
+              <ArabicPrice price={selectedTotal} />
+            </div>
+          </div>
+        )}
+
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            marginTop: 20,
+          }}
+        >
+          <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
+            {t("splitBill.removeSplitWay")}
+          </Button>
+          <Button
+            type="primary"
+            style={{ flex: 1, boxShadow: "none" }}
+            onClick={handleSave}
+            disabled={selectedTotal === 0}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
+      </div>
+    </ProBottomSheet>
+  );
+}
--- a/src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx
+++ b/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)}
+    />
+    </>
  );
 }