product: change actions button postions and general fixes

src/pages/address/address.module.css

@@ -169,6 +169,7 @@
   gap: 1rem;
   background-color: var(--secondary-background);
   box-shadow: none;
+  z-index: 999;
 }
 
 .splitBillButton {

src/pages/product/components/ActionsButtons/ActionsButtons.module.css

@@ -0,0 +1,90 @@
+.quantityControls {
+  display: flex;
+  align-items: center;
+  border-radius: 888px;
+  width: fit-content;
+}
+
+.quantityLabel {
+  font-size: 14px;
+  color: var(--secondary-color);
+  font-weight: 500;
+}
+
+.quantityInputContainer {
+  display: flex;
+  align-items: center;
+  padding: 0 1px;
+  border-radius: 888px;
+  width: 140px;
+  height: 48px;
+}
+
+.quantityButton {
+  padding: 0;
+  width: 25px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-color);
+  transition: all 0.2s ease;
+}
+
+.quantityInput {
+  text-align: center;
+  border: none;
+  box-shadow: none;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.removeButton {
+  padding: 4px 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 30px;
+}
+
+.deleteButtonContainer {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background-color: var(--primary);
+  border-radius: 50%;
+  padding: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.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: #1F1C2E;
+}
+
+.minusIcon {
+  color: var(--secondary-foreground);
+}
+
+.deleteIcon {
+  position: relative;
+  right: 1px;
+}

src/pages/product/components/ActionsButtons/ActionsButtons.tsx

@@ -0,0 +1,125 @@
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
+import { Button, Grid, InputNumber, Popconfirm } from "antd";
+import DeleteIcon from "components/Icons/DeleteIcon";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./ActionsButtons.module.css";
+import { colors } from "ThemeConstants";
+
+const { useBreakpoint } = Grid;
+
+export default function ActionsButtons({
+  quantity,
+  setQuantity,
+  max,
+  min,
+}: {
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  max?: number;
+  min?: number;
+}) {
+  const { t } = useTranslation();
+  const { xs } = useBreakpoint(); // Default to desktop
+  const { isRTL } = useAppSelector((state) => state.locale); // Default to LTR
+
+  const getPopconfirmOverlayStyle = () => ({
+    width: xs ? "280px" : "auto",
+    maxWidth: "320px",
+    ".antPopconfirmMessageTitle": {
+      fontSize: xs ? "14px" : "16px",
+      paddingRight: xs ? "24px" : "0",
+    },
+    ".antPopconfirmMessageContent": {
+      fontSize: xs ? "13px" : "14px",
+      marginTop: "4px",
+    },
+    ".antPopconfirmButtons": {
+      marginTop: "12px",
+      ".ant-btn": {
+        fontSize: xs ? "13px" : "14px",
+        height: xs ? "28px" : "32px",
+        padding: xs ? "0 12px" : "4px 15px",
+      },
+    },
+  });
+
+  return (
+    <div className={styles.cartItemActions}>
+      <div className={styles.quantityControls}>
+        <div className={styles.quantityInputContainer}>
+          {quantity > 0 ? (
+            <Button
+              shape="circle"
+              iconPlacement="start"
+              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
+              size="small"
+              onClick={() => setQuantity(Math.max(1, quantity - 1))}
+              className={styles.quantityButton}
+              {...(min && { disabled: quantity === min })}
+              style={{
+                width: 48,
+                height: 48,
+                minWidth: 48,
+                borderColor: "#DEDEE0",
+              }}
+            />
+          ) : (
+            <Popconfirm
+              title={t("cart.deleteConfirmation.title")}
+              description={t("cart.deleteConfirmation.content")}
+              onConfirm={() => setQuantity(0)}
+              okText={t("cart.deleteConfirmation.confirm")}
+              cancelText={t("cart.deleteConfirmation.cancel")}
+              okButtonProps={{ danger: true }}
+              placement={isRTL ? "left" : "right"}
+              styles={{
+                root: getPopconfirmOverlayStyle(),
+              }}
+            >
+              <Button
+                shape="circle"
+                iconPlacement="start"
+                icon={<DeleteIcon />}
+                size="small"
+                className={styles.addButton}
+                style={{
+                  background: "#FEF2F2",
+                  width: 48,
+                  height: 48,
+                  border: "none",
+                  minWidth: 48,
+                }}
+              />
+            </Popconfirm>
+          )}
+          <InputNumber
+            min={min || 1}
+            max={max || 100}
+            value={quantity || 1}
+            onChange={(value: number | null) => setQuantity(value || 1)}
+            size="small"
+            controls={false}
+            className={styles.quantityInput}
+            name="id"
+          />
+          <Button
+            shape="circle"
+            iconPlacement="start"
+            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
+            size="small"
+            onClick={() => setQuantity(Math.min(100, quantity + 1))}
+            className={styles.quantityButton}
+            {...(max && { disabled: quantity >= max })}
+            style={{
+              width: 48,
+              height: 48,
+              borderColor: "#DEDEE0",
+              minWidth: 48,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/product/components/ProductFooter.tsx

@@ -1,12 +1,7 @@
-import {
+import { ShoppingCartOutlined } from "@ant-design/icons";
-  LeftOutlined,
+import { Button, Form, message, Row } from "antd";
-  RightOutlined,
-  ShoppingCartOutlined,
-} from "@ant-design/icons";
-import { Button, Form, Input, message, Row } from "antd";
 import { addItem } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
-import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -15,6 +10,9 @@ import { Extra, Product, Variant } from "utils/types/appTypes";
 import styles from "../product.module.css";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useParams } from "react-router-dom";
+import TextArea from "antd/es/input/TextArea";
+import ProText from "components/ProText";
+import ActionsButtons from "./ActionsButtons/ActionsButtons";
 
 export default function ProductFooter({
   product,
@@ -24,6 +22,7 @@ export default function ProductFooter({
   selectedGroups,
   quantity,
   onClose,
+  setQuantity,
 }: {
   product: Product;
   isValid?: boolean;
@@ -32,11 +31,11 @@ export default function ProductFooter({
   selectedGroups: Record<number, string[]>;
   quantity: number;
   onClose?: () => void;
+  setQuantity: (quantity: number) => void;
 }) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { themeName } = useAppSelector((state) => state.theme);
-  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
   const { isMobile, isDesktop } = useBreakPoint();
   const { isRTL } = useAppSelector((state) => state.locale);
   const [specialRequest, setSpecialRequest] = useState("");
@@ -122,14 +121,6 @@ export default function ProductFooter({
     }
   };
 
-  const handleSpecialRequestSave = (value: string) => {
-    setSpecialRequest(value);
-  };
-
-  const handleSpecialRequestClose = () => {
-    setIsSpecialRequestOpen(false);
-  };
-
   return (
     <>
       <Row
@@ -149,7 +140,7 @@ export default function ProductFooter({
                 [isRTL ? "right" : "left"]: 0,
                 width: hasCustomizationOptions ? "50%" : "100%",
               }),
-          height: "135px",
+          height: "195px",
         }}
       >
         <div
@@ -160,40 +151,33 @@ export default function ProductFooter({
             gap: "12px",
           }}
         >
-          <div
+          <ProText>{t("cart.specialRequest")}</ProText>
-            style={{
-              display: "flex",
-              gap: "12px",
-              width: "100%",
-            }}
-          >
           <Form.Item style={{ position: "relative", top: -5, width: "100%" }}>
-              <Input
+            <TextArea
               value={specialRequest}
+              rows={2}
               placeholder={t("cart.specialRequest")}
               size="large"
               autoFocus={false}
               className={styles.inputField}
               onChange={(e) => setSpecialRequest(e.target.value)}
-                suffix={
-                  <div
-                    className={styles.editButton}
-                    onClick={() => setIsSpecialRequestOpen(true)}
-                  >
-                    <u>{t("cart.editNote")}</u>{" "}
-                    {isRTL ? <LeftOutlined /> : <RightOutlined />}
-                  </div>
-                }
             />
           </Form.Item>
-          </div>
           <div
             style={{
               display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
               gap: "12px",
               width: "100%",
             }}
           >
+              <ActionsButtons
+                quantity={quantity}
+                setQuantity={setQuantity}
+                max={100}
+                min={1}
+              />
               <Button
                 type="primary"
                 icon={<ShoppingCartOutlined />}
@@ -201,7 +185,7 @@ export default function ProductFooter({
                 disabled={!isValid}
                 style={{
                   flex: 1,
-                height: "48px",
+                  height: 48,
                   fontSize: isMobile ? "1rem" : "16px",
                   transition: "all 0.3s ease",
                   width: "100%",
@@ -224,20 +208,22 @@ export default function ProductFooter({
                   }
                 }}
               >
-              {isValid ? t("menu.addToCart") : t("menu.selectRequiredOptions")}
+                {isValid
+                  ? t("menu.addToCart")
+                  : t("menu.selectRequiredOptions")}
               </Button>
           </div>
         </div>
       </Row>
 
-      {!isDesktop && isSpecialRequestOpen && (
+      {/* {!isDesktop && isSpecialRequestOpen && (
         <BottomSheet
           isOpen={isSpecialRequestOpen}
           onClose={handleSpecialRequestClose}
           initialValue={specialRequest}
           onSave={handleSpecialRequestSave}
         />
-      )}
+      )} */}
     </>
   );
 }

src/pages/product/components/Variants.tsx

@@ -110,7 +110,7 @@ export default function Variants({
     <>
       {variantsList?.length > 0 && variantLevels.length > 0 && (
         <>
-          {!isDesktop && <Divider style={{ margin: "0" }} />}
+          {!isDesktop && <Divider style={{ margin: "0 0 10px 0" }} />}
           <div>
             <div
               style={{

src/pages/product/page.tsx

@@ -1,4 +1,3 @@
-import ActionsButtons from "components/ActionsButtons/ActionsButtons";
 import ImageWithFallback from "components/ImageWithFallback";
 import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
 import ProText from "components/ProText";
@@ -177,7 +176,7 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height: "80vh",
+        height: "75vh",
         overflow: "auto",
         scrollbarWidth: "none",
       }}
@@ -221,12 +220,16 @@ export default function ProductDetailPage({
               <div className={styles.productHeader}>
                 <div className={styles.productDetails}>
                   <ProText
-                    strong
+                    style={{
-                    style={{ fontSize: isDesktop ? "1.5rem" : "1.25rem" }}
+                      fontWeight: 400,
+                      fontStyle: "Regular",
+                      fontSize: "14px",
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                    }}
                   >
                     {isRTL ? product?.nameOther : product?.name}
                   </ProText>
-                  <br />
                   {product?.description && (
                     <ProText
                       type="secondary"
@@ -239,24 +242,19 @@ export default function ProductDetailPage({
                         textOverflow: "ellipsis",
                         wordWrap: "break-word",
                         overflowWrap: "break-word",
-                        lineHeight: "1.4",
                         maxHeight: "2.8em",
-                        fontWeight: "500",
+                        fontWeight: 400,
-                        letterSpacing: "0.01em",
+                        fontStyle: "Regular",
-                        fontSize: "1rem",
+                        fontSize: "12px",
+                        lineHeight: "140%",
+                        letterSpacing: "0%",
+                        marginTop: 10,
                       }}
                     >
                       {isRTL ? product?.descriptionAR : product?.description}
                     </ProText>
                   )}
-                  <ArabicPrice
+
-                    price={product?.price}
-                    style={{
-                      fontSize: isDesktop ? "1.2rem" : "1rem",
-                      color: colors.primary,
-                      marginTop: "12px",
-                    }}
-                  />
                   <div
                     style={{
                       display: "flex",
@@ -271,14 +269,13 @@ export default function ProductDetailPage({
                       className={styles.itemDescriptionIcons}
                     />
                   </div>
-                </div>
+                  <ArabicPrice
-
+                    price={product?.price}
-                <div className={styles.quantitySection}>
+                    style={{
-                  <ActionsButtons
+                      fontSize: isDesktop ? "1.2rem" : "1rem",
-                    quantity={quantity}
+                      color: colors.primary,
-                    setQuantity={(quantity) => setQuantity(quantity)}
+                      marginTop: "12px",
-                    max={100}
+                    }}
-                    min={1}
                   />
                 </div>
               </div>
@@ -293,6 +290,7 @@ export default function ProductDetailPage({
                 selectedGroups={selectedExtrasByGroup}
                 quantity={quantity}
                 onClose={onClose}
+                setQuantity={(quantity: number) => setQuantity(quantity)}
               />
             )}
           </div>
@@ -301,7 +299,7 @@ export default function ProductDetailPage({
           {hasCustomizationOptions && (
             <div className={isDesktop ? styles.rightColumn : styles.fullWidth}>
               <Space
-                direction="vertical"
+                orientation="vertical"
                 size="middle"
                 style={{ width: "100%", padding: "0 1rem" }}
               >
@@ -341,6 +339,7 @@ export default function ProductDetailPage({
             selectedExtras={selectedExtras}
             selectedGroups={selectedExtrasByGroup}
             quantity={quantity}
+            setQuantity={(quantity: number) => setQuantity(quantity)}
           />
         )}
       </div>

src/pages/product/product.module.css

@@ -232,7 +232,7 @@
   align-items: center;
   justify-content: flex-end;
   position: relative;
-  top: 5px
+  top: 5px;
 }
 
 /* Dark mode desktop styles */
@@ -320,8 +320,9 @@
 }
 
 .inputField {
-  height: 50px;
+  height: 100px;
   width: 100% !important;
+  border-radius: 6px;
 }
 
 .editButton {
@@ -329,4 +330,3 @@
   font-size: 14px;
   cursor: pointer;
 }
-