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
2021-09-23 08:08:44 -06:00 · 2021-09-23 08:08:44 -06:00 · cb4a1e031e
parent 4d2e556d7d
commit cb4a1e031e
6 changed files with 108 additions and 86 deletions
--- a/components/booking/DatePicker.tsx
+++ b/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,
--- a/components/booking/pages/AvailabilityPage.tsx
+++ b/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={[
-                    {
-                      days: [0, 1, 2, 3, 4, 5, 6],
-                      endTime: 1440,
-                      startTime: 0,
-                    },
-                  ]}
+                  workingHours={workingHours}
                  weekStart="Sunday"
                  eventLength={eventType.length}
                  minimumBookingNotice={eventType.minimumBookingNotice}
--- a/components/ui/form/MinutesField.tsx
+++ b/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;
--- a/lib/hooks/useSlots.ts
+++ b/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);
    });
--- a/pages/[user]/[type].tsx
+++ b/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: {
-          id: true,
-          title: true,
-          availability: true,
-          description: true,
-          length: true,
-          price: true,
-          currency: true,
-          users: {
-            select: {
-              avatar: true,
-              name: true,
-              username: true,
-            },
-          },
-        },
+        select: eventTypeSelect,
      },
    },
  });
@ -93,22 +106,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
          },
        ],
      },
-      select: {
-        id: true,
-        title: true,
-        availability: true,
-        description: true,
-        length: true,
-        price: true,
-        currency: true,
-        users: {
-          select: {
-            avatar: true,
-            name: true,
-            username: true,
-          },
-        },
-      },
+      select: eventTypeSelect,
    });
    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[] }) =>
-    providesAvailability.availability && providesAvailability.availability.length
-      ? providesAvailability.availability
-      : null;
+  const getWorkingHours = (availability: typeof user.availability | typeof eventType.availability) =>
+    availability && availability.length ? availability : null;

  const workingHours =
    getWorkingHours(eventType.availability) ||
--- a/pages/event-types/[type].tsx
+++ b/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">
-                      <label htmlFor="length" className="flex mt-0 text-sm font-medium text-neutral-700">
-                        <ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
-                        Duration
-                      </label>
-                    </div>
-                    <div className="w-full">
-                      <div className="relative mt-1 rounded-sm shadow-sm">
-                        <input
-                          type="number"
-                          name="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>
+
+                  <MinutesField
+                    label={
+                      <>
+                        <ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" /> Duration
+                      </>
+                    }
+                    name="length"
+                    id="length"
+                    required
+                    placeholder="15"
+                    defaultValue={eventType.length}
+                  />
                </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,