web-menu-react-version-/src/pages/menu/page.tsx

import { StarFilled } from "@ant-design/icons";
import { Image, Select, Space } from "antd";
import { FloatingButton } from "components/FloatingButton/FloatingButton";
import LogoContainerIcon from "components/Icons/LogoContainerIcon";
import ImageWithFallback from "components/ImageWithFallback";
import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useScrollHandler } from "contexts/ScrollHandlerContext";
import useBreakPoint from "hooks/useBreakPoint";
import { useRestaurant } from "hooks/useRestaurant";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";
import { useParams, useSearchParams } from "react-router-dom";
import {
  useGetMenuQuery,
  useGetRestaurantDetailsQuery,
} from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import { default_image } from "utils/constants";
import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
import BackButton from "./components/BackButton";
import { CartButton } from "./components/CartButton/CartButton";
import { CategoriesList } from "./components/CategoriesList/CategoriesList";
import LocalStorageHandler from "./components/LocalStorageHandler";
import { MenuFooter } from "./components/MenuFooter/MenuFooter";
import { MenuList } from "./components/MenuList/MenuList";
import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
import ScrollEventHandler from "./components/ScrollEventHandler";
import SearchButton from "./components/SearchButton";
import styles from "./menu.module.css";

function MenuPage() {
  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(subdomain, {
      skip: !subdomain,
    });
  const { data: menuData, isLoading: isLoadingMenu } = useGetMenuQuery(
    restaurant?.restautantId,
    {
      skip: !restaurant?.restautantId,
    },
  );
  const { categoryRefs } = useScrollHandler();
  const { isMobile, isTablet, isDesktop } = useBreakPoint();
  const isLoading = isLoadingRestaurant || isLoadingMenu;

  const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");

  // Automatically load restaurant taxes when restaurant data is available
  useRestaurant(restaurant);

  return (
    <>
      <LocalStorageHandler restaurantID={restaurant?.restautantId || ""} />

      {isLoading ? (
        <MenuSkeleton categoryCount={10} itemCount={30} variant="default" />
      ) : (
        <div className={styles.menuContainer}>
          <div className={styles.restaurantHeader}>
            <ImageWithFallback
              src={restaurant?.restaurant_cover}
              fallbackSrc={default_image}
              alt={t("menu.restaurantCover")}
              className={styles.cover}
              width={"100%"}
              height={isMobile ? 182 : isTablet ? 200 : 220}
              preview={false}
              loadingContainerStyle={{
                width: "100vw",
              }}
            />
            <Image
              src={restaurant?.restaurant_logo}
              alt={t("menu.restaurantLogo")}
              className={styles.logo}
              width={"100%"}
              preview={false}
            />
            <LogoContainerIcon className={styles.logoContainerIcon} />
            <div
              className={`${styles.headerFloatingBtn} ${styles.backButtonContainer}`}
            >
              <BackButton />
            </div>
            <div
              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
            >
              <Select
                value={orderType}
                onChange={(value) => {
                  setSearchParams({ orderType: value });
                }}
                options={orderTypeOptions}
                variant="borderless"
                size="small"
                className={styles.orderTypeSelect}
                classNames={{ popup: { root: "order-type-select-dropdown" } }}
                listHeight={150}
              />
            </div>
            <SearchButton />
          </div>

          <div className={`${styles.headerContainer}`}>
            <div className={styles.contentWrapper}>
              <ProTitle level={4} className={styles.restaurantTitle}>
                {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
              </ProTitle>

              <div className={styles.ratingContainer}>
                <StarFilled className={styles.ratingStar} />
                <ProText className={styles.ratingScore}>4.5</ProText>
                <ProText className={styles.ratingCount}>(2567)</ProText>
                <ProText
                  className={`${styles.itemDescription} ${styles.restaurantDescription} responsive-text`}
                >
                  {isRTL ? restaurant?.descriptionAR : restaurant?.description}
                </ProText>
              </div>
            </div>
          </div>

          <div className={`${styles.pageContainer}`}>
            <Space direction="vertical" style={{ width: "100%" }}>
              <div>
                {restaurant?.loyalty_stamps &&
                  restaurant?.is_loyalty_enabled && <LoyaltyCard />}
                <CategoriesList categories={menuData?.categories || []} />
              </div>

              <MenuList
                data={menuData}
                categoryRefs={categoryRefs}
              />
            </Space>
          </div>

          <MenuFooter />

          <ScrollEventHandler />
          <FloatingButton />
          {isDesktop && <CartButton />}
        </div>
      )}
    </>
  );
}

export default MenuPage;