🐛 Fix time zone reset when replacing all options

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

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

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

@@ -18,6 +18,7 @@ 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";
 
@@ -47,6 +48,8 @@ export const CreatePoll: React.FunctionComponent = () => {
       description: "",
       location: "",
       view: "month",
+      autoTimeZone: true,
+      timeZone: user.timeZone || getBrowserTimeZone(),
       options: [],
       hideScores: false,
       hideParticipants: false,
@@ -76,13 +79,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: formData?.timeZone,
+              timeZone: !isFullDay ? formData?.timeZone : undefined,
               hideParticipants: formData?.hideParticipants,
               disableComments: formData?.disableComments,
               hideScores: formData?.hideScores,

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

@@ -22,14 +22,11 @@ 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";
@@ -51,8 +48,6 @@ 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,
@@ -225,7 +220,6 @@ 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) => {
@@ -247,7 +241,6 @@ 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,7 +22,6 @@ 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";
@@ -32,6 +31,7 @@ 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,7 +73,6 @@ 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 =
@@ -149,7 +148,6 @@ const PollOptionsForm = ({
                     "options",
                     watchOptions.filter((option) => option.type === "date"),
                   );
-                  setValue("timeZone", "");
                   dateOrTimeRangeDialog.dismiss();
                 }}
               >
@@ -161,9 +159,6 @@ const PollOptionsForm = ({
                     "options",
                     watchOptions.filter((option) => option.type === "timeSlot"),
                   );
-                  if (!watchTimeZone) {
-                    setValue("timeZone", getBrowserTimeZone());
-                  }
                   dateOrTimeRangeDialog.dismiss();
                 }}
                 variant="primary"
@@ -215,7 +210,7 @@ const PollOptionsForm = ({
         {!datesOnly ? (
           <FormField
             control={form.control}
-            name="timeZone"
+            name="autoTimeZone"
             render={({ field }) => (
               <div
                 className={cn(
@@ -224,24 +219,24 @@ const PollOptionsForm = ({
               >
                 <div className="flex h-9 items-center gap-x-2.5 p-2">
                   <Switch
-                    id="timeZone"
+                    id="autoTimeZone"
                     disabled={disableTimeZoneChange}
                     checked={!!field.value}
                     onCheckedChange={(checked) => {
                       if (checked) {
-                        field.onChange(getBrowserTimeZone());
+                        field.onChange(true);
                       } else {
-                        field.onChange("");
+                        field.onChange(false);
                       }
                     }}
                   />
-                  <Label htmlFor="timeZone">
+                  <Label htmlFor="autoTimeZone">
                     <Trans
                       i18nKey="autoTimeZone"
                       defaults="Automatic Time Zone Conversion"
                     />
                   </Label>
-                  <Tooltip>
+                  <Tooltip delayDuration={0}>
                     <TooltipTrigger type="button">
                       <InfoIcon className="text-muted-foreground size-4" />
                     </TooltipTrigger>
@@ -254,30 +249,36 @@ const PollOptionsForm = ({
                   </Tooltip>
                 </div>
                 {field.value ? (
-                  <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>
+                  <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>
+                    )}
+                  />
                 ) : null}
               </div>
             )}

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

@@ -78,6 +78,9 @@ 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 }) => {