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/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>
+  );
+}