redeem: initial commit

src/pages/redeem/components/VoucherSummary/VoucherSummary.tsx

@@ -0,0 +1,90 @@
+import { Card, Checkbox, Divider, Space } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import {
+  selectCart,
+  selectCartTotal,
+  selectGrandTotal,
+} from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { useGetRestaurantDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import styles from "./VoucherSummary.module.css";
+import { CSSProperties } from "react";
+
+export default function VoucherSummary() {
+  const { t } = useTranslation();
+  const { subdomain } = useParams();
+  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
+  const subtotal = useAppSelector(selectCartTotal);
+  const grandTotal = useAppSelector(selectGrandTotal);
+
+  const titlesStyle: CSSProperties = {
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: 12,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    textAlign: "center",
+  };
+
+  return (
+    <>
+      <Card className={`${styles.voucherSummary}`}>
+        <ProTitle
+          style={{
+            fontWeight: 500,
+            fontStyle: "Medium",
+            fontSize: 18,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#333333",
+          }}
+        >
+          {t("cart.voucherSummary")}
+        </ProTitle>
+        <Divider style={{ margin: "15px 0 15px 0" }} />
+        <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
+          <div className={styles.summaryRow}>
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.voucherBalance")}
+            </ProText>
+            <ArabicPrice price={subtotal} textStyle={titlesStyle} />
+          </div>
+          <div className={styles.summaryRow}>
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.voucherApplied")}
+            </ProText>
+            <ArabicPrice
+              price={Number(restaurant?.delivery_fees || 0)}
+              textStyle={{ ...titlesStyle, color: "#434E5C" }}
+            />
+          </div>
+
+          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
+            <ProText
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#333333",
+              }}
+            >
+              {t("cart.remainingVoucherAmount")}
+            </ProText>
+            <ArabicPrice
+              price={grandTotal}
+              textStyle={{ ...titlesStyle, color: "#434E5C" }}
+            />
+          </div>
+        </Space>
+      </Card>
+    </>
+  );
+}