cronofy-elements 1.48.2 → 1.49.2

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

@@ -1,125 +0,0 @@
-import moment from "moment-timezone";
-
-import { getAvailableDays } from "./slots";
-import { getDayOffset } from "../../../helpers/utils.AvailabilityViewer";
-
-export const calculateMonthNav = months => {
-    const currentMonth = months.findIndex(month => month.current);
-    const prev = currentMonth >= 1 ? months[currentMonth - 1].month : false;
-    const next = currentMonth < months.length - 1 ? months[currentMonth + 1].month : false;
-
-    const current = moment(months[currentMonth].month, "YYYY-MM");
-    return {
-        prev,
-        current,
-        next,
-    };
-};
-
-export const createDayObject = ({ month, dayIndex, current = false, availableDays }) => {
-    const parsedIndex = dayIndex.toString().padStart(2, "0");
-    const dayFormat = `YYYY-MM-[${parsedIndex}]`;
-    const date = month.format(dayFormat);
-    const available = availableDays.includes(date);
-    return {
-        date,
-        currentMonth: current,
-        isAvailable: available,
-    };
-};
-
-const weekDayOffset = (monthObject, startDay) => {
-    // Belt and braces: we *need* this value to be a lowercase day-name in English
-    // regardless of whatever locale or format moment might try to give us if left
-    // to its own devices.
-    const firstWeekday = monthObject.clone().locale("en").format("dddd").toLowerCase();
-    const offsetFromStartOfWeek = getDayOffset(firstWeekday, startDay);
-    return offsetFromStartOfWeek;
-};
-
-export const getDatesInMonthDisplay = (month, availableDays, startDay) => {
-    const monthObject = moment(month, "YYYY-MM");
-    const daysInMonth = monthObject.daysInMonth();
-    const offset = weekDayOffset(monthObject, startDay);
-
-    const result = [];
-
-    const prevMonthObject = monthObject.clone().add(-1, "months");
-    const prevDaysInMonth = prevMonthObject.daysInMonth();
-
-    // Add prev overflow dates...
-    for (let j = offset - 1; j >= 0; j--) {
-        const day = createDayObject({
-            month: prevMonthObject,
-            dayIndex: prevDaysInMonth - j,
-            availableDays,
-        });
-        result.push(day);
-    }
-
-    // Add current month's dates
-    for (let i = 1; i <= daysInMonth; i++) {
-        const day = createDayObject({
-            month: monthObject,
-            dayIndex: i,
-            current: true,
-            availableDays,
-        });
-        result.push(day);
-    }
-
-    // Overflow dates for next month to create consistent grid
-    if (result.length < 42) {
-        const daysLeft = 42 - result.length;
-
-        const nextMonthObject = monthObject.clone().add(1, "months");
-
-        for (let k = 1; k <= daysLeft; k++) {
-            const day = createDayObject({
-                month: nextMonthObject,
-                dayIndex: k,
-                availableDays,
-            });
-            result.push(day);
-        }
-    }
-
-    //sort days into rows
-    const rows = result.reduce((rows, key, index) => {
-        return (index % 7 == 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows;
-    }, []);
-
-    return rows;
-};
-
-export const getMonthsInDisplay = (month, startDay) => {
-    const monthObject = moment(month, "YYYY-MM");
-    const daysInMonth = monthObject.daysInMonth();
-    const offset = weekDayOffset(monthObject, startDay);
-
-    const result = [month];
-    const daysLength = daysInMonth + offset;
-
-    //Add prev month if in display...
-    if (offset > 0) {
-        const prevMonth = monthObject.clone().add(-1, "months").format("YYYY-MM");
-        result.push(prevMonth);
-    }
-
-    // Add next month if in display
-    if (daysLength < 42) {
-        const nextMonth = monthObject.clone().add(1, "months").format("YYYY-MM");
-        result.push(nextMonth);
-    }
-
-    return result;
-};
-
-export const parseTimeSlots = ({ slots, month, tzid, startDay }) => {
-    //Get array of available days
-    const availableDays = getAvailableDays(slots, tzid);
-
-    const result = getDatesInMonthDisplay(month, availableDays, startDay);
-
-    return result;
-};

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

@@ -1,288 +0,0 @@
-import moment from "moment-timezone";
-
-import { getAvailability, getSequencedAvailability } from "../../../helpers/connections";
-import { uniqueItems, humanizeTzName } from "../../../helpers/utils";
-import { errorMessages } from "../../../helpers/logging";
-
-import { defaultTimeZones } from "../../../helpers/tz-list";
-
-export const getMonthsCoveredByPeriod = (period, tzid) => {
-    const start = moment
-        .utc(period.start, "YYYY-MM-DDTHH:mm:00Z")
-        .tz(tzid)
-        .local()
-        .startOf("month");
-    const end = moment.utc(period.end, "YYYY-MM-DDTHH:mm:00Z").tz(tzid).local().startOf("month");
-    const monthDiff = end.diff(start, "months");
-
-    const months = [...Array(monthDiff + 1).keys()].map(monthIndex => {
-        return start.clone().add(monthIndex, "months").format("YYYY-MM");
-    });
-
-    return months;
-};
-
-export const getMonthsFromQuery = (periods = [], tzid) => {
-    const months = periods
-        .map(period => getMonthsCoveredByPeriod(period, tzid))
-        // getMonthsCoveredByPeriod returns an array, so flatten them...
-        .reduce((acc, curr) => [...acc, ...curr], []);
-
-    const uniqueMonths = uniqueItems(months);
-
-    return uniqueMonths;
-};
-
-export const getDurationFromQuery = query => {
-    const duration = query.sequence ? false : query.required_duration.minutes;
-
-    return duration;
-};
-
-export const getMonthsLoadingFromQuery = (query, tzid) => {
-    if (!query.query_periods || !query.query_periods.length) {
-        return [
-            {
-                month: moment.tz().format("YYYY-MM"),
-                loading: true,
-            },
-        ];
-    }
-    const monthStrings = getMonthsFromQuery(query.query_periods, tzid);
-    const monthObjects = monthStrings.map(month => {
-        return {
-            month,
-            loading: true,
-        };
-    });
-    return monthObjects;
-};
-
-export const removeMonthFromLoading = (monthsLoading, month) => {
-    const monthPos = monthsLoading.findIndex(m => m.month === month);
-    const newMonthsLoading = [...monthsLoading];
-    if (monthsLoading && monthPos >= 0) {
-        newMonthsLoading[monthPos]["loading"] = false;
-    }
-    return newMonthsLoading;
-};
-
-export const getCurrentMonth = query => ({
-    month: moment.tz().format("YYYY-MM"),
-    current: true,
-    query,
-});
-
-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 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, "month", "[]")
-            ? current
-            : monthStrings[0];
-
-    return monthStrings.map(month => {
-        const croppedQueryPeriods = cropPeriodsByMonth(query.query_periods, month, tzid);
-        return {
-            month,
-            current: currentMonth === month,
-            loading: true,
-            query: {
-                ...query,
-                query_periods: croppedQueryPeriods,
-                max_results: query.max_results ?? 512,
-            },
-        };
-    });
-};
-
-export const getSlots = ({ query, auth, tzid, sequence = false }) => {
-    const availabilityFetch = sequence ? getSequencedAvailability : getAvailability;
-
-    return availabilityFetch(
-        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:
-        return parseSlotsResult(res);
-    });
-};
-
-export const parseQuery = query => {
-    if (!query.bookable_events) {
-        return {
-            response_format: "overlapping_slots",
-            ...query,
-        };
-    }
-    return query;
-};
-
-export const parseSlotsResult = res => {
-    let returnedSlots;
-    if (typeof res.available_bookable_events !== "undefined") {
-        returnedSlots = res.available_bookable_events;
-    } else if (typeof res.sequences !== "undefined") {
-        returnedSlots = res.sequences;
-    } else {
-        returnedSlots = res.available_slots;
-
-        if (typeof res.available_slots === "undefined") {
-            throw {
-                type: 400,
-                message: "There was a problem loading the data.",
-            };
-        }
-    }
-    return returnedSlots;
-};
-
-export const trimPeriod = (period, start, end) => {
-    const croppedStart = period.start < start ? start : period.start;
-    const croppedEnd = period.end > end ? end : period.end;
-    return {
-        start: croppedStart,
-        end: croppedEnd,
-    };
-};
-
-export const getMonthBounds = (month, tzid) => {
-    const momentObject = moment.tz(month, "YYYY-MM", tzid);
-    const start = momentObject.clone().startOf("month").utc().format("YYYY-MM-DDTHH:mm[:00Z]");
-    const end = momentObject.clone().endOf("month").utc().format("YYYY-MM-DDTHH:mm[:00Z]");
-    return { start, end };
-};
-
-export const cropPeriodsByMonth = (periods, month, tzid) => {
-    const bounds = getMonthBounds(month, tzid);
-    const croppedPeriods = cropPeriodsArbitrarily(periods, bounds);
-    return croppedPeriods;
-};
-
-export const cropPeriodsArbitrarily = (periods, bounds) => {
-    const croppedPeriods = periods
-        .map(period => {
-            if (period.end < bounds.start) return false;
-            if (period.start > bounds.end) return false;
-            return trimPeriod(period, bounds.start, bounds.end);
-        })
-        .filter(period => period);
-    return croppedPeriods;
-};
-
-export const addSlotsToObject = (slotsObject, newSlotsArray) => {
-    newSlotsArray.forEach(slot => {
-        slotsObject[slot.start] = slot;
-    });
-    return slotsObject;
-};
-
-export const addSequenceTitle = (slot, sequence) => {
-    if (sequence.length > 0) {
-        const title = sequence.find(s => {
-            return s.sequence_id === slot.sequence_id;
-        }).sequence_title;
-        return title;
-    }
-};
-
-export const addSequencedSlotsToObject = (slotsObject, newSlotsArray, sequence) => {
-    newSlotsArray.forEach(slot => {
-        const formattedSlot = slot.sequence.map(s => {
-            const title = addSequenceTitle(s, sequence);
-            return title ? { ...s, sequence_title: title } : s;
-        });
-        const startArray = slot.sequence.map(a => a.start);
-        const start = startArray.reduce((prev, current) => {
-            return prev < current ? prev : current;
-        });
-        slotsObject[start] = formattedSlot;
-    });
-    return slotsObject;
-};
-
-export const getSlotsByDay = (slots, day, tzid) => {
-    const slotKeys = Object.keys(slots);
-    const dayObject = moment.tz(day, "YYYY-MM-DD", tzid);
-    const startTime = dayObject.clone().utc().format("YYYY-MM-DDTHH:mm[:00Z]");
-    const endTime = dayObject.clone().endOf("day").utc().format("YYYY-MM-DDTHH:mm[:00Z]");
-    const matchingKeys = slotKeys.filter(key => key >= startTime && key <= endTime);
-    const matchingSlots = matchingKeys.map(key => slots[key]);
-    return matchingSlots;
-};
-
-export const getLocalDayFromUtc = (date, tzid) =>
-    moment.utc(date, "YYYY-MM-DDTHH:mm:00Z").tz(tzid).format("YYYY-MM-DD");
-
-export const getFirstAvailableDay = (slots, tzid) => {
-    const first = Object.keys(slots)[0];
-    if (!first) return false;
-    return getLocalDayFromUtc(first, tzid);
-};
-
-export const getAvailableDays = (slots, tzid) => {
-    const keys = Object.keys(slots);
-    const dates = keys.map(key => getLocalDayFromUtc(key, tzid));
-    const array = uniqueItems(dates).sort();
-    return array;
-};
-
-export const createTzObject = tzid => {
-    const name = humanizeTzName(tzid);
-
-    const zone = moment.tz(tzid);
-
-    return {
-        tzid: tzid,
-        offset: zone.format("Z"),
-        offsetMins: zone.utcOffset(),
-        name: name,
-        abbr: zone.zoneAbbr(),
-    };
-};
-
-export const parseTzList = (timezones, tzid) => {
-    const tzList = timezones ? timezones : moment.tz.names();
-    const filtered = timezones ? timezones : tzList.filter(item => defaultTimeZones.includes(item));
-
-    const result = [];
-
-    filtered.map(tz => {
-        const item = createTzObject(tz);
-        result.push(item);
-    });
-
-    const isInList = result.findIndex(item => tzid === item.tzid);
-
-    if (isInList <= -1) {
-        const item = createTzObject(tzid);
-        result.push(item);
-    }
-
-    result.sort((tzA, tzB) => tzA.offsetMins - tzB.offsetMins);
-    return result;
-};
-
-export const getInitialSelectedTzid = (tzList, tzid) => {
-    const result = tzList.find(tz => tzid === tz.tzid);
-    return result;
-};

package/src/js/components/SlotPicker/Confirm.js

@@ -1,160 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import moment from "moment-timezone";
-
-import Button from "../generic/Button";
-
-import { I18nContext, ThemeContext, StatusContext } from "./SlotPicker";
-
-import { buttonReset } from "../../styles/utils";
-
-const Confirm = ({ back, confirm }) => {
-    const [status] = useContext(StatusContext);
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    const details = status.selected;
-
-    return (
-        <div
-            css={css`
-                padding: ${theme.padding};
-                display: flex;
-                justify-content: center;
-                flex-grow: 1;
-                align-items: center;
-                text-align: center;
-
-                flex-grow: 1;
-                flex-direction: column;
-                padding-bottom: 60px;
-            `}
-            className={`${theme.prefix}__confirmation-wrapper`}
-        >
-            <div
-                className={`${theme.prefix}__slots-header`}
-                css={css`
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    position: relative;
-                    height: 22px;
-                    margin-bottom: 20px;
-                    width: 100%;
-                `}
-            >
-                <button
-                    type="button"
-                    css={css`
-                        ${buttonReset};
-                        display: block;
-                        padding: 4px;
-                        height: 22px;
-                        width: 22px;
-                        position: absolute;
-                        top: 50%;
-                        left: 0;
-                        transform: translateY(-50%);
-                    `}
-                    onClick={back}
-                >
-                    <svg
-                        css={css`
-                            fill: ${theme.colors.grey};
-                            display: block;
-                            width: 18px;
-                            height: 18px;
-                            transform: rotate(-90deg);
-                        `}
-                        className={`${theme.prefix}__slots-icon ${theme.prefix}__slots-icon--back`}
-                        viewBox="0 0 512 364"
-                    >
-                        <path d="M323.114,3.795 C327.274,-0.365 334.037,-0.365 338.197,3.795 L338.197,3.795 L508.466432,174.062857 C510.636034,176.015872 512.001,178.845594 512.001,181.992 C512.001,184.915901 510.822508,187.566325 508.914941,189.493853 L508.864,189.545 L508.864,189.545 L508.84,189.568 L338.198,360.211 C336.21425,362.19475 333.624354,363.237137 331.008322,363.320559 L330.667,363.326 C327.936,363.326 325.206,362.28 323.115,360.211 C318.955,356.051 318.955,349.288 323.115,345.128 L323.115,345.128 L475.583,192.658 L10.667,192.659 C4.87396774,192.659 0.154449792,188.032918 0.00371430969,182.276022 L0,181.992 C0,176.104 4.779,171.325 10.667,171.325 L10.667,171.325 L475.559,171.324 L323.114,18.878 C319.028286,14.7922857 318.955327,8.19570568 322.895122,4.02031761 Z"></path>
-                    </svg>
-                    <span className="visuallyhidden">{i18n.t("back")}</span>
-                </button>
-                <span
-                    css={css`
-                        display: block;
-                        padding: 0 10px 0 0;
-                        line-height: 1;
-                    `}
-                    className={`${theme.prefix}__slots-heading`}
-                >
-                    {i18n.ftz(moment(details.start), "dddd Do MMMM")}
-                </span>
-            </div>
-            <div
-                css={css`
-                    width: 100%;
-                    margin: 30px auto 0;
-                `}
-                className={`${theme.prefix}__confirmation`}
-            >
-                <div
-                    css={css`
-                        margin-bottom: 16px;
-                        border: 1px solid ${theme.colors.hairline};
-                        padding: 16px;
-                        width: 100%;
-                        border-radius: 4px;
-                    `}
-                    className={`${theme.prefix}__confirmation-summary`}
-                >
-                    {i18n.timeToSlotString(details.start)} – {i18n.timeToSlotString(details.end)}
-                </div>
-                <div
-                    css={css`
-                        margin: 0 auto;
-                        width: 10em;
-                    `}
-                    className={`${theme.prefix}__confirmation-buttons`}
-                >
-                    <Button
-                        styleOverrides={theme}
-                        styles={css`
-                            width: 100%;
-                            margin-bottom: 0.5em;
-                            background: ${theme.colors.primary};
-                            color: ${theme.colors.white};
-                            border-radius: 4px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                            position: relative;
-                            &:hover {
-                                background: ${theme.colors.primaryDark};
-                            }
-                        `}
-                        className={`${theme.prefix}__confirmation-button`}
-                        onClick={() => confirm(details)}
-                    >
-                        {i18n.t("confirm")}
-                    </Button>
-                    <Button
-                        styleOverrides={theme}
-                        styles={css`
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                            width: 100%;
-                            border-radius: 4px;
-                            border: 1px solid ${theme.colors.hairline};
-                            transition: background 0.2s, border 0.2s;
-                            position: relative;
-                            background: ${theme.colors.greyPale};
-                            &:hover {
-                                background: ${theme.colors.greyLight};
-                            }
-                        `}
-                        className={`${theme.prefix}__confirmation-button--back`}
-                        onClick={back}
-                    >
-                        {i18n.t("cancel")}
-                    </Button>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Confirm;

package/src/js/components/SlotPicker/Days.js

@@ -1,58 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import Slots from "./Slots";
-
-import { I18nContext, ThemeContext, DaysContext } from "./SlotPicker";
-
-const Days = ({ selectDay }) => {
-    const days = useContext(DaysContext);
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                padding: ${theme.padding};
-                width: 100%;
-                display: flex;
-                justify-content: stretch;
-                flex-direction: column;
-            `}
-            className={`${theme.prefix}__slots-list ${theme.prefix}__slots-list--days`}
-        >
-            <div
-                className={`${theme.prefix}__slots-header`}
-                css={css`
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    position: relative;
-                    height: 22px;
-                    margin-bottom: 10px;
-                `}
-            >
-                <span
-                    css={css`
-                        display: block;
-                        padding: 0 10px 0 0;
-                        line-height: 1;
-                    `}
-                    className={`${theme.prefix}__slots-heading`}
-                >
-                    {i18n.t("select_day")}
-                </span>
-            </div>
-            <div
-                css={css`
-                    flex-grow: 1;
-                    display: flex;
-                `}
-            >
-                <Slots periods={days} confirm={selectDay} />
-            </div>
-        </div>
-    );
-};
-
-export default Days;

package/src/js/components/SlotPicker/Slot.js

@@ -1,72 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-
-import { I18nContext, ThemeContext } from "./SlotPicker";
-
-const Slot = ({ period, confirm }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    let slotStyles = css`
-        ${buttonReset};
-
-        position: relative;
-        display: block;
-        width: 100%;
-        padding: 10px 10px;
-        cursor: pointer;
-        transition: background 0.2s, color 0.2s;
-        font-size: inherit;
-        background: ${theme.colors.greyPale};
-        border: 1px solid ${theme.colors.hairline};
-        border-radius: 4px;
-        margin-bottom: 10px;
-        &:hover {
-            background: ${theme.colors.greyLight};
-        }
-    `;
-
-    let unavailableSlotStyles = css`
-        ${slotStyles};
-        border-color: transparent;
-        cursor: default;
-        &:hover {
-            background: inherit;
-        }
-    `;
-
-    return (
-        <React.Fragment>
-            {period.value ? (
-                <button
-                    type="button"
-                    css={slotStyles}
-                    className={`${theme.prefix}__slot`}
-                    onClick={() => confirm(period.value)}
-                >
-                    {period.value.start ? (
-                        <span>
-                            {i18n.timeToSlotString(period.value.start)} –{" "}
-                            {i18n.timeToSlotString(period.value.end)}
-                        </span>
-                    ) : (
-                        <span>{i18n.dateToSlotStringWithoutTzShift(period.value)}</span>
-                    )}
-                </button>
-            ) : (
-                <button
-                    type="button"
-                    css={unavailableSlotStyles}
-                    className={`${theme.prefix}__slot--unavailble`}
-                    onClick={() => confirm(period)}
-                >
-                    {i18n.t("not_applicable")}
-                </button>
-            )}
-        </React.Fragment>
-    );
-};
-
-export default Slot;