75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
|
|
import { Form, Input } from "antd";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import { selectCart, updateSpecialRequest } from "features/order/orderSlice.ts";
|
|
import useBreakPoint from "hooks/useBreakPoint.ts";
|
|
import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
|
|
import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
import styles from "./SpecialRequestCard.module.css";
|
|
|
|
export default function SpecialRequestCard() {
|
|
const { t } = useTranslation();
|
|
const { isDesktop } = useBreakPoint();
|
|
const dispatch = useAppDispatch();
|
|
const { specialRequest } = useAppSelector(selectCart);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
|
|
|
|
const handleSpecialRequestSave = (value: string) => {
|
|
dispatch(updateSpecialRequest(value));
|
|
};
|
|
|
|
const handleSpecialRequestClose = () => {
|
|
setIsSpecialRequestOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ProInputCard
|
|
title={t("cart.specialRequest")}
|
|
dividerStyle={{ margin: "5px 0 0 0" }}
|
|
>
|
|
<Form.Item
|
|
label={t("cart.specialRequest")}
|
|
name="specialRequest"
|
|
style={{ position: "relative", top: -5 }}
|
|
>
|
|
<Input
|
|
placeholder={t("cart.specialRequest")}
|
|
size="large"
|
|
autoFocus={false}
|
|
className={styles.inputField}
|
|
onChange={(e) => handleSpecialRequestSave(e.target.value)}
|
|
suffix={
|
|
<div
|
|
className={styles.editButton}
|
|
onClick={() => setIsSpecialRequestOpen(true)}
|
|
>
|
|
<u>{t("cart.editNote")}</u> {isRTL ? <LeftOutlined /> : <RightOutlined />}
|
|
</div>
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
{isDesktop ? (
|
|
<Dialog
|
|
isOpen={isSpecialRequestOpen}
|
|
onClose={handleSpecialRequestClose}
|
|
initialValue={specialRequest}
|
|
onSave={handleSpecialRequestSave}
|
|
/>
|
|
) : (
|
|
<BottomSheet
|
|
isOpen={isSpecialRequestOpen}
|
|
onClose={handleSpecialRequestClose}
|
|
initialValue={specialRequest}
|
|
onSave={handleSpecialRequestSave}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|