cart refactor code

src/pages/cart/components/SpecialRequestCard.tsx

@@ -0,0 +1,69 @@
+import { updateSpecialRequest, selectCart } from "features/order/orderSlice.ts";
+import { message, Input } from "antd";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { colors } from "ThemeConstants.ts";
+import { RightOutlined } from "@ant-design/icons";
+import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet.tsx";
+import { useState } from "react";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog.tsx";
+
+export default function SpecialRequestCard() {
+  const { t } = useTranslation();
+  const { isDesktop } = useBreakPoint();
+  const dispatch = useAppDispatch();
+  const { specialRequest } = useAppSelector(selectCart);
+
+  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
+
+  const handleSpecialRequestSave = (value: string) => {
+    dispatch(updateSpecialRequest(value));
+    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleSpecialRequestClose = () => {
+    setIsSpecialRequestOpen(false);
+  };
+  return (
+    <>
+      <ProInputCard title={t("cart.specialRequest")}>
+        <Input
+          value={specialRequest}
+          placeholder={t("cart.specialRequest")}
+          size="large"
+          autoFocus={false}
+          style={{ height: 50 }}
+          suffix={
+            <div
+              style={{
+                color: colors.primary,
+                fontSize: 14,
+                cursor: "pointer",
+              }}
+              onClick={() => setIsSpecialRequestOpen(true)}
+            >
+              <u>{t("cart.editNote")}</u> <RightOutlined />
+            </div>
+          }
+        />
+      </ProInputCard>
+      {isDesktop ? (
+        <SpecialRequestDialog
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      ) : (
+        <SpecialRequestBottomSheet
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      )}
+    </>
+  );
+}