Initial commit

src/components/LoyaltyCard/LoyaltyCard.module.css

@@ -0,0 +1,62 @@
+.loyaltyIcon {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-left: -2px;
+  top: 2px;
+}
+
+.loyaltyContainer {
+  height: 115px;
+  background-color: #FFF;
+  border: none;
+   margin-bottom: 1rem;
+}
+
+.loyaltyContainer :global(.ant-card-body) {
+  height: 115px;
+  padding: 12px 16px !important;
+  border: none;
+  border-radius: 0px;
+}
+
+.loyaltyCard {
+  border-radius: 0px !important;
+  border: none
+}
+
+.presentIcon {
+  display: flex;
+  position: relative;
+  top: -1;
+  margin-left: -4px;
+}
+
+.presentIconItem {
+  background-image: url(/empty-dish.png);
+  background-size: cover;
+  background-position: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  margin-left: 0px;
+}
+
+:global(.darkApp) .loyaltyIcon path {
+  fill: none !important;
+  stroke: var(--primary) !important;
+  transition: all 0.3s ease;
+}
+
+:global(.rtl) .loyaltyIcon {
+  margin-right: -2px;
+}
+
+:global(.rtl) .presentIcon {
+  margin-right: -4px;
+}
+
+:global(.rtl) .presentIconItem {
+  margin-right: 0px;
+}

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -0,0 +1,77 @@
+import { Button, Card, Col, Row } from "antd";
+import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
+import PresentIcon from "components/Icons/cart/PresentIcon";
+import { useTranslation } from "react-i18next";
+import { colors } from "../../ThemeConstants";
+import ProText from "../ProText";
+import styles from "./LoyaltyCard.module.css";
+
+const LoyaltyCard = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.loyaltyContainer}>
+      <Card className={styles.loyaltyCard}>
+        <Row
+          justify="space-between"
+          align="middle"
+          style={{ marginBottom: "0.5rem" }}
+        >
+          <Col>
+            <Row align="middle" gutter={[8, 8]}>
+              <Col>
+                <LoyaltyIcon className={styles.loyaltyIcon} />
+              </Col>
+              <Col>
+                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
+                  {t("menu.loyaltyPoints")}
+                </ProText>
+              </Col>
+            </Row>
+            <ProText
+              type="secondary"
+              strong
+              style={{
+                fontSize: "14px",
+                fontWeight: 700,
+                position: "relative",
+                top: -2,
+              }}
+            >
+              {t("menu.loyaltyDescription")}
+            </ProText>
+          </Col>
+          <Col>
+            <PresentIcon />
+          </Col>
+        </Row>
+        <Row justify="space-between" align="middle">
+          <Col>
+            <div className={styles.presentIcon}>
+              <div style={{ display: "flex" }}>
+                {["#006347", "#e23000", "#006d34", "#006db7", "#e40000"].map(
+                  (color) => (
+                    <div key={color} className={styles.presentIconItem} />
+                  )
+                )}
+              </div>
+            </div>
+          </Col>
+          <Col>
+            <Button
+              style={{
+                backgroundColor: colors.primary,
+                color: "white",
+                border: 0,
+                height: 32,
+              }}
+            >
+              {t("menu.claim")}
+            </Button>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  );
+};
+
+export default LoyaltyCard;