loyalty: enhance card texts

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -15,10 +15,10 @@ const LoyaltyCard = () => {
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
   const { isRTL } = useAppSelector((state) => state.locale);
   const token = localStorage.getItem(ACCESS_TOKEN);
-  const isHasLoyaltyGift =
-    (restaurant?.loyalty_stamps || 0) -
-      (restaurant?.customer_loyalty_points || 0) <=
-    0;
+  const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;
+  const customerLoyaltyPoints = restaurant?.customer_loyalty_points ?? 0;
+  const remainingToNextReward =
+    loyaltyStamps - (customerLoyaltyPoints % loyaltyStamps);
 
   return (
     <div className={styles.loyaltyContainer}>
@@ -62,8 +62,14 @@ const LoyaltyCard = () => {
               }}
             >
               {token &&
+                customerLoyaltyPoints < loyaltyStamps &&
                 t("menu.loyaltyDescription", {
-                  value: restaurant?.loyalty_stamps ?? 0,
+                  value: loyaltyStamps,
+                })}
+              {token &&
+                customerLoyaltyPoints >= loyaltyStamps &&
+                t("menu.youHaveXEarnedRewardsReadyToRedeem", {
+                  rewards: Math.floor(customerLoyaltyPoints / loyaltyStamps),
                 })}
               {!token && (
                 <div style={{ paddingTop: 4 }}>
@@ -95,40 +101,64 @@ const LoyaltyCard = () => {
               )}
             </ProText>
           </Col>
-          <Col> {isHasLoyaltyGift && <PresentIcon />}</Col>
+          {/* <Col> {isHasLoyaltyGift && <PresentIcon />}</Col> */}
         </Row>
         {token && (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              gap: 12,
-              overflow: "hidden",
-              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={40}
-                      height={40}
-                      src={restaurant?.loyalty_stamp_image}
-                      style={{
-                        opacity: isCollected ? 1 : 0.4,
-                      }}
-                    />
-                  </Col>
-                );
-              },
-            )}
-          </div>
+          <>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: 12,
+                overflow: "auto",
+                scrollbarWidth: "none",
+                paddingBottom: 12,
+              }}
+            >
+              {Array.from({ length: loyaltyStamps }).map(
+                (_, index) => {
+                  const currentPoints = customerLoyaltyPoints % loyaltyStamps;
+                  const isCollected = index < currentPoints;
+                  return (
+                    <Col key={index}>
+                      <Image
+                        key={index}
+                        className={styles.presentIconItem}
+                        preview={false}
+                        width={40}
+                        height={40}
+                        src={restaurant?.loyalty_stamp_image}
+                        style={{
+                          opacity: isCollected ? 1 : 0.4,
+                        }}
+                      />
+                    </Col>
+                  );
+                },
+              )}
+            </div>
+            <ProText
+              strong
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color:
+                  customerLoyaltyPoints < loyaltyStamps ? "#777580" : "#32AD6D",
+              }}
+            >
+              {customerLoyaltyPoints < loyaltyStamps &&
+                t("rewardsAndLoyalty.youreJustXCupsAwayFromYourNextReward", {
+                  cups: remainingToNextReward,
+                })}
+              {customerLoyaltyPoints >= loyaltyStamps &&
+                t("rewardsAndLoyalty.youreJustXCupsAwayFromYourNextReward", {
+                  cups: remainingToNextReward,
+                })}
+            </ProText>
+          </>
         )}
       </Card>
     </div>