From a25cd43ddfdf91f38f0c21a118a1cd7ad7ed0a7a Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Thu, 18 Jan 2024 23:00:21 -0500
Subject: [PATCH] fix: start and end date for ooo entry (#13284)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: sean-brydon <sean@cal.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../my-account/out-of-office/index.tsx        | 51 ++++++++++---------
 .../loggedInViewer/outOfOffice.handler.ts     |  6 ++-
 .../loggedInViewer/outOfOffice.schema.ts      |  1 +
 .../form/date-range-picker/styles.css         |  6 ++-
 4 files changed, 36 insertions(+), 28 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 be7a32f828..6238b0e0f4 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
@@ -26,6 +26,7 @@ import PageWrapper from "@components/PageWrapper";
 
 export type BookingRedirectForm = {
   dateRange: { startDate: Date; endDate: Date };
+  offset: number;
   toTeamUserId: number | null;
 };
 
@@ -47,6 +48,7 @@ const OutOfOfficeSection = () => {
         startDate: dateRange.startDate,
         endDate: dateRange.endDate,
       },
+      offset: dayjs().utcOffset(),
       toTeamUserId: null,
     },
   });
@@ -104,20 +106,17 @@ const OutOfOfficeSection = () => {
               </div>
             )}
           </div>
-          <div className="mt-4 flex flex-row">
+          <div className="mt-4 grid grid-rows-2 gap-2 md:grid-cols-2">
             {profileRedirect && (
-              <div className="mr-2 w-1/2 lg:w-1/3">
+              <div>
                 <p className="text-emphasis block text-sm font-medium">{t("team_member")}</p>
                 <Select
-                  className="mt-1 h-4 max-w-[350px] text-white"
+                  className="mt-1 h-4 text-white"
                   name="toTeamUsername"
                   data-testid="team_username_select"
                   value={selectedMember}
                   placeholder={t("select_team_member")}
                   isSearchable
-                  innerClassNames={{
-                    control: "h-[38px]",
-                  }}
                   options={memberListOptions}
                   onChange={(selectedOption) => {
                     if (selectedOption?.value) {
@@ -128,25 +127,27 @@ const OutOfOfficeSection = () => {
                 />
               </div>
             )}
-            <div className="w-1/2 lg:w-1/3">
+            <div>
               <p className="text-emphasis mb-1 block text-sm font-medium">{t("time_range")}</p>
-              <Controller
-                name="dateRange"
-                control={control}
-                defaultValue={dateRange}
-                render={() => (
-                  <DateRangePicker
-                    startDate={getValues("dateRange").startDate}
-                    endDate={getValues("dateRange").endDate}
-                    onDatesChange={({ startDate, endDate }) => {
-                      setValue("dateRange", {
-                        startDate,
-                        endDate,
-                      });
-                    }}
-                  />
-                )}
-              />
+              <div>
+                <Controller
+                  name="dateRange"
+                  control={control}
+                  defaultValue={dateRange}
+                  render={() => (
+                    <DateRangePicker
+                      startDate={getValues("dateRange").startDate}
+                      endDate={getValues("dateRange").endDate}
+                      onDatesChange={({ startDate, endDate }) => {
+                        setValue("dateRange", {
+                          startDate,
+                          endDate,
+                        });
+                      }}
+                    />
+                  )}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -195,7 +196,7 @@ const OutOfOfficeEntriesList = () => {
             <TableRow key={item.id} data-testid={`table-redirect-${item.toUser?.username || "n-a"}`}>
               <TableCell>
                 <p className="px-2">
-                  {dayjs(item.start).format("ll")} - {dayjs(item.end).format("ll")}
+                  {dayjs.utc(item.start).format("ll")} - {dayjs.utc(item.end).format("ll")}
                 </p>
               </TableCell>
               <TableCell>
diff --git a/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts b/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts
index 9163aa2392..58cf2fe539 100644
--- a/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts
+++ b/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts
@@ -134,12 +134,14 @@ export const outOfOfficeCreate = async ({ ctx, input }: TBookingRedirect) => {
   if (existingOutOfOfficeEntry) {
     throw new TRPCError({ code: "BAD_REQUEST", message: "booking_redirect_infinite_not_allowed" });
   }
+  const startDateUtc = dayjs.utc(startDate).add(input.offset, "minute");
+  const endDateUtc = dayjs.utc(endDate).add(input.offset, "minute");
 
   const createdRedirect = await prisma.outOfOfficeEntry.create({
     data: {
       uuid: uuidv4(),
-      start: dayjs(startDate).startOf("day").toISOString(),
-      end: dayjs(endDate).endOf("day").toISOString(),
+      start: startDateUtc.startOf("day").toISOString(),
+      end: endDateUtc.endOf("day").toISOString(),
       userId: ctx.user.id,
       toUserId: toUserId,
       createdAt: new Date(),
diff --git a/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts b/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts
index 4740fb2268..02857065a0 100644
--- a/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts
+++ b/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts
@@ -5,6 +5,7 @@ export const ZOutOfOfficeInputSchema = z.object({
     startDate: z.date(),
     endDate: z.date(),
   }),
+  offset: z.number(),
   toTeamUserId: z.number().nullable(),
 });
 
diff --git a/packages/ui/components/form/date-range-picker/styles.css b/packages/ui/components/form/date-range-picker/styles.css
index bd8c9725d8..b38eaf6613 100644
--- a/packages/ui/components/form/date-range-picker/styles.css
+++ b/packages/ui/components/form/date-range-picker/styles.css
@@ -103,13 +103,17 @@
   background-color: var(--cal-bg-subtle);
 }
 
+.react-daterange-picker { 
+  width: 100%;
+}
+
 .react-daterange-picker > .react-daterange-picker__wrapper {
   padding: 0.625rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   border-radius: 0.375rem;
+  width: 100%;
   border-color: var(--cal-border);
-  width: 360px;
   display: flex;
   flex-direction: row;
   align-items: center;