checkout: add card deyails & card amount BT

src/pages/CardDetails/CardDetails.tsx

@@ -15,6 +15,7 @@ import SenderformationCard from "./components/SenderformationCard/Senderformatio
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
 import { useNavigate, useParams } from "react-router-dom";
 import GiftAmountCard from "./components/GiftAmountCard/GiftAmountCard";
+import { GiftAmountBottomSheet } from "./components/GiftAmountBottomSheet";
 
 export default function CardDetailsPage() {
   const { t } = useTranslation();
@@ -22,6 +23,7 @@ export default function CardDetailsPage() {
   const { giftDetails } = useAppSelector(selectCart);
   const { isRTL } = useAppSelector((state) => state.locale);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] = useState(false);
   const { subdomain } = useParams();
   const navigate = useNavigate();
 
@@ -29,7 +31,7 @@ export default function CardDetailsPage() {
   useEffect(() => {
     if (cards && giftDetails?.cardId) {
       const index = cards.findIndex(
-        (card) => card.id.toString() === giftDetails.cardId,
+        (card) => card?.id?.toString() === giftDetails.cardId,
       );
       if (index !== -1) {
         setCurrentIndex(index);
@@ -56,6 +58,7 @@ export default function CardDetailsPage() {
   }, [subdomain]);
 
   return (
+    <>
     <Layout>
       <ProHeader>{t("cardDetails.title")}</ProHeader>
       <Layout.Content className={styles.checkoutContainer}>
@@ -131,7 +134,7 @@ export default function CardDetailsPage() {
           layout="vertical"
           style={{ display: "flex", flexDirection: "column", gap: 16 }}
         >
-          {giftDetails?.giftType !== "items" && <GiftAmountCard />}
+          {giftDetails?.giftType !== "items" && <GiftAmountCard onOpen={() => setIsGiftAmountBottomSheetOpen(true)} />}
           <ReceivernformationCard />
           <SenderformationCard />
           <TimeEstimateCard />
@@ -148,5 +151,7 @@ export default function CardDetailsPage() {
         </Button>
       </Layout.Footer>
     </Layout>
+    <GiftAmountBottomSheet isOpen={isGiftAmountBottomSheetOpen} onClose={() => setIsGiftAmountBottomSheetOpen(false)} />
+    </>
   );
 }

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

src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx

@@ -6,11 +6,11 @@ import ArabicPrice from "components/ArabicPrice";
 import ProText from "components/ProText";
 import EditIcon from "components/Icons/EditIcon";
 
-export default function GiftAmountCard() {
+export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
   const { t } = useTranslation();
 
   return (
-    <ProInputCard title={t("cardDetails.eGiftCardAmount")}>
+    <ProInputCard title={t("cardDetails.eCardAmount")}>
       <div className={styles.customerInformationCard}>
         <Button
           style={{
@@ -87,6 +87,7 @@ export default function GiftAmountCard() {
         }}
         icon={<EditIcon className={styles.editIcon} color="#FFF" />}
         iconPlacement="start"
+        onClick={onOpen}
       >
         <ProText
           style={{