Revert "🐛 Fix time zone reset when replacing all options (#1221)"

This reverts commit 005451d.

#1226

Author: lukevella

apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx

@@ -79,8 +79,7 @@ const Page = () => {
               date: start.format("YYYY-MM-DD"),
             };
       }),
-      timeZone: poll.timeZone || undefined,
-      autoTimeZone: !!poll.timeZone,
+      timeZone: poll.timeZone ?? "",
       duration: poll.options[0]?.duration || 60,
     },
   });
@@ -107,6 +106,7 @@ const Page = () => {
             updatePollMutation(
               {
                 urlId: poll.adminUrlId,
+                timeZone: data.timeZone,
                 optionsToDelete: optionsToDelete.map(({ id }) => id),
                 optionsToAdd,
               },

apps/web/src/components/create-poll.tsx

@@ -18,7 +18,6 @@ import { PollSettingsForm } from "@/components/forms/poll-settings";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 import { setCookie } from "@/utils/cookies";
-import { getBrowserTimeZone } from "@/utils/date-time-utils";
 import { usePostHog } from "@/utils/posthog";
 import { trpc } from "@/utils/trpc/client";
 
@@ -48,8 +47,6 @@ export const CreatePoll: React.FunctionComponent = () => {
       description: "",
       location: "",
       view: "month",
-      autoTimeZone: true,
-      timeZone: user.timeZone || getBrowserTimeZone(),
       options: [],
       hideScores: false,
       hideParticipants: false,
@@ -79,13 +76,13 @@ export const CreatePoll: React.FunctionComponent = () => {
       <form
         onSubmit={form.handleSubmit(async (formData) => {
           const title = required(formData?.title);
-          const isFullDay = formData?.options?.[0]?.type === "date";
+
           await createPoll.mutateAsync(
             {
               title: title,
               location: formData?.location,
               description: formData?.description,
-              timeZone: !isFullDay ? formData?.timeZone : undefined,
+              timeZone: formData?.timeZone,
               hideParticipants: formData?.hideParticipants,
               disableComments: formData?.disableComments,
               hideScores: formData?.hideScores,

apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -22,11 +22,14 @@ import {
 } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
+import { useFormContext } from "react-hook-form";
 
+import { NewEventData } from "@/components/forms";
 import { Trans } from "@/components/trans";
 
 import {
   expectTimeOption,
+  getBrowserTimeZone,
   getDateProps,
   removeAllOptionsForDay,
 } from "../../../../utils/date-time-utils";
@@ -48,6 +51,8 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
   const { t } = useTranslation();
   const isTimedEvent = options.some((option) => option.type === "timeSlot");
 
+  const form = useFormContext<NewEventData>();
+
   const optionsByDay = React.useMemo(() => {
     const res: Record<
       string,
@@ -220,6 +225,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                 checked={isTimedEvent}
                 onCheckedChange={(checked) => {
                   if (checked) {
+                    form.setValue("timeZone", getBrowserTimeZone());
                     // convert dates to time slots
                     onChange(
                       options.map<DateTimeOption>((option) => {
@@ -241,6 +247,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                       }),
                     );
                   } else {
+                    form.setValue("timeZone", "");
                     onChange(
                       datepicker.selection.map((date) => ({
                         type: "date",

apps/web/src/components/forms/poll-options-form/poll-options-form.tsx

@@ -22,6 +22,7 @@ import { useFormContext } from "react-hook-form";
 
 import { TimeZoneCommand } from "@/components/time-zone-picker/time-zone-select";
 
+import { getBrowserTimeZone } from "../../../utils/date-time-utils";
 import { NewEventData } from "../types";
 import MonthCalendar from "./month-calendar";
 import { DateTimeOption } from "./types";
@@ -31,7 +32,6 @@ export type PollOptionsData = {
   navigationDate: string; // used to navigate to the right part of the calendar
   duration: number; // duration of the event in minutes
   timeZone: string;
-  autoTimeZone: boolean;
   view: string;
   options: DateTimeOption[];
 };
@@ -73,6 +73,7 @@ const PollOptionsForm = ({
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const watchOptions = watch("options", [])!;
   const watchDuration = watch("duration");
+  const watchTimeZone = watch("timeZone");
 
   const options = getValues("options");
   const datesOnly =
@@ -148,6 +149,7 @@ const PollOptionsForm = ({
                     "options",
                     watchOptions.filter((option) => option.type === "date"),
                   );
+                  setValue("timeZone", "");
                   dateOrTimeRangeDialog.dismiss();
                 }}
               >
@@ -159,6 +161,9 @@ const PollOptionsForm = ({
                     "options",
                     watchOptions.filter((option) => option.type === "timeSlot"),
                   );
+                  if (!watchTimeZone) {
+                    setValue("timeZone", getBrowserTimeZone());
+                  }
                   dateOrTimeRangeDialog.dismiss();
                 }}
                 variant="primary"
@@ -210,7 +215,7 @@ const PollOptionsForm = ({
         {!datesOnly ? (
           <FormField
             control={form.control}
-            name="autoTimeZone"
+            name="timeZone"
             render={({ field }) => (
               <div
                 className={cn(
@@ -219,24 +224,24 @@ const PollOptionsForm = ({
               >
                 <div className="flex h-9 items-center gap-x-2.5 p-2">
                   <Switch
-                    id="autoTimeZone"
+                    id="timeZone"
                     disabled={disableTimeZoneChange}
                     checked={!!field.value}
                     onCheckedChange={(checked) => {
                       if (checked) {
-                        field.onChange(true);
+                        field.onChange(getBrowserTimeZone());
                       } else {
-                        field.onChange(false);
+                        field.onChange("");
                       }
                     }}
                   />
-                  <Label htmlFor="autoTimeZone">
+                  <Label htmlFor="timeZone">
                     <Trans
                       i18nKey="autoTimeZone"
                       defaults="Automatic Time Zone Conversion"
                     />
                   </Label>
-                  <Tooltip delayDuration={0}>
+                  <Tooltip>
                     <TooltipTrigger type="button">
                       <InfoIcon className="text-muted-foreground size-4" />
                     </TooltipTrigger>
@@ -249,36 +254,30 @@ const PollOptionsForm = ({
                   </Tooltip>
                 </div>
                 {field.value ? (
-                  <FormField
-                    control={form.control}
-                    name="timeZone"
-                    render={({ field }) => (
-                      <div>
-                        <Button
-                          disabled={disableTimeZoneChange}
-                          onClick={() => {
-                            showTimeZoneCommandModal(true);
-                          }}
-                          variant="ghost"
-                        >
-                          <GlobeIcon className="text-muted-foreground size-4" />
-                          {field.value}
-                        </Button>
-                        <CommandDialog
-                          open={isTimeZoneCommandModalOpen}
-                          onOpenChange={showTimeZoneCommandModal}
-                        >
-                          <TimeZoneCommand
-                            value={field.value}
-                            onSelect={(newValue) => {
-                              field.onChange(newValue);
-                              showTimeZoneCommandModal(false);
-                            }}
-                          />
-                        </CommandDialog>
-                      </div>
-                    )}
-                  />
+                  <div>
+                    <Button
+                      disabled={disableTimeZoneChange}
+                      onClick={() => {
+                        showTimeZoneCommandModal(true);
+                      }}
+                      variant="ghost"
+                    >
+                      <GlobeIcon className="text-muted-foreground size-4" />
+                      {field.value}
+                    </Button>
+                    <CommandDialog
+                      open={isTimeZoneCommandModalOpen}
+                      onOpenChange={showTimeZoneCommandModal}
+                    >
+                      <TimeZoneCommand
+                        value={field.value}
+                        onSelect={(newValue) => {
+                          field.onChange(newValue);
+                          showTimeZoneCommandModal(false);
+                        }}
+                      />
+                    </CommandDialog>
+                  </div>
                 ) : null}
               </div>
             )}

apps/web/src/components/user-provider.tsx

@@ -78,9 +78,6 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
           email: user.email || null,
           isGuest: !user.email,
           tier,
-          timeFormat: user.timeFormat ?? null,
-          timeZone: user.timeZone ?? null,
-          weekStart: user.weekStart ?? null,
         },
         refresh: session.update,
         ownsObject: ({ userId }) => {