cronofy-elements 1.42.1 → 1.45.0

package/src/js/components/AvailabilityRules/utils/tz-utils.js

@@ -0,0 +1,44 @@
+import moment from "moment-timezone";
+import { humanizeTzName } from "../../../helpers/utils";
+import { defaultTimeZones } from "../../../helpers/tz-list";
+
+export const createTzObject = tzid => {
+    const name = humanizeTzName(tzid);
+
+    const zone = moment.tz(tzid);
+
+    return {
+        tzid: tzid,
+        offset: zone.format("Z"),
+        offsetMins: zone.utcOffset(),
+        name: name,
+        abbr: zone.zoneAbbr(),
+    };
+};
+
+export const parseTzList = (timezones, tzid) => {
+    const tzList = timezones ? timezones : moment.tz.names();
+    const filtered = timezones ? timezones : tzList.filter(item => defaultTimeZones.includes(item));
+
+    const result = [];
+
+    filtered.map(tz => {
+        const item = createTzObject(tz);
+        result.push(item);
+    });
+
+    const isInList = result.findIndex(item => tzid === item.tzid);
+
+    if (isInList <= -1) {
+        const item = createTzObject(tzid);
+        result.push(item);
+    }
+
+    result.sort((tzA, tzB) => tzA.offsetMins - tzB.offsetMins);
+    return result;
+};
+
+export const getInitialSelectedTzid = (tzList, tzid) => {
+    const result = tzList.find(tz => tzid === tz.tzid);
+    return result;
+};

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

@@ -14,7 +14,7 @@ import DayHeadings from "./DayHeadings";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
 const Calendar = () => {
     const [status, dispatchStatus] = useStatus();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const CalendarHeader = () => {
     const i18n = useI18n();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const Confirm = ({ confirmButtonRef }) => {
     const i18n = useI18n();

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";
 
@@ -17,7 +18,7 @@ import { I18nProvider } from "../../contexts/i18n-context";
 import { LogProvider } from "../../contexts/log-context";
 import { ThemeProvider } from "./contexts/theme-context";
 import { StatusProvider } from "./contexts/status-context";
-import { TzProvider } from "./contexts/tz-context";
+import { TzProvider } from "../../contexts/tz-context";
 
 const DateTimePicker = ({ options }) => {
     const statusOptions = useMemo(() => {
@@ -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/DayButton.js

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const DayButton = ({ day, selected = false, focused = false }) => {
     const i18n = useI18n();

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

@@ -2,11 +2,14 @@ import React, { memo } from "react";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useTheme } from "./contexts/theme-context";
-import TimeZoneSelector from "./TimeZoneSelector";
+import TimeZoneSelector from "../generic/TimeZoneSelector";
+
+import { useTz } from "../../contexts/tz-context";
 
 const Details = ({ duration, locale }) => {
     const i18n = useI18n();
     const theme = useTheme();
+    const [tz, setTz] = useTz();
 
     return (
         <div className={theme.classBuilder("details")}>
@@ -14,12 +17,14 @@ const Details = ({ duration, locale }) => {
                 <p className={theme.classBuilder("details--tz-label")}>
                     <strong>{i18n.t("time_zone")}:</strong>
                 </p>
-                <TimeZoneSelector locale={locale} />
+                <TimeZoneSelector locale={locale} theme={theme} tz={tz} setTz={setTz} />
             </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/SlotButton.js

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const SlotButton = ({ slot }) => {
     const i18n = useI18n();

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";
@@ -14,7 +14,7 @@ import SlotsList from "./SlotsList";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
 const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();
@@ -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);
@@ -66,6 +68,12 @@ export const statusReducer = (state, action) => {
         }
 
         case "NO_SLOTS_FOUND": {
+            const notification = {
+                notification: {
+                    type: "no_slots_found",
+                },
+            };
+            state.callback(notification);
             return { ...state, columnView: "no-slots" };
         }
 
@@ -99,18 +107,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 +136,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,10 +1,10 @@
 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";
+import { defaultTimeZones } from "../../../helpers/tz-list";
 
 export const getMonthsCoveredByPeriod = (period, tzid) => {
     const start = moment
@@ -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/components/{DateTimePicker → generic}/TimeZoneSelector.js

@@ -1,14 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useTheme } from "./contexts/theme-context";
-
 import { tzi18n } from "../../helpers/i18n";
-import { useTz } from "./contexts/tz-context";
-
-const TimeZoneSelector = ({ locale }) => {
-    const theme = useTheme();
-    const [tz, setTz] = useTz();
 
+const TimeZoneSelector = ({ locale, theme, tz, setTz }) => {
     const [showList, setShowList] = useState(() => false);
     const [focused, setFocused] = useState(() => false);
 
@@ -31,27 +25,26 @@ const TimeZoneSelector = ({ locale }) => {
     };
 
     const handleKeyDown = e => {
+        const list = tz.list;
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
-                const nextFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) + 1;
-                const nextItem =
-                    nextFocusedItemIndex > tz.list.length - 1 ? 0 : nextFocusedItemIndex;
+                const nextFocusedItemIndex = list.findIndex(item => focused === item.tzid) + 1;
+                const nextItem = nextFocusedItemIndex > list.length - 1 ? 0 : nextFocusedItemIndex;
 
-                setFocused(tz.list[nextItem].tzid);
+                setFocused(list[nextItem].tzid);
 
                 break;
             case "ArrowUp":
                 e.preventDefault();
-                const prevFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) - 1;
-                const prevItem =
-                    prevFocusedItemIndex < 0 ? tz.list.length - 1 : prevFocusedItemIndex;
+                const prevFocusedItemIndex = list.findIndex(item => focused === item.tzid) - 1;
+                const prevItem = prevFocusedItemIndex < 0 ? list.length - 1 : prevFocusedItemIndex;
 
-                setFocused(tz.list[prevItem].tzid);
+                setFocused(list[prevItem].tzid);
 
                 break;
             case "Enter":
-                const tz = tz.list.find(item => focused === item.tzid);
+                const tz = list.find(item => focused === item.tzid);
                 handleOptionSelect(tz);
                 break;
             case "Escape":

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);