change url param name to "subdomain"

2025-10-31 13:56:20 +03:00
parent 42d0b2cacf
commit 3dddc78dda
24 changed files with 89 additions and 116 deletions
--- 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 && (
                <div style={{ paddingTop: 4 }}>
                  <Link
-                    to={`/${id}/login`}
+                    to={`/${subdomain}/login`}
                    style={{
                      color: colors.primary,
                      textDecoration: "underline",
--- a/src/components/privateRoute/PrivateRoute.tsx
+++ b/src/components/privateRoute/PrivateRoute.tsx
@@ -10,7 +10,7 @@ export const PrivateRoute = ({
  permission?: string;
 }) => {
  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 <Navigate to={`/${id}/login`} />;
+    return <Navigate to={`/${subdomain}/login`} />;
  }

  // if (token && !userHasRequiredPermission) {
--- 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: <Link to={`/${id}/orders`}>{t("common.myOrder")}</Link>,
+      label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
      onClick: () => {
-        navigate(`/${id}/orders`);
+        navigate(`/${subdomain}/orders`);
      },
    },
    {
@@ -75,7 +75,7 @@ export default function useHeaderMenu() {
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
-      label: <Link to={`/${id}/menu`}>{t("common.branches")}</Link>,
+      label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
    },
    ...(!token ? [{
      key: "login",
@@ -84,9 +84,9 @@ export default function useHeaderMenu() {
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
-      label: <Link to={`/${id}/login`}>{t("common.login")}</Link>,
+      label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
      onClick: () => {
-        navigate(`/${id}/login`);
+        navigate(`/${subdomain}/login`);
      },
      }] : []),
    ...(token ? [{
--- 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() {
        }}
      >
        <Link
-          to={`/${id}/menu?orderType=${OrderType.Delivery}`}
+          to={`/${subdomain}/menu?orderType=${OrderType.Delivery}`}
          style={{ width: "100%" }}
        >
          <Button
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -42,7 +42,7 @@ export default function CartMobileTabletLayout({
 }: CartMobileTabletLayoutProps) {
  const { t } = useTranslation();
  const { items, collectionMethod, orderType } = useAppSelector(selectCart);
-  const { id } = useParams();
+  const { subdomain } = useParams();
  const { isMobile, isTablet } = useBreakPoint();

  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
@@ -93,7 +93,7 @@ export default function CartMobileTabletLayout({
                  </div>

                  <Link
-                    to={`/${id}/menu?${
+                    to={`/${subdomain}/menu?${
                      orderType ? `orderType=${orderType}` : ""
                    }`}
                    style={{
--- a/src/pages/cart/components/cartFooter/CartFooter.tsx
+++ b/src/pages/cart/components/cartFooter/CartFooter.tsx
@@ -13,7 +13,7 @@ interface CartFooterProps {
 export default function CartFooter({ form }: CartFooterProps) {
  const { t } = useTranslation();
  const { items } = useAppSelector(selectCart);
-  const { id } = useParams();
+  const { subdomain } = useParams();
  const orderType = localStorage.getItem("orderType");
  const navigate = useNavigate();

@@ -22,7 +22,7 @@ export default function CartFooter({ form }: CartFooterProps) {
    else {
      try {
        await form.validateFields();
-        navigate(`/${id}/checkout`);
+        navigate(`/${subdomain}/checkout`);
      } catch (error) {
        console.log("Form validation failed:", error);
      }
@@ -32,7 +32,7 @@ export default function CartFooter({ form }: CartFooterProps) {
  return (
    <div className={styles.cartFooter}>
      <Link
-        to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
+        to={`/${subdomain}/menu?${orderType ? `orderType=${orderType}` : ""}`}
        style={{
          width: "100%",
        }}
--- a/src/pages/checkout/components/CheckoutButton.tsx
+++ b/src/pages/checkout/components/CheckoutButton.tsx
@@ -1,23 +1,23 @@
 import { Button, FormInstance } from "antd";
 import { selectCart } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
-import { OrderType } from "pages/checkout/hooks/types.ts";

 export default function CheckoutButton({ form }: { form: FormInstance }) {
  const { t } = useTranslation();
  const { orderType } = useAppSelector(selectCart);
  const navigate = useNavigate();
  const { handleCreateOrder } = useOrder();
-  const { id } = useParams();
+  const { subdomain } = useParams();

  const handleSplitBillClick = useCallback(() => {
-    navigate(`/${id}/split-bill`);
-  }, [navigate, id]);
+    navigate(`/${subdomain}/split-bill`);
+  }, [navigate, subdomain]);

  const handlePlaceOrderClick = useCallback(async () => {
    try {
--- 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 };
 }
--- 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<string>("");
  const [selectedDate, setSelectedDate] = useState<string>("");
@@ -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);
      });
  };
--- 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={<PlusOutlined title="add" className={styles.plusIcon} />}
      size="small"
      onClick={() => {
-        navigate(`/${id}/menu`);
+        navigate(`/${subdomain}/menu`);
      }}
      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
      style={{ backgroundColor: colors.primary }}
--- 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);
--- 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() {
          }}
        >
          <Link
-            to={`/${id}/cart`}
+            to={`/${subdomain}/cart`}
            style={{
              width: "100%",
              padding: "0 16px",
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -23,7 +23,6 @@ interface MenuListProps {
        categories: { id: number; name: string; image?: string }[];
      }
    | undefined;
-  id: string;
  categoryRefs: React.RefObject<{ [key: number]: HTMLDivElement | null }>;
 }

@@ -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}`);
    }
  };

--- 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 (
    <div
@@ -17,7 +17,7 @@ export default function SearchButton() {
        onClick={() =>
          // router.push(`?orderType=${orderType}&search=true`)
          // setSelectedClientRoute("search")
-          navigate(`/${id}/search`)
+          navigate(`/${subdomain}/search`)
        }
      />
    </div>
--- 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}`);
              }}
            >
              <Card
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -30,15 +30,15 @@ import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";

 function MenuPage() {
-  const { id } = useParams();
+  const { subdomain } = useParams();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [_, setSearchParams] = useSearchParams();
  const { isRTL } = useAppSelector((state) => 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() {

              <MenuList
                data={menuData}
-                id={id || ""}
                categoryRefs={categoryRefs}
              />
            </Space>
--- 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 (
    <>
      <ProHeader>{t("orders.title")}</ProHeader>
      <OrdersList />
      <Row className={styles.row}>
-        <Link to={`/${id}/menu`} style={{ width: "100%" }}>
+        <Link to={`/${subdomain}/menu`} style={{ width: "100%" }}>
          <Button type="primary" shape="round" className={styles.button}>
            {t("orders.browseMenu")}
          </Button>
--- 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`);
              });
          }}
        >
--- 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({
          <ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
        ),
        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}`,
        },
      ]) ||
        []),  
--- 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 <Loader />;

@@ -74,7 +74,7 @@ export default function RestaurantPage() {
    localStorage.setItem("restaurantID", restaurant.restautantId);
  }

-  if (param.id && !pathname.endsWith(param.id)) return <Outlet />;
+  if (param.subdomain && !pathname.endsWith(param.subdomain)) return <Outlet />;

  return (
    <>
--- 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 (
    <>
-      <ProHeader customRoute={`/${id}/menu`}>{t("menu.search")}</ProHeader>
+      <ProHeader customRoute={`/${subdomain}/menu`}>{t("menu.search")}</ProHeader>

      <div
        style={{
@@ -185,7 +185,7 @@ export default function SearchPage() {
            zIndex: 999,
          }}
        >
-          <Link to={`/${id}/cart`} style={{ width: "100%" }}>
+          <Link to={`/${subdomain}/cart`} style={{ width: "100%" }}>
            <Button
              type="primary"
              shape="round"
--- a/src/pages/split-bill/page.tsx
+++ b/src/pages/split-bill/page.tsx
@@ -14,7 +14,7 @@ import TotalPeopleActions from "./components/TotalPeopleActions";

 export default function SplitBillPage() {
  const { t } = useTranslation();
-  const { id } = useParams();
+  const { subdomain } = useParams();
  const { themeName } = useAppSelector((state) => state.theme);

  return (
@@ -128,7 +128,7 @@ export default function SplitBillPage() {
          backgroundColor: themeName === "light" ? "white" : ProBlack2,
        }}
      >
-        <Link to={`/${id}/order`} style={{ width: "100%" }}>
+        <Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
          <Button
            type="primary"
            shape="round"
--- a/src/redux/api/others.ts
+++ b/src/redux/api/others.ts
@@ -16,11 +16,11 @@ import { baseApi } from "./apiSlice";
 export const branchApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getRestaurantDetails: builder.query<RestaurantDetails, string | void>({
-      query: (restaurantId: string) => ({
+      query: (restaurantSubdomain: string) => ({
        url: RESTAURANT_DETAILS_URL,
        method: "POST",
        body: {
-          restaurant_id: restaurantId,
+          subdomain: restaurantSubdomain,
        },
      }),
      transformResponse: (response: any) => {
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -6,6 +6,7 @@ import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer";
 import AddressPage from "pages/address/page";
 import CartPage from "pages/cart/page";
 import CheckoutPage from "pages/checkout/page";
+import { Error400Page, ErrorPage } from "pages/errors";
 import LoginPage from "pages/login/page";
 import MenuPage from "pages/menu/page";
 import OrderPage from "pages/order/page";
@@ -17,7 +18,6 @@ import SearchPage from "pages/search/page";
 import SplitBillPage from "pages/split-bill/page";
 import React, { ReactNode, Suspense, useEffect } from "react";
 import { createHashRouter, useLocation } from "react-router-dom";
-import { Error400Page, ErrorPage } from "pages/errors";

 const { useBreakpoint } = Grid;

@@ -59,7 +59,8 @@ export const router = createHashRouter([
    errorElement: <ErrorPage />,
  },
  {
-    path: "/:id",
+    // subdomain is unique string identifier for each restaurant
+    path: "/:subdomain",
    element: <PageWrapper children={<RestaurantPage />} />,
    errorElement: <ErrorPage />,
    children: [