web-menu-react-version-/src/components/CustomBottomSheet/GiftBottomSheet.tsx

import { Button, Checkbox, Form, Input } from "antd";
import ProPhoneInput from "components/ProPhoneInput";
import { GiftDetailsType } from "features/order/orderSlice";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "../ProText";

const { TextArea } = Input;

interface GiftBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: GiftDetailsType | null;
  onSave: (value: GiftDetailsType) => void;
}

export function GiftBottomSheet({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: GiftBottomSheetProps) {
  const { t } = useTranslation();
  const [giftForm] = Form.useForm();
  useEffect(() => {
    giftForm.setFieldsValue(initialValue);
  }, [initialValue, giftForm]);

  const handleSave = () => {
    onSave(giftForm.getFieldsValue());
    giftForm.resetFields();
    onClose();
  };

  const handleCancel = () => {
    giftForm.setFieldsValue(initialValue);
    giftForm.resetFields();
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("address.giftDetails")}
      showCloseButton={false}
      initialSnap={1}
      height={730}
      snapPoints={[730]}
    >
      <Form
        layout="vertical"
        style={{ marginTop: 12 }}
        name="giftForm"
        form={giftForm}
        initialValues={initialValue as GiftDetailsType}
      >
        <Form.Item
          name="receiverName"
          label={t("address.receiverName")}
          rules={[{ required: true, message: "" }]}
          colon={false}
        >
          <Input
            placeholder={t("address.receiverName")}
            size="large"
            style={{
              fontSize: 14,
              height: 50,
            }}
            autoFocus={false}
          />
        </Form.Item>

        <ProPhoneInput
          propName="receiverPhone"
          label={t("address.receiverPhone")}
        />

        <Form.Item name="message" label={t("address.message")}>
          <TextArea
            placeholder={t("address.message")}
            size="large"
            style={{
              fontSize: 14,
              borderRadius: 10,
            }}
            rows={2}
            autoFocus={false}
          />
        </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}
          />
        </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}
          />
        </Form.Item>

        <Form.Item
          name="isSecret"
          rules={[{ required: true, message: "" }]}
          colon={false}
        >
          <Checkbox
            style={{
              fontSize: 14,
            }}
            autoFocus={false}
          >
            <ProText>{t("address.keepMyNameSecret")}</ProText>
          </Checkbox>
        </Form.Item>
      </Form>

      <br />

      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
        {t("address.save")}
      </Button>
    </ProBottomSheet>
  );
}