cronofy-elements 1.44.0 → 1.46.1

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

@@ -5,7 +5,6 @@ import {
     getMonthObjectsFromQuery,
     parseTzList,
     getInitialSelectedTzid,
-    getMonthsLoadingFromQuery,
     getDurationFromQuery,
 } from "./utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
@@ -18,7 +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";
+import { TzProvider } from "../../contexts/tz-context";
 
 const DateTimePicker = ({ options }) => {
     const statusOptions = useMemo(() => {
@@ -37,7 +36,6 @@ const DateTimePicker = ({ options }) => {
         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 = {
@@ -70,7 +68,6 @@ const DateTimePicker = ({ options }) => {
             query: options.query,
             months,
             monthlyView,
-            monthsLoading,
             selected: false,
             startDay: options.config.startDay,
             focusedDay: options.config.selectedDay,

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const DayButton = ({ day, selected = false, focused = false }) => {
     const i18n = useI18n();

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

@@ -2,11 +2,14 @@ import React, { memo } from "react";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useTheme } from "./contexts/theme-context";
-import TimeZoneSelector from "./TimeZoneSelector";
+import TimeZoneSelector from "../generic/TimeZoneSelector";
+
+import { useTz } from "../../contexts/tz-context";
 
 const Details = ({ duration, locale }) => {
     const i18n = useI18n();
     const theme = useTheme();
+    const [tz, setTz] = useTz();
 
     return (
         <div className={theme.classBuilder("details")}>
@@ -14,7 +17,7 @@ const Details = ({ duration, locale }) => {
                 <p className={theme.classBuilder("details--tz-label")}>
                     <strong>{i18n.t("time_zone")}:</strong>
                 </p>
-                <TimeZoneSelector locale={locale} />
+                <TimeZoneSelector locale={locale} theme={theme} tz={tz} setTz={setTz} />
             </div>
             <div className={theme.classBuilder("details--duration")}>
                 {duration && (

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const SequencedSlotButton = ({ slot }) => {
     const i18n = useI18n();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const SlotButton = ({ slot }) => {
     const i18n = useI18n();

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import moment from "moment";
 
-import { getSequencedSlots, getSlots } from "./utils/slots";
+import { cropPeriodsArbitrarily, getSlots } from "./utils/slots";
 
 import Calendar from "./Calendar";
 import Confirm from "./Confirm";
@@ -14,7 +14,7 @@ import SlotsList from "./SlotsList";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
 const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();
@@ -24,51 +24,109 @@ const Wrapper = () => {
     const [loadingCalendar, setLoadingCalendar] = useState(true);
 
     const confirmButtonRef = useRef();
+    const firstRender = useRef(true);
 
-    useEffect(() => {
-        if (!status.query.query_periods) {
-            return;
-        }
-
-        const fetchMonthSlots = (query, month) => {
-            const fetch = status.sequenced_availability ? getSequencedSlots : getSlots;
+    const fetchMonthSlots = (query, month) => {
+        return getSlots({
+            query,
+            auth: status.auth,
+            tzid: status.tzid,
+            sequence: status.sequenced_availability,
+        })
+            .then(res => {
+                if (res.length < 512) {
+                    dispatchStatus({
+                        type: "SET_SLOTS",
+                        slots: res,
+                        tzid: tz.selectedTzid.tzid,
+                        month,
+                    });
+                    return;
+                }
 
-            return fetch({
-                query,
-                auth: status.auth,
-                tzid: status.tzid,
-            }).then(res => {
                 dispatchStatus({
                     type: "SET_SLOTS",
                     slots: res,
                     tzid: tz.selectedTzid.tzid,
-                    month: month,
                 });
+
+                // If we get here, the API has returned the maximum number
+                // of slots allowed, so we need to crop the query and try
+                // again to ensure we haven't missed any slots.
+                const startOfLastSlot = res[res.length - 1].start;
+                const endOfLastPeriod = query.query_periods[query.query_periods.length - 1].end;
+
+                const boundsForCropping = {
+                    start: startOfLastSlot,
+                    end: endOfLastPeriod,
+                };
+
+                const croppedPeriods = cropPeriodsArbitrarily(
+                    query.query_periods,
+                    boundsForCropping
+                );
+                const croppedQuery = { ...query, query_periods: croppedPeriods };
+
+                // Rerun the query
+                return fetchMonthSlots(croppedQuery, month);
+            })
+            .catch(error => {
+                if (error.type === 422) {
+                    dispatchStatus({
+                        type: "ERROR_LOADING_SLOTS",
+                        error,
+                        month,
+                    });
+                    return;
+                }
+                dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
             });
-        };
+    };
+
+    useEffect(() => {
+        if (!status.query.query_periods) {
+            return;
+        }
 
         const currentMonth = status.months.find(m => m.current);
 
+        const croppedMonths = status.months.filter(el => {
+            return status.monthlyView.monthsInView.some(f => {
+                return f === el.month && el.loading && !el.current;
+            });
+        });
+
         // Get slots for current month
         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, month.month).catch(res => {
-                        dispatchStatus({
-                            type: "ERROR_LOADING_SLOTS",
-                            error: res,
-                            month: month.month,
-                        });
-                    })
-                );
+                // Get slots for remaining months
+                croppedMonths.forEach(month => fetchMonthSlots(month.query, month.month));
             })
             .catch(error => {
                 dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
             });
     }, []);
 
+    useEffect(() => {
+        //stops this from firing on first render which would double up the initial API calls
+        if (firstRender.current) {
+            firstRender.current = false;
+            return;
+        }
+        if (status.monthlyView.monthsInView) {
+            //check if any of the months in view haven't been fetched yet
+            const croppedMonths = status.months.filter(el => {
+                return status.monthlyView.monthsInView.some(f => {
+                    return f === el.month && el.loading === true;
+                });
+            });
+            //if they haven't, fetch them.
+            if (croppedMonths.length > 0) {
+                croppedMonths.forEach(month => fetchMonthSlots(month.query, month.month));
+            }
+        }
+    }, [status.monthlyView.monthsInView]);
+
     useEffect(() => {
         if (!status.slotInjectionPoint) {
             return;
@@ -97,6 +155,15 @@ const Wrapper = () => {
         const finishedCallingAllSlots = fetchCount === monthsCount;
         const hasAvailableDays = status.availableDays.length;
 
+        // No slots found but not all months called so try the next month
+        if (!finishedCallingAllSlots && !hasAvailableDays && fetchCount >= 2) {
+            const croppedMonths = status.months.filter(el => {
+                return el.loading === true;
+            });
+            fetchMonthSlots(croppedMonths[0].query, croppedMonths[0].month);
+            return;
+        }
+
         // No slots available after all queries have been made
         if (finishedCallingAllSlots && !hasAvailableDays) {
             dispatchStatus({ type: "NO_SLOTS_FOUND" });
@@ -117,15 +184,25 @@ const Wrapper = () => {
             return;
         }
 
-        // For allowing only this to be called once
+        // For allowing only this to be called once slots have been fetched
         // 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;
+        if (status.selectedDay && fetchCount >= 1) {
+            const currentMonth = moment(status.selectedDay, "YYYY-MM-DD").format("YYYY-MM");
+            const month = status.months.filter(el => {
+                return el.month === currentMonth;
+            })[0];
+            const monthStillLoading = month ? month.loading : false;
+            const dayIsAvailable = status.availableDays.includes(status.selectedDay);
+
+            //Only set the selectedDay if the month is finished loading or if the day has slots available
+            if (!monthStillLoading || dayIsAvailable) {
+                dispatchStatus({
+                    type: "SELECT_DAY",
+                    day: status.selectedDay,
+                    tzid: tz.selectedTzid.tzid,
+                });
+                return;
+            }
         }
     }, [status.slotFetchCount, status.availableDays]);
 
@@ -159,9 +236,9 @@ const Wrapper = () => {
     }, [tz.selectedTzid.tzid]);
 
     useEffect(() => {
-        if (status.monthsLoading) {
+        if (status.months) {
             for (let month of status.monthlyView.monthsInView) {
-                const monthLoading = status.monthsLoading.find(m => m.month === month);
+                const monthLoading = status.months.find(m => m.month === month);
                 if (monthLoading && monthLoading.loading) {
                     setLoadingCalendar(true);
                     return;
@@ -170,7 +247,7 @@ const Wrapper = () => {
                 }
             }
         }
-    }, [status.monthlyView, status.monthsLoading]);
+    }, [status.monthlyView, status.months]);
 
     return (
         <section className={theme.classBuilder()} style={theme.customProperties}>

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

@@ -9,6 +9,7 @@ import {
     addSequencedSlotsToObject,
 } from "../utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
+import { uniqueItems } from "../../../helpers/utils";
 
 export const statusReducer = (state, action) => {
     const { type, ...actionBody } = action;
@@ -62,9 +63,9 @@ export const statusReducer = (state, action) => {
                     body: action.error.body,
                 },
             };
-            const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+            const months = removeMonthFromLoading(state.months, action.month);
             state.callback(notification);
-            return { ...state, monthsLoading };
+            return { ...state, months };
         }
 
         case "NO_SLOTS_FOUND": {
@@ -99,19 +100,39 @@ export const statusReducer = (state, action) => {
 
         case "SET_SLOTS": {
             if (!action.slots.length > 0) {
-                const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+                const months = removeMonthFromLoading(state.months, action.month);
                 return {
                     ...state,
-                    monthsLoading,
+                    months,
                     slotFetchCount: state.slotFetchCount + 1,
                 };
             }
 
+            // Add action slots to state slots
             const slotsObject = state.sequenced_availability
                 ? addSequencedSlotsToObject(state.slots, action.slots)
                 : addSlotsToObject(state.slots, action.slots);
-            const availableDays = getAvailableDays(slotsObject, action.tzid);
-            const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+
+            // since we already know the available days for state slots
+            // find available days for action.slots and add them to state availableDays
+            // this way we don't have to loop through the entirety of the state slotsObject
+            // every time new slots are rendered
+            const actionSlotsObject = state.sequenced_availability
+                ? addSequencedSlotsToObject({}, action.slots)
+                : addSlotsToObject({}, action.slots);
+
+            const availableDays = uniqueItems([
+                ...state.availableDays,
+                ...getAvailableDays(actionSlotsObject, action.tzid),
+            ]).sort();
+
+            // if month is passed in, we render that month as done
+            // this change is for continiously loading slots as opposed to waiting for entire month
+            // to be loaded
+            let months = state.months;
+            if (action.month) {
+                months = removeMonthFromLoading(state.months, action.month);
+            }
 
             const injectionPoint = state.sequenced_availability
                 ? getLocalDayFromUtc(action.slots[0].sequence[0].start, action.tzid)
@@ -120,7 +141,7 @@ export const statusReducer = (state, action) => {
             return {
                 ...state,
                 availableDays,
-                monthsLoading,
+                months,
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
                 slotInjectionPoint: injectionPoint,

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

@@ -4,7 +4,7 @@ import { getAvailability, getSequencedAvailability } from "../../../helpers/conn
 import { uniqueItems, humanizeTzName } from "../../../helpers/utils";
 import { errorMessages } from "../../../helpers/logging";
 
-import { defaultTimeZones } from "./tz-list";
+import { defaultTimeZones } from "../../../helpers/tz-list";
 
 export const getMonthsCoveredByPeriod = (period, tzid) => {
     const start = moment
@@ -92,6 +92,7 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
         return {
             month,
             current: currentMonth === month,
+            loading: true,
             query: {
                 ...query,
                 query_periods: croppedQueryPeriods,
@@ -101,55 +102,10 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
     });
 };
 
-export const getSlots = ({ query, auth, tzid, slots = [] }) =>
-    getAvailability(
-        auth.token,
-        auth.domains.apiDomain,
-        query,
-        "DateTimePicker",
-        tzid,
-        auth.demo
-    ).then(res => {
-        if (res.status === 422) {
-            throw {
-                type: 422,
-                message: errorMessages[422].message,
-                body: res.errors,
-                docsSlug: errorMessages[422].docsSlug,
-            };
-        }
-        // This will intentionally throw an error if the
-        // result is not in the correct format:
-        const returnedSlots = parseSlotsResult(res);
-
-        const allSlots = [...slots, ...returnedSlots];
-
-        if (returnedSlots.length < 512) return [...slots, ...returnedSlots];
-
-        // If we get here, the API has returned the maximum number
-        // of slots allowed, so we need to crop the query and try
-        // again to ensure we haven't missed any slots.
-
-        const startOfLastSlot = returnedSlots[returnedSlots.length - 1].start;
-        const endOfLastPeriod = query.query_periods[query.query_periods.length - 1].end;
-        const boundsForCropping = {
-            start: startOfLastSlot,
-            end: endOfLastPeriod,
-        };
-        const croppedPeriods = cropPeriodsArbitrarily(query.query_periods, boundsForCropping);
-        const croppedQuery = { ...query, query_periods: croppedPeriods };
-
-        // Rerun the query
-        return getSlots({
-            query: croppedQuery,
-            auth,
-            tzid,
-            slots: allSlots,
-        });
-    });
+export const getSlots = ({ query, auth, tzid, sequence = false }) => {
+    const availabilityFetch = sequence ? getSequencedAvailability : getAvailability;
 
-export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
-    getSequencedAvailability(
+    return availabilityFetch(
         auth.token,
         auth.domains.apiDomain,
         query,
@@ -157,7 +113,7 @@ export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
         tzid,
         auth.demo
     ).then(res => {
-        if (res.errors) {
+        if (res.status === 422) {
             throw {
                 type: 422,
                 message: errorMessages[422].message,
@@ -167,33 +123,9 @@ export const getSequencedSlots = ({ query, auth, tzid, slots = [] }) =>
         }
         // This will intentionally throw an error if the
         // result is not in the correct format:
-        const returnedSlots = parseSlotsResult(res);
-
-        const allSlots = [...slots, ...returnedSlots];
-
-        if (returnedSlots.length < 512) return [...slots, ...returnedSlots];
-
-        // If we get here, the API has returned the maximum number
-        // of slots allowed, so we need to crop the query and try
-        // again to ensure we haven't missed any slots.
-
-        const startOfLastSlot = returnedSlots[returnedSlots.length - 1].start;
-        const endOfLastPeriod = query.query_periods[query.query_periods.length - 1].end;
-        const boundsForCropping = {
-            start: startOfLastSlot,
-            end: endOfLastPeriod,
-        };
-        const croppedPeriods = cropPeriodsArbitrarily(query.query_periods, boundsForCropping);
-        const croppedQuery = { ...query, query_periods: croppedPeriods };
-
-        // Rerun the query
-        return getSequencedSlots({
-            query: croppedQuery,
-            auth,
-            tzid,
-            slots: allSlots,
-        });
+        return parseSlotsResult(res);
     });
+};
 
 export const parseQuery = query => {
     if (!query.bookable_events) {

package/src/js/components/{DateTimePicker → generic}/TimeZoneSelector.js

@@ -1,14 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useTheme } from "./contexts/theme-context";
-
 import { tzi18n } from "../../helpers/i18n";
-import { useTz } from "./contexts/tz-context";
-
-const TimeZoneSelector = ({ locale }) => {
-    const theme = useTheme();
-    const [tz, setTz] = useTz();
 
+const TimeZoneSelector = ({ locale, theme, tz, setTz }) => {
     const [showList, setShowList] = useState(() => false);
     const [focused, setFocused] = useState(() => false);
 
@@ -31,27 +25,26 @@ const TimeZoneSelector = ({ locale }) => {
     };
 
     const handleKeyDown = e => {
+        const list = tz.list;
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
-                const nextFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) + 1;
-                const nextItem =
-                    nextFocusedItemIndex > tz.list.length - 1 ? 0 : nextFocusedItemIndex;
+                const nextFocusedItemIndex = list.findIndex(item => focused === item.tzid) + 1;
+                const nextItem = nextFocusedItemIndex > list.length - 1 ? 0 : nextFocusedItemIndex;
 
-                setFocused(tz.list[nextItem].tzid);
+                setFocused(list[nextItem].tzid);
 
                 break;
             case "ArrowUp":
                 e.preventDefault();
-                const prevFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) - 1;
-                const prevItem =
-                    prevFocusedItemIndex < 0 ? tz.list.length - 1 : prevFocusedItemIndex;
+                const prevFocusedItemIndex = list.findIndex(item => focused === item.tzid) - 1;
+                const prevItem = prevFocusedItemIndex < 0 ? list.length - 1 : prevFocusedItemIndex;
 
-                setFocused(tz.list[prevItem].tzid);
+                setFocused(list[prevItem].tzid);
 
                 break;
             case "Enter":
-                const tz = tz.list.find(item => focused === item.tzid);
+                const tz = list.find(item => focused === item.tzid);
                 handleOptionSelect(tz);
                 break;
             case "Escape":
@@ -124,6 +117,7 @@ const TimeZoneSelector = ({ locale }) => {
             <button
                 className={theme.classBuilder("timezone-selector--button")}
                 id="timezone-button"
+                type="button"
                 aria-haspopup="listbox"
                 aria-label="Choose a timezone"
                 aria-expanded={showList}

package/tests/AvailabilityRules/__snapshots__/AvailabilityRules.test.js.snap

@@ -125,7 +125,7 @@ exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules
 }
 
 .emotion-1 {
-  z-index: 2;
+  z-index: 5;
   position: relative;
   width: 100%;
   display: -webkit-box;
@@ -562,6 +562,7 @@ exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules
   display: -ms-flexbox;
   display: flex;
   width: 100%;
+  padding-right: 1em;
 }
 
 @media (max-width:650px) {
@@ -571,6 +572,11 @@ exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules
 }
 
 .emotion-58 {
+  padding: 0.3em 0.6em 0 0;
+  margin: 0;
+}
+
+.emotion-59 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -598,7 +604,7 @@ exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules
 }
 
 <div
-  class="PREFIX emotion-0"
+  class="PREFIX AR emotion-0"
 >
   <div
     class="PREFIX__calendars emotion-1"
@@ -999,12 +1005,37 @@ exports[`Snapshot test of Availability Rules Elements renders AvailabilityRules
     <div
       class="PREFIX__timezone emotion-57"
     >
-      Time Zone
-      : 
-      London
+      <p
+        class="emotion-58"
+      >
+        Time Zone
+      </p>
+      <div
+        class="PREFIX__timezone-selector AR__timezone-selector"
+      >
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Choose a timezone"
+          class="PREFIX__timezone-selector--button AR__timezone-selector--button"
+          id="timezone-button"
+          type="button"
+        >
+          London
+          <svg
+            aria-hidden="true"
+            class="PREFIX__timezone-selector--icon AR__timezone-selector--icon"
+            viewBox="0 0 13 7"
+          >
+            <path
+              d="M.809 1.315L2.124 0l4.383 4.342L10.876.013l1.315 1.302L6.507 7l-.939-.938z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
     <button
-      class="PREFIX__submit emotion-58"
+      class="PREFIX__submit emotion-59"
       type="button"
     >
       Save new rules

package/tests/DateTimePicker/SequencedSlotButton.test.js

@@ -7,7 +7,7 @@ import SequencedSlotButton from "../../src/js/components/DateTimePicker/Sequence
 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";
+import { TzProvider } from "../../src/js/contexts/tz-context";
 
 const wrapper = ({ children, status }) => (
     <ThemeProvider options={{ name: "DTP" }}>

package/tests/DateTimePicker/SlotButton.test.js

@@ -7,7 +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";
+import { TzProvider } from "../../src/js/contexts/tz-context";
 
 const wrapper = ({ children, status }) => (
     <ThemeProvider options={{ name: "DTP" }}>