loyalty: enhance card texts

src/assets/locals/ar.json

@@ -130,7 +130,7 @@
     "payDescription": "الدفع",
     "rating": "التقييم ",
     "loyaltyPoints": "نقاط الولاء",
-    "loyaltyDescription": "اشترى {{value}} وجبات واحصل على وجبة مجانية",
+    "loyaltyDescription": "اشترى {{value}} وجبات واحصل على وجبة مجانية!",
     "youMightAlsoLike": "قد تعجبك أيضاً..",
     "choose1": "اختر 1",
     "specialRequest": "طلب خاص",
@@ -165,7 +165,8 @@
     "restaurantIsClosed": "المطعم مغلق",
     "address": "العنوان",
     "openingTimes": "ساعات العمل",
-    "customizable": "قابل للتخصيص"
+    "customizable": "قابل للتخصيص",
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 لديك {{rewards}} مكافأة مستحقة للاستخدام!"
   },
   "cart": {
     "addSpecialRequestOptional": "إضافة طلب خاص (اختياري)",

src/assets/locals/en.json

@@ -144,7 +144,7 @@
     "close": "Close",
     "rating": "Rating ",
     "loyaltyPoints": "Loyalty Points",
-    "loyaltyDescription": "Buy {{value}} meals and get 1 FREE",
+    "loyaltyDescription": "Buy {{value}} meals and get 1 FREE!",
     "choose1": "Choose 1",
     "youMightAlsoLike": "You might also like..",
     "specialRequest": "Special Request",
@@ -177,7 +177,8 @@
     "payDescription": "Pay for your order",
     "address": "Address",
     "openingTimes": "Opening Times",
-    "customizable": "Customizable"
+    "customizable": "Customizable",
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 You have {{rewards}} rewards ready to redeem!"
   },
   "cart": {
     "remainingToPay": "Remaining to Pay",

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,21 +101,23 @@ const LoyaltyCard = () => {
               )}
             </ProText>
           </Col>
-          <Col> {isHasLoyaltyGift && <PresentIcon />}</Col>
+          {/* <Col> {isHasLoyaltyGift && <PresentIcon />}</Col> */}
         </Row>
         {token && (
+          <>
             <div
               style={{
                 display: "flex",
                 flexDirection: "row",
                 gap: 12,
-              overflow: "hidden",
+                overflow: "auto",
                 scrollbarWidth: "none",
+                paddingBottom: 12,
               }}
             >
-            {Array.from({ length: restaurant?.loyalty_stamps || 0 }).map(
+              {Array.from({ length: loyaltyStamps }).map(
                 (_, index) => {
-                const currentPoints = restaurant?.customer_loyalty_points || 0;
+                  const currentPoints = customerLoyaltyPoints % loyaltyStamps;
                   const isCollected = index < currentPoints;
                   return (
                     <Col key={index}>
@@ -129,6 +137,28 @@ const LoyaltyCard = () => {
                 },
               )}
             </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>