From dd9d7ab485b9145b655cd6d51a4452f30052ddbf Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 6 Sep 2022 19:34:29 +0100
Subject: [PATCH] Added timeZone to v2, bugfix availabilityAsString (#4210)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../availability/ScheduleListItem.tsx         |  6 ++-
 apps/web/pages/availability/[schedule].tsx    |  6 ++-
 apps/web/pages/availability/index.tsx         |  4 ++
 apps/web/pages/v2/availability/[schedule].tsx |  2 +-
 apps/web/pages/v2/availability/index.tsx      |  9 +++-
 packages/lib/availability.ts                  |  9 ++--
 packages/lib/weekday.ts                       |  6 ++-
 .../modules/availability/ScheduleListItem.tsx | 47 ++++++++++++-------
 8 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/apps/web/components/availability/ScheduleListItem.tsx b/apps/web/components/availability/ScheduleListItem.tsx
index a6577d9028..d32b56db07 100644
--- a/apps/web/components/availability/ScheduleListItem.tsx
+++ b/apps/web/components/availability/ScheduleListItem.tsx
@@ -1,3 +1,7 @@
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/packages/ui/modules/availability/ScheduleListItem.tsx` instead
+ */
 import Link from "next/link";
 import { Fragment } from "react";
 
@@ -37,7 +41,7 @@ export function ScheduleListItem({
               <p className="mt-1 text-xs text-neutral-500">
                 {schedule.availability.map((availability: Availability) => (
                   <Fragment key={availability.id}>
-                    {availabilityAsString(availability, i18n.language)}
+                    {availabilityAsString(availability, { locale: i18n.language })}
                     <br />
                   </Fragment>
                 ))}
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 8f023b227c..dc5d8ea7a2 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -1,3 +1,7 @@
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/apps/web/pages/v2/availability/[schedule].tsx` instead
+ */
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -147,7 +151,7 @@ export default function Availability() {
               heading={<EditableHeading title={name || data.schedule.name} onChange={setName} />}
               subtitle={data.schedule.availability.map((availability) => (
                 <span key={availability.id}>
-                  {availabilityAsString(availability, i18n.language)}
+                  {availabilityAsString(availability, { locale: i18n.language })}
                   <br />
                 </span>
               ))}>
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 3acdeb196b..9dde4122f6 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -1,3 +1,7 @@
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/apps/web/pages/v2/availability/index.tsx` instead
+ */
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
diff --git a/apps/web/pages/v2/availability/[schedule].tsx b/apps/web/pages/v2/availability/[schedule].tsx
index 2f85eba705..b5b8437e3b 100644
--- a/apps/web/pages/v2/availability/[schedule].tsx
+++ b/apps/web/pages/v2/availability/[schedule].tsx
@@ -152,7 +152,7 @@ export default function Availability() {
               heading={<EditableHeading title={name || data.schedule.name} onChange={setName} />}
               subtitle={data.schedule.availability.map((availability) => (
                 <span key={availability.id}>
-                  {availabilityAsString(availability, i18n.language)}
+                  {availabilityAsString(availability, { locale: i18n.language })}
                   <br />
                 </span>
               ))}>
diff --git a/apps/web/pages/v2/availability/index.tsx b/apps/web/pages/v2/availability/index.tsx
index d7175041be..ef770e41df 100644
--- a/apps/web/pages/v2/availability/index.tsx
+++ b/apps/web/pages/v2/availability/index.tsx
@@ -3,16 +3,19 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
 import { NewScheduleButton, EmptyScreen, showToast } from "@calcom/ui/v2";
+import { ScheduleListItem } from "@calcom/ui/v2/modules/availability/ScheduleListItem";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
 
-import { ScheduleListItem } from "@components/availability/ScheduleListItem";
 import SkeletonLoader from "@components/availability/SkeletonLoader";
 
 export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
   const { t } = useLocale();
   const utils = trpc.useContext();
+
+  const meQuery = trpc.useQuery(["viewer.me"]);
+
   const deleteMutation = trpc.useMutation("viewer.availability.schedule.delete", {
     onSuccess: async () => {
       await utils.invalidateQueries(["viewer.availability.list"]);
@@ -41,6 +44,10 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
           <ul className="divide-y divide-neutral-200" data-testid="schedules">
             {schedules.map((schedule) => (
               <ScheduleListItem
+                displayOptions={{
+                  hour12: meQuery.data?.timeFormat ? meQuery.data.timeFormat === 12 : undefined,
+                  timeZone: meQuery.data?.timeZone,
+                }}
                 key={schedule.id}
                 schedule={schedule}
                 deleteFunction={deleteMutation.mutate}
diff --git a/packages/lib/availability.ts b/packages/lib/availability.ts
index 192f4039b7..2244b98860 100644
--- a/packages/lib/availability.ts
+++ b/packages/lib/availability.ts
@@ -120,7 +120,10 @@ export function getWorkingHours(
   return workingHours;
 }
 
-export function availabilityAsString(availability: Availability, locale: string) {
+export function availabilityAsString(
+  availability: Availability,
+  { locale, hour12 }: { locale?: string; hour12?: boolean }
+) {
   const weekSpan = (availability: Availability) => {
     const days = availability.days.slice(1).reduce(
       (days, day) => {
@@ -145,11 +148,11 @@ export function availabilityAsString(availability: Availability, locale: string)
 
   const timeSpan = (availability: Availability) => {
     return (
-      new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric" }).format(
+      new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12 }).format(
         new Date(availability.startTime.toISOString().slice(0, -1))
       ) +
       " - " +
-      new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric" }).format(
+      new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12 }).format(
         new Date(availability.endTime.toISOString().slice(0, -1))
       )
     );
diff --git a/packages/lib/weekday.ts b/packages/lib/weekday.ts
index d1983491fb..1690878d1d 100644
--- a/packages/lib/weekday.ts
+++ b/packages/lib/weekday.ts
@@ -3,6 +3,10 @@ export function weekdayNames(locale: string | string[], weekStart = 0, type: "sh
   return Array.from(Array(7).keys()).map((d) => nameOfDay(locale, d + weekStart, type));
 }
 
-export function nameOfDay(locale: string | string[], day: number, type: "short" | "long" = "long") {
+export function nameOfDay(
+  locale: string | string[] | undefined,
+  day: number,
+  type: "short" | "long" = "long"
+) {
   return new Intl.DateTimeFormat(locale, { weekday: type }).format(new Date(1970, 0, day + 4));
 }
diff --git a/packages/ui/v2/modules/availability/ScheduleListItem.tsx b/packages/ui/v2/modules/availability/ScheduleListItem.tsx
index 65758cf0e7..fe2d9cac77 100644
--- a/packages/ui/v2/modules/availability/ScheduleListItem.tsx
+++ b/packages/ui/v2/modules/availability/ScheduleListItem.tsx
@@ -5,23 +5,24 @@ import { availabilityAsString } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
 import { inferQueryOutput } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
-import Dropdown, {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
 
 export function ScheduleListItem({
   schedule,
   deleteFunction,
   isDeleting = false,
+  displayOptions,
 }: {
   schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
   deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
   isDeleting: boolean;
+  displayOptions?: {
+    timeZone?: string;
+    hour12?: boolean;
+  };
 }) {
   const { t, i18n } = useLocale();
 
@@ -31,27 +32,37 @@ export function ScheduleListItem({
         <div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
           <Link href={"/availability/" + schedule.id}>
             <a className="flex-grow truncate text-sm" title={schedule.name}>
-              <div>
-                <span className="truncate pr-2 font-semibold text-gray-900">{schedule.name}</span>
-                {schedule.isDefault && <Badge variant="green">{t("default")}</Badge>}
+              <div className="space-x-2">
+                <span className="truncate font-medium text-neutral-900">{schedule.name}</span>
+                {schedule.isDefault && (
+                  <Badge variant="success" className="text-xs">
+                    {t("default")}
+                  </Badge>
+                )}
               </div>
-              <p className="mt-1 hidden text-base leading-4 text-gray-600 lg:block">
+              <p className="mt-1 text-xs text-neutral-500">
                 {schedule.availability.map((availability: Availability) => (
                   <Fragment key={availability.id}>
-                    {availabilityAsString(availability, i18n.language)}
+                    {availabilityAsString(availability, {
+                      locale: i18n.language,
+                      hour12: displayOptions?.hour12,
+                    })}
                     <br />
                   </Fragment>
                 ))}
+                {schedule.timeZone && schedule.timeZone !== displayOptions?.timeZone && (
+                  <p className="my-1 flex items-center first-letter:text-xs">
+                    <Icon.FiGlobe />
+                    &nbsp;{schedule.timeZone}
+                  </p>
+                )}
               </p>
             </a>
           </Link>
         </div>
-        <Button color="secondary" href={"/availability/" + schedule.id}>
-          Edit
-        </Button>
         <Dropdown>
-          <DropdownMenuTrigger className="focus:bg-transparent focus:ring-0">
-            <Button color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+          <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
+            <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
@@ -63,7 +74,7 @@ export function ScheduleListItem({
                   });
                 }}
                 type="button"
-                color="destructive"
+                color="warn"
                 className="w-full font-normal"
                 StartIcon={isDeleting ? undefined : Icon.FiTrash}
                 loading={isDeleting}>