cronofy-elements - npm Package Compare versions

Comparing version 1.40.0 to 1.40.1

package.json

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

src/js/components/DateTimePicker/Confirm.js

@@ -7,2 +7,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
@@ -13,2 +14,3 @@ const Confirm = ({ confirmButtonRef }) => {
     const theme = useTheme();
+    const [tz] = useTz();
 
@@ -20,3 +22,3 @@ const handleCancel = () => {
     const handleConfirmation = () => {
-        dispatchStatus({ type: "CONFIRM_SELECTION" });
+        dispatchStatus({ type: "CONFIRM_SELECTION", tzid: tz.selectedTzid.tzid });
     };
@@ -38,3 +40,3 @@
                         moment(status.selected.start, "YYYY-MM-DD"),
-                        status.selectedTzid.tzid,
+                        tz.selectedTzid.tzid,
                         "dddd, MMMM Do YYYY"
@@ -46,3 +48,3 @@ )}
                         moment(status.selected.start, "YYYY-MM-DDTHH:mm:00Z"),
-                        status.selectedTzid.tzid,
+                        tz.selectedTzid.tzid,
                         "LT"
@@ -53,6 +55,6 @@ )}
                         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>
@@ -59,0 +61,0 @@ </div>

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

@@ -13,3 +13,3 @@ import {
 
-    const sendSlotNotification = () => {
+    const sendSlotNotification = tzid => {
         const notification = {
@@ -19,3 +19,3 @@ notification: {
                 slot: state.selected,
-                tzid: state.selectedTzid.tzid,
+                tzid: tzid,
             },
@@ -36,3 +36,3 @@ };
         case "CONFIRM_SELECTION": {
-            sendSlotNotification();
+            sendSlotNotification(action.tzid);
             return state;
@@ -59,3 +59,3 @@ }
                     month: month.month,
-                    tzid: state.selectedTzid.tzid,
+                    tzid: action.tzid,
                     startDay: state.startDay,
@@ -73,3 +73,3 @@ }),
             const selectedDay = hasAnySlots
-                ? getFirstAvailableDay(slotsObject, state.selectedTzid.tzid)
+                ? getFirstAvailableDay(slotsObject, action.tzid)
                 : false;
@@ -95,3 +95,3 @@ const availableDays = hasAnySlots ? getAvailableDays(slotsObject, state.tzid) : false;
                 hasAnySlots && !state.selectedDay
-                    ? getFirstAvailableDay(slotsObject, state.selectedTzid.tzid)
+                    ? getFirstAvailableDay(slotsObject, action.tzid)
                     : state.selectedDay;
@@ -117,3 +117,3 @@ return {
         case "SELECT_DAY_INITIAL":
-            const initialDaySlots = getSlotsByDay(state.slots, action.day, state.selectedTzid.tzid);
+            const initialDaySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
@@ -128,3 +128,3 @@ ...state,
         case "SELECT_DAY":
-            const daySlots = getSlotsByDay(state.slots, action.day, state.selectedTzid.tzid);
+            const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
             return {
@@ -156,3 +156,3 @@ ...state,
             if (state.mode === "no_confirm") {
-                sendSlotNotification();
+                sendSlotNotification(action.tzid);
             } else {
@@ -164,4 +164,4 @@ state.columnView = "confirm";
         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 => ({
@@ -172,3 +172,3 @@ month: month.month,
                     month: month.month,
-                    tzid: action.tz.tzid,
+                    tzid: action.tzid,
                     startDay: state.startDay,
@@ -183,8 +183,7 @@ }),
                 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);
 
@@ -198,3 +197,3 @@ state = {
 
-                if (state.mode === "no_confirm") sendSlotNotification();
+                if (state.mode === "no_confirm") sendSlotNotification(action.tzid);
             }
@@ -201,0 +200,0 @@

src/js/components/DateTimePicker/DateTimePicker.js

@@ -20,2 +20,3 @@ import React, { useState } from "react";
 import { StatusProvider } from "./contexts/status-context";
+import { TzProvider } from "./contexts/tz-context";
 
@@ -35,4 +36,2 @@ const DateTimePicker = ({ options }) => {
         }));
-        const tzList = parseTzList(options.config.tzList, options.tzid);
-        const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
         return {
@@ -63,4 +62,2 @@ auth: {
             tzid: options.tzid,
-            selectedTzid: selectedTzid,
-            tzList: tzList,
             populated: false,
@@ -89,2 +86,10 @@ };
 
+    const tzList = parseTzList(options.config.tzList, options.tzid);
+    const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
+
+    const tzOptions = {
+        selectedTzid: selectedTzid,
+        list: tzList,
+    };
+
     return (
@@ -94,5 +99,7 @@ <ThemeProvider options={themeOptions}>
                 <I18nProvider options={i18nOptions}>
-                    <StatusProvider options={statusOptions}>
-                        <Wrapper />
-                    </StatusProvider>
+                    <TzProvider options={tzOptions}>
+                        <StatusProvider options={statusOptions}>
+                            <Wrapper />
+                        </StatusProvider>
+                    </TzProvider>
                 </I18nProvider>
@@ -99,0 +106,0 @@ </LogProvider>

src/js/components/DateTimePicker/DayButton.js

@@ -7,2 +7,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
@@ -13,2 +14,3 @@ const DayButton = ({ day, selected = false, focused = false }) => {
     const theme = useTheme();
+    const [tz] = useTz();
 
@@ -22,3 +24,3 @@ let classStub = "calendar-grid--button";
     const handleClick = () => {
-        dispatchStatus({ type: "SELECT_DAY", day: day.date });
+        dispatchStatus({ type: "SELECT_DAY", day: day.date, tzid: tz.selectedTzid.tzid });
     };
@@ -25,0 +27,0 @@

src/js/components/DateTimePicker/Details.js

@@ -1,11 +0,9 @@
-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();
@@ -19,8 +17,7 @@
                 </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>
@@ -32,2 +29,2 @@ </div>
 
-export default Details;
+export default memo(Details);

src/js/components/DateTimePicker/SlotButton.js

@@ -7,2 +7,3 @@ import React, { useEffect, useRef } from "react";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
@@ -13,2 +14,3 @@ const SlotButton = ({ slot }) => {
     const [status, dispatchStatus] = useStatus();
+    const [tz] = useTz();
 
@@ -18,3 +20,3 @@ const slotButtonRef = useRef();
     const handleSlotSelection = slot => {
-        dispatchStatus({ type: "SELECT_SLOT", slot });
+        dispatchStatus({ type: "SELECT_SLOT", slot, tzid: tz.selectedTzid.tzid });
     };
@@ -42,3 +44,3 @@
                 moment(slot.start, "YYYY-MM-DDTHH:mm:00Z"),
-                status.selectedTzid.tzid,
+                tz.selectedTzid.tzid,
                 "LT"
@@ -49,8 +51,6 @@ )}
                 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>
@@ -57,0 +57,0 @@ );

src/js/components/DateTimePicker/TimeZoneSelector.js

 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);
@@ -30,4 +28,4 @@ const [focused, setFocused] = useState(() => false);
 
-    const handleOptionSelect = tz => {
-        dispatchStatus({ type: "SELECT_TZID", tz: tz });
+    const handleOptionSelect = selectedTz => {
+        setTz({ ...tz, selectedTzid: selectedTz });
         setShowList(false);
@@ -40,8 +38,7 @@ };
                 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);
 
@@ -51,12 +48,11 @@ break;
                 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);
@@ -86,3 +82,3 @@ break;
             tzListRef.current.focus();
-            setFocused(status.selectedTzid.tzid);
+            setFocused(tz.selectedTzid.tzid);
         }
@@ -93,3 +89,3 @@ }, [showList]);
         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);
@@ -101,6 +97,6 @@ }
 
-    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} `;
         }
@@ -114,16 +110,16 @@
                     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>
@@ -143,3 +139,3 @@ );
             >
-                {tzi18n(status.selectedTzid.tzid, status.locale)}
+                {tzi18n(tz.selectedTzid.tzid, locale)}
                 <svg
@@ -146,0 +142,0 @@ className={

src/js/components/DateTimePicker/Wrapper.js

@@ -16,5 +16,7 @@ import React, { useEffect, useRef } from "react";
 import { useTheme } from "./contexts/theme-context";
+import { useTz } from "./contexts/tz-context";
 
 const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();
+    const [tz] = useTz();
     const theme = useTheme();
@@ -37,3 +39,7 @@ const confirmButtonRef = useRef();
             .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);
@@ -50,2 +56,3 @@ remainingMonths.forEach(month => {
                             slots: res,
+                            tzid: tz.selectedTzid.tzid,
                         });
@@ -72,3 +79,3 @@ });
         if (slotsCount > 0) {
-            dispatchStatus({ type: "RECALCULATE_MONTH_SLOTS" });
+            dispatchStatus({ type: "RECALCULATE_MONTH_SLOTS", tzid: tz.selectedTzid.tzid });
         }
@@ -101,5 +108,11 @@ }, [status.slotFetchCount]);
 
+    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")}>
@@ -106,0 +119,0 @@ <div

tests/DateTimePicker/contexts/status-reducer.test.js

@@ -11,3 +11,2 @@ import { statusReducer } from "../../../src/js/components/DateTimePicker/contexts/status-reducer";
     testQuery,
-    testTzList,
 } from "../dummy-data";
@@ -51,10 +50,2 @@
     tzid: "Europe/London",
-    selectedTzid: {
-        tzid: "Europe/London",
-        offset: "+01:00",
-        offsetMins: 60,
-        name: "London",
-        abbr: "BST",
-    },
-    tzList: testTzList,
     populated: true,
@@ -90,2 +81,3 @@ callback: notification => console.log(notification),
             type: "CONFIRM_SELECTION",
+            tzid: "Europe/London",
         });
@@ -163,2 +155,3 @@
             type: "RECALCULATE_MONTH_SLOTS",
+            tzid: "Europe/London",
         });
@@ -188,2 +181,3 @@
             slots: testSlotsArray,
+            tzid: "Europe/London",
         });
@@ -234,2 +228,3 @@
             slots: testSingleSlotsArray,
+            tzid: "Europe/London",
         });
@@ -275,2 +270,3 @@
             slots: {},
+            tzid: "Europe/London",
         });
@@ -306,2 +302,3 @@
             slots: testSingleSlotsArray,
+            tzid: "Europe/London",
         });
@@ -334,2 +331,3 @@
             slots: testSlotsArrayAdditional,
+            tzid: "Europe/London",
         });
@@ -365,2 +363,3 @@
             slots: testSingleSlotsArray,
+            tzid: "Europe/London",
         });
@@ -602,6 +601,5 @@
             type: "SELECT_TZID",
-            tz: timezone,
+            tzid: timezone.tzid,
         });
 
-        delete oldState.selectedTzid;
         delete oldState.availableDays;
@@ -611,6 +609,5 @@ delete oldState.daySlots;
 
-        const { selectedTzid, availableDays, daySlots, monthlySlots, ...newState } = result;
+        const { availableDays, daySlots, monthlySlots, ...newState } = result;
 
         // These values have been updated
-        expect(selectedTzid).toStrictEqual(timezone);
         expect(availableDays).toStrictEqual([
@@ -617,0 +614,0 @@ "2021-09-29",

tests/DateTimePicker/SlotButton.test.js

@@ -10,2 +10,3 @@ import React from "react";
 import { StatusProvider } from "../../src/js/components/DateTimePicker/contexts/status-context";
+import { TzProvider } from "../../src/js/components/DateTimePicker/contexts/tz-context";
 
@@ -21,13 +22,23 @@ const wrapper = ({ children, status }) => (
         >
-            <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>
@@ -34,0 +45,0 @@ </ThemeProvider>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3214640

increased by0.13%

Number of package files

337

increased by0.3%

Lines of code

26130

increased by0.14%

No dependency changes