loyalty: enhance card texts

src/assets/locals/ar.json

@@ -166,7 +166,9 @@
     "address": "العنوان",
     "openingTimes": "ساعات العمل",
     "customizable": "قابل للتخصيص",
-    "youHaveXEarnedRewardsReadyToRedeem": "🎉 لديك {{rewards}} مكافأة مستحقة للاستخدام!"
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 لديك {{rewards}} مكافأة مستحقة للاستخدام!",
+    "justXMorePurchasesToUnlockYourFREEItem": "فقط {{cups}} أكثر للفتح الوجبة المجانية!",
+    "youreJustXCupsAwayFromYourNextReward": "🎉 أنت فقط {{cups}} أكثر للحصول على المكافأة التالية!"
   },
   "cart": {
     "addSpecialRequestOptional": "إضافة طلب خاص (اختياري)",

src/assets/locals/en.json

@@ -178,7 +178,9 @@
     "address": "Address",
     "openingTimes": "Opening Times",
     "customizable": "Customizable",
-    "youHaveXEarnedRewardsReadyToRedeem": "🎉 You have {{rewards}} rewards ready to redeem!"
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 You have {{rewards}} rewards ready to redeem!",
+    "justXMorePurchasesToUnlockYourFREEItem": "Just {{cups}} more purchases to unlock your FREE item!",
+    "youreJustXCupsAwayFromYourNextReward": "🎉 You're just {{cups}} cups away from your next reward!"
   },
   "cart": {
     "remainingToPay": "Remaining to Pay",

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -115,27 +115,25 @@ const LoyaltyCard = () => {
                 paddingBottom: 12,
               }}
             >
-              {Array.from({ length: loyaltyStamps }).map(
+              {Array.from({ length: loyaltyStamps }).map((_, index) => {
-                (_, index) => {
+                const currentPoints = customerLoyaltyPoints % loyaltyStamps;
-                  const currentPoints = customerLoyaltyPoints % loyaltyStamps;
+                const isCollected = index < currentPoints;
-                  const isCollected = index < currentPoints;
+                return (
-                  return (
+                  <Col key={index}>
-                    <Col key={index}>
+                    <Image
-                      <Image
+                      key={index}
-                        key={index}
+                      className={styles.presentIconItem}
-                        className={styles.presentIconItem}
+                      preview={false}
-                        preview={false}
+                      width={40}
-                        width={40}
+                      height={40}
-                        height={40}
+                      src={restaurant?.loyalty_stamp_image}
-                        src={restaurant?.loyalty_stamp_image}
+                      style={{
-                        style={{
+                        opacity: isCollected ? 1 : 0.4,
-                          opacity: isCollected ? 1 : 0.4,
+                      }}
-                        }}
+                    />
-                      />
+                  </Col>
-                    </Col>
+                );
-                  );
+              })}
-                },
-              )}
             </div>
             <ProText
               strong
@@ -150,11 +148,11 @@ const LoyaltyCard = () => {
               }}
             >
               {customerLoyaltyPoints < loyaltyStamps &&
-                t("rewardsAndLoyalty.youreJustXCupsAwayFromYourNextReward", {
+                t("menu.justXMorePurchasesToUnlockYourFREEItem", {
                   cups: remainingToNextReward,
                 })}
               {customerLoyaltyPoints >= loyaltyStamps &&
-                t("rewardsAndLoyalty.youreJustXCupsAwayFromYourNextReward", {
+                t("menu.youreJustXCupsAwayFromYourNextReward", {
                   cups: remainingToNextReward,
                 })}
             </ProText>