redeem: initial commit

src/pages/redeem/components/VoucherBalanceCard.tsx

@@ -0,0 +1,124 @@
+import { Divider, Switch, Tag } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import { selectCart } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./VoucherBalanceCard.module.css";
+import { useNavigate, useParams } from "react-router-dom";
+import CardAmountIcon from "components/Icons/CardAmountIcon";
+import ArabicPrice from "components/ArabicPrice";
+
+export function VoucherBalanceCard() {
+  const { t } = useTranslation();
+  const { giftDetails } = useAppSelector(selectCart);
+
+  const navigate = useNavigate();
+  const { subdomain } = useParams();
+
+  return (
+    <>
+      <ProInputCard
+        title={t("redeem.voucherBalance")}
+        titleRight={
+          <>
+            <Tag
+              style={{
+                height: 23,
+                textAlign: "center",
+                opacity: 1,
+                paddingRight: 10,
+                paddingLeft: 10,
+                borderRadius: 100,
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 12,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                cursor: "pointer",
+                backgroundColor: "#FFF9E6",
+                color: "#B58D00",
+              }}
+            >
+              {t("redeem.pending")}
+            </Tag>
+          </>
+        }
+      >
+        <div className={styles.orderNotes}>
+          <div
+            style={{
+              height: 42,
+              width: 64,
+              backgroundColor: "var(--background)",
+              borderRadius: 8,
+            }}
+          >
+            <CardAmountIcon />
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#777580",
+              }}
+            >
+              {t("redeem.yourGiftCardBalance")}
+            </ProText>
+
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#333333",
+              }}
+            >
+              <ArabicPrice price={giftDetails?.amount || 0} />
+            </ProText>
+          </div>
+          <Switch />
+        </div>
+
+        <Divider style={{ margin: "10px 0" }} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          onClick={() => {
+            navigate(`/${subdomain}/cart`);
+          }}
+        >
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#777580",
+              cursor: "pointer",
+            }}
+          >
+            {t("redeem.voucherWillBeAppliedAtCheckout")}
+          </ProText>
+        </div>
+      </ProInputCard>
+    </>
+  );
+}