update restaurant details source & add loyalty icon

2025-10-20 21:42:48 +03:00
parent c7f5620f5a
commit 6a6f92aefc
15 changed files with 305 additions and 205 deletions
--- a/src/pages/menu/components/LocalStorageHandler.tsx
+++ b/src/pages/menu/components/LocalStorageHandler.tsx
@@ -31,7 +31,7 @@ export default function LocalStorageHandler({
  restaurantName,
 }: {
  restaurantID: string;
-  restaurantName: string;
+  restaurantName?: string;
 }) {
  useEffect(() => {
    // Check if restaurant has changed
--- a/src/pages/menu/components/MenuFooter/MenuFooter.tsx
+++ b/src/pages/menu/components/MenuFooter/MenuFooter.tsx
@@ -4,16 +4,16 @@ import ProText from "components/ProText";
 import { selectCartItems } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";

 export function MenuFooter() {
  const items = useAppSelector(selectCartItems);
-  const restaurantName = localStorage.getItem("restaurantName");
  const { themeName } = useAppSelector((state) => state.theme);
  const { isMobile, isTablet } = useBreakPoint();
  const { t } = useTranslation();
+  const { id } = useParams();

  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);

@@ -37,7 +37,7 @@ export function MenuFooter() {
          }}
        >
          <Link
-            to={`/${restaurantName}/cart`}
+            to={`/${id}/cart`}
            style={{
              width: "100%",
              padding: "0 16px",
--- a/src/pages/menu/components/MenuList/MenuList.module.css
+++ b/src/pages/menu/components/MenuList/MenuList.module.css
@@ -658,14 +658,18 @@
  height: 60;
 }

-.heartButton {
+.loyaltyButton {
  position: absolute;
-  top: 5px;
-  left: 5px;
+  top: 1px;
+  left: 1px;
+  z-index: 99;
+  background-color: var(--primary) !important;
+  color: white !important;
+  border: none !important;
 }

-:global(.rtl) .heartButton {
-  right: 5px;
+:global(.ant-app-rtl) .loyaltyButton {
+  right: 1px !important;
 }

 .productLink {
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -1,4 +1,5 @@
-import { Badge, Card } from "antd";
+import { StarOutlined } from "@ant-design/icons";
+import { Badge, Button, Card } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import ImageWithFallback from "components/ImageWithFallback";
 import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
@@ -9,7 +10,7 @@ import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCart
 import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { colors } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
@@ -31,7 +32,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
  const products = data?.products;
  const { isMobile, isTablet, isDesktop } = useBreakPoint();
  const { items } = useAppSelector((state) => state.order);
-  const restaurantName = localStorage.getItem("restaurantName");
+  const { id } = useParams();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
@@ -45,7 +46,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
    if (isDesktop) {
      setIsDialogOpen(true);
    } else {
-      navigate(`/${restaurantName}/product/${item.id}`);
+      navigate(`/${id}/product/${item.id}`);
    }
  };

@@ -238,6 +239,14 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                          </div>
                        </div>
                        <div style={{ position: "relative" }}>
+                          {item.isHasLoyalty && (
+                            <Button
+                              className={styles.loyaltyButton}
+                              icon={<StarOutlined />}
+                              style={{ width: 24, height: 24 }}
+                            />
+                          )}
+
                          <ImageWithFallback
                            src={item.image_small || "/default.png"}
                            fallbackSrc="/default.png"
--- a/src/pages/menu/components/SearchMenu/SearchMenu.tsx
+++ b/src/pages/menu/components/SearchMenu/SearchMenu.tsx
@@ -1,4 +1,5 @@
-import { Badge, Card } from "antd";
+import { StarOutlined } from "@ant-design/icons";
+import { Badge, Button, Card } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import ImageWithFallback from "components/ImageWithFallback";
 import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
@@ -6,7 +7,7 @@ import ProText from "components/ProText";
 import useBreakPoint from "hooks/useBreakPoint";
 import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { colors } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
@@ -20,10 +21,10 @@ export function SearchMenu({ products }: MenuListProps) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile, isTablet } = useBreakPoint();
  const { items } = useAppSelector((state) => state.order);
-  const restaurantName = localStorage.getItem("restaurantName");
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
+  const { id } = useParams();

  // Show error state if data exists but has no products
  if (products && (!products || products.length === 0)) {
@@ -40,167 +41,175 @@ export function SearchMenu({ products }: MenuListProps) {
  return (
    <>
      <div className={styles.menuSections}>
-      <div className={styles.menuItemsGrid}>
-        {products.map((item: Product) => (
-          <div
-            key={item.id}
-            className={styles.productLink + " product-link-search"}
-            onClick={() => {
-              localStorage.setItem("product", JSON.stringify(item));
-              navigate(`/${restaurantName}/product/${item.id}`);
-            }}
-          >
-            <Card
+        <div className={styles.menuItemsGrid}>
+          {products.map((item: Product) => (
+            <div
              key={item.id}
-              style={{
-                borderRadius: 8,
-                overflow: "hide",
-                width: "100%",
-              }}
-              styles={{
-                body: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "space-between",
-                  borderRadius: 8,
-                  padding: item.description
-                    ? "16px 16px 8px 16px"
-                    : "16px 16px 24px 16px",
-                  overflow: "hide",
-                  boxShadow:
-                    "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
-                },
+              className={styles.productLink + " product-link-search"}
+              onClick={() => {
+                localStorage.setItem("product", JSON.stringify(item));
+                navigate(`/${id}/product/${item.id}`);
              }}
            >
-              <div
+              <Card
+                key={item.id}
                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  height: "100%",
-                  gap: isMobile ? 10 : 16,
+                  borderRadius: 8,
+                  overflow: "hide",
+                  width: "100%",
+                }}
+                styles={{
+                  body: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    borderRadius: 8,
+                    padding: item.description
+                      ? "16px 16px 8px 16px"
+                      : "16px 16px 24px 16px",
+                    overflow: "hide",
+                    boxShadow:
+                      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
+                  },
                }}
              >
                <div
                  style={{
                    display: "flex",
-                    flexDirection: "column",
+                    alignItems: "center",
                    justifyContent: "space-between",
-                    gap: "0.5rem",
+                    height: "100%",
+                    gap: isMobile ? 10 : 16,
                  }}
                >
-                  <ProText
+                  <div
                    style={{
-                      margin: 0,
-                      display: "inline-block",
-                      fontSize: "1rem",
-                      fontWeight: 600,
-                      letterSpacing: "-0.01em",
-                      lineHeight: 1.2,
-                      color: themeName === "dark" ? "#fff" : "#000044",
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "space-between",
+                      gap: "0.5rem",
                    }}
                  >
-                    {isRTL ? item.name : item.nameOther}
-                  </ProText>
-                  {item.description && (
                    <ProText
-                      type="secondary"
-                      className={styles.itemDescription}
                      style={{
-                        display: "-webkit-box",
-                        WebkitBoxOrient: "vertical",
-                        WebkitLineClamp: 2,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        wordWrap: "break-word",
-                        overflowWrap: "break-word",
-                        lineHeight: "1.5rem",
-                        maxHeight: "3em",
+                        margin: 0,
+                        display: "inline-block",
                        fontSize: "1rem",
-                        letterSpacing: "0.01em",
+                        fontWeight: 600,
+                        letterSpacing: "-0.01em",
+                        lineHeight: 1.2,
+                        color: themeName === "dark" ? "#fff" : "#000044",
                      }}
                    >
-                      {item.description}
+                      {isRTL ? item.name : item.nameOther}
                    </ProText>
-                  )}
+                    {item.description && (
+                      <ProText
+                        type="secondary"
+                        className={styles.itemDescription}
+                        style={{
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 2,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          wordWrap: "break-word",
+                          overflowWrap: "break-word",
+                          lineHeight: "1.5rem",
+                          maxHeight: "3em",
+                          fontSize: "1rem",
+                          letterSpacing: "0.01em",
+                        }}
+                      >
+                        {item.description}
+                      </ProText>
+                    )}

-                  <div>
-                    {item.original_price !== item.price && (
+                    <div>
+                      {item.original_price !== item.price && (
+                        <ArabicPrice
+                          price={item.original_price}
+                          strong
+                          style={{
+                            fontSize: "1rem",
+                            fontWeight: 700,
+                            color: colors.primary,
+                            textDecoration: "line-through",
+                            marginRight: isRTL ? 0 : 10,
+                            marginLeft: isRTL ? 10 : 0,
+                          }}
+                        />
+                      )}
                      <ArabicPrice
-                        price={item.original_price}
+                        price={item.price}
                        strong
                        style={{
                          fontSize: "1rem",
                          fontWeight: 700,
                          color: colors.primary,
-                          textDecoration: "line-through",
-                          marginRight: isRTL ? 0 : 10,
-                          marginLeft: isRTL ? 10 : 0,
                        }}
                      />
+                    </div>
+
+                    <div
+                      style={{
+                        position: "relative",
+                        ...(isRTL ? { right: -5 } : {}),
+                      }}
+                    >
+                      <ItemDescriptionIcons
+                        className={styles.itemDescriptionIcons}
+                      />
+                    </div>
+                  </div>
+                  <div style={{ position: "relative" }}>
+                    <ImageWithFallback
+                      src={item.image_small || "/default.png"}
+                      fallbackSrc="/default.png"
+                      alt={item.name}
+                      className={`${styles.popularMenuItemImage} ${
+                        isMobile
+                          ? styles.popularMenuItemImageMobile
+                          : isTablet
+                            ? styles.popularMenuItemImageTablet
+                            : styles.popularMenuItemImageDesktop
+                      }`}
+                      width={90}
+                      height={90}
+                    />
+
+                    {item.isHasLoyalty && (
+                      <Button
+                        className={styles.loyaltyButton}
+                        icon={<StarOutlined />}
+                        style={{ width: 24, height: 24 }}
+                      />
                    )}
-                    <ArabicPrice
-                      price={item.price}
-                      strong
-                      style={{
-                        fontSize: "1rem",
-                        fontWeight: 700,
-                        color: colors.primary,
-                      }}
-                    />
-                  </div>

-                  <div
-                    style={{
-                      position: "relative",
-                      ...(isRTL ? { right: -5 } : {}),
-                    }}
-                  >
-                    <ItemDescriptionIcons
-                      className={styles.itemDescriptionIcons}
-                    />
+                    <AddToCartButton />
+
+                    {items.find((i) => i.id === item.id) && (
+                      <Badge
+                        count={items.find((i) => i.id === item.id)?.quantity}
+                        className={
+                          styles.cartBadge +
+                          " " +
+                          (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
+                        }
+                        style={{
+                          backgroundColor: colors.primary,
+                        }}
+                        title={`${
+                          items.find((i) => i.id === item.id)?.quantity
+                        } in cart`}
+                      />
+                    )}
                  </div>
                </div>
-                <div style={{ position: "relative" }}>
-                  <ImageWithFallback
-                    src={item.image_small || "/default.png"}
-                    fallbackSrc="/default.png"
-                    alt={item.name}
-                    className={`${styles.popularMenuItemImage} ${
-                      isMobile
-                        ? styles.popularMenuItemImageMobile
-                        : isTablet
-                          ? styles.popularMenuItemImageTablet
-                          : styles.popularMenuItemImageDesktop
-                    }`}
-                    width={90}
-                    height={90}
-                  />
-
-                  <AddToCartButton item={item} />
-
-                  {items.find((i) => i.id === item.id) && (
-                    <Badge
-                      count={items.find((i) => i.id === item.id)?.quantity}
-                      className={
-                        styles.cartBadge +
-                        " " +
-                        (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
-                      }
-                      style={{
-                        backgroundColor: colors.primary,
-                      }}
-                      title={`${
-                        items.find((i) => i.id === item.id)?.quantity
-                      } in cart`}
-                    />
-                  )}
-                </div>
-              </div>
-            </Card>
-          </div>
-        ))}
-      </div>
+              </Card>
+            </div>
+          ))}
+        </div>
      </div>
    </>
  );
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -30,15 +30,14 @@ function MenuPage() {
  const { id } = useParams();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();
-  const { data: restaurantDetails, isLoading: isLoadingRestaurant } =
-    useGetRestaurantDetailsQuery(id, {
+  const { data: restaurant, isLoading: isLoadingRestaurant } =
+    useGetRestaurantDetailsQuery("595", {
      skip: !id,
    });
-  const { restaurant } = restaurantDetails || {};
  const { data: menuData, isLoading: isLoadingMenu } = useGetMenuQuery(
-    restaurantDetails?.restaurant.id,
+    restaurant?.restautantId,
    {
-      skip: !restaurantDetails?.restaurant.id,
+      skip: !restaurant?.restautantId,
    },
  );
  const { categoryRefs } = useScrollHandler();
@@ -47,10 +46,7 @@ function MenuPage() {

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

      {isLoading ? (
        <MenuSkeleton categoryCount={10} itemCount={30} variant="default" />
@@ -58,7 +54,7 @@ function MenuPage() {
        <div className={styles.menuContainer}>
          <div className={styles.restaurantHeader}>
            <ImageWithFallback
-              src={restaurant?.coverm}
+              src={restaurant?.restaurant_cover}
              fallbackSrc={default_image}
              alt={t("menu.restaurantCover")}
              className={styles.cover}
@@ -71,7 +67,7 @@ function MenuPage() {
            />

            <Image
-              src={restaurant?.logom}
+              src={restaurant?.restaurant_logo}
              alt={t("menu.restaurantLogo")}
              className={styles.logo}
              width={"100%"}
@@ -101,7 +97,7 @@ function MenuPage() {
          <div className={`${styles.headerContainer}`}>
            <div className={styles.contentWrapper}>
              <ProTitle level={4} className={styles.restaurantTitle}>
-                {isRTL ? restaurant?.nameAR : restaurant?.name}
+                {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
              </ProTitle>

              <div className={styles.ratingContainer}>
@@ -120,7 +116,8 @@ function MenuPage() {
          <div className={`${styles.pageContainer}`}>
            <Space direction="vertical" style={{ width: "100%", gap: 16 }}>
              <div>
-                <LoyaltyCard />
+                {restaurant?.loyalty_stamps &&
+                  restaurant?.is_loyalty_enabled && <LoyaltyCard />}
                <CategoriesList categories={menuData?.categories || []} />
              </div>