working on new button in menu

public/action.svg

@@ -0,0 +1,3 @@
+<svg width="107" height="45" viewBox="0 0 107 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="107" height="45" rx="22.5" fill="#D9D9D9"/>
+</svg>

src/pages/menu/components/AddToCartButton/AddToCartButton.module.css

@@ -5,19 +5,21 @@
 
 .addButton {
   position: absolute;
-  bottom: -10px;
   z-index: 1;
   font-weight: 600;
   border: 0;
-  color: #FFF;
+  color: #fff;
-  font-size: 1rem; width: 82px;
+  font-size: 1rem;
-  height: 32px;
 }
 
-.addButtonRTL {
+.actionRect {
-  right: 5%;
+  fill: var(--background) !important;
 }
 
-.addButtonLTR {
+.addButton svg rect {
-  left: 5%;
+  fill: var(--background) !important;
+}
+
+:global(.darkApp) .addButton rect {
+  fill: var(--background) !important;
 }

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -1,42 +1,180 @@
-import { PlusOutlined } from "@ant-design/icons";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks.ts";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { colors } from "ThemeConstants.ts";
 import styles from "./AddToCartButton.module.css";
+import { useAppSelector, useAppDispatch } from "redux/hooks";
+import { Product } from "utils/types/appTypes";
+import NextIcon from "components/Icons/NextIcon";
+import { addItem } from "features/order/orderSlice";
 
-export function AddToCartButton() {
+export function AddToCartButton({ item }: { item: Product }) {
-  const { isRTL } = useAppSelector((state) => state.locale);
   const { t } = useTranslation();
 
   const { subdomain } = useParams();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
     skip: !subdomain,
   });
+  const { items } = useAppSelector((state) => state.order);
+
+  // Check if product is in cart
+  const isInCart =
+    items
+      .filter((i) => i.id === item.id)
+      .reduce((total, item) => total + item.quantity, 0) > 0;
+
+  // Check if item has extras, variants, or groups
+  const hasOptions =
+    (item.extras && item.extras.length > 0) ||
+    (item.variants && item.variants.length > 0) ||
+    (item.theExtrasGroups && item.theExtrasGroups.length > 0);
 
   const handleClick = () => {
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
       return;
     }
-    navigate(`/${subdomain}/menu`);
+
+    // If item has options, navigate to product details page
+    if (hasOptions) {
+      navigate(`/${subdomain}/product/${item.id}`);
+      return;
+    }
+
+    // If no options, add item directly to cart
+    console.log("hasOptions", hasOptions);
+    if (!hasOptions) {
+      dispatch(
+        addItem({
+          item: {
+            id: Number(item.id),
+            name: item.name,
+            price: item.price,
+            image: item.image,
+            description: item.description,
+            variant: "None",
+            isHasLoyalty: item.isHasLoyalty,
+            no_of_stamps_give: item.no_of_stamps_give,
+          },
+          quantity: 1,
+        }),
+      );
+    }
   };
 
-  return (
+  return isInCart ? (
-    <Button
+    <>
-      shape="round"
+      <div
-      title="add"
+        className={styles.addButton}
-      iconPosition="start"
+        style={{
-      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
+          width: 107,
-      size="small"
+          height: 45,
-      onClick={handleClick}
+          position: "absolute",
-      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
+          bottom: -5,
-      style={{ backgroundColor: colors.primary }}
+          right: -4,
-    >
+        }}
-      {t("common.add")}
+      >
-    </Button>
+        <svg
+          width="107"
+          height="45"
+          viewBox="0 0 107 45"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <rect
+            width="107"
+            height="45"
+            rx="22.5"
+            className={styles.actionRect}
+          />
+        </svg>
+        <Button
+          shape="circle"
+          iconPosition="start"
+          icon={<MinusOutlined title="add" style={{ color: "black" }} />}
+          size="small"
+          onClick={handleClick}
+          className={styles.addButton}
+          style={{
+            backgroundColor: "white",
+            width: 28,
+            height: 28,
+            position: "absolute",
+            bottom: 8,
+            right: 64,
+            minWidth: 28,
+          }}
+        />
+        <Button
+          shape="circle"
+          iconPosition="start"
+          icon={<PlusOutlined title="add" />}
+          size="small"
+          onClick={handleClick}
+          className={styles.addButton}
+          style={{
+            backgroundColor: colors.primary,
+            width: 28,
+            height: 28,
+            position: "absolute",
+            bottom: 8,
+            right: 10,
+            minWidth: 28,
+          }}
+        />
+      </div>
+    </>
+  ) : (
+    <>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          position: "absolute",
+          bottom: -11,
+          right: -2,
+          backgroundColor: "var(--background)",
+          borderRadius: "50%",
+        }}
+      >
+        <Button
+          shape="circle"
+          iconPosition="start"
+          icon={
+            hasOptions ? (
+              <NextIcon
+                className={styles.plusIcon}
+                iconColor="#fff"
+                iconSize={16}
+              />
+            ) : (
+              <PlusOutlined title="add" className={styles.plusIcon} />
+            )
+          }
+          size="small"
+          onClick={handleClick}
+          className={styles.addButton}
+          style={{
+            backgroundColor: colors.primary,
+            width: 36,
+            height: 36,
+            position: "absolute",
+            bottom: 6,
+            right: 6,
+          }}
+        />
+      </div>
+    </>
   );
 }

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -11,6 +11,7 @@ import { useAppSelector } from "redux/hooks.ts";
 import { useParams, useNavigate } from "react-router-dom";
 import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
 import { useState } from "react";
+import { AddToCartButton } from "../AddToCartButton/AddToCartButton";
 
 type Props = {
   item: Product;
@@ -34,10 +35,12 @@ export default function ProductCard({ item }: Props) {
     localStorage.setItem("productId", item.id.toString());
     if (isDesktop) {
       setIsDialogOpen(true);
-    } else {
-      navigate(`/${subdomain}/product/${item.id}`);
     }
+    //  else {
+    //   navigate(`/${subdomain}/product/${item.id}`);
+    // }
   };
+
   return (
     <>
       <div
@@ -49,19 +52,20 @@ export default function ProductCard({ item }: Props) {
           key={item.id}
           style={{
             borderRadius: 8,
+            height: 148,
             overflow: "hide",
             width: "100%",
             boxShadow: "none",
             backgroundColor: "var(--secondary-background)",
+            border: "none",
+            position: "relative",
           }}
           styles={{
             body: {
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
-              padding: item.description
+              padding: item.description ? "12px 12px 8px 12px" : "12px",
-                ? "16px 16px 8px 16px"
-                : "16px",
               overflow: "hide",
               boxShadow: "none",
             },
@@ -80,7 +84,7 @@ export default function ProductCard({ item }: Props) {
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "space-between",
-                gap: "0.5rem",
+                gap: item.description ? "0.5rem" : "3.5rem",
               }}
             >
               <ProText
@@ -146,15 +150,18 @@ export default function ProductCard({ item }: Props) {
                     color: colors.primary,
                   }}
                 />
-              </div>
+                <div
-
+                  style={{
-              <div
+                    position: "relative",
-                style={{
+                    ...(isRTL ? { right: -5 } : {}),
-                  position: "relative",
+                    marginTop: item.description ? 0 : 5,
-                  ...(isRTL ? { right: -5 } : {}),
+                  }}
-                }}
+                >
-              >
+                  <ItemDescriptionIcons
-                <ItemDescriptionIcons className={styles.itemDescriptionIcons} hasLoyalty={item.isHasLoyalty} />
+                    className={styles.itemDescriptionIcons}
+                    hasLoyalty={item.isHasLoyalty}
+                  />
+                </div>
               </div>
             </div>
 
@@ -184,14 +191,13 @@ export default function ProductCard({ item }: Props) {
                         ? styles.popularMenuItemImageTablet
                         : styles.popularMenuItemImageDesktop
                   }`}
-                  width={92}
+                  width={90}
-                  height={92}
+                  height={90}
                 />
-
-                {/* <AddToCartButton /> */}
               </Badge>
             </div>
           </div>
+          <AddToCartButton item={item} />
         </Card>
       </div>
 

src/pages/redeem/page.tsx

@@ -0,0 +1,263 @@
+import { Button, Card, Divider, Image } from "antd";
+import Ads2 from "components/Ads/Ads2";
+import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
+import LocationIcon from "components/Icons/LocationIcon";
+import InvoiceIcon from "components/Icons/order/InvoiceIcon";
+import TimeIcon from "components/Icons/order/TimeIcon";
+import OrderDishIcon from "components/Icons/OrderDishIcon";
+import PaymentDetails from "components/PaymentDetails/PaymentDetails";
+import ProHeader from "components/ProHeader/ProHeader";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import dayjs from "dayjs";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  useGetOrderDetailsQuery,
+  useGetRestaurantDetailsQuery,
+} from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./redeem.module.css";
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
+import Stepper from "pages/order/components/Stepper";
+
+export default function RedeemPage() {
+  const { t } = useTranslation();
+  const { orderId } = useParams();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { restaurant } = useAppSelector((state) => state.order);
+  const navigate = useNavigate();
+  const hasRefetchedRef = useRef(false);
+
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+      // return it t0 60000 after finish testing
+      pollingInterval: 10000,
+      refetchOnMountOrArgChange: true,
+    },
+  );
+
+  // Get restaurant subdomain for refetching
+  const restaurantSubdomain = restaurant?.subdomain;
+  const { refetch: refetchRestaurantDetails } = useGetRestaurantDetailsQuery(
+    restaurantSubdomain || "",
+    {
+      skip: !restaurantSubdomain,
+    },
+  );
+
+  // Reset refetch flag when orderId changes
+  useEffect(() => {
+    hasRefetchedRef.current = false;
+  }, [orderId]);
+
+  // Refetch restaurant details when order status has alias "closed"
+  useEffect(() => {
+    if (orderDetails?.status && !hasRefetchedRef.current) {
+      const hasClosedStatus = orderDetails.status.some(
+        (status) => status?.alias === "closed",
+      );
+
+      if (hasClosedStatus && restaurantSubdomain) {
+        refetchRestaurantDetails();
+        hasRefetchedRef.current = true;
+      }
+    }
+  }, [orderDetails?.status, restaurantSubdomain, refetchRestaurantDetails]);
+
+  return (
+    <>
+      <ProHeader>{t("order.title")}</ProHeader>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "92vh",
+          padding: 16,
+          gap: 16,
+          overflow: "auto",
+          scrollbarWidth: "none",
+        }}
+      >
+        <Card className={styles.orderCard}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "1rem",
+              backgroundColor: "rgba(255, 183, 0, 0.08)",
+              borderRadius: "12px",
+              padding: 16,
+            }}
+          >
+            <Button
+              type="text"
+              shape="circle"
+              style={{
+                backgroundColor: "rgba(255, 183, 0, 0.08)",
+              }}
+            >
+              <Image
+                src={orderDetails?.restaurant_iimage}
+                className={styles.profileImage}
+                width={50}
+                height={50}
+                preview={false}
+              />
+            </Button>
+            <div>
+              <ProText style={{ fontSize: "1rem" }}>
+                {t("order.yourOrderFromFascanoRestaurant")}
+              </ProText>
+              <br />
+              <ProText type="secondary">
+                <LocationIcon className={styles.locationIcon} />{" "}
+                {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant}
+              </ProText>
+            </div>
+          </div>
+
+          <OrderDishIcon className={styles.orderDishIcon} />
+
+          <div>
+            <ProTitle
+              level={5}
+              style={{
+                fontWeight: 600,
+                fontSize: "18px",
+                marginBottom: "0.75rem",
+              }}
+            >
+              {t("order.inProgressOrder")} (1)
+            </ProTitle>
+            <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+              <InvoiceIcon className={styles.invoiceIcon} />
+              <ProText type="secondary" style={{ fontSize: "14px" }}>
+                #{orderDetails?.order.id}
+              </ProText>
+              <TimeIcon className={styles.timeIcon} />
+              <ProText type="secondary" style={{ fontSize: "14px" }}>
+                ordered :- Today -{" "}
+                {dayjs(orderDetails?.status[0]?.pivot?.created_at).format(
+                  "h:mm A",
+                )}
+              </ProText>
+            </div>
+
+            <Divider style={{ margin: "12px 0" }} />
+
+            <Stepper statuses={orderDetails?.status} />
+          </div>
+        </Card>
+
+        <Ads2 />
+
+        <ProInputCard
+          title={
+            <div style={{ marginBottom: 7 }}>
+              <ProText style={{ fontSize: "1rem" }}>
+                {t("order.yourOrderFrom")}
+              </ProText>
+              <br />
+              <ProText type="secondary">
+                <LocationIcon className={styles.locationIcon} />{" "}
+                {t("order.muscat")}
+              </ProText>
+            </div>
+          }
+        >
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            {orderDetails?.orderItems.map((item, index) => (
+              <div key={item.id}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start",
+                    gap: "1rem",
+                  }}
+                >
+                  <Button
+                    type="text"
+                    shape="circle"
+                    style={{
+                      backgroundColor: "rgba(255, 183, 0, 0.08)",
+                    }}
+                  >
+                    {index + 1}X
+                  </Button>
+                  <div>
+                    <ProText
+                      style={{ fontSize: "1rem", position: "relative", top: 8 }}
+                    >
+                      {item.name}
+                    </ProText>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ProInputCard>
+
+        <PaymentDetails order={orderDetails?.order} />
+
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <Image
+              src={restaurant?.restautantImage}
+              width={30}
+              height={30}
+              preview={false}
+              style={{
+                borderRadius: "50%",
+                objectFit: "cover",
+                position: "relative",
+                top: -4,
+              }}
+            />
+
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
+        <RateBottomSheet />
+
+        <CancelOrderBottomSheet />
+      </div>
+    </>
+  );
+}

src/pages/redeem/redeem.module.css

@@ -0,0 +1,247 @@
+.orderSummary :global(.ant-card-body) {
+  padding: 16px !important;
+}
+
+.profileImage {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+    .fascanoIcon {
+  position: relative;
+  top: 3px;
+}
+
+.locationIcon {
+  position: relative;
+  top: 3px;
+}
+
+.orderDishIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.orderCard :global(.ant-card-body) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.orderCard :global(.ant-card-body) > *:not(:last-child) {
+  margin-bottom: 3.5rem;
+}
+
+.orderSummary {
+  transition: all 0.3s ease;
+}
+
+.invoiceIcon {
+  position: relative;
+  top: 3px;
+}
+
+.timeIcon {
+  position: relative;
+  top: 3px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+}
+
+/* Enhanced responsive summary rows */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 16px 0;
+    font-size: 18px;
+  }
+}
+
+.summaryDivider {
+  margin: 8px 0 !important;
+}
+
+/* Enhanced responsive summary divider */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryDivider {
+    margin: 24px 0 !important;
+  }
+}
+
+.totalRow {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+/* Enhanced responsive total row */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .totalRow {
+    font-size: 20px;
+    padding-top: 24px;
+    margin-top: 16px;
+  }
+}
+
+.desktopOrderSummary {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.desktopSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  font-size: 16px;
+}
+
+.desktopTotalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 16px;
+}
+
+[data-theme="dark"] .orderSummary {
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+}
+
+[data-theme="dark"] .orderSummary:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+}
+
+[data-theme="dark"] .summaryRow {
+  color: #b0b0b0;
+}
+
+[data-theme="dark"] .totalRow {
+  color: #ffffff;
+  border-top-color: #424242;
+}
+
+/* Enhanced responsive animations */
+@media (prefers-reduced-motion: no-preference) {
+  .orderSummary {
+    animation: fadeInUp 0.8s ease-out;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Enhanced responsive focus states */
+.orderSummary:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .orderSummary:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* Enhanced responsive hover effects */
+@media (hover: hover) {
+  .orderSummary:hover {
+    transform: translateY(-2px);
+  }
+
+  .menuItemImage:hover {
+    transform: scale(1.05);
+  }
+
+  [data-theme="dark"] .orderSummary:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.backToHomePage {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.backToHomePage :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.nextIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+}
+
+

src/routes/routes.tsx

@@ -14,6 +14,7 @@ import OrdersPage from "pages/orders/page";
 import OtpPage from "pages/otp/page";
 import PayPage from "pages/pay/page";
 import ProductDetailPage from "pages/product/page";
+import RedeemPage from "pages/redeem/page";
 import RestaurantPage from "pages/restaurant/page";
 import SearchPage from "pages/search/page";
 import SplitBillPage from "pages/split-bill/page";
@@ -146,10 +147,14 @@ export const router = createHashRouter([
         path: "pay",
         element: <PageWrapper children={<PayPage />} />,
         errorElement: <ErrorPage />,
-      }
+      },
+      {
+        path: "gift/redeem/:voucherId",
+        element: <PageWrapper children={<RedeemPage />} />,
+        errorElement: <ErrorPage />,
+      },
     ],
   },
-
   {
     path: "errors",
     errorElement: <ErrorPage />,