take "orderType" from url
This commit is contained in:
@@ -163,11 +163,8 @@ export default function AddressPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
to={`/${id}/menu?orderType=delivery`}
|
to={`/${id}/menu?orderType=${OrderType.Delivery}`}
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
onClick={() => {
|
|
||||||
localStorage.setItem("orderType", OrderType.Delivery);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
|
|||||||
@@ -9,12 +9,12 @@ import { useScrollHandler } from "contexts/ScrollHandlerContext";
|
|||||||
import useBreakPoint from "hooks/useBreakPoint";
|
import useBreakPoint from "hooks/useBreakPoint";
|
||||||
import { useRestaurant } from "hooks/useRestaurant";
|
import { useRestaurant } from "hooks/useRestaurant";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams, useSearchParams } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
useGetMenuQuery,
|
useGetMenuQuery,
|
||||||
useGetRestaurantDetailsQuery,
|
useGetRestaurantDetailsQuery,
|
||||||
} from "redux/api/others";
|
} from "redux/api/others";
|
||||||
import { useAppSelector, useAppDispatch } from "redux/hooks";
|
import { useAppSelector } from "redux/hooks";
|
||||||
import { default_image } from "utils/constants";
|
import { default_image } from "utils/constants";
|
||||||
import BackButton from "./components/BackButton";
|
import BackButton from "./components/BackButton";
|
||||||
import { CartButton } from "./components/CartButton/CartButton";
|
import { CartButton } from "./components/CartButton/CartButton";
|
||||||
@@ -28,11 +28,10 @@ import SearchButton from "./components/SearchButton";
|
|||||||
import styles from "./menu.module.css";
|
import styles from "./menu.module.css";
|
||||||
import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
|
import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
|
||||||
import { OrderType } from "pages/checkout/hooks/types.ts";
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
||||||
import { updateOrderType } from "features/order/orderSlice.ts";
|
|
||||||
|
|
||||||
function MenuPage() {
|
function MenuPage() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const dispatch = useAppDispatch();
|
const [_, setSearchParams] = useSearchParams();
|
||||||
const { isRTL } = useAppSelector((state) => state.locale);
|
const { isRTL } = useAppSelector((state) => state.locale);
|
||||||
const { orderType } = useAppSelector((state) => state.order);
|
const { orderType } = useAppSelector((state) => state.order);
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -106,7 +105,7 @@ function MenuPage() {
|
|||||||
<Select
|
<Select
|
||||||
value={orderType}
|
value={orderType}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
dispatch(updateOrderType(value));
|
setSearchParams({ orderType: value });
|
||||||
}}
|
}}
|
||||||
options={orderTypeOptions}
|
options={orderTypeOptions}
|
||||||
variant="borderless"
|
variant="borderless"
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export default function RestaurantServices({
|
|||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
color: "bg-blue-50 text-blue-600",
|
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",
|
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",
|
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} />
|
<ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
|
||||||
),
|
),
|
||||||
color: "bg-purple-50 text-purple-600",
|
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",
|
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",
|
color: "bg-indigo-50 text-indigo-600",
|
||||||
href: `/${id}/menu?orderType=booking`,
|
href: `/${id}/menu?orderType=${OrderType.Booking}`,
|
||||||
},
|
},
|
||||||
]) ||
|
]) ||
|
||||||
[]),
|
[]),
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import XIcon from "components/Icons/social/XIcon";
|
|||||||
import { LanguageSwitch } from "components/LanguageSwitch/LanguageSwitch";
|
import { LanguageSwitch } from "components/LanguageSwitch/LanguageSwitch";
|
||||||
import ProText from "components/ProText";
|
import ProText from "components/ProText";
|
||||||
import ProTitle from "components/ProTitle";
|
import ProTitle from "components/ProTitle";
|
||||||
import { useAppSelector } from "redux/hooks";
|
import { useAppSelector, useAppDispatch } from "redux/hooks";
|
||||||
import styles from "./restaurant.module.css";
|
import styles from "./restaurant.module.css";
|
||||||
import RestaurantServices from "./RestaurantServices";
|
import RestaurantServices from "./RestaurantServices";
|
||||||
|
|
||||||
@@ -13,13 +13,29 @@ import RestaurantServices from "./RestaurantServices";
|
|||||||
import Ads1 from "components/Ads/Ads1";
|
import Ads1 from "components/Ads/Ads1";
|
||||||
import { Loader } from "components/Loader/Loader";
|
import { Loader } from "components/Loader/Loader";
|
||||||
import { useRestaurant } from "hooks/useRestaurant";
|
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 { useGetRestaurantDetailsQuery } from "redux/api/others";
|
||||||
import LocalStorageHandler from "../menu/components/LocalStorageHandler";
|
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() {
|
export default function RestaurantPage() {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
const param = useParams();
|
const param = useParams();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
|
const { orderType } = useAppSelector((state) => state.order);
|
||||||
const { isRTL } = useAppSelector((state) => state.locale);
|
const { isRTL } = useAppSelector((state) => state.locale);
|
||||||
const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
|
const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
|
||||||
skip: !param.id,
|
skip: !param.id,
|
||||||
@@ -28,6 +44,18 @@ export default function RestaurantPage() {
|
|||||||
// Automatically load restaurant taxes when restaurant data is available
|
// Automatically load restaurant taxes when restaurant data is available
|
||||||
useRestaurant(restaurant);
|
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) {
|
if (isLoading) {
|
||||||
return <Loader />;
|
return <Loader />;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user