Nylas Scheduler: Consecutive Booking (#226)

* Multiple events

* Warning for divergent times

* EventDefinition and host rules types

* [Scheduler]: Consecutive availability initial set up

* add startday to if condition

* Deduping template

* rather fetching

* Methodifying store fetch and open hours conversions

* Some type cleanup

* Right up to the point where you can book

* progress: hydrating subevents and deduping simultaneous

* timeslots busy or free based on existince of block

* Console cleanup

* slot inspection on availability component

* availability component as interface

* Consecutive works with list view

* relativizing formerly top-level props to event props

* Default view back to calendar

* Last date in availability query should be using end hour, not start hour

* A little bit of cleanup and fixing empty dispatch event

* Dirty-up but got events hydrating for single event situations

* fix issue where consecutive event participants didnt match manifest event order

* variablizing _this.events

* General typefixing

* Reset availability demo for tests

* Couple more type fixes

* email ids to participant within events and basic consecutive tests

* unonly on tests

* Intercepts added to tests

* Some pre-review fixups

* Fixup typings

* Test for selecting event working with stubbed response

* Fix type error

* Removed TODO comment

* Fixup to unblock qa on parsed email addresses

* typing fixes

* More type updates

* participants to participantEmails

* Demo allows you to switch between single and consec

* Set() to filter out timedupes per @ozsivanov

* De-debugZ

* ID fix for availability

Co-authored-by: Pooja Guggari <[email protected]>
Co-authored-by: Oliver Zsivanov <[email protected]>
Co-authored-by: Heather Hamilton <[email protected]>

Author: 4 people

commons/src/connections/availability.ts

@@ -5,12 +5,15 @@ import {
   getMiddlewareApiUrl,
 } from "../methods/api";
 import type {
+  ConsecutiveAvailabilityQuery,
   AvailabilityQuery,
   AvailabilityResponse,
   FreeBusyResponse,
-  TimeSlot,
+  PreDatedTimeSlot,
 } from "@commons/types/Availability";
 import type { MiddlewareResponse } from "@commons/types/Nylas";
+import type { EventDefinition } from "@commons/types/ScheduleEditor";
+import type { ConsecutiveEvent } from "@commonstypes/Scheduler";
 
 // TODO: deprecate if we find /calendars/availability to be fully sufficient
 export const fetchFreeBusy = async (
@@ -63,3 +66,84 @@ export const fetchAvailability = async (
     })
     .catch((error) => handleError(query.component_id, error));
 };
+
+export const fetchConsecutiveAvailability = async (
+  query: ConsecutiveAvailabilityQuery,
+): Promise<ConsecutiveEvent[][]> => {
+  return fetch(
+    `${getMiddlewareApiUrl(
+      query.component_id,
+    )}/calendars/availability/consecutive`,
+    getFetchConfig({
+      method: "POST",
+      component_id: query.component_id,
+      access_token: query.access_token,
+      body: query.body,
+    }),
+  )
+    .then(async (apiResponse): Promise<ConsecutiveEvent[][]> => {
+      const json = await handleResponse<
+        MiddlewareResponse<PreDatedTimeSlot[][]>
+      >(apiResponse);
+      let response: PreDatedTimeSlot[][] =
+        json.response?.map((blockSlot) => {
+          blockSlot = blockSlot.map((slot: any) => {
+            slot.start_time = new Date(slot.start_time * 1000);
+            slot.end_time = new Date(slot.end_time * 1000);
+            return slot;
+          });
+          return blockSlot;
+        }) || [];
+      const hydratedResponse = hydrateSlotsToEvents(
+        response,
+        query.body.events,
+      );
+      const dedupedResponse =
+        removeSimultaneousAvailabilityOptions(hydratedResponse);
+      return dedupedResponse;
+    })
+    .catch((error) => handleError(query.component_id, error));
+};
+
+// Doing the best we can with what we've got: /calendars/availability/consecutive doesn't return any info other than emails
+// and start/end times. This means that if we have to events (EventDefinitions) with the same email addresses? We're shooting in the dark about which is which.
+// TODO: allow for an indicator on the API side
+function hydrateSlotsToEvents(
+  availabilities: PreDatedTimeSlot[][],
+  events: EventDefinition[],
+): ConsecutiveEvent[][] {
+  return availabilities.map((block) => {
+    return block.map((subevent) => {
+      return {
+        ...subevent,
+        ...events.find(
+          (eventdef) =>
+            eventdef.participantEmails.length === subevent.emails.length &&
+            eventdef.participantEmails.every((email) =>
+              subevent.emails.includes(email),
+            ),
+        ),
+      };
+    });
+  }) as any[][]; // TODO: How to best coerce PreDatedTimeSlot[][] to ConsecutiveEvent[][]? spread-combined return handles it.
+}
+
+// We don't want to overburden our users with too much sweet horrible freedom of choice;
+// the /calendars/availability/consecutive endpoint returns order permutations with same time slots;
+// Cull them down to just the first that exists per timeslot.
+function removeSimultaneousAvailabilityOptions(
+  availabilities: ConsecutiveEvent[][],
+) {
+  const blockSet = new Set();
+  return availabilities.filter((block) => {
+    const blockString = `${block[0].start_time}_${
+      block[block.length - 1].end_time
+    }`;
+    if (blockSet.has(blockString)) {
+      return false;
+    } else {
+      blockSet.add(blockString);
+      return true;
+    }
+  });
+}

commons/src/connections/manifest.ts

@@ -24,27 +24,22 @@ export const fetchManifest = async (
 
 // Allows <nylas-schedule-editor> to modify its own properties
 
-interface saveManifestParams {
-  id: string;
-  access_token?: string;
-  manifest: Manifest;
-}
-
 export const saveManifest = async (
-  params: saveManifestParams
+  id: string,
+  manifest: Manifest,
+  access_token?: string,
 ): Promise<Manifest> => {
-  const { id, access_token, manifest } = params;
   return fetch(
     `${getMiddlewareApiUrl(id)}/component`,
     getFetchConfig({
       method: "PUT",
       component_id: id,
       access_token,
-      body: manifest,
+      body: { settings: manifest },
     }),
   )
     .then((response) => handleResponse<MiddlewareResponse<Manifest>>(response))
     .then((json) => {
       return json.response;
     });
-}
+};

commons/src/constants/custom-fields.ts

@@ -1,4 +1,6 @@
-export const DefaultCustomFields = [
+import type { CustomField } from "@commons/types/Scheduler";
+
+export const DefaultCustomFields: CustomField[] = [
   {
     title: "Your Name",
     type: "text",

commons/src/index.ts

@@ -26,6 +26,7 @@ export {
 } from "./connections/neural";
 
 export { AvailabilityStore } from "./store/availability";
+export { ConsecutiveAvailabilityStore } from "./store/consecutive-availability";
 export { CalendarStore } from "./store/calendars";
 export { ContactStore } from "./store/contacts";
 export { ContactAvatarStore } from "./store/contact-avatar";

commons/src/methods/component.ts

@@ -102,7 +102,7 @@ export function parseBoolean(
   return (<any>[true, "true", "1"]).includes(val);
 }
 
-export default function parseStringToArray(parseStr: string) {
+export default function parseStringToArray(parseStr: string): string[] {
   if (!parseStr) {
     return [];
   }

commons/src/store/consecutive-availability.ts

@@ -0,0 +1,48 @@
+import { Writable, writable } from "svelte/store";
+import { fetchConsecutiveAvailability } from "../connections/availability";
+import type {
+  AvailabilityQuery,
+  ConsecutiveAvailabilityQuery,
+  TimeSlot,
+} from "@commons/types/Availability";
+import type { ConsecutiveEvent } from "@commonstypes/Scheduler";
+
+type ConsecutiveAvailabilityStore = Record<
+  string,
+  Promise<ConsecutiveEvent[][]>
+>;
+
+function initialize(): Writable<ConsecutiveAvailabilityStore> {
+  const get = (
+    target: ConsecutiveAvailabilityStore,
+    key: string,
+  ): Promise<ConsecutiveEvent[][]> | void => {
+    const accessor: ConsecutiveAvailabilityQuery = JSON.parse(key);
+    // Avoid saving forceReload property as part of store key
+    const accessorCopy = { ...accessor };
+    delete accessorCopy.forceReload;
+    key = JSON.stringify(accessorCopy);
+
+    if (
+      !accessor.component_id ||
+      !accessor?.body?.start_time ||
+      !accessor?.body?.end_time
+    ) {
+      return;
+    }
+
+    if (!target[key] || accessor.forceReload) {
+      const fetchPromise = fetchConsecutiveAvailability(accessor);
+      store.update((store) => {
+        store[key] = fetchPromise;
+        return store;
+      });
+      target[key] = fetchPromise;
+    }
+    return target[key];
+  };
+  const store = writable(new Proxy<ConsecutiveAvailabilityStore>({}, { get }));
+  return store;
+}
+
+export const ConsecutiveAvailabilityStore = initialize();

commons/src/types/Availability.ts

@@ -6,6 +6,9 @@ import type {
   CommonQuery,
   Manifest as NylasManifest,
 } from "@commons/types/Nylas";
+
+import type { EventDefinition } from "./ScheduleEditor";
+
 export interface Manifest extends NylasManifest {
   allow_booking: boolean;
   allow_date_change: boolean;
@@ -18,7 +21,6 @@ export interface Manifest extends NylasManifest {
   closed_color: string;
   date_format: "full" | "weekday" | "date" | "none";
   dates_to_show: number;
-  email_ids: string[];
   participants: string[];
   end_hour: number;
   event_buffer: number;
@@ -43,6 +45,7 @@ export interface Manifest extends NylasManifest {
   start_hour: number;
   view_as: "schedule" | "list";
   timezone: string;
+  events: EventDefinition[];
 }
 
 export interface AvailabilityRule {
@@ -73,9 +76,25 @@ export interface TimeSlot {
   end_time: Date;
   available_calendars: string[];
   calendar_id?: string;
+  expirySelection?: string;
+  recurrence_cadence?: string;
+  recurrence_expiry?: Date | string;
+}
+
+export interface BookableSlot extends TimeSlot {
+  event_conferencing: string;
+  event_description: string;
+  event_location: string;
+  event_title: string;
   expirySelection: string;
-  recurrence_cadence: string;
-  recurrence_expiry: string;
+  recurrence_cadence?:
+    | "none"
+    | "daily"
+    | "weekdays"
+    | "biweekly"
+    | "weekly"
+    | "monthly";
+  recurrence_expiry?: Date | string;
 }
 
 export interface SelectableSlot extends TimeSlot {
@@ -94,6 +113,21 @@ export interface AvailabilityQuery extends CommonQuery {
     free_busy: any[];
     duration_minutes: number;
     interval_minutes: number;
+    round_robin?: string;
+  };
+  forceReload?: boolean;
+}
+
+export interface ConsecutiveAvailabilityQuery extends CommonQuery {
+  body: {
+    emails: string[];
+    start_time: number;
+    end_time: number;
+    free_busy: any[];
+    duration_minutes: number;
+    interval_minutes: number;
+    events: EventDefinition[];
+    round_robin: "max-availability" | "max-fairness";
   };
   forceReload?: boolean;
 }
@@ -138,3 +172,12 @@ export interface Day {
   slots: SelectableSlot[];
   timestamp: Date;
 }
+
+export interface OpenHours {
+  emails: string[];
+  days: number[];
+  start: string;
+  end: string;
+  timezone: string;
+  object_type: "open_hours";
+}

commons/src/types/Events.ts

@@ -2,25 +2,26 @@ import type { Participant } from "@commons/types/Nylas";
 import type { EventStatus } from "@commons/enums/Events";
 
 interface _Event {
-  title?: string;
-  description?: string;
-  participants?: Participant[];
-  owner: string;
-  id: string;
-  calendar_id: string;
   account_id: string;
   busy: boolean;
-  status?: EventStatus;
-  relativeStartTime: number;
-  relativeRunTime: number;
+  calendar_id: string;
+  id: string;
+  owner: string;
+  recurrence: EventRecurrence;
   relativeOverlapOffset: number;
   relativeOverlapWidth: number;
-  location?: string;
-  locationString?: string;
+  relativeRunTime: number;
+  relativeStartTime: number;
   attendeeStatus?: "yes" | "no" | "noreply" | "maybe";
-  isNewEvent?: boolean;
   conferencing?: EventConferencing;
-  recurrence: EventRecurrence;
+  description?: string;
+  isNewEvent?: boolean;
+  location?: string;
+  locationString?: string;
+  metadata?: Record<string, any>;
+  participants?: Participant[];
+  status?: EventStatus;
+  title?: string;
 }
 
 export interface EventRecurrence {

commons/src/types/Nylas.ts

@@ -145,7 +145,7 @@ export interface MiddlewareResponse<T = unknown> {
 
 export interface NError {
   name?: string;
-  message?: Error;
+  message?: Error | string;
 }
 
 export interface Manifest {

commons/src/types/ScheduleEditor.ts

@@ -41,7 +41,7 @@ export interface Manifest extends NylasManifest {
   max_book_ahead_days: number;
   min_book_ahead_days: number;
   custom_fields: CustomField[];
-  events: any[]; // TODO
+  events: EventDefinition[];
 }
 
 export interface EventDefinition {
@@ -50,7 +50,7 @@ export interface EventDefinition {
   event_location: string;
   event_conferencing: string;
   slot_size: 15 | 30 | 60;
-  email_ids: string[];
+  participantEmails: string[];
   host_rules: HostRules;
 }