preview the special request in mobile screen

src/pages/cart/components/specialRequest/SpecialRequestCard.module.css

@@ -7,10 +7,12 @@
   font-size: 14px;
   cursor: pointer;
 }
+
 .textArea {
   border-radius: 24px;
   margin: 40px 0;
 }
+
 .actionButton {
   border-radius: 24px;
   width: 100% !important;

src/pages/menu/components/CartButton/CartButton.tsx

@@ -14,7 +14,7 @@ export function CartButton() {
 
   const onCartClick = useCallback(() => {
     navigate(`/${subdomain}/cart`);
-  }, [navigate, id]);
+  }, [navigate, subdomain]);
 
   const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
 

src/pages/product/components/ProductFooter.tsx

@@ -1,5 +1,5 @@
-import { ShoppingCartOutlined } from "@ant-design/icons";
-import { Button, message, Row } from "antd";
+import { RightOutlined, ShoppingCartOutlined } from "@ant-design/icons";
+import { Button, Form, Input, message, Row } from "antd";
 import {
   addItem,
   selectCart,
@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
+import styles from "../product.module.css";
 
 export default function ProductFooter({
   product,
@@ -85,14 +86,12 @@ export default function ProductFooter({
 
   const handleSpecialRequestSave = (value: string) => {
     dispatch(updateSpecialRequest(value));
-    message.success(t("cart.specialRequest") + " " + t("common.confirm"));
   };
 
   const handleSpecialRequestClose = () => {
     setIsSpecialRequestOpen(false);
   };
 
-  //
   return (
     <>
       <Row
@@ -112,10 +111,45 @@ export default function ProductFooter({
                 [isRTL ? "right" : "left"]: 0,
                 width: hasCustomizationOptions ? "50%" : "100%",
               }),
-          height: "10vh",
+          height: "135px",
         }}
       >
-        <div style={{ width: "100%" }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              gap: "12px",
+              width: "100%",
+            }}
+          >
+            <Form.Item
+              name="specialRequest"
+              style={{ position: "relative", top: -5, width: "100%" }}
+            >
+              <Input
+                value={specialRequest}
+                placeholder={t("cart.specialRequest")}
+                size="large"
+                autoFocus={false}
+                className={styles.inputField}
+                suffix={
+                  <div
+                    className={styles.editButton}
+                    onClick={() => setIsSpecialRequestOpen(true)}
+                  >
+                    <u>{t("cart.editNote")}</u> <RightOutlined />
+                  </div>
+                }
+              />
+            </Form.Item>
+          </div>
           <div
             style={{
               display: "flex",
@@ -130,7 +164,7 @@ export default function ProductFooter({
               disabled={!isValid}
               style={{
                 flex: 1,
-                height: isMobile ? "48px" : "48px",
+                height: "48px",
                 fontSize: isMobile ? "1rem" : "16px",
                 transition: "all 0.3s ease",
                 width: "100%",

src/pages/product/page.tsx

@@ -18,7 +18,11 @@ import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
 
-export default function ProductDetailPage({ onClose }: { onClose?: () => void }) {
+export default function ProductDetailPage({
+  onClose,
+}: {
+  onClose?: () => void;
+}) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { isDesktop } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
@@ -252,20 +256,20 @@ export default function ProductDetailPage({ onClose }: { onClose?: () => void })
                       ...(isRTL ? { marginRight: -5 } : {}),
                     }}
                   >
-                    <ItemDescriptionIcons className={styles.itemDescriptionIcons} />
+                    <ItemDescriptionIcons
+                      className={styles.itemDescriptionIcons}
+                    />
                   </div>
                 </div>
 
-                {isDesktop && (
-                  <div className={styles.quantitySection}>
-                    <ActionsButtons
-                      quantity={quantity}
-                      setQuantity={(quantity) => setQuantity(quantity)}
-                      max={100}
-                      min={1}
-                    />
-                  </div>
-                )}
+                <div className={styles.quantitySection}>
+                  <ActionsButtons
+                    quantity={quantity}
+                    setQuantity={(quantity) => setQuantity(quantity)}
+                    max={100}
+                    min={1}
+                  />
+                </div>
               </div>
             </div>
 

src/pages/product/product.module.css

@@ -308,3 +308,15 @@
 :global(.darkApp) .itemDescriptionIcons path {
   fill: #ffffff !important;
 }
+
+.inputField {
+  height: 50px;
+  width: 100% !important;
+}
+
+.editButton {
+  color: var(--primary);
+  font-size: 14px;
+  cursor: pointer;
+}
+