cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/AvailabilityRules/Wrapper.js

@@ -1,414 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { css } from "@emotion/core";
-
-import * as connections from "../../helpers/connections";
-import {
-    buildNewRules,
-    checkSlotAvailability,
-    generateEmptyRulesSlots,
-    getStaticTimeSlots,
-    parseSlotsIntoDays,
-} from "../../helpers/slots.rules";
-import {
-    parseExtras,
-    parseAccountOptions,
-    buildRuleTemplate,
-} from "../../helpers/utils.AvailabilityRules";
-import { getInitialSelectedTzid } from "./utils/tz-utils";
-import { parseStyleOptions, classBuilder } from "../../helpers/theming";
-import { globals } from "../../styles/utils";
-import { useI18n } from "../../contexts/i18n-context";
-import { useLog } from "../../contexts/log-context";
-import { useTz } from "../../contexts/tz-context";
-
-import Calendars from "./Calendars";
-import Container from "../generic/Container";
-import Error from "../generic/Error";
-import Footer from "./Footer";
-import Week from "./Week";
-
-export const AccountContext = React.createContext();
-export const ExtrasContext = React.createContext();
-export const CalendarContext = React.createContext();
-export const RulesContext = React.createContext();
-export const SlotsContext = React.createContext();
-export const StaticSlotsContext = React.createContext();
-export const StatusContext = React.createContext();
-export const ThemeContext = React.createContext();
-
-const Wrapper = ({ options }) => {
-    const i18n = useI18n();
-    const log = useLog();
-    const [tz, setTz] = useTz();
-
-    const [account, setAccount] = useState(() => parseAccountOptions(options));
-    const [calendars, setCalendars] = useState(() => ({
-        all: [],
-        active: [],
-        profiles: [],
-    }));
-    const [rules, setRules] = useState([]);
-    const [status, setStatus] = useState(() => ({
-        loading: true,
-        error: false,
-        saving: false,
-        saved: false,
-        savedSuccess: false,
-        locale: options.locale,
-        tzid: tz.selectedTzid.tzid,
-        callback: options.callback ? options.callback : cb => {},
-        startDay: options.config.startDay,
-        defaultWeeklyPeriods: options.config.defaultWeeklyPeriods,
-    }));
-    const [extras, setExtras] = useState(() => parseExtras(options));
-
-    const [saveOnRender, setSaveOnRender] = useState(false);
-
-    // All slots for 7 days, 24 hours - our single source of truth
-    const [slots, setSlots] = useState(() =>
-        generateEmptyRulesSlots(extras.limits.duration, status.startDay, i18n)
-    );
-
-    const [visibleSlots, setVisibleSlots] = useState(() =>
-        parseSlotsIntoDays(slots, extras.limits.slotsPerDay, extras.limits.slotsOffset)
-    );
-
-    // Full 24 hours of slot times
-    const [staticTimes, setStaticTimes] = useState(() =>
-        getStaticTimeSlots(extras.limits.duration, i18n)
-    );
-
-    // Just the visible slot times
-    const [staticSlots, setStaticSlots] = useState(() =>
-        staticTimes.slice(
-            extras.limits.slotsOffset,
-            extras.limits.slotsOffset + extras.limits.slotsPerDay
-        )
-    );
-
-    const [theme, setTheme] = useState(() => {
-        const styles = parseStyleOptions(options.styles, "AvailabilityViewer");
-        return {
-            ...styles,
-            classBuilder: classBuilder(styles.prefix, "AR"),
-            sizes: {
-                breakpoints: {
-                    small: 650,
-                },
-                labelWidth: 60,
-                labelWidthSmall: 24,
-                columnWidth: 100,
-                wrapperWidth: false,
-                wrapperUnderflow: 0,
-            },
-        };
-    });
-
-    const handleRuleChange = (IDs, toggleStatus) => {
-        const availability = toggleStatus === "available";
-
-        const newSlots = {};
-        IDs.forEach(ID => {
-            newSlots[ID] = { ...slots[ID], available: availability };
-        });
-
-        const allSlots = { ...slots, ...newSlots };
-        setSlots(allSlots);
-        const newRules = buildNewRules(allSlots);
-        setRules(newRules);
-    };
-
-    useEffect(() => {
-        setVisibleSlots(
-            parseSlotsIntoDays(slots, extras.limits.slotsPerDay, extras.limits.slotsOffset)
-        );
-    }, [slots]);
-
-    useEffect(() => {
-        setStaticSlots(
-            staticTimes.slice(
-                extras.limits.slotsOffset,
-                extras.limits.slotsOffset + extras.limits.slotsPerDay
-            )
-        );
-        setVisibleSlots(
-            parseSlotsIntoDays(slots, extras.limits.slotsPerDay, extras.limits.slotsOffset)
-        );
-    }, [extras]);
-
-    useEffect(() => {
-        if (!status.loading && !status.error) {
-            const callbackContent = {
-                notification: {
-                    type: "availability_rule_edited",
-                },
-                availability_rule: {
-                    ...account,
-                    calendar_ids: calendars.active,
-                    weekly_periods: rules,
-                },
-            };
-            status.callback(callbackContent);
-        }
-    }, [calendars, account, rules]);
-
-    useEffect(() => {
-        // Query the API for rules and calendars, but don't do anything until
-        // we've heard back from both.
-        Promise.all([
-            connections.getAvailabilityRules({
-                token: options.token,
-                api_domain: options.domains.apiDomain,
-                availability_rule_id: account.availability_rule_id,
-                element: `AvailabilityRules`,
-                mock: options.demo,
-                tzid: options.tzid,
-            }),
-            connections.getCalendars(options.token, options.domains.apiDomain, options.demo),
-        ])
-            .then(res => {
-                const isNewRule = res[0].type === 404;
-                const rulesResponse = isNewRule
-                    ? buildRuleTemplate(options.config.defaultWeeklyPeriods, tz.selectedTzid.tzid)
-                    : res[0];
-
-                if (isNewRule) {
-                    const callbackContent = {
-                        notification: {
-                            type: "availability_rule_not_found",
-                            message:
-                                "Availability rule ID does not already exist. Using default values.",
-                            url:
-                                "https://docs.cronofy.com/developers/ui-elements/availability-rules/#param-availability_rule_id",
-                        },
-                    };
-                    status.callback(callbackContent);
-                }
-
-                const calsResponse = res[1];
-
-                setRules(rulesResponse.availability_rule.weekly_periods);
-
-                setAccount(account => ({
-                    ...account,
-                    tzid: rulesResponse.availability_rule.tzid,
-                }));
-
-                const selectedTzid = getInitialSelectedTzid(
-                    tz.list,
-                    rulesResponse.availability_rule.tzid
-                );
-                setTz({
-                    list: tz.list,
-                    selectedTzid: selectedTzid,
-                });
-
-                setSlots(slots => {
-                    const hydratedSlots = checkSlotAvailability(
-                        rulesResponse.availability_rule.weekly_periods,
-                        slots
-                    );
-                    return hydratedSlots;
-                });
-
-                setExtras(oldExtras => ({
-                    ...oldExtras,
-                    limits: {
-                        ...oldExtras.limits,
-                        tzid: rulesResponse.availability_rule.tzid,
-                    },
-                }));
-
-                setCalendars({
-                    active: rulesResponse.availability_rule.calendar_ids || [],
-                    all: calsResponse.calendars,
-                    profiles: calsResponse.profiles,
-                });
-
-                setStatus({
-                    ...status,
-                    loading: false,
-                    calLoading: false,
-                });
-
-                if (isNewRule && options.config.autoCreateRulesMode) {
-                    const callbackContent = {
-                        notification: {
-                            type: "availability_rule_auto_created",
-                            message: "Auto create rule enabled. Saving new availability rule.",
-                        },
-                    };
-                    status.callback(callbackContent);
-                    setSaveOnRender(true);
-                }
-            })
-            .catch(error => {
-                const errorMessage = error.message ? error.message : error;
-                const errorOutput = {};
-                if (error.docsSlug) {
-                    errorOutput.docsSlug = error.docsSlug;
-                }
-                log.error(errorMessage, errorOutput);
-                setStatus({
-                    ...status,
-                    loading: false,
-                    error: error,
-                });
-            });
-    }, []);
-
-    useEffect(() => {
-        if (saveOnRender) {
-            generateRules();
-            setSaveOnRender(false);
-        }
-    }, [saveOnRender]);
-
-    useEffect(() => {
-        // When the rules are marked as "saved", we show a notification.
-        // This timeout hides that notification after 6 seconds
-        if (status.saved) {
-            setTimeout(() => {
-                setStatus({ ...status, saved: false });
-            }, 6000);
-        }
-    }, [status]);
-
-    useEffect(() => {
-        if (tz.selectedTzid.tzid) {
-            setAccount(account => ({
-                ...account,
-                tzid: tz.selectedTzid.tzid,
-            }));
-        }
-    }, [tz.selectedTzid.tzid]);
-
-    const generateRules = () => {
-        const rulesRequest = { ...account, weekly_periods: rules };
-
-        let tempStatus = status;
-
-        if (calendars.active.length > 0) {
-            rulesRequest.calendar_ids = calendars.active;
-        }
-
-        if (options.demo) {
-            log.info("In demo mode, so not saving rules", {
-                errorObject: rulesRequest,
-            });
-            const callbackContent = {
-                notification: {
-                    type: "availability_rule_saved",
-                },
-                availability_rule: rulesRequest,
-            };
-            status.callback(callbackContent);
-            return;
-        }
-
-        if (rulesRequest) {
-            tempStatus = {
-                ...tempStatus,
-                saving: true,
-                savedSuccess: false,
-            };
-            setStatus(tempStatus);
-            connections
-                .setAvailabilityRules({
-                    token: options.token,
-                    api_domain: options.domains.apiDomain,
-                    params: rulesRequest,
-                    element: `AvailabilityRules`,
-                    mock: options.demo,
-                })
-                .then(res => {
-                    if (res.errors) {
-                        const errorOutput = {};
-                        if (res.errors.docsSlug) {
-                            errorOutput.docsSlug = res.errors.docsSlug;
-                        }
-                        if (res.errors.errorObject) {
-                            errorOutput.errorObject = res.errors.message;
-                        }
-                        log.error("Could not save availability rules", errorOutput);
-                        tempStatus = {
-                            ...tempStatus,
-                            saving: false,
-                            saved: true,
-                            savedSuccess: false,
-                        };
-                    } else {
-                        const callbackContent = {
-                            notification: {
-                                type: "availability_rule_saved",
-                            },
-                            availability_rule: res.availability_rule,
-                        };
-                        status.callback(callbackContent);
-                        tempStatus = {
-                            ...tempStatus,
-                            saving: false,
-                            saved: true,
-                            savedSuccess: true,
-                        };
-                    }
-                    setStatus(tempStatus);
-                })
-                .catch(error => {
-                    log.error("There was a problem setting availability rules", {
-                        errorObject: error.message,
-                    });
-                    tempStatus = {
-                        ...tempStatus,
-                        saving: false,
-                        error: error,
-                    };
-                    setStatus(tempStatus);
-                    return error;
-                });
-        } else {
-            log.warn("Invalid rulesRequest", {
-                errorObject: rulesRequest,
-            });
-        }
-    };
-
-    return (
-        <Container
-            height={"auto"}
-            css={css`
-                ${globals};
-                max-width: 100%;
-                margin-bottom: 40px;
-                @media (max-width: 550px) {
-                    overflow: hidden;
-                }
-            `}
-            className={theme.classBuilder()}
-        >
-            <ThemeContext.Provider value={[theme, setTheme]}>
-                <StatusContext.Provider value={[status, setStatus]}>
-                    {status.error ? (
-                        <Error message={i18n.t("global_error")} theme={theme} />
-                    ) : (
-                        <CalendarContext.Provider value={[calendars, setCalendars]}>
-                            <Calendars loading={status.loading} />
-                            <ExtrasContext.Provider value={[extras, setExtras]}>
-                                <StaticSlotsContext.Provider value={staticSlots}>
-                                    <SlotsContext.Provider value={[visibleSlots, handleRuleChange]}>
-                                        <AccountContext.Provider value={account}>
-                                            <Week />
-                                        </AccountContext.Provider>
-                                    </SlotsContext.Provider>
-                                </StaticSlotsContext.Provider>
-                                <Footer generateRules={generateRules} />
-                            </ExtrasContext.Provider>
-                        </CalendarContext.Provider>
-                    )}
-                </StatusContext.Provider>
-            </ThemeContext.Provider>
-        </Container>
-    );
-};
-
-export default Wrapper;

package/src/js/components/AvailabilityRules/contexts/drag-context.js

@@ -1,15 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-const DragContext = createContext();
-
-export const DragProvider = ({ children, drag: initialDrag }) => {
-    const [drag, setDrag] = useState(initialDrag);
-    return <DragContext.Provider value={[drag, setDrag]}>{children}</DragContext.Provider>;
-};
-export const useDrag = () => {
-    const context = useContext(DragContext);
-    if (context === undefined) {
-        throw new Error("useDrag must be used within a DragProvider");
-    }
-    return context;
-};

package/src/js/components/AvailabilityRules/scss/_base.buttons.scss

@@ -1,58 +0,0 @@
-.AR__button {
-    appearance: none;
-    background: none;
-    border: none;
-    border-radius: 0;
-    font-family: inherit;
-    position: relative;
-    display: block;
-    cursor: pointer;
-    font-size: 1em;
-    border: 0.1em solid var(--greyMid);
-    background-color: var(--white);
-
-    &:focus {
-        border-color: var(--availableActive);
-        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
-        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
-        outline: none;
-    }
-    &:hover {
-        border-color: var(--availableActive);
-        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
-        background-color: var(--availableHover);
-        color: var(--black);
-        outline: none;
-    }
-
-    &:active {
-        background-color: var(--availableActive);
-        color: var(--black);
-        outline: none;
-    }
-}
-
-.AR__disabled-button {
-    pointer-events: none;
-    border: unset;
-    background-color: unset;
-
-    &:focus {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-        background-color: unset;
-    }
-    &:hover {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-    }
-
-    &:active {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-        background-color: unset;
-    }
-}

package/src/js/components/AvailabilityRules/scss/_base.theme.scss

@@ -1,4 +0,0 @@
-.AR {
-    @import "base.buttons";
-    @import "components.timezoneselector";
-}

package/src/js/components/AvailabilityRules/scss/_components.timezoneselector.scss

@@ -1,74 +0,0 @@
-.AR__timezone-selector {
-    position: relative;
-    flex-grow: 1;
-    max-width: 16rem;
-}
-
-.AR__timezone-selector--button {
-    @extend .AR__button;
-    display: inline-block;
-    border: 0.1em solid var(--greyMid);
-    background: var(--white);
-    padding: 0.3em 1em;
-    text-align: left;
-    width: 100%;
-    border-radius: 0.4em;
-    z-index: 4;
-}
-
-.AR__timezone-selector--icon {
-    width: 1em;
-    height: 1em;
-    margin-top: 0.2em;
-    fill: var(--grey);
-    float: right;
-}
-
-.AR__timezone-selector--icon-open {
-    transform: scaleY(-1);
-}
-
-.AR__timezone-selector--listbox-wrapper {
-    @extend %unset;
-    position: absolute;
-    width: 100%;
-    border: 0.1em solid var(--greyMid);
-    background-color: var(--white);
-    border-top: 0;
-    padding-top: 1.15em;
-    top: 1em;
-    z-index: 3;
-    border-radius: 0 0 0.4em 0.4em;
-}
-
-.AR__timezone-selector--listbox {
-    @extend %unset;
-    width: 100%;
-    max-height: 15em;
-    overflow-y: auto;
-}
-
-.AR__timezone-selector--option {
-    @extend %unset;
-    display: block;
-    cursor: pointer;
-    padding: 0.5em 1em;
-    position: relative;
-    line-height: 1.8em;
-
-    &:hover {
-        background-color: var(--availableHover);
-        color: var(--black);
-    }
-}
-
-.AR__timezone-selector--focused {
-    border-color: var(--availableActive);
-    box-shadow: inset var(--availableActive) 0 0 0 0.1em;
-    outline: none;
-}
-
-.AR__timezone-selector--selected {
-    background-color: var(--availableHover);
-    color: var(--black);
-}

package/src/js/components/AvailabilityRules/scss/_generic.reset.scss

@@ -1,13 +0,0 @@
-//Unsetting styles to avoid clashes with styles outside the component
-%unset {
-    padding: unset;
-    margin-top: unset;
-    margin-bottom: unset;
-    margin-left: unset;
-    margin-right: unset;
-    border: unset;
-    background: unset;
-    border-spacing: 0;
-    font-style: unset;
-    list-style: unset;
-}

package/src/js/components/AvailabilityRules/scss/_settings.colours.scss

@@ -1,12 +0,0 @@
-.AR {
-    // Fallbacks
-    --black: #000000;
-    --white: #ffffff;
-
-    --grey: #6f6f6f;
-    --greyMid: #999999;
-    --greyLight: #e4ebf2;
-
-    --availableHover: #c0e992;
-    --availableActive: #7ed321;
-}

package/src/js/components/AvailabilityRules/scss/availabilityrules.scss

@@ -1,5 +0,0 @@
-@import "../../../styles/settings.utils";
-@import "settings.colours";
-
-@import "generic.reset";
-@import "base.theme";

package/src/js/components/AvailabilityRules/utils/tz-utils.js

@@ -1,44 +0,0 @@
-import moment from "moment-timezone";
-import { humanizeTzName } from "../../../helpers/utils";
-import { defaultTimeZones } from "../../../helpers/tz-list";
-
-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;
-};