fix: make timezone optional for onboarding and user settings (#3972)

open-sauced · Aug 19, 2024 · f1795a3 · f1795a3
1 parent 7ed39d3
commit f1795a3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -340,8 +340,8 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
 
             <div id="upgrade" className="flex flex-col gap-2">
               <label className="flex flex-col w-full gap-2">
-                Time zone*
-                <Select onValueChange={(value) => setTimezone(value)} value={timezone} required>
+                Time zone
+                <Select onValueChange={(value) => setTimezone(value)} value={timezone}>
                   <SelectTrigger
                     selectIcon={
                       <div className="relative pr-4">
@@ -354,6 +354,7 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                   </SelectTrigger>
 
                   <SelectContent position="item-aligned" className="bg-white">
+                    <SelectItem value={""}>Select timezone</SelectItem>
                     {timezones.map((timezone, index) => (
                       <SelectItem key={`timezone_${index}`} value={timezone.value}>
                         {timezone.text}

diff --git a/pages/start.tsx b/pages/start.tsx
@@ -34,6 +34,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "c
 import { timezones } from "lib/utils/timezones";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 import { useFetchUserDevStats } from "lib/hooks/api/useFetchUserDevStats";
+import { copyImageToClipboard } from "lib/utils/copy-to-clipboard";
+import { toast } from "lib/hooks/useToast";
+import { siteUrl } from "lib/utils/urls";
 
 type StepKeys = "1" | "2" | "3";
 
@@ -151,15 +154,7 @@ const LoginStep2: React.FC<LoginStep2Props> = ({ user }) => {
   const [timezone, setTimezone] = useState("");
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const timezone = timezones.find((timezone) => timezone.utc.includes(userTimezone));
-    if (timezone) {
-      setTimezone(timezone.value);
-    }
-  }, []);
-
-  const handleUpdateTimezone = async () => {
+  const handleOnboarding = async (updateTimezone: boolean) => {
     setLoading(true);
     try {
       const data = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/onboarding`, {
@@ -168,7 +163,7 @@ const LoginStep2: React.FC<LoginStep2Props> = ({ user }) => {
           "Content-Type": "application/json",
           Authorization: `Bearer ${sessionToken}`,
         },
-        body: JSON.stringify({ interests: [], timezone }),
+        body: JSON.stringify({ interests: [], timezone: updateTimezone ? timezone : "" }),
       });
 
       if (data.ok) {
@@ -204,8 +199,7 @@ const LoginStep2: React.FC<LoginStep2Props> = ({ user }) => {
           </div>
 
           <div className="flex flex-col gap-2">
-            <label>Time zone*</label>
-            <Select onValueChange={(value) => setTimezone(value)} value={timezone} required>
+            <Select onValueChange={(value) => setTimezone(value)} value={timezone}>
               <SelectTrigger
                 selectIcon={
                   <div className="relative pr-4">
@@ -218,6 +212,7 @@ const LoginStep2: React.FC<LoginStep2Props> = ({ user }) => {
               </SelectTrigger>
 
               <SelectContent position="item-aligned" className="bg-white">
+                <SelectItem value={""}>Select timezone</SelectItem>
                 {timezones.map((timezone, index) => (
                   <SelectItem key={index} value={timezone.value}>
                     {timezone.text}
@@ -226,16 +221,26 @@ const LoginStep2: React.FC<LoginStep2Props> = ({ user }) => {
               </SelectContent>
             </Select>
           </div>
+          <Button
+            variant="primary"
+            onClick={() => handleOnboarding(true)}
+            className="justify-center w-full mt-4"
+            disabled={loading}
+            loading={loading}
+          >
+            Continue
+          </Button>
+
+          <Button
+            variant="primary"
+            onClick={() => handleOnboarding(false)}
+            className="justify-center w-full mt-4"
+            disabled={loading}
+            loading={loading}
+          >
+            Skip
+          </Button>
         </div>
-        <Button
-          variant="primary"
-          onClick={handleUpdateTimezone}
-          className="justify-center w-full h-10 mt-3 md:mt-0"
-          disabled={loading || !timezone}
-          loading={loading}
-        >
-          Continue
-        </Button>
       </div>
     </>
   );
@@ -281,10 +286,20 @@ const LoginStep3: React.FC<LoginStep3Props> = ({ user }) => {
 
           <Button
             variant="primary"
-            onClick={() => router.push(`/u/${username}/card`)}
+            onClick={() =>
+              copyImageToClipboard(siteUrl(`og-images/dev-card`, { username })).then((copied) => {
+                if (copied) {
+                  setTimeout(() => {
+                    toast({ description: "Copied to clipboard", variant: "success" });
+                  }, 500);
+                } else {
+                  toast({ description: "Error copying to clipboard", variant: "warning" });
+                }
+              })
+            }
             className="justify-center w-full mt-4"
           >
-            Go to Your DevCard
+            Share Your DevCard
           </Button>
 
           <Button