cronofy-elements 1.39.2 → 1.41.0

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/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,
     };

package/src/js/helpers/utils.AvailabilityViewer.js

@@ -145,11 +145,16 @@ export const getAllWeekDays = ({ startDate, endDate, startDay = "sunday", tzid }
 };
 
 export const getWeeksInfo = weekdays => {
+    const current = 1;
+    const total = Math.ceil(weekdays.length / 7);
+
     return {
         set: true,
-        current: 1,
         days: weekdays,
-        total: Math.ceil(weekdays.length / 7),
+        total,
+        current,
+        hasNext: current < total,
+        hasPrev: false,
     };
 };
 

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) {

package/src/js/main.js

@@ -50,23 +50,39 @@ export const SlotPicker = options => {
 };
 
 export const AvailabilityViewer = options => {
+    let cb;
+
     // Make sure the correct props are passed to the component
     const renderElement = (key, options) => (
         <AvailabilityViewerApp
             key={key}
             options={{ ...globalOptionFallbacks, ...options }}
             error={options.error}
+            eventCallback={ecb => (cb = ecb)}
         />
     );
     // Generate and render the component. The `return` is important
     // here, as it exposes the `update` method (which can be used
     // after the inital page-load).
-    return generateElementAPI(
+
+    const elementApi = generateElementAPI(
         renderElement,
         options,
         parseAvailabilityViewerOptions,
         "Availability Viewer"
     );
+
+    if (!elementApi) {
+        return false;
+    }
+
+    return {
+        ...elementApi,
+        navigate: {
+            next: () => cb("SET_NEXT_PAGE"),
+            prev: () => cb("SET_PREV_PAGE"),
+        },
+    };
 };
 
 export const AvailabilityRules = options => {

package/tests/AvailabilityViewer/Navigation.test.js

@@ -0,0 +1,130 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+
+import { i18n } from "../mocks/i18n";
+import { theme } from "../mocks/theme";
+
+import { PagesProvider } from "../../src/js/components/AvailabilityViewer/contexts/page-context";
+import {
+    I18nContext,
+    LoggingContext,
+    StatusContext,
+    ThemeContext,
+} from "../../src/js/components/AvailabilityViewer/AvailabilityViewer";
+
+import Navigation from "../../src/js/components/AvailabilityViewer/Navigation";
+
+const wrapper = ({ children, log, status, pages }) => (
+    <LoggingContext.Provider value={log ?? { warn: () => undefined }}>
+        <I18nContext.Provider value={i18n}>
+            <ThemeContext.Provider value={[theme("AvailabilityViewer")]}>
+                <StatusContext.Provider
+                    value={
+                        status ?? [
+                            { pagesLoaded: [], notificationCallback: () => undefined },
+                            () => undefined,
+                        ]
+                    }
+                >
+                    <PagesProvider
+                        {...(pages
+                            ? { value: pages[0], dispatch: pages[1] }
+                            : { value: {}, dispatch: () => undefined })}
+                    >
+                        {children}
+                    </PagesProvider>
+                </StatusContext.Provider>
+            </ThemeContext.Provider>
+        </I18nContext.Provider>
+    </LoggingContext.Provider>
+);
+
+describe("Navigation", () => {
+    it("displays nothing if pages.total is empty", () => {
+        const pages = [{ total: 0 }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it("displays navigation if pages.total > 0", () => {
+        const pages = [{ total: 1 }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const buttonWrapper = container.querySelector(".AvailabilityViewer__navigation");
+
+        expect(buttonWrapper).toBeInTheDocument();
+    });
+
+    it("disables button is hasNext is false", () => {
+        const pages = [{ total: 10, hasNext: false }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
+
+        expect(nextButton).toBeDisabled();
+    });
+
+    it("enables next button if hasNext is true", () => {
+        const pages = [{ total: 10, hasNext: true }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
+
+        expect(nextButton).toBeEnabled();
+    });
+
+    it("calls dispatch to set the next page", () => {
+        const pagesDispatch = jest.fn();
+        const pages = [{ total: 10, hasNext: true }, pagesDispatch];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
+
+        fireEvent.click(nextButton);
+
+        expect(pagesDispatch).toHaveBeenCalledWith({
+            type: "SET_NEXT_PAGE",
+        });
+    });
+
+    it("disables button if hasPrev is false", () => {
+        const pages = [{ total: 10, hasPrev: false }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
+
+        expect(prevButton).toBeDisabled();
+    });
+
+    it("enables button if hasPrev is true", () => {
+        const pages = [{ total: 10, hasPrev: true }];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
+
+        expect(prevButton).toBeEnabled();
+    });
+
+    it("calls dispatch to set the prev page", () => {
+        const pagesDispatch = jest.fn();
+        const pages = [{ total: 10, hasPrev: true }, pagesDispatch];
+
+        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
+
+        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
+
+        fireEvent.click(prevButton);
+
+        expect(pagesDispatch).toHaveBeenCalledWith({
+            type: "SET_PREV_PAGE",
+        });
+    });
+});

package/tests/AvailabilityViewer/contexts/page-reducer.test.js

@@ -0,0 +1,87 @@
+import { pageReducer } from "../../../src/js/components/AvailabilityViewer/contexts/page-reducer";
+
+describe("pageReducer", () => {
+    describe("SET_PREV_PAGE", () => {
+        it("sets prev page", () => {
+            const initialState = {
+                current: 5,
+                total: 10,
+            };
+
+            const action = {
+                type: "SET_PREV_PAGE",
+            };
+
+            const actual = pageReducer(initialState, action);
+
+            expect(actual).toEqual({
+                current: 4,
+                total: 10,
+                hasNext: true,
+                hasPrev: true,
+            });
+        });
+
+        it("sets page to 1 if calculated page is less than it", () => {
+            const initialState = {
+                current: 1,
+                total: 10,
+            };
+
+            const action = {
+                type: "SET_PREV_PAGE",
+            };
+
+            const actual = pageReducer(initialState, action);
+
+            expect(actual).toEqual({
+                current: 1,
+                total: 10,
+                hasNext: true,
+                hasPrev: false,
+            });
+        });
+    });
+
+    describe("SET_NEXT_PAGE", () => {
+        it("sets next page", () => {
+            const initialState = {
+                current: 3,
+                total: 15,
+            };
+
+            const action = {
+                type: "SET_NEXT_PAGE",
+            };
+
+            const actual = pageReducer(initialState, action);
+
+            expect(actual).toEqual({
+                current: 4,
+                total: 15,
+                hasNext: true,
+                hasPrev: true,
+            });
+        });
+
+        it("sets page to the total if calculated page is greater than it", () => {
+            const initialState = {
+                current: 15,
+                total: 15,
+            };
+
+            const action = {
+                type: "SET_NEXT_PAGE",
+            };
+
+            const actual = pageReducer(initialState, action);
+
+            expect(actual).toEqual({
+                current: 15,
+                total: 15,
+                hasNext: false,
+                hasPrev: true,
+            });
+        });
+    });
+});

package/tests/CalendarSync/Active.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { i18n } from "./mocks/i18n";
+import { i18n } from "../mocks/i18n";
 import { theme } from "./mocks/theme";
 import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
 

package/tests/CalendarSync/AddToggle.test.js

@@ -5,7 +5,7 @@ import {
     ThemeContext,
 } from "../../src/js/components/CalendarSync/CalendarSync";
 
-import { i18n } from "./mocks/i18n";
+import { i18n } from "../mocks/i18n";
 import { theme } from "./mocks/theme";
 
 import AddToggle from "../../src/js/components/CalendarSync/AddToggle";

package/tests/CalendarSync/EditToggle.test.js

@@ -5,7 +5,7 @@ import {
     ThemeContext,
 } from "../../src/js/components/CalendarSync/CalendarSync";
 
-import { i18n } from "./mocks/i18n";
+import { i18n } from "../mocks/i18n";
 import { theme } from "./mocks/theme";
 
 import EditToggle from "../../src/js/components/CalendarSync/EditToggle";

package/tests/CalendarSync/Inactive.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { i18n } from "./mocks/i18n";
+import { i18n } from "../mocks/i18n";
 import { theme } from "./mocks/theme";
 import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
 

package/tests/CalendarSync/Pending.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { i18n } from "./mocks/i18n";
+import { i18n } from "../mocks/i18n";
 import { theme } from "./mocks/theme";
 import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
 

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>
 );