enhance form label & add comment to product

src/pages/product/components/ProductFooter.tsx

@@ -1,10 +1,6 @@
 import { RightOutlined, ShoppingCartOutlined } from "@ant-design/icons";
 import { Button, Form, Input, message, Row } from "antd";
-import {
-  addItem,
-  selectCart,
-  updateSpecialRequest,
-} from "features/order/orderSlice";
+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";
@@ -34,10 +30,10 @@ export default function ProductFooter({
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { themeName } = useAppSelector((state) => state.theme);
-  const { specialRequest } = useAppSelector(selectCart);
   const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
   const { isMobile, isDesktop } = useBreakPoint();
   const { isRTL } = useAppSelector((state) => state.locale);
+  const [specialRequest, setSpecialRequest] = useState("");
 
   // Check if product has any customization options
   const hasCustomizationOptions = useMemo(() => {
@@ -67,6 +63,7 @@ export default function ProductFooter({
             price: product?.price,
             image: product?.image,
             description: product?.description,
+            comment: specialRequest,
             variant: variantId,
             extras: selectedExtras,
             extrasgroup: selectedGroups,
@@ -85,7 +82,7 @@ export default function ProductFooter({
   };
 
   const handleSpecialRequestSave = (value: string) => {
-    dispatch(updateSpecialRequest(value));
+    setSpecialRequest(value);
   };
 
   const handleSpecialRequestClose = () => {
@@ -138,6 +135,7 @@ export default function ProductFooter({
                 size="large"
                 autoFocus={false}
                 className={styles.inputField}
+                onChange={(e) => setSpecialRequest(e.target.value)}
                 suffix={
                   <div
                     className={styles.editButton}