cronofy-elements 1.42.1 → 1.43.0

package/demo/date-time-picker.ejs

@@ -64,10 +64,83 @@
                 return output.utc().format();
             };
 
+            const sequencedAvailabilityQuery = {
+                sequence: [
+                {
+                    sequence_id: "test",
+                    ordinal: 1,
+                    participants: [
+                          {
+                              required: "all",
+                              members: [
+                                  {
+                                      sub: "<%= sub %>",
+                                      // managed_availability: true,
+                                      // availability_rule_ids: ["weekly_work_hours"]
+                                  }
+                              ]
+                          }
+                      ],
+                      required_duration: { minutes: 5 },
+                  },
+                  {
+                    sequence_id: "test-1",
+                    ordinal: 2,
+                    participants: [
+                          {
+                              required: "all",
+                              members: [
+                                  {
+                                      sub: "<%= sub %>",
+                                      // managed_availability: true,
+                                      // availability_rule_ids: ["weekly_work_hours"]
+                                  }
+                              ]
+                          }
+                      ],
+                      required_duration: { minutes: 45 },
+                      start_interval: { minutes: 5 },
+                      buffer: {
+                        before: {
+                          minimum: { minutes: 15 }
+                        }
+                      }
+                  },
+                  {
+                    sequence_id: "test-2",
+                    ordinal: 3,
+                    participants: [
+                          {
+                              required: "all",
+                              members: [
+                                  {
+                                      sub: "<%= sub %>",
+                                      // managed_availability: true,
+                                      // availability_rule_ids: ["weekly_work_hours"]
+                                  }
+                              ]
+                          }
+                      ],
+                      required_duration: { minutes: 30 },
+                      start_interval: { minutes: 10 },
+                      buffer: {
+                        before: {
+                          minimum: { minutes: 15 }
+                        }
+                      }
+                  },
+                  
+                ],
+                query_periods: [
+                    { start: slotTimes(01,"08:00"), end: slotTimes(31,"17:00") }
+                ]
+              }
+
             CronofyElements.DateTimePicker({
                 element_token: "<%= date_time_picker_token %>",
                 target_id: 'cronofy-date-time-picker',
                 api_domain:"<%= api_domain %>",
+                //availability_query: sequencedAvailabilityQuery,
                 availability_query: {
                     // response_format: "slots",
                     participants: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cronofy-elements",
-    "version": "1.42.1",
+    "version": "1.43.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
     "main": "build/npm/CronofyElements.js",
     "scripts": {

package/src/js/components/DateTimePicker/DateTimePicker.js

@@ -6,6 +6,7 @@ import {
     parseTzList,
     getInitialSelectedTzid,
     getMonthsLoadingFromQuery,
+    getDurationFromQuery,
 } from "./utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
 
@@ -30,6 +31,8 @@ const DateTimePicker = ({ options }) => {
             selectedDateObject?.format("YYYY-MM")
         );
 
+        const duration = getDurationFromQuery(options.query);
+
         const endDateObject = moment(options.config.endDate, "YYYY-MM-DD");
         const startDateObject = moment(options.config.startDate, "YYYY-MM-DD");
         const currentMonthObject = selectedDateObject ?? startDateObject;
@@ -61,6 +64,7 @@ const DateTimePicker = ({ options }) => {
                 : () => options.log.info("No `callback` option has been provided"),
             columnView: "loading", // loading | error | slots | confirm | no-slots
             daySlots: [],
+            duration,
             locale: options.locale,
             mode: options.config.mode, // confirm (default) | no_confirm
             query: options.query,
@@ -75,6 +79,7 @@ const DateTimePicker = ({ options }) => {
             endDateObject,
             focusedSlot: false,
             availableDays: [],
+            sequenced_availability: options.query.sequence ? true : false,
             slots: {},
             slotFetchCount: 0,
             slotInjectionPoint: undefined,

package/src/js/components/DateTimePicker/Details.js

@@ -17,9 +17,11 @@ const Details = ({ duration, locale }) => {
                 <TimeZoneSelector locale={locale} />
             </div>
             <div className={theme.classBuilder("details--duration")}>
-                <p>
-                    <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
-                </p>
+                {duration && (
+                    <p>
+                        <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
+                    </p>
+                )}
             </div>
         </div>
     );

package/src/js/components/DateTimePicker/SequencedSlotButton.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from "react";
+import moment from "moment-timezone";
+
+import { useI18n } from "../../contexts/i18n-context";
+import { useStatus } from "./contexts/status-context";
+import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
+
+const SequencedSlotButton = ({ slot }) => {
+    const i18n = useI18n();
+    const theme = useTheme();
+    const [status, dispatchStatus] = useStatus();
+    const [tz] = useTz();
+
+    const slotButtonRef = useRef();
+
+    const startArray = slot.map(a => a.start);
+    const endArray = slot.map(a => a.end);
+
+    const start = startArray.reduce((prev, current) => {
+        return prev < current ? prev : current;
+    });
+
+    const end = endArray.reduce((prev, current) => {
+        return prev > current ? prev : current;
+    });
+
+    const handleSlotSelection = slot => {
+        const selectedSlot = {
+            start,
+            end,
+            sequence: slot,
+        };
+        dispatchStatus({ type: "SELECT_SLOT", slot: selectedSlot, tzid: tz.selectedTzid.tzid });
+    };
+
+    useEffect(() => {
+        if (status.focusedSlot === start) {
+            slotButtonRef.current.focus();
+        }
+    }, [status.focusedSlot]);
+
+    let classStub = "time-slot";
+    if (status.selected.start === start) classStub = classStub + " time-slot--selected";
+
+    return (
+        <button
+            className={theme.classBuilder(classStub)}
+            onClick={() => handleSlotSelection(slot)}
+            ref={slotButtonRef}
+        >
+            <span className={theme.classBuilder("visually-hidden")}>
+                {i18n.t("select_time_slot")}
+            </span>
+            {i18n.customFormatedTimeZone(
+                moment(start, "YYYY-MM-DDTHH:mm:00Z"),
+                tz.selectedTzid.tzid,
+                "LT"
+            )}
+            {" - "}
+            {i18n.customFormatedTimeZone(
+                moment(end, "YYYY-MM-DDTHH:mm:00Z"),
+                tz.selectedTzid.tzid,
+                "LT"
+            )}{" "}
+            {`(${moment(start, "YYYY-MM-DDTHH:mm:00Z").tz(tz.selectedTzid.tzid).format("z")})`}
+        </button>
+    );
+};
+
+export default SequencedSlotButton;

package/src/js/components/DateTimePicker/SlotsList.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import SlotButton from "./SlotButton";
+import SequencedSlotButton from "./SequencedSlotButton";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useStatus } from "./contexts/status-context";
@@ -14,7 +15,11 @@ const SlotsList = () => {
     const renderSlots = status.daySlots.map((slot, key) => {
         return (
             <li key={key} className={theme.classBuilder("slot-list--item")}>
-                <SlotButton slot={slot} />
+                {status.sequenced_availability ? (
+                    <SequencedSlotButton slot={slot} />
+                ) : (
+                    <SlotButton slot={slot} />
+                )}
             </li>
         );
     });

package/src/js/components/DateTimePicker/Wrapper.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import moment from "moment";
 
-import { getSlots } from "./utils/slots";
+import { getSequencedSlots, getSlots } from "./utils/slots";
 
 import Calendar from "./Calendar";
 import Confirm from "./Confirm";
@@ -31,26 +31,20 @@ const Wrapper = () => {
         }
 
         const fetchMonthSlots = (query, month) => {
-            return getSlots({
+            const fetch = status.sequenced_availability ? getSequencedSlots : getSlots;
+
+            return fetch({
                 query,
                 auth: status.auth,
                 tzid: status.tzid,
-            })
-                .then(res => {
-                    dispatchStatus({
-                        type: "SET_SLOTS",
-                        slots: res,
-                        tzid: tz.selectedTzid.tzid,
-                        month: month,
-                    });
-                })
-                .catch(res => {
-                    dispatchStatus({
-                        type: "ERROR_LOADING_SLOTS",
-                        error: res,
-                        month: month,
-                    });
+            }).then(res => {
+                dispatchStatus({
+                    type: "SET_SLOTS",
+                    slots: res,
+                    tzid: tz.selectedTzid.tzid,
+                    month: month,
                 });
+            });
         };
 
         const currentMonth = status.months.find(m => m.current);
@@ -60,7 +54,15 @@ const Wrapper = () => {
             .then(() => {
                 // Get slots for remianing months
                 const remainingMonths = status.months.filter(month => !month.current);
-                remainingMonths.forEach(month => fetchMonthSlots(month.query, month.month));
+                remainingMonths.forEach(month =>
+                    fetchMonthSlots(month.query, month.month).catch(res => {
+                        dispatchStatus({
+                            type: "ERROR_LOADING_SLOTS",
+                            error: res,
+                            month: month.month,
+                        });
+                    })
+                );
             })
             .catch(error => {
                 dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
@@ -172,7 +174,7 @@ const Wrapper = () => {
 
     return (
         <section className={theme.classBuilder()} style={theme.customProperties}>
-            <Details duration={status.query.required_duration.minutes} locale={status.locale} />
+            <Details duration={status.duration} locale={status.locale} />
             <div className={theme.classBuilder("wrapper")}>
                 <div
                     className={

package/src/js/components/DateTimePicker/contexts/status-reducer.js

@@ -6,6 +6,7 @@ import {
     getAvailableDays,
     getLocalDayFromUtc,
     removeMonthFromLoading,
+    addSequencedSlotsToObject,
 } from "../utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
 
@@ -43,6 +44,7 @@ export const statusReducer = (state, action) => {
                 notification: {
                     type: "error",
                     message: "There was an error getting the slots",
+                    body: action.error.body,
                 },
             };
             state.callback(notification);
@@ -99,18 +101,23 @@ export const statusReducer = (state, action) => {
                 };
             }
 
-            const slotsObject = addSlotsToObject(state.slots, action.slots);
-            const availableDays = getAvailableDays(addSlotsToObject({}, action.slots), action.tzid);
-            const availableDaysSet = new Set([...state.availableDays, ...availableDays]);
+            const slotsObject = state.sequenced_availability
+                ? addSequencedSlotsToObject(state.slots, action.slots)
+                : addSlotsToObject(state.slots, action.slots);
+            const availableDays = getAvailableDays(slotsObject, action.tzid);
             const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
 
+            const injectionPoint = state.sequenced_availability
+                ? getLocalDayFromUtc(action.slots[0].sequence[0].start, action.tzid)
+                : getLocalDayFromUtc(action.slots[0].start, action.tzid);
+
             return {
                 ...state,
-                availableDays: [...availableDaysSet].sort(),
+                availableDays,
                 monthsLoading,
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
-                slotInjectionPoint: getLocalDayFromUtc(action.slots[0].start, action.tzid),
+                slotInjectionPoint: injectionPoint,
             };
         }
 
@@ -123,13 +130,17 @@ export const statusReducer = (state, action) => {
 
         case "SELECT_DAY": {
             const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
-            const focusedSlot = daySlots[0];
+            const focusedSlot = state.sequenced_availability
+                ? daySlots[0]?.reduce((prev, current) => {
+                      return prev.start < current.start ? prev.start : current.start;
+                  })
+                : daySlots[0]?.start;
 
             return {
                 ...state,
                 selectedDay: action.day,
                 focusedDay: action.day,
-                focusedSlot: focusedSlot?.start,
+                focusedSlot: focusedSlot,
                 columnView: "slots",
                 daySlots,
                 populated: true,

package/src/js/components/DateTimePicker/utils/slots.js

@@ -1,6 +1,6 @@
 import moment from "moment-timezone";
 
-import { getAvailability } from "../../../helpers/connections";
+import { getAvailability, getSequencedAvailability } from "../../../helpers/connections";
 import { uniqueItems, humanizeTzName } from "../../../helpers/utils";
 import { errorMessages } from "../../../helpers/logging";
 
@@ -33,6 +33,12 @@ export const getMonthsFromQuery = (periods = [], tzid) => {
     return uniqueMonths;
 };
 
+export const getDurationFromQuery = query => {
+    const duration = query.sequence ? false : query.required_duration.minutes;
+
+    return duration;
+};
+
 export const getMonthsLoadingFromQuery = (query, tzid) => {
     if (!query.query_periods || !query.query_periods.length) {
         return [
@@ -104,7 +110,7 @@ export const getSlots = ({ query, auth, tzid, slots = [] }) =>
         tzid,
         auth.demo
     ).then(res => {
-        if (res.errors) {
+        if (res.status === 422) {
             throw {
                 type: 422,
                 message: errorMessages[422].message,
@@ -142,6 +148,53 @@ export const getSlots = ({ query, auth, tzid, slots = [] }) =>
         });
     });
 
+export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
+    getSequencedAvailability(
+        auth.token,
+        auth.domains.apiDomain,
+        query,
+        "DateTimePicker",
+        tzid,
+        auth.demo
+    ).then(res => {
+        if (res.errors) {
+            throw {
+                type: 422,
+                message: errorMessages[422].message,
+                body: res.errors,
+                docsSlug: errorMessages[422].docsSlug,
+            };
+        }
+        // This will intentionally throw an error if the
+        // result is not in the correct format:
+        const returnedSlots = parseSlotsResult(res);
+
+        const allSlots = [...slots, ...returnedSlots];
+
+        if (returnedSlots.length < 512) return [...slots, ...returnedSlots];
+
+        // If we get here, the API has returned the maximum number
+        // of slots allowed, so we need to crop the query and try
+        // again to ensure we haven't missed any slots.
+
+        const startOfLastSlot = returnedSlots[returnedSlots.length - 1].start;
+        const endOfLastPeriod = query.query_periods[query.query_periods.length - 1].end;
+        const boundsForCropping = {
+            start: startOfLastSlot,
+            end: endOfLastPeriod,
+        };
+        const croppedPeriods = cropPeriodsArbitrarily(query.query_periods, boundsForCropping);
+        const croppedQuery = { ...query, query_periods: croppedPeriods };
+
+        // Rerun the query
+        return getSequencedSlots({
+            query: croppedQuery,
+            auth,
+            tzid,
+            slots: allSlots,
+        });
+    });
+
 export const parseQuery = query => {
     if (!query.bookable_events) {
         return {
@@ -156,6 +209,8 @@ export const parseSlotsResult = res => {
     let returnedSlots;
     if (typeof res.available_bookable_events !== "undefined") {
         returnedSlots = res.available_bookable_events;
+    } else if (typeof res.sequences !== "undefined") {
+        returnedSlots = res.sequences;
     } else {
         returnedSlots = res.available_slots;
 
@@ -209,6 +264,17 @@ export const addSlotsToObject = (slotsObject, newSlotsArray) => {
     return slotsObject;
 };
 
+export const addSequencedSlotsToObject = (slotsObject, newSlotsArray) => {
+    newSlotsArray.forEach(slot => {
+        const startArray = slot.sequence.map(a => a.start);
+        const start = startArray.reduce((prev, current) => {
+            return prev < current ? prev : current;
+        });
+        slotsObject[start] = slot.sequence;
+    });
+    return slotsObject;
+};
+
 export const getSlotsByDay = (slots, day, tzid) => {
     const slotKeys = Object.keys(slots);
     const dayObject = moment.tz(day, "YYYY-MM-DD", tzid);

package/src/js/helpers/connections.js

@@ -268,6 +268,44 @@ export const getAvailability = (
         .catch(catchAndRethrowErrors);
 };
 
+export const getSequencedAvailability = (
+    token,
+    api_domain,
+    params = {},
+    element = "sequenced-availability",
+    tzid = "Etc/UTC",
+    mock = false
+) => {
+    if (
+        (mock && params.response_format === "slots") ||
+        (mock && typeof params.start_interval === "undefined")
+    ) {
+        return mocks.availabilitySlots;
+    }
+    if (mock && params.response_format === "overlapping_slots") {
+        return mocks.availabilityOverlappingSlots(
+            params.start_interval.minutes,
+            params.required_duration.minutes,
+            params.query_periods,
+            tzid
+        );
+    }
+    if (mock) return mocks.availability;
+
+    return fetch(`${api_domain}/v1/sequenced_availability?et=${token}`, {
+        method: "POST",
+        headers: {
+            "Cronofy-Element": `v${packageDetails.version}, ${element}`,
+            "Content-Type": "application/json; charset=utf-8",
+        },
+        body: JSON.stringify(params),
+    })
+        .then(handleInvalidResponses)
+        .then(res => res.json())
+        .then(handle422Responses)
+        .catch(catchAndRethrowErrors);
+};
+
 export const getAvailabilityRules = ({
     token,
     api_domain,

package/src/js/helpers/init.DateTimePicker.js

@@ -72,6 +72,7 @@ export const parseDateTimePickerOptions = (options = {}) => {
     const target = parseTarget(options, "date-time-picker", log);
 
     const isBookableEventsQuery = options.availability_query.bookable_events ? true : false;
+    const isSequencedAvailabilityQuery = options.availability_query.sequence ? true : false;
 
     let query;
     if (options.demo) {
@@ -79,6 +80,9 @@ export const parseDateTimePickerOptions = (options = {}) => {
     } else if (isBookableEventsQuery) {
         query = options.availability_query;
         query = parseWithOverlappingSlots(query);
+    } else if (isSequencedAvailabilityQuery) {
+        query = options.availability_query;
+        query = parseWithOverlappingSlots(query);
     } else {
         query = parseQuery({ options, elementSlug: "date-time-picker", log });
         query = parseWithOverlappingSlots(query);

package/tests/DateTimePicker/SequencedSlotButton.test.js

@@ -0,0 +1,130 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import SequencedSlotButton from "../../src/js/components/DateTimePicker/SequencedSlotButton";
+
+import { I18nProvider } from "../../src/js/contexts/i18n-context";
+import { ThemeProvider } from "../../src/js/components/DateTimePicker/contexts/theme-context";
+import { StatusProvider } from "../../src/js/components/DateTimePicker/contexts/status-context";
+import { TzProvider } from "../../src/js/components/DateTimePicker/contexts/tz-context";
+
+const wrapper = ({ children, status }) => (
+    <ThemeProvider options={{ name: "DTP" }}>
+        <I18nProvider
+            options={{
+                locale: "en",
+                slug: "date_time_picker",
+                tzid: "Europe/London",
+            }}
+        >
+            <TzProvider
+                options={{
+                    selectedTzid: {
+                        tzid: "Europe/London",
+                        offset: "+01:00",
+                        offsetMins: 60,
+                        name: "London",
+                        abbr: "BST",
+                    },
+                    list: [],
+                }}
+            >
+                <StatusProvider
+                    options={{
+                        selected: false,
+                        ...status,
+                    }}
+                >
+                    {children}
+                </StatusProvider>
+            </TzProvider>
+        </I18nProvider>
+    </ThemeProvider>
+);
+
+describe("SequencedSlotButton", () => {
+    const slot = [
+        { sequence_id: "test-1", start: "2022-10-05T09:30:00Z", end: "2022-10-05T10:00:00Z" },
+        { sequence_id: "test-2", start: "2022-10-05T10:30:00Z", end: "2022-10-05T11:00:00Z" },
+    ];
+
+    it("displays slot button with correct start and end time", () => {
+        const { container } = render(<SequencedSlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector(".DTP__time-slot");
+
+        expect(button).toBeInTheDocument();
+        expect(button.innerHTML).toEqual(expect.stringContaining("10:30 AM - 12:00 PM (BST)"));
+    });
+
+    it("displays slot button with time in BST", () => {
+        const { container } = render(<SequencedSlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector(".DTP__time-slot");
+
+        expect(button).toBeInTheDocument();
+        expect(button.innerHTML).toEqual(expect.stringContaining("10:30 AM - 12:00 PM (BST)"));
+    });
+
+    it("displays slot button with time in GMT", () => {
+        const slot = [
+            { sequence_id: "test-1", start: "2022-11-05T09:30:00Z", end: "2022-11-05T10:00:00Z" },
+            { sequence_id: "test-2", start: "2022-11-05T10:30:00Z", end: "2022-11-05T11:00:00Z" },
+        ];
+        const { container } = render(<SequencedSlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector(".DTP__time-slot");
+
+        expect(button).toBeInTheDocument();
+        expect(button.innerHTML).toEqual(expect.stringContaining("9:30 AM - 11:00 AM (GMT)"));
+    });
+
+    it("focuses if slot start time matches status.focusedSlot", () => {
+        const status = {
+            focusedSlot: "2022-10-05T09:30:00Z",
+            selected: false,
+        };
+
+        const { container } = render(<SequencedSlotButton slot={slot} />, {
+            wrapper: e => wrapper({ ...e, status }),
+        });
+
+        const button = container.querySelector("button");
+
+        expect(button).toHaveFocus();
+    });
+
+    it("sets the slot to selected when button is clicked", () => {
+        const { container } = render(<SequencedSlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector("button");
+
+        expect(button).not.toHaveClass("DTP_time-slot--selected");
+
+        fireEvent.click(button);
+
+        expect(button).toHaveFocus();
+        expect(button.classList).toContain("DTP__time-slot--selected");
+    });
+
+    it("shows selected className if preselected slot exists", () => {
+        const status = {
+            focusedSlot: "2022-10-05T09:30:00Z",
+            selected: {
+                start: "2022-10-05T09:30:00Z",
+                end: "2022-10-05T11:00:00Z",
+                sequence: slot,
+            },
+        };
+
+        const { container } = render(<SequencedSlotButton slot={slot} />, {
+            wrapper: e => wrapper({ ...e, status }),
+        });
+
+        const button = container.querySelector("button");
+
+        expect(button).toHaveFocus();
+        expect(button).toHaveClass("DTP__time-slot--selected");
+    });
+});