cronofy-elements 1.38.1 → 1.40.0

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

@@ -49,7 +49,11 @@ export const getMonthObjectsFromQuery = (query, tzid, current = false) => {
         return {
             month,
             current: currentMonth === month,
-            query: { ...query, query_periods: croppedQueryPeriods },
+            query: {
+                ...query,
+                query_periods: croppedQueryPeriods,
+                max_results: query.max_results ?? 512,
+            },
         };
     });
     return monthObjects;

package/src/js/helpers/init.AvailabilityRules.js

@@ -140,6 +140,28 @@ export const parseAvailabilityRulesOptions = (options = {}) => {
 
     const tzid = parseTimezone(options.tzid, "availability-rules", log);
 
+    const keyboardSupportedValues = ["basic"];
+
+    const validateKeyBoardSupport = keyboard_support => {
+        const validKeyboardSupport = keyboardSupportedValues.includes(keyboard_support);
+        if (!validKeyboardSupport) {
+            log.error(
+                `Please provide a valid \`config.keyboard_support\`. \`${keyboard_support}\` is not a supported value.`,
+                {
+                    docsSlug: "availability-rules/#config.keyboard_support",
+                }
+            );
+            return false;
+        } else {
+            return keyboard_support;
+        }
+    };
+
+    const keyboardSupport =
+        typeof config.keyboard_support === "undefined"
+            ? false
+            : validateKeyBoardSupport(config.keyboard_support);
+
     const domains = parseConnectionDomains(
         options.data_center,
         options.api_domain,
@@ -152,6 +174,7 @@ export const parseAvailabilityRulesOptions = (options = {}) => {
     delete config.week_start_day;
     delete config.default_weekly_periods;
     delete config.auto_create_rules;
+    delete config.keyboard_support;
 
     return {
         ...options,
@@ -165,6 +188,7 @@ export const parseAvailabilityRulesOptions = (options = {}) => {
             startDay,
             defaultWeeklyPeriods,
             autoCreateRulesMode,
+            keyboardSupport,
         },
         translations,
     };

package/src/js/helpers/utils.AvailabilityRules.js

@@ -69,6 +69,11 @@ export const parseExtras = (options = {}) => {
     const slotsPerDay = calculateSlotsPerDay(duration, end, start);
     const slotsOffset = calculateSlotsPerDay(duration, start, "00:00");
 
+    let keyboardSupport = false;
+    if (options.config && typeof options.config.keyboardSupport !== "undefined") {
+        keyboardSupport = options.config.keyboardSupport;
+    }
+
     return {
         limits: {
             duration,
@@ -79,6 +84,7 @@ export const parseExtras = (options = {}) => {
             slotsOffset,
         },
         slotHeight,
+        keyboardSupport,
     };
 };
 

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/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

@@ -0,0 +1,107 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+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";
+
+const wrapper = ({ children, status }) => (
+    <ThemeProvider options={{ name: "DTP" }}>
+        <I18nProvider
+            options={{
+                locale: "en",
+                slug: "date_time_picker",
+                tzid: "Europe/London",
+            }}
+        >
+            <StatusProvider
+                options={{
+                    selected: false,
+                    selectedTzid: {
+                        tzid: "Europe/London",
+                    },
+                    ...status,
+                }}
+            >
+                {children}
+            </StatusProvider>
+        </I18nProvider>
+    </ThemeProvider>
+);
+
+describe("SlotButton", () => {
+    const slot = {
+        start: "2020-10-05T09:30:00Z",
+        end: "2020-10-05T10:00:00Z",
+    };
+
+    it("displays slot button with time in BST", () => {
+        const { container } = render(<SlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector(".DTP__time-slot");
+
+        expect(button).toBeInTheDocument();
+        expect(button.innerHTML).toEqual(expect.stringContaining("10:30 AM - 11:00 AM (BST)"));
+    });
+
+    it("displays slot button with time in GMT", () => {
+        const slot = {
+            start: "2020-11-05T09:30:00Z",
+            end: "2020-11-05T10:00:00Z",
+        };
+
+        const { container } = render(<SlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector(".DTP__time-slot");
+
+        expect(button).toBeInTheDocument();
+        expect(button.innerHTML).toEqual(expect.stringContaining("9:30 AM - 10:00 AM (GMT)"));
+    });
+
+    it("focuses if slot start time matches status.focusedSlot", () => {
+        const status = {
+            focusedSlot: slot.start,
+            selected: false,
+        };
+
+        const { container } = render(<SlotButton slot={slot} />, {
+            wrapper: e => wrapper({ ...e, status }),
+        });
+
+        const button = container.querySelector("button");
+
+        expect(button).toHaveFocus();
+    });
+
+    it("sets the slot to selected when button is clicked", () => {
+        const { container } = render(<SlotButton slot={slot} />, { wrapper });
+
+        const button = container.querySelector("button");
+
+        expect(button).not.toHaveClass("DTP_time-slot--selected");
+
+        fireEvent.click(button);
+
+        expect(button).toHaveFocus();
+        expect(button.classList).toContain("DTP__time-slot--selected");
+    });
+
+    it("shows selected className if preselected slot exists", () => {
+        const status = {
+            focusedSlot: slot.start,
+            selected: slot,
+        };
+
+        const { container } = render(<SlotButton slot={slot} />, {
+            wrapper: e => wrapper({ ...e, status }),
+        });
+
+        const button = container.querySelector("button");
+
+        expect(button).toHaveFocus();
+        expect(button.classList).toContain("DTP__time-slot--selected");
+    });
+});

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

@@ -1,5 +1,7 @@
 import { statusReducer } from "../../../src/js/components/DateTimePicker/contexts/status-reducer";
 import {
+    testSingleSlotsArray,
+    testSingleSlotsObject,
     testSlotsObject,
     testSlotsObjectPartial,
     testSlotsArray,
@@ -212,6 +214,46 @@ describe("Date Time Picker status reducer", () => {
         expect(newState).toStrictEqual(oldState);
     });
 
+    it("SET_INITIAL_SLOTS when there is only one available slot", async () => {
+        const oldState = {
+            ...startingState,
+            selectedDay: false,
+            focusedDay: false,
+            slots: {},
+            availableDays: [],
+            slotFetchCount: 0,
+        };
+        const result = statusReducer(oldState, {
+            type: "SET_INITIAL_SLOTS",
+            slots: testSingleSlotsArray,
+        });
+
+        delete oldState.selectedDay;
+        delete oldState.focusedDay;
+        delete oldState.slots;
+        delete oldState.availableDays;
+        delete oldState.slotFetchCount;
+
+        const {
+            selectedDay,
+            focusedDay,
+            slots,
+            availableDays,
+            slotFetchCount,
+            ...newState
+        } = result;
+
+        // These values have been updated
+        expect(selectedDay).toBe("2021-09-29");
+        expect(focusedDay).toBe("2021-09-29");
+        expect(slots).toStrictEqual(testSingleSlotsObject);
+        expect(availableDays).toStrictEqual(["2021-09-29"]);
+        expect(slotFetchCount).toBe(1);
+
+        // All other values are unchanged
+        expect(newState).toStrictEqual(oldState);
+    });
+
     it("SET_DEFAULT_SLOTS", async () => {
         const oldState = {
             ...startingState,
@@ -243,6 +285,36 @@ describe("Date Time Picker status reducer", () => {
         expect(newState).toStrictEqual(oldState);
     });
 
+    it("SET_DEFAULT_SLOTS when there is only one available slot", async () => {
+        const oldState = {
+            ...startingState,
+            selectedDay: false,
+            focusedDay: false,
+            slots: {},
+            slotFetchCount: 0,
+        };
+        const result = statusReducer(oldState, {
+            type: "SET_DEFAULT_SLOTS",
+            slots: testSingleSlotsArray,
+        });
+
+        delete oldState.selectedDay;
+        delete oldState.focusedDay;
+        delete oldState.slots;
+        delete oldState.slotFetchCount;
+
+        const { selectedDay, focusedDay, slots, slotFetchCount, ...newState } = result;
+
+        // These values have been updated
+        expect(selectedDay).toBe("2021-09-29");
+        expect(focusedDay).toBe("2021-09-29");
+        expect(slots).toStrictEqual(testSingleSlotsObject);
+        expect(slotFetchCount).toBe(1);
+
+        // All other values are unchanged
+        expect(newState).toStrictEqual(oldState);
+    });
+
     it("SET_ADDITIONAL_SLOTS", async () => {
         const oldState = {
             ...startingState,
@@ -270,6 +342,36 @@ describe("Date Time Picker status reducer", () => {
         expect(newState).toStrictEqual(oldState);
     });
 
+    it("SET_ADDITIONAL_SLOTS when there is only one available slot", async () => {
+        const oldState = {
+            ...startingState,
+            selectedDay: false,
+            focusedDay: false,
+            slots: {},
+            slotFetchCount: 0,
+        };
+        const result = statusReducer(oldState, {
+            type: "SET_ADDITIONAL_SLOTS",
+            slots: testSingleSlotsArray,
+        });
+
+        delete oldState.selectedDay;
+        delete oldState.focusedDay;
+        delete oldState.slots;
+        delete oldState.slotFetchCount;
+
+        const { selectedDay, focusedDay, slots, slotFetchCount, ...newState } = result;
+
+        // These values have been updated
+        expect(selectedDay).toBe("2021-09-29");
+        expect(focusedDay).toBe("2021-09-29");
+        expect(slots).toStrictEqual(testSingleSlotsObject);
+        expect(slotFetchCount).toBe(1);
+
+        // All other values are unchanged
+        expect(newState).toStrictEqual(oldState);
+    });
+
     it("SET_FOCUS", async () => {
         const oldState = { ...startingState };
         const date = "2021-09-29";
@@ -311,6 +413,7 @@ describe("Date Time Picker status reducer", () => {
                         },
                     ],
                     required_duration: { minutes: 60 },
+                    max_results: 512,
                 },
             },
             {
@@ -325,6 +428,7 @@ describe("Date Time Picker status reducer", () => {
                         },
                     ],
                     required_duration: { minutes: 60 },
+                    max_results: 512,
                 },
             },
         ];
@@ -408,6 +512,7 @@ describe("Date Time Picker status reducer", () => {
                 month: "2021-09",
                 current: false,
                 query: {
+                    max_results: 512,
                     participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
                     query_periods: [
                         {
@@ -422,6 +527,7 @@ describe("Date Time Picker status reducer", () => {
                 month: "2021-10",
                 current: true,
                 query: {
+                    max_results: 512,
                     participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
                     query_periods: [
                         {