From 6a96cb90dfa224c24255f3db3f1706c613400bad Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Thu, 7 Nov 2024 17:33:46 -0800
Subject: [PATCH] fix(web): time disappear on cancel timeline popup (#1220)

Co-authored-by: lby <icesunex@hotmail.com>
---
 web/package.json                              |   1 -
 .../Visualizer/Crust/StoryPanel/utils.ts      |   8 +-
 .../shared/hooks/useTimelineBlock.ts          |   6 +-
 .../reearth-ui/components/ClickAway/index.tsx |  37 ++++++
 .../components/PopupPanel/index.tsx           |  32 ++---
 .../components/TimePicker/index.tsx           |   2 +
 .../beta/lib/reearth-ui/components/index.ts   |   1 +
 .../fields/TimePeriodField/EditPanel/hooks.ts | 107 ++++++++++++++++
 .../{EditModal.tsx => EditPanel/index.tsx}    |  62 +++------
 .../beta/ui/fields/TimePeriodField/hooks.ts   | 119 ------------------
 .../beta/ui/fields/TimePeriodField/index.tsx  |  16 ++-
 .../fields/TimePointField/EditPanel/hooks.ts  |  77 ++++++++++++
 .../{EditPanel.tsx => EditPanel/index.tsx}    |  19 +--
 .../beta/ui/fields/TimePointField/hooks.ts    | 108 ----------------
 .../beta/ui/fields/TimePointField/index.tsx   |  61 +++++----
 web/src/beta/utils/moment-timezone.ts         |  35 ------
 web/src/beta/utils/time.ts                    |  61 +++++++++
 .../theme/reearthTheme/common/index.ts        |   7 +-
 web/yarn.lock                                 |  17 ---
 19 files changed, 372 insertions(+), 404 deletions(-)
 create mode 100644 web/src/beta/lib/reearth-ui/components/ClickAway/index.tsx
 create mode 100644 web/src/beta/ui/fields/TimePeriodField/EditPanel/hooks.ts
 rename web/src/beta/ui/fields/TimePeriodField/{EditModal.tsx => EditPanel/index.tsx} (56%)
 delete mode 100644 web/src/beta/ui/fields/TimePeriodField/hooks.ts
 create mode 100644 web/src/beta/ui/fields/TimePointField/EditPanel/hooks.ts
 rename web/src/beta/ui/fields/TimePointField/{EditPanel.tsx => EditPanel/index.tsx} (85%)
 delete mode 100644 web/src/beta/ui/fields/TimePointField/hooks.ts
 delete mode 100644 web/src/beta/utils/moment-timezone.ts

diff --git a/web/package.json b/web/package.json
index 6ee97ffbf1..5688decf3a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -149,7 +149,6 @@
     "lexical": "0.12.2",
     "localforage": "1.10.0",
     "lodash-es": "4.17.21",
-    "moment-timezone": "0.5.45",
     "quickjs-emscripten": "0.24.0",
     "quickjs-emscripten-sync": "1.5.2",
     "rc-slider": "9.7.5",
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
index d4c7b16f4b..49f36d3b2c 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
@@ -1,4 +1,5 @@
 import { IconName } from "@reearth/beta/lib/reearth-ui";
+import { getTimeZone } from "@reearth/beta/utils/time";
 import { ValueTypes, ValueType } from "@reearth/beta/utils/value";
 import type { Spacing } from "@reearth/core";
 import type { Item } from "@reearth/services/api/propertyApi/utils";
@@ -190,18 +191,13 @@ export const convertPositionToTime = (
   return Math.min(Math.max(start, start + sec), end);
 };
 
-export const getTimeZone = (time: string) => {
-  const zone = time.match(/([-+]\d{1,2}:\d{2})$/);
-  const timezoneOffset = zone?.[1];
-  return timezoneOffset || "";
-};
-
 export const formatISO8601 = (time: string) => {
   // For backforad compatibility
   // from: 2021-08-31T00:00:00 +9:00
   // from: 2021-08-31T00:00:00+9:00
   // to: 2021-08-31T00:00:00+09:00
   const timezone = getTimeZone(time);
+  if (!timezone) return time;
   const splitZone = timezone.split(":");
   if (splitZone[0].length === 2) {
     return time
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
index ed4fe4ede5..1b01ecc9d7 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
+++ b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
@@ -1,3 +1,4 @@
+import { getTimeZone } from "@reearth/beta/utils/time";
 import {
   useVisualizer,
   TickEventCallback,
@@ -10,8 +11,7 @@ import {
   convertOptionToSeconds,
   formatDateToSting,
   formatISO8601,
-  formatTimezone,
-  getTimeZone
+  formatTimezone
 } from "../../Crust/StoryPanel/utils";
 
 export const getNewDate = (d?: Date) => d ?? new Date();
@@ -165,7 +165,7 @@ export default (timelineValues?: TimelineValues) => {
       const iso8601Time = formatISO8601(timelineValues?.currentTime);
       const t = getNewDate(new Date(iso8601Time)).getTime();
       const timezoneOffset = getTimeZone(iso8601Time);
-      setTimezone(timezoneOffset);
+      setTimezone(timezoneOffset ?? "");
       return setCurrentTime(t);
     } else {
       return setCurrentTime(
diff --git a/web/src/beta/lib/reearth-ui/components/ClickAway/index.tsx b/web/src/beta/lib/reearth-ui/components/ClickAway/index.tsx
new file mode 100644
index 0000000000..8912676cca
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/ClickAway/index.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactNode, useEffect, useRef } from "react";
+
+type ClickAwayProps = {
+  children: ReactNode;
+  onClickAway?: () => void;
+};
+
+export const ClickAway: FC<ClickAwayProps> = ({ children, onClickAway }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!onClickAway) return;
+
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        onClickAway?.();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside, {
+      passive: true
+    });
+    document.addEventListener("touchstart", handleClickOutside, {
+      passive: true
+    });
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [onClickAway]);
+
+  return <div ref={containerRef}>{children}</div>;
+};
diff --git a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
index 14b4980037..7995d80989 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@reearth/beta/lib/reearth-ui";
+import { Button, ClickAway } from "@reearth/beta/lib/reearth-ui";
 import { fonts, styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
 
@@ -20,20 +20,22 @@ export const PopupPanel: FC<PopupPanelProps> = ({
   onCancel
 }) => {
   return (
-    <Wrapper width={width}>
-      <HeaderWrapper>
-        <Title>{title}</Title>
-        <Button
-          iconButton
-          icon="close"
-          size="small"
-          onClick={onCancel}
-          appearance="simple"
-        />
-      </HeaderWrapper>
-      <Content>{children}</Content>
-      {actions && <ActionWrapper>{actions}</ActionWrapper>}
-    </Wrapper>
+    <ClickAway onClickAway={onCancel}>
+      <Wrapper width={width}>
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          <Button
+            iconButton
+            icon="close"
+            size="small"
+            onClick={onCancel}
+            appearance="simple"
+          />
+        </HeaderWrapper>
+        <Content>{children}</Content>
+        {actions && <ActionWrapper>{actions}</ActionWrapper>}
+      </Wrapper>
+    </ClickAway>
   );
 };
 
diff --git a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
index 7f1fc0c7b0..bc4a4acd1c 100644
--- a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
@@ -49,6 +49,8 @@ export const TimePicker: FC<TimePickerProps> = ({
         onBlur={handleBlur}
         onFocus={handleFocus}
         type="time"
+        min="00:00:00"
+        max="23:59:59"
         step={1}
       />
     </Wrapper>
diff --git a/web/src/beta/lib/reearth-ui/components/index.ts b/web/src/beta/lib/reearth-ui/components/index.ts
index 6247751adf..32d19a6153 100644
--- a/web/src/beta/lib/reearth-ui/components/index.ts
+++ b/web/src/beta/lib/reearth-ui/components/index.ts
@@ -28,3 +28,4 @@ export * from "./CheckBox";
 export * from "./Markdown";
 export * from "./Slider";
 export * from "./Slide";
+export * from "./ClickAway";
diff --git a/web/src/beta/ui/fields/TimePeriodField/EditPanel/hooks.ts b/web/src/beta/ui/fields/TimePeriodField/EditPanel/hooks.ts
new file mode 100644
index 0000000000..f803c9bed3
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePeriodField/EditPanel/hooks.ts
@@ -0,0 +1,107 @@
+import { getTimeZone, isValidDateTimeFormat } from "@reearth/beta/utils/time";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { TimePeriodFieldProp } from "..";
+
+type Props = {
+  timePeriodValues?: TimePeriodFieldProp;
+  onChange?: (value?: TimePeriodFieldProp) => void;
+  onClose?: () => void;
+};
+
+export default ({ timePeriodValues, onChange, onClose }: Props) => {
+  const [timeRangeInvalid, setTimeRangeInvalid] = useState(false);
+
+  const [localValue, setLocalValue] = useState(timePeriodValues);
+
+  useEffect(() => {
+    setLocalValue(timePeriodValues);
+  }, [timePeriodValues]);
+
+  const handleChange = useCallback(
+    (newValue: string, fieldId: string) => {
+      const updatedData: TimePeriodFieldProp = {
+        ...(localValue ?? {}),
+        currentTime: localValue?.currentTime || "",
+        startTime: localValue?.startTime || "",
+        endTime: localValue?.endTime || ""
+      };
+
+      switch (fieldId) {
+        case "startTime":
+          updatedData.startTime = newValue || "";
+          break;
+        case "currentTime":
+          updatedData.currentTime = newValue;
+          if (
+            (updatedData.startTime &&
+              new Date(updatedData.currentTime.substring(0, 19)) <
+                new Date(updatedData.startTime.substring(0, 19))) ||
+            new Date(updatedData.currentTime.substring(0, 19)) >
+              new Date(updatedData.endTime.substring(0, 19))
+          ) {
+            setTimeRangeInvalid(true);
+          } else {
+            setTimeRangeInvalid(false);
+          }
+          break;
+        case "endTime":
+          updatedData.endTime = newValue;
+          if (
+            updatedData.endTime &&
+            new Date(updatedData.currentTime.substring(0, 19)) >
+              new Date(updatedData?.endTime?.substring(0, 19))
+          ) {
+            setTimeRangeInvalid(true);
+          } else {
+            setTimeRangeInvalid(false);
+          }
+          break;
+        default:
+          break;
+      }
+      setLocalValue(updatedData);
+    },
+    [localValue]
+  );
+
+  const handleSubmit = useCallback(() => {
+    if (
+      localValue &&
+      isValidDateTimeFormat(localValue?.startTime) &&
+      isValidDateTimeFormat(localValue?.currentTime) &&
+      isValidDateTimeFormat(localValue?.endTime)
+    ) {
+      onChange?.(localValue);
+    }
+    onClose?.();
+  }, [localValue, onChange, onClose]);
+
+  const submitDisabled = useMemo(() => {
+    if (
+      !localValue?.startTime ||
+      !localValue?.currentTime ||
+      !localValue?.endTime ||
+      timeRangeInvalid
+    ) {
+      return true;
+    }
+
+    const startTimezone = getTimeZone(localValue?.startTime);
+    const currentTimezone = getTimeZone(localValue?.currentTime);
+    const endTimezone = getTimeZone(localValue?.endTime);
+    if (startTimezone !== currentTimezone || currentTimezone !== endTimezone) {
+      return true;
+    }
+
+    return false;
+  }, [localValue, timeRangeInvalid]);
+
+  return {
+    timeRangeInvalid,
+    submitDisabled,
+    localValue,
+    handleChange,
+    handleSubmit
+  };
+};
diff --git a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx b/web/src/beta/ui/fields/TimePeriodField/EditPanel/index.tsx
similarity index 56%
rename from web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
rename to web/src/beta/ui/fields/TimePeriodField/EditPanel/index.tsx
index 76bb91d011..45bd0c2436 100644
--- a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/EditPanel/index.tsx
@@ -1,72 +1,52 @@
-import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { Button, Icon, Modal, ModalPanel } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
-import { FC, useMemo } from "react";
+import { FC } from "react";
 
-import TimePointField from "../TimePointField";
+import { TimePeriodFieldProp } from "..";
+import TimePointField from "../../TimePointField";
 
 import useHooks from "./hooks";
 
-import { TimePeriodFieldProp } from ".";
-
 type EditPanelProps = {
   visible: boolean;
   timePeriodValues?: TimePeriodFieldProp;
   onClose?: () => void;
   onChange?: (value?: TimePeriodFieldProp) => void;
-  setTimePeriodValues?: (value?: TimePeriodFieldProp) => void;
 };
 
 const EditModal: FC<EditPanelProps> = ({
   visible,
   timePeriodValues,
-  setTimePeriodValues,
   onClose,
   onChange
 }) => {
   const t = useT();
   const {
-    isDisabled,
-    warning,
-    disabledFields,
-    setDisabledFields,
+    submitDisabled,
+    timeRangeInvalid,
+    localValue,
     handleChange,
-    handleSubmit,
-    handleTimePointPopup,
-    handleClose
+    handleSubmit
   } = useHooks({
     timePeriodValues,
     onChange,
-    onClose,
-    setTimePeriodValues
+    onClose
   });
 
-  const timezoneMatches = useMemo(() => {
-    if (!timePeriodValues) return false;
-
-    const startTimezone = getTimeZone(timePeriodValues?.startTime);
-    const currentTimezone = getTimeZone(timePeriodValues?.currentTime);
-    const endTimezone = getTimeZone(timePeriodValues?.endTime);
-
-    const checkTimezones =
-      startTimezone === currentTimezone && currentTimezone === endTimezone;
-    return checkTimezones;
-  }, [timePeriodValues]);
-
   return (
     <Modal visible={visible} size="small">
       <ModalPanel
         title={t("Time Period Settings")}
-        onCancel={handleClose}
+        onCancel={onClose}
         actions={
           <>
-            <Button onClick={handleClose} size="normal" title="Cancel" />
+            <Button onClick={onClose} size="normal" title="Cancel" />
             <Button
               size="normal"
               title="Apply"
               appearance="primary"
-              disabled={!isDisabled || warning || !timezoneMatches}
+              disabled={submitDisabled}
               onClick={handleSubmit}
             />
           </>
@@ -77,33 +57,21 @@ const EditModal: FC<EditPanelProps> = ({
             title={t("* Start Time")}
             description={t("Start time for the timeline")}
             onChange={(newValue) => handleChange(newValue || "", "startTime")}
-            value={timePeriodValues?.startTime}
-            fieldName={"startTime"}
-            disabledField={disabledFields.includes("startTime")}
-            setDisabledFields={setDisabledFields}
-            onTimePointPopupOpen={handleTimePointPopup}
+            value={localValue?.startTime}
           />
           <TimePointField
             title={t("* Current Time")}
             description={t("Current time should be between start and end time")}
             onChange={(newValue) => handleChange(newValue || "", "currentTime")}
-            value={timePeriodValues?.currentTime}
-            disabledField={disabledFields.includes("currentTime")}
-            fieldName={"currentTime"}
-            setDisabledFields={setDisabledFields}
-            onTimePointPopupOpen={handleTimePointPopup}
+            value={localValue?.currentTime}
           />
           <TimePointField
             title={t("* End Time")}
             onChange={(newValue) => handleChange(newValue || "", "endTime")}
             description={t("End time for the timeline")}
-            value={timePeriodValues?.endTime}
-            fieldName={"endTime"}
-            disabledField={disabledFields.includes("endTime")}
-            setDisabledFields={setDisabledFields}
-            onTimePointPopupOpen={handleTimePointPopup}
+            value={localValue?.endTime}
           />
-          {warning && (
+          {timeRangeInvalid && (
             <Warning>
               <Icon icon="warning" size="large" />
               {t(
diff --git a/web/src/beta/ui/fields/TimePeriodField/hooks.ts b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
deleted file mode 100644
index 53f89af427..0000000000
--- a/web/src/beta/ui/fields/TimePeriodField/hooks.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-import { TimePeriodFieldProp } from ".";
-
-type Props = {
-  timePeriodValues?: TimePeriodFieldProp;
-  onChange?: (value?: TimePeriodFieldProp) => void;
-  onClose?: () => void;
-  setTimePeriodValues?: (value?: TimePeriodFieldProp) => void;
-};
-
-export default ({
-  timePeriodValues,
-  onChange,
-  onClose,
-  setTimePeriodValues
-}: Props) => {
-  const [warning, setWarning] = useState(false);
-
-  const handleChange = useCallback(
-    (newValue: string, fieldId: string) => {
-      const updatedData: TimePeriodFieldProp = {
-        ...timePeriodValues,
-        currentTime: timePeriodValues?.currentTime || "",
-        startTime: timePeriodValues?.startTime || "",
-        endTime: timePeriodValues?.endTime || ""
-      };
-
-      switch (fieldId) {
-        case "startTime":
-          updatedData.startTime = newValue || "";
-          break;
-        case "currentTime":
-          updatedData.currentTime = newValue;
-          if (
-            (updatedData.startTime &&
-              new Date(updatedData.currentTime.substring(0, 19)) <
-                new Date(updatedData.startTime.substring(0, 19))) ||
-            new Date(updatedData.currentTime.substring(0, 19)) >
-              new Date(updatedData.endTime.substring(0, 19))
-          ) {
-            setWarning(true);
-          } else {
-            setWarning(false);
-          }
-          break;
-        case "endTime":
-          updatedData.endTime = newValue;
-          if (
-            updatedData.endTime &&
-            new Date(updatedData.currentTime.substring(0, 19)) >
-              new Date(updatedData?.endTime?.substring(0, 19))
-          ) {
-            setWarning(true);
-          } else {
-            setWarning(false);
-          }
-          break;
-        default:
-          break;
-      }
-      setTimePeriodValues?.(updatedData);
-    },
-    [timePeriodValues, setTimePeriodValues]
-  );
-
-  const [disabledFields, setDisabledFields] = useState<string[]>([]);
-
-  const handleTimePointPopup = useCallback((fieldId?: string) => {
-    switch (fieldId) {
-      case "startTime":
-        setDisabledFields(["endTime", "currentTime"]);
-        break;
-      case "endTime":
-        setDisabledFields(["startTime", "currentTime"]);
-        break;
-      case "currentTime":
-        setDisabledFields(["startTime", "endTime"]);
-        break;
-      default:
-        setDisabledFields([]);
-        break;
-    }
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    if (
-      timePeriodValues?.currentTime !== "" &&
-      timePeriodValues?.startTime !== "" &&
-      timePeriodValues?.endTime !== ""
-    ) {
-      onChange?.(timePeriodValues);
-      onClose?.();
-    }
-  }, [timePeriodValues, onChange, onClose]);
-
-  const isDisabled = useMemo(() => {
-    if (timePeriodValues) {
-      return Object.values(timePeriodValues).every((value) => value !== "");
-    }
-    return false;
-  }, [timePeriodValues]);
-
-  const handleClose = useCallback(() => {
-    setTimePeriodValues?.(undefined);
-    onClose?.();
-  }, [setTimePeriodValues, onClose]);
-
-  return {
-    warning,
-    isDisabled,
-    disabledFields,
-    setDisabledFields,
-    handleChange,
-    handleTimePointPopup,
-    handleSubmit,
-    handleClose
-  };
-};
diff --git a/web/src/beta/ui/fields/TimePeriodField/index.tsx b/web/src/beta/ui/fields/TimePeriodField/index.tsx
index 605acfc08a..f33a7e6a34 100644
--- a/web/src/beta/ui/fields/TimePeriodField/index.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/index.tsx
@@ -5,7 +5,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
-import EditModal from "./EditModal";
+import EditPanel from "./EditPanel";
 
 export type TimePeriodFieldProp = {
   currentTime: string;
@@ -29,13 +29,18 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
 
   const t = useT();
   const theme = useTheme();
-  const handleEditorModalClose = useCallback(() => setOpenEditModal(false), []);
+
+  const handleEditorModalClose = useCallback(() => {
+    setOpenEditModal(false);
+    if (!value) {
+      setTimePeriodValues?.(undefined);
+    }
+  }, [value]);
 
   const handleEditorModalOpen = useCallback(() => setOpenEditModal(true), []);
 
   const handleTimePeriodSettingDelete = useCallback(() => {
     if (!value) return;
-    setTimePeriodValues(undefined);
     onChange?.();
   }, [value, onChange]);
 
@@ -103,12 +108,11 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
         </ButtonWrapper>
       </Wrapper>
       {openEditModal && (
-        <EditModal
+        <EditPanel
           timePeriodValues={timePeriodValues}
           onChange={onChange}
           onClose={handleEditorModalClose}
-          visible={openEditModal}
-          setTimePeriodValues={setTimePeriodValues}
+          visible
         />
       )}
     </CommonField>
diff --git a/web/src/beta/ui/fields/TimePointField/EditPanel/hooks.ts b/web/src/beta/ui/fields/TimePointField/EditPanel/hooks.ts
new file mode 100644
index 0000000000..082bef65b6
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePointField/EditPanel/hooks.ts
@@ -0,0 +1,77 @@
+import {
+  getLocalTimezoneOffset,
+  isValidDateTimeFormat,
+  isValidTimezone,
+  TimeZoneOffset
+} from "@reearth/beta/utils/time";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+type Props = {
+  value?: string;
+  onChange?: (value?: string | undefined) => void;
+  onClose: () => void;
+};
+
+export default ({ value, onChange, onClose }: Props) => {
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [timezone, setTimezone] = useState<TimeZoneOffset>(
+    getLocalTimezoneOffset()
+  );
+
+  const handleTimeChange = useCallback((newValue: string) => {
+    if (!newValue) return;
+    setTime(newValue);
+  }, []);
+
+  const handleDateChange = useCallback((newValue: string) => {
+    if (!newValue) return;
+    setDate(newValue);
+  }, []);
+
+  const handleTimezoneSelect = useCallback((newValue: string | string[]) => {
+    if (typeof newValue !== "string") return;
+    setTimezone(newValue as TimeZoneOffset);
+  }, []);
+
+  const handleApply = useCallback(() => {
+    const formattedDateTime = `${date}T${time}${timezone}`;
+    onChange?.(formattedDateTime);
+    onClose?.();
+  }, [onClose, date, time, timezone, onChange]);
+
+  useEffect(() => {
+    if (value && isValidDateTimeFormat(value)) {
+      const [parsedDate, timeWithOffset] = value.split("T");
+      const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
+
+      setDate(parsedDate);
+      setTime(parsedTime);
+      setTimezone(
+        (timeWithOffset.includes("-")
+          ? `-${timezoneOffset}`
+          : `+${timezoneOffset}`) as TimeZoneOffset
+      );
+    } else {
+      setDate("");
+      setTime("");
+      setTimezone(getLocalTimezoneOffset());
+    }
+  }, [value]);
+
+  const applyDisabled = useMemo(
+    () => !date || !time || !isValidTimezone(timezone),
+    [date, time, timezone]
+  );
+
+  return {
+    date,
+    time,
+    timezone,
+    applyDisabled,
+    handleTimeChange,
+    handleTimezoneSelect,
+    handleDateChange,
+    handleApply
+  };
+};
diff --git a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx b/web/src/beta/ui/fields/TimePointField/EditPanel/index.tsx
similarity index 85%
rename from web/src/beta/ui/fields/TimePointField/EditPanel.tsx
rename to web/src/beta/ui/fields/TimePointField/EditPanel/index.tsx
index 7a2ee79079..b4062abd27 100644
--- a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
+++ b/web/src/beta/ui/fields/TimePointField/EditPanel/index.tsx
@@ -5,6 +5,7 @@ import {
   Selector,
   TimePicker
 } from "@reearth/beta/lib/reearth-ui";
+import { TIMEZONE_OFFSETS } from "@reearth/beta/utils/time";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC } from "react";
@@ -15,21 +16,20 @@ type Props = {
   value?: string;
   onChange?: (value?: string | undefined) => void;
   onClose: () => void;
-  setDateTime?: (value?: string | undefined) => void;
 };
 
-const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
+const EditPanel: FC<Props> = ({ onChange, onClose, value }) => {
   const t = useT();
   const {
     date,
     time,
-    selectedTimezone,
-    offsetFromUTC,
+    timezone,
+    applyDisabled,
     handleDateChange,
     handleTimezoneSelect,
     handleApply,
     handleTimeChange
-  } = useHooks({ value, onChange, onClose, setDateTime });
+  } = useHooks({ value, onChange, onClose });
 
   return (
     <PopupPanel
@@ -44,6 +44,7 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
             size="small"
             title="Apply"
             appearance="primary"
+            disabled={applyDisabled}
             onClick={handleApply}
           />
         </ButtonWrapper>
@@ -66,10 +67,10 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
           <Label>{t("Time Zone")}</Label>
           <InputWrapper>
             <Selector
-              value={selectedTimezone.timezone}
-              options={offsetFromUTC.map((timezone) => ({
-                label: timezone.offset,
-                value: timezone?.timezone
+              value={timezone}
+              options={TIMEZONE_OFFSETS.map((offset) => ({
+                label: offset,
+                value: offset
               }))}
               maxHeight={200}
               onChange={handleTimezoneSelect}
diff --git a/web/src/beta/ui/fields/TimePointField/hooks.ts b/web/src/beta/ui/fields/TimePointField/hooks.ts
deleted file mode 100644
index d9869e4842..0000000000
--- a/web/src/beta/ui/fields/TimePointField/hooks.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
-import moment from "moment-timezone";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-type Props = {
-  value?: string;
-  onChange?: (value?: string | undefined) => void;
-  setDateTime?: (value?: string | undefined) => void;
-  onClose: () => void;
-};
-
-type TimezoneInfo = {
-  timezone: string;
-  offset: string;
-};
-
-export default ({ value, onChange, setDateTime, onClose }: Props) => {
-  const [date, setDate] = useState("");
-  const [time, setTime] = useState("");
-  const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
-    offset: "+00:00",
-    timezone: "Africa/Abidjan"
-  });
-
-  const handleTimeChange = useCallback((newValue: string) => {
-    if (!newValue) return;
-    setTime(newValue);
-  }, []);
-
-  const handleDateChange = useCallback((newValue: string) => {
-    if (!newValue) return;
-    setDate(newValue);
-  }, []);
-
-  const offsetFromUTC: TimezoneInfo[] = useMemo(() => {
-    return getUniqueTimezones(moment.tz.names());
-  }, []);
-
-  const handleTimezoneSelect = useCallback(
-    (newValue: string | string[]) => {
-      const updatedTimezone = offsetFromUTC.find(
-        (info) => info.timezone === newValue
-      );
-      setSelectedTimezone(updatedTimezone || selectedTimezone);
-    },
-    [offsetFromUTC, selectedTimezone]
-  );
-
-  const handleApply = useCallback(() => {
-    const selectedTimezoneInfo = offsetFromUTC.find(
-      (info) => info.timezone === selectedTimezone.timezone
-    );
-    if (selectedTimezoneInfo) {
-      const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
-      setDateTime?.(formattedDateTime);
-      onChange?.(formattedDateTime);
-    }
-    onClose?.();
-  }, [
-    offsetFromUTC,
-    onClose,
-    selectedTimezone.timezone,
-    date,
-    time,
-    setDateTime,
-    onChange
-  ]);
-
-  useEffect(() => {
-    if (value) {
-      const [parsedDate, timeWithOffset] = value.split("T");
-      const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
-      const [timezoneOffsetHour, timezoneOffsetMinute] =
-        timezoneOffset.split(":");
-      const formattedTimezoneOffset =
-        timezoneOffsetHour.length === 2
-          ? timezoneOffset
-          : `${timezoneOffsetHour.padStart(2, "0")}:${timezoneOffsetMinute}`;
-
-      setTime(parsedTime);
-      setDate(parsedDate);
-
-      const updatedTimezone = offsetFromUTC.find(
-        (info) =>
-          info.offset ===
-          (timeWithOffset.includes("-")
-            ? `-${formattedTimezoneOffset}`
-            : `+${formattedTimezoneOffset}`)
-      );
-      if (updatedTimezone) setSelectedTimezone(updatedTimezone);
-    } else {
-      setDate("");
-      setTime("");
-      setSelectedTimezone({ offset: "+00:00", timezone: "Africa/Abidjan" });
-    }
-  }, [value, offsetFromUTC]);
-
-  return {
-    date,
-    time,
-    selectedTimezone,
-    offsetFromUTC,
-    handleTimeChange,
-    handleTimezoneSelect,
-    handleDateChange,
-    handleApply
-  };
-};
diff --git a/web/src/beta/ui/fields/TimePointField/index.tsx b/web/src/beta/ui/fields/TimePointField/index.tsx
index bed5b1b7a7..e1a84c3a9d 100644
--- a/web/src/beta/ui/fields/TimePointField/index.tsx
+++ b/web/src/beta/ui/fields/TimePointField/index.tsx
@@ -9,55 +9,52 @@ import EditPanel from "./EditPanel";
 
 export type TimePointFieldProps = CommonFieldProps & {
   value?: string;
-  disabledField?: boolean;
-  fieldName?: string;
+  disabled?: boolean;
   onChange?: (value?: string | undefined) => void;
-  onTimePointPopupOpen?: (fieldId?: string) => void;
-  setDisabledFields?: (value: string[]) => void;
+  onEditorOpen?: () => void;
+};
+
+export type TimePointFieldRef = {
+  closeEditor: () => void;
 };
 
 const TimePointField: FC<TimePointFieldProps> = ({
   title,
   description,
   value,
-  disabledField,
-  fieldName,
-  onChange,
-  onTimePointPopupOpen,
-  setDisabledFields
+  onChange
 }) => {
   const [open, setOpen] = useState(false);
   const t = useT();
   const theme = useTheme();
 
-  const handlePopOver = useCallback(() => {
-    if (disabledField) {
-      setOpen(false);
-    } else {
-      onTimePointPopupOpen?.(fieldName);
-      setOpen(!open);
-    }
-    if (open) setDisabledFields?.([]);
-  }, [disabledField, open, onTimePointPopupOpen, setDisabledFields, fieldName]);
+  const [localValue, setLocalValue] = useState(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
 
   const handleTimeSettingDelete = useCallback(() => {
+    setLocalValue("");
     if (!value) return;
-    setDateTime("");
     onChange?.();
   }, [value, onChange]);
 
-  const [dateTime, setDateTime] = useState(value);
-
-  useEffect(() => {
-    setDateTime(value);
-  }, [value]);
+  const handleInputBlur = useCallback(
+    (timeString: string) => {
+      if (timeString === value) return;
+      // TODO: validate timeString
+      onChange?.(timeString);
+    },
+    [value, onChange]
+  );
 
   return (
     <CommonField title={title} description={description}>
       <Wrapper>
         <TextInput
-          appearance="readonly"
-          value={value && dateTime}
+          value={localValue}
+          onBlur={handleInputBlur}
           actions={[
             <Button
               key="delete"
@@ -65,12 +62,11 @@ const TimePointField: FC<TimePointFieldProps> = ({
               size="small"
               iconButton
               appearance="simple"
-              disabled={!dateTime}
+              disabled={!localValue}
               onClick={handleTimeSettingDelete}
-              iconColor={dateTime ? theme.content.main : theme.content.weak}
+              iconColor={localValue ? theme.content.main : theme.content.weak}
             />
           ]}
-          disabled
           placeholder={"YYYY-MM-DDThh:mm:ss±hh:mm"}
         />
         <Popup
@@ -80,7 +76,7 @@ const TimePointField: FC<TimePointFieldProps> = ({
               title={t("set")}
               icon="clock"
               size="small"
-              onClick={handlePopOver}
+              onClick={() => setOpen(true)}
             />
           }
           open={open}
@@ -89,10 +85,9 @@ const TimePointField: FC<TimePointFieldProps> = ({
         >
           {open && (
             <EditPanel
-              setDateTime={setDateTime}
-              value={dateTime}
+              value={localValue}
               onChange={onChange}
-              onClose={handlePopOver}
+              onClose={() => setOpen(false)}
             />
           )}
         </Popup>
diff --git a/web/src/beta/utils/moment-timezone.ts b/web/src/beta/utils/moment-timezone.ts
deleted file mode 100644
index 1ff6ed164a..0000000000
--- a/web/src/beta/utils/moment-timezone.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import moment from "moment-timezone";
-
-type TimezoneInfo = {
-  timezone: string;
-  offset: string;
-};
-
-export const getUniqueTimezones = (timezones: string[]): TimezoneInfo[] => {
-  const uniqueTimezones: TimezoneInfo[] = [];
-  const seenOffsets = new Set<string>();
-  timezones.forEach((timezone) => {
-    const offset = moment.tz(timezone).utcOffset() / 60;
-
-    if (Number.isInteger(offset)) {
-      const offsetString =
-        offset >= 0
-          ? `+${String(offset).padStart(2, "0")}`
-          : `-${String(offset).slice(1).padStart(2, "0")}`;
-      const offsetTimezone = `${offsetString}:00`;
-
-      if (!seenOffsets.has(offsetTimezone)) {
-        uniqueTimezones.push({ timezone, offset: offsetTimezone });
-        seenOffsets.add(offsetTimezone);
-      }
-    }
-  });
-
-  uniqueTimezones.sort((a, b) => {
-    const offsetA = parseInt(a.offset);
-    const offsetB = parseInt(b.offset);
-    return offsetA - offsetB;
-  });
-
-  return uniqueTimezones;
-};
diff --git a/web/src/beta/utils/time.ts b/web/src/beta/utils/time.ts
index c1ed44309d..bd69a72667 100644
--- a/web/src/beta/utils/time.ts
+++ b/web/src/beta/utils/time.ts
@@ -42,3 +42,64 @@ export const formatRelativeTime = (date: Date): string => {
       return pluralize(Math.floor(seconds), "second") + " ago";
   }
 };
+
+// Time zones around the world generally fall within offsets from UTC ranging from -12:00 to +14:00
+export const TIMEZONE_OFFSETS = [
+  "-12:00",
+  "-11:00",
+  "-10:00",
+  "-09:00",
+  "-08:00",
+  "-07:00",
+  "-06:00",
+  "-05:00",
+  "-04:00",
+  "-03:00",
+  "-02:00",
+  "-01:00",
+  "+00:00",
+  "+01:00",
+  "+02:00",
+  "+03:00",
+  "+04:00",
+  "+05:00",
+  "+06:00",
+  "+07:00",
+  "+08:00",
+  "+09:00",
+  "+10:00",
+  "+11:00",
+  "+12:00",
+  "+13:00",
+  "+14:00"
+] as const;
+
+export type TimeZoneOffset = (typeof TIMEZONE_OFFSETS)[number];
+
+export const getLocalTimezoneOffset = (): TimeZoneOffset => {
+  const date = new Date();
+  const offsetMinutes = -date.getTimezoneOffset();
+  const sign = offsetMinutes >= 0 ? "+" : "-";
+  const hours = String(Math.floor(Math.abs(offsetMinutes) / 60)).padStart(
+    2,
+    "0"
+  );
+  return `${sign}${hours}:00` as TimeZoneOffset;
+};
+
+export const isValidTimezone = (timezone: string): boolean => {
+  return TIMEZONE_OFFSETS.includes(timezone as TimeZoneOffset);
+};
+
+export const getTimeZone = (time: string): TimeZoneOffset | undefined => {
+  const zone = time.match(/([-+]\d{1,2}:\d{2})$/)?.[1];
+  return !zone
+    ? undefined
+    : isValidTimezone(zone)
+      ? (zone as TimeZoneOffset)
+      : undefined;
+};
+
+export const isValidDateTimeFormat = (time: string): boolean => {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}([-+]\d{2}:\d{2})$/.test(time);
+};
diff --git a/web/src/services/theme/reearthTheme/common/index.ts b/web/src/services/theme/reearthTheme/common/index.ts
index d12f4b1460..4d85bda2a8 100644
--- a/web/src/services/theme/reearthTheme/common/index.ts
+++ b/web/src/services/theme/reearthTheme/common/index.ts
@@ -1,10 +1,7 @@
 import fonts from "./fonts";
 import iconSizes, { IconsSizeType } from "./icons";
 import radiusSizes, { RadiusSizesType } from "./radius";
-import {
-  scrollBar,
-  ScrollBar,
-} from "./scrollBar";
+import { scrollBar, ScrollBar } from "./scrollBar";
 import shadow, { ShadowType } from "./shadow";
 import spacingSizes, { SpacingSizesType } from "./spacing";
 import zIndexes, { ZIndex } from "./zIndex";
@@ -28,7 +25,7 @@ const common: Common = {
   radius: radiusSizes,
   shadow,
   fonts,
-  scrollBar,
+  scrollBar
 };
 
 export default common;
diff --git a/web/yarn.lock b/web/yarn.lock
index 3919d96c07..66f8f3698a 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -8300,7 +8300,6 @@ __metadata:
     lint-staged: "npm:15.2.10"
     localforage: "npm:1.10.0"
     lodash-es: "npm:4.17.21"
-    moment-timezone: "npm:0.5.45"
     npm-run-all: "npm:4.1.5"
     prettier: "npm:3.3.3"
     quickjs-emscripten: "npm:0.24.0"
@@ -20531,22 +20530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment-timezone@npm:0.5.45":
-  version: 0.5.45
-  resolution: "moment-timezone@npm:0.5.45"
-  dependencies:
-    moment: "npm:^2.29.4"
-  checksum: 10c0/7497f23c4b8c875dbf07c03f9a1253f79edaeedc29d5732e36bfd3c5577e25aed1924fbd84cbb713ce1920dbe822be0e21bd487851a7d13907226f289a5e568b
-  languageName: node
-  linkType: hard
-
-"moment@npm:^2.29.4":
-  version: 2.30.1
-  resolution: "moment@npm:2.30.1"
-  checksum: 10c0/865e4279418c6de666fca7786607705fd0189d8a7b7624e2e56be99290ac846f90878a6f602e34b4e0455c549b85385b1baf9966845962b313699e7cb847543a
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"