From 357eb9aa2b4d61b96cb673c8fb0cb2ecb6f700cd Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Fri, 17 Jan 2025 11:48:37 +0000
Subject: [PATCH] fix: creating new release allows for scheduled time to be set

---
 .../tool/components/ScheduledTimePicker.tsx   | 49 +++++++++++++++++++
 .../tool/detail/ReleaseTypePicker.tsx         | 41 ++++++++--------
 2 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 packages/sanity/src/core/releases/tool/components/ScheduledTimePicker.tsx

diff --git a/packages/sanity/src/core/releases/tool/components/ScheduledTimePicker.tsx b/packages/sanity/src/core/releases/tool/components/ScheduledTimePicker.tsx
new file mode 100644
index 00000000000..3701052b0cc
--- /dev/null
+++ b/packages/sanity/src/core/releases/tool/components/ScheduledTimePicker.tsx
@@ -0,0 +1,49 @@
+import {format, isValid} from 'date-fns'
+import {useCallback, useState} from 'react'
+
+import {MONTH_PICKER_VARIANT} from '../../../../ui-components/inputs/DateInputs/calendar/Calendar'
+import {DatePicker} from '../../../../ui-components/inputs/DateInputs/DatePicker'
+import {LazyTextInput} from '../../../../ui-components/inputs/DateInputs/LazyTextInput'
+
+type ScheduledTimePickerProps = {
+  initialValue?: Date
+  onChange: (date: string) => void
+}
+
+export const ScheduledTimePicker: React.FC<ScheduledTimePickerProps> = ({
+  initialValue,
+  onChange,
+}) => {
+  const [inputValue, setInputValue] = useState<Date | undefined>(initialValue)
+
+  const handleInputChange = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    const parsedDate = new Date(event.currentTarget.value)
+
+    if (isValid(parsedDate)) {
+      setInputValue(parsedDate)
+
+      onChange(parsedDate.toISOString())
+    }
+  }, [])
+
+  return (
+    <>
+      <LazyTextInput
+        value={inputValue ? format(inputValue, 'PPp') : undefined}
+        onChange={handleInputChange}
+        readOnly
+      />
+
+      <DatePicker
+        ref={datePickerRef}
+        monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
+        calendarLabels={calendarLabels}
+        selectTime
+        padding={0}
+        value={inputValue}
+        onChange={handleBundlePublishAtChange}
+        showTimezone
+      />
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
index 0ae6ecb75ad..46a2f8015ee 100644
--- a/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
@@ -5,10 +5,7 @@ import {isEqual} from 'lodash'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 import {Button, Popover, Tab} from '../../../../ui-components'
-import {MONTH_PICKER_VARIANT} from '../../../../ui-components/inputs/DateInputs/calendar/Calendar'
 import {type CalendarLabels} from '../../../../ui-components/inputs/DateInputs/calendar/types'
-import {DatePicker} from '../../../../ui-components/inputs/DateInputs/DatePicker'
-import {LazyTextInput} from '../../../../ui-components/inputs/DateInputs/LazyTextInput'
 import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
 import {useTranslation} from '../../../i18n/hooks/useTranslation'
 import useTimeZone from '../../../scheduledPublishing/hooks/useTimeZone'
@@ -18,6 +15,7 @@ import {type ReleaseDocument, type ReleaseType} from '../../store'
 import {useReleaseOperations} from '../../store/useReleaseOperations'
 import {getReleaseTone} from '../../util/getReleaseTone'
 import {getPublishDateFromRelease, isReleaseScheduledOrScheduling} from '../../util/util'
+import {ScheduledTimePicker} from '../components/ScheduledTimePicker'
 
 export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.Element {
   const {release} = props
@@ -179,24 +177,25 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
           />
         </TabList>
         {dateInputOpen && (
-          <>
-            <LazyTextInput
-              value={inputValue ? format(inputValue, 'PPp') : undefined}
-              onChange={handleInputChange}
-              readOnly
-            />
-
-            <DatePicker
-              ref={datePickerRef}
-              monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
-              calendarLabels={calendarLabels}
-              selectTime
-              padding={0}
-              value={inputValue}
-              onChange={handleBundlePublishAtChange}
-              showTimezone
-            />
-          </>
+          <ScheduledTimePicker initialValue={inputValue} />
+          // <>
+          //   <LazyTextInput
+          //     value={inputValue ? format(inputValue, 'PPp') : undefined}
+          //     onChange={handleInputChange}
+          //     readOnly
+          //   />
+
+          //   <DatePicker
+          //     ref={datePickerRef}
+          //     monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
+          //     calendarLabels={calendarLabels}
+          //     selectTime
+          //     padding={0}
+          //     value={inputValue}
+          //     onChange={handleBundlePublishAtChange}
+          //     showTimezone
+          //   />
+          // </>
         )}
       </Stack>
     )