fixes

- change refresh icon & apply refreshing logic
- apply validation in action btn in menu
- preserve on customer info state upon refresh

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

@@ -1,25 +1,93 @@
-.plusIcon {
-  position: relative;
-  top: -1px;
+.quantityControls {
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  border-radius: 888px;
+  width: fit-content;
 }
 
-.addButton {
-  position: absolute;
-  z-index: 1;
+.quantityLabel {
+  font-size: 14px;
+  color: var(--secondary-color);
+  font-weight: 500;
+}
+
+.quantityInputContainer {
+  display: flex;
+  padding: 0 1px;
+  align-items: center;
+  border-radius: 888px;
+  width: 90px;
+  height: 32px;
+}
+
+.quantityButton {
+  padding: 0;
+  width: 28px !important;
+  height: 28px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-background);
+  background-color: var(--primary);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.quantityInput {
+  text-align: center;
+  border: none;
+  box-shadow: none;
+  font-size: 16px;
   font-weight: 600;
-  border: 0;
-  color: #fff;
-  font-size: 1rem;
+  padding: 0;
 }
 
-.actionRect {
-  fill: var(--background) !important;
+.removeButton {
+  padding: 4px 0;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 30px;
 }
 
-.addButton svg rect {
-  fill: var(--background) !important;
+.deleteButtonContainer {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-radius: 50%;
+  padding: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-:global(.darkApp) .addButton rect {
-  fill: var(--background) !important;
+.deleteIcon {
+  font-size: 18px;
+  color: var(--secondary-color);
+}
+
+.cartItemActions :global(.ant-input-number-outlined) {
+  border: none;
+  width: 40px;
+  background-color: inherit;
+  text-align: center;
+}
+
+.cartItemActions :global(.ant-input-number-input) {
+  text-align: center !important;
+}
+
+.plusIcon {
+  margin-bottom: 1px;
+  color: var(--secondary-background);
+}
+
+.minusIcon {
+  color: var(--secondary-foreground);
+}
+
+.deleteIcon {
+  position: relative;
+  right: 1px;
 }

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

@@ -1,5 +1,5 @@
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
-import { Button, message } from "antd";
+import { Button, InputNumber, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
@@ -8,7 +8,7 @@ import { useAppSelector, useAppDispatch } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
 import NextIcon from "components/Icons/NextIcon";
 import { addItem, removeItem, updateQuantity } from "features/order/orderSlice";
-import ProText from "components/ProText";
+import PlusIcon from "components/Icons/PlusIcon";
 
 export function AddToCartButton({ item }: { item: Product }) {
   const { t } = useTranslation();
@@ -161,68 +161,66 @@ export function AddToCartButton({ item }: { item: Product }) {
   return isInCart && !hasOptions ? (
     <>
       <div
-        className={styles.addButton}
-        style={{
-          width: 90,
-          height: 30,
-          position: "absolute",
-          bottom: 3,
-          [isRTL ? "left" : "right"]: 1,
-          background: "#FAFAFA",
-          borderRadius: 888,
+        className={styles.cartItemActions}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault;
         }}
       >
-        <Button
-          shape="circle"
-          iconPlacement="start"
-          icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
-          size="small"
-          onClick={handleMinusClick}
-          className={styles.addButton}
-          style={{
-            backgroundColor: "white",
-            width: 28,
-            height: 28,
-            position: "absolute",
-            bottom: 1,
-            [isRTL ? "left" : "right"]: 60,
-            minWidth: 28,
-            border: "none",
-          }}
-        />
-        <ProText
-          style={{
-            position: "absolute",
-            bottom: 7,
-            [isRTL ? "left" : "right"]: 45,
-            fontSize: 14,
-            fontWeight: 700,
-            fontStyle: "Bold",
-            lineHeight: "100%",
-            letterSpacing: "0.06px",
-            textAlign: "center",
-            verticalAlign: "middle",
-          }}
-        >
-          {totalQuantity}
-        </ProText>
-        <Button
-          shape="circle"
-          iconPlacement="start"
-          icon={<PlusOutlined title="plus" />}
-          size="small"
-          onClick={handlePlusClick}
-          className={styles.addButton}
-          style={{
-            backgroundColor: "#FFC600",
-            width: 28,
-            height: 28,
-            position: "absolute",
-            bottom: 1,
-            [isRTL ? "left" : "right"]: 2,
-            minWidth: 28,
-          }}
-        />
+        <div className={styles.quantityControls}>
+          <div className={styles.quantityInputContainer}>
+            <Button
+              shape="circle"
+              iconPlacement="start"
+              icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
+              size="small"
+              onClick={handleMinusClick}
+              className={styles.addButton}
+              style={{
+                backgroundColor: "white",
+                width: 28,
+                height: 28,
+                border: "none",
+              }}
+            />
+            <InputNumber
+              min={1}
+              max={99}
+              value={totalQuantity}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault;
+              }}
+              onChange={(value: number | null) =>
+                dispatch(
+                  updateQuantity({
+                    id: item.id,
+                    uniqueId: basicCartItem?.uniqueId || "",
+                    quantity: value || 1,
+                  }),
+                )
+              }
+              size="small"
+              controls={false}
+              className={styles.quantityInput}
+              name="id"
+            />
+            <Button
+              shape="circle"
+              iconPlacement="start"
+              icon={<PlusIcon color="#FFF" />}
+              size="small"
+              onClick={handlePlusClick}
+              disabled={totalQuantity >= 99}
+              className={styles.addButton}
+              style={{
+                backgroundColor: "#FFC600",
+                width: 28,
+                height: 28,
+              }}
+            />
+          </div>
+        </div>
       </div>
     </>
   ) : (
@@ -246,6 +244,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           )
         }
         onClick={handleClick}
+        disabled={!hasOptions && totalQuantity >= 99}
         className={styles.addButton}
         style={{
           color: "#302E3E",

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

@@ -2,7 +2,6 @@ import styles from "pages/menu/components/MenuList/ProductCard.module.css";
 import { Card, Badge } from "antd";
 import ProText from "components/ProText.tsx";
 import ArabicPrice from "components/ArabicPrice";
-import { colors } from "ThemeConstants.ts";
 import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
 import { Product } from "utils/types/appTypes.ts";
@@ -207,7 +206,14 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
                   width={91}
                   height={96}
                 />
-                <AddToCartButton item={item} />
+                <div
+                  style={{
+                    position: "absolute",
+                    bottom: 3,
+                  }}
+                >
+                  <AddToCartButton item={item} />
+                </div>
               </Badge>
             </div>
           </div>

src/pages/menu/menu.module.css

@@ -171,7 +171,7 @@
 }
 
 .headerContainer {
-  margin: 5px 0px;
+  margin: 5px 0 0 0;
 }
 
 /* Enhanced responsive item description */