take "orderType" from url

This commit is contained in:
2025-10-28 20:29:16 +03:00
parent 85ec18f6bb
commit ad9c9ce516
4 changed files with 41 additions and 17 deletions

View File

@@ -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"

View File

@@ -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"

View File

@@ -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}`,
},
]) ||
[]),

View File

@@ -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 />;
}