120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
import InstagramIcon from "components/Icons/social/InstagramIcon";
|
|
import JIcon from "components/Icons/social/JIcon";
|
|
import SnapIcon from "components/Icons/social/SnapIcon";
|
|
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 styles from "./restaurant.module.css";
|
|
import RestaurantServices from "./RestaurantServices";
|
|
|
|
// Import the Client Component for localStorage handling
|
|
import Ads1 from "components/Ads/Ads1";
|
|
import { Loader } from "components/Loader/Loader";
|
|
import { useRestaurant } from "hooks/useRestaurant";
|
|
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";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE);
|
|
|
|
export default function RestaurantPage() {
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation();
|
|
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,
|
|
});
|
|
|
|
// 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 && !orderType)
|
|
dispatch(updateOrderType(storedOrderType as OrderType));
|
|
}, [searchParams, orderType]);
|
|
|
|
if (isLoading) return <Loader />;
|
|
|
|
if (!restaurant) return <div>{t("Restaurant not found")}</div>;
|
|
|
|
if (restaurant) {
|
|
localStorage.setItem("restaurantID", restaurant.restautantId);
|
|
}
|
|
|
|
if (param.id && !pathname.endsWith(param.id)) return <Outlet />;
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.languageSwitch}>
|
|
<LanguageSwitch />
|
|
</div>
|
|
|
|
<div className={styles.homeContainer}>
|
|
<div style={{ textAlign: "center", maxWidth: "100%" }}>
|
|
<div className={styles.logoContainer}>
|
|
<img
|
|
src={restaurant?.restaurant_logo || ""}
|
|
alt="logo"
|
|
width={96}
|
|
height={96}
|
|
className={styles.logo}
|
|
/>
|
|
</div>
|
|
<ProTitle level={5} style={{ margin: 0 }}>
|
|
{isRTL ? restaurant?.nameAR : restaurant?.restautantName}
|
|
</ProTitle>
|
|
<ProText style={{ fontSize: 14, margin: 0 }}>
|
|
{isRTL ? restaurant?.descriptionAR : restaurant?.description}
|
|
</ProText>
|
|
</div>
|
|
|
|
<RestaurantServices
|
|
dineIn={restaurant?.dineIn}
|
|
pickup={restaurant?.pickup}
|
|
gift={restaurant?.gift}
|
|
delivery={restaurant?.delivery}
|
|
toRoom={restaurant?.toRoom}
|
|
toOffice={restaurant?.toOffice}
|
|
is_booking_enabled={restaurant?.is_booking_enabled === 1}
|
|
params={{ id: "1", locale: "en" }}
|
|
/>
|
|
<div className={styles.promotionContainer}>
|
|
<Ads1 />
|
|
</div>
|
|
<div className={styles.socialIconsContainer}>
|
|
<InstagramIcon className={styles.socialIcon} />
|
|
<XIcon className={styles.socialIcon} />
|
|
<SnapIcon className={styles.socialIcon} />
|
|
<JIcon className={styles.socialIcon} />
|
|
</div>
|
|
</div>
|
|
|
|
<LocalStorageHandler
|
|
restaurantID={restaurant.restautantId}
|
|
restaurantName={restaurant.restautantName}
|
|
/>
|
|
</>
|
|
);
|
|
}
|