From ad9c9ce51641418454478e6f2531e67259b6e0b0 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 28 Oct 2025 20:29:16 +0300
Subject: [PATCH] take "orderType" from url

---
 src/pages/address/page.tsx                  |  5 +---
 src/pages/menu/page.tsx                     |  9 +++---
 src/pages/restaurant/RestaurantServices.tsx | 12 ++++----
 src/pages/restaurant/page.tsx               | 32 +++++++++++++++++++--
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/pages/address/page.tsx b/src/pages/address/page.tsx
index d826316..b96c84f 100644
--- a/src/pages/address/page.tsx
+++ b/src/pages/address/page.tsx
@@ -163,11 +163,8 @@ export default function AddressPage() {
         }}
       >
         <Link
-          to={`/${id}/menu?orderType=delivery`}
+          to={`/${id}/menu?orderType=${OrderType.Delivery}`}
           style={{ width: "100%" }}
-          onClick={() => {
-            localStorage.setItem("orderType", OrderType.Delivery);
-          }}
         >
           <Button
             type="primary"
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index 69fe779..b7e356a 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -9,12 +9,12 @@ import { useScrollHandler } from "contexts/ScrollHandlerContext";
 import useBreakPoint from "hooks/useBreakPoint";
 import { useRestaurant } from "hooks/useRestaurant";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import {
   useGetMenuQuery,
   useGetRestaurantDetailsQuery,
 } from "redux/api/others";
-import { useAppSelector, useAppDispatch } from "redux/hooks";
+import { useAppSelector } from "redux/hooks";
 import { default_image } from "utils/constants";
 import BackButton from "./components/BackButton";
 import { CartButton } from "./components/CartButton/CartButton";
@@ -28,11 +28,10 @@ import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";
 import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
 import { OrderType } from "pages/checkout/hooks/types.ts";
-import { updateOrderType } from "features/order/orderSlice.ts";
 
 function MenuPage() {
   const { id } = useParams();
-  const dispatch = useAppDispatch();
+  const [_, setSearchParams] = useSearchParams();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderType } = useAppSelector((state) => state.order);
   const { t } = useTranslation();
@@ -106,7 +105,7 @@ function MenuPage() {
               <Select
                 value={orderType}
                 onChange={(value) => {
-                  dispatch(updateOrderType(value));
+                  setSearchParams({ orderType: value });
                 }}
                 options={orderTypeOptions}
                 variant="borderless"
diff --git a/src/pages/restaurant/RestaurantServices.tsx b/src/pages/restaurant/RestaurantServices.tsx
index 3b439a1..c1d70d9 100644
--- a/src/pages/restaurant/RestaurantServices.tsx
+++ b/src/pages/restaurant/RestaurantServices.tsx
@@ -53,7 +53,7 @@ export default function RestaurantServices({
           />
         ),
         color: "bg-blue-50 text-blue-600",
-        href: `/${id}/menu?orderType=dine-in`,
+        href: `/${id}/menu?orderType=${OrderType.DineIn}`,
       },
     ]) ||
       []),
@@ -68,7 +68,7 @@ export default function RestaurantServices({
           />
         ),
         color: "bg-green-50 text-green-600",
-        href: `/${id}/menu?orderType=pickup`,
+        href: `/${id}/menu?orderType=${OrderType.Pickup}`,
       },
     ]) ||
       []),
@@ -83,7 +83,7 @@ export default function RestaurantServices({
           />
         ),
         color: "bg-pink-50 text-pink-600",
-        href: `/${id}/menu?orderType=gift`,
+        href: `/${id}/menu?orderType=${OrderType.Gift}`,
       },
     ]) ||
       []),
@@ -96,7 +96,7 @@ export default function RestaurantServices({
           <ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
         ),
         color: "bg-purple-50 text-purple-600",
-        href: `/${id}/menu?orderType=room`,
+        href: `/${id}/menu?orderType=${OrderType.ToRoom}`,
       },
     ]) ||
       []),
@@ -111,7 +111,7 @@ export default function RestaurantServices({
           />
         ),
         color: "bg-orange-50 text-orange-600",
-        href: `/${id}/menu?orderType=office`,
+        href: `/${id}/menu?orderType=${OrderType.ToOffice}`,
       },
     ]) ||
       []),
@@ -126,7 +126,7 @@ export default function RestaurantServices({
           />
         ),
         color: "bg-indigo-50 text-indigo-600",
-        href: `/${id}/menu?orderType=booking`,
+        href: `/${id}/menu?orderType=${OrderType.Booking}`,
       },
     ]) ||
       []),
diff --git a/src/pages/restaurant/page.tsx b/src/pages/restaurant/page.tsx
index 5d505d8..0243b2f 100644
--- a/src/pages/restaurant/page.tsx
+++ b/src/pages/restaurant/page.tsx
@@ -5,7 +5,7 @@ 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 } from "redux/hooks";
+import { useAppSelector, useAppDispatch } from "redux/hooks";
 import styles from "./restaurant.module.css";
 import RestaurantServices from "./RestaurantServices";
 
@@ -13,13 +13,29 @@ import RestaurantServices from "./RestaurantServices";
 import Ads1 from "components/Ads/Ads1";
 import { Loader } from "components/Loader/Loader";
 import { useRestaurant } from "hooks/useRestaurant";
-import { useParams, Outlet, useLocation } from "react-router-dom";
+import {
+  useParams,
+  Outlet,
+  useLocation,
+  useSearchParams,
+} from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import LocalStorageHandler from "../menu/components/LocalStorageHandler";
+import { useEffect } from "react";
+import {
+  updateOrderType,
+  CART_STORAGE_KEYS,
+} from "features/order/orderSlice.ts";
+import { OrderType } from "pages/checkout/hooks/types.ts";
+
+const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE);
 
 export default function RestaurantPage() {
+  const dispatch = useAppDispatch();
   const param = useParams();
+  const [searchParams] = useSearchParams();
   const { pathname } = useLocation();
+  const { orderType } = useAppSelector((state) => state.order);
   const { isRTL } = useAppSelector((state) => state.locale);
   const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
     skip: !param.id,
@@ -28,6 +44,18 @@ export default function RestaurantPage() {
   // Automatically load restaurant taxes when restaurant data is available
   useRestaurant(restaurant);
 
+  useEffect(() => {
+    const urlOrderType = searchParams.get("orderType");
+    if (urlOrderType && urlOrderType !== orderType)
+      dispatch(updateOrderType(urlOrderType as OrderType));
+    else if (
+      storedOrderType &&
+      storedOrderType !== "" &&
+      storedOrderType !== orderType
+    )
+      dispatch(updateOrderType(storedOrderType as OrderType));
+  }, [searchParams, orderType]);
+
   if (isLoading) {
     return <Loader />;
   }