From 3a827a8f696adb9f3f340bcd479453a454622552 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Fri, 24 Oct 2025 06:12:58 +0300 Subject: [PATCH] some UX --- src/assets/locals/ar.json | 4 +- src/assets/locals/en.json | 6 +- src/components/LoyaltyCard/LoyaltyCard.tsx | 103 ++++++++++++--------- src/layouts/app/hooks/useHeaderMenu.tsx | 20 +++- src/pages/menu/page.tsx | 3 +- src/redux/api/auth.ts | 1 + src/redux/api/others.ts | 5 +- 7 files changed, 90 insertions(+), 52 deletions(-) diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 4693aaf..ff97a18 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -18,6 +18,7 @@ "cart": "السلة", "checkout": "الدفع", "login": "تسجيل الدخول", + "logout": "تسجيل الخروج", "contact": "اتصل بنا", "admin": "لوحة الإدارة", "search": "البحث عن المنتجات...", @@ -231,7 +232,8 @@ "useLoyaltyPoints": "استخدام نقاط الولاء", "noLoyaltyItemsInCart": "لا توجد عناصر ولاء في سلة المشتريات", "pleaseAddLoyaltyItems": "يرجى إضافة عناصر ولاء إلى سلة المشتريات لاستخدام نقاط الولاء", - "loyaltyDiscountApplied": "تم تطبيق خصم الولاء: {{itemName}} (خصم {{amount}})" + "loyaltyDiscountApplied": "تم تطبيق خصم الولاء: {{itemName}} (خصم {{amount}})", + "joinToEarn": "انضم إلى الولاء لتحصل على هدية مجانية" }, "checkout": { "title": "الدفع", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 41835e2..68596f9 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -18,6 +18,7 @@ "cart": "Cart", "checkout": "Checkout", "login": "Login", + "logout": "Logout", "contact": "Contact Us", "admin": "Admin Panel", "search": "Search products...", @@ -159,7 +160,8 @@ "search": "Search", "searchPlaceholder": "Search for products...", "noResultsFound": "No results found", - "cart": "Cart" + "cart": "Cart", + "joinToEarn": "Join us to earn loyalty points" }, "cart": { "title": "Cart", @@ -314,7 +316,7 @@ "gotIt": "Got It", "howItWorksDescription": "The gifted amount will be credited directly to your friend's wallet in the app. The recipient can use the amount to book a session of their choice within the app. The gifted amount is non-refundable and can only be used for booking sessions.", "senderEmail": "Sender Email", - "save":"Save" + "save": "Save" }, "login": { "singup/Login": "Sing up / Login", diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx index 265cebd..30669c2 100644 --- a/src/components/LoyaltyCard/LoyaltyCard.tsx +++ b/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 && ( + + {t("menu.joinToEarn")} + + )} - - -
-
- - - x - {(restaurant?.loyalty_stamps ?? 0) - - (restaurant?.customer_loyalty_points ?? 0)} - {" "} + {token && ( + + +
+
+ + + x + {(restaurant?.loyalty_stamps ?? 0) - + (restaurant?.customer_loyalty_points ?? 0)} + {" "} +
-
- - - - - + + + + + + )}
); diff --git a/src/layouts/app/hooks/useHeaderMenu.tsx b/src/layouts/app/hooks/useHeaderMenu.tsx index 94043db..31d278b 100644 --- a/src/layouts/app/hooks/useHeaderMenu.tsx +++ b/src/layouts/app/hooks/useHeaderMenu.tsx @@ -2,15 +2,18 @@ import { BgColorsOutlined, HomeOutlined, LoginOutlined, + LogoutOutlined, MenuOutlined, TranslationOutlined, } from "@ant-design/icons"; +import { logoutThunk } from "features/auth/authSlice"; import { setLocale, setLocalesThunk } from "features/locale/localeSlice"; import { toggleTheme } from "features/theme/themeSlice"; import i18n from "i18n/i18n"; import { useTranslation } from "react-i18next"; import { Link, useNavigate, useParams } from "react-router-dom"; import { useAppDispatch, useAppSelector } from "redux/hooks"; +import { ACCESS_TOKEN } from "utils/constants"; export default function useHeaderMenu() { const { id } = useParams(); @@ -19,6 +22,7 @@ export default function useHeaderMenu() { const { isRTL } = useAppSelector((state) => state.locale); const { themeName } = useAppSelector((state) => state.theme); const navigate = useNavigate(); + const token = localStorage.getItem(ACCESS_TOKEN); const menuItems = [ { @@ -73,7 +77,7 @@ export default function useHeaderMenu() { ), label: {t("common.branches")}, }, - { + ...(!token ? [{ key: "login", icon: ( { navigate(`/${id}/login`); }, - }, + }] : []), + ...(token ? [{ + key: "logout", + icon: ( + + ), + label:
{t("common.logout")}
, + onClick: () => { + dispatch(logoutThunk()); + }, + }] : []), ]; return { menuItems }; } diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx index 0b42c9d..1be1fb0 100644 --- a/src/pages/menu/page.tsx +++ b/src/pages/menu/page.tsx @@ -117,7 +117,8 @@ function MenuPage() {
{restaurant?.loyalty_stamps && - restaurant?.is_loyalty_enabled && } + restaurant?.is_loyalty_enabled && + }
diff --git a/src/redux/api/auth.ts b/src/redux/api/auth.ts index bbdd36d..0330dad 100644 --- a/src/redux/api/auth.ts +++ b/src/redux/api/auth.ts @@ -24,6 +24,7 @@ export const loginApi = baseApi.injectEndpoints({ method: "POST", body, }), + invalidatesTags: ["Restaurant"], }), }), }); diff --git a/src/redux/api/others.ts b/src/redux/api/others.ts index 68069c9..1913b8c 100644 --- a/src/redux/api/others.ts +++ b/src/redux/api/others.ts @@ -26,6 +26,7 @@ export const branchApi = baseApi.injectEndpoints({ transformResponse: (response: any) => { return response?.result?.restaurants?.[0]; }, + providesTags: ["Restaurant"], }), getMenu: builder.query({ query: (restaurantId: string) => @@ -50,7 +51,7 @@ export const branchApi = baseApi.injectEndpoints({ method: "POST", body, }), - invalidatesTags: ["Orders"], + invalidatesTags: ["Orders", "Restaurant"], }), cancelOrder: builder.mutation({ query: (body: any) => ({ @@ -58,7 +59,7 @@ export const branchApi = baseApi.injectEndpoints({ method: "POST", body, }), - invalidatesTags: ["Orders"], + invalidatesTags: ["Orders", "Restaurant"], }), getTables: builder.query({ query: ({