From 3dddc78ddabcf6fb2bf1920bd8909921f2f622e9 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Fri, 31 Oct 2025 13:56:20 +0300 Subject: [PATCH] change url param name to "subdomain" --- src/components/LoyaltyCard/LoyaltyCard.tsx | 4 +-- src/components/privateRoute/PrivateRoute.tsx | 4 +-- src/layouts/app/hooks/useHeaderMenu.tsx | 24 ++++++------- src/pages/address/page.tsx | 6 ++-- .../components/CartMobileTabletLayout.tsx | 4 +-- .../cart/components/cartFooter/CartFooter.tsx | 6 ++-- .../checkout/components/CheckoutButton.tsx | 8 ++--- src/pages/checkout/hooks/useOrder.ts | 34 +++---------------- src/pages/login/page.tsx | 4 +-- .../AddToCartButton/AddToCartButton.tsx | 4 +-- .../menu/components/CartButton/CartButton.tsx | 4 +-- .../menu/components/MenuFooter/MenuFooter.tsx | 4 +-- .../menu/components/MenuList/MenuList.tsx | 5 ++- src/pages/menu/components/SearchButton.tsx | 4 +-- .../menu/components/SearchMenu/SearchMenu.tsx | 4 +-- src/pages/menu/page.tsx | 7 ++-- src/pages/orders/page.tsx | 4 +-- src/pages/otp/page.tsx | 4 +-- src/pages/restaurant/RestaurantServices.tsx | 18 +++++----- src/pages/restaurant/page.tsx | 34 +++++++++---------- src/pages/search/page.tsx | 6 ++-- src/pages/split-bill/page.tsx | 4 +-- src/redux/api/others.ts | 4 +-- src/routes/routes.tsx | 5 +-- 24 files changed, 89 insertions(+), 116 deletions(-) diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx index 16867e3..579aedf 100644 --- a/src/components/LoyaltyCard/LoyaltyCard.tsx +++ b/src/components/LoyaltyCard/LoyaltyCard.tsx @@ -11,7 +11,7 @@ import styles from "./LoyaltyCard.module.css"; const LoyaltyCard = () => { const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); const { data: restaurant } = useGetRestaurantDetailsQuery("595"); const token = localStorage.getItem(ACCESS_TOKEN); const isHasLoyaltyGift = @@ -68,7 +68,7 @@ const LoyaltyCard = () => { {!token && (
{ const { token, loading } = useAppSelector((state) => state.auth); - const { id } = useParams(); + const { subdomain } = useParams(); // const { data: user, isLoading: loadingUser } = useGetSignedUserInfoQuery(); @@ -36,7 +36,7 @@ export const PrivateRoute = ({ if (!token) { - return ; + return ; } // if (token && !userHasRequiredPermission) { diff --git a/src/layouts/app/hooks/useHeaderMenu.tsx b/src/layouts/app/hooks/useHeaderMenu.tsx index 31d278b..df28575 100644 --- a/src/layouts/app/hooks/useHeaderMenu.tsx +++ b/src/layouts/app/hooks/useHeaderMenu.tsx @@ -1,10 +1,10 @@ import { - BgColorsOutlined, - HomeOutlined, - LoginOutlined, - LogoutOutlined, - MenuOutlined, - TranslationOutlined, + BgColorsOutlined, + HomeOutlined, + LoginOutlined, + LogoutOutlined, + MenuOutlined, + TranslationOutlined, } from "@ant-design/icons"; import { logoutThunk } from "features/auth/authSlice"; import { setLocale, setLocalesThunk } from "features/locale/localeSlice"; @@ -16,7 +16,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks"; import { ACCESS_TOKEN } from "utils/constants"; export default function useHeaderMenu() { - const { id } = useParams(); + const { subdomain } = useParams(); const dispatch = useAppDispatch(); const { t } = useTranslation(); const { isRTL } = useAppSelector((state) => state.locale); @@ -63,9 +63,9 @@ export default function useHeaderMenu() { style={{ color: themeName === "dark" ? "white" : "#1f2937" }} /> ), - label: {t("common.myOrder")}, + label: {t("common.myOrder")}, onClick: () => { - navigate(`/${id}/orders`); + navigate(`/${subdomain}/orders`); }, }, { @@ -75,7 +75,7 @@ export default function useHeaderMenu() { style={{ color: themeName === "dark" ? "white" : "#1f2937" }} /> ), - label: {t("common.branches")}, + label: {t("common.branches")}, }, ...(!token ? [{ key: "login", @@ -84,9 +84,9 @@ export default function useHeaderMenu() { style={{ color: themeName === "dark" ? "white" : "#1f2937" }} /> ), - label: {t("common.login")}, + label: {t("common.login")}, onClick: () => { - navigate(`/${id}/login`); + navigate(`/${subdomain}/login`); }, }] : []), ...(token ? [{ diff --git a/src/pages/address/page.tsx b/src/pages/address/page.tsx index b96c84f..d4752cc 100644 --- a/src/pages/address/page.tsx +++ b/src/pages/address/page.tsx @@ -5,19 +5,19 @@ import OfficeIcon from "components/Icons/address/OfficeIcon"; import ProHeader from "components/ProHeader/ProHeader"; import ProText from "components/ProText"; import { selectTheme } from "features/theme/themeSlice"; +import { OrderType } from "pages/checkout/hooks/types.ts"; import { useTranslation } from "react-i18next"; import { Link, useParams } from "react-router-dom"; import { useAppSelector } from "redux/hooks"; import { colors, ProBlack2, ProGray1 } from "ThemeConstants"; import { AddressSummary } from "../checkout/components/AddressSummary"; import styles from "./address.module.css"; -import { OrderType } from "pages/checkout/hooks/types.ts"; export default function AddressPage() { const { t } = useTranslation(); const { themeName } = useAppSelector(selectTheme); const [form] = Form.useForm(); - const { id } = useParams(); + const { subdomain } = useParams(); return ( <> @@ -163,7 +163,7 @@ export default function AddressPage() { }} >
{ - navigate(`/${id}/split-bill`); - }, [navigate, id]); + navigate(`/${subdomain}/split-bill`); + }, [navigate, subdomain]); const handlePlaceOrderClick = useCallback(async () => { try { diff --git a/src/pages/checkout/hooks/useOrder.ts b/src/pages/checkout/hooks/useOrder.ts index 7f7c166..6ac1217 100644 --- a/src/pages/checkout/hooks/useOrder.ts +++ b/src/pages/checkout/hooks/useOrder.ts @@ -5,6 +5,7 @@ import { selectGrandTotal, selectHighestPricedLoyaltyItem, } from "features/order/orderSlice"; +import { OrderType } from "pages/checkout/hooks/types.ts"; import { useCallback } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; @@ -12,13 +13,12 @@ import { useCreateOrderMutation } from "redux/api/others"; import { useAppDispatch, useAppSelector } from "redux/hooks"; import { PAYMENT_CONFIRMATION_URL } from "utils/constants"; import { Customer } from "../../otp/types"; -import { OrderType } from "pages/checkout/hooks/types.ts"; export default function useOrder() { const dispatch = useAppDispatch(); const navigate = useNavigate(); const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); const restaurantID = localStorage.getItem("restaurantID"); const { mobilenumber, user_uuid } = JSON.parse( localStorage.getItem("customer") || "{}", @@ -98,7 +98,7 @@ export default function useOrder() { // window.open( // `${PAYMENT_CONFIRMATION_URL}/${res.data.result.orderID}`, // ); - else navigate(`/${id}/order/${res.data.result.orderID}`); + else navigate(`/${subdomain}/order/${res.data.result.orderID}`); dispatch(clearCart()); localStorage.setItem("orderID", res.data.result.orderID); } @@ -106,32 +106,6 @@ export default function useOrder() { .catch((error: any) => { console.error("Create Order failed:", error); }); - }, [ - createOrder, - mobilenumber, - phone, - giftDetails?.senderPhone, - giftDetails?.receiverName, - giftDetails?.receiverPhone, - giftDetails?.message, - giftDetails?.isSecret, - giftDetails?.senderEmail, - giftDetails?.senderName, - coupon, - specialRequest, - tables, - orderType, - id, - restaurantID, - items, - officeDetails?.officeNo, - user_uuid, - estimateTime, - tip, - orderPrice, - t, - navigate, - dispatch, - ]); + }, [createOrder, mobilenumber, phone, giftDetails?.senderPhone, giftDetails?.receiverName, giftDetails?.receiverPhone, giftDetails?.message, giftDetails?.isSecret, giftDetails?.senderEmail, giftDetails?.senderName, coupon, specialRequest, tables, orderType, restaurantID, items, officeDetails?.officeNo, user_uuid, estimateTime, orderPrice, useLoyaltyPoints, highestLoyaltyItem, tip, t, navigate, subdomain, dispatch]); return { handleCreateOrder }; } diff --git a/src/pages/login/page.tsx b/src/pages/login/page.tsx index 0b9cc18..3870731 100644 --- a/src/pages/login/page.tsx +++ b/src/pages/login/page.tsx @@ -21,7 +21,7 @@ export default function LoginPage() { const { themeName } = useAppSelector((state) => state.theme); const [form] = Form.useForm(); const [sendOtp, { isLoading }] = useSendOtpMutation(); - const { id } = useParams(); + const { subdomain } = useParams(); const [phone, setPhone] = useState(""); const [selectedDate, setSelectedDate] = useState(""); @@ -33,7 +33,7 @@ export default function LoginPage() { if (form.getFieldsValue()) sendOtp(form.getFieldsValue()).then((response: any) => { message.info(t("login.OTPSentToYourPhoneNumber")); - navigate(`/${id}/otp`); + navigate(`/${subdomain}/otp`); localStorage.setItem("otp", response.data.result.otp); }); }; diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx index 2e0484a..6c722ae 100644 --- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx +++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx @@ -10,7 +10,7 @@ export function AddToCartButton() { const { isRTL } = useAppSelector((state) => state.locale); const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); const navigate = useNavigate(); return ( @@ -21,7 +21,7 @@ export function AddToCartButton() { icon={} size="small" onClick={() => { - navigate(`/${id}/menu`); + navigate(`/${subdomain}/menu`); }} className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`} style={{ backgroundColor: colors.primary }} diff --git a/src/pages/menu/components/CartButton/CartButton.tsx b/src/pages/menu/components/CartButton/CartButton.tsx index c96c4eb..8191810 100644 --- a/src/pages/menu/components/CartButton/CartButton.tsx +++ b/src/pages/menu/components/CartButton/CartButton.tsx @@ -8,12 +8,12 @@ import styles from "./CartButton.module.css"; export function CartButton() { const { isRTL } = useAppSelector((state) => state.locale); - const { id } = useParams(); + const { subdomain } = useParams(); const navigate = useNavigate(); const items = useAppSelector(selectCartItems); const onCartClick = useCallback(() => { - navigate(`/${id}/cart`); + navigate(`/${subdomain}/cart`); }, [navigate, id]); const totalItems = items.reduce((sum, item) => sum + item.quantity, 0); diff --git a/src/pages/menu/components/MenuFooter/MenuFooter.tsx b/src/pages/menu/components/MenuFooter/MenuFooter.tsx index f0fa027..4d11f95 100644 --- a/src/pages/menu/components/MenuFooter/MenuFooter.tsx +++ b/src/pages/menu/components/MenuFooter/MenuFooter.tsx @@ -13,7 +13,7 @@ export function MenuFooter() { const { themeName } = useAppSelector((state) => state.theme); const { isMobile, isTablet } = useBreakPoint(); const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); const totalItems = items.reduce((sum, item) => sum + item.quantity, 0); @@ -37,7 +37,7 @@ export function MenuFooter() { }} > ; } @@ -32,7 +31,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) { const products = data?.products; const { isMobile, isTablet, isDesktop } = useBreakPoint(); const { items } = useAppSelector((state) => state.order); - const { id } = useParams(); + const { subdomain } = useParams(); const navigate = useNavigate(); const { t } = useTranslation(); const { themeName } = useAppSelector((state) => state.theme); @@ -46,7 +45,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) { if (isDesktop) { setIsDialogOpen(true); } else { - navigate(`/${id}/product/${item.id}`); + navigate(`/${subdomain}/product/${item.id}`); } }; diff --git a/src/pages/menu/components/SearchButton.tsx b/src/pages/menu/components/SearchButton.tsx index bd2dc2d..1422013 100644 --- a/src/pages/menu/components/SearchButton.tsx +++ b/src/pages/menu/components/SearchButton.tsx @@ -5,7 +5,7 @@ import styles from "../menu.module.css"; export default function SearchButton() { const navigate = useNavigate(); - const { id } = useParams(); + const { subdomain } = useParams(); return (
// router.push(`?orderType=${orderType}&search=true`) // setSelectedClientRoute("search") - navigate(`/${id}/search`) + navigate(`/${subdomain}/search`) } />
diff --git a/src/pages/menu/components/SearchMenu/SearchMenu.tsx b/src/pages/menu/components/SearchMenu/SearchMenu.tsx index 61ac7c4..9a365a2 100644 --- a/src/pages/menu/components/SearchMenu/SearchMenu.tsx +++ b/src/pages/menu/components/SearchMenu/SearchMenu.tsx @@ -24,7 +24,7 @@ export function SearchMenu({ products }: MenuListProps) { const navigate = useNavigate(); const { t } = useTranslation(); const { themeName } = useAppSelector((state) => state.theme); - const { id } = useParams(); + const { subdomain } = useParams(); // Show error state if data exists but has no products if (products && (!products || products.length === 0)) { @@ -48,7 +48,7 @@ export function SearchMenu({ products }: MenuListProps) { className={styles.productLink + " product-link-search"} onClick={() => { localStorage.setItem("product", JSON.stringify(item)); - navigate(`/${id}/product/${item.id}`); + navigate(`/${subdomain}/product/${item.id}`); }} > state.locale); const { orderType } = useAppSelector((state) => state.order); const { t } = useTranslation(); const { data: restaurant, isLoading: isLoadingRestaurant } = - useGetRestaurantDetailsQuery("595", { - skip: !id, + useGetRestaurantDetailsQuery(subdomain, { + skip: !subdomain, }); const { data: menuData, isLoading: isLoadingMenu } = useGetMenuQuery( restaurant?.restautantId, @@ -148,7 +148,6 @@ function MenuPage() { diff --git a/src/pages/orders/page.tsx b/src/pages/orders/page.tsx index 84a05d1..3767457 100644 --- a/src/pages/orders/page.tsx +++ b/src/pages/orders/page.tsx @@ -7,14 +7,14 @@ import OrdersList from "./OrdersList"; export default function OrdersPage() { const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); return ( <> {t("orders.title")} - + diff --git a/src/pages/otp/page.tsx b/src/pages/otp/page.tsx index ba46851..fe6b119 100644 --- a/src/pages/otp/page.tsx +++ b/src/pages/otp/page.tsx @@ -11,7 +11,7 @@ import { ProGray1 } from "ThemeConstants"; import { ACCESS_TOKEN } from "utils/constants"; export default function OtpPage() { - const { id } = useParams(); + const { subdomain } = useParams(); const { t } = useTranslation(); const [sendOtp, { isLoading }] = useSendOtpMutation(); const [confirmOtp, { isLoading: isConfirmLoading }] = useConfirmOtpMutation(); @@ -87,7 +87,7 @@ export default function OtpPage() { ); localStorage.setItem(ACCESS_TOKEN, response.result.access_token); message.info(t("otp.confirmOTPSuccess")); - navigate(`/${id}/menu`); + navigate(`/${subdomain}/menu`); }); }} > diff --git a/src/pages/restaurant/RestaurantServices.tsx b/src/pages/restaurant/RestaurantServices.tsx index cc6e93c..77af9c2 100644 --- a/src/pages/restaurant/RestaurantServices.tsx +++ b/src/pages/restaurant/RestaurantServices.tsx @@ -39,7 +39,7 @@ export default function RestaurantServices({ }: RestaurantServicesProps) { const { t } = useTranslation(); const { isRTL } = useAppSelector((state) => state.locale); - const { id } = useParams(); + const { subdomain } = useParams(); const dispatch = useAppDispatch(); const services = [ @@ -54,7 +54,7 @@ export default function RestaurantServices({ /> ), color: "bg-blue-50 text-blue-600", - href: `/${id}/menu?orderType=${OrderType.DineIn}`, + href: `/${subdomain}/menu?orderType=${OrderType.DineIn}`, }, ]) || []), @@ -69,7 +69,7 @@ export default function RestaurantServices({ /> ), color: "bg-green-50 text-green-600", - href: `/${id}/menu?orderType=${OrderType.Pickup}`, + href: `/${subdomain}/menu?orderType=${OrderType.Pickup}`, }, ]) || []), @@ -84,7 +84,7 @@ export default function RestaurantServices({ /> ), color: "bg-pink-50 text-pink-600", - href: `/${id}/menu?orderType=${OrderType.Gift}`, + href: `/${subdomain}/menu?orderType=${OrderType.Gift}`, }, ]) || []), @@ -97,7 +97,7 @@ export default function RestaurantServices({ ), color: "bg-purple-50 text-purple-600", - href: `/${id}/menu?orderType=${OrderType.ToRoom}`, + href: `/${subdomain}/menu?orderType=${OrderType.ToRoom}`, }, ]) || []), @@ -112,7 +112,7 @@ export default function RestaurantServices({ /> ), color: "bg-orange-50 text-orange-600", - href: `/${id}/menu?orderType=${OrderType.ToOffice}`, + href: `/${subdomain}/menu?orderType=${OrderType.ToOffice}`, }, ]) || []), @@ -127,7 +127,7 @@ export default function RestaurantServices({ /> ), color: "bg-indigo-50 text-indigo-600", - href: `/${id}/menu?orderType=${OrderType.Booking}`, + href: `/${subdomain}/menu?orderType=${OrderType.Booking}`, }, ]) || []), @@ -142,7 +142,7 @@ export default function RestaurantServices({ /> ), color: "bg-indigo-50 text-indigo-600", - href: `/${id}/address`, + href: `/${subdomain}/address`, }, ]) || []), @@ -157,7 +157,7 @@ export default function RestaurantServices({ /> ), color: "bg-indigo-50 text-indigo-600", - href: `/${id}/menu?orderType=${OrderType.ScheduledOrder}`, + href: `/${subdomain}/menu?orderType=${OrderType.ScheduledOrder}`, }, ]) || []), diff --git a/src/pages/restaurant/page.tsx b/src/pages/restaurant/page.tsx index 4238903..f5276ac 100644 --- a/src/pages/restaurant/page.tsx +++ b/src/pages/restaurant/page.tsx @@ -5,32 +5,32 @@ import XIcon from "components/Icons/social/XIcon"; import { LanguageSwitch } from "components/LanguageSwitch/LanguageSwitch"; import ProText from "components/ProText"; import ProTitle from "components/ProTitle"; -import { useAppSelector, useAppDispatch } from "redux/hooks"; +import { useAppDispatch, useAppSelector } from "redux/hooks"; import styles from "./restaurant.module.css"; import RestaurantServices from "./RestaurantServices"; // Import the Client Component for localStorage handling import Ads1 from "components/Ads/Ads1"; +import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/OrderDetailsBottomSheet"; import { Loader } from "components/Loader/Loader"; -import { useRestaurant } from "hooks/useRestaurant"; import { - useParams, + CART_STORAGE_KEYS, + updateOrderType, +} from "features/order/orderSlice.ts"; +import useBreakPoint from "hooks/useBreakPoint"; +import { useRestaurant } from "hooks/useRestaurant"; +import useSwipeUp from "hooks/useSwipeUp"; +import { OrderType } from "pages/checkout/hooks/types.ts"; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Outlet, useLocation, + useParams, useSearchParams, } from "react-router-dom"; import { useGetRestaurantDetailsQuery } from "redux/api/others"; import LocalStorageHandler from "../menu/components/LocalStorageHandler"; -import { useEffect, useState } from "react"; -import { - updateOrderType, - CART_STORAGE_KEYS, -} from "features/order/orderSlice.ts"; -import { OrderType } from "pages/checkout/hooks/types.ts"; -import { useTranslation } from "react-i18next"; -import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/OrderDetailsBottomSheet"; -import useBreakPoint from "hooks/useBreakPoint.ts"; -import useSwipeUp from "hooks/useSwipeUp.ts"; const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE); @@ -45,8 +45,8 @@ export default function RestaurantPage() { (state) => state.order, ); const { isRTL } = useAppSelector((state) => state.locale); - const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", { - skip: !param.id, + const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(param.subdomain, { + skip: !param.subdomain, }); const [isOrderDetailsOpen, setIsOrderDetailsOpen] = useState(false); @@ -64,7 +64,7 @@ export default function RestaurantPage() { dispatch(updateOrderType(urlOrderType as OrderType)); else if (storedOrderType && !orderType) dispatch(updateOrderType(storedOrderType as OrderType)); - }, [searchParams, orderType]); + }, [searchParams, orderType, dispatch]); if (isLoading) return ; @@ -74,7 +74,7 @@ export default function RestaurantPage() { localStorage.setItem("restaurantID", restaurant.restautantId); } - if (param.id && !pathname.endsWith(param.id)) return ; + if (param.subdomain && !pathname.endsWith(param.subdomain)) return ; return ( <> diff --git a/src/pages/search/page.tsx b/src/pages/search/page.tsx index 537d72e..4db805c 100644 --- a/src/pages/search/page.tsx +++ b/src/pages/search/page.tsx @@ -17,7 +17,7 @@ import styles from "./search.module.css"; export default function SearchPage() { const { t } = useTranslation(); - const { id } = useParams(); + const { subdomain } = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const { themeName } = useAppSelector((state) => state.theme); const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || ""); @@ -92,7 +92,7 @@ export default function SearchPage() { return ( <> - {t("menu.search")} + {t("menu.search")}
- +