cronofy-elements 1.40.1 → 1.40.2

package/package.json

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

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

@@ -14,10 +14,12 @@ import DayHeadings from "./DayHeadings";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
 const Calendar = () => {
     const [status, dispatchStatus] = useStatus();
     const theme = useTheme();
+    const [tz] = useTz();
 
     const weekdays = getWeekDays(status.startDay);
 
@@ -27,8 +29,7 @@ const Calendar = () => {
 
     // Handles the keyboard navigating for the calendar table
     const handleGridNavigation = (date, e) => {
-        const currentMonth = status.months.find(month => month.current).month;
-        const monthlySlots = status.monthlySlots.find(month => month.month === currentMonth);
+        const monthlySlots = status.monthlyView;
         const availableDaysInGrid = getAvailableDaysInMonthDisplay(monthlySlots.days);
         if (!date) {
             dispatchStatus({
@@ -70,9 +71,10 @@ const Calendar = () => {
                             availableDays: status.availableDays,
                         });
                         dispatchStatus({
-                            type: "SET_FOCUS_FOR_NEW_MONTH",
-                            focusedDay: result.date,
+                            type: "SELECT_MONTH",
                             month: result.month,
+                            focusedDay: result.date,
+                            tzid: tz.selectedTzid.tzid,
                         });
                     }
                 }
@@ -80,8 +82,8 @@ const Calendar = () => {
         }
     };
 
-    const currentMonth = status.months.find(month => month.current).month;
-    const monthlySlots = status.monthlySlots.find(month => month.month === currentMonth);
+    const monthlySlots = status.monthlyView;
+    const currentMonth = monthlySlots.month;
 
     const grid = monthlySlots.days.map((row, i) => (
         <tr className={theme.classBuilder("calendar-grid--row")} key={`${currentMonth}_row_${i}`}>

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

@@ -5,16 +5,22 @@ import { calculateMonthNav } from "./utils/calendar";
 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 CalendarHeader = () => {
     const i18n = useI18n();
     const [status, dispatchStatus] = useStatus();
     const theme = useTheme();
+    const [tz] = useTz();
 
     const [monthState, setMonthState] = useState(() => calculateMonthNav(status.months));
 
     const handleMonthNav = target => {
-        dispatchStatus({ type: "SELECT_MONTH", month: target });
+        dispatchStatus({
+            type: "SELECT_MONTH",
+            month: target,
+            tzid: tz.selectedTzid.tzid,
+        });
     };
 
     useEffect(() => {

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

@@ -33,7 +33,7 @@ const Confirm = ({ confirmButtonRef }) => {
             <div id="confirm-slot-details">
                 <p className={theme.classBuilder("confirm-details--info")}>
                     {i18n.customFormatedTimeZone(
-                        moment(status.selected.start, "YYYY-MM-DD"),
+                        moment(status.selected.start, "YYYY-MM-DDTHH:mm:00Z"),
                         tz.selectedTzid.tzid,
                         "dddd, MMMM Do YYYY"
                     )}

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import moment from "moment-timezone";
 
 import {
     getMonthObjectsFromQuery,
@@ -23,15 +24,18 @@ const DateTimePicker = ({ options }) => {
     const [statusOptions] = useState(() => {
         const query = !options.demo ? parseQuery(options.query) : queryForDateTimePicker;
         const months = getMonthObjectsFromQuery(query, options.tzid);
-        const monthlySlots = months.map(month => ({
-            month: month.month,
+        const currentMonth = months.length ? months[0].month : moment().format("YYYY-MM");
+
+        const monthlyView = {
+            month: currentMonth,
             days: parseTimeSlots({
                 slots: {},
-                month: month.month,
+                month: currentMonth,
                 tzid: options.tzid,
                 startDay: options.config.startDay,
             }),
-        }));
+        };
+
         return {
             auth: {
                 token: options.token,
@@ -47,15 +51,14 @@ const DateTimePicker = ({ options }) => {
             mode: options.config.mode, // confirm (default) | no_confirm
             query,
             months,
-            monthlySlots,
+            monthlyView,
             selected: false,
-            selectedDay: false,
             startDay: options.config.startDay,
-            focusedDay: false,
             focusedSlot: false,
-            availableDays: false,
+            availableDays: [],
             slots: {},
             slotFetchCount: 0,
+            slotInjectionPoint: undefined,
             tzid: options.tzid,
             populated: false,
         };

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

@@ -19,42 +19,36 @@ const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();
     const [tz] = useTz();
     const theme = useTheme();
+
     const confirmButtonRef = useRef();
 
     useEffect(() => {
         if (!status.query.query_periods) {
-            dispatchStatus({ type: "SET_DEFAULT_SLOTS", slots: {} });
             return;
         }
 
-        const currentMonth = status.months.find(month => month.current);
-        // Get all slots for current month
-        getSlots({
-            query: currentMonth.query,
-            auth: status.auth,
-            tzid: status.tzid,
-        })
-            .then(res => {
+        const fetchMonthSlots = query => {
+            return getSlots({
+                query,
+                auth: status.auth,
+                tzid: status.tzid,
+            }).then(res => {
                 dispatchStatus({
-                    type: "SET_INITIAL_SLOTS",
+                    type: "SET_SLOTS",
                     slots: res,
                     tzid: tz.selectedTzid.tzid,
                 });
+            });
+        };
+
+        const currentMonth = status.months.find(m => m.current);
+
+        // Get slots for current month
+        fetchMonthSlots(currentMonth.query)
+            .then(() => {
+                // Get slots for remianing months
                 const remainingMonths = status.months.filter(month => !month.current);
-                remainingMonths.forEach(month => {
-                    getSlots({
-                        query: month.query,
-                        auth: status.auth,
-                        tzid: status.tzid,
-                    }).then(res => {
-                        dispatchStatus({
-                            type: "SET_ADDITIONAL_SLOTS",
-                            month: month.month,
-                            slots: res,
-                            tzid: tz.selectedTzid.tzid,
-                        });
-                    });
-                });
+                remainingMonths.forEach(month => fetchMonthSlots(month.query));
             })
             .catch(error => {
                 dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
@@ -71,26 +65,43 @@ const Wrapper = () => {
             return;
         }
 
-        // Set grid display if there are available slots
-        if (slotsCount > 0) {
-            dispatchStatus({ type: "RECALCULATE_MONTH_SLOTS", tzid: tz.selectedTzid.tzid });
+        // Set grid display if there are available slots within the current month
+        if (slotsCount < 1) {
+            return;
         }
-    }, [status.slotFetchCount]);
+
+        const weeksInMonth = status.monthlyView.days;
+        const firstDay = moment(weeksInMonth[0][0].date, "YYYY-MM-DD");
+        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;
+
+        if (injectionPoint && !injectionPoint.isBetween(firstDay, lastDay)) {
+            return;
+        }
+
+        dispatchStatus({
+            type: "RECALCULATE_MONTH_VIEW",
+            tzid: tz.selectedTzid.tzid,
+        });
+    }, [status.slotFetchCount, status.slotInjectionPoint]);
 
     useEffect(() => {
         if (status.selectedDay) {
-            if (!status.populated) {
-                dispatchStatus({
-                    type: "SELECT_DAY_INITIAL",
-                    day: status.selectedDay,
-                });
-            }
-            const currentMonthParts = status.months.find(month => month.current).month.split("-");
             const selectedDayParts = status.selectedDay.split("-");
+            const currentMonthParts = status.monthlyView.month.split("-");
             const inCurrentMonth = currentMonthParts[1] === selectedDayParts[1];
+
             if (!inCurrentMonth) {
                 const newMonth = moment(status.selectedDay, "YYYY-MM-DD").format("YYYY-MM");
-                dispatchStatus({ type: "SELECT_MONTH", month: newMonth });
+                dispatchStatus({
+                    type: "SELECT_MONTH",
+                    month: newMonth,
+                    tzid: tz.selectedTzid.tzid,
+                });
             }
         }
     }, [status.selectedDay]);

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

@@ -2,16 +2,16 @@ import React, { createContext, useContext, useReducer } from "react";
 
 import { statusReducer } from "./status-reducer";
 
-const statusContext = createContext();
+const StatusContext = createContext();
 
 export const StatusProvider = ({ children, options }) => {
     const [status, dispatchStatus] = useReducer(statusReducer, options);
     return (
-        <statusContext.Provider value={[status, dispatchStatus]}>{children}</statusContext.Provider>
+        <StatusContext.Provider value={[status, dispatchStatus]}>{children}</StatusContext.Provider>
     );
 };
 export const useStatus = () => {
-    const context = useContext(statusContext);
+    const context = useContext(StatusContext);
     if (context === undefined) {
         throw new Error("useStatus must be used within a StatusProvider");
     }

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

@@ -30,10 +30,12 @@ export const statusReducer = (state, action) => {
                 selected: false,
             };
         }
+
         case "CONFIRM_SELECTION": {
             sendSlotNotification(action.tzid);
             return state;
         }
+
         case "ERROR_GETTING_SLOTS": {
             const notification = {
                 notification: {
@@ -44,80 +46,73 @@ export const statusReducer = (state, action) => {
             state.callback(notification);
             return { ...state, error: action.error, columnView: "error" };
         }
+
         case "NO_SLOTS_FOUND": {
             return { ...state, columnView: "no-slots" };
         }
-        case "RECALCULATE_MONTH_SLOTS": {
-            const monthlySlots = state.months.map(month => ({
-                month: month.month,
+
+        case "RECALCULATE_MONTH_VIEW": {
+            const monthlyView = {
+                month: state.monthlyView.month,
                 days: parseTimeSlots({
                     slots: state.slots,
-                    month: month.month,
+                    month: state.monthlyView.month,
                     tzid: action.tzid,
                     startDay: state.startDay,
                 }),
-            }));
-            return { ...state, monthlySlots };
-        }
-        case "SET_INITIAL_SLOTS": {
-            const hasNewSlots = Object.keys(action.slots).length >= 1;
-            const slotsObject = hasNewSlots
-                ? addSlotsToObject(state.slots, action.slots)
-                : state.slots;
-            const hasAnySlots = Object.keys(slotsObject).length >= 1;
-            const selectedDay = hasAnySlots
-                ? getFirstAvailableDay(slotsObject, action.tzid)
-                : false;
-            const availableDays = hasAnySlots ? getAvailableDays(slotsObject, state.tzid) : false;
+            };
+
             return {
                 ...state,
-                selectedDay,
-                focusedDay: selectedDay,
-                slots: slotsObject,
-                availableDays: availableDays,
-                slotFetchCount: state.slotFetchCount + 1,
+                monthlyView,
             };
         }
-        case "SET_DEFAULT_SLOTS":
-        case "SET_ADDITIONAL_SLOTS": {
-            const hasNewSlots = Object.keys(action.slots).length >= 1;
-            const slotsObject = hasNewSlots
-                ? addSlotsToObject(state.slots, action.slots)
-                : state.slots;
-            const hasAnySlots = Object.keys(slotsObject).length >= 1;
-            const selectedDay =
-                hasAnySlots && !state.selectedDay
-                    ? getFirstAvailableDay(slotsObject, action.tzid)
-                    : state.selectedDay;
+
+        case "SET_SLOTS": {
+            if (!action.slots.length > 0) {
+                return state;
+            }
+
+            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 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,
-                slots: slotsObject,
+                daySlots,
+                columnView,
+                focusedDay,
                 selectedDay,
-                focusedDay: selectedDay,
+                availableDays,
+
+                slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
+                slotInjectionPoint: getLocalDayFromUtc(action.slots[0].start, action.tzid),
             };
         }
+
         case "SET_FOCUS": {
-            return { ...state, focusedDay: action.focusedDay };
-        }
-        case "SET_FOCUS_FOR_NEW_MONTH": {
-            const months = state.months.map(month => ({
-                ...month,
-                current: month.month === action.month,
-            }));
-            return { ...state, months, focusedDay: action.focusedDay };
-        }
-        case "SELECT_DAY_INITIAL":
-            const initialDaySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
                 ...state,
-                selectedDay: action.day,
-                focusedDay: action.day,
-                columnView: "slots",
-                daySlots: initialDaySlots,
-                populated: true,
+                focusedDay: action.focusedDay,
             };
-        case "SELECT_DAY":
+        }
+
+        case "SELECT_DAY": {
             const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
                 ...state,
@@ -128,16 +123,33 @@ export const statusReducer = (state, action) => {
                 daySlots,
                 populated: true,
             };
-        case "SELECT_MONTH":
+        }
+        case "SELECT_MONTH": {
             const months = state.months.map(month => ({
                 ...month,
                 current: month.month === action.month,
             }));
+
+            let focusedDay = action.focusedDay ?? false;
+
+            const monthlyView = {
+                month: action.month,
+                days: parseTimeSlots({
+                    tzid: action.tzid,
+                    slots: state.slots,
+                    month: action.month,
+                    startDay: state.startDay,
+                }),
+            };
+
             return {
                 ...state,
                 months,
-                focusedDay: false,
+                focusedDay,
+                monthlyView,
             };
+        }
+
         case "SELECT_SLOT": {
             state = {
                 ...state,
@@ -151,24 +163,26 @@ export const statusReducer = (state, action) => {
             }
             return state;
         }
+
         case "SELECT_TZID": {
             const availableDays = getAvailableDays(state.slots, action.tzid);
             const daySlots = getSlotsByDay(state.slots, state.selectedDay, action.tzid);
-            const monthlySlots = state.months.map(month => ({
-                month: month.month,
+
+            const monthlyView = {
+                month: state.monthlyView.month,
                 days: parseTimeSlots({
                     slots: state.slots,
-                    month: month.month,
+                    month: state.monthlyView.month,
                     tzid: action.tzid,
                     startDay: state.startDay,
                 }),
-            }));
+            };
 
             state = {
                 ...state,
                 availableDays,
                 daySlots,
-                monthlySlots,
+                monthlyView,
             };
 
             if (state.selected.start) {

package/src/js/helpers/utils.js

@@ -16,7 +16,13 @@ export const objectToArray = (object, keepKey = true) => {
 export const truncateString = (str, length = 240) =>
     str.length <= length - 2 ? str : `${str.slice(0, length)}...`;
 
-export const uniqueItems = array => array.filter((elem, pos, arr) => arr.indexOf(elem) == pos);
+export const uniqueItems = array => {
+    if (!Array.isArray(array)) {
+        return [];
+    }
+
+    return [...new Set(array)];
+};
 
 export const objectIsEmpty = obj => {
     for (let key in obj) {