From 52bdd15e7c6ddcd4eccbccde0fe251b79463fffb Mon Sep 17 00:00:00 2001
From: DarShan Pandya <itznotabug@gmail.com>
Date: Sun, 10 Mar 2024 21:09:42 +0530
Subject: [PATCH] add tooltip for timezone.

---
 src/lib/components/support.svelte       |  6 ++++--
 src/routes/console/supportWizard.svelte | 13 ++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 1e94163a9..18c91e79c 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -6,6 +6,7 @@
     import SupportOnlineDark from '$lib/images/support/support-online-dark.png';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
+    import Label from '../elements/forms/label.svelte';
     import SupportWizard from '../../routes/console/supportWizard.svelte';
     import { isSupportOnline, showSupportModal } from '../../routes/console/wizard/support/store';
     import { isCloud } from '$lib/system';
@@ -13,7 +14,7 @@
     import { BillingPlan } from '$lib/constants';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { trackEvent } from '$lib/actions/analytics';
-    import { localeTimezoneShortHand, utcHourToLocaleHour } from '$lib/helpers/date';
+    import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
 
     export let show = false;
 
@@ -21,7 +22,7 @@
         $organization?.billingPlan === BillingPlan.PRO ||
         $organization?.billingPlan === BillingPlan.SCALE;
 
-    $: supportTimings = `${utcHourToLocaleHour('09:00')} - ${utcHourToLocaleHour('17:00')} ${localeTimezoneShortHand()}`;
+    $: supportTimings = `${utcHourToLocaleHour('09:00')} - ${utcHourToLocaleHour('17:00')}`;
 </script>
 
 {#if isCloud}
@@ -44,6 +45,7 @@
             {#if isPaid}
                 <p class="u-line-height-1-5 u-margin-block-start-8">
                     Get personalized support from the Appwrite team from <b>{supportTimings}</b>
+                    <Label tooltip="{localeTimezoneName()}" />
                 </p>
             {/if}
         </div>
diff --git a/src/routes/console/supportWizard.svelte b/src/routes/console/supportWizard.svelte
index a0021e9da..e5c65210d 100644
--- a/src/routes/console/supportWizard.svelte
+++ b/src/routes/console/supportWizard.svelte
@@ -3,6 +3,7 @@
     import { onDestroy } from 'svelte';
     import { isSupportOnline, supportData } from './wizard/support/store';
     import Step1 from './wizard/support/step1.svelte';
+    import Label from '$lib/elements/forms/label.svelte';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { user } from '$lib/stores/user';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -10,11 +11,11 @@
     import { wizard } from '$lib/stores/wizard';
     import { VARS } from '$lib/system';
     import { organization } from '$lib/stores/organization';
-    import type { WeekDay } from '$lib/helpers/date';
     import {
-        localeTimezoneShortHand,
+        localeTimezoneName,
         utcHourToLocaleHour,
-        utcWeekDayToLocaleWeekDay
+        utcWeekDayToLocaleWeekDay,
+        type WeekDay
     } from '$lib/helpers/date';
 
     onDestroy(() => {
@@ -90,7 +91,7 @@
         endDay: 'Friday' as WeekDay
     };
 
-    $: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneShortHand()}`;
+    $: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)}`;
     $: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
 </script>
 
@@ -102,7 +103,9 @@
             respond to all messages within our office hours.
         </p>
         <p class="text u-margin-block-start-32">
-            Available: <b>{supportWeekDays}, {supportTimings}</b>
+            Available: <b>{supportWeekDays}, {supportTimings}
+            <Label tooltip="{localeTimezoneName()}" />
+        </b>
         </p>
         <div class="u-flex u-gap-4 u-cross-center">
             <span>Currently:</span>