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;
-  height: 32px;
-  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
   border: none;
   margin-left: 0px;
 }

src/components/LoyaltyCard/LoyaltyCard.tsx

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