cronofy-elements 1.40.2 → 1.43.0

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

@@ -1,11 +1,14 @@
+import moment from "moment-timezone";
+
 import {
     addSlotsToObject,
-    getFirstAvailableDay,
     getSlotsByDay,
     getAvailableDays,
     getLocalDayFromUtc,
+    removeMonthFromLoading,
+    addSequencedSlotsToObject,
 } from "../utils/slots";
-import { parseTimeSlots } from "../utils/calendar";
+import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
 
 export const statusReducer = (state, action) => {
     const { type, ...actionBody } = action;
@@ -41,12 +44,29 @@ export const statusReducer = (state, action) => {
                 notification: {
                     type: "error",
                     message: "There was an error getting the slots",
+                    body: action.error.body,
                 },
             };
             state.callback(notification);
             return { ...state, error: action.error, columnView: "error" };
         }
 
+        case "ERROR_LOADING_SLOTS": {
+            const notification = {
+                notification: {
+                    type: "error",
+                    message:
+                        "There was a problem with your availability query. Slots for the month of " +
+                        action.month +
+                        " could not be loaded.",
+                    body: action.error.body,
+                },
+            };
+            const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+            state.callback(notification);
+            return { ...state, monthsLoading };
+        }
+
         case "NO_SLOTS_FOUND": {
             return { ...state, columnView: "no-slots" };
         }
@@ -54,6 +74,9 @@ export const statusReducer = (state, action) => {
         case "RECALCULATE_MONTH_VIEW": {
             const monthlyView = {
                 month: state.monthlyView.month,
+                hasNext: state.monthlyView.hasNext,
+                hasPrev: state.monthlyView.hasPrev,
+                monthsInView: state.monthlyView.monthsInView,
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: state.monthlyView.month,
@@ -70,38 +93,31 @@ export const statusReducer = (state, action) => {
 
         case "SET_SLOTS": {
             if (!action.slots.length > 0) {
-                return state;
+                const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+                return {
+                    ...state,
+                    monthsLoading,
+                    slotFetchCount: state.slotFetchCount + 1,
+                };
             }
 
-            const slotsObject = addSlotsToObject(state.slots, action.slots);
-
-            let daySlots = state.daySlots;
-            let columnView = state.columnView;
-            let focusedDay = state.focusedDay;
-            let selectedDay = state.selectedDay;
-            let availableDays = getAvailableDays(addSlotsToObject({}, action.slots), action.tzid);
+            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 availableDaysSet = new Set([...state.availableDays, ...availableDays]);
-            availableDays = [...availableDaysSet].sort();
-
-            if (!state.selectedDay) {
-                columnView = "slots";
-                focusedDay = availableDays[0];
-                selectedDay = availableDays[0];
-                daySlots = getSlotsByDay(slotsObject, selectedDay, action.tzid);
-            }
+            const injectionPoint = state.sequenced_availability
+                ? getLocalDayFromUtc(action.slots[0].sequence[0].start, action.tzid)
+                : getLocalDayFromUtc(action.slots[0].start, action.tzid);
 
             return {
                 ...state,
-                daySlots,
-                columnView,
-                focusedDay,
-                selectedDay,
                 availableDays,
-
+                monthsLoading,
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
-                slotInjectionPoint: getLocalDayFromUtc(action.slots[0].start, action.tzid),
+                slotInjectionPoint: injectionPoint,
             };
         }
 
@@ -114,26 +130,46 @@ export const statusReducer = (state, action) => {
 
         case "SELECT_DAY": {
             const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
+            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: daySlots[0].start,
+                focusedSlot: focusedSlot,
                 columnView: "slots",
                 daySlots,
                 populated: true,
             };
         }
         case "SELECT_MONTH": {
+            const actionMonthObject = moment(action.month, "YYYY-MM");
+
+            if (
+                !actionMonthObject.isBetween(
+                    state.startDateObject,
+                    state.endDateObject,
+                    "month",
+                    "[]"
+                )
+            ) {
+                return state;
+            }
+
             const months = state.months.map(month => ({
                 ...month,
                 current: month.month === action.month,
             }));
 
-            let focusedDay = action.focusedDay ?? false;
-
             const monthlyView = {
                 month: action.month,
+                hasNext: actionMonthObject.isBefore(state.endDateObject, "month"),
+                hasPrev: actionMonthObject.isAfter(state.startDateObject, "month"),
+                monthsInView: getMonthsInDisplay(action.month, state.startDay),
                 days: parseTimeSlots({
                     tzid: action.tzid,
                     slots: state.slots,
@@ -142,6 +178,8 @@ export const statusReducer = (state, action) => {
                 }),
             };
 
+            let focusedDay = action.focusedDay ?? false;
+
             return {
                 ...state,
                 months,
@@ -170,6 +208,9 @@ export const statusReducer = (state, action) => {
 
             const monthlyView = {
                 month: state.monthlyView.month,
+                hasNext: state.monthlyView.hasNext,
+                hasPrev: state.monthlyView.hasPrev,
+                monthsInView: state.monthlyView.monthsInView,
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: state.monthlyView.month,

package/src/js/components/DateTimePicker/scss/_components.loading.scss

@@ -24,3 +24,13 @@
         animation: spin infinite linear 1s;
     }
 }
+
+.DTP__calendar-loading {
+  margin-top: 1rem;
+  svg {
+    width: 1em;
+    height: 1em;
+    animation: spin infinite linear 1s;
+    margin-right: 1rem;
+  }
+}

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

@@ -92,6 +92,29 @@ export const getDatesInMonthDisplay = (month, availableDays, startDay) => {
     return rows;
 };
 
+export const getMonthsInDisplay = (month, startDay) => {
+    const monthObject = moment(month, "YYYY-MM");
+    const daysInMonth = monthObject.daysInMonth();
+    const offset = weekDayOffset(monthObject, startDay);
+
+    const result = [month];
+    const daysLength = daysInMonth + offset;
+
+    //Add prev month if in display...
+    if (offset > 0) {
+        const prevMonth = monthObject.clone().add(-1, "months").format("YYYY-MM");
+        result.push(prevMonth);
+    }
+
+    // Add next month if in display
+    if (daysLength < 42) {
+        const nextMonth = monthObject.clone().add(1, "months").format("YYYY-MM");
+        result.push(nextMonth);
+    }
+
+    return result;
+};
+
 export const parseTimeSlots = ({ slots, month, tzid, startDay }) => {
     //Get array of available days
     const availableDays = getAvailableDays(slots, tzid);

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

@@ -1,7 +1,8 @@
 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";
 
 import { defaultTimeZones } from "./tz-list";
 
@@ -21,7 +22,7 @@ export const getMonthsCoveredByPeriod = (period, tzid) => {
     return months;
 };
 
-export const getMonthsFromQuery = (periods, tzid) => {
+export const getMonthsFromQuery = (periods = [], tzid) => {
     const months = periods
         .map(period => getMonthsCoveredByPeriod(period, tzid))
         // getMonthsCoveredByPeriod returns an array, so flatten them...
@@ -32,6 +33,40 @@ 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 [
+            {
+                month: moment.tz().format("YYYY-MM"),
+                loading: true,
+            },
+        ];
+    }
+    const monthStrings = getMonthsFromQuery(query.query_periods, tzid);
+    const monthObjects = monthStrings.map(month => {
+        return {
+            month,
+            loading: true,
+        };
+    });
+    return monthObjects;
+};
+
+export const removeMonthFromLoading = (monthsLoading, month) => {
+    const monthPos = monthsLoading.findIndex(m => m.month === month);
+    const newMonthsLoading = [...monthsLoading];
+    if (monthsLoading && monthPos >= 0) {
+        newMonthsLoading[monthPos]["loading"] = false;
+    }
+    return newMonthsLoading;
+};
+
 export const getCurrentMonth = query => ({
     month: moment.tz().format("YYYY-MM"),
     current: true,
@@ -42,9 +77,17 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
     if (!query.query_periods || !query.query_periods.length) {
         return [getCurrentMonth()];
     }
+
     const monthStrings = getMonthsFromQuery(query.query_periods, tzid);
-    const currentMonth = current ? current : monthStrings[0];
-    const monthObjects = monthStrings.map(month => {
+    const startMonth = moment(monthStrings[0], "YYYY-MM");
+    const endMonth = moment(monthStrings[monthStrings.length - 1], "YYYY-MM");
+
+    const currentMonth =
+        current && moment(current, "YYYY-MM").isBetween(startMonth, endMonth, "month", "[]")
+            ? current
+            : monthStrings[0];
+
+    return monthStrings.map(month => {
         const croppedQueryPeriods = cropPeriodsByMonth(query.query_periods, month, tzid);
         return {
             month,
@@ -56,7 +99,6 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
             },
         };
     });
-    return monthObjects;
 };
 
 export const getSlots = ({ query, auth, tzid, slots = [] }) =>
@@ -68,6 +110,14 @@ export const getSlots = ({ query, auth, tzid, slots = [] }) =>
         tzid,
         auth.demo
     ).then(res => {
+        if (res.status === 422) {
+            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);
@@ -98,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 {
@@ -112,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;
 
@@ -165,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

@@ -1,3 +1,5 @@
+import moment from "moment-timezone";
+
 import {
     parseConnectionDomains,
     parseQuery,
@@ -8,6 +10,12 @@ import {
     validateLocaleModifiers,
 } from "./init";
 import { logConstructor } from "./logging";
+import { queryForDateTimePicker } from "./mocks";
+
+import {
+    getMonthsFromQuery,
+    parseQuery as parseWithOverlappingSlots,
+} from "../components/DateTimePicker/utils/slots";
 
 export const parseDateTimePickerOptions = (options = {}) => {
     const config = typeof options.config === "undefined" ? {} : options.config;
@@ -64,12 +72,20 @@ 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 (isBookableEventsQuery) {
+    if (options.demo) {
+        query = queryForDateTimePicker;
+    } 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);
     }
 
     const tzid = parseTimezone(options.tzid, "date-time-picker", log);
@@ -93,6 +109,44 @@ export const parseDateTimePickerOptions = (options = {}) => {
         });
     }
 
+    let selectedDate = config.selected_date;
+    if (typeof selectedDate !== "undefined") {
+        const validDate = moment(selectedDate, "YYYY-MM-DD", true).isValid();
+
+        if (!validDate) {
+            log.warn(
+                `The provided date ${selectedDate} is not valid. Please ensure it's formatted like "YYYY-MM-DD". Picking the first available date as starting date.`,
+                {
+                    docsSlug: "#config.start_date",
+                }
+            );
+
+            selectedDate = undefined;
+        }
+    }
+
+    const months = getMonthsFromQuery(query?.query_periods, tzid.tzid);
+    const selectedDateMoment = selectedDate && moment(selectedDate, "YYYY-MM-DD");
+
+    let startDateMoment = months.length
+        ? moment(months[0], "YYYY-MM").startOf("month")
+        : moment().startOf("month");
+
+    if (selectedDateMoment?.isBefore(startDate)) {
+        startDateMoment = selectedDateMoment;
+    }
+
+    let endDateMoment = months.length
+        ? moment(months[months.length - 1], "YYYY-MM").endOf("month")
+        : moment().endOf("month");
+
+    if (selectedDateMoment?.isAfter(endDateMoment)) {
+        endDateMoment = selectedDateMoment;
+    }
+
+    const startDate = startDateMoment.format("YYYY-MM-DD");
+    const endDate = endDateMoment.format("YYYY-MM-DD");
+
     delete options.availability_query;
     delete options.element_token;
     delete options.target_id;
@@ -107,7 +161,16 @@ export const parseDateTimePickerOptions = (options = {}) => {
         token,
         domains,
         query,
-        config: { ...config, mode, logs, startDay, tzList },
+        config: {
+            ...config,
+            mode,
+            logs,
+            startDay,
+            selectedDate,
+            startDate,
+            endDate,
+            tzList,
+        },
         translations,
         log,
     };

package/src/js/translations/en/date_time_picker.json

@@ -4,6 +4,7 @@
         "confirm": "Confirm",
         "confirm_slot_title": "Confirm time",
         "duration_label": "Duration",
+        "loading_calendar": "Loading Available Days",
         "minutes": "minutes",
         "nav_previous_month": "navigate to previous month",
         "nav_next_month": "navigate to next month",

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");
+    });
+});