add congrats when loyalty prize is available

src/components/LoyaltyCard/LoyaltyCard.module.css

@@ -7,14 +7,12 @@
 }
 
 .loyaltyContainer {
-  height: 115px;
-  background-color: #FFF;
+  background-color: var(--secondary-background);
   border: none;
-   margin-bottom: 1rem;
+  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,25 +70,32 @@ const LoyaltyCard = () => {
           <Col>
             <div className={styles.presentIcon}>
               <div style={{ display: "flex" }}>
-                <Image
-                  className={styles.presentIconItem}
-                  preview={false}
-                  width={32}
-                  height={32}
-                  src={restaurant?.loyalty_stamp_image}
-                />
-                <ProText
-                  type="secondary"
-                  strong
-                  style={{
-                    fontSize: "1rem",
-                    fontWeight: 400,
-                    position: "relative",
-                    top: 3,
-                  }}
-                >
-                  x{restaurant?.loyalty_stamps}
-                </ProText>
+                {isHasLoyaltyGift ? (
+                  <>
+                    <Image
+                      className={styles.presentIconItem}
+                      preview={false}
+                      width={32}
+                      height={32}
+                      src={restaurant?.loyalty_stamp_image}
+                    />
+                    <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>{" "}
+                  </>
+                ) : null}
               </div>
             </div>
           </Col>