checkout: add card deyails & card amount BT

2025-12-31 23:49:04 +03:00
parent 1d2c1fda87
commit 3b0b8ceab6
12 changed files with 373 additions and 108 deletions
--- a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx
+++ b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx
@@ -0,0 +1,109 @@
+import { Button, Form } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  selectCart,
+  selectGrandTotal,
+  updateGiftDetails,
+  updateSplitBillAmount,
+} from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import ProText from "components/ProText";
+import { ProInputNumber } from "components/Inputs/ProInputNumber";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GiftAmountBottomSheet({
+  isOpen,
+  onClose,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { giftDetails, } = useAppSelector(selectCart);
+  const [amount, setAmount] = useState<string>(
+    giftDetails?.amount && giftDetails?.amount > 0 ? giftDetails?.amount?.toString() : "",
+  );
+
+  const handleSave = () => {
+    const numAmount = parseFloat(amount) || 0;
+    dispatch(updateGiftDetails({amount: numAmount}));
+    onClose();
+  };
+
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("cardDetails.customAmount")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={295}
+      snapPoints={[295]}
+      contentStyle={{
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 16,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color:"#333333"
+            }}
+          >
+            {t("cardDetails.enterCustomOucherAmount")}
+          </ProText>
+          <Form.Item name="amount">
+            <ProInputNumber
+              value={amount}
+              onChange={(value) => {
+                setAmount(value?.toString() || "");
+                dispatch(updateSplitBillAmount(Number(value) || 0));
+              }}
+              placeholder={t("cardDetails.amount")}
+              min={0}
+            />
+          </Form.Item>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          margin: 20,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+            height: 48,
+          }}
+          onClick={handleSave}
+          disabled={!amount || parseFloat(amount) <= 0}
+        >
+          {t("cardDetails.add")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}