Initial commit

src/components/CustomBottomSheet/GiftBottomSheet.tsx

@@ -0,0 +1,156 @@
+import { Button, Checkbox, Form, Input } from "antd";
+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={"90vh"}
+      snapPoints={["90vh"]}
+    >
+      <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,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>
+        <Form.Item
+          name="receiverPhone"
+          label={t("address.receiverPhone")}
+          rules={[{ required: true, message: "" }]}
+          colon={false}
+        >
+          <Input
+            placeholder={t("address.receiverPhone")}
+            size="large"
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>
+
+        <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,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>
+        <Form.Item
+          name="senderPhone"
+          label={t("address.senderPhone")}
+          rules={[{ required: true, message: "" }]}
+          colon={false}
+        >
+          <Input
+            placeholder={t("address.senderPhone")}
+            size="large"
+            style={{
+              fontSize: 14,
+            }}
+            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>
+  );
+}