uodate loyalty card

src/components/LoyaltyCard/LoyaltyCard.module.css

@@ -36,9 +36,9 @@
   background-image: url(/empty-dish.png);
   background-size: cover;
   background-position: center;
-  width: 32px;
+  width: 40px;
-  height: 32px;
+  height: 40px;
-  border-radius: 50%;
+  border-radius: 6px;
   border: none;
   margin-left: 0px;
 }

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -87,54 +87,41 @@ const LoyaltyCard = () => {
                 )}
               </ProText>
             </Col>
-            <Col>
+            <Col>{/* <PresentIcon /> */}</Col>
-              {/* <PresentIcon /> */}
-            </Col>
           </Row>
         )}
         {token && !isHasLoyaltyGift && (
-          <Row justify="space-between" align="middle">
+          <div
-            <Col>
+            style={{
-              <div className={styles.presentIcon}>
+              display: "flex",
-                <div style={{ display: "flex" }}>
+              flexDirection: "row",
-                  <Image
+              gap: 10,
-                    className={styles.presentIconItem}
+              overflow: "auto",
-                    preview={false}
+              scrollbarWidth: "none",
-                    width={32}
+            }}
-                    height={32}
+          >
-                    src={restaurant?.loyalty_stamp_image}
+            {Array.from({ length: restaurant?.loyalty_stamps || 0 }).map(
-                  />
+              (_, index) => {
-                  <ProText
+                const currentPoints = restaurant?.customer_loyalty_points || 0;
-                    type="secondary"
+                const isCollected = index < currentPoints;
-                    strong
+                return (
-                    style={{
+                  <Col key={index}>
-                      fontSize: "1rem",
+                    <Image
-                      fontWeight: 400,
+                      key={index}
-                      position: "relative",
+                      className={styles.presentIconItem}
-                      top: 3,
+                      preview={false}
-                      margin: "0 2px",
+                      width={40}
-                    }}
+                      height={40}
-                  >
+                      src={restaurant?.loyalty_stamp_image}
-                    x
+                      style={{
-                    {(restaurant?.loyalty_stamps ?? 0) -
+                        opacity: isCollected ? 1 : 0.4,
-                      (restaurant?.customer_loyalty_points ?? 0)}
+                      }}
-                  </ProText>{" "}
+                    />
-                </div>
+                  </Col>
-              </div>
+                );
-            </Col>
+              },
-            {/* <Col>
+            )}
-              <Button
+          </div>
-                style={{
-                  backgroundColor: colors.primary,
-                  color: "white",
-                  border: 0,
-                  height: 32,
-                }}
-              >
-                {t("menu.claim")}
-              </Button>
-            </Col> */}
-          </Row>
         )}
       </Card>
     </div>