cronofy-elements 1.45.0 → 1.48.0

package/demo/date-time-picker.ejs

@@ -49,6 +49,7 @@
                 sequence: [
                 {
                     sequence_id: "test",
+                    sequence_title: "Test Event One",
                     ordinal: 1,
                     participants: [
                           {
@@ -66,6 +67,7 @@
                   },
                   {
                     sequence_id: "test-1",
+                    sequence_title: "Test Event Two",
                     ordinal: 2,
                     participants: [
                           {
@@ -86,31 +88,7 @@
                           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") }
@@ -136,15 +114,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",
@@ -156,6 +129,7 @@
                 },
                 config: {
                     logs: 'info',
+                    //slot_button_mode: 'detailed' //summary | detailed
                     //selected_date: "2022-05-15"
                     //mode: 'no_confirm'
                     // week_start_day: "tuesday"

package/package.json

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

package/src/js/components/AvailabilityRules/Wrapper.js

@@ -115,17 +115,7 @@ const Wrapper = ({ options }) => {
         const allSlots = { ...slots, ...newSlots };
         setSlots(allSlots);
         const newRules = buildNewRules(allSlots);
-        const callbackContent = {
-            notification: {
-                type: "availability_rule_edited",
-            },
-            availability_rule: {
-                ...account,
-                calendar_ids: calendars.active,
-                weekly_periods: newRules,
-            },
-        };
-        status.callback(callbackContent);
+        setRules(newRules);
     };
 
     useEffect(() => {
@@ -148,7 +138,6 @@ const Wrapper = ({ options }) => {
 
     useEffect(() => {
         if (!status.loading && !status.error) {
-            const newRules = buildNewRules(slots);
             const callbackContent = {
                 notification: {
                     type: "availability_rule_edited",
@@ -156,12 +145,12 @@ const Wrapper = ({ options }) => {
                 availability_rule: {
                     ...account,
                     calendar_ids: calendars.active,
-                    weekly_periods: newRules,
+                    weekly_periods: rules,
                 },
             };
             status.callback(callbackContent);
         }
-    }, [calendars]);
+    }, [calendars, account, rules]);
 
     useEffect(() => {
         // Query the API for rules and calendars, but don't do anything until
@@ -295,10 +284,7 @@ const Wrapper = ({ options }) => {
     }, [tz.selectedTzid.tzid]);
 
     const generateRules = () => {
-        const newRules = buildNewRules(slots);
-
-        setRules(newRules);
-        const rulesRequest = { ...account, weekly_periods: newRules };
+        const rulesRequest = { ...account, weekly_periods: rules };
 
         let tempStatus = status;
 

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import moment from "moment-timezone";
 
 import { useI18n } from "../../contexts/i18n-context";
@@ -12,6 +12,12 @@ const Confirm = ({ confirmButtonRef }) => {
     const theme = useTheme();
     const [tz] = useTz();
 
+    const [sequenceTitlePresent, setSequenceTitlePresent] = useState(
+        () =>
+            status.selected.sequence &&
+            status.selected.sequence.every(obj => Object.keys(obj).includes("sequence_title"))
+    );
+
     const handleCancel = () => {
         dispatchStatus({ type: "CANCEL_SLOT_SELECTION" });
     };
@@ -52,6 +58,36 @@ const Confirm = ({ confirmButtonRef }) => {
                     )}{" "}
                     {`(${moment.tz(tz.selectedTzid.tzid).format("z")})`}
                 </p>
+                {status.selected.sequence && sequenceTitlePresent && (
+                    <dl className={theme.classBuilder("confirm-details--sequence")}>
+                        {status.selected.sequence.map((slot, k) => (
+                            <div key={k}>
+                                <dt
+                                    className={theme.classBuilder(
+                                        "confirm-details--sequence-title"
+                                    )}
+                                >
+                                    {slot.sequence_title}
+                                </dt>
+                                <dd
+                                    className={theme.classBuilder("confirm-details--sequence-time")}
+                                >
+                                    {i18n.customFormatedTimeZone(
+                                        moment(slot.start, "YYYY-MM-DDTHH:mm:00Z"),
+                                        tz.selectedTzid.tzid,
+                                        "LT"
+                                    )}
+                                    {" - "}
+                                    {i18n.customFormatedTimeZone(
+                                        moment(slot.end, "YYYY-MM-DDTHH:mm:00Z"),
+                                        tz.selectedTzid.tzid,
+                                        "LT"
+                                    )}
+                                </dd>
+                            </div>
+                        ))}
+                    </dl>
+                )}
             </div>
             <button
                 className={theme.classBuilder("confirm-button")}

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,
@@ -81,6 +78,7 @@ const DateTimePicker = ({ options }) => {
             availableDays: [],
             sequenced_availability: options.query.sequence ? true : false,
             slots: {},
+            slotButtonMode: options.config.slotButtonMode,
             slotFetchCount: 0,
             slotInjectionPoint: undefined,
             tzid: options.tzid,

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

@@ -41,29 +41,55 @@ const SequencedSlotButton = ({ slot }) => {
     }, [status.focusedSlot]);
 
     let classStub = "time-slot";
+    if (status.slotButtonMode === "detailed") classStub = classStub + " time-slot--detailed";
     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>
+    const detailedSlot = slot.map((s, i) => (
+        <li key={i} className={theme.classBuilder("detailed-slot-list--item")}>
             {i18n.customFormatedTimeZone(
-                moment(start, "YYYY-MM-DDTHH:mm:00Z"),
+                moment(s.start, "YYYY-MM-DDTHH:mm:00Z"),
                 tz.selectedTzid.tzid,
                 "LT"
             )}
             {" - "}
             {i18n.customFormatedTimeZone(
-                moment(end, "YYYY-MM-DDTHH:mm:00Z"),
+                moment(s.end, "YYYY-MM-DDTHH:mm:00Z"),
                 tz.selectedTzid.tzid,
                 "LT"
             )}{" "}
             {`(${moment(start, "YYYY-MM-DDTHH:mm:00Z").tz(tz.selectedTzid.tzid).format("z")})`}
+        </li>
+    ));
+
+    return (
+        <button
+            className={theme.classBuilder(classStub)}
+            onClick={() => handleSlotSelection(slot)}
+            ref={slotButtonRef}
+        >
+            <span className={theme.classBuilder("visually-hidden")}>
+                {i18n.t("select_time_slot")}
+            </span>
+            {status.slotButtonMode === "detailed" ? (
+                <ul className={theme.classBuilder("detailed-slot-list")}>{detailedSlot}</ul>
+            ) : (
+                <>
+                    {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>
     );
 };

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 && !status.selected) {
+            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)
+                ? addSequencedSlotsToObject(state.slots, action.slots, state.query.sequence)
                 : 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/scss/_components.confirm.scss

@@ -10,6 +10,16 @@
     font-size: 1.5em;
 }
 
+.DTP__confirm-details--sequence-title {
+    display: inline-block;
+    font-weight: bold;
+}
+
+.DTP__confirm-details--sequence-time {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
 .DTP__confirm-button {
     @extend .DTP__button;
     background-color: var(--buttonConfirm);

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

@@ -25,6 +25,16 @@
     border-radius: 0.4em;
 }
 
+.DTP__time-slot--detailed {
+  height: unset;
+}
+
+.DTP__detailed-slot-list,
+.DTP__detailed-slot-list--item {
+    @extend %unset;
+    list-style: none;
+}
+
 .DTP__time-slot--selected {
     @extend .DTP__button;
     background-color: var(--buttonActive);