cronofy-elements 1.45.0 → 1.46.0

package/demo/date-time-picker.ejs

@@ -136,15 +136,10 @@
                             ]
                         }
                     ],
-                    required_duration: { minutes: 60 },
+                    required_duration: { minutes: 15 },
                     //start_interval: { minutes: 15 },
                     query_periods: [
-                        { start: slotTimes(31,"03:00"), end: slotTimes(31,"12:00") },
-                        { start: slotTimes(32,"09:00"), end: slotTimes(32,"13:00") },
-                        { start: slotTimes(32,"14:00"), end: slotTimes(32,"17:00") },
-                        { start: slotTimes(35,"09:00"), end: slotTimes(35,"13:00") },
-                        { start: slotTimes(36,"14:00"), end: slotTimes(36,"17:00") },
-                        { start: slotTimes(38,"09:00"), end: slotTimes(65,"22:00") }
+                        { start: slotTimes(31,"03:00"), end: slotTimes(150,"12:00") },
                     ]
                 },
                 // tzid: "America/Mexico_City",

package/package.json

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

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

@@ -5,7 +5,6 @@ import {
     getMonthObjectsFromQuery,
     parseTzList,
     getInitialSelectedTzid,
-    getMonthsLoadingFromQuery,
     getDurationFromQuery,
 } from "./utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
@@ -37,7 +36,6 @@ const DateTimePicker = ({ options }) => {
         const startDateObject = moment(options.config.startDate, "YYYY-MM-DD");
         const currentMonthObject = selectedDateObject ?? startDateObject;
         const currentMonth = currentMonthObject.format("YYYY-MM");
-        const monthsLoading = getMonthsLoadingFromQuery(options.query, options.tzid);
         const monthsInView = getMonthsInDisplay(currentMonth, options.config.startDay);
 
         const monthlyView = {
@@ -70,7 +68,6 @@ const DateTimePicker = ({ options }) => {
             query: options.query,
             months,
             monthlyView,
-            monthsLoading,
             selected: false,
             startDay: options.config.startDay,
             focusedDay: options.config.selectedDay,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import moment from "moment";
 
-import { getSequencedSlots, getSlots } from "./utils/slots";
+import { cropPeriodsArbitrarily, getSlots } from "./utils/slots";
 
 import Calendar from "./Calendar";
 import Confirm from "./Confirm";
@@ -24,51 +24,109 @@ const Wrapper = () => {
     const [loadingCalendar, setLoadingCalendar] = useState(true);
 
     const confirmButtonRef = useRef();
+    const firstRender = useRef(true);
 
-    useEffect(() => {
-        if (!status.query.query_periods) {
-            return;
-        }
-
-        const fetchMonthSlots = (query, month) => {
-            const fetch = status.sequenced_availability ? getSequencedSlots : getSlots;
+    const fetchMonthSlots = (query, month) => {
+        return getSlots({
+            query,
+            auth: status.auth,
+            tzid: status.tzid,
+            sequence: status.sequenced_availability,
+        })
+            .then(res => {
+                if (res.length < 512) {
+                    dispatchStatus({
+                        type: "SET_SLOTS",
+                        slots: res,
+                        tzid: tz.selectedTzid.tzid,
+                        month,
+                    });
+                    return;
+                }
 
-            return fetch({
-                query,
-                auth: status.auth,
-                tzid: status.tzid,
-            }).then(res => {
                 dispatchStatus({
                     type: "SET_SLOTS",
                     slots: res,
                     tzid: tz.selectedTzid.tzid,
-                    month: month,
                 });
+
+                // 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 = res[res.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 fetchMonthSlots(croppedQuery, month);
+            })
+            .catch(error => {
+                if (error.type === 422) {
+                    dispatchStatus({
+                        type: "ERROR_LOADING_SLOTS",
+                        error,
+                        month,
+                    });
+                    return;
+                }
+                dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
             });
-        };
+    };
+
+    useEffect(() => {
+        if (!status.query.query_periods) {
+            return;
+        }
 
         const currentMonth = status.months.find(m => m.current);
 
+        const croppedMonths = status.months.filter(el => {
+            return status.monthlyView.monthsInView.some(f => {
+                return f === el.month && el.loading && !el.current;
+            });
+        });
+
         // Get slots for current month
         fetchMonthSlots(currentMonth.query, currentMonth.month)
             .then(() => {
-                // Get slots for remianing months
-                const remainingMonths = status.months.filter(month => !month.current);
-                remainingMonths.forEach(month =>
-                    fetchMonthSlots(month.query, month.month).catch(res => {
-                        dispatchStatus({
-                            type: "ERROR_LOADING_SLOTS",
-                            error: res,
-                            month: month.month,
-                        });
-                    })
-                );
+                // Get slots for remaining months
+                croppedMonths.forEach(month => fetchMonthSlots(month.query, month.month));
             })
             .catch(error => {
                 dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
             });
     }, []);
 
+    useEffect(() => {
+        //stops this from firing on first render which would double up the initial API calls
+        if (firstRender.current) {
+            firstRender.current = false;
+            return;
+        }
+        if (status.monthlyView.monthsInView) {
+            //check if any of the months in view haven't been fetched yet
+            const croppedMonths = status.months.filter(el => {
+                return status.monthlyView.monthsInView.some(f => {
+                    return f === el.month && el.loading === true;
+                });
+            });
+            //if they haven't, fetch them.
+            if (croppedMonths.length > 0) {
+                croppedMonths.forEach(month => fetchMonthSlots(month.query, month.month));
+            }
+        }
+    }, [status.monthlyView.monthsInView]);
+
     useEffect(() => {
         if (!status.slotInjectionPoint) {
             return;
@@ -97,6 +155,15 @@ const Wrapper = () => {
         const finishedCallingAllSlots = fetchCount === monthsCount;
         const hasAvailableDays = status.availableDays.length;
 
+        // No slots found but not all months called so try the next month
+        if (!finishedCallingAllSlots && !hasAvailableDays && fetchCount >= 2) {
+            const croppedMonths = status.months.filter(el => {
+                return el.loading === true;
+            });
+            fetchMonthSlots(croppedMonths[0].query, croppedMonths[0].month);
+            return;
+        }
+
         // No slots available after all queries have been made
         if (finishedCallingAllSlots && !hasAvailableDays) {
             dispatchStatus({ type: "NO_SLOTS_FOUND" });
@@ -117,15 +184,25 @@ const Wrapper = () => {
             return;
         }
 
-        // For allowing only this to be called once
+        // For allowing only this to be called once slots have been fetched
         // Since we know the first month that is being fetched will be for the initial selected day
-        if (status.selectedDay && fetchCount === 1) {
-            dispatchStatus({
-                type: "SELECT_DAY",
-                day: status.selectedDay,
-                tzid: tz.selectedTzid.tzid,
-            });
-            return;
+        if (status.selectedDay && fetchCount >= 1) {
+            const currentMonth = moment(status.selectedDay, "YYYY-MM-DD").format("YYYY-MM");
+            const month = status.months.filter(el => {
+                return el.month === currentMonth;
+            })[0];
+            const monthStillLoading = month ? month.loading : false;
+            const dayIsAvailable = status.availableDays.includes(status.selectedDay);
+
+            //Only set the selectedDay if the month is finished loading or if the day has slots available
+            if (!monthStillLoading || dayIsAvailable) {
+                dispatchStatus({
+                    type: "SELECT_DAY",
+                    day: status.selectedDay,
+                    tzid: tz.selectedTzid.tzid,
+                });
+                return;
+            }
         }
     }, [status.slotFetchCount, status.availableDays]);
 
@@ -159,9 +236,9 @@ const Wrapper = () => {
     }, [tz.selectedTzid.tzid]);
 
     useEffect(() => {
-        if (status.monthsLoading) {
+        if (status.months) {
             for (let month of status.monthlyView.monthsInView) {
-                const monthLoading = status.monthsLoading.find(m => m.month === month);
+                const monthLoading = status.months.find(m => m.month === month);
                 if (monthLoading && monthLoading.loading) {
                     setLoadingCalendar(true);
                     return;
@@ -170,7 +247,7 @@ const Wrapper = () => {
                 }
             }
         }
-    }, [status.monthlyView, status.monthsLoading]);
+    }, [status.monthlyView, status.months]);
 
     return (
         <section className={theme.classBuilder()} style={theme.customProperties}>

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

@@ -9,6 +9,7 @@ import {
     addSequencedSlotsToObject,
 } from "../utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
+import { uniqueItems } from "../../../helpers/utils";
 
 export const statusReducer = (state, action) => {
     const { type, ...actionBody } = action;
@@ -62,9 +63,9 @@ export const statusReducer = (state, action) => {
                     body: action.error.body,
                 },
             };
-            const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+            const months = removeMonthFromLoading(state.months, action.month);
             state.callback(notification);
-            return { ...state, monthsLoading };
+            return { ...state, months };
         }
 
         case "NO_SLOTS_FOUND": {
@@ -99,19 +100,39 @@ export const statusReducer = (state, action) => {
 
         case "SET_SLOTS": {
             if (!action.slots.length > 0) {
-                const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+                const months = removeMonthFromLoading(state.months, action.month);
                 return {
                     ...state,
-                    monthsLoading,
+                    months,
                     slotFetchCount: state.slotFetchCount + 1,
                 };
             }
 
+            // Add action slots to state slots
             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);
+
+            // since we already know the available days for state slots
+            // find available days for action.slots and add them to state availableDays
+            // this way we don't have to loop through the entirety of the state slotsObject
+            // every time new slots are rendered
+            const actionSlotsObject = state.sequenced_availability
+                ? addSequencedSlotsToObject({}, action.slots)
+                : addSlotsToObject({}, action.slots);
+
+            const availableDays = uniqueItems([
+                ...state.availableDays,
+                ...getAvailableDays(actionSlotsObject, action.tzid),
+            ]).sort();
+
+            // if month is passed in, we render that month as done
+            // this change is for continiously loading slots as opposed to waiting for entire month
+            // to be loaded
+            let months = state.months;
+            if (action.month) {
+                months = removeMonthFromLoading(state.months, action.month);
+            }
 
             const injectionPoint = state.sequenced_availability
                 ? getLocalDayFromUtc(action.slots[0].sequence[0].start, action.tzid)
@@ -120,7 +141,7 @@ export const statusReducer = (state, action) => {
             return {
                 ...state,
                 availableDays,
-                monthsLoading,
+                months,
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
                 slotInjectionPoint: injectionPoint,

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

@@ -92,6 +92,7 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
         return {
             month,
             current: currentMonth === month,
+            loading: true,
             query: {
                 ...query,
                 query_periods: croppedQueryPeriods,
@@ -101,55 +102,10 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
     });
 };
 
-export const getSlots = ({ query, auth, tzid, slots = [] }) =>
-    getAvailability(
-        auth.token,
-        auth.domains.apiDomain,
-        query,
-        "DateTimePicker",
-        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);
-
-        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 getSlots({
-            query: croppedQuery,
-            auth,
-            tzid,
-            slots: allSlots,
-        });
-    });
+export const getSlots = ({ query, auth, tzid, sequence = false }) => {
+    const availabilityFetch = sequence ? getSequencedAvailability : getAvailability;
 
-export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
-    getSequencedAvailability(
+    return availabilityFetch(
         auth.token,
         auth.domains.apiDomain,
         query,
@@ -157,7 +113,7 @@ export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
         tzid,
         auth.demo
     ).then(res => {
-        if (res.errors) {
+        if (res.status === 422) {
             throw {
                 type: 422,
                 message: errorMessages[422].message,
@@ -167,33 +123,9 @@ export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
         }
         // 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,
-        });
+        return parseSlotsResult(res);
     });
+};
 
 export const parseQuery = query => {
     if (!query.bookable_events) {