product: change actions button postions and general fixes

src/pages/product/components/ProductFooter.tsx

@@ -1,12 +1,7 @@
-import {
-  LeftOutlined,
-  RightOutlined,
-  ShoppingCartOutlined,
-} from "@ant-design/icons";
-import { Button, Form, Input, message, Row } from "antd";
+import { ShoppingCartOutlined } from "@ant-design/icons";
+import { Button, Form, 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,84 +151,79 @@ export default function ProductFooter({
             gap: "12px",
           }}
         >
+          <ProText>{t("cart.specialRequest")}</ProText>
+          <Form.Item style={{ position: "relative", top: -5, width: "100%" }}>
+            <TextArea
+              value={specialRequest}
+              rows={2}
+              placeholder={t("cart.specialRequest")}
+              size="large"
+              autoFocus={false}
+              className={styles.inputField}
+              onChange={(e) => setSpecialRequest(e.target.value)}
+            />
+          </Form.Item>
           <div
             style={{
               display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
               gap: "12px",
               width: "100%",
             }}
           >
-            <Form.Item style={{ position: "relative", top: -5, width: "100%" }}>
-              <Input
-                value={specialRequest}
-                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>
-                }
+              <ActionsButtons
+                quantity={quantity}
+                setQuantity={setQuantity}
+                max={100}
+                min={1}
               />
-            </Form.Item>
-          </div>
-          <div
-            style={{
-              display: "flex",
-              gap: "12px",
-              width: "100%",
-            }}
-          >
-            <Button
-              type="primary"
-              icon={<ShoppingCartOutlined />}
-              onClick={handleAddToCart}
-              disabled={!isValid}
-              style={{
-                flex: 1,
-                height: "48px",
-                fontSize: isMobile ? "1rem" : "16px",
-                transition: "all 0.3s ease",
-                width: "100%",
-                borderRadius: 888,
-                boxShadow: "none",
-                backgroundColor: isValid
-                  ? colors.primary
-                  : "rgba(233, 233, 233, 1)",
-                color: isValid ? "#FFF" : "#999",
-                cursor: isValid ? "pointer" : "not-allowed",
-              }}
-              onMouseEnter={(e) => {
-                if (!isMobile && isValid) {
-                  e.currentTarget.style.transform = "translateY(-2px)";
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isMobile) {
-                  e.currentTarget.style.transform = "translateY(0)";
-                }
-              }}
-            >
-              {isValid ? t("menu.addToCart") : t("menu.selectRequiredOptions")}
-            </Button>
+              <Button
+                type="primary"
+                icon={<ShoppingCartOutlined />}
+                onClick={handleAddToCart}
+                disabled={!isValid}
+                style={{
+                  flex: 1,
+                  height: 48,
+                  fontSize: isMobile ? "1rem" : "16px",
+                  transition: "all 0.3s ease",
+                  width: "100%",
+                  borderRadius: 888,
+                  boxShadow: "none",
+                  backgroundColor: isValid
+                    ? colors.primary
+                    : "rgba(233, 233, 233, 1)",
+                  color: isValid ? "#FFF" : "#999",
+                  cursor: isValid ? "pointer" : "not-allowed",
+                }}
+                onMouseEnter={(e) => {
+                  if (!isMobile && isValid) {
+                    e.currentTarget.style.transform = "translateY(-2px)";
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isMobile) {
+                    e.currentTarget.style.transform = "translateY(0)";
+                  }
+                }}
+              >
+                {isValid
+                  ? t("menu.addToCart")
+                  : t("menu.selectRequiredOptions")}
+              </Button>
           </div>
         </div>
       </Row>
 
-      {!isDesktop && isSpecialRequestOpen && (
+      {/* {!isDesktop && isSpecialRequestOpen && (
         <BottomSheet
           isOpen={isSpecialRequestOpen}
           onClose={handleSpecialRequestClose}
           initialValue={specialRequest}
           onSave={handleSpecialRequestSave}
         />
-      )}
+      )} */}
     </>
   );
 }