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