Initial commit

src/components/CustomBottomSheet/RoomBottomSheet.tsx

@@ -0,0 +1,133 @@
+import { Button, Divider, Form, Input } from "antd";
+import { RoomDetailsType } from "features/order/orderSlice";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
+
+const { TextArea } = Input;
+
+interface RoomBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: RoomDetailsType | null;
+  onSave: (value: RoomDetailsType) => void;
+}
+
+export function RoomBottomSheet({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: RoomBottomSheetProps) {
+  const { t } = useTranslation();
+  const [roomForm] = Form.useForm();
+  useEffect(() => {
+    roomForm.setFieldsValue(initialValue);
+  }, [initialValue, roomForm]);
+
+  const handleSave = () => {
+    onSave(roomForm.getFieldsValue());
+    roomForm.resetFields();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    roomForm.setFieldsValue(initialValue);
+    roomForm.resetFields();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("address.roomDetails")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={"85vh"}
+      snapPoints={["85vh"]}
+    >
+      <Form
+        layout="vertical"
+        style={{ marginTop: 12 }}
+        name="roomForm"
+        form={roomForm}
+        initialValues={initialValue as RoomDetailsType}
+      >
+        <Form.Item
+          name="roomNo"
+          label={t("address.roomNo")}
+          rules={[{ required: true, message: "" }]}
+          colon={false}
+        >
+          <Input
+            placeholder={t("address.roomNo")}
+            size="large"
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>{" "}
+        <Form.Item
+          name="floorNo"
+          label={t("address.floorNo")}
+          rules={[{ required: true, message: "" }]}
+        >
+          <Input
+            placeholder={t("address.floorNo")}
+            size="large"
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>
+        <Form.Item name="guestName" label={t("address.guestName")}>
+          <Input
+            placeholder={t("address.guestName")}
+            size="large"
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+          />
+        </Form.Item>
+        <Form.Item name="note" label={t("address.note")}>
+          <TextArea
+            placeholder={t("address.addressLabel")}
+            size="large"
+            style={{
+              fontSize: 14,
+              borderRadius: 10,
+            }}
+            rows={2}
+            autoFocus={false}
+          />
+        </Form.Item>
+        <Divider />
+        <Form.Item name="deliverWay">
+          <ProRatioGroups
+            options={[
+              {
+                label: t("address.pleaseKnockSoftly"),
+                value: "pleaseKnockSoftly",
+              },
+              {
+                label: t("address.deliverToRoom"),
+                value: "deliverToRoom",
+              },
+            ]}
+          />
+        </Form.Item>
+      </Form>
+
+      <br />
+
+      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+        {t("address.save")}
+      </Button>
+    </ProBottomSheet>
+  );
+}