cronofy-elements 1.48.0 → 1.49.0

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

@@ -1,45 +0,0 @@
-import React from "react";
-
-import { I18nProvider } from "../../contexts/i18n-context";
-import { LogProvider } from "../../contexts/log-context";
-import { TzProvider } from "../../contexts/tz-context";
-
-import { parseTzList, getInitialSelectedTzid } from "./utils/tz-utils";
-
-import Wrapper from "./Wrapper";
-
-import "./scss/availabilityrules.scss";
-
-const AvailabilityRules = ({ options }) => {
-    const logOptions = {
-        mode: options.config.logs,
-        name: "Availability Rules",
-        callback: options.callback,
-    };
-
-    const i18nOptions = {
-        locale: options.locale,
-        slug: "availability_rules",
-        allPhrases: options.translations,
-        tzid: options.tzid,
-    };
-
-    const tzList = parseTzList(options.config.tz_list, options.tzid);
-    const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
-    const tzOptions = {
-        selectedTzid: selectedTzid,
-        list: tzList,
-    };
-
-    return (
-        <LogProvider options={logOptions}>
-            <I18nProvider options={i18nOptions}>
-                <TzProvider options={tzOptions}>
-                    <Wrapper options={options} />
-                </TzProvider>
-            </I18nProvider>
-        </LogProvider>
-    );
-};
-
-export default AvailabilityRules;

package/src/js/components/AvailabilityRules/Calendar.js

@@ -1,31 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-import RemoveButton from "./RemoveButton";
-
-const Calendar = ({ calendar, remove = false }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: flex;
-                align-items: center;
-                border-radius: 4px;
-                background: ${theme.colors.primary};
-                margin-right: 8px;
-                margin-bottom: 5px;
-                font-size: 16px;
-                line-height: 1;
-                padding: 6px 10px;
-                color: ${theme.colors.white};
-            `}
-            className={`${theme.prefix}__calendars__calendar`}
-        >
-            {calendar.name}
-            {remove ? <RemoveButton callback={() => remove([calendar.id])} /> : null}
-        </div>
-    );
-};
-
-export default Calendar;

package/src/js/components/AvailabilityRules/CalendarListItem.js

@@ -1,53 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-import Checkmark from "./Checkmark";
-
-import { buttonReset } from "../../styles/utils";
-
-const CalendarListItem = ({ calendar, callback, active = false }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <li>
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    display: flex;
-                    align-items: center;
-                    cursor: pointer;
-                    user-select: none;
-                    margin: 0;
-                    width: 100%;
-                    text-align: left;
-                    padding-top: 12px;
-                    padding-bottom: 12px;
-                    line-height: 1;
-                    cursor: pointer;
-                    color: ${theme.colors.black};
-                    background: ${theme.colors.white};
-                    border-bottom: 1px solid ${theme.colors.hairline};
-                `}
-                key={`cal-toggle-${calendar.calendar_id}`}
-                onClick={() => callback([calendar.calendar_id])}
-                className={`${theme.prefix}__calendars__modal-list-item`}
-            >
-                <Checkmark checked={active} />
-                <div className={`${theme.prefix}__calendars__modal-item-details`}>
-                    <span
-                        css={css`
-                            display: block;
-                            line-height: 1;
-                        `}
-                        className={`${theme.prefix}__calendars__modal-item-title`}
-                    >
-                        {calendar.calendar_name}
-                    </span>
-                </div>
-            </button>
-        </li>
-    );
-};
-
-export default CalendarListItem;

package/src/js/components/AvailabilityRules/CalendarProfiles.js

@@ -1,67 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import CalendarListItem from "./CalendarListItem";
-
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-import { buttonReset } from "../../styles/utils";
-
-const CalendarProfiles = ({ activeCalendars, calendars, name, service, callbacks }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const groupItems = calendars.map(item => {
-        const isActive = activeCalendars.includes(item.calendar_id);
-        return (
-            <CalendarListItem
-                key={item.calendar_id}
-                calendar={item}
-                active={isActive}
-                callback={isActive ? callbacks.remove : callbacks.add}
-            />
-        );
-    });
-    const profileCalendarIDs = calendars.map(cal => cal.calendar_id);
-    const areAllActive = profileCalendarIDs.every(id => activeCalendars.includes(id));
-    const callback = areAllActive ? callbacks.remove : callbacks.add;
-    return (
-        <ul
-            css={css`
-                margin: 0;
-            `}
-        >
-            <li
-                css={css`
-                    margin: 0;
-                `}
-            >
-                <button
-                    css={css`
-                        display: block;
-                        width: 100%;
-                        text-align: left;
-                        padding: 12px;
-                        line-height: 1;
-                        cursor: pointer;
-                        ${buttonReset};
-                        color: ${theme.colors.grey};
-                        background: ${theme.colors.greyPale};
-                        border-bottom: 1px solid ${theme.colors.hairline};
-                    `}
-                    type="button"
-                    onClick={() => callback(profileCalendarIDs)}
-                >{`${i18n.t(service)} (${name})`}</button>
-                <ul
-                    css={css`
-                        margin: 0;
-                    `}
-                >
-                    {groupItems}
-                </ul>
-            </li>
-        </ul>
-    );
-};
-
-export default CalendarProfiles;

package/src/js/components/AvailabilityRules/CalendarSelector.js

@@ -1,104 +0,0 @@
-import React, { useContext, useEffect, useRef } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import CalendarProfiles from "./CalendarProfiles";
-
-import { ThemeContext } from "./Wrapper";
-
-const CalendarSelector = ({ calendars, done, add, remove }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const wrapperRef = useRef(null);
-
-    const handleEsc = e => {
-        if (e.keyCode === 27) {
-            done();
-        }
-    };
-
-    const handleClickOutside = e => {
-        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-            done();
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
-        document.addEventListener("keydown", handleEsc);
-        return () => {
-            // Unbind the event listener on clean up
-            document.removeEventListener("click", handleClickOutside);
-            document.removeEventListener("keydown", handleEsc);
-        };
-    }, []);
-
-    const profilesMarkup = calendars.profiles
-        .filter(profile => profile.profile_calendars.length > 0)
-        .map(profile => (
-            <CalendarProfiles
-                key={profile.profile_name}
-                activeCalendars={calendars.active}
-                calendars={profile.profile_calendars}
-                name={profile.profile_name}
-                service={profile.provider_service}
-                callbacks={{ add, remove }}
-            />
-        ));
-
-    return (
-        <div
-            ref={wrapperRef}
-            css={css`
-                position: absolute;
-                z-index: 10;
-                top: 100%;
-                left: 0;
-                transform: translateY(10px);
-                background: ${theme.colors.white};
-                border: 1px solid ${theme.colors.hairline};
-                border-radius: 4px;
-                box-shadow: ${transparentize(0.8, theme.colors.black)} 0 1px 3px 0;
-                &:before {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 0;
-                    left: 50%;
-                    transform: translate(-50%, -50%) rotate(45deg);
-                    z-index: 1;
-                    width: 12px;
-                    height: 12px;
-                    pointer-events: none;
-                    background: ${theme.colors.greyPale};
-                    border-top: 1px solid ${theme.colors.hairline};
-                    border-left: 1px solid ${theme.colors.hairline};
-                }
-                // List reset here to account for common
-                // hard-to-override base styles
-                ul,
-                ul li {
-                    margin: 0;
-                    padding: 0;
-                    list-style: none;
-                }
-                .${theme.prefix}__calendars__modal-list-item {
-                    padding: 12px;
-                }
-            `}
-            className={`${theme.prefix}__calendars__modal`}
-        >
-            <div
-                css={css`
-                    display: block;
-                    padding: 0;
-                    margin: 0;
-                `}
-                className={`${theme.prefix}__calendars__modal-list`}
-            >
-                {profilesMarkup}
-            </div>
-        </div>
-    );
-};
-
-export default CalendarSelector;

package/src/js/components/AvailabilityRules/Calendars.js

@@ -1,145 +0,0 @@
-import React, { useState, useContext } from "react";
-import { css } from "@emotion/core";
-
-import { CalendarContext, ThemeContext } from "./Wrapper";
-import AddButton from "./AddButton";
-import Calendar from "./Calendar";
-import UnknownCalendar from "./UnknownCalendar";
-import CalendarSelector from "./CalendarSelector";
-import LoadingSpinner from "../generic/LoadingSpinner";
-import { useI18n } from "../../contexts/i18n-context";
-
-const Calendars = ({ loading }) => {
-    const [selectionVisibility, setSelectionVisibility] = useState(false);
-    const [calendars, setCalendars] = useContext(CalendarContext);
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const addCalendars = (ids = []) => {
-        if (ids.length > 0) {
-            const newIDs = ids.filter(id => !calendars.active.includes(id));
-            if (newIDs.length <= 0) return;
-            setCalendars({
-                ...calendars,
-                active: [...calendars.active, ...newIDs],
-            });
-        } else {
-            // Add all calendars
-            setCalendars({
-                ...calendars,
-                active: calendars.all.map(cal => cal.id),
-            });
-        }
-    };
-
-    const removeCalendars = (ids = []) => {
-        if (ids.length > 0) {
-            const filteredCals = calendars.active.filter(cal => !ids.includes(cal));
-            setCalendars({
-                ...calendars,
-                active: filteredCals,
-            });
-        } else {
-            // Remove all calendars
-            setCalendars({ ...calendars, active: [] });
-        }
-    };
-
-    const handleCalendarSelection = () => {
-        setSelectionVisibility(!selectionVisibility);
-    };
-
-    const showCalendars = calendars.active.length > 0;
-
-    const calendarsMarkup = showCalendars ? (
-        calendars.active.map(calendarId => {
-            const calendar = calendars.all.find(cal => cal.id === calendarId);
-            if (calendar) {
-                return (
-                    <Calendar
-                        key={`${calendar.id}-calendar`}
-                        calendar={calendar}
-                        remove={removeCalendars}
-                    />
-                );
-            } else {
-                return (
-                    <UnknownCalendar
-                        key={`${calendarId}-calendar`}
-                        id={calendarId}
-                        remove={removeCalendars}
-                    />
-                );
-            }
-        })
-    ) : (
-        <Calendar calendar={{ name: `All` }} remove={false} />
-    );
-
-    return (
-        <div
-            css={css`
-                z-index: 5;
-                position: relative;
-                width: 100%;
-                display: flex;
-                align-items: center;
-                margin-bottom: 20px;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    flex-wrap: wrap;
-                }
-            `}
-            className={`${theme.prefix}__calendars`}
-        >
-            <span
-                css={css`
-                    display: block;
-                    margin-right: 12px;
-                    flex-shrink: 0;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        margin-bottom: 10px;
-                    }
-                `}
-                className={`${theme.prefix}__calendars__title`}
-            >
-                {i18n.t("included_calendars")}
-            </span>
-            <div
-                css={css`
-                    width: 100%;
-                    display: flex;
-                    flex-wrap: wrap;
-                    border: 1px solid ${theme.colors.hairline};
-                    background: ${theme.colors.white};
-                    border-radius: 4px;
-                    align-items: center;
-                    padding: 5px 5px 0 5px;
-                    position: relative;
-                `}
-                className={`${theme.prefix}__calendars__selector`}
-            >
-                {loading ? (
-                    <LoadingSpinner color={theme.colors.black} />
-                ) : (
-                    <React.Fragment>
-                        {calendarsMarkup}
-                        {calendars.all.length > 0 &&
-                        calendars.active.length < calendars.all.length ? (
-                            <AddButton callback={handleCalendarSelection} />
-                        ) : null}
-                    </React.Fragment>
-                )}
-                {selectionVisibility ? (
-                    <CalendarSelector
-                        calendars={calendars}
-                        done={handleCalendarSelection}
-                        remove={removeCalendars}
-                        add={addCalendars}
-                    />
-                ) : null}
-            </div>
-        </div>
-    );
-};
-
-export default Calendars;

package/src/js/components/AvailabilityRules/Checkmark.js

@@ -1,51 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const Checkmark = ({ checked }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    return (
-        <div
-            css={css`
-                background: red;
-                width: 18px;
-                height: 18px;
-                border-radius: 2px;
-                margin-right: 8px;
-                border: 1px solid ${checked ? theme.colors.primary : theme.colors.hairline};
-                background: ${checked ? theme.colors.primary : theme.colors.white};
-                position: relative;
-            `}
-            className={`${theme.prefix}__checkbox ${theme.prefix}__checkbox--${
-                checked ? i18n.t("checked") : i18n.t("unchecked")
-            }`}
-        >
-            {checked ? (
-                <svg
-                    css={css`
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        width: 10px;
-                        height: 10px;
-                    `}
-                    viewBox="0 0 7 8"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className={`${theme.prefix}__checkbox-tickmark`}
-                >
-                    <path
-                        d="M0 3.956l.7-.934 1.75 2.334L6.3.222l.7.934-4.55 6.066z"
-                        fill={theme.colors.white}
-                    />
-                </svg>
-            ) : null}
-        </div>
-    );
-};
-
-export default Checkmark;

package/src/js/components/AvailabilityRules/DayLabels.js

@@ -1,91 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import moment from "moment-timezone";
-
-import { getWeekDays } from "../../helpers/slots.rules";
-
-import { StatusContext, ExtrasContext, ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const dayLookup = {
-    sunday: "2020-03-01",
-    monday: "2020-03-02",
-    tuesday: "2020-03-03",
-    wednesday: "2020-03-04",
-    thursday: "2020-03-05",
-    friday: "2020-03-06",
-    saturday: "2020-03-07",
-};
-
-const DayLabel = ({ day, height }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const dayObject = moment(dayLookup[day], "YYYY-MM-DD", true);
-
-    return (
-        <div
-            css={css`
-                height: ${height}px;
-                line-height: ${height}px;
-                width: ${theme.sizes.columnWidth}px;
-                flex-shrink: 1;
-                text-transform: capitalize;
-                text-align: center;
-            `}
-            className={`${theme.prefix}__label--day`}
-        >
-            {i18n.f(dayObject, "ddd")}
-        </div>
-    );
-};
-
-const DayLabels = () => {
-    const [status, setStatus] = useContext(StatusContext);
-    const days = getWeekDays(status.startDay);
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    return (
-        <div
-            css={css`
-                position: relative;
-                width: 100%;
-                display: flex;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    margin-top: 16px;
-                }
-            `}
-            className={`${theme.prefix}__label-row`}
-        >
-            <div
-                className="spacer"
-                css={css`
-                    display: block;
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-shrink: 0;
-                    height: ${extras.slotHeight.height}px;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-            />
-            <div
-                css={css`
-                    width: 100%;
-                    display: flex;
-                    align-content: stretch;
-                    ${theme.sizes.wrapperUnderflow
-                        ? `margin-left: ${theme.sizes.wrapperUnderflow}px;`
-                        : ""}
-                `}
-            >
-                {days.map(day => (
-                    <DayLabel key={`${day}-header`} day={day} height={40} />
-                ))}
-            </div>
-        </div>
-    );
-};
-
-export default DayLabels;