cronofy-elements 1.48.2 → 1.49.2

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

@@ -1,292 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { css } from "@emotion/core";
-
-import * as connections from "../../helpers/connections";
-import { parseStyleOptions } from "../../helpers/theming";
-import { getDaysFromAvailablePeriods } from "../../helpers/slots";
-import { i18nConstructor } from "../../helpers/i18n";
-import { logConstructor } from "../../helpers/logging";
-
-import Container from "../generic/Container";
-import Error from "../generic/Error";
-import TransitionSlide from "../generic/TransitionSlide";
-import Days from "./Days";
-import TimeSlots from "./TimeSlots";
-import Confirm from "./Confirm";
-
-export const DaysContext = React.createContext();
-export const LoggingContext = React.createContext();
-export const I18nContext = React.createContext();
-export const SlotsContext = React.createContext();
-export const StatusContext = React.createContext();
-export const ThemeContext = React.createContext();
-
-const SlotPicker = ({ options, view }) => {
-    const [slots, setSlots] = useState({ slots: [], day: false });
-    const [days, setDays] = useState([]);
-
-    const [theme, setTheme] = useState({
-        ...parseStyleOptions({ height: "auto", padding: "10px", ...options.styles }, "SlotPicker"),
-    });
-
-    const [i18n, setI18n] = useState(
-        i18nConstructor({
-            context: "slot_picker",
-            locale: options.locale,
-            localeModifiers: options.locale_modifiers,
-            allPhrases: options.translations,
-            tzid: options.tzid,
-        })
-    );
-
-    const [log, setLog] = useState(
-        logConstructor(options.config.logs, "Slot Picker", options.callback)
-    );
-
-    const [status, setStatus] = useState({
-        view: "days", // days | slots | confirm
-        direction: "upwards",
-        mode: options.config.mode,
-        selected: false,
-        day: false,
-        loading: true,
-        error: false,
-        locale: options.locale,
-        tzid: options.tzid,
-        callback: options.callback
-            ? options.callback
-            : () => log.info("No `callback` option has been provided"),
-    });
-
-    const innerWrapper = React.createRef();
-    const outerWrapper = React.createRef();
-
-    const tzChange = timezone => {
-        log.info(`Timezone updated to ${timezone}`);
-    };
-
-    const selectDay = day => {
-        setSlots({ ...slots, day });
-        setStatus({
-            ...status,
-            view: "slots",
-            direction: "upwards",
-        });
-    };
-
-    const backToDays = () => {
-        setSlots({ ...slots, day: false });
-        setStatus({
-            ...status,
-            view: "days",
-            direction: "downwards",
-            selection: false,
-        });
-    };
-
-    const backToSlots = () => {
-        setStatus({
-            ...status,
-            view: "slots",
-            direction: "downwards",
-            selection: false,
-        });
-    };
-
-    const confirmSelection = slot => {
-        const notification = {
-            notification: {
-                type: "slot_selected",
-                slot: slot,
-            },
-        };
-        status.callback(notification);
-    };
-
-    const selectSlot = slot => {
-        const confirmStepRequired = options.confirm || true;
-        if (confirmStepRequired) {
-            setStatus({
-                ...status,
-                view: "confirm",
-                direction: "upwards",
-                selected: slot,
-            });
-        } else {
-            confirmSelection(slot);
-        }
-    };
-
-    useEffect(() => {
-        let query = options.query;
-
-        if (!options.query.bookable_events) {
-            query = {
-                response_format: "overlapping_slots",
-                ...options.query,
-            };
-        }
-
-        connections
-            .getAvailability(
-                options.token,
-                options.domains.apiDomain,
-                query,
-                `SlotPicker`,
-                status.tzid,
-                options.demo
-            )
-            .then(res => {
-                let returnedSlots;
-                if (typeof res.available_bookable_events !== "undefined") {
-                    returnedSlots = res.available_bookable_events;
-                } else {
-                    returnedSlots = res.available_slots;
-
-                    if (typeof res.available_slots === "undefined") {
-                        setStatus({
-                            ...status,
-                            error: {
-                                type: 400,
-                                message: "There was a problem loading the data.",
-                            },
-                            loading: false,
-                        });
-                        return;
-                    }
-                }
-                const daysFromPeriods = getDaysFromAvailablePeriods(
-                    returnedSlots,
-                    status.locale,
-                    status.tzid
-                );
-                setStatus({
-                    ...status,
-                    view: view,
-                    loading: false,
-                    error: false,
-                });
-
-                const days = Object.values(daysFromPeriods).sort((a, b) =>
-                    a.value > b.value ? 1 : -1
-                );
-
-                const daysToSlots = days.reduce(
-                    (acc, day) => ({
-                        ...acc,
-                        [day.value]: day.slots,
-                    }),
-                    {}
-                );
-
-                setDays(days);
-                setSlots({ ...slots, slots: daysToSlots });
-            })
-            .catch(error => {
-                setStatus({
-                    ...status,
-                    view: view,
-                    loading: false,
-                    error,
-                });
-
-                const errorMessage = error.message ? error.message : error;
-                const errorOutput = {};
-                if (error.docsSlug) {
-                    errorOutput.docsSlug = error.docsSlug;
-                }
-                if (error.body) {
-                    errorOutput.errorObject = error.body;
-                }
-                log.error(errorMessage, errorOutput);
-            });
-    }, []);
-
-    useEffect(() => {
-        if (innerWrapper.current) {
-            const newHeight = innerWrapper.current.clientHeight;
-            const tempTarget = outerWrapper.current;
-            setTimeout(() => {
-                if (tempTarget) {
-                    tempTarget.style.height = `${newHeight}px`;
-                }
-            }, 400);
-        }
-    }, [slots, status.view]);
-
-    return (
-        <Container
-            style={css`
-                max-width: 300px;
-                margin-left: auto;
-                margin-right: auto;
-                min-height: 200px;
-            `}
-            minHeight={"0"}
-            height={theme.height}
-            className={`${theme.prefix}`}
-        >
-            <LoggingContext.Provider value={log}>
-                {status.error ? (
-                    <Error message={i18n.t("global_error")} theme={theme} />
-                ) : (
-                    <div
-                        ref={outerWrapper}
-                        css={css`
-                            height: 100%;
-                            flex-grow: 1;
-                            transition: height 0.2s;
-                            overflow: hidden;
-                        `}
-                    >
-                        <TransitionSlide direction={status.direction} keyProp={status.view}>
-                            <div
-                                ref={innerWrapper}
-                                css={css`
-                                    flex-grow: 1;
-                                `}
-                            >
-                                <I18nContext.Provider value={i18n}>
-                                    <ThemeContext.Provider value={theme}>
-                                        <SlotsContext.Provider value={slots}>
-                                            <DaysContext.Provider value={days}>
-                                                <StatusContext.Provider value={[status, setStatus]}>
-                                                    <React.Fragment>
-                                                        {status.view === "days" ? (
-                                                            <Days
-                                                                tzChange={tzChange}
-                                                                selectDay={selectDay}
-                                                            />
-                                                        ) : null}
-                                                        {status.view === "slots" ? (
-                                                            <TimeSlots
-                                                                backToDays={backToDays}
-                                                                selectSlot={
-                                                                    status.mode === "no_confirm"
-                                                                        ? confirmSelection
-                                                                        : selectSlot
-                                                                }
-                                                            />
-                                                        ) : null}
-                                                        {status.view === "confirm" ? (
-                                                            <Confirm
-                                                                back={backToSlots}
-                                                                confirm={confirmSelection}
-                                                            />
-                                                        ) : null}
-                                                    </React.Fragment>
-                                                </StatusContext.Provider>
-                                            </DaysContext.Provider>
-                                        </SlotsContext.Provider>
-                                    </ThemeContext.Provider>
-                                </I18nContext.Provider>
-                            </div>
-                        </TransitionSlide>
-                    </div>
-                )}
-            </LoggingContext.Provider>
-        </Container>
-    );
-};
-
-export default SlotPicker;

package/src/js/components/SlotPicker/Slots.js

@@ -1,66 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { css } from "@emotion/core";
-
-import Loading from "../generic/Loading";
-import Slot from "./Slot";
-
-import { I18nContext, ThemeContext, StatusContext } from "./SlotPicker";
-
-const Slots = ({ periods = [], confirm }) => {
-    const theme = useContext(ThemeContext);
-    const [status] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-
-    const emptySlotStyles = css`
-        text-align: center;
-        display: block;
-        width: 100%;
-        box-sizing: border-box;
-        padding: 1em;
-        margin-bottom: 0.5em;
-    `;
-
-    const slots = periods.map((period, key) => (
-        <Slot period={period} key={key} confirm={confirm} />
-    ));
-
-    useEffect(() => {
-        if (periods.length <= 0 && !status.loading) {
-            const notification = {
-                notification: {
-                    type: "no_slots_found",
-                },
-            };
-            status.callback(notification);
-        }
-    }, [periods]);
-
-    return (
-        <Loading loading={status.loading}>
-            {periods.length <= 0 ? (
-                <div
-                    css={css`
-                        flex-grow: 0;
-                        width: 100%;
-                    `}
-                    className={`${theme.prefix}__slots-list--empty`}
-                >
-                    <div css={emptySlotStyles} className={`${theme.prefix}__slot--empty`}>
-                        {i18n.t("no_slots_found")}
-                    </div>
-                </div>
-            ) : (
-                <div
-                    className={`${theme.prefix}__slots-list`}
-                    css={css`
-                        flex-grow: 1;
-                    `}
-                >
-                    {slots}
-                </div>
-            )}
-        </Loading>
-    );
-};
-
-export default Slots;

package/src/js/components/SlotPicker/TimeSlots.js

@@ -1,91 +0,0 @@
-import React, { useContext } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import Slots from "./Slots";
-
-import { buttonReset } from "../../styles/utils";
-
-import { I18nContext, ThemeContext, SlotsContext, StatusContext } from "./SlotPicker";
-
-const TimeSlots = props => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    const slots = useContext(SlotsContext);
-    const [status] = useContext(StatusContext);
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                padding: ${theme.padding};
-                display: flex;
-                flex-direction: column;
-            `}
-            className={`${theme.prefix}__slots-list ${theme.prefix}__slots-list--times`}
-        >
-            <div
-                className={`${theme.prefix}__slots-header`}
-                css={css`
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    position: relative;
-                    height: 22px;
-                    margin-bottom: 10px;
-                `}
-            >
-                <button
-                    type="button"
-                    css={css`
-                        ${buttonReset};
-                        display: block;
-                        padding: 4px;
-                        height: 22px;
-                        width: 22px;
-                        position: absolute;
-                        top: 50%;
-                        left: 0;
-                        transform: translateY(-50%);
-                    `}
-                    onClick={props.backToDays}
-                >
-                    <svg
-                        css={css`
-                            fill: ${theme.colors.grey};
-                            display: block;
-                            width: 18px;
-                            height: 18px;
-                            transform: rotate(-90deg);
-                        `}
-                        className={`${theme.prefix}__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.dateToSlotStringWithoutTzShift(moment(slots.day, "YYYY-MM-DD"))}
-                </span>
-            </div>
-            <div
-                css={css`
-                    width: 100%;
-                    flex-grow: 1;
-                    display: flex;
-                `}
-            >
-                <Slots periods={slots.slots[slots.day]} confirm={props.selectSlot} />
-            </div>
-        </div>
-    );
-};
-
-export default TimeSlots;

package/src/js/components/generic/Button.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-
-const Button = ({ className = "button", styles, onClick, children }) => {
-    let buttonStyles = css`
-        ${buttonReset};
-        cursor: pointer;
-        display: inline-block;
-        padding: 10px;
-        position: relative;
-        font-size: inherit;
-        transition: background 0.2s;
-        color: inherit;
-        ${styles};
-    `;
-
-    return (
-        <button type="button" className={className} onClick={onClick} css={buttonStyles}>
-            {children}
-        </button>
-    );
-};
-
-export default Button;

package/src/js/components/generic/Container.js

@@ -1,33 +0,0 @@
-import React from "react";
-import { css } from "@emotion/core";
-
-import globals from "../../styles/global";
-
-const Container = ({
-    children,
-    minHeight = `300px`,
-    height = `100%`,
-    style = ``,
-    className = ``,
-}) => (
-    <div
-        css={css`
-            ${globals};
-            width: 100%;
-            min-height: ${minHeight};
-            height: ${height};
-            display: flex;
-            align-items: stretch;
-            justify-content: stretch;
-            flex-direction: column;
-            transition: height 0.2s;
-            position: relative;
-            ${style};
-        `}
-        className={className}
-    >
-        {children}
-    </div>
-);
-
-export default Container;

package/src/js/components/generic/Error.js

@@ -1,77 +0,0 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-const Error = ({ message = "There was an error", theme, title = false }) => (
-    <div
-        css={css`
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 10;
-            width: 100%;
-            height: 100%;
-            padding: 10px;
-            background: ${transparentize(0.8, theme.colors.black)};
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        `}
-        className={`${theme.prefix}__error`}
-    >
-        <svg
-            css={css`
-                width: 2em;
-                height: 2em;
-                fill: ${theme.colors.black};
-            `}
-            className={`${theme.prefix}__error-icon`}
-            viewBox="0 0 486.463 486.463"
-        >
-            <path
-                d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4
-                        C268.225,344.682,256.925,333.382,243.225,333.382z"
-            />
-            <path
-                d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4
-                        l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8
-                        C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8
-                        c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8
-                        l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"
-            />
-            <path
-                d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7
-                        c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9
-                        c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"
-            />
-        </svg>
-        {title ? (
-            <span
-                css={css`
-                    font-weight: bold;
-                    display: block;
-                    text-align: center;
-                    margin-top: 1em;
-                    color: ${theme.colors.black};
-                `}
-            >
-                {title}
-            </span>
-        ) : null}
-        <span
-            css={css`
-                display: block;
-                text-align: center;
-                margin-top: 1em;
-                max-width: 36em;
-                color: ${theme.colors.black};
-            `}
-            className={`${theme.prefix}__error-text`}
-        >
-            {message}
-        </span>
-    </div>
-);
-
-export default Error;

package/src/js/components/generic/Loading.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { css, keyframes } from "@emotion/core";
-import { transparentize } from "polished";
-
-import colors from "../../styles/colors";
-
-const spin = keyframes`
-        0% {
-            transform: rotate(0deg);
-        }
-        100%{
-            transform: rotate(360deg);
-        }
-    `;
-
-const Loading = ({ loading, children, stylePrefix = "loading" }) =>
-    loading ? (
-        <div
-            css={css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: ${transparentize(0.8, colors.black)};
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${stylePrefix}__loading-wrapper`}
-        >
-            <svg
-                css={css`
-                    width: 2em;
-                    height: 2em;
-                    fill: ${colors.white};
-                    animation: ${spin} infinite linear 1s;
-                `}
-                className={`${stylePrefix}__loading-icon`}
-                viewBox="0 0 489.711 489.711"
-            >
-                <path d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z" />
-                <path d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z" />
-            </svg>
-        </div>
-    ) : (
-        children
-    );
-
-export default Loading;

package/src/js/components/generic/LoadingSpinner.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { css, keyframes } from "@emotion/core";
-
-const LoadingSpinner = ({ color = false, size = "28", padding = "4" }) => {
-    const spin = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100%{
-        transform: rotate(360deg);
-    }
-`;
-    return (
-        <svg
-            css={css`
-                width: ${size}px;
-                height: ${size}px;
-                padding: ${padding}px;
-                fill: ${color ? color : "#000"};
-                animation: ${spin} infinite linear 1s;
-            `}
-            viewBox="0 0 489.711 489.711"
-        >
-            <path d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z" />
-            <path d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z" />
-        </svg>
-    );
-};
-
-export default LoadingSpinner;