cronofy-elements 1.48.2 → 1.49.2

package/src/js/components/AvailabilityViewer/AvailabilityViewer.js

@@ -1,524 +0,0 @@
-import React, { useState, useEffect, useRef, useReducer } from "react";
-import { css } from "@emotion/core";
-
-import * as connections from "../../helpers/connections";
-import { generateDummySlots, getSlotsForPage, calculateSlotHeight } from "../../helpers/slots";
-import { objectIsEmpty, uniqueItems } from "../../helpers/utils";
-import {
-    addKeysToSlots,
-    checkSelectedState,
-    cropDaysToWindow,
-    cropQuery,
-    generatePageSlots,
-    generateStaticPages,
-} from "../../helpers/utils.AvailabilityViewer";
-import { parseStyleOptions } from "../../helpers/theming";
-import { i18nConstructor } from "../../helpers/i18n";
-import { logConstructor } from "../../helpers/logging";
-
-import Footer from "./Footer";
-import WeekWrapper from "./WeekWrapper";
-
-import Container from "../generic/Container";
-import { pageReducer } from "./contexts/page-reducer";
-import { PagesProvider } from "./contexts/page-context";
-import { selectionReducer } from "./contexts/selection-reducer";
-import { SelectionProvider } from "./contexts/selection-context";
-
-export const LoggingContext = React.createContext();
-export const I18nContext = React.createContext();
-export const LimitsContext = React.createContext();
-export const MasterSlotsContext = React.createContext();
-export const SlotsContext = React.createContext();
-export const StatusContext = React.createContext();
-export const ThemeContext = React.createContext();
-
-const AvailabilityViewer = ({ options, error, eventCallback }) => {
-    const [log, setLog] = useState(
-        logConstructor(
-            options.config.logs,
-            "Availability Viewer",
-            options.callback ? options.callback : false
-        )
-    );
-
-    const [selection, dispatchSelection] = useReducer(selectionReducer, {
-        selectedSlots: {},
-    });
-
-    const [theme, setTheme] = useState(() => ({
-        ...parseStyleOptions({ ...options.styles }, "CronofyAvailabilityViewer"),
-        slotHeightCalc: calculateSlotHeight({
-            duration: options.query.required_duration
-                ? options.query.required_duration.minutes
-                : 60,
-            interval: options.config.interval,
-        }),
-        sizes: {
-            breakpoints: {
-                small: 650,
-            },
-            columnWidth: 100,
-            labelWidth: 60,
-            labelWidthSmall: 24,
-            wrapperWidth: false,
-            wrapperUnderflow: 0,
-        },
-    }));
-
-    const [i18n, setI18n] = useState(
-        i18nConstructor({
-            context: "availability_viewer",
-            locale: options.locale,
-            allPhrases: options.translations,
-            tzid: options.tzid,
-        })
-    );
-
-    const [status, setStatus] = useState({
-        customtzid: options.customtzid,
-        error: false,
-        loading: true,
-        locale: options.locale,
-        mode: options.config.mode,
-        boundsControl: options.config.boundsControl,
-        maxSelection: options.config.max_selection_count
-            ? parseInt(options.config.max_selection_count)
-            : false,
-        preloading: false,
-        notificationCallback: options.callback
-            ? options.callback
-            : () => log.warn("No `callback` option has been provided"),
-        slotSelection: options.config.slot_selection,
-        tzid: options.tzid,
-        pagesLoaded: [],
-        startDay: options.config.startDay,
-        allowExpansion: options.config.allowExpansion,
-    });
-
-    const [rawData, setRawData] = useState(false);
-
-    const [slotData, setSlotData] = useState(generateDummySlots());
-
-    const [pages, dispatchPages] = useReducer(
-        pageReducer,
-        generateStaticPages(options.query.query_periods, options.config.startDay, status.tzid)
-    );
-
-    const [slotsForPage, setSlotsForPage] = useState(() =>
-        getSlotsForPage(slotData, pages.current)
-    );
-
-    const [limits, setLimits] = useState({
-        duration: options.query ? options.query.required_duration.minutes : 60,
-        start: options.config.start_time ? options.config.start_time : "09:00",
-        end: options.config.end_time ? options.config.end_time : "17:30",
-        interval: options.config.interval,
-    });
-
-    const debounceTimeout = useRef();
-
-    const triggerSlotsForPage = () => {
-        const slots = getSlotsForPage(slotData, pages.current);
-        setSlotsForPage(slots);
-    };
-
-    // This is a wrapper for our `connections.getAvailability()` call.
-    // We always want to handle errors the same way, but need to handle the response
-    // differently depending on the scenario (checking visible period and updating
-    // the grid, vs. checking all pages to test if *anything* is available).
-    const handleGetAvailability = ({ query, callback }) => {
-        connections
-            .getAvailability(
-                options.token,
-                options.domains.apiDomain,
-                query,
-                `AvailabilityViewer`,
-                status.tzid,
-                options.demo
-            )
-            .then(res => {
-                if (
-                    typeof res.available_slots === "undefined" &&
-                    typeof res.available_periods === "undefined"
-                ) {
-                    throw {
-                        type: 400,
-                        message:
-                            "Check your `token`, `target`, and `query` params are correct. Full details can be found on the Cronofy Elements documention page: https://docs.cronofy.com/developers/ui-elements/",
-                    };
-                }
-                const response =
-                    query.response_format === "overlapping_slots"
-                        ? res.available_slots
-                        : res.available_periods;
-
-                callback(response, query);
-            })
-            .catch(error => {
-                setStatus({
-                    ...status,
-                    error,
-                    loading: false,
-                    preloading: false,
-                });
-
-                const errorMessage = error.message ? error.message : error;
-                const errorOutput = {};
-                if (error.docsSlug) {
-                    errorOutput.docsSlug = error.docsSlug;
-                }
-                if (error.body) {
-                    errorOutput.errorObject = error.body;
-                }
-                log.error(errorMessage, errorOutput);
-                return error;
-            });
-    };
-
-    const handleNormalAvailability = response => {
-        if (response.length < 1) {
-            // There isn't any availability for the selected
-            // page. Check if *anything* is available...
-            checkAllAvailability(options.query);
-        } else {
-            const notification = {
-                notification: { type: "visible_slots" },
-            };
-            status.notificationCallback(notification);
-        }
-
-        // Happy path.
-        // We've checked availability, there *is* availability, and
-        // now we need to show that availability in the grid.
-
-        const slotsWithKeys = addKeysToSlots(response);
-
-        setRawData({ ...rawData, ...slotsWithKeys });
-
-        const pagesLoaded = uniqueItems([...status.pagesLoaded, pages.current]);
-
-        setStatus({
-            ...status,
-            error: false,
-            loading: false,
-            preloading: false,
-            pagesLoaded,
-        });
-    };
-
-    const handleFreeSelectAvailability = response => {
-        const slotsWithKeys = addKeysToSlots(response);
-        setRawData({ ...rawData, ...slotsWithKeys });
-        const pagesLoaded = Array.from(Array(pages.total).keys()).map(i => i + 1);
-        setStatus({
-            ...status,
-            error: false,
-            loading: false,
-            preloading: false,
-            pagesLoaded,
-        });
-    };
-
-    const handleEmptyAvailability = (empty, query) => {
-        // Remove `max_results` from the query
-        const { max_results, ...cleanQuery } = query;
-
-        let notification;
-        if (empty) {
-            // There is no availability for any of the
-            // pages shown in the viewer.
-            notification = {
-                notification: {
-                    type: "no_slots_found",
-                    query: cleanQuery,
-                },
-            };
-        } else {
-            // There is no availability for the page that
-            // is currently visible, but there is at least
-            // one free slot in one of the offscreen pages.
-            notification = {
-                notification: {
-                    type: "no_visible_slots",
-                },
-            };
-        }
-        status.notificationCallback(notification);
-    };
-
-    const checkAllAvailability = (query, days = false) => {
-        // Ensure we're not querying more than 35 days.
-        const croppedDays = cropDaysToWindow(days ? days : pages.days);
-        // NOTE: if `days` is set then we're recurring and `days`
-        // represents the remaining days to be queried. If `days`
-        // is not set then this is the first time round, so we'll
-        // use all the days from `pages`.
-
-        // If there's an `overflow`, we'll want to keep recurring
-        // until all the days have been queried (or until we find
-        // an available slot).
-        const recur = croppedDays.overflow.length > 0;
-
-        // At this point we're only interested in the binary
-        // question of has-availability/has-no-availability.
-        // `max_results: 1` ensures we're making the most
-        // light-weight request we can.
-        const croppedQuery = cropQuery(
-            { ...query, max_results: 1 },
-            {
-                currentPage: pages.current,
-                days: croppedDays.days,
-                startTime: limits.start,
-                endTime: limits.end,
-                tzid: status.tzid,
-            },
-            true // this is where we ignore page divisions
-        );
-
-        if (croppedQuery.query_periods.length < 1) return;
-
-        handleGetAvailability({
-            query: croppedQuery,
-            callback: res => {
-                if (res.length < 1) {
-                    if (recur) {
-                        return checkAllAvailability(query, croppedDays.overflow);
-                    }
-                    return handleEmptyAvailability(true, croppedQuery);
-                }
-                return handleEmptyAvailability(false, croppedQuery);
-            },
-        });
-    };
-
-    const triggerDataFetching = () => {
-        if (!error) {
-            if (status.mode === "free_select") {
-                const freeSelectQuery = {
-                    ...options.query,
-                    max_results: 512,
-                    start_interval: { minutes: limits.interval },
-                };
-
-                return handleGetAvailability({
-                    query: freeSelectQuery,
-                    callback: handleFreeSelectAvailability,
-                });
-            }
-
-            const emptyQuery = options.query.query_periods.length < 1;
-
-            let query = {
-                ...options.query,
-                response_format: "overlapping_slots",
-                start_interval: { minutes: limits.interval },
-            };
-
-            const croppedQuery = cropQuery(query, {
-                currentPage: pages.current,
-                days: pages.days,
-                startTime: limits.start,
-                endTime: limits.end,
-                tzid: status.tzid,
-            });
-
-            if (croppedQuery.query_periods.length > 0) {
-                // Happy Path.
-                // Check the visible page's availability, and pass
-                // the result into `handleNormalAvailability()`
-                handleGetAvailability({
-                    query: croppedQuery,
-                    callback: handleNormalAvailability,
-                });
-            } else {
-                if (!emptyQuery) {
-                    // If we get here, the query_periods are not within the visible window.
-                    // Empty queries will have triggered a `log.warn` earlier.
-                    log.info("The provided query_periods are not within the visible window");
-                    // Passing an empty array to `handleNormalAvailability()`
-                    // to trigger the page being updated when there is an empty week
-                    // in the middle of a query period.
-                    handleNormalAvailability([]);
-                }
-                if (status.slotSelection === "unrestricted" && emptyQuery) {
-                    setRawData([]);
-                }
-                setStatus({
-                    ...status,
-                    error: false,
-                    loading: false,
-                    preloading: false,
-                });
-            }
-        } else {
-            setStatus({
-                ...status,
-                error: {
-                    type: 400,
-                    message: "There was a problem with your initialization options.",
-                },
-                loading: false,
-            });
-        }
-    };
-
-    useEffect(() => {
-        eventCallback(event => {
-            dispatchPages({ type: event });
-        });
-    }, []);
-
-    useEffect(() => {
-        if (!pages.set) return;
-
-        if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
-        debounceTimeout.current = setTimeout(() => {
-            triggerSlotsForPage();
-
-            if (rawData && status.mode === "free_select") {
-                // We're in free_select and we've already got our rawData, so
-                // let's reset the loading graphics and bail...
-                setStatus(status => ({
-                    ...status,
-                    error: false,
-                    loading: false,
-                    preloading: false,
-                }));
-                return;
-            }
-            triggerDataFetching();
-        }, 250);
-    }, [pages]);
-
-    useEffect(() => {
-        const pageNotification = {
-            notification: {
-                type: "displayed_dates_changed",
-                firstDay: slotsForPage[0]["day"],
-                lastDay: slotsForPage[slotsForPage.length - 1]["day"],
-                hasNext: pages.hasNext,
-                hasPrev: pages.hasPrev,
-            },
-        };
-        status.notificationCallback(pageNotification);
-    }, [slotsForPage[0]["day"]]);
-
-    useEffect(() => {
-        triggerSlotsForPage();
-    }, [slotData]);
-
-    useEffect(() => {
-        if (objectIsEmpty(rawData)) return;
-
-        if (status.mode !== "free_select") {
-            setStatus({
-                ...status,
-                error: false,
-                loading: false,
-                preloading: true,
-            });
-            triggerDataFetching();
-        }
-
-        if (status.mode === "free_select") {
-            const slots = generatePageSlots({
-                availablePeriods: rawData,
-                selectedSlots: selection.selectedSlots,
-                limits,
-                pages,
-                tzid: status.tzid,
-                unrestricted: status.slotSelection === "unrestricted",
-                freeSelect: status.mode === "free_select",
-            });
-            let updatedSlots = slots.slots;
-            setSlotData(oldSlots => {
-                if (status.mode === "free_select") {
-                    // If we're overriding the slots state (with `setSlotData`), then
-                    // We'll need to make sure we persit any "selected" slots.
-                    updatedSlots = checkSelectedState(slots.slots, oldSlots);
-                }
-                return updatedSlots;
-            });
-        }
-    }, [limits]);
-
-    useEffect(() => {
-        if (rawData) {
-            const slots = generatePageSlots({
-                availablePeriods: rawData,
-                selectedSlots: selection.selectedSlots,
-                limits,
-                pages,
-                tzid: status.tzid,
-                unrestricted: status.slotSelection === "unrestricted",
-                freeSelect: status.mode === "free_select",
-            });
-            let updatedSlots = slots.slots;
-            setSlotData(oldSlots => {
-                if (status.mode === "free_select") {
-                    // If we're overriding the slots state (with `setSlotData`), then
-                    // We'll need to make sure we persit any "selected" slots.
-                    updatedSlots = checkSelectedState(slots.slots, oldSlots);
-                }
-                return updatedSlots;
-            });
-        }
-    }, [rawData]);
-
-    useEffect(() => {
-        if (rawData && selection.selectedSlots && status.mode === "multi_select") {
-            // Recalculate slots for collision detection
-            const slots = generatePageSlots({
-                availablePeriods: rawData,
-                selectedSlots: selection.selectedSlots,
-                limits,
-                pages,
-                tzid: status.tzid,
-                unrestricted: status.slotSelection === "unrestricted",
-                freeSelect: status.mode === "free_select",
-            });
-            let updatedSlots = slots.slots;
-            setSlotData(updatedSlots);
-        }
-    }, [selection.selectedSlots]);
-
-    return (
-        <LoggingContext.Provider value={log}>
-            <I18nContext.Provider value={i18n}>
-                <ThemeContext.Provider value={[theme, setTheme]}>
-                    <StatusContext.Provider value={[status, setStatus]}>
-                        <MasterSlotsContext.Provider value={[slotData, setSlotData]}>
-                            <SelectionProvider
-                                value={selection.selectedSlots}
-                                dispatch={dispatchSelection}
-                            >
-                                <SlotsContext.Provider value={slotsForPage}>
-                                    <LimitsContext.Provider value={[limits, setLimits]}>
-                                        <Container
-                                            height={"auto"}
-                                            css={css`
-                                                max-width: 100%;
-                                                @media (max-width: 550px) {
-                                                    overflow: hidden;
-                                                }
-                                            `}
-                                            className={`${theme.prefix}`}
-                                        >
-                                            <PagesProvider value={pages} dispatch={dispatchPages}>
-                                                <WeekWrapper />
-                                                <Footer />
-                                            </PagesProvider>
-                                        </Container>
-                                    </LimitsContext.Provider>
-                                </SlotsContext.Provider>
-                            </SelectionProvider>
-                        </MasterSlotsContext.Provider>
-                    </StatusContext.Provider>
-                </ThemeContext.Provider>
-            </I18nContext.Provider>
-        </LoggingContext.Provider>
-    );
-};
-
-export default AvailabilityViewer;

package/src/js/components/AvailabilityViewer/ColumnHeader.js

@@ -1,35 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const ColumnHeader = ({ dayNumber, dayName }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: block;
-                padding: 10px 4px;
-                flex-grow: 1;
-                flex-shrink: 1;
-                width: 100%;
-                text-align: center;
-            `}
-            className={`${theme.prefix}__column-header`}
-        >
-            <span
-                css={css`
-                    @media (max-width: 550px) {
-                        display: block;
-                    }
-                `}
-                className={`${theme.prefix}__column-header__day`}
-            >
-                {dayName}
-            </span>{" "}
-            <span className={`${theme.prefix}__column-header__ordinal`}>{dayNumber}</span>
-        </div>
-    );
-};
-
-export default ColumnHeader;

package/src/js/components/AvailabilityViewer/DayColumn.js

@@ -1,36 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import EmptyColumn from "./EmptyColumn";
-import Overlay from "./Overlay";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const DayColumn = ({ day, columnCount, toggleMultiple = false }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                width: ${theme.sizes.columnWidth}px;
-                height: 100%;
-                flex-grow: 0;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-            `}
-        >
-            {day.slots.length > 0 ? (
-                <Overlay
-                    columnCount={columnCount}
-                    day={day}
-                    stylePrefix={theme.prefix}
-                    toggleMultiple={toggleMultiple}
-                />
-            ) : (
-                <EmptyColumn />
-            )}
-        </div>
-    );
-};
-
-export default DayColumn;

package/src/js/components/AvailabilityViewer/DayColumnDisplay.js

@@ -1,33 +0,0 @@
-import React, { memo, useContext } from "react";
-import { css } from "@emotion/core";
-
-import Slots from "./Slots";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-let DayColumnDisplay = ({ day }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                width: ${theme.sizes.columnWidth}px;
-                height: 100%;
-                flex-grow: 0;
-                display: flex;
-                flex-direction: column;
-                border-right: 1px solid ${theme.colors.hairline};
-                position: relative;
-                &:last-of-type {
-                    border-right: none;
-                }
-            `}
-            className={`${theme.prefix}__grid-column`}
-        >
-            <Slots day={day} />
-        </div>
-    );
-};
-
-DayColumnDisplay = memo(DayColumnDisplay);
-
-export default DayColumnDisplay;

package/src/js/components/AvailabilityViewer/DayColumnWrapper.js

@@ -1,29 +0,0 @@
-import React, { memo, useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-let DayColumnWrapper = ({ children, layer = 1 }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: flex;
-                justify-content: stretch;
-                position: absolute;
-                z-index: ${layer};
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-            `}
-            className={`${theme.prefix}__grid-columns`}
-        >
-            {children}
-        </div>
-    );
-};
-
-DayColumnWrapper = memo(DayColumnWrapper);
-
-export default DayColumnWrapper;

package/src/js/components/AvailabilityViewer/DayLabels.js

@@ -1,41 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import ColumnHeader from "./ColumnHeader";
-
-import { ThemeContext } from "./AvailabilityViewer";
-import { LabelsContext } from "./WeekWrapper";
-
-const DayLabels = () => {
-    const labels = useContext(LabelsContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const headers = labels.days.map(day => (
-        <ColumnHeader key={`header__${day.date}`} dayNumber={day.number} dayName={day.name} />
-    ));
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                justify-content: stretch;
-                width: 100%;
-            `}
-            className={`${theme.prefix}__day-headers`}
-        >
-            <span
-                css={css`
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-grow: 0;
-                    flex-shrink: 0;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-            />
-            {headers}
-        </div>
-    );
-};
-
-export default DayLabels;