cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/CalendarSync/Providers.js

@@ -1,80 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { LoggingContext, ThemeContext, ProvidersContext, StatusContext } from "./CalendarSync";
-import ProviderLogo from "./ProviderLogo";
-
-const Provider = ({ provider }) => {
-    const log = useContext(LoggingContext);
-    const theme = useContext(ThemeContext);
-    const [status] = useContext(StatusContext);
-
-    const handleProviderLink = e => {
-        if (status.demo) {
-            e.preventDefault();
-            log.info("Demo mode is active, so the authorization links have been disabled.");
-        }
-    };
-
-    return (
-        <a
-            css={css`
-                border: 1px solid ${theme.colors.hairline};
-                padding: 4px 10px;
-                border-radius: 4px;
-                display: flex;
-                align-items: center;
-                margin-right: 10px;
-                margin-bottom: 10px;
-                transition: background 0.2s;
-                cursor: pointer;
-                color: inherit;
-                width: 164px;
-                background: ${theme.colors.white};
-                &:hover {
-                    background: ${theme.colors.greyPale};
-                }
-            `}
-            className={`${theme.prefix}__provider-auth`}
-            href={provider.authlink}
-            onClick={e => handleProviderLink(e)}
-            target="_top"
-        >
-            <ProviderLogo provider={provider.slug} fill={true} size={36} />
-            <span
-                className={`${theme.prefix}__provider-auth-text`}
-                css={css`
-                    display: block;
-                    flex-grow: 1;
-                    text-align: center;
-                `}
-            >
-                {provider.name}
-            </span>
-        </a>
-    );
-};
-
-const Providers = () => {
-    const theme = useContext(ThemeContext);
-    const providers = useContext(ProvidersContext);
-
-    const providersList = providers.map(provider => (
-        <Provider key={provider.slug} provider={provider} />
-    ));
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                flex-wrap: wrap;
-                align-items: space-between;
-            `}
-            className={`${theme.prefix}__providers`}
-        >
-            {providersList}
-        </div>
-    );
-};
-
-export default Providers;

package/src/js/components/CalendarSync/RemoveLink.js

@@ -1,96 +0,0 @@
-import React, { useState, useContext } from "react";
-import { css } from "@emotion/core";
-
-import {
-    LoggingContext,
-    I18nContext,
-    OptionsContext,
-    StatusContext,
-    ThemeContext,
-} from "./CalendarSync";
-import LoadingSpinner from "../generic/LoadingSpinner";
-
-import { buttonReset } from "../../styles/utils";
-
-const RemoveLink = ({ name, removeProfile }) => {
-    const [profileStatus, setProfileStatus] = useState({
-        loading: false,
-        error: false,
-    });
-    const i18n = useContext(I18nContext);
-    const log = useContext(LoggingContext);
-    const theme = useContext(ThemeContext);
-    const options = useContext(OptionsContext);
-    const [status] = useContext(StatusContext);
-
-    const handleLinkClick = () => {
-        setProfileStatus({ ...status, loading: true });
-
-        if (options.demo) {
-            log.warn("Not removing profile because we're running in demo mode");
-        }
-
-        if (options.config.revoke_mode === "callback_only") {
-            removeProfile();
-            setProfileStatus({ ...status, loading: false });
-        } else {
-            removeProfile()
-                .then(res => {
-                    if (res.status === 202) {
-                        setProfileStatus({ loading: false, error: false });
-                    } else {
-                        setProfileStatus({ loading: false, error: true });
-                    }
-                })
-                .catch(error => {
-                    log.error("Error revoking profile", {
-                        errorObject: error.message,
-                    });
-                    setProfileStatus({ loading: false, error });
-                    return error;
-                });
-        }
-    };
-
-    return (
-        <React.Fragment>
-            {profileStatus.loading ? (
-                <LoadingSpinner size={30} color={theme.colors.greyMid} />
-            ) : (
-                <button
-                    type="button"
-                    css={css`
-                        ${buttonReset};
-                        padding: 0;
-                        display: flex;
-                        cursor: pointer;
-                        align-items: center;
-                        justify-content: center;
-                        width: 20px;
-                        height 20px;
-                        margin-right: 10px;
-                    `}
-                    className={`${theme.prefix}__remove`}
-                    onClick={handleLinkClick}
-                >
-                    <span className="visuallyhidden">
-                        {i18n.t("remove")} {name}
-                    </span>
-                    <svg
-                        css={css`
-                            width: 10px;
-                            height: 10px;
-                            fill: ${theme.colors.greyMid};
-                        `}
-                        className={`${theme.prefix}__remove-icon`}
-                        viewBox="0 0 9 9"
-                    >
-                        <path d="M4.5 3.342L7.67.172c.264-.264.737-.22 1.057.1.32.32.365.794.1 1.058L5.659 4.5l3.17 3.17c.264.264.22.737-.1 1.057-.32.32-.794.365-1.058.1L4.5 5.659l-3.17 3.17c-.264.264-.737.22-1.057-.1-.32-.32-.365-.794-.1-1.058L3.341 4.5.172 1.33c-.264-.264-.22-.737.1-1.057.32-.32.794-.365 1.058-.1L4.5 3.341z" />
-                    </svg>
-                </button>
-            )}
-        </React.Fragment>
-    );
-};
-
-export default RemoveLink;

package/src/js/components/CalendarSync/SelectProvider.js

@@ -1,25 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./CalendarSync";
-
-import Providers from "./Providers";
-
-const SelectProvider = ({ message }) => {
-    const theme = useContext(ThemeContext);
-
-    return (
-        <div
-            css={css`
-                padding: 10px 0;
-                border-bottom: 1px solid ${theme.colors.hairline};
-            `}
-            className={`${theme.prefix}__status--active`}
-        >
-            <p>{message}</p>
-            <Providers />
-        </div>
-    );
-};
-
-export default SelectProvider;

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

@@ -1,74 +0,0 @@
-export const statusReducer = (state, action) => {
-    switch (action.type) {
-        case "TOGGLE_ADD_PROFILE":
-            return {
-                ...state,
-                adding: !state.adding,
-            };
-
-        case "REVOKE_PROFILE":
-            state.callback({
-                notification: {
-                    type: "profile_revoke_pressed",
-                    profile: action.profile,
-                },
-            });
-
-            return state;
-
-        case "REVOKE_PROFILE_SUCCESS":
-            const pendingNotification = {
-                type: "profile_revoked",
-                profile: action.profile,
-            };
-
-            return {
-                ...state,
-                pendingNotification,
-            };
-
-        case "TOGGLE_EDIT_PROFILES":
-            return {
-                ...state,
-                editing: !state.editing,
-            };
-
-        case "GET_USER_INFO_SUCCESS":
-            if (state.pendingNotification) {
-                state.callback({
-                    notification: state.pendingNotification,
-                    userinfo: action.userInfo,
-                });
-            }
-
-            return {
-                ...state,
-                loading: false,
-                type: action.userInfo["cronofy.type"],
-                pendingNotification: null,
-            };
-
-        case "GET_USER_INFO_ERROR":
-            return {
-                ...state,
-                loading: false,
-                error: action.error,
-            };
-
-        case "NO_TOKEN_SUCCESS":
-            if (state.pendingNotification) {
-                state.callback({
-                    notification: state.pendingNotification,
-                });
-            }
-
-            return {
-                ...state,
-                loading: false,
-                pendingNotification: null,
-            };
-
-        default:
-            throw new Error(`Unsupported action type: ${action.type}`);
-    }
-};

package/src/js/components/DateTimePicker/Calendar.js

@@ -1,127 +0,0 @@
-import React from "react";
-
-import {
-    calculateNextGridDate,
-    calculateNextFocusMonth,
-    findGridPosition,
-    getAvailableDaysInMonthDisplay,
-} from "./utils/calendar-keyboard";
-import { getWeekDays } from "../../helpers/slots.rules";
-
-import CalendarHeader from "./CalendarHeader";
-import DayButton from "./DayButton";
-import DayHeadings from "./DayHeadings";
-
-import { useStatus } from "./contexts/status-context";
-import { useTheme } from "./contexts/theme-context";
-import { useTz } from "../../contexts/tz-context";
-
-const Calendar = () => {
-    const [status, dispatchStatus] = useStatus();
-    const theme = useTheme();
-    const [tz] = useTz();
-
-    const weekdays = getWeekDays(status.startDay);
-
-    const handleDaySelection = day => {
-        dispatchStatus({ type: "SELECT_DAY", day });
-    };
-
-    // Handles the keyboard navigating for the calendar table
-    const handleGridNavigation = (date, e) => {
-        const monthlySlots = status.monthlyView;
-        const availableDaysInGrid = getAvailableDaysInMonthDisplay(monthlySlots.days);
-        if (!date) {
-            dispatchStatus({
-                type: "SET_FOCUS",
-                focusedDay: availableDaysInGrid[0],
-            });
-        } else {
-            const position = findGridPosition(date, monthlySlots.days);
-            const result = calculateNextGridDate({
-                event: e,
-                position,
-                days: monthlySlots.days,
-                selectDay: handleDaySelection,
-            });
-            if (result) {
-                dispatchStatus({
-                    type: "SET_FOCUS",
-                    focusedDay: result.date,
-                });
-            } else {
-                const currentGridPosition = availableDaysInGrid.findIndex(value => date === value);
-                const availableDayPos = status.availableDays.findIndex(value => date === value);
-
-                const noAvailableDay = availableDayPos === -1;
-                const notFirstAvailableDay = currentGridPosition != 0;
-                const dayDoesNotOverflowGrid = currentGridPosition < availableDaysInGrid.length - 1;
-                const dayIsInsideCurrentGrid = notFirstAvailableDay && dayDoesNotOverflowGrid;
-
-                if (availableDayPos != 0 && availableDayPos < status.availableDays.length - 1) {
-                    if (noAvailableDay || dayIsInsideCurrentGrid) {
-                        dispatchStatus({
-                            type: "SET_FOCUS",
-                            focusedDay: date,
-                        });
-                    } else {
-                        const result = calculateNextFocusMonth({
-                            event: e,
-                            position: availableDayPos,
-                            availableDays: status.availableDays,
-                        });
-                        dispatchStatus({
-                            type: "SELECT_MONTH",
-                            month: result.month,
-                            focusedDay: result.date,
-                            tzid: tz.selectedTzid.tzid,
-                        });
-                    }
-                }
-            }
-        }
-    };
-
-    const monthlySlots = status.monthlyView;
-    const currentMonth = monthlySlots.month;
-
-    const grid = monthlySlots.days.map((row, i) => (
-        <tr className={theme.classBuilder("calendar-grid--row")} key={`${currentMonth}_row_${i}`}>
-            {row.map((day, k) => (
-                <td
-                    className={theme.classBuilder("calendar-grid--day")}
-                    key={`${currentMonth}_row_${i}_day_${k}`}
-                    tabIndex="-1"
-                >
-                    <DayButton
-                        day={day}
-                        selected={day.date === status.selectedDay}
-                        focused={day.date === status.focusedDay}
-                    />
-                </td>
-            ))}
-        </tr>
-    ));
-
-    return (
-        <>
-            <CalendarHeader />
-            <table
-                onKeyDown={e => handleGridNavigation(status.focusedDay, e)}
-                className={theme.classBuilder("calendar-grid")}
-                tabIndex="0"
-                role="grid"
-                aria-labelledby="calendar-title"
-            >
-                <thead>
-                    <tr className={theme.classBuilder("calendar-grid--row")}>
-                        <DayHeadings days={weekdays} />
-                    </tr>
-                </thead>
-                <tbody>{grid}</tbody>
-            </table>
-        </>
-    );
-};
-
-export default Calendar;

package/src/js/components/DateTimePicker/CalendarHeader.js

@@ -1,80 +0,0 @@
-import React from "react";
-import moment from "moment-timezone";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useStatus } from "./contexts/status-context";
-import { useTheme } from "./contexts/theme-context";
-import { useTz } from "../../contexts/tz-context";
-
-const CalendarHeader = () => {
-    const i18n = useI18n();
-    const [status, dispatchStatus] = useStatus();
-    const theme = useTheme();
-    const [tz] = useTz();
-
-    const handlePrevMonth = () => {
-        const month = moment(status.monthlyView.month, "YYYY-MM")
-            .subtract(1, "month")
-            .format("YYYY-MM");
-
-        dispatchStatus({
-            type: "SELECT_MONTH",
-            month,
-            tzid: tz.selectedTzid.tzid,
-        });
-    };
-
-    const handleNextMonth = () => {
-        const month = moment(status.monthlyView.month, "YYYY-MM").add(1, "month").format("YYYY-MM");
-
-        dispatchStatus({
-            type: "SELECT_MONTH",
-            month,
-            tzid: tz.selectedTzid.tzid,
-        });
-    };
-
-    return (
-        <div className={theme.classBuilder("calendar-header")}>
-            <button
-                type="button"
-                className={theme.classBuilder("calendar-header-button")}
-                aria-label={i18n.t("nav_previous_month")}
-                disabled={!status.monthlyView.hasPrev}
-                onClick={handlePrevMonth}
-            >
-                <svg
-                    className={theme.classBuilder(
-                        "calendar-header-button--icon calendar-header-button--prev"
-                    )}
-                    aria-hidden="true"
-                    viewBox="0 0 13 7"
-                >
-                    <path d="M.809 1.315L2.124 0l4.383 4.342L10.876.013l1.315 1.302L6.507 7l-.939-.938z" />
-                </svg>
-            </button>
-            <h2 className={theme.classBuilder("calendar-header--title")} id="calendar-title">
-                {i18n.f(moment(status.monthlyView.month, "YYYY-MM"), "MMMM YYYY")}
-            </h2>
-            <button
-                type="button"
-                className={theme.classBuilder("calendar-header-button")}
-                aria-label={i18n.t("nav_next_month")}
-                disabled={!status.monthlyView.hasNext}
-                onClick={handleNextMonth}
-            >
-                <svg
-                    className={theme.classBuilder(
-                        "calendar-header-button--icon calendar-header-button--next"
-                    )}
-                    aria-hidden="true"
-                    viewBox="0 0 13 7"
-                >
-                    <path d="M.809 1.315L2.124 0l4.383 4.342L10.876.013l1.315 1.302L6.507 7l-.939-.938z" />
-                </svg>
-            </button>
-        </div>
-    );
-};
-
-export default CalendarHeader;

package/src/js/components/DateTimePicker/Confirm.js

@@ -1,106 +0,0 @@
-import React, { useState } from "react";
-import moment from "moment-timezone";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useStatus } from "./contexts/status-context";
-import { useTheme } from "./contexts/theme-context";
-import { useTz } from "../../contexts/tz-context";
-
-const Confirm = ({ confirmButtonRef }) => {
-    const i18n = useI18n();
-    const [status, dispatchStatus] = useStatus();
-    const theme = useTheme();
-    const [tz] = useTz();
-
-    const [sequenceTitlePresent, setSequenceTitlePresent] = useState(
-        () =>
-            status.selected.sequence &&
-            status.selected.sequence.every(obj => Object.keys(obj).includes("sequence_title"))
-    );
-
-    const handleCancel = () => {
-        dispatchStatus({ type: "CANCEL_SLOT_SELECTION" });
-    };
-
-    const handleConfirmation = () => {
-        dispatchStatus({ type: "CONFIRM_SELECTION", tzid: tz.selectedTzid.tzid });
-    };
-
-    return (
-        <div
-            role="dialog"
-            aria-labelledby="confirm-slot-title"
-            aria-describedby="confirm-slot-details"
-            className={theme.classBuilder("confirm-details")}
-        >
-            <h2 className={theme.classBuilder("visually-hidden")} id="confirm-slot-title">
-                {i18n.t("confirm_slot_title")}
-            </h2>
-            <div id="confirm-slot-details">
-                <p className={theme.classBuilder("confirm-details--info")}>
-                    {i18n.customFormatedTimeZone(
-                        moment(status.selected.start, "YYYY-MM-DDTHH:mm:00Z"),
-                        tz.selectedTzid.tzid,
-                        "dddd, MMMM Do YYYY"
-                    )}
-                </p>
-                <p className={theme.classBuilder("confirm-details--info")}>
-                    {i18n.customFormatedTimeZone(
-                        moment(status.selected.start, "YYYY-MM-DDTHH:mm:00Z"),
-                        tz.selectedTzid.tzid,
-                        "LT"
-                    )}
-                    {" - "}
-                    {i18n.customFormatedTimeZone(
-                        moment(status.selected.end, "YYYY-MM-DDTHH:mm:00Z"),
-                        tz.selectedTzid.tzid,
-                        "LT"
-                    )}{" "}
-                    {`(${moment.tz(tz.selectedTzid.tzid).format("z")})`}
-                </p>
-                {status.selected.sequence && sequenceTitlePresent && (
-                    <dl className={theme.classBuilder("confirm-details--sequence")}>
-                        {status.selected.sequence.map((slot, k) => (
-                            <div key={k}>
-                                <dt
-                                    className={theme.classBuilder(
-                                        "confirm-details--sequence-title"
-                                    )}
-                                >
-                                    {slot.sequence_title}
-                                </dt>
-                                <dd
-                                    className={theme.classBuilder("confirm-details--sequence-time")}
-                                >
-                                    {i18n.customFormatedTimeZone(
-                                        moment(slot.start, "YYYY-MM-DDTHH:mm:00Z"),
-                                        tz.selectedTzid.tzid,
-                                        "LT"
-                                    )}
-                                    {" - "}
-                                    {i18n.customFormatedTimeZone(
-                                        moment(slot.end, "YYYY-MM-DDTHH:mm:00Z"),
-                                        tz.selectedTzid.tzid,
-                                        "LT"
-                                    )}
-                                </dd>
-                            </div>
-                        ))}
-                    </dl>
-                )}
-            </div>
-            <button
-                className={theme.classBuilder("confirm-button")}
-                onClick={handleConfirmation}
-                ref={confirmButtonRef}
-            >
-                {i18n.t("confirm")}
-            </button>
-            <button className={theme.classBuilder("cancel-button")} onClick={handleCancel}>
-                {i18n.t("cancel")}
-            </button>
-        </div>
-    );
-};
-
-export default Confirm;