cart: Special request > move files

src/pages/cart/components/specialRequest/BottomSheet.tsx

@@ -0,0 +1,68 @@
+import { Button, Input } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+
+const { TextArea } = Input;
+
+interface SpecialRequestBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+export function BottomSheet({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: SpecialRequestBottomSheetProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleSave = () => {
+    onSave(value);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("cart.specialRequest")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={"40vh"}
+      snapPoints={["30vh"]}
+    >
+      <div className="space-y-4">
+        <div>
+          <TextArea
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={t("cart.specialRequest")}
+            rows={6}
+            size="middle"
+            autoFocus={false}
+          />
+        </div>
+
+        <br />
+
+        <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+          {t("cart.save")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}

src/pages/cart/components/specialRequest/Dialog.tsx

@@ -0,0 +1,66 @@
+import { Button, Input, Modal } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const { TextArea } = Input;
+
+interface SpecialRequestDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+export function Dialog({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: SpecialRequestDialogProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleSave = () => {
+    onSave(value);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={t("cart.specialRequest")}
+      open={isOpen}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="cancel" onClick={handleCancel}>
+          {t("cart.cancel")}
+        </Button>,
+        <Button key="save" type="primary" onClick={handleSave}>
+          {t("cart.save")}
+        </Button>,
+      ]}
+      width={500}
+      destroyOnHidden
+    >
+      <div className="space-y-4">
+        <div>
+          <TextArea
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={t("cart.specialRequest")}
+            rows={6}
+            autoFocus={false}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,9 @@
+.inputField {
+  height: 50px;
+}
+
+.editButton {
+  color: var(--primary, #FFB700);
+  font-size: 14px;
+  cursor: pointer;
+}

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -0,0 +1,65 @@
+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 { RightOutlined } from "@ant-design/icons";
+import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
+import { useState } from "react";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
+import styles from "./SpecialRequestCard.module.css";
+
+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}
+          className={styles.inputField}
+          suffix={
+            <div
+              className={styles.editButton}
+              onClick={() => setIsSpecialRequestOpen(true)}
+            >
+              <u>{t("cart.editNote")}</u> <RightOutlined />
+            </div>
+          }
+        />
+      </ProInputCard>
+      {isDesktop ? (
+        <Dialog
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      ) : (
+        <BottomSheet
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      )}
+    </>
+  );
+}