From c521740e5ac34f933e3911dfdf15c4eecc0a3b96 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Mon, 29 Jul 2024 13:59:46 +0100
Subject: [PATCH] =?UTF-8?q?Revert=20"=F0=9F=90=9B=20Fix=20time=20zone=20re?=
 =?UTF-8?q?set=20when=20replacing=20all=20options=20(#1221)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 005451d76caac288c07bbb655ed7cafb255848c5.

#1226
---
 .../poll/[urlId]/edit-options/page.tsx        |  4 +-
 apps/web/src/components/create-poll.tsx       |  7 +-
 .../month-calendar/month-calendar.tsx         |  7 ++
 .../poll-options-form/poll-options-form.tsx   | 73 +++++++++----------
 apps/web/src/components/user-provider.tsx     |  3 -
 5 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx b/apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx
index 932187a3a83..d9e29e07bea 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx
+++ b/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,
               },
diff --git a/apps/web/src/components/create-poll.tsx b/apps/web/src/components/create-poll.tsx
index dc6b9e24d78..1299987e399 100644
--- a/apps/web/src/components/create-poll.tsx
+++ b/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,
diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
index dbb2e1f367d..d1539f9f236 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/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",
diff --git a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
index 691a8c6b09c..9d7fa460843 100644
--- a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
+++ b/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>
             )}
diff --git a/apps/web/src/components/user-provider.tsx b/apps/web/src/components/user-provider.tsx
index da5cf7ad843..8a9315771f7 100644
--- a/apps/web/src/components/user-provider.tsx
+++ b/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 }) => {