enhance form label & add comment to product

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -13,12 +13,10 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isMobile = false; // Default to desktop
-  const message = { success: (msg: string) => console.log(msg) }; // Simple message handler
   const isRTL = false; // Default to LTR
 
   const handleDeleteItem = (itemId: string) => {
     dispatch(removeItem(Number(itemId)));
-    message.success(t("cart.deleteConfirmation.success"));
   };
 
   const getPopconfirmOverlayStyle = () => ({

src/index.css

@@ -274,7 +274,9 @@ label {
   width: fit-content !important;
   padding-left: 5px !important;
   color: "#A9A9AA" !important;
-  border-radius: 888px;
+  border-radius: 888px !important;
+  padding: 0 0 4px !important;
+  margin: 0 0 2px !important;
 }
 
 :where(.darkApp) .ant-form-item-label {

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 {
+import { addItem } from "features/order/orderSlice";
-  addItem,
-  selectCart,
-  updateSpecialRequest,
-} 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}

src/utils/types/appTypes.ts

@@ -327,6 +327,7 @@ export interface CartItem {
   extrasgroup?: string[];
   isHasLoyalty?: boolean;
   no_of_stamps_give?: number;
+  comment?: string;
 }
 
 export interface User {