From dc40cc664d6d54e6a5bc811cc00e9f89f26d9247 Mon Sep 17 00:00:00 2001
From: Imamuzzaki Abu Salam <imamuzzaki@gmail.com>
Date: Tue, 13 Aug 2024 21:21:09 +0700
Subject: [PATCH] test: Bring back broken out-of-office tests, prevent modal
 button clickable before flicker, and fix timezone issue (#16001)

* test: prevent modal button clickable before flicker

* chore: add note to migrate to appDir to solve full page flicker issue

* chore: Improve OutOfOfficePage loading experience

Refactor the OutOfOfficePage component to improve the loading experience by using the `isPending` property from the `trpc.viewer.outOfOfficeReasonList.useQuery()` hook. This workaorund eliminates the full page flicker issue and provides a better user experience. The "Add" button now shows a loading state when the query is pending.

* Update index.tsx

* chore: Update outOfOffice.handler.ts to use input.offset instead of calculating offset

* fix e2e

* Update

* revert

* chore: Fix offset calculation for out of office bookings

* chore: Update date range calculation for out-of-office modal

* chore: Remove console.log statement in out-of-office modal

* chore: Update TimeZoneEnum with additional time zones

This commit updates the TimeZoneEnum in the types.ts file to include additional time zones. The new time zones added are:
- ID: Asia/Jakarta (UTC+7)
- SAMOA: Etc/GMT+12 (UTC-12)
- AMERICAN_SAMOA: Pacific/Pago_Pago (UTC-11)
- HAWAII: Pacific/Honolulu (UTC-10)
- ALASKA: America/Anchorage (UTC-9)
- PACIFIC_USA: America/Los_Angeles (UTC-8)
- CENTRAL_USA: America/Chicago (UTC-6)
- EASTERN_USA: America/New_York (UTC-5)
- VENEZUELA: America/Caracas (UTC-4)
- ARGENTINA: America/Buenos_Aires (UTC-3)
- BRAZIL: America/Noronha (UTC-2)
- AZORES: Atlantic/Azores (UTC-1)
- FRANCE: Europe/Paris (UTC+1)
- GREECE: Europe/Athens (UTC+2)
- RUSSIA: Europe/Moscow (UTC+3)
- UAE: Asia/Dubai (UTC+4)
- PAKISTAN: Asia/Karachi (UTC+5)
- BANGLADESH: Asia/Dhaka (UTC+6)
- SINGAPORE: Asia/Singapore (UTC+8)
- JAPAN: Asia/Tokyo (UTC+9)
- AUSTRALIA: Australia/Sydney (UTC+10)
- SOLOMON_ISLANDS: Pacific/Guadalcanal (UTC+11)
- NEW_ZEALAND: Pacific/Auckland (UTC+12)

The purpose of this update is to provide a comprehensive list of time zones for users to choose from when setting their time zone in the out-of-office feature.

* update

* fix

* remove comment

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: unknown <adhabal2002@gmail.com>
---
 .../my-account/out-of-office/index.tsx        | 24 ++++++++++++-------
 apps/web/playwright/out-of-office.e2e.ts      |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
index 85ccbf78a3..dc8537fc50 100644
--- a/apps/web/pages/settings/my-account/out-of-office/index.tsx
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -56,8 +56,8 @@ const CreateOutOfOfficeEntryModal = ({
   const [selectedMember, setSelectedMember] = useState<{ label: string; value: number | null } | null>(null);
 
   const [dateRange] = useState<{ startDate: Date; endDate: Date }>({
-    startDate: dayjs().startOf("d").toDate(),
-    endDate: dayjs().add(1, "d").endOf("d").toDate(),
+    startDate: dayjs().utc().startOf("d").toDate(),
+    endDate: dayjs().utc().add(1, "d").endOf("d").toDate(),
   });
 
   const { hasTeamPlan } = useHasTeamPlan();
@@ -375,6 +375,8 @@ const OutOfOfficePage = () => {
   }, [openModalOnStart]);
 
   const [openModal, setOpenModal] = useState(false);
+
+  const { isPending } = trpc.viewer.outOfOfficeReasonList.useQuery();
   return (
     <>
       <Meta
@@ -382,13 +384,17 @@ const OutOfOfficePage = () => {
         description={t("out_of_office_description")}
         borderInShellHeader={false}
         CTA={
-          <Button
-            color="primary"
-            className="flex w-20 items-center justify-between px-4"
-            onClick={() => setOpenModal(true)}
-            data-testid="add_entry_ooo">
-            <Icon name="plus" size={16} /> {t("add")}
-          </Button>
+          isPending ? (
+            <SkeletonText className="h-8 w-20" />
+          ) : (
+            <Button
+              color="primary"
+              className="flex w-20 items-center justify-between px-4"
+              onClick={() => setOpenModal(true)}
+              data-testid="add_entry_ooo">
+              <Icon name="plus" size={16} /> {t("add")}
+            </Button>
+          )
         }
       />
       <CreateOutOfOfficeEntryModal openModal={openModal} closeModal={() => setOpenModal(false)} />
diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts
index a88a2fa5f0..ec69507dd0 100644
--- a/apps/web/playwright/out-of-office.e2e.ts
+++ b/apps/web/playwright/out-of-office.e2e.ts
@@ -11,7 +11,7 @@ test.describe.configure({ mode: "parallel" });
 test.afterEach(({ users }) => users.deleteAll());
 
 test.describe("Out of office", () => {
-  test.skip("User can create out of office entry", async ({ page, users }) => {
+  test("User can create out of office entry", async ({ page, users }) => {
     const user = await users.create({ name: "userOne" });
 
     await user.apiLogin();
@@ -30,7 +30,7 @@ test.describe("Out of office", () => {
     await expect(page.locator(`data-testid=table-redirect-n-a`)).toBeVisible();
   });
 
-  test.skip("User can configure booking redirect", async ({ page, users }) => {
+  test("User can configure booking redirect", async ({ page, users }) => {
     const user = await users.create({ name: "userOne" });
     const userTo = await users.create({ name: "userTwo" });