cronofy-elements 1.48.2 → 1.49.2

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

@@ -1,281 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import moment from "moment";
-
-import { cropPeriodsArbitrarily, getSlots } from "./utils/slots";
-
-import Calendar from "./Calendar";
-import Confirm from "./Confirm";
-import Error from "./Error";
-import Details from "./Details";
-import Loading from "./Loading";
-import LoadingCalendar from "./LoadingCalendar";
-import NoSlotsFound from "./NoSlotsFound";
-import SlotsList from "./SlotsList";
-
-import { useStatus } from "./contexts/status-context";
-import { useTheme } from "./contexts/theme-context";
-import { useTz } from "../../contexts/tz-context";
-
-const Wrapper = () => {
-    const [status, dispatchStatus] = useStatus();
-    const [tz] = useTz();
-    const theme = useTheme();
-
-    const [loadingCalendar, setLoadingCalendar] = useState(true);
-
-    const confirmButtonRef = useRef();
-    const firstRender = useRef(true);
-
-    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;
-                }
-
-                dispatchStatus({
-                    type: "SET_SLOTS",
-                    slots: res,
-                    tzid: tz.selectedTzid.tzid,
-                });
-
-                // 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 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;
-        }
-
-        const weeksInMonth = status.monthlyView.days;
-        const firstDay = moment(weeksInMonth[0][0].date, "YYYY-MM-DD");
-        const lastWeekInMonth = weeksInMonth[weeksInMonth.length - 1];
-        const lastDay = moment(lastWeekInMonth[lastWeekInMonth.length - 1].date, "YYYY-MM-DD");
-
-        const injectionPoint = moment(status.slotInjectionPoint, "YYYY-MM-DD");
-
-        if (!injectionPoint.isBetween(firstDay, lastDay, "day", "[]")) {
-            return;
-        }
-
-        dispatchStatus({
-            type: "RECALCULATE_MONTH_VIEW",
-            tzid: tz.selectedTzid.tzid,
-        });
-    }, [status.slotInjectionPoint]);
-
-    useEffect(() => {
-        const fetchCount = status.slotFetchCount;
-        const monthsCount = status.months.length;
-        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" });
-            return;
-        }
-
-        // Set selectedDay to first available day
-        if (!status.selectedDay && hasAvailableDays) {
-            dispatchStatus({
-                type: "SELECT_DAY",
-                day: status.availableDays[0],
-                tzid: tz.selectedTzid.tzid,
-            });
-            return;
-        }
-
-        if (!status.selectedDay && !hasAvailableDays) {
-            return;
-        }
-
-        // 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 && !status.selected) {
-            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]);
-
-    useEffect(() => {
-        if (status.selectedDay) {
-            const selectedDayParts = status.selectedDay.split("-");
-            const currentMonthParts = status.monthlyView.month.split("-");
-            const inCurrentMonth = currentMonthParts[1] === selectedDayParts[1];
-
-            if (!inCurrentMonth) {
-                const newMonth = moment(status.selectedDay, "YYYY-MM-DD").format("YYYY-MM");
-                dispatchStatus({
-                    type: "SELECT_MONTH",
-                    month: newMonth,
-                    tzid: tz.selectedTzid.tzid,
-                });
-            }
-        }
-    }, [status.selectedDay]);
-
-    useEffect(() => {
-        if (status.columnView === "confirm") {
-            confirmButtonRef.current.focus();
-        }
-    }, [status.columnView]);
-
-    useEffect(() => {
-        if (tz.selectedTzid.tzid) {
-            dispatchStatus({ type: "SELECT_TZID", tzid: tz.selectedTzid.tzid });
-        }
-    }, [tz.selectedTzid.tzid]);
-
-    useEffect(() => {
-        if (status.months) {
-            for (let month of status.monthlyView.monthsInView) {
-                const monthLoading = status.months.find(m => m.month === month);
-                if (monthLoading && monthLoading.loading) {
-                    setLoadingCalendar(true);
-                    return;
-                } else {
-                    setLoadingCalendar(false);
-                }
-            }
-        }
-    }, [status.monthlyView, status.months]);
-
-    return (
-        <section className={theme.classBuilder()} style={theme.customProperties}>
-            <Details duration={status.duration} locale={status.locale} />
-            <div className={theme.classBuilder("wrapper")}>
-                <div
-                    className={
-                        theme.classBuilder("column--left") +
-                        (status.slotFetchCount < 0
-                            ? ""
-                            : " " + theme.classBuilder(" column--calendar--no-slots"))
-                    }
-                >
-                    <Calendar />
-                    {loadingCalendar && <LoadingCalendar />}
-                </div>
-                <div className={theme.classBuilder("column--right")}>
-                    {status.columnView === "error" && <Error />}
-                    {status.columnView === "loading" && <Loading />}
-                    {status.columnView === "no-slots" && <NoSlotsFound />}
-                    {status.columnView === "slots" && <SlotsList />}
-                    {status.columnView === "confirm" && (
-                        <Confirm confirmButtonRef={confirmButtonRef} />
-                    )}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default Wrapper;

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

@@ -1,19 +0,0 @@
-import React, { createContext, useContext, useReducer } from "react";
-
-import { statusReducer } from "./status-reducer";
-
-const StatusContext = createContext();
-
-export const StatusProvider = ({ children, options }) => {
-    const [status, dispatchStatus] = useReducer(statusReducer, options);
-    return (
-        <StatusContext.Provider value={[status, dispatchStatus]}>{children}</StatusContext.Provider>
-    );
-};
-export const useStatus = () => {
-    const context = useContext(StatusContext);
-    if (context === undefined) {
-        throw new Error("useStatus must be used within a StatusProvider");
-    }
-    return context;
-};

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

@@ -1,276 +0,0 @@
-import moment from "moment-timezone";
-
-import {
-    addSlotsToObject,
-    getSlotsByDay,
-    getAvailableDays,
-    getLocalDayFromUtc,
-    removeMonthFromLoading,
-    addSequencedSlotsToObject,
-} from "../utils/slots";
-import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
-import { uniqueItems } from "../../../helpers/utils";
-
-export const statusReducer = (state, action) => {
-    const { type, ...actionBody } = action;
-
-    const sendSlotNotification = tzid => {
-        const notification = {
-            notification: {
-                type: "slot_selected",
-                slot: state.selected,
-                tzid: tzid,
-            },
-        };
-        state.callback(notification);
-    };
-
-    switch (action.type) {
-        case "CANCEL_SLOT_SELECTION": {
-            return {
-                ...state,
-                columnView: "slots",
-                focusedSlot: state.selected.start,
-                selected: false,
-            };
-        }
-
-        case "CONFIRM_SELECTION": {
-            sendSlotNotification(action.tzid);
-            return state;
-        }
-
-        case "ERROR_GETTING_SLOTS": {
-            const notification = {
-                notification: {
-                    type: "error",
-                    message: "There was an error getting the slots",
-                    body: action.error.body,
-                },
-            };
-            state.callback(notification);
-            return { ...state, error: action.error, columnView: "error" };
-        }
-
-        case "ERROR_LOADING_SLOTS": {
-            const notification = {
-                notification: {
-                    type: "error",
-                    message:
-                        "There was a problem with your availability query. Slots for the month of " +
-                        action.month +
-                        " could not be loaded.",
-                    body: action.error.body,
-                },
-            };
-            const months = removeMonthFromLoading(state.months, action.month);
-            state.callback(notification);
-            return { ...state, months };
-        }
-
-        case "NO_SLOTS_FOUND": {
-            const notification = {
-                notification: {
-                    type: "no_slots_found",
-                },
-            };
-            state.callback(notification);
-            return { ...state, columnView: "no-slots" };
-        }
-
-        case "RECALCULATE_MONTH_VIEW": {
-            const monthlyView = {
-                month: state.monthlyView.month,
-                hasNext: state.monthlyView.hasNext,
-                hasPrev: state.monthlyView.hasPrev,
-                monthsInView: state.monthlyView.monthsInView,
-                days: parseTimeSlots({
-                    slots: state.slots,
-                    month: state.monthlyView.month,
-                    tzid: action.tzid,
-                    startDay: state.startDay,
-                }),
-            };
-
-            return {
-                ...state,
-                monthlyView,
-            };
-        }
-
-        case "SET_SLOTS": {
-            if (!action.slots.length > 0) {
-                const months = removeMonthFromLoading(state.months, action.month);
-                return {
-                    ...state,
-                    months,
-                    slotFetchCount: state.slotFetchCount + 1,
-                };
-            }
-
-            // Add action slots to state slots
-            const slotsObject = state.sequenced_availability
-                ? addSequencedSlotsToObject(state.slots, action.slots, state.query.sequence)
-                : addSlotsToObject(state.slots, action.slots);
-
-            // 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)
-                : getLocalDayFromUtc(action.slots[0].start, action.tzid);
-
-            return {
-                ...state,
-                availableDays,
-                months,
-                slots: slotsObject,
-                slotFetchCount: state.slotFetchCount + 1,
-                slotInjectionPoint: injectionPoint,
-            };
-        }
-
-        case "SET_FOCUS": {
-            return {
-                ...state,
-                focusedDay: action.focusedDay,
-            };
-        }
-
-        case "SELECT_DAY": {
-            const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
-            const focusedSlot = state.sequenced_availability
-                ? daySlots[0]?.reduce((prev, current) => {
-                      return prev.start < current.start ? prev.start : current.start;
-                  })
-                : daySlots[0]?.start;
-
-            return {
-                ...state,
-                selectedDay: action.day,
-                focusedDay: action.day,
-                focusedSlot: focusedSlot,
-                columnView: "slots",
-                daySlots,
-                populated: true,
-            };
-        }
-        case "SELECT_MONTH": {
-            const actionMonthObject = moment(action.month, "YYYY-MM");
-
-            if (
-                !actionMonthObject.isBetween(
-                    state.startDateObject,
-                    state.endDateObject,
-                    "month",
-                    "[]"
-                )
-            ) {
-                return state;
-            }
-
-            const months = state.months.map(month => ({
-                ...month,
-                current: month.month === action.month,
-            }));
-
-            const monthlyView = {
-                month: action.month,
-                hasNext: actionMonthObject.isBefore(state.endDateObject, "month"),
-                hasPrev: actionMonthObject.isAfter(state.startDateObject, "month"),
-                monthsInView: getMonthsInDisplay(action.month, state.startDay),
-                days: parseTimeSlots({
-                    tzid: action.tzid,
-                    slots: state.slots,
-                    month: action.month,
-                    startDay: state.startDay,
-                }),
-            };
-
-            let focusedDay = action.focusedDay ?? false;
-
-            return {
-                ...state,
-                months,
-                focusedDay,
-                monthlyView,
-            };
-        }
-
-        case "SELECT_SLOT": {
-            state = {
-                ...state,
-                selected: action.slot,
-                focusedSlot: action.slot.start,
-            };
-            if (state.mode === "no_confirm") {
-                sendSlotNotification(action.tzid);
-            } else {
-                state.columnView = "confirm";
-            }
-            return state;
-        }
-
-        case "SELECT_TZID": {
-            const availableDays = getAvailableDays(state.slots, action.tzid);
-            const daySlots = getSlotsByDay(state.slots, state.selectedDay, action.tzid);
-
-            const monthlyView = {
-                month: state.monthlyView.month,
-                hasNext: state.monthlyView.hasNext,
-                hasPrev: state.monthlyView.hasPrev,
-                monthsInView: state.monthlyView.monthsInView,
-                days: parseTimeSlots({
-                    slots: state.slots,
-                    month: state.monthlyView.month,
-                    tzid: action.tzid,
-                    startDay: state.startDay,
-                }),
-            };
-
-            state = {
-                ...state,
-                availableDays,
-                daySlots,
-                monthlyView,
-            };
-
-            if (state.selected.start) {
-                const selectedDay = getLocalDayFromUtc(state.selected.start, action.tzid);
-                const daySlots = getSlotsByDay(state.slots, selectedDay, action.tzid);
-
-                state = {
-                    ...state,
-                    daySlots,
-                    selectedDay,
-                    focusedDay: selectedDay,
-                };
-
-                if (state.mode === "no_confirm") sendSlotNotification(action.tzid);
-            }
-
-            return state;
-        }
-        default: {
-            throw new Error(`Unsupported action type: ${action.type}`);
-        }
-    }
-};

package/src/js/components/DateTimePicker/contexts/theme-context.js

@@ -1,33 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-import { parseStyleOptions, parseCustomProperties, classBuilder } from "../helpers/theming";
-
-const ThemeContext = createContext();
-
-export const ThemeProvider = ({ children, options }) => {
-    const style = {
-        color: "red",
-    };
-    const [theme, setTheme] = useState(() => {
-        const styles = parseStyleOptions(options.styles, options.name);
-        const customProperties = parseCustomProperties(styles.colors);
-        return {
-            ...styles,
-            customProperties,
-            classBuilder: classBuilder(styles.prefix, options.name),
-        };
-        // customProperties: setCustomProperties(options.styles)
-    });
-    return (
-        <ThemeContext.Provider style={style} value={theme}>
-            {children}
-        </ThemeContext.Provider>
-    );
-};
-export const useTheme = () => {
-    const context = useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-};

package/src/js/components/DateTimePicker/helpers/theming.js

@@ -1,49 +0,0 @@
-import { objectToArray } from "../../../helpers/utils";
-
-export const logColor = color =>
-    console.log(`%c ${color.padEnd(25, " ")} `, `background: ${color};`);
-
-export const parseStyleOptions = (styleOptions = {}, elementName = "CronofyElement") => {
-    const colors = styleOptions.colors || {};
-    //Coerce a misnamed option in an early version to avoid making a breaking change
-    if (colors.buttonHoverText) {
-        colors.buttonTextHover = colors.buttonTextHover
-            ? colors.buttonTextHover
-            : colors.buttonHoverText;
-        delete colors.buttonHoverText;
-    }
-    const theme = {
-        ...styleOptions,
-        prefix: styleOptions.prefix || elementName,
-        name: elementName,
-        colors: {
-            black: "#000000",
-            white: "#ffffff",
-            neutralDark: "#6f6f6f",
-            neutral: "#999999",
-            neutralLight: "#e4ebf2",
-            button: "#ffffff",
-            buttonConfirm: "#e2fac8",
-            buttonHover: "#c0e992",
-            buttonText: "#000000",
-            buttonTextHover: "#000000",
-            buttonActive: "#7ed321",
-            buttonActiveText: "#000000",
-            ...colors,
-        },
-    };
-    return theme;
-};
-
-export const parseCustomProperties = colors =>
-    objectToArray(colors)
-        .filter(color => typeof color.value === "string")
-        .map(color => ({ [`--${color.key}`]: color.value }))
-        .reduce((acc, color) => ({ ...acc, ...color }), {});
-
-export const classBuilder = (prefix, name) => slugs => {
-    if (!slugs) return `${prefix} ${name}`;
-    const slugsList = slugs.split(" ");
-    const className = slugsList.map(slug => `${prefix}__${slug} ${name}__${slug}`).join(" ");
-    return className;
-};