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

import { StarFilled } from "@ant-design/icons";
import { Image, Space } from "antd";
import { FloatingButton } from "components/FloatingButton/FloatingButton";
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 { 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 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 { id } = useParams();
  const [searchParams] = useSearchParams();
  const orderType = searchParams.get("orderType");
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();
  const { data: restaurantDetails, isLoading: isLoadingRestaurant } =
    useGetRestaurantDetailsQuery(id, {
      skip: !id,
    });
  const { restaurant } = restaurantDetails || {};
  const { data: menuData, isLoading: isLoadingMenu } = useGetMenuQuery(
    restaurantDetails?.restaurant.id,
    {
      skip: !restaurantDetails?.restaurant.id,
    },
  );
  const { categoryRefs } = useScrollHandler();
  const { isMobile, isTablet, isDesktop } = useBreakPoint();

  const isLoading = isLoadingRestaurant || isLoadingMenu;

  return (
    <>
      <LocalStorageHandler
        restaurantID={restaurant?.id || ""}
        restaurantName={restaurant?.subdomain || ""}
        orderType={orderType || ""}
      />

      {isLoading ? (
        <MenuSkeleton categoryCount={10} itemCount={8} variant="default" />
      ) : (
        <div className={styles.menuContainer}>
          <div className={styles.restaurantHeader}>
            <ImageWithFallback
              src={restaurant?.coverm}
              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?.logom}
              alt={t("menu.restaurantLogo")}
              className={styles.logo}
              width={"100%"}
              preview={false}
            />

            <div className={styles.leftShape}></div>
            <div className={styles.rightShape}></div>

            {/* <ResponsiveServices
              orderType={orderType}
              translations={{
                common: {
                  dineIn: translations.common?.dineIn || "Dine In",
                  pickup: translations.common?.pickup || "Pickup",
                  more: translations.common?.more || "More",
                },
              }}
            /> */}

            <div className={styles.backButtonContainer}>
              <BackButton />
            </div>
            <SearchButton />
          </div>

          <div className={`${styles.headerContainer}`}>
            <div className={styles.contentWrapper}>
              <ProTitle level={4} className={styles.restaurantTitle}>
                {isRTL ? restaurant?.nameAR : restaurant?.name}
              </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%", gap: 16 }}>
              <div>
                <LoyaltyCard />
                <CategoriesList categories={menuData?.categories || []} />
              </div>

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

          <MenuFooter />

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

export default MenuPage;