some UX

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -2,14 +2,18 @@ import { Button, Card, Col, Image, Row } from "antd";
 import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
 import PresentIcon from "components/Icons/cart/PresentIcon";
 import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
+import { ACCESS_TOKEN } from "utils/constants";
 import { colors } from "../../ThemeConstants";
 import ProText from "../ProText";
 import styles from "./LoyaltyCard.module.css";
 
 const LoyaltyCard = () => {
   const { t } = useTranslation();
+  const { id } = useParams();
   const { data: restaurant } = useGetRestaurantDetailsQuery("595");
+  const token = localStorage.getItem(ACCESS_TOKEN);
   const isHasLoyaltyGift =
     (restaurant?.loyalty_stamps ?? 0) -
       (restaurant?.customer_loyalty_points ?? 0) <=
@@ -57,57 +61,68 @@ const LoyaltyCard = () => {
                 top: -2,
               }}
             >
-              {t("menu.loyaltyDescription", {
-                value: restaurant?.loyalty_stamps,
-              })}
+              {token &&
+                t("menu.loyaltyDescription", {
+                  value: restaurant?.loyalty_stamps ?? 0,
+                })}
+              {!token && (
+                <Link
+                  to={`/${id}/login`}
+                  style={{ color: colors.primary, marginTop: 4 }}
+                >
+                  {t("menu.joinToEarn")}
+                </Link>
+              )}
             </ProText>
           </Col>
           <Col>
             <PresentIcon />
           </Col>
         </Row>
-        <Row justify="space-between" align="middle">
-          <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,
-                    margin: "0 2px",
-                  }}
-                >
-                  x
-                  {(restaurant?.loyalty_stamps ?? 0) -
-                    (restaurant?.customer_loyalty_points ?? 0)}
-                </ProText>{" "}
+        {token && (
+          <Row justify="space-between" align="middle">
+            <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,
+                      margin: "0 2px",
+                    }}
+                  >
+                    x
+                    {(restaurant?.loyalty_stamps ?? 0) -
+                      (restaurant?.customer_loyalty_points ?? 0)}
+                  </ProText>{" "}
+                </div>
               </div>
-            </div>
-          </Col>
-          <Col>
-            <Button
-              style={{
-                backgroundColor: colors.primary,
-                color: "white",
-                border: 0,
-                height: 32,
-              }}
-            >
-              {t("menu.claim")}
-            </Button>
-          </Col>
-        </Row>
+            </Col>
+            <Col>
+              <Button
+                style={{
+                  backgroundColor: colors.primary,
+                  color: "white",
+                  border: 0,
+                  height: 32,
+                }}
+              >
+                {t("menu.claim")}
+              </Button>
+            </Col>
+          </Row>
+        )}
       </Card>
     </div>
   );