cronofy-elements 1.48.1 → 1.49.1

package/src/js/helpers/slots.js

@@ -1,340 +0,0 @@
-import moment from "moment-timezone";
-import { uniqueItems } from "./utils";
-
-export const keyFormat = "YYYY-MM-DDTHH:mm:00Z";
-export const shortKeyFormat = "YYYY-MM-DDTHH:mm[:00Z]";
-
-export const getDaysFromAvailablePeriods = (periods, locale, tzid) => {
-    return periods.reduce((slots, period) => {
-        const startTime = moment(period.start).tz(tzid).locale(locale);
-        const endTime = moment(period.end).tz(tzid).locale(locale);
-        const formattedDay = startTime.format(`YYYY-MM-DD`);
-
-        if (slots[formattedDay] === undefined) {
-            slots[formattedDay] = {
-                value: formattedDay,
-                label: startTime.format(`dddd Do MMMM`),
-                slots: [],
-            };
-        }
-
-        const periodLabel = `${formatSlotTimeLabel(startTime)} - ${formatSlotTimeLabel(endTime)}`;
-
-        slots[formattedDay].slots.push({
-            label: periodLabel,
-            value: period,
-        });
-
-        return slots;
-    }, {});
-};
-
-const formatSlotTimeLabel = time => time.format("LT").replace(" ", "");
-
-export const slotsFromPeriod = (period, duration, acc = []) => {
-    const start = moment.utc(period.start, keyFormat);
-    const end = moment.utc(period.end, keyFormat);
-    const slotEnd = start.add(duration, "minutes");
-
-    if (slotEnd.diff(end, "minutes") > 0) {
-        return acc;
-    }
-
-    if (slotEnd.diff(end, "minutes") === 0) {
-        return [
-            ...acc,
-            {
-                start: period.start,
-                end: period.end,
-                participants: period.participants || [],
-            },
-        ];
-    }
-
-    return slotsFromPeriod(
-        {
-            start: slotEnd.format(shortKeyFormat),
-            end: period.end,
-            participants: period.participants || [],
-        },
-        duration,
-        [
-            ...acc,
-            {
-                start: period.start,
-                end: slotEnd.format(shortKeyFormat),
-                participants: period.participants || [],
-            },
-        ]
-    );
-};
-
-export const roundToNextHour = time =>
-    time.minute() || time.second() || time.millisecond()
-        ? time.add(1, "hour").startOf("hour")
-        : time.startOf("hour");
-
-export const roundToNextHalfHour = time => {
-    const remainder = 30 - (time.minute() % 30);
-    return time.minute() % 30 !== 0 || time.second() || time.millisecond()
-        ? time.add(remainder, "minutes")
-        : time;
-};
-
-export const roundToNextQuarterHour = time => {
-    const remainder = 15 - (time.minute() % 15);
-    return time.minute() % 15 !== 0 || time.second() || time.millisecond()
-        ? time.add(remainder, "minutes")
-        : time;
-};
-
-export const roundPeriod = (
-    period,
-    duration,
-    hour = roundToNextHour,
-    half = roundToNextHalfHour,
-    quarter = roundToNextQuarterHour
-) => {
-    let start = moment.utc(period.start, keyFormat);
-    const startIsHalfHour =
-        start.minute() === 30 && start.second() === 0 && start.millisecond() === 0;
-    const startIsQuarter =
-        start.minute() % 15 === 0 && start.second() === 0 && start.millisecond() === 0;
-
-    if (duration > 30 && !startIsHalfHour && !startIsQuarter) {
-        start = hour(start);
-    } else if (duration > 15 && !startIsQuarter) {
-        start = half(start);
-    } else {
-        start = quarter(start);
-    }
-
-    return { ...period, start: start.format(shortKeyFormat) };
-};
-
-export const parsePeriodsIntoSlots = (periods, duration = 30, getSlots = slotsFromPeriod) =>
-    periods.reduce((acc, period) => {
-        const roundedPeriod = roundPeriod(period, duration);
-        const newSlots = getSlots(roundedPeriod, duration);
-        return [...acc, ...newSlots];
-    }, []);
-
-export const getWeekDays = startDate => {
-    const start = moment.utc(startDate, keyFormat);
-    const startOfWeek = start.startOf("isoWeek").subtract(1, "days");
-    return [
-        startOfWeek.format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-        startOfWeek.add(1, "days").format("YYYY-MM-DD"),
-    ];
-};
-
-export const createEmptySlotsForPeriod = (period, duration, tzid = false, acc = []) => {
-    // Work out the slot end (by adding the duration to the rounded period's start)
-    const slotEnd = moment.utc(moment.utc(period.start, keyFormat).add(duration, "minutes"));
-
-    let duringDSTChangeover = false;
-    // If we have a timezone to work with, check if we're inside a DST changeover.
-    if (tzid) {
-        // Get the local time.
-        const localStart = moment(period.start, keyFormat).clone().tz(tzid);
-        // Get the time an hour after the local start time.
-        const localStartPlusHour = localStart.clone().add(60, "minutes").tz(tzid);
-
-        // If the two *local* times are the same, then we're in the middle of a DST change.
-        duringDSTChangeover = localStart.format("HH:mm") === localStartPlusHour.format("HH:mm");
-    }
-
-    // Check the difference between the slot end and the period end
-    const endDiff = slotEnd.diff(moment.utc(period.end, keyFormat), "minutes");
-
-    // if the slot-end is *after* the period-end, then we should do
-    // nothing (and return the accumulated array of slots)
-    if (endDiff > 0) {
-        return acc;
-    }
-
-    // ...otherwise, (i.e. the slot-end is *before* the period-end) we
-    // need to reset the period-start, and add a new slot to the
-    // accumulating array of slots.
-    const updatedPeriod = {
-        start: slotEnd.format(shortKeyFormat),
-        end: period.end,
-    };
-
-    const accumulatedSlots = [
-        ...acc,
-        {
-            start: period.start,
-            end: slotEnd.format(shortKeyFormat),
-        },
-    ];
-    // ...then we recursively pass these into this very function to
-    // begin the process all over again (repeating until a slot would
-    // finish *after* the period has ended).
-    if (!duringDSTChangeover) {
-        return createEmptySlotsForPeriod(updatedPeriod, duration, tzid, accumulatedSlots);
-    }
-
-    // But if we're inside a DST-changeover, then we recur *without* adding to the slots.
-    return createEmptySlotsForPeriod(updatedPeriod, duration, tzid, acc);
-};
-
-export const generateDummySlots = () => {
-    const startOfCurrentWeek = moment.utc().startOf("isoWeek").subtract(1, "days");
-    return [
-        {
-            day: startOfCurrentWeek.format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-        {
-            day: startOfCurrentWeek.add(1, "days").format("YYYY-MM-DD"),
-            slots: [],
-        },
-    ];
-};
-
-export const timeLabels = (limits, day, tzid) => {
-    // If the endTime is an early hour than the startTime, that means
-    // the period overflows a day boundary.
-
-    const isEndBeforeStart = parseInt(limits.start, 10) >= parseInt(limits.end, 10);
-
-    // If the end does overflow a day boundary, we need to increment the
-    // end day to account for this.
-    const endDay =
-        isEndBeforeStart || limits.start === limits.end
-            ? moment.tz(day, "YYYY-MM-DD", tzid).add(1, "days").format("YYYY-MM-DD")
-            : day;
-
-    const timeLabelPeriod = {
-        start: moment
-            .tz(`${day}T${limits.start}`, "YYYY-MM-DDTHH:mm", tzid)
-            .utc()
-            .format(shortKeyFormat),
-        end: moment
-            .tz(`${endDay}T${limits.end}`, "YYYY-MM-DDTHH:mm", tzid)
-            .utc()
-            .format(shortKeyFormat),
-    };
-    const slots = createEmptySlotsForPeriod(timeLabelPeriod, limits.interval);
-    const timeSlots = labelTimeSlots(slots);
-    return timeSlots;
-};
-
-const labelTimeSlots = slots =>
-    slots.map(slot => {
-        const start = moment.utc(slot.start, keyFormat);
-        const onTheHour = start.minutes() === 0;
-        return { ...slot, hour: onTheHour };
-    });
-
-export const getSlotsForPage = (slots = [], page = 1) => {
-    if (slots.length < 7 * page) {
-        return slots;
-    }
-
-    const start = (page - 1) * 7;
-    const end = start + 7;
-
-    return slots.slice(start, end);
-};
-
-export const calculateSlotHeight = limits => ({
-    overflow: limits.duration / limits.interval - 1,
-    multiple: limits.duration / limits.interval,
-    height: limits.interval,
-});
-
-export const filterOverflowingSlots = (slots, overflow) =>
-    slots.filter((slot, i) => {
-        // Always return true (a.k.a. keep the slot) if it's unavailable.
-        if (!slot.available) return true;
-
-        // If any of the next [N = overflow] slots are
-        // unavailable, then this post should be removed because it
-        // would overflow the available period.
-        for (let j = 1; j <= overflow; j++) {
-            if (!slots[i + j] || !slots[i + j].available) {
-                return false;
-            }
-        }
-
-        // ...otherwise, keep the slot.
-        return true;
-    });
-
-export const getMonthsDescription = (days, locale) => {
-    const coverage = days
-        .map(day => moment.utc(day, "YYYY-MM-DD"))
-        .reduce(
-            (acc, curr) => {
-                acc.months.push(curr.locale(locale).format("MMM"));
-                acc.years.push(curr.locale(locale).format("YYYY"));
-                return acc;
-            },
-            { months: [], years: [], combi: [] }
-        );
-
-    const months = uniqueItems(coverage.months);
-    const years = uniqueItems(coverage.years);
-
-    let result = "";
-
-    // Does the period span 2 months and 2 years? (spanning 2 years but only 1 month is impossible)
-    if (years.length > 1 && months.length > 1) {
-        // N.B. this code relies on there being a max of 2 months in a single view
-        result = `${months[0]} ${years[0]} - ${months[1]} ${years[1]}`;
-    } else {
-        result = `${months.join(" - ")} ${years[0]}`;
-    }
-    return result;
-};
-
-export const convertLocalToUTC = (timeString, tzid) => {
-    const utcOffset = moment.tz(tzid).utcOffset();
-    const invertedOffset = Math.sign(utcOffset) === -1 ? Math.abs(utcOffset) : 0 - utcOffset;
-    const offset = invertedOffset / 60;
-
-    const time = `${moment().format("YYYY-MM-DD")}T${timeString}:00Z`;
-    const adjusted = moment(time).add(offset, "hours");
-    const formatted = adjusted.utc().format("HH:mm");
-
-    return formatted;
-};
-
-export const convertUTCToLocal = (timeString, tzid) => {
-    const utcOffset = moment.tz(tzid).utcOffset();
-    const invertedOffset = Math.sign(utcOffset) === -1 ? Math.abs(utcOffset) : 0 - utcOffset;
-    const offset = invertedOffset / 60;
-
-    const time = `${moment().format("YYYY-MM-DD")}T${timeString}:00Z`;
-    const adjusted = moment(time).subtract(offset, "hours");
-    const formatted = adjusted.utc().format("HH:mm");
-
-    return formatted;
-};

package/src/js/helpers/slots.rules.js

@@ -1,220 +0,0 @@
-import moment from "moment-timezone";
-
-import { buildSlotID } from "./utils.AvailabilityRules";
-
-export const getWeekDays = (startDay = "sunday") => {
-    const dayOrders = {
-        sunday: [0, 1, 2, 3, 4, 5, 6],
-        monday: [1, 2, 3, 4, 5, 6, 0],
-        tuesday: [2, 3, 4, 5, 6, 0, 1],
-        wednesday: [3, 4, 5, 6, 0, 1, 2],
-        thursday: [4, 5, 6, 0, 1, 2, 3],
-        friday: [5, 6, 0, 1, 2, 3, 4],
-        saturday: [6, 0, 1, 2, 3, 4, 5],
-    };
-    const dayNames = Object.keys(dayOrders);
-    return dayOrders[startDay].map(day => dayNames[day]);
-};
-
-export const getStaticTimeSlots = (duration, i18n) => {
-    const slots = [];
-
-    for (let hour = 0; hour < 24; hour++) {
-        const slotsPerHour = 60 / duration;
-        for (let slot = 0; slot < slotsPerHour; slot++) {
-            const startMintes = slot * duration;
-
-            const endMintes = (startMintes + duration) % 60;
-
-            const endHour = startMintes + duration >= 60 ? hour + 1 : hour;
-            const hourString = hour.toString().padStart(2, "0");
-            const timeString = startMintes.toString().padStart(2, "0");
-            const hourStringEnd = endHour.toString().padStart(2, "0");
-            const timeStringEnd = endMintes.toString().padStart(2, "0");
-
-            const startString = `${hourString}:${timeString}`;
-            const endString = `${hourStringEnd}:${timeStringEnd}`;
-
-            const startTimeObject = moment(startString, "HH:mm");
-            const startTimeString = i18n.f(startTimeObject, "LT");
-
-            const endTimeObject = moment(endString, "HH:mm");
-            const endTimeString = i18n.f(endTimeObject, "LT");
-
-            slots.push({
-                start: startString,
-                end: endString,
-                label: `${startTimeString} - ${endTimeString}`,
-            });
-        }
-    }
-    return slots;
-};
-
-export const generateEmptyRulesSlots = (duration, startDay = "sunday", i18n) => {
-    const days = getWeekDays(startDay);
-
-    const slotTimes = getStaticTimeSlots(duration, i18n);
-    const slots = {};
-
-    days.forEach((day, day_index) => {
-        slotTimes.forEach((slot, slot_index) => {
-            const slotID = buildSlotID(day_index, slot_index);
-            slots[slotID] = {
-                day: day,
-                start: slot.start,
-                label: slot.label,
-                end: slot.end,
-                available: false,
-                id: slotID,
-                dragged: false,
-            };
-        });
-    });
-    return slots;
-};
-
-export const isSlotWithinPeriod = (slot, periods) => {
-    const availability = periods.map(period => {
-        // If the day doesn't match, let's stop checking...
-        if (period.day !== slot.day) {
-            return false;
-        }
-
-        // Account for slots that end at midnight
-        const twentyfourHourSlotEnd = slot.end === "00:00" ? "24:00" : slot.end;
-
-        // If the end_time is before the slot's start, let's stop checking...
-        const slotStart = moment(slot.start, "HH:mm");
-        const periodEnd = moment(period.end_time, "HH:mm");
-        const diff_1 = periodEnd.diff(slotStart, "minutes");
-        if (diff_1 <= 0) {
-            // console.log(`${period.end_time} is before ${slot.start}`);
-            return false;
-        }
-        // If the start_time is after the slot's end, let's stop checking...
-        const slotEnd = moment(twentyfourHourSlotEnd, "HH:mm");
-        const periodStart = moment(period.start_time, "HH:mm");
-        const diff_2 = slotEnd.diff(periodStart, "minutes");
-        if (diff_2 <= 0) {
-            // console.log(
-            //     `${period.start_time} is after (or equal to) ${twentyfourHourSlotEnd}`
-            // );
-            return false;
-        }
-        // If the start_time is after the slot's start, let's stop checking... (because
-        // we only want slots that are *completely* within the available period)
-        const diff_3 = slotStart.diff(periodStart, "minutes");
-        if (diff_3 < 0) {
-            // console.log(`${period.start_time} is after ${slot.start}`);
-            return false;
-        }
-        // If we've got this far, then the slot must be within the period 👍👍👍
-        return true;
-    });
-    // Are any of the periods "available"?
-    const available = availability.some(item => item);
-    return available;
-};
-
-export const checkSlotAvailability = (periods, emptySlots) => {
-    const checkedSlots = {};
-    Object.keys(emptySlots).map(key => {
-        const slot = emptySlots[key];
-        checkedSlots[key] = {
-            ...slot,
-            available: isSlotWithinPeriod(slot, periods),
-        };
-    });
-    return checkedSlots;
-};
-
-export const findSlotsByDay = (slots, day) => slots.filter(slot => slot.day === day);
-
-export const parseSlotsIntoDays = (slots, slotsPerDay, slotsOffset = 0) => {
-    const dayNumbers = [0, 1, 2, 3, 4, 5, 6];
-    const dayNames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-
-    return dayNumbers.map(day => {
-        const daySlots = [];
-        for (let i = slotsOffset; i < slotsOffset + slotsPerDay; i++) {
-            const slotID = buildSlotID(day, i);
-            const slot = slots[slotID];
-            daySlots.push(slot);
-        }
-        return { day: dayNames[day], slots: daySlots };
-    });
-};
-
-export const buildNewRules = slots => {
-    const rules = [];
-    const mappableSlots = Object.keys(slots).map(key => slots[key]);
-    const onlyAvailableSlots = mappableSlots.filter(slot => slot.available);
-    for (let i = 0; i < onlyAvailableSlots.length; i++) {
-        const slot = onlyAvailableSlots[i];
-        if (slot) {
-            const day = slot.day;
-            const start_time = slot.start;
-
-            const ending = getEndTime(onlyAvailableSlots, i, slot.end);
-
-            const twentyfourHourEnd = ending.end === "00:00" ? "24:00" : ending.end;
-
-            const rule = {
-                day,
-                start_time,
-                end_time: twentyfourHourEnd,
-            };
-            rules.push(rule);
-            for (let j = i; j <= ending.index; j++) {
-                onlyAvailableSlots[j] = false;
-            }
-        }
-    }
-    return rules;
-};
-
-export const getEndTime = (slots, index, end) => {
-    const currentSlot = slots[index];
-    const nextSlot = slots[index + 1];
-    const nextSlotOverlaps =
-        nextSlot && nextSlot.day === currentSlot.day && nextSlot.start === currentSlot.end;
-    if (nextSlotOverlaps) {
-        return getEndTime(slots, index + 1, nextSlot.end);
-    }
-    return { end, index };
-};
-
-export const connectSlots = (start_id, current_id) => {
-    const start_indexes = start_id.split("_");
-    const end___indexes = current_id.split("_");
-
-    const indexes = [
-        {
-            x: parseInt(start_indexes[0], 10),
-            y: parseInt(start_indexes[1], 10),
-        },
-        {
-            x: parseInt(end___indexes[0], 10),
-            y: parseInt(end___indexes[1], 10),
-        },
-    ];
-
-    indexes.sort((a, b) => {
-        if (a.y < b.y) {
-            return -1;
-        }
-        if (a.y > b.y) {
-            return 1;
-        }
-        return 0;
-    });
-
-    let dragged = [];
-
-    for (let i = indexes[0].y; i <= indexes[1].y; i++) {
-        dragged.push(buildSlotID(start_indexes[0], i));
-    }
-
-    return dragged;
-};

package/src/js/helpers/theming.js

@@ -1,93 +0,0 @@
-import { darken, lighten } from "polished";
-import { objectToArray } from "./utils";
-
-export const logColor = color =>
-    console.log(`%c ${color.padEnd(25, " ")} `, `background: ${color};`);
-
-export const parseStyleOptions = (
-    styleOptions = {},
-    elementName = "CronofyElement",
-    options = {}
-) => {
-    let customColors = {};
-    if (typeof options.colors !== "undefined") {
-        console.warn("`colors` option has been deprecated. Please use `styles.colors` instead.");
-        customColors = options.colors;
-    }
-    const calendars = customColors.calendars || {};
-    const colors = styleOptions.colors || {};
-    const theme = {
-        ...styleOptions,
-        prefix: styleOptions.prefix || elementName,
-        name: elementName,
-        colors: {
-            calendars: calendars,
-            hairline: "#D8D8D8",
-            primary: "#15B3D6",
-            primaryLight: "#B8E8F2",
-            secondary: "#CB359B",
-            background: "#F2F2F2",
-            booked: "#E3E3E3",
-            bookedSelected: "#DBECC9",
-            available: "#E2FAC8",
-            availableHover: "#C0E992",
-            availableActive: "#7ED321",
-            unavailable: "#FFFFFF",
-            unavailableHover: "#E6E6E6",
-            unavailableActive: "#CCCCCC",
-            black: "#4D4D4D",
-            grey: "#6F6F6F",
-            greyMid: "#999999",
-            greyLight: "#E4EBF2",
-            greyPale: "#F5F7F9",
-            white: "#FFFFFF",
-            red: "#DC3E15",
-            redLight: "#EA8B73",
-            redDark: "#C23712",
-            yellow: "#F5A623",
-            green: "#7ED321",
-            greenLight: "#C0E992",
-            ...colors,
-        },
-    };
-    if (colors.unavailable && !colors.unavailableHover) {
-        theme.colors.unavailableHover = darken(0.1, theme.colors.unavailable);
-    }
-
-    if (colors.available && !colors.availableHover) {
-        theme.colors.availableHover = darken(0.1, colors.available);
-    }
-
-    if (colors.available && !colors.availableActive) {
-        theme.colors.availableActive = darken(0.2, colors.available);
-    }
-    if (colors.unavailable && !colors.unavailableActive) {
-        theme.colors.unavailableActive = darken(0.2, colors.unavailable);
-    }
-
-    theme.colors.whiteDark = darken(0.1, theme.colors.white);
-    theme.colors.primaryDark = darken(0.1, theme.colors.primary);
-    theme.colors.secondaryDark = darken(0.1, theme.colors.secondary);
-    theme.colors.secondaryLight = lighten(0.1, theme.colors.secondary);
-
-    // logColor(theme.colors.unavailable);
-    // logColor(theme.colors.unavailableHover);
-    // logColor(theme.colors.unavailableActive);
-    // logColor(theme.colors.available);
-    // logColor(theme.colors.availableHover);
-    // logColor(theme.colors.availableActive);
-    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;
-};

package/src/js/helpers/translations.js

@@ -1,42 +0,0 @@
-const requireTranslationFile = (locale, context) => {
-    try {
-        return require(`../translations/${locale}/${context}.json`);
-    } catch (e) {
-        // We don't expect a file for every context - some things fallback
-        return false;
-    }
-};
-
-const getTranslationsFromJson = (locales, contexts) => {
-    let translations = {};
-
-    locales.forEach(locale => {
-        contexts.forEach(context => {
-            const loaded = requireTranslationFile(locale, context);
-
-            if (loaded) {
-                if (!translations[locale]) {
-                    translations[locale] = {};
-                }
-                translations[locale][context] = loaded[context];
-            }
-        });
-    });
-
-    return translations;
-};
-
-const locales = ["de", "en", "en-US", "es", "fr", "fr-CA", "it", "ja", "nl", "ru", "sv"];
-
-const contexts = [
-    "core",
-    "agenda",
-    "availability_rules",
-    "availability_viewer",
-    "calendar_sync",
-    "date_time_picker",
-    "slot_picker",
-    "time_zones",
-];
-
-export const translations = getTranslationsFromJson(locales, contexts);