cronofy-elements 1.48.1 → 1.49.1

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

@@ -1,215 +0,0 @@
-import React, { useState, useEffect, useReducer } from "react";
-import { css } from "@emotion/core";
-
-import * as connections from "../../helpers/connections";
-import { parseStyleOptions } from "../../helpers/theming";
-import { setupProviderData, parseAuthOptions } from "../../helpers/utils.CalendarSync";
-import { i18nConstructor } from "../../helpers/i18n";
-import { logConstructor } from "../../helpers/logging";
-
-import Container from "../generic/Container";
-import Error from "../generic/Error";
-import Footer from "./Footer";
-import Profiles from "./Profiles";
-import SelectProvider from "./SelectProvider";
-import LoadingSpinner from "../generic/LoadingSpinner";
-import { statusReducer } from "./contexts/status-reducer";
-
-export const AuthContext = React.createContext();
-export const LoggingContext = React.createContext();
-export const I18nContext = React.createContext();
-export const OptionsContext = React.createContext();
-export const ProfilesContext = React.createContext();
-export const ProvidersContext = React.createContext();
-export const ThemeContext = React.createContext();
-export const StatusContext = React.createContext();
-
-const CalendarSync = ({ options }) => {
-    const [log, setLog] = useState(
-        logConstructor(
-            options.config.logs,
-            "Calendar Sync",
-            options.callback ? options.callback : false
-        )
-    );
-
-    const [status, dispatchStatus] = useReducer(statusReducer, {
-        adding: false,
-        demo: options.demo || false,
-        editing: false,
-        error: false,
-        loading: true,
-        locale: options.locale,
-        pendingNotification: null,
-        reload: true, // trigger "reload" on first load
-        singleProfile: options.single_profile,
-        type: null,
-        callback: options.callback
-            ? options.callback
-            : () => log.info("No `callback` option has been provided"),
-    });
-    const [i18n, setI18n] = useState(
-        i18nConstructor({
-            context: "calendar_sync",
-            locale: options.locale,
-            allPhrases: options.translations,
-            tzid: options.tzid,
-        })
-    );
-    const [authUrl, setAuthUrl] = useState(options.authorization_url || false);
-    const [auth, setAuth] = useState(parseAuthOptions(options.authorization));
-    const [providers, setProviders] = useState(
-        setupProviderData(auth, options.domains.appDomain, authUrl, status.singleProfile)
-    );
-    const [profiles, setProfiles] = useState([]);
-    const [theme, setTheme] = useState({
-        ...parseStyleOptions(options.styles, "CalendarSync"),
-        sizes: {
-            labelWidth: 60,
-        },
-    });
-
-    const getUserInfoOrDispatchDefault = () => {
-        if (options.token) {
-            connections
-                .getUserInfo(options.token, options.domains.apiDomain, options.demo)
-                .then(res => {
-                    if (res["cronofy.data"]) {
-                        setProfiles(res["cronofy.data"].profiles);
-                    } else {
-                        log.warn("No profiles found");
-                    }
-
-                    dispatchStatus({
-                        type: "GET_USER_INFO_SUCCESS",
-                        userInfo: res,
-                    });
-                })
-                .catch(error => {
-                    const errorMessage = error.message ? error.message : error;
-                    const errorOutput = {};
-
-                    if (error.docsSlug) {
-                        errorOutput.docsSlug = error.docsSlug;
-                    }
-
-                    log.error(errorMessage, errorOutput);
-
-                    dispatchStatus({
-                        type: "GET_USER_INFO_ERROR",
-                        error,
-                    });
-                });
-        } else {
-            dispatchStatus({ type: "NO_TOKEN_SUCCESS" });
-        }
-    };
-
-    useEffect(() => {
-        getUserInfoOrDispatchDefault();
-    }, [options.token]);
-
-    useEffect(() => {
-        if (status.pendingNotification) {
-            getUserInfoOrDispatchDefault();
-        }
-    }, [status.pendingNotification]);
-
-    return (
-        <Container
-            height={"auto"}
-            minHeight={"0"}
-            css={css`
-                max-width: 100%;
-                margin-bottom: 10px;
-                min-height: 100px;
-
-                // Reset
-                a {
-                    color: inherit;
-                }
-                ul,
-                ol,
-                li {
-                    margin: 0;
-                    padding: 0;
-                }
-            `}
-            className={`${theme.prefix}`}
-        >
-            {status.error ? (
-                <Error message={i18n.t("global_error")} theme={theme} />
-            ) : (
-                <LoggingContext.Provider value={log}>
-                    <I18nContext.Provider value={i18n}>
-                        <ThemeContext.Provider value={theme}>
-                            <StatusContext.Provider value={[status, dispatchStatus]}>
-                                <span
-                                    css={css`
-                                        margin-top: 10px;
-                                        padding-bottom: 6px;
-                                        font-weight: bold;
-                                        border-bottom: 1px solid ${theme.colors.hairline};
-                                    `}
-                                    className={`${theme.prefix}__title`}
-                                >
-                                    {i18n.t("calendar_accounts")}
-                                </span>
-                                {status.loading ? (
-                                    <div
-                                        css={css`
-                                            display: flex;
-                                            justify-content: center;
-                                            align-items: center;
-                                        `}
-                                    >
-                                        <LoadingSpinner />
-                                    </div>
-                                ) : (
-                                    <>
-                                        {profiles.length ? (
-                                            <>
-                                                {status.adding ? (
-                                                    <ProvidersContext.Provider value={providers}>
-                                                        <AuthContext.Provider value={auth}>
-                                                            <SelectProvider
-                                                                message={`${i18n.t(
-                                                                    "select_provider"
-                                                                )}:`}
-                                                            />
-                                                        </AuthContext.Provider>
-                                                    </ProvidersContext.Provider>
-                                                ) : (
-                                                    <ProfilesContext.Provider
-                                                        value={[profiles, setProfiles]}
-                                                    >
-                                                        <OptionsContext.Provider value={options}>
-                                                            <Profiles loading={status.loading} />
-                                                        </OptionsContext.Provider>
-                                                    </ProfilesContext.Provider>
-                                                )}
-                                                {status.type === "account" && <Footer />}
-                                            </>
-                                        ) : (
-                                            <ProvidersContext.Provider value={providers}>
-                                                <AuthContext.Provider value={auth}>
-                                                    <SelectProvider
-                                                        message={`${i18n.t(
-                                                            "select_provider_to_add_first_account"
-                                                        )}:`}
-                                                    />
-                                                </AuthContext.Provider>
-                                            </ProvidersContext.Provider>
-                                        )}
-                                    </>
-                                )}
-                            </StatusContext.Provider>
-                        </ThemeContext.Provider>
-                    </I18nContext.Provider>
-                </LoggingContext.Provider>
-            )}
-        </Container>
-    );
-};
-
-export default CalendarSync;

package/src/js/components/CalendarSync/EditToggle.js

@@ -1,71 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-import { I18nContext, ThemeContext, StatusContext } from "./CalendarSync";
-
-const EditToggle = () => {
-    const [status, dispatchStatus] = useContext(StatusContext);
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    const handleEditToggle = () => {
-        dispatchStatus({ type: "TOGGLE_EDIT_PROFILES" });
-    };
-
-    const buttonTextStyles = status.editing
-        ? css`
-              border-bottom: 2px solid ${theme.colors.primary};
-          `
-        : css`
-              color: ${theme.colors.greyMid};
-          `;
-
-    return (
-        <div
-            css={css`
-                height: 40px;
-                display: flex;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__edit-toggle`}
-        >
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset}
-                    padding: 0;
-                    cursor: pointer;
-                `}
-                className={`${theme.prefix}__edit-toggle-button`}
-                onClick={handleEditToggle}
-            >
-                {status.editing ? (
-                    <svg
-                        css={css`
-                            width: 10px;
-                            height: 10px;
-                            margin-right: 4px;
-                            fill: ${theme.colors.grey};
-                        `}
-                        className={`${theme.prefix}__edit-toggle-icon`}
-                        viewBox="0 0 13 10"
-                    >
-                        <path d="M2.756 4.41L6.333.834 5.5 0l-5 5 .417.417L5.5 10l.833-.833-3.577-3.578h9.53V4.411z" />
-                    </svg>
-                ) : null}
-                <span
-                    css={css`
-                        font-weight: bold;
-                        ${buttonTextStyles}
-                    `}
-                    className={`${theme.prefix}__edit-toggle-text`}
-                >
-                    {status.editing ? i18n.t("cancel") : i18n.t("edit_accounts")}
-                </span>
-            </button>
-        </div>
-    );
-};
-
-export default EditToggle;

package/src/js/components/CalendarSync/Footer.js

@@ -1,31 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext, StatusContext } from "./CalendarSync";
-import AddToggle from "./AddToggle";
-import EditToggle from "./EditToggle";
-
-const Footer = ({ connected, syncRequired, relinkUrl = false }) => {
-    const theme = useContext(ThemeContext);
-    const [status] = useContext(StatusContext);
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-top: 10px;
-                @media (max-width: 650px) {
-                    flex-wrap: wrap;
-                }
-            `}
-            className={`${theme.prefix}__footer`}
-        >
-            {!status.editing && !status.singleProfile ? <AddToggle /> : <span />}
-            {!status.adding ? <EditToggle /> : null}
-        </div>
-    );
-};
-
-export default Footer;

package/src/js/components/CalendarSync/Inactive.js

@@ -1,66 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { I18nContext, ThemeContext } from "./CalendarSync";
-
-const Inactive = ({ url }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    return (
-        <a
-            href={url}
-            target="_blank"
-            css={css`
-                display: flex;
-                align-items: center;
-                padding: 2px 6px;
-                background: ${theme.colors.red};
-                border-radius: 4px;
-                transition: background 0.2s;
-                &:hover {
-                    background: ${theme.colors.redDark};
-                }
-                @media (max-width: 380px) {
-                    margin-top: 6px;
-                    padding: 6px 10px;
-                    width: 100px;
-                    justify-content: center;
-                }
-            `}
-            className={`${theme.prefix}__status--inactive`}
-        >
-            <span
-                css={css`
-                    display: block;
-                    color: ${theme.colors.white};
-                    text-transform: uppercase;
-                    font-weight: bold;
-                    letter-spacing: 1px;
-                    font-size: 10px;
-                    vertical-align: middle;
-                    padding: 0 4px;
-                `}
-                className={`${theme.prefix}__status-label`}
-            >
-                {i18n.t("relink")}
-            </span>
-            <svg
-                css={css`
-                    display: block;
-                    width: 13px;
-                    height: 13px;
-                    margin-left: 4px;
-                    fill: ${theme.colors.white};
-                `}
-                className={`${theme.prefix}__status-icon ${theme.prefix}__status-icon--reload`}
-                viewBox="0 0 9 13"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path d="M4.459 2.3v1.2a3 3 0 0 0-2.124 5.124l-.846.846a4.2 4.2 0 0 1 2.97-7.17zm2.97 1.23a4.2 4.2 0 0 1-2.97 7.17V9.5a3 3 0 0 0 2.124-5.124l.846-.846zm-2.97 8.97l-2.4-2.4 2.4-2.4v4.8zm0-7.2V.5l2.4 2.4-2.4 2.4z" />
-            </svg>
-        </a>
-    );
-};
-
-export default Inactive;

package/src/js/components/CalendarSync/Loading.js

@@ -1,52 +0,0 @@
-import React, { useContext } from "react";
-import { css, keyframes } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { I18nContext, ThemeContext } from "./CalendarSync";
-
-const spin = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100%{
-        transform: rotate(360deg);
-    }
-`;
-
-const Loading = ({ locale }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    return (
-        <div
-            css={css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: ${transparentize(0.8, "#000000")};
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__loading-wrapper`}
-        >
-            <svg
-                css={css`
-                    width: 2em;
-                    height: 2em;
-                    fill: #ffffff;
-                    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>
-            <span className={"visuallyhidden"}>{i18n.t("loading")}</span>
-        </div>
-    );
-};
-
-export default Loading;

package/src/js/components/CalendarSync/Pending.js

@@ -1,74 +0,0 @@
-import React, { useContext } from "react";
-import { css, keyframes } from "@emotion/core";
-
-import { I18nContext, ThemeContext } from "./CalendarSync";
-
-const Pending = () => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    const spin = keyframes`
-        0% {
-            transform: rotate(0deg);
-        }
-        100%{
-            transform: rotate(360deg);
-        }
-    `;
-
-    return (
-        <span
-            css={css`
-                display: flex;
-                align-items: center;
-                padding: 4px;
-                border-radius: 4px;
-            `}
-            className={`${theme.prefix}__status--pending`}
-        >
-            <span
-                css={css`
-                    display: block;
-                    color: ${theme.colors.greyMid};
-                    text-transform: uppercase;
-                    font-weight: bold;
-                    letter-spacing: 1px;
-                    font-size: 10px;
-                    vertical-align: middle;
-                `}
-                className={`${theme.prefix}__status-label`}
-            >
-                {i18n.t("pending")}
-            </span>
-            <svg
-                css={css`
-                    display: block;
-                    width: 16px;
-                    height: 16px;
-                    margin-left: 4px;
-                    fill: ${theme.colors.white};
-                    background: ${theme.colors.yellow};
-                    padding: 2px;
-                    border-radius: 50%;
-                `}
-                className={`${theme.prefix}__status-icon ${theme.prefix}__status-icon--pending`}
-                viewBox="0 0 98 98"
-            >
-                <path d="M49 97.074C22.45 97.074.926 75.55.926 49 .926 22.45 22.45.926 49 .926 75.55.926 97.074 22.45 97.074 49c0 26.55-21.524 48.074-48.074 48.074zm0-9.615c21.24 0 38.459-17.219 38.459-38.459 0-21.24-17.219-38.459-38.459-38.459-21.24 0-38.459 17.219-38.459 38.459 0 21.24 17.219 38.459 38.459 38.459zM44 20h10v31H44V20z" />
-                <rect
-                    x="44"
-                    y="49"
-                    width="10"
-                    height="31"
-                    css={css`
-                        transform: rotate(-45deg);
-                        transform-origin: 50% 50%;
-                        animation: ${spin} infinite linear 2s;
-                    `}
-                />
-            </svg>
-        </span>
-    );
-};
-
-export default Pending;

package/src/js/components/CalendarSync/ProfileStatus.js

@@ -1,33 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./CalendarSync";
-import Active from "./Active";
-import Inactive from "./Inactive";
-import Pending from "./Pending";
-
-const ProfileStatus = ({ connected, syncRequired, relinkUrl = false }) => {
-    const theme = useContext(ThemeContext);
-
-    const showRelink = !connected && relinkUrl;
-    const showActive = connected && !syncRequired;
-    const showPending = syncRequired;
-    return (
-        <div
-            css={css`
-                @media (max-width: 380px) {
-                    width: 100%;
-                    // margin-top: 4px;
-                    // margin-bottom: 4px;
-                }
-            `}
-            className={`${theme.prefix}__provider-status`}
-        >
-            {showRelink ? <Inactive url={relinkUrl} /> : null}
-            {showPending ? <Pending /> : null}
-            {showActive ? <Active /> : null}
-        </div>
-    );
-};
-
-export default ProfileStatus;

package/src/js/components/CalendarSync/Profiles.js

@@ -1,109 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import LoadingSpinner from "../generic/LoadingSpinner";
-import ProviderLogo from "./ProviderLogo";
-import ProfileStatus from "./ProfileStatus";
-import RemoveLink from "./RemoveLink";
-import { OptionsContext, ProfilesContext, ThemeContext, StatusContext } from "./CalendarSync";
-import { revokeProfile } from "../../helpers/connections";
-
-const Profiles = ({ loading }) => {
-    const theme = useContext(ThemeContext);
-    const options = useContext(OptionsContext);
-    const [profiles, setProfiles] = useContext(ProfilesContext);
-    const [status, dispatchStatus] = useContext(StatusContext);
-
-    const removeProfile = profile => {
-        dispatchStatus({ type: "REVOKE_PROFILE", profile });
-
-        if (options.config.revoke_mode === "callback_only") {
-            return;
-        }
-
-        return revokeProfile(
-            options.token,
-            options.domains.apiDomain,
-            profile.profile_id,
-            "calendar-sync",
-            options.demo
-        ).then(res => {
-            dispatchStatus({ type: "REVOKE_PROFILE_SUCCESS", profile });
-            return res;
-        });
-    };
-
-    const profilesList = profiles.map((profile, i) => (
-        <div
-            key={`${i}_${profile.profile_id}`}
-            css={css`
-                display: flex;
-                align-items: center;
-                height: 44px;
-                background: ${theme.colors.white};
-                &:nth-of-type(2n) {
-                    background: ${theme.colors.greyPale};
-                }
-                @media (max-width: 380px) {
-                    flex-wrap: wrap;
-                    height: auto;
-                    padding-top: 10px;
-                    padding-bottom: 10px;
-                }
-            `}
-            className={`${theme.prefix}__profile`}
-        >
-            {status.editing ? (
-                <RemoveLink
-                    name={profile.provider_name}
-                    removeProfile={() => removeProfile(profile)}
-                />
-            ) : (
-                <ProviderLogo provider={profile.provider_name} size={20} />
-            )}
-            <span
-                css={css`
-                    flex-grow: 1;
-                `}
-                className={`${theme.prefix}__profile-name`}
-            >
-                {profile.profile_name}
-            </span>
-            <ProfileStatus
-                connected={profile.profile_connected}
-                syncRequired={profile.profile_initial_sync_required}
-                relinkUrl={profile.profile_relink_url}
-            />
-        </div>
-    ));
-
-    return (
-        <div
-            css={css`
-                border-bottom: 1px solid ${theme.colors.hairline};
-                margin-bottom: 10px;
-                li {
-                    padding: 10px;
-                    margin: 0;
-                }
-            `}
-            className={`${theme.prefix}__profiles`}
-        >
-            {!loading ? (
-                profilesList
-            ) : (
-                <div
-                    css={css`
-                        display: flex;
-                        justify-content: center;
-                    `}
-                    className={`${theme.prefix}__loading-wrapper`}
-                >
-                    <LoadingSpinner color={theme.colors.black} />
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default Profiles;

package/src/js/components/CalendarSync/ProviderLogo.js

@@ -1,28 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./CalendarSync";
-
-import { getProviderIcon } from "../../helpers/utils.CalendarSync";
-
-const ProviderLogo = ({ provider, fill = false, size = "20" }) => {
-    const theme = useContext(ThemeContext);
-    const providerIcon = getProviderIcon(provider, fill);
-    return (
-        <svg
-            className={`${theme.prefix}__provider-icon ${theme.prefix}__provider-icon--${provider}`}
-            css={css`
-                width: ${size}px;
-                height ${size}px;
-                margin-right: 10px;
-                ${fill ? "" : `path {fill: ${theme.colors.greyMid};}`}
-            `}
-            viewBox="0 0 20 23"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            {providerIcon}
-        </svg>
-    );
-};
-
-export default ProviderLogo;