cronofy-elements 1.40.0 → 1.40.1

package/demo/date-time-picker.ejs

@@ -83,6 +83,7 @@
                         }
                     ],
                     required_duration: { minutes: 60 },
+                    //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") },

package/package.json

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

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

@@ -4,18 +4,20 @@ 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 Confirm = ({ confirmButtonRef }) => {
     const i18n = useI18n();
     const [status, dispatchStatus] = useStatus();
     const theme = useTheme();
+    const [tz] = useTz();
 
     const handleCancel = () => {
         dispatchStatus({ type: "CANCEL_SLOT_SELECTION" });
     };
 
     const handleConfirmation = () => {
-        dispatchStatus({ type: "CONFIRM_SELECTION" });
+        dispatchStatus({ type: "CONFIRM_SELECTION", tzid: tz.selectedTzid.tzid });
     };
 
     return (
@@ -32,23 +34,23 @@ const Confirm = ({ confirmButtonRef }) => {
                 <p className={theme.classBuilder("confirm-details--info")}>
                     {i18n.customFormatedTimeZone(
                         moment(status.selected.start, "YYYY-MM-DD"),
-                        status.selectedTzid.tzid,
+                        tz.selectedTzid.tzid,
                         "dddd, MMMM Do YYYY"
                     )}
                 </p>
                 <p className={theme.classBuilder("confirm-details--info")}>
                     {i18n.customFormatedTimeZone(
                         moment(status.selected.start, "YYYY-MM-DDTHH:mm:00Z"),
-                        status.selectedTzid.tzid,
+                        tz.selectedTzid.tzid,
                         "LT"
                     )}
                     {" - "}
                     {i18n.customFormatedTimeZone(
                         moment(status.selected.end, "YYYY-MM-DDTHH:mm:00Z"),
-                        status.selectedTzid.tzid,
+                        tz.selectedTzid.tzid,
                         "LT"
                     )}{" "}
-                    {`(${moment.tz(status.selectedTzid.tzid).format("z")})`}
+                    {`(${moment.tz(tz.selectedTzid.tzid).format("z")})`}
                 </p>
             </div>
             <button

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

@@ -17,6 +17,7 @@ import { I18nProvider } from "../../contexts/i18n-context";
 import { LogProvider } from "../../contexts/log-context";
 import { ThemeProvider } from "./contexts/theme-context";
 import { StatusProvider } from "./contexts/status-context";
+import { TzProvider } from "./contexts/tz-context";
 
 const DateTimePicker = ({ options }) => {
     const [statusOptions] = useState(() => {
@@ -31,8 +32,6 @@ const DateTimePicker = ({ options }) => {
                 startDay: options.config.startDay,
             }),
         }));
-        const tzList = parseTzList(options.config.tzList, options.tzid);
-        const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
         return {
             auth: {
                 token: options.token,
@@ -58,8 +57,6 @@ const DateTimePicker = ({ options }) => {
             slots: {},
             slotFetchCount: 0,
             tzid: options.tzid,
-            selectedTzid: selectedTzid,
-            tzList: tzList,
             populated: false,
         };
     });
@@ -83,13 +80,23 @@ const DateTimePicker = ({ options }) => {
         tzid: options.tzid,
     };
 
+    const tzList = parseTzList(options.config.tzList, options.tzid);
+    const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
+
+    const tzOptions = {
+        selectedTzid: selectedTzid,
+        list: tzList,
+    };
+
     return (
         <ThemeProvider options={themeOptions}>
             <LogProvider options={logOptions}>
                 <I18nProvider options={i18nOptions}>
-                    <StatusProvider options={statusOptions}>
-                        <Wrapper />
-                    </StatusProvider>
+                    <TzProvider options={tzOptions}>
+                        <StatusProvider options={statusOptions}>
+                            <Wrapper />
+                        </StatusProvider>
+                    </TzProvider>
                 </I18nProvider>
             </LogProvider>
         </ThemeProvider>

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

@@ -4,11 +4,13 @@ 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 DayButton = ({ day, selected = false, focused = false }) => {
     const i18n = useI18n();
     const [status, dispatchStatus] = useStatus();
     const theme = useTheme();
+    const [tz] = useTz();
 
     let classStub = "calendar-grid--button";
     if (day.isAvailable) classStub = classStub + " calendar-grid--available";
@@ -17,7 +19,7 @@ const DayButton = ({ day, selected = false, focused = false }) => {
     if (focused) classStub = classStub + " calendar-grid--focused";
 
     const handleClick = () => {
-        dispatchStatus({ type: "SELECT_DAY", day: day.date });
+        dispatchStatus({ type: "SELECT_DAY", day: day.date, tzid: tz.selectedTzid.tzid });
     };
 
     return (

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

@@ -1,13 +1,11 @@
-import React from "react";
+import React, { memo } from "react";
 
 import { useI18n } from "../../contexts/i18n-context";
-import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
 import TimeZoneSelector from "./TimeZoneSelector";
 
-const Details = () => {
+const Details = ({ duration, locale }) => {
     const i18n = useI18n();
-    const [status, _dispatchStatus] = useStatus();
     const theme = useTheme();
 
     return (
@@ -16,16 +14,15 @@ const Details = () => {
                 <p className={theme.classBuilder("details--tz-label")}>
                     <strong>{i18n.t("time_zone")}:</strong>
                 </p>
-                <TimeZoneSelector />
+                <TimeZoneSelector locale={locale} />
             </div>
             <div className={theme.classBuilder("details--duration")}>
                 <p>
-                    <strong>{i18n.t("duration_label")}:</strong>{" "}
-                    {status.query.required_duration.minutes} {i18n.t("minutes")}
+                    <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
                 </p>
             </div>
         </div>
     );
 };
 
-export default Details;
+export default memo(Details);

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

@@ -4,16 +4,18 @@ 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 SlotButton = ({ slot }) => {
     const i18n = useI18n();
     const theme = useTheme();
     const [status, dispatchStatus] = useStatus();
+    const [tz] = useTz();
 
     const slotButtonRef = useRef();
 
     const handleSlotSelection = slot => {
-        dispatchStatus({ type: "SELECT_SLOT", slot });
+        dispatchStatus({ type: "SELECT_SLOT", slot, tzid: tz.selectedTzid.tzid });
     };
 
     useEffect(() => {
@@ -36,18 +38,16 @@ const SlotButton = ({ slot }) => {
             </span>
             {i18n.customFormatedTimeZone(
                 moment(slot.start, "YYYY-MM-DDTHH:mm:00Z"),
-                status.selectedTzid.tzid,
+                tz.selectedTzid.tzid,
                 "LT"
             )}
             {" - "}
             {i18n.customFormatedTimeZone(
                 moment(slot.end, "YYYY-MM-DDTHH:mm:00Z"),
-                status.selectedTzid.tzid,
+                tz.selectedTzid.tzid,
                 "LT"
             )}{" "}
-            {`(${moment(slot.start, "YYYY-MM-DDTHH:mm:00Z")
-                .tz(status.selectedTzid.tzid)
-                .format("z")})`}
+            {`(${moment(slot.start, "YYYY-MM-DDTHH:mm:00Z").tz(tz.selectedTzid.tzid).format("z")})`}
         </button>
     );
 };

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

@@ -1,16 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useI18n } from "../../contexts/i18n-context";
 
 import { tzi18n } from "../../helpers/i18n";
+import { useTz } from "./contexts/tz-context";
 
-const TimeZoneSelector = () => {
+const TimeZoneSelector = ({ locale }) => {
     const theme = useTheme();
-    const i18n = useI18n();
+    const [tz, setTz] = useTz();
 
-    const [status, dispatchStatus] = useStatus();
     const [showList, setShowList] = useState(() => false);
     const [focused, setFocused] = useState(() => false);
 
@@ -27,8 +25,8 @@ const TimeZoneSelector = () => {
         setShowList(showList ? false : true);
     };
 
-    const handleOptionSelect = tz => {
-        dispatchStatus({ type: "SELECT_TZID", tz: tz });
+    const handleOptionSelect = selectedTz => {
+        setTz({ ...tz, selectedTzid: selectedTz });
         setShowList(false);
     };
 
@@ -36,26 +34,24 @@ const TimeZoneSelector = () => {
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
-                const nextFocusedItemIndex =
-                    status.tzList.findIndex(item => focused === item.tzid) + 1;
+                const nextFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) + 1;
                 const nextItem =
-                    nextFocusedItemIndex > status.tzList.length - 1 ? 0 : nextFocusedItemIndex;
+                    nextFocusedItemIndex > tz.list.length - 1 ? 0 : nextFocusedItemIndex;
 
-                setFocused(status.tzList[nextItem].tzid);
+                setFocused(tz.list[nextItem].tzid);
 
                 break;
             case "ArrowUp":
                 e.preventDefault();
-                const prevFocusedItemIndex =
-                    status.tzList.findIndex(item => focused === item.tzid) - 1;
+                const prevFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) - 1;
                 const prevItem =
-                    prevFocusedItemIndex < 0 ? status.tzList.length - 1 : prevFocusedItemIndex;
+                    prevFocusedItemIndex < 0 ? tz.list.length - 1 : prevFocusedItemIndex;
 
-                setFocused(status.tzList[prevItem].tzid);
+                setFocused(tz.list[prevItem].tzid);
 
                 break;
             case "Enter":
-                const tz = status.tzList.find(item => focused === item.tzid);
+                const tz = tz.list.find(item => focused === item.tzid);
                 handleOptionSelect(tz);
                 break;
             case "Escape":
@@ -80,23 +76,23 @@ const TimeZoneSelector = () => {
     useEffect(() => {
         if (showList && tzListRef.current) {
             tzListRef.current.focus();
-            setFocused(status.selectedTzid.tzid);
+            setFocused(tz.selectedTzid.tzid);
         }
     }, [showList]);
 
     useEffect(() => {
         if (showList && tzListRef.current && focused) {
-            const focusItem = status.tzList.findIndex(item => focused === item.tzid);
+            const focusItem = tz.list.findIndex(item => focused === item.tzid);
             tzListRef.current.children[focusItem].scrollIntoView(scrollIntoViewOptions);
         }
     }, [focused]);
 
     const meaninglessAbbr = /^[+-][0-9]+$/;
 
-    const renderList = status.tzList.map((tz, key) => {
+    const renderList = tz.list.map((timezone, key) => {
         let abbr = "";
-        if (!tz.abbr.match(meaninglessAbbr)) {
-            abbr = `${tz.abbr} `;
+        if (!timezone.abbr.match(meaninglessAbbr)) {
+            abbr = `${timezone.abbr} `;
         }
 
         return (
@@ -105,20 +101,20 @@ const TimeZoneSelector = () => {
                 role="option"
                 className={
                     theme.classBuilder("timezone-selector--option") +
-                    (focused === tz.tzid
+                    (focused === timezone.tzid
                         ? " " + theme.classBuilder("timezone-selector--focused")
                         : "") +
-                    (status.selectedTzid.tzid === tz.tzid
+                    (tz.selectedTzid.tzid === timezone.tzid
                         ? " " + theme.classBuilder("timezone-selector--selected")
                         : "")
                 }
-                data-name={tz.name}
-                aria-selected={tz.tzid === status.selectedTzid.tzid}
-                onClick={() => handleOptionSelect(tz)}
+                data-name={timezone.name}
+                aria-selected={timezone.tzid === tz.selectedTzid.tzid}
+                onClick={() => handleOptionSelect(timezone)}
                 onKeyDown={() => console.log("keydown on option")}
             >
-                {`(${abbr}${tz.offset}) `}
-                <strong>{tzi18n(tz.tzid, status.locale)}</strong>
+                {`(${abbr}${timezone.offset}) `}
+                <strong>{tzi18n(timezone.tzid, locale)}</strong>
             </li>
         );
     });
@@ -133,7 +129,7 @@ const TimeZoneSelector = () => {
                 aria-expanded={showList}
                 onClick={toggleShowList}
             >
-                {tzi18n(status.selectedTzid.tzid, status.locale)}
+                {tzi18n(tz.selectedTzid.tzid, locale)}
                 <svg
                     className={
                         theme.classBuilder("timezone-selector--icon") +

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

@@ -13,9 +13,11 @@ import SlotsList from "./SlotsList";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
 const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();
+    const [tz] = useTz();
     const theme = useTheme();
     const confirmButtonRef = useRef();
 
@@ -33,7 +35,11 @@ const Wrapper = () => {
             tzid: status.tzid,
         })
             .then(res => {
-                dispatchStatus({ type: "SET_INITIAL_SLOTS", slots: res });
+                dispatchStatus({
+                    type: "SET_INITIAL_SLOTS",
+                    slots: res,
+                    tzid: tz.selectedTzid.tzid,
+                });
                 const remainingMonths = status.months.filter(month => !month.current);
                 remainingMonths.forEach(month => {
                     getSlots({
@@ -45,6 +51,7 @@ const Wrapper = () => {
                             type: "SET_ADDITIONAL_SLOTS",
                             month: month.month,
                             slots: res,
+                            tzid: tz.selectedTzid.tzid,
                         });
                     });
                 });
@@ -66,7 +73,7 @@ const Wrapper = () => {
 
         // Set grid display if there are available slots
         if (slotsCount > 0) {
-            dispatchStatus({ type: "RECALCULATE_MONTH_SLOTS" });
+            dispatchStatus({ type: "RECALCULATE_MONTH_SLOTS", tzid: tz.selectedTzid.tzid });
         }
     }, [status.slotFetchCount]);
 
@@ -94,9 +101,15 @@ const Wrapper = () => {
         }
     }, [status.columnView]);
 
+    useEffect(() => {
+        if (tz.selectedTzid.tzid) {
+            dispatchStatus({ type: "SELECT_TZID", tzid: tz.selectedTzid.tzid });
+        }
+    }, [tz.selectedTzid.tzid]);
+
     return (
         <section className={theme.classBuilder()} style={theme.customProperties}>
-            <Details />
+            <Details duration={status.query.required_duration.minutes} locale={status.locale} />
             <div className={theme.classBuilder("wrapper")}>
                 <div
                     className={

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

@@ -10,12 +10,12 @@ import { parseTimeSlots } from "../utils/calendar";
 export const statusReducer = (state, action) => {
     const { type, ...actionBody } = action;
 
-    const sendSlotNotification = () => {
+    const sendSlotNotification = tzid => {
         const notification = {
             notification: {
                 type: "slot_selected",
                 slot: state.selected,
-                tzid: state.selectedTzid.tzid,
+                tzid: tzid,
             },
         };
         state.callback(notification);
@@ -31,7 +31,7 @@ export const statusReducer = (state, action) => {
             };
         }
         case "CONFIRM_SELECTION": {
-            sendSlotNotification();
+            sendSlotNotification(action.tzid);
             return state;
         }
         case "ERROR_GETTING_SLOTS": {
@@ -53,7 +53,7 @@ export const statusReducer = (state, action) => {
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: month.month,
-                    tzid: state.selectedTzid.tzid,
+                    tzid: action.tzid,
                     startDay: state.startDay,
                 }),
             }));
@@ -66,7 +66,7 @@ export const statusReducer = (state, action) => {
                 : state.slots;
             const hasAnySlots = Object.keys(slotsObject).length >= 1;
             const selectedDay = hasAnySlots
-                ? getFirstAvailableDay(slotsObject, state.selectedTzid.tzid)
+                ? getFirstAvailableDay(slotsObject, action.tzid)
                 : false;
             const availableDays = hasAnySlots ? getAvailableDays(slotsObject, state.tzid) : false;
             return {
@@ -87,7 +87,7 @@ export const statusReducer = (state, action) => {
             const hasAnySlots = Object.keys(slotsObject).length >= 1;
             const selectedDay =
                 hasAnySlots && !state.selectedDay
-                    ? getFirstAvailableDay(slotsObject, state.selectedTzid.tzid)
+                    ? getFirstAvailableDay(slotsObject, action.tzid)
                     : state.selectedDay;
             return {
                 ...state,
@@ -108,7 +108,7 @@ export const statusReducer = (state, action) => {
             return { ...state, months, focusedDay: action.focusedDay };
         }
         case "SELECT_DAY_INITIAL":
-            const initialDaySlots = getSlotsByDay(state.slots, action.day, state.selectedTzid.tzid);
+            const initialDaySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
                 ...state,
                 selectedDay: action.day,
@@ -118,7 +118,7 @@ export const statusReducer = (state, action) => {
                 populated: true,
             };
         case "SELECT_DAY":
-            const daySlots = getSlotsByDay(state.slots, action.day, state.selectedTzid.tzid);
+            const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
                 ...state,
                 selectedDay: action.day,
@@ -145,21 +145,21 @@ export const statusReducer = (state, action) => {
                 focusedSlot: action.slot.start,
             };
             if (state.mode === "no_confirm") {
-                sendSlotNotification();
+                sendSlotNotification(action.tzid);
             } else {
                 state.columnView = "confirm";
             }
             return state;
         }
         case "SELECT_TZID": {
-            const availableDays = getAvailableDays(state.slots, action.tz.tzid);
-            const daySlots = getSlotsByDay(state.slots, state.selectedDay, action.tz.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,
                 days: parseTimeSlots({
                     slots: state.slots,
                     month: month.month,
-                    tzid: action.tz.tzid,
+                    tzid: action.tzid,
                     startDay: state.startDay,
                 }),
             }));
@@ -169,12 +169,11 @@ export const statusReducer = (state, action) => {
                 availableDays,
                 daySlots,
                 monthlySlots,
-                selectedTzid: action.tz,
             };
 
             if (state.selected.start) {
-                const selectedDay = getLocalDayFromUtc(state.selected.start, action.tz.tzid);
-                const daySlots = getSlotsByDay(state.slots, selectedDay, action.tz.tzid);
+                const selectedDay = getLocalDayFromUtc(state.selected.start, action.tzid);
+                const daySlots = getSlotsByDay(state.slots, selectedDay, action.tzid);
 
                 state = {
                     ...state,
@@ -183,7 +182,7 @@ export const statusReducer = (state, action) => {
                     focusedDay: selectedDay,
                 };
 
-                if (state.mode === "no_confirm") sendSlotNotification();
+                if (state.mode === "no_confirm") sendSlotNotification(action.tzid);
             }
 
             return state;

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

@@ -0,0 +1,18 @@
+import React, { createContext, useContext, useState } from "react";
+
+const TzContext = createContext();
+
+export const TzProvider = ({ children, options }) => {
+    const [tz, setTz] = useState({
+        selectedTzid: options.selectedTzid,
+        list: options.list,
+    });
+    return <TzContext.Provider value={[tz, setTz]}>{children}</TzContext.Provider>;
+};
+export const useTz = () => {
+    const context = useContext(TzContext);
+    if (context === undefined) {
+        throw new Error("useTz must be used within a TzProvider");
+    }
+    return context;
+};

package/tests/DateTimePicker/SlotButton.test.js

@@ -7,6 +7,7 @@ import SlotButton from "../../src/js/components/DateTimePicker/SlotButton";
 import { I18nProvider } from "../../src/js/contexts/i18n-context";
 import { ThemeProvider } from "../../src/js/components/DateTimePicker/contexts/theme-context";
 import { StatusProvider } from "../../src/js/components/DateTimePicker/contexts/status-context";
+import { TzProvider } from "../../src/js/components/DateTimePicker/contexts/tz-context";
 
 const wrapper = ({ children, status }) => (
     <ThemeProvider options={{ name: "DTP" }}>
@@ -17,17 +18,27 @@ const wrapper = ({ children, status }) => (
                 tzid: "Europe/London",
             }}
         >
-            <StatusProvider
+            <TzProvider
                 options={{
-                    selected: false,
                     selectedTzid: {
                         tzid: "Europe/London",
+                        offset: "+01:00",
+                        offsetMins: 60,
+                        name: "London",
+                        abbr: "BST",
                     },
-                    ...status,
+                    list: [],
                 }}
             >
-                {children}
-            </StatusProvider>
+                <StatusProvider
+                    options={{
+                        selected: false,
+                        ...status,
+                    }}
+                >
+                    {children}
+                </StatusProvider>
+            </TzProvider>
         </I18nProvider>
     </ThemeProvider>
 );