115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
import { Checkbox, Form, Input } from "antd";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProPhoneInput from "components/ProPhoneInput";
|
|
import ProText from "components/ProText";
|
|
import { selectCart, updateOrder } from "features/order/orderSlice";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
|
|
const { TextArea } = Input;
|
|
|
|
export function GiftCard() {
|
|
const { t } = useTranslation();
|
|
const { order } = useAppSelector(selectCart);
|
|
const dispatch = useAppDispatch();
|
|
return (
|
|
<>
|
|
<ProInputCard title={t("address.giftDetails")}>
|
|
|
|
|
|
<ProPhoneInput
|
|
propName="receiverPhone"
|
|
label={t("address.receiverPhone")}
|
|
value={order?.receiverPhone}
|
|
onChange={(e) => {
|
|
dispatch(updateOrder({ ...order, receiverPhone: e }));
|
|
}}
|
|
/>
|
|
|
|
<Form.Item name="message" label={t("address.message")}>
|
|
<TextArea
|
|
placeholder={t("address.message")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
borderRadius: 10,
|
|
}}
|
|
rows={2}
|
|
autoFocus={false}
|
|
value={order?.senderName}
|
|
onChange={(e) => {
|
|
dispatch(updateOrder({ ...order, senderName: e.target.value }));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="senderName"
|
|
label={t("address.senderName")}
|
|
rules={[{ required: true, message: "" }]}
|
|
colon={false}
|
|
>
|
|
<Input
|
|
placeholder={t("address.senderName")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
height: 50,
|
|
}}
|
|
autoFocus={false}
|
|
value={order?.senderPhone}
|
|
onChange={(e) => {
|
|
dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<ProPhoneInput
|
|
propName="senderPhone"
|
|
label={t("address.receiverPhone")}
|
|
/>
|
|
|
|
<Form.Item
|
|
name="senderEmail"
|
|
label={t("address.senderEmail")}
|
|
rules={[{ required: true, message: "" }]}
|
|
colon={false}
|
|
>
|
|
<Input
|
|
placeholder={t("address.senderEmail")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
height: 50,
|
|
}}
|
|
autoFocus={false}
|
|
value={order?.senderEmail}
|
|
onChange={(e) => {
|
|
dispatch(updateOrder({ ...order, senderEmail: e.target.value }));
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="isSecret"
|
|
rules={[{ required: true, message: "" }]}
|
|
colon={false}
|
|
>
|
|
<Checkbox
|
|
style={{
|
|
fontSize: 14,
|
|
}}
|
|
autoFocus={false}
|
|
checked={order?.isSecret}
|
|
onChange={(e) => {
|
|
dispatch(updateOrder({ ...order, isSecret: e.target.checked }));
|
|
}}
|
|
>
|
|
<ProText>{t("address.keepMyNameSecret")}</ProText>
|
|
</Checkbox>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
</>
|
|
);
|
|
}
|