From b32220693372f78ac50080260f558664ec3df9ff Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 12 Sep 2023 13:21:47 +0530
Subject: [PATCH] feat: users can select timezone during onboarding

feat: using Intl timezone will be automatically selected but they have the option to change it
---
 web/components/onboarding/user-details.tsx | 40 +++++++++++++++++++++-
 web/helpers/date-time.helper.ts            |  2 ++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 222fc11432b..b2ba931c0dc 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -9,13 +9,16 @@ import useToast from "hooks/use-toast";
 // services
 import userService from "services/user.service";
 // ui
-import { CustomSelect, Input, PrimaryButton } from "components/ui";
+import { CustomSearchSelect, CustomSelect, Input, PrimaryButton } from "components/ui";
 // types
 import { ICurrentUserResponse, IUser } from "types";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
+// helpers
+import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
 // constants
 import { USER_ROLES } from "constants/workspace";
+import { TIME_ZONES } from "constants/timezones";
 
 const defaultValues: Partial<IUser> = {
   first_name: "",
@@ -27,6 +30,12 @@ type Props = {
   user?: IUser;
 };
 
+const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
+  value: timeZone.value,
+  query: timeZone.label + " " + timeZone.value,
+  content: timeZone.label,
+}));
+
 export const UserDetails: React.FC<Props> = ({ user }) => {
   const { setToastAlert } = useToast();
 
@@ -84,6 +93,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
         first_name: user.first_name,
         last_name: user.last_name,
         role: user.role,
+        user_timezone: getUserTimeZoneFromWindow(),
       });
     }
   }, [user, reset]);
@@ -162,6 +172,34 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
             {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
           </div>
         </div>
+        <div className="space-y-1 text-sm">
+          <span>What time zone are you in? </span>
+          <div className="w-full">
+            <Controller
+              name="user_timezone"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSearchSelect
+                  value={value}
+                  label={
+                    value
+                      ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
+                      : "Select a timezone"
+                  }
+                  options={timeZoneOptions}
+                  onChange={onChange}
+                  verticalPosition="top"
+                  optionsClassName="w-full"
+                  input
+                />
+              )}
+            />
+            {errors?.user_timezone && (
+              <span className="text-sm text-red-500">{errors.user_timezone.message}</span>
+            )}
+          </div>
+        </div>
       </div>
 
       <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 39a68bf3b32..6784a9aa638 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -403,3 +403,5 @@ export const findTotalDaysInRange = (
 
   return diffInDays;
 };
+
+export const getUserTimeZoneFromWindow = () => Intl.DateTimeFormat().resolvedOptions().timeZone;