enhance E-Amount card

src/assets/locals/ar.json

@@ -491,6 +491,8 @@
     "eCardAmount": "مبلغ البطاقة الإلكترونية",
     "receiverName": "اسم المستلم",
     "edit": "تعديل",
-    "yourInformation": "تفاصيلك"
+    "yourInformation": "تفاصيلك",
+    "minimumAmountShouldBe1OMR": "يجب أن يكون المبلغ الأدنى 1 OMR",
+    "add": "أضف"
   }
 }

src/assets/locals/en.json

@@ -503,6 +503,8 @@
     "eCardAmount": "E-Card Amount",
     "receiverName": "Receiver Name",
     "edit": "Edit",
-    "yourInformation": "Your Information"
+    "yourInformation": "Your Information",
+    "minimumAmountShouldBe1OMR": "Minimum amount should be 1 OMR",
+    "add": "Add"
   }
 }

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);
@@ -73,10 +74,14 @@ export default function CardDetailsPage() {
               gap: 8,
             }}
           >
-          <ProText style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}>
+            <ProText
+              style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
+            >
               {t("cardDetails.addGiftDetails")}
             </ProText>
-          <ProText style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}>
+            <ProText
+              style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
+            >
               {t("cardDetails.description")}
             </ProText>
           </div>
@@ -134,7 +139,11 @@ export default function CardDetailsPage() {
             layout="vertical"
             style={{ display: "flex", flexDirection: "column", gap: 16 }}
           >
-          {giftDetails?.giftType !== "items" && <GiftAmountCard onOpen={() => setIsGiftAmountBottomSheetOpen(true)} />}
+            {giftDetails?.giftType !== "items" && (
+              <GiftAmountCard
+                onOpen={() => setIsGiftAmountBottomSheetOpen(true)}
+              />
+            )}
             <ReceivernformationCard />
             <SenderformationCard />
             <TimeEstimateCard />
@@ -151,7 +160,10 @@ export default function CardDetailsPage() {
           </Button>
         </Layout.Footer>
       </Layout>
-    <GiftAmountBottomSheet isOpen={isGiftAmountBottomSheetOpen} onClose={() => setIsGiftAmountBottomSheetOpen(false)} />
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }

src/pages/CardDetails/components/GiftAmountBottomSheet.tsx

@@ -24,9 +24,11 @@ export function GiftAmountBottomSheet({
 }: SplitBillChoiceBottomSheetProps) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { giftDetails, } = useAppSelector(selectCart);
+  const { giftDetails } = useAppSelector(selectCart);
   const [amount, setAmount] = useState<string>(
-    giftDetails?.amount && giftDetails?.amount > 0 ? giftDetails?.amount?.toString() : "",
+    giftDetails?.amount && giftDetails?.amount > 0
+      ? giftDetails?.amount?.toString()
+      : "",
   );
 
   const handleSave = () => {
@@ -35,7 +37,6 @@ export function GiftAmountBottomSheet({
     onClose();
   };
 
-
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -51,13 +52,12 @@ export function GiftAmountBottomSheet({
     >
       <div
         style={{
-          padding: "20px",
+          padding: "20px 20px 0 20px",
           display: "flex",
           flexDirection: "column",
-          gap: 20,
         }}
       >
-        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
           <ProText
             style={{
               fontWeight: 400,
@@ -65,7 +65,7 @@ export function GiftAmountBottomSheet({
               fontSize: 16,
               lineHeight: "140%",
               letterSpacing: "0%",
-              color:"#333333"
+              color: "#333333",
             }}
           >
             {t("cardDetails.enterCustomOucherAmount")}
@@ -81,6 +81,18 @@ export function GiftAmountBottomSheet({
               min={0}
             />
           </Form.Item>
+          <ProText
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#B1B0B6",
+            }}
+          >
+            {t("cardDetails.minimumAmountShouldBe1OMR")}
+          </ProText>
         </div>
       </div>
 

src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.module.css

@@ -16,3 +16,9 @@
     gap: 8px;
   }
 }
+
+.editIcon {
+  position: absolute;
+  top: -7px;
+  right: 5px;
+}

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

@@ -5,23 +5,52 @@ import styles from "./GiftAmountCard.module.css";
 import ArabicPrice from "components/ArabicPrice";
 import ProText from "components/ProText";
 import EditIcon from "components/Icons/EditIcon";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { updateGiftDetails } from "features/order/orderSlice";
+import { useState, useEffect, useMemo } from "react";
 
 export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { giftDetails } = useAppSelector((state) => state.order);
+  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
+
+  useEffect(() => {
+    const amount = giftDetails?.amount;
+    if (amount === 10 || amount === 20 || amount === 30) {
+      setSelectedAmount(amount);
+    } else {
+      setSelectedAmount(null);
+    }
+  }, [giftDetails?.amount]);
+
+  const handleAmountClick = (amount: number) => {
+    setSelectedAmount(amount);
+    dispatch(updateGiftDetails({ amount }));
+  };
+
+  const isDefaultAmount = useMemo(() => {
+    const amount = giftDetails?.amount;
+    return amount === 10 || amount === 20 || amount === 30;
+  }, [giftDetails?.amount]);
 
   return (
     <ProInputCard title={t("cardDetails.eCardAmount")}>
       <div className={styles.customerInformationCard}>
         <Button
+          onClick={() => handleAmountClick(10)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 10 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={10.00}
+            price={10.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -29,20 +58,27 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 10 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
         <Button
+          onClick={() => handleAmountClick(20)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 20 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={20.00}
+            price={20.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -50,20 +86,27 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 20 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
         <Button
+          onClick={() => handleAmountClick(30)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 30 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={30.00}
+            price={30.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -71,7 +114,10 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 30 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
@@ -83,23 +129,36 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
           width: "100%",
           height: 40,
           border: "none",
-          backgroundColor: "#030014",
+          backgroundColor:
+            giftDetails?.amount && !isDefaultAmount ? "#FFB7001F" : "#030014",
         }}
-        icon={<EditIcon className={styles.editIcon} color="#FFF" />}
+        icon={
+          giftDetails?.amount && !isDefaultAmount ? (
+            <EditIcon
+              className={styles.editIcon}
+              color={
+                giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF"
+              }
+            />
+          ) : undefined
+        }
         iconPlacement="start"
         onClick={onOpen}
       >
         <ProText
           style={{
-            color: "#FFF",
+            color: giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF",
             fontWeight: 500,
             fontStyle: "Medium",
             fontSize: 14,
             lineHeight: "140%",
             letterSpacing: "0%",
+            textAlign: "center",
           }}
         >
-          {t("cardDetails.costumeAmount")}
+          {giftDetails?.amount && !isDefaultAmount
+            ? giftDetails?.amount
+            : t("cardDetails.costumeAmount")}
         </ProText>
       </Button>
     </ProInputCard>