enhance E-Amount card

2026-01-01 14:52:40 +03:00
parent 5e209d5d78
commit 527f4686de
6 changed files with 206 additions and 113 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -491,6 +491,8 @@
    "eCardAmount": "مبلغ البطاقة الإلكترونية",
    "receiverName": "اسم المستلم",
    "edit": "تعديل",
-    "yourInformation": "تفاصيلك"
+    "yourInformation": "تفاصيلك",
+    "minimumAmountShouldBe1OMR": "يجب أن يكون المبلغ الأدنى 1 OMR",
+    "add": "أضف"
  }
 }
--- a/src/assets/locals/en.json
+++ b/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"
  }
 }
--- a/src/pages/CardDetails/CardDetails.tsx
+++ b/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)}
+      />
    </>
  );
 }
--- a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx
+++ b/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>

--- a/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.module.css
+++ b/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.module.css
@@ -16,3 +16,9 @@
    gap: 8px;
  }
 }
+
+.editIcon {
+  position: absolute;
+  top: -7px;
+  right: 5px;
+}
--- a/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx
+++ b/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>