working on new button in menu

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;
-  font-size: 1rem; width: 82px;
-  height: 32px;
+  color: #fff;
+  font-size: 1rem;
 }
 
-.addButtonRTL {
-  right: 5%;
+.actionRect {
+  fill: var(--background) !important;
 }
 
-.addButtonLTR {
-  left: 5%;
+.addButton svg rect {
+  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() {
-  const { isRTL } = useAppSelector((state) => state.locale);
+export function AddToCartButton({ item }: { item: Product }) {
   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 (
-    <Button
-      shape="round"
-      title="add"
-      iconPosition="start"
-      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
-      size="small"
-      onClick={handleClick}
-      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
-      style={{ backgroundColor: colors.primary }}
-    >
-      {t("common.add")}
-    </Button>
+  return isInCart ? (
+    <>
+      <div
+        className={styles.addButton}
+        style={{
+          width: 107,
+          height: 45,
+          position: "absolute",
+          bottom: -5,
+          right: -4,
+        }}
+      >
+        <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
-                ? "16px 16px 8px 16px"
-                : "16px",
+              padding: item.description ? "12px 12px 8px 12px" : "12px",
               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={{
-                  position: "relative",
-                  ...(isRTL ? { right: -5 } : {}),
-                }}
-              >
-                <ItemDescriptionIcons className={styles.itemDescriptionIcons} hasLoyalty={item.isHasLoyalty} />
+                <div
+                  style={{
+                    position: "relative",
+                    ...(isRTL ? { right: -5 } : {}),
+                    marginTop: item.description ? 0 : 5,
+                  }}
+                >
+                  <ItemDescriptionIcons
+                    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}
-                  height={92}
+                  width={90}
+                  height={90}
                 />
-
-                {/* <AddToCartButton /> */}
               </Badge>
             </div>
           </div>
+          <AddToCartButton item={item} />
         </Card>
       </div>