cronofy-elements 1.40.2 → 1.41.0

package/demo/date-time-picker.ejs

@@ -102,6 +102,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.41.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,8 @@
-import React, { useState } from "react";
+import React, { useMemo } from "react";
 import moment from "moment-timezone";
 
-import {
-    getMonthObjectsFromQuery,
-    parseQuery,
-    parseTzList,
-    getInitialSelectedTzid,
-} from "./utils/slots";
+import { getMonthObjectsFromQuery, parseTzList, getInitialSelectedTzid } from "./utils/slots";
 import { parseTimeSlots } from "./utils/calendar";
-import { queryForDateTimePicker } from "../../helpers/mocks";
 
 import Wrapper from "./Wrapper";
 
@@ -21,13 +15,25 @@ 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 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 monthlyView = {
             month: currentMonth,
+            hasNext: currentMonthObject.isBefore(endDateObject, "month"),
+            hasPrev: currentMonthObject.isAfter(startDateObject, "month"),
             days: parseTimeSlots({
                 slots: {},
                 month: currentMonth,
@@ -49,11 +55,15 @@ const DateTimePicker = ({ options }) => {
             daySlots: [],
             locale: options.locale,
             mode: options.config.mode, // confirm (default) | no_confirm
-            query,
+            query: options.query,
             months,
             monthlyView,
             selected: false,
             startDay: options.config.startDay,
+            focusedDay: options.config.selectedDay,
+            selectedDay: options.config.selectedDate,
+            startDateObject,
+            endDateObject,
             focusedSlot: false,
             availableDays: [],
             slots: {},
@@ -62,7 +72,7 @@ const DateTimePicker = ({ options }) => {
             tzid: options.tzid,
             populated: false,
         };
-    });
+    }, []);
 
     const themeOptions = {
         styles: { height: "auto", padding: "10px", ...options.styles },

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

@@ -56,17 +56,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 +65,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)) {
             return;
         }
 
@@ -87,7 +75,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) {

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

@@ -1,6 +1,7 @@
+import moment from "moment-timezone";
+
 import {
     addSlotsToObject,
-    getFirstAvailableDay,
     getSlotsByDay,
     getAvailableDays,
     getLocalDayFromUtc,
@@ -54,6 +55,8 @@ export const statusReducer = (state, action) => {
         case "RECALCULATE_MONTH_VIEW": {
             const monthlyView = {
                 month: state.monthlyView.month,
+                hasNext: state.monthlyView.hasNext,
+                hasPrev: state.monthlyView.hasPrev,
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: state.monthlyView.month,
@@ -74,31 +77,12 @@ export const statusReducer = (state, action) => {
             }
 
             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 availableDays = getAvailableDays(addSlotsToObject({}, action.slots), action.tzid);
             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);
-            }
 
             return {
                 ...state,
-                daySlots,
-                columnView,
-                focusedDay,
-                selectedDay,
-                availableDays,
-
+                availableDays: [...availableDaysSet].sort(),
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
                 slotInjectionPoint: getLocalDayFromUtc(action.slots[0].start, action.tzid),
@@ -114,26 +98,41 @@ export const statusReducer = (state, action) => {
 
         case "SELECT_DAY": {
             const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
+            const focusedSlot = daySlots[0];
+
             return {
                 ...state,
                 selectedDay: action.day,
                 focusedDay: action.day,
-                focusedSlot: daySlots[0].start,
+                focusedSlot: focusedSlot?.start,
                 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"),
                 days: parseTimeSlots({
                     tzid: action.tzid,
                     slots: state.slots,
@@ -142,6 +141,8 @@ export const statusReducer = (state, action) => {
                 }),
             };
 
+            let focusedDay = action.focusedDay ?? false;
+
             return {
                 ...state,
                 months,
@@ -170,6 +171,8 @@ export const statusReducer = (state, action) => {
 
             const monthlyView = {
                 month: state.monthlyView.month,
+                hasNext: state.monthlyView.hasNext,
+                hasPrev: state.monthlyView.hasPrev,
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: state.monthlyView.month,

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

@@ -21,7 +21,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...
@@ -42,9 +42,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)
+            ? current
+            : monthStrings[0];
+
+    return monthStrings.map(month => {
         const croppedQueryPeriods = cropPeriodsByMonth(query.query_periods, month, tzid);
         return {
             month,
@@ -56,7 +64,6 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
             },
         };
     });
-    return monthObjects;
 };
 
 export const getSlots = ({ query, auth, tzid, slots = [] }) =>

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;
@@ -66,10 +74,14 @@ export const parseDateTimePickerOptions = (options = {}) => {
     const isBookableEventsQuery = options.availability_query.bookable_events ? true : false;
 
     let query;
-    if (isBookableEventsQuery) {
+    if (options.demo) {
+        query = queryForDateTimePicker;
+    } else if (isBookableEventsQuery) {
         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 +105,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 +157,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,
     };