add congrats when loyalty prize is available

src/assets/locals/ar.json

@@ -133,6 +133,8 @@
       "popular": "الأكثر مبيعاً"
     },
     "claim": "إدخال",
+    "congratulations": "تهانينا!",
+    "loyaltyGiftEarned": "لقد حصلت على هدية ولاء!",
     "required": "مطلوب",
     "optional": "اختياري",
     "pleaseSelectRequiredOptions": "يرجى اختيار جميع الخيارات المطلوبة قبل إضافة إلى السلة",

src/assets/locals/en.json

@@ -149,6 +149,8 @@
       "popular": "Popular"
     },
     "claim": "Claim",
+    "congratulations": "Congratulations!",
+    "loyaltyGiftEarned": "You've earned a loyalty gift!",
     "required": "Required",
     "optional": "Optional",
     "pleaseSelectRequiredOptions": "Please select all required options before adding to cart",

src/components/LoyaltyCard/LoyaltyCard.module.css

@@ -7,14 +7,12 @@
 }
 
 .loyaltyContainer {
-  height: 115px;
+  background-color: var(--secondary-background);
-  background-color: #FFF;
   border: none;
   margin-bottom: 1rem;
 }
 
 .loyaltyContainer :global(.ant-card-body) {
-  height: 115px;
   padding: 12px 16px !important;
   border: none;
   border-radius: 0px;
@@ -22,7 +20,7 @@
 
 .loyaltyCard {
   border-radius: 0px !important;
-  border: none
+  border: none;
 }
 
 .presentIcon {
@@ -60,3 +58,69 @@
 :global(.rtl) .presentIconItem {
   margin-right: 0px;
 }
+
+.congratulationsContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, var(--primary), #fa0505);
+  border-radius: 8px;
+  animation: celebrate 0.6s ease-in-out;
+}
+
+.congratulationsIcon {
+  color: var(--secondary-background);
+  font-size: 18px;
+  animation: bounce 1s infinite;
+}
+
+.congratulationsText {
+  color: var(--secondary-background);
+  font-weight: 600;
+  font-size: 14px;
+  margin: 0;
+}
+
+.congratulationsSubtext {
+  color: var(--secondary-background);
+  font-weight: 400;
+  font-size: 12px;
+  margin: 0;
+  opacity: 0.9;
+}
+
+@keyframes celebrate {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-3px);
+  }
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+:global(.darkApp) .congratulationsContainer {
+  background: linear-gradient(135deg, var(--primary), #fa0505);
+}

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -10,10 +10,27 @@ import styles from "./LoyaltyCard.module.css";
 const LoyaltyCard = () => {
   const { t } = useTranslation();
   const { data: restaurant } = useGetRestaurantDetailsQuery("595");
+  const isHasLoyaltyGift =
+    (restaurant?.loyalty_stamps ?? 0) -
+      (restaurant?.customer_loyalty_points ?? 0) ===
+    0;
 
   return (
     <div className={styles.loyaltyContainer}>
       <Card className={styles.loyaltyCard}>
+        {isHasLoyaltyGift && (
+          <div className={styles.congratulationsContainer}>
+            <PresentIcon className={styles.congratulationsIcon} />
+            <div>
+              <p className={styles.congratulationsText}>
+                {t("menu.congratulations")}
+              </p>
+              <p className={styles.congratulationsSubtext}>
+                {t("menu.loyaltyGiftEarned")}
+              </p>
+            </div>
+          </div>
+        )}
         <Row
           justify="space-between"
           align="middle"
@@ -53,6 +70,8 @@ const LoyaltyCard = () => {
           <Col>
             <div className={styles.presentIcon}>
               <div style={{ display: "flex" }}>
+                {isHasLoyaltyGift ? (
+                  <>
                     <Image
                       className={styles.presentIconItem}
                       preview={false}
@@ -68,10 +87,15 @@ const LoyaltyCard = () => {
                         fontWeight: 400,
                         position: "relative",
                         top: 3,
+                        margin: "0 2px",
                       }}
                     >
-                  x{restaurant?.loyalty_stamps}
+                      x
-                </ProText>
+                      {(restaurant?.loyalty_stamps ?? 0) -
+                        (restaurant?.customer_loyalty_points ?? 0)}
+                    </ProText>{" "}
+                  </>
+                ) : null}
               </div>
             </div>
           </Col>

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -39,15 +39,13 @@ export default function CartMobileTabletLayout({
   form,
 }: CartMobileTabletLayoutProps) {
   const { t } = useTranslation();
-  const { items, collectionMethod } = useAppSelector(selectCart);
+  const { items, collectionMethod, orderType } = useAppSelector(selectCart);
   const { id } = useParams();
 
   const { isMobile, isTablet } = useBreakPoint();
 
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
 
-  const orderType = localStorage.getItem("orderType");
-
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
@@ -240,7 +238,12 @@ export default function CartMobileTabletLayout({
               <Form.Item
                 name="collectionMethod"
                 required
-                rules={[{ required: true, message: t("cart.pleaseSelectCollectionMethod") }]}
+                rules={[
+                  {
+                    required: true,
+                    message: t("cart.pleaseSelectCollectionMethod"),
+                  },
+                ]}
               >
                 <ProRatioGroups
                   options={[