60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import ProPhoneInput from "components/ProPhoneInput";
|
|
import { selectCart, updateGiftDetails } from "features/order/orderSlice";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import { Checkbox, Form, Input } from "antd";
|
|
import styles from "./SenderformationCard.module.css";
|
|
import ProText from "components/ProText";
|
|
|
|
export default function SenderformationCard() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { giftDetails } = useAppSelector(selectCart);
|
|
|
|
return (
|
|
<ProInputCard title={t("cardDetails.yourInformation")}>
|
|
<div className={styles.customerInformationCard}>
|
|
<Form.Item
|
|
name="senderName"
|
|
rules={[
|
|
{ required: true, message: t("cardDetails.senderNameRequired") },
|
|
]}
|
|
>
|
|
<Input
|
|
placeholder={t("cardDetails.yourName")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
|
|
value={giftDetails?.senderName}
|
|
onChange={(e) => {
|
|
dispatch(updateGiftDetails({ senderName: e.target.value }));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<ProPhoneInput
|
|
propName="senderPhone"
|
|
value={giftDetails?.senderPhone}
|
|
onChange={(e) => {
|
|
dispatch(updateGiftDetails({ senderPhone: e }));
|
|
}}
|
|
/>
|
|
<Form.Item name="isSecret" colon={false}>
|
|
<Checkbox
|
|
style={{
|
|
fontSize: 14,
|
|
}}
|
|
autoFocus={false}
|
|
checked={giftDetails?.isSecret}
|
|
onChange={(e) => {
|
|
dispatch(updateGiftDetails({ isSecret: e.target.checked }));
|
|
}}
|
|
>
|
|
<ProText>{t("cardDetails.keepMyNameSecret")}</ProText>
|
|
</Checkbox>
|
|
</Form.Item>
|
|
</div>
|
|
</ProInputCard>
|
|
);
|
|
}
|