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/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -119,7 +119,7 @@
    "viewCart": "عرض السلة",
    "rating": "التقييم ",
    "loyaltyPoints": "نقاط الولاء",
-    "loyaltyDescription": "اشترى 5 وجبات واحصل على وجبة مجانية",
+    "loyaltyDescription": "اشترى {{value}} وجبات واحصل على وجبة مجانية",
    "youMightAlsoLike": "قد تعجبك أيضاً..",
    "choose1": "اختر 1",
    "specialRequest": "طلب خاص",
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -135,7 +135,7 @@
    "viewCart": "View Cart",
    "rating": "Rating ",
    "loyaltyPoints": "Loyalty Points",
-    "loyaltyDescription": "Buy 5 meals and get 1 FREE",
+    "loyaltyDescription": "Buy {{value}} meals and get 1 FREE",
    "choose1": "Choose 1",
    "youMightAlsoLike": "You might also like..",
    "specialRequest": "Special Request",
--- a/src/components/LoyaltyCard/LoyaltyCard.tsx
+++ b/src/components/LoyaltyCard/LoyaltyCard.tsx
@@ -1,13 +1,16 @@
-import { Button, Card, Col, Row } from "antd";
+import { Button, Card, Col, Image, Row } from "antd";
 import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
 import PresentIcon from "components/Icons/cart/PresentIcon";
 import { useTranslation } from "react-i18next";
+import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { colors } from "../../ThemeConstants";
 import ProText from "../ProText";
 import styles from "./LoyaltyCard.module.css";

 const LoyaltyCard = () => {
  const { t } = useTranslation();
+  const { data: restaurant } = useGetRestaurantDetailsQuery("595");
+
  return (
    <div className={styles.loyaltyContainer}>
      <Card className={styles.loyaltyCard}>
@@ -37,7 +40,9 @@ const LoyaltyCard = () => {
                top: -2,
              }}
            >
-              {t("menu.loyaltyDescription")}
+              {t("menu.loyaltyDescription", {
+                value: restaurant?.loyalty_stamps,
+              })}
            </ProText>
          </Col>
          <Col>
@@ -48,11 +53,25 @@ const LoyaltyCard = () => {
          <Col>
            <div className={styles.presentIcon}>
              <div style={{ display: "flex" }}>
-                {["#006347", "#e23000", "#006d34", "#006db7", "#e40000"].map(
-                  (color) => (
-                    <div key={color} className={styles.presentIconItem} />
-                  )
-                )}
+                <Image
+                  className={styles.presentIconItem}
+                  preview={false}
+                  width={32}
+                  height={32}
+                  src={restaurant?.loyalty_stamp_image}
+                />
+                <ProText
+                  type="secondary"
+                  strong
+                  style={{
+                    fontSize: "1rem",
+                    fontWeight: 400,
+                    position: "relative",
+                    top: 3,
+                  }}
+                >
+                  x{restaurant?.loyalty_stamps}
+                </ProText>
              </div>
            </div>
          </Col>
--- a/src/pages/checkout/hooks/useOrder.ts
+++ b/src/pages/checkout/hooks/useOrder.ts
@@ -38,12 +38,12 @@ export default function useOrder() {
      couponID: coupon,
      discountAmount: 0,
      comment: specialRequest,
+      delivery_method: "3",
      timeslot: "",
-      table_id: tables,
+      table_id: tables[0],
      deliveryType: orderType,
-      dineType: orderType,
      type: "table-pickup",
-      user_id: id,
+      // user_id: id,
      restorant_id: restaurantID,
      items: items.map((i) => ({
        ...i,
@@ -74,6 +74,7 @@ export default function useOrder() {
            senderEmail: giftDetails?.senderEmail,
            senderPhone: giftDetails?.senderPhone,
            senderName: giftDetails?.senderName,
+            dineType: orderType
          }
        : {}),
    })
--- 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>

--- a/src/pages/restaurant/RestaurantServices.tsx
+++ b/src/pages/restaurant/RestaurantServices.tsx
@@ -11,7 +11,7 @@ import ToRoomIcon from "components/Icons/ToRoomIcon";
 import ProTitle from "components/ProTitle";
 import { updateOrderType } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./restaurant.module.css";

@@ -37,7 +37,7 @@ export default function RestaurantServices({
 }: RestaurantServicesProps) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
-  const id = localStorage.getItem("restaurantName");
+  const { id } = useParams();
  const dispatch = useAppDispatch();

  const services = [
--- a/src/pages/restaurant/page.tsx
+++ b/src/pages/restaurant/page.tsx
@@ -19,11 +19,12 @@ import LocalStorageHandler from "../menu/components/LocalStorageHandler";
 export default function RestaurantPage() {
  const param = useParams();
  const { isRTL } = useAppSelector((state) => state.locale);
-  const { data, isLoading } = useGetRestaurantDetailsQuery(param.id, {
-    skip: !param.id,
-  });
-  const { restaurant, dineIn, pickup, delivery, gift, toOffice, toRoom } =
-    data || {};
+  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(
+    "595",
+    {
+      skip: !param.id,
+    },
+  );

  if (isLoading) {
    return <Loader />;
@@ -34,8 +35,7 @@ export default function RestaurantPage() {
  }

  if (restaurant) {
-    localStorage.setItem("restaurantID", restaurant.id);
-    localStorage.setItem("restaurantName", restaurant.subdomain);
+    localStorage.setItem("restaurantID", restaurant.restautantId);
  }

  return (
@@ -48,7 +48,7 @@ export default function RestaurantPage() {
        <div style={{ textAlign: "center", maxWidth: "100%" }}>
          <div className={styles.logoContainer}>
            <img
-              src={restaurant?.logom || ""}
+              src={restaurant?.restaurant_logo || ""}
              alt="logo"
              width={96}
              height={96}
@@ -56,7 +56,7 @@ export default function RestaurantPage() {
            />
          </div>
          <ProTitle level={5} style={{ margin: 0 }}>
-            {isRTL ? restaurant?.nameAR : restaurant?.name}
+            {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
          </ProTitle>
          <ProText style={{ fontSize: 14, margin: 0 }}>
            {isRTL ? restaurant?.descriptionAR : restaurant?.description}
@@ -64,12 +64,12 @@ export default function RestaurantPage() {
        </div>

        <RestaurantServices
-          dineIn={dineIn}
-          pickup={pickup}
-          gift={gift}
-          delivery={delivery}
-          toRoom={toRoom}
-          toOffice={toOffice}
+          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" }}
        />
@@ -85,8 +85,8 @@ export default function RestaurantPage() {
      </div>

      <LocalStorageHandler
-        restaurantID={restaurant.id}
-        restaurantName={restaurant.subdomain}
+        restaurantID={restaurant.restautantId}
+        restaurantName={restaurant.restautantName}
      />
    </>
  );
--- a/src/redux/api/others.ts
+++ b/src/redux/api/others.ts
@@ -5,7 +5,7 @@ import {
  ORDERS_URL,
  PRODUCTS_AND_CATEGORIES_URL,
  RESTAURANT_DETAILS_URL,
-  TABLES_URL
+  TABLES_URL,
 } from "utils/constants";

 import { OrderDetails } from "pages/checkout/hooks/types";
@@ -16,10 +16,15 @@ import { baseApi } from "./apiSlice";
 export const branchApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getRestaurantDetails: builder.query<RestaurantDetails, string | void>({
-      query: (restaurantId: string) =>
-        `${RESTAURANT_DETAILS_URL}${restaurantId}`,
+      query: (restaurantId: string) => ({
+        url: RESTAURANT_DETAILS_URL,
+        method: "POST",
+        body: {
+          restaurant_id: restaurantId,
+        },
+      }),
      transformResponse: (response: any) => {
-        return response.result;
+        return response?.result?.restaurants?.[0];
      },
    }),
    getMenu: builder.query<any, string | void>({
@@ -55,10 +60,7 @@ export const branchApi = baseApi.injectEndpoints({
      }),
      invalidatesTags: ["Orders"],
    }),
-    getTables: builder.query<
-      any,
-      { restaurantID: string; tableType: string }
-    >({
+    getTables: builder.query<any, { restaurantID: string; tableType: string }>({
      query: ({
        restaurantID,
        tableType,
@@ -77,8 +79,17 @@ export const branchApi = baseApi.injectEndpoints({
        return response.result.data;
      },
    }),
-    getOrderDetails: builder.query<OrderDetails, { orderID: string; restaurantID: string }>({
-      query: ({ orderID, restaurantID }: { orderID: string; restaurantID: string }) => ({
+    getOrderDetails: builder.query<
+      OrderDetails,
+      { orderID: string; restaurantID: string }
+    >({
+      query: ({
+        orderID,
+        restaurantID,
+      }: {
+        orderID: string;
+        restaurantID: string;
+      }) => ({
        url: `${ORDER_DETAILS_URL}/${orderID}`,
        method: "POST",
        body: {
@@ -98,5 +109,5 @@ export const {
  useGetOrdersQuery,
  useGetTablesQuery,
  useGetOrderDetailsQuery,
-  useCancelOrderMutation
+  useCancelOrderMutation,
 } = branchApi;
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -91,7 +91,7 @@ export const PATHS = {
  privacy: path(ROOTS_DEFAULT, "/privacy"),
 };

-export const RESTAURANT_DETAILS_URL = `${BASE_URL}restaurant/selectLanguage/`;
+export const RESTAURANT_DETAILS_URL = `${BASE_URL}restaurants/one`;
 export const PRODUCTS_AND_CATEGORIES_URL = `${BASE_URL}getRestaurantItems/`;
 export const PRODUCT_DETAILS_URL = `${BASE_URL}getOptionsForItem/`;
 export const ORDERS_URL = `${BASE_URL}customer_orders`;
--- a/src/utils/types/appTypes.ts
+++ b/src/utils/types/appTypes.ts
@@ -319,11 +319,8 @@ export interface Translation {
  locale: string;
 }

-
-
 // #################################################

-
 export interface CartItem {
  id: number | string;
  name: string;
@@ -343,7 +340,6 @@ export interface User {
  role: "admin" | "user";
 }

-
 export type Locale = "en" | "ar";
 export type Theme = "light" | "dark";

@@ -445,6 +441,22 @@ export interface Hours {
 }

 export interface RestaurantDetails {
+  restautantId: string;
+  restautantName: string;
+  nameAR: string;
+  address: string;
+  addressAR: string;
+  restautantImage: string;
+  restaurant_logo: string;
+  restaurant_cover: string;
+  distance: number;
+  description: string;
+  descriptionAR: string;
+  price_rate: number;
+  vat: number;
+  lat: string;
+  lng: string;
+  hasDinein: boolean;
  dineIn: boolean;
  viewMenuOnly: boolean;
  pickup: boolean;
@@ -452,7 +464,45 @@ export interface RestaurantDetails {
  gift: boolean;
  toOffice: boolean;
  toRoom: boolean;
-  restaurant: Restaurant;
+  online_payment: number;
+  online_payment_for: number;
+  is_wallet_payment_enabled: number;
+  is_booking_enabled: number;
+  loyalty_stamp_image: string;
+  loyalty_stamps: number;
+  customer_loyalty_points: number;
+  is_loyalty_enabled: number;
+  package_id: number;
+  deliver_to_office: number;
+  delivery_fees: string;
+  delivery_to_office_fees: string;
+  isCashPaymentEnabled: boolean;
+  banner: Banner[];
+  contact_number: string;
+  menu_url: string;
+  taxes: Tax[];
+  openingTime: string;
+  closingTime: string;
+  isOpened: boolean;
+  isFav: boolean;
+}
+
+export interface Banner {
+  restaurant_banner1: string;
+  restaurant_banner2: string;
+  restaurant_banner3: string;
+}
+
+export interface Tax {
+  id: number;
+  restorant_id: number;
+  name: string;
+  name_local: string;
+  percentage: string;
+  is_active: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: any;
 }

 export interface Category {