cronofy-elements 1.40.2 → 1.43.0

package/demo/date-time-picker.ejs

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

package/package.json

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

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
-
-import { calculateMonthNav } from "./utils/calendar";
+import React from "react";
+import moment from "moment-timezone";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useStatus } from "./contexts/status-context";
@@ -13,19 +12,27 @@ const CalendarHeader = () => {
     const theme = useTheme();
     const [tz] = useTz();
 
-    const [monthState, setMonthState] = useState(() => calculateMonthNav(status.months));
+    const handlePrevMonth = () => {
+        const month = moment(status.monthlyView.month, "YYYY-MM")
+            .subtract(1, "month")
+            .format("YYYY-MM");
 
-    const handleMonthNav = target => {
         dispatchStatus({
             type: "SELECT_MONTH",
-            month: target,
+            month,
             tzid: tz.selectedTzid.tzid,
         });
     };
 
-    useEffect(() => {
-        setMonthState(() => calculateMonthNav(status.months));
-    }, [status.months]);
+    const handleNextMonth = () => {
+        const month = moment(status.monthlyView.month, "YYYY-MM").add(1, "month").format("YYYY-MM");
+
+        dispatchStatus({
+            type: "SELECT_MONTH",
+            month,
+            tzid: tz.selectedTzid.tzid,
+        });
+    };
 
     return (
         <div className={theme.classBuilder("calendar-header")}>
@@ -33,8 +40,8 @@ const CalendarHeader = () => {
                 type="button"
                 className={theme.classBuilder("calendar-header-button")}
                 aria-label={i18n.t("nav_previous_month")}
-                disabled={!monthState.prev ? true : false}
-                onClick={() => handleMonthNav(monthState.prev)}
+                disabled={!status.monthlyView.hasPrev}
+                onClick={handlePrevMonth}
             >
                 <svg
                     className={theme.classBuilder(
@@ -47,14 +54,14 @@ const CalendarHeader = () => {
                 </svg>
             </button>
             <h2 className={theme.classBuilder("calendar-header--title")} id="calendar-title">
-                {i18n.f(monthState.current, "MMMM YYYY")}
+                {i18n.f(moment(status.monthlyView.month, "YYYY-MM"), "MMMM YYYY")}
             </h2>
             <button
                 type="button"
                 className={theme.classBuilder("calendar-header-button")}
                 aria-label={i18n.t("nav_next_month")}
-                disabled={!monthState.next ? true : false}
-                onClick={() => handleMonthNav(monthState.next)}
+                disabled={!status.monthlyView.hasNext}
+                onClick={handleNextMonth}
             >
                 <svg
                     className={theme.classBuilder(

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

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
+import React, { useMemo } from "react";
 import moment from "moment-timezone";
 
 import {
     getMonthObjectsFromQuery,
-    parseQuery,
     parseTzList,
     getInitialSelectedTzid,
+    getMonthsLoadingFromQuery,
+    getDurationFromQuery,
 } from "./utils/slots";
-import { parseTimeSlots } from "./utils/calendar";
-import { queryForDateTimePicker } from "../../helpers/mocks";
+import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
 
 import Wrapper from "./Wrapper";
 
@@ -21,13 +21,30 @@ import { StatusProvider } from "./contexts/status-context";
 import { TzProvider } from "./contexts/tz-context";
 
 const DateTimePicker = ({ options }) => {
-    const [statusOptions] = useState(() => {
-        const query = !options.demo ? parseQuery(options.query) : queryForDateTimePicker;
-        const months = getMonthObjectsFromQuery(query, options.tzid);
-        const currentMonth = months.length ? months[0].month : moment().format("YYYY-MM");
+    const statusOptions = useMemo(() => {
+        const selectedDateObject =
+            options.config.selectedDate && moment(options.config.selectedDate, "YYYY-MM-DD");
+
+        const months = getMonthObjectsFromQuery(
+            options.query,
+            options.tzid,
+            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;
+        const currentMonth = currentMonthObject.format("YYYY-MM");
+        const monthsLoading = getMonthsLoadingFromQuery(options.query, options.tzid);
+        const monthsInView = getMonthsInDisplay(currentMonth, options.config.startDay);
 
         const monthlyView = {
             month: currentMonth,
+            hasNext: currentMonthObject.isBefore(endDateObject, "month"),
+            hasPrev: currentMonthObject.isAfter(startDateObject, "month"),
+            monthsInView,
             days: parseTimeSlots({
                 slots: {},
                 month: currentMonth,
@@ -47,22 +64,29 @@ 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,
+            query: options.query,
             months,
             monthlyView,
+            monthsLoading,
             selected: false,
             startDay: options.config.startDay,
+            focusedDay: options.config.selectedDay,
+            selectedDay: options.config.selectedDate,
+            startDateObject,
+            endDateObject,
             focusedSlot: false,
             availableDays: [],
+            sequenced_availability: options.query.sequence ? true : false,
             slots: {},
             slotFetchCount: 0,
             slotInjectionPoint: undefined,
             tzid: options.tzid,
             populated: false,
         };
-    });
+    }, []);
 
     const themeOptions = {
         styles: { height: "auto", padding: "10px", ...options.styles },

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

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { useI18n } from "../../contexts/i18n-context";
+import { useTheme } from "./contexts/theme-context";
+
+const LoadingCalendar = () => {
+    const i18n = useI18n();
+    const theme = useTheme();
+
+    return (
+        <div className={theme.classBuilder("calendar-loading")}>
+            <svg aria-hidden="true" viewBox="0 0 489.711 489.711">
+                <path d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z" />
+                <path d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z" />
+            </svg>
+            <span className={"calendar-loading__text"}>{i18n.t("loading_calendar")}</span>
+        </div>
+    );
+};
+
+export default LoadingCalendar;

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

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

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

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

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

@@ -1,13 +1,14 @@
-import React, { useEffect, useRef } from "react";
+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";
 import Error from "./Error";
 import Details from "./Details";
 import Loading from "./Loading";
+import LoadingCalendar from "./LoadingCalendar";
 import NoSlotsFound from "./NoSlotsFound";
 import SlotsList from "./SlotsList";
 
@@ -20,6 +21,8 @@ const Wrapper = () => {
     const [tz] = useTz();
     const theme = useTheme();
 
+    const [loadingCalendar, setLoadingCalendar] = useState(true);
+
     const confirmButtonRef = useRef();
 
     useEffect(() => {
@@ -27,8 +30,10 @@ const Wrapper = () => {
             return;
         }
 
-        const fetchMonthSlots = query => {
-            return getSlots({
+        const fetchMonthSlots = (query, month) => {
+            const fetch = status.sequenced_availability ? getSequencedSlots : getSlots;
+
+            return fetch({
                 query,
                 auth: status.auth,
                 tzid: status.tzid,
@@ -37,6 +42,7 @@ const Wrapper = () => {
                     type: "SET_SLOTS",
                     slots: res,
                     tzid: tz.selectedTzid.tzid,
+                    month: month,
                 });
             });
         };
@@ -44,11 +50,19 @@ const Wrapper = () => {
         const currentMonth = status.months.find(m => m.current);
 
         // Get slots for current month
-        fetchMonthSlots(currentMonth.query)
+        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));
+                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 });
@@ -56,17 +70,7 @@ const Wrapper = () => {
     }, []);
 
     useEffect(() => {
-        // Check for no-slots when all months have been fetched
-        const fetchCount = status.slotFetchCount;
-        const monthsCount = status.months.length;
-        const slotsCount = Object.keys(status.slots).length;
-        if (fetchCount === monthsCount && slotsCount < 1) {
-            dispatchStatus({ type: "NO_SLOTS_FOUND" });
-            return;
-        }
-
-        // Set grid display if there are available slots within the current month
-        if (slotsCount < 1) {
+        if (!status.slotInjectionPoint) {
             return;
         }
 
@@ -75,11 +79,9 @@ const Wrapper = () => {
         const lastWeekInMonth = weeksInMonth[weeksInMonth.length - 1];
         const lastDay = moment(lastWeekInMonth[lastWeekInMonth.length - 1].date, "YYYY-MM-DD");
 
-        const injectionPoint = status.slotInjectionPoint
-            ? moment(status.slotInjectionPoint, "YYYY-MM-DD")
-            : undefined;
+        const injectionPoint = moment(status.slotInjectionPoint, "YYYY-MM-DD");
 
-        if (injectionPoint && !injectionPoint.isBetween(firstDay, lastDay)) {
+        if (!injectionPoint.isBetween(firstDay, lastDay, "day", "[]")) {
             return;
         }
 
@@ -87,7 +89,45 @@ const Wrapper = () => {
             type: "RECALCULATE_MONTH_VIEW",
             tzid: tz.selectedTzid.tzid,
         });
-    }, [status.slotFetchCount, status.slotInjectionPoint]);
+    }, [status.slotInjectionPoint]);
+
+    useEffect(() => {
+        const fetchCount = status.slotFetchCount;
+        const monthsCount = status.months.length;
+        const finishedCallingAllSlots = fetchCount === monthsCount;
+        const hasAvailableDays = status.availableDays.length;
+
+        // No slots available after all queries have been made
+        if (finishedCallingAllSlots && !hasAvailableDays) {
+            dispatchStatus({ type: "NO_SLOTS_FOUND" });
+            return;
+        }
+
+        // Set selectedDay to first available day
+        if (!status.selectedDay && hasAvailableDays) {
+            dispatchStatus({
+                type: "SELECT_DAY",
+                day: status.availableDays[0],
+                tzid: tz.selectedTzid.tzid,
+            });
+            return;
+        }
+
+        if (!status.selectedDay && !hasAvailableDays) {
+            return;
+        }
+
+        // For allowing only this to be called once
+        // 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;
+        }
+    }, [status.slotFetchCount, status.availableDays]);
 
     useEffect(() => {
         if (status.selectedDay) {
@@ -118,9 +158,23 @@ const Wrapper = () => {
         }
     }, [tz.selectedTzid.tzid]);
 
+    useEffect(() => {
+        if (status.monthsLoading) {
+            for (let month of status.monthlyView.monthsInView) {
+                const monthLoading = status.monthsLoading.find(m => m.month === month);
+                if (monthLoading && monthLoading.loading) {
+                    setLoadingCalendar(true);
+                    return;
+                } else {
+                    setLoadingCalendar(false);
+                }
+            }
+        }
+    }, [status.monthlyView, status.monthsLoading]);
+
     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={
@@ -131,6 +185,7 @@ const Wrapper = () => {
                     }
                 >
                     <Calendar />
+                    {loadingCalendar && <LoadingCalendar />}
                 </div>
                 <div className={theme.classBuilder("column--right")}>
                     {status.columnView === "error" && <Error />}