Initial commit

2025-10-04 18:22:24 +03:00
commit 2852c2c054
291 changed files with 38109 additions and 0 deletions
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -0,0 +1,164 @@
+import { StarFilled } from "@ant-design/icons";
+import { Grid, 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 { 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 { 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";
+
+const { useBreakpoint } = Grid;
+
+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, isCategoriesSticky } = useScrollHandler();
+  const { xs, md } = useBreakpoint();
+
+  const isLoading = isLoadingRestaurant || isLoadingMenu;
+
+  return (
+    <>
+      <LocalStorageHandler
+        restaurantID={restaurant?.id || ""}
+        restaurantName={restaurant?.subdomain || ""}
+        orderType={orderType || ""}
+      />
+
+      {isLoading ? (
+        <MenuSkeleton categoryCount={6} 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={182}
+              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.pageContainer}`}>
+            <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}`}
+            // style={{
+            //   maxWidth: isDesktop ? "1200px" : "100%",
+            //   margin: isDesktop ? "0 auto" : "0",
+            // }}
+          >
+            <Space
+              direction="vertical"
+              // size={isMobile ? "middle" : isTablet ? "large" : "large"}
+              style={{ width: "100%", gap: 16 }}
+            >
+              {/* Placeholder to prevent content jumping when categories become sticky */}
+              {/* {isCategoriesSticky && (
+                <div style={{ height: xs ? 95 : md ? 160 : 180 }} />
+              )} */}
+
+              <div>
+                <LoyaltyCard />
+                <CategoriesList categories={menuData?.categories || []} />
+              </div>
+
+              <MenuList
+                data={menuData}
+                id={id || ""}
+                categoryRefs={categoryRefs}
+              />
+            </Space>
+          </div>
+
+          <MenuFooter />
+
+          <ScrollEventHandler />
+          <FloatingButton />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default MenuPage;