enhance E-Amount card

src/pages/CardDetails/CardDetails.tsx

@@ -23,7 +23,8 @@ 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 [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
+    useState(false);
   const { subdomain } = useParams();
   const navigate = useNavigate();
 
@@ -31,7 +32,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.toString(),
       );
       if (index !== -1) {
         setCurrentIndex(index);
@@ -59,99 +60,110 @@ export default function CardDetailsPage() {
 
   return (
     <>
-    <Layout>
-      <ProHeader>{t("cardDetails.title")}</ProHeader>
-      <Layout.Content className={styles.checkoutContainer}>
-        <div
-          style={{
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: "50px 28px 35px 28px",
-            gap: 8,
-          }}
-        >
-          <ProText style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}>
-            {t("cardDetails.addGiftDetails")}
-          </ProText>
-          <ProText style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}>
-            {t("cardDetails.description")}
-          </ProText>
-        </div>
-        {isLoading || !currentCard ? (
-          <div className={cardStyles.carouselContainer}>
-            <Skeleton.Avatar
-              active
-              size={40}
-              shape="circle"
-              style={{ flexShrink: 0 }}
-            />
-            <div className={cardStyles.cardWrapper}>
-              <Skeleton.Image
+      <Layout>
+        <ProHeader>{t("cardDetails.title")}</ProHeader>
+        <Layout.Content className={styles.checkoutContainer}>
+          <div
+            style={{
+              textAlign: "center",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: "50px 28px 35px 28px",
+              gap: 8,
+            }}
+          >
+            <ProText
+              style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
+            >
+              {t("cardDetails.addGiftDetails")}
+            </ProText>
+            <ProText
+              style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
+            >
+              {t("cardDetails.description")}
+            </ProText>
+          </div>
+          {isLoading || !currentCard ? (
+            <div className={cardStyles.carouselContainer}>
+              <Skeleton.Avatar
                 active
-                style={{
-                  width: 205,
-                  height: 134,
-                  borderRadius: 8,
-                }}
+                size={40}
+                shape="circle"
+                style={{ flexShrink: 0 }}
+              />
+              <div className={cardStyles.cardWrapper}>
+                <Skeleton.Image
+                  active
+                  style={{
+                    width: 205,
+                    height: 134,
+                    borderRadius: 8,
+                  }}
+                />
+              </div>
+              <Skeleton.Avatar
+                active
+                size={40}
+                shape="circle"
+                style={{ flexShrink: 0 }}
               />
             </div>
-            <Skeleton.Avatar
-              active
-              size={40}
-              shape="circle"
-              style={{ flexShrink: 0 }}
-            />
-          </div>
-        ) : (
-          <div className={cardStyles.carouselContainer}>
-            <Button
-              type="text"
-              className={cardStyles.arrowButton}
-              onClick={isRTL ? handleNext : handlePrevious}
-              icon={<BackIcon iconSize={24} />}
-            />
-            <div className={cardStyles.cardWrapper}>
-              <Image
-                src={currentCard.imageURL}
-                alt={currentCard.image}
-                width={205}
-                height={134}
-                className={cardStyles.cardImage}
+          ) : (
+            <div className={cardStyles.carouselContainer}>
+              <Button
+                type="text"
+                className={cardStyles.arrowButton}
+                onClick={isRTL ? handleNext : handlePrevious}
+                icon={<BackIcon iconSize={24} />}
+              />
+              <div className={cardStyles.cardWrapper}>
+                <Image
+                  src={currentCard.imageURL}
+                  alt={currentCard.image}
+                  width={205}
+                  height={134}
+                  className={cardStyles.cardImage}
+                />
+              </div>
+              <Button
+                type="text"
+                className={cardStyles.arrowButton}
+                onClick={isRTL ? handlePrevious : handleNext}
+                icon={<NextIcon iconSize={24} />}
               />
             </div>
-            <Button
-              type="text"
-              className={cardStyles.arrowButton}
-              onClick={isRTL ? handlePrevious : handleNext}
-              icon={<NextIcon iconSize={24} />}
-            />
-          </div>
-        )}
-        <Form
-          layout="vertical"
-          style={{ display: "flex", flexDirection: "column", gap: 16 }}
-        >
-          {giftDetails?.giftType !== "items" && <GiftAmountCard onOpen={() => setIsGiftAmountBottomSheetOpen(true)} />}
-          <ReceivernformationCard />
-          <SenderformationCard />
-          <TimeEstimateCard />
-        </Form>
-      </Layout.Content>
-      <Layout.Footer className={styles.checkoutButtonContainer}>
-        <Button
-          type="primary"
-          shape="round"
-          className={styles.checkoutButton}
-          onClick={handleCheckout}
-        >
-          {t("cardDetails.checkout")}
-        </Button>
-      </Layout.Footer>
-    </Layout>
-    <GiftAmountBottomSheet isOpen={isGiftAmountBottomSheetOpen} onClose={() => setIsGiftAmountBottomSheetOpen(false)} />
+          )}
+          <Form
+            layout="vertical"
+            style={{ display: "flex", flexDirection: "column", gap: 16 }}
+          >
+            {giftDetails?.giftType !== "items" && (
+              <GiftAmountCard
+                onOpen={() => setIsGiftAmountBottomSheetOpen(true)}
+              />
+            )}
+            <ReceivernformationCard />
+            <SenderformationCard />
+            <TimeEstimateCard />
+          </Form>
+        </Layout.Content>
+        <Layout.Footer className={styles.checkoutButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.checkoutButton}
+            onClick={handleCheckout}
+          >
+            {t("cardDetails.checkout")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }