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