Fixes user event availability page (#749)

* Abstracts MinutesField

* Adds missing Minimum booking notice

* Refactoring

* Fixes int field sent as string

* Sorts slots by time

* Fixes availability page

* Fixes available days

components/booking/DatePicker.tsx

@@ -72,7 +72,7 @@ const DatePicker = ({
             ? dayjs().tz(organizerTimeZone).add(periodDays, "days").endOf("day")
             : dayjs().tz(organizerTimeZone).businessDaysAdd(periodDays, "days").endOf("day");
           return (
-            date.endOf("day").isBefore(dayjs().utcOffsett(date.utcOffset())) ||
+            date.endOf("day").isBefore(dayjs().utcOffset(date.utcOffset())) ||
             date.endOf("day").isAfter(periodRollingEndDay) ||
             !getSlots({
               inviteeDate: date,

components/booking/pages/AvailabilityPage.tsx

@@ -1,12 +1,11 @@
 // Get router variables
 import { ChevronDownIcon, ChevronUpIcon, ClockIcon, CreditCardIcon, GlobeIcon } from "@heroicons/react/solid";
-import { EventType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import dayjs, { Dayjs } from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import utc from "dayjs/plugin/utc";
 import { useRouter } from "next/router";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
@@ -22,19 +21,11 @@ import { HeadSeo } from "@components/seo/head-seo";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import PoweredByCalendso from "@components/ui/PoweredByCalendso";
 
+import { AvailabilityPageProps } from "../../../pages/[user]/[type]";
+
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 
-type AvailabilityPageProps = {
-  eventType: EventType;
-  profile: {
-    name: string;
-    image: string;
-    theme?: string;
-  };
-  workingHours: [];
-};
-
 const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => {
   const router = useRouter();
   const { rescheduleUid } = router.query;
@@ -201,13 +192,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
                   periodDays={eventType?.periodDays}
                   periodCountCalendarDays={eventType?.periodCountCalendarDays}
                   onDatePicked={changeDate}
-                  workingHours={[
+                  workingHours={workingHours}
-                    {
-                      days: [0, 1, 2, 3, 4, 5, 6],
-                      endTime: 1440,
-                      startTime: 0,
-                    },
-                  ]}
                   weekStart="Sunday"
                   eventLength={eventType.length}
                   minimumBookingNotice={eventType.minimumBookingNotice}

components/ui/form/MinutesField.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  label: ReactNode;
+};
+
+const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
+  return (
+    <div className="block sm:flex">
+      <div className="mb-4 min-w-44 sm:mb-0">
+        <label htmlFor={rest.id} className="flex mt-2 text-sm font-medium text-neutral-700">
+          {label}
+        </label>
+      </div>
+      <div className="w-full">
+        <div className="relative mt-1 rounded-sm shadow-sm">
+          <input
+            {...rest}
+            ref={ref}
+            type="number"
+            className="block w-full pl-2 pr-12 border-gray-300 rounded-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+          />
+          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+            <span className="text-gray-500 sm:text-sm" id="duration">
+              mins
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+MinutesField.displayName = "MinutesField";
+
+export default MinutesField;

lib/hooks/useSlots.ts

@@ -61,6 +61,7 @@ export const useSlots = (props: UseSlotsProps) => {
     ).then((results) => {
       let loadedSlots: Slot[] = results[0];
       if (results.length === 1) {
+        loadedSlots = loadedSlots.sort((a, b) => (a.time.isAfter(b.time) ? 1 : -1));
         setSlots(loadedSlots);
         setLoading(false);
         return;
@@ -93,6 +94,7 @@ export const useSlots = (props: UseSlotsProps) => {
       for (let i = 1; i < results.length; i++) {
         loadedSlots = poolingMethod(loadedSlots, results[i]);
       }
+      loadedSlots = loadedSlots.sort((a, b) => (a.time.isAfter(b.time) ? 1 : -1));
       setSlots(loadedSlots);
       setLoading(false);
     });

pages/[user]/[type].tsx

@@ -1,4 +1,4 @@
-import { User } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
@@ -9,7 +9,9 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
-export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
+export type AvailabilityPageProps = inferSSRProps<typeof getServerSideProps>;
+
+export default function Type(props: AvailabilityPageProps) {
   return <AvailabilityPage {...props} />;
 }
 
@@ -25,7 +27,33 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     throw new Error(`File is not named [type]/[user]`);
   }
 
-  const user: User = await prisma.user.findUnique({
+  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
+    id: true,
+    title: true,
+    availability: true,
+    description: true,
+    length: true,
+    price: true,
+    currency: true,
+    periodType: true,
+    periodStartDate: true,
+    periodEndDate: true,
+    periodDays: true,
+    periodCountCalendarDays: true,
+    schedulingType: true,
+    minimumBookingNotice: true,
+    users: {
+      select: {
+        avatar: true,
+        name: true,
+        username: true,
+        hideBranding: true,
+        plan: true,
+      },
+    },
+  });
+
+  const user = await prisma.user.findUnique({
     where: {
       username: userParam.toLowerCase(),
     },
@@ -55,22 +83,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
             },
           ],
         },
-        select: {
+        select: eventTypeSelect,
-          id: true,
-          title: true,
-          availability: true,
-          description: true,
-          length: true,
-          price: true,
-          currency: true,
-          users: {
-            select: {
-              avatar: true,
-              name: true,
-              username: true,
-            },
-          },
-        },
       },
     },
   });
@@ -93,22 +106,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           },
         ],
       },
-      select: {
+      select: eventTypeSelect,
-        id: true,
-        title: true,
-        availability: true,
-        description: true,
-        length: true,
-        price: true,
-        currency: true,
-        users: {
-          select: {
-            avatar: true,
-            name: true,
-            username: true,
-          },
-        },
-      },
     });
     if (!eventTypeBackwardsCompat) {
       return {
@@ -119,11 +117,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       avatar: user.avatar,
       name: user.name,
       username: user.username,
+      hideBranding: user.hideBranding,
+      plan: user.plan,
     });
     user.eventTypes.push(eventTypeBackwardsCompat);
   }
 
-  const eventType = user.eventTypes[0];
+  const [eventType] = user.eventTypes;
 
   // check this is the first event
 
@@ -155,10 +155,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       } as const;
     }
   }*/
-  const getWorkingHours = (providesAvailability: { availability: Availability[] }) =>
+  const getWorkingHours = (availability: typeof user.availability | typeof eventType.availability) =>
-    providesAvailability.availability && providesAvailability.availability.length
+    availability && availability.length ? availability : null;
-      ? providesAvailability.availability
-      : null;
 
   const workingHours =
     getWorkingHours(eventType.availability) ||

pages/event-types/[type].tsx

@@ -54,6 +54,7 @@ import { Scheduler } from "@components/ui/Scheduler";
 import Switch from "@components/ui/Switch";
 import CheckboxField from "@components/ui/form/CheckboxField";
 import CheckedSelect from "@components/ui/form/CheckedSelect";
+import MinutesField from "@components/ui/form/MinutesField";
 import * as RadioArea from "@components/ui/form/radio-area";
 
 dayjs.extend(utc);
@@ -218,7 +219,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
       title: enteredTitle,
       slug: enteredSlug,
       description: formData.description as string,
+      // note(zomars) Why does this field doesnt need to be parsed...
       length: formData.length as unknown as number,
+      // note(zomars) ...But this does? (Is being sent as string, despite it's a number field)
+      minimumBookingNotice: parseInt(formData.minimumBookingNotice as unknown as string),
       requiresConfirmation: formData.requiresConfirmation === "on",
       disableGuests: formData.disableGuests === "on",
       hidden,
@@ -418,32 +422,19 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       </div>
                     </div>
                   </div>
-                  <div className="items-center block sm:flex">
+
-                    <div className="mb-4 min-w-44 sm:mb-0">
+                  <MinutesField
-                      <label htmlFor="length" className="flex mt-0 text-sm font-medium text-neutral-700">
+                    label={
-                        <ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
+                      <>
-                        Duration
+                        <ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" /> Duration
-                      </label>
+                      </>
-                    </div>
+                    }
-                    <div className="w-full">
+                    name="length"
-                      <div className="relative mt-1 rounded-sm shadow-sm">
+                    id="length"
-                        <input
+                    required
-                          type="number"
+                    placeholder="15"
-                          name="length"
+                    defaultValue={eventType.length}
-                          id="length"
+                  />
-                          required
-                          className="block w-full pl-2 pr-12 border-gray-300 rounded-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-                          placeholder="15"
-                          defaultValue={eventType.length}
-                        />
-                        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                          <span className="text-gray-500 sm:text-sm" id="duration">
-                            mins
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
                 <hr />
                 <div className="space-y-3">
@@ -754,6 +745,15 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
                         <hr className="border-neutral-200" />
 
+                        <MinutesField
+                          label="Minimum booking notice"
+                          name="minimumBookingNotice"
+                          id="minimumBookingNotice"
+                          required
+                          placeholder="120"
+                          defaultValue={eventType.minimumBookingNotice}
+                        />
+
                         <div className="block sm:flex">
                           <div className="mb-4 min-w-44 sm:mb-0">
                             <label
@@ -1241,6 +1241,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       periodCountCalendarDays: true,
       requiresConfirmation: true,
       disableGuests: true,
+      minimumBookingNotice: true,
       team: {
         select: {
           slug: true,