cronofy-elements 1.48.1 → 1.49.1

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

@@ -1,131 +0,0 @@
-import React, { useMemo } from "react";
-import moment from "moment-timezone";
-
-import {
-    getMonthObjectsFromQuery,
-    parseTzList,
-    getInitialSelectedTzid,
-    getDurationFromQuery,
-} from "./utils/slots";
-import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
-
-import Wrapper from "./Wrapper";
-
-import "./scss/datetimepicker.scss";
-
-import { I18nProvider } from "../../contexts/i18n-context";
-import { LogProvider } from "../../contexts/log-context";
-import { ThemeProvider } from "./contexts/theme-context";
-import { StatusProvider } from "./contexts/status-context";
-import { TzProvider } from "../../contexts/tz-context";
-
-const DateTimePicker = ({ options }) => {
-    const statusOptions = useMemo(() => {
-        const selectedDateObject =
-            options.config.selectedDate && moment(options.config.selectedDate, "YYYY-MM-DD");
-
-        const months = getMonthObjectsFromQuery(
-            options.query,
-            options.tzid,
-            selectedDateObject?.format("YYYY-MM")
-        );
-
-        const duration = getDurationFromQuery(options.query);
-
-        const endDateObject = moment(options.config.endDate, "YYYY-MM-DD");
-        const startDateObject = moment(options.config.startDate, "YYYY-MM-DD");
-        const currentMonthObject = selectedDateObject ?? startDateObject;
-        const currentMonth = currentMonthObject.format("YYYY-MM");
-        const monthsInView = getMonthsInDisplay(currentMonth, options.config.startDay);
-
-        const monthlyView = {
-            month: currentMonth,
-            hasNext: currentMonthObject.isBefore(endDateObject, "month"),
-            hasPrev: currentMonthObject.isAfter(startDateObject, "month"),
-            monthsInView,
-            days: parseTimeSlots({
-                slots: {},
-                month: currentMonth,
-                tzid: options.tzid,
-                startDay: options.config.startDay,
-            }),
-        };
-
-        return {
-            auth: {
-                token: options.token,
-                domains: options.domains,
-                demo: options.demo,
-            },
-            callback: options.callback
-                ? options.callback
-                : () => options.log.info("No `callback` option has been provided"),
-            columnView: "loading", // loading | error | slots | confirm | no-slots
-            daySlots: [],
-            duration,
-            locale: options.locale,
-            mode: options.config.mode, // confirm (default) | no_confirm
-            query: options.query,
-            months,
-            monthlyView,
-            selected: false,
-            startDay: options.config.startDay,
-            focusedDay: options.config.selectedDay,
-            selectedDay: options.config.selectedDate,
-            startDateObject,
-            endDateObject,
-            focusedSlot: false,
-            availableDays: [],
-            sequenced_availability: options.query.sequence ? true : false,
-            slots: {},
-            slotButtonMode: options.config.slotButtonMode,
-            slotFetchCount: 0,
-            slotInjectionPoint: undefined,
-            tzid: options.tzid,
-            populated: false,
-        };
-    }, []);
-
-    const themeOptions = {
-        styles: { height: "auto", padding: "10px", ...options.styles },
-        name: "DTP",
-    };
-
-    const logOptions = {
-        mode: options.config.logs,
-        name: "Date Time Picker",
-        callback: options.callback,
-    };
-
-    const i18nOptions = {
-        locale: options.locale,
-        locale_modifiers: options.locale_modifiers,
-        slug: "date_time_picker",
-        allPhrases: options.translations,
-        tzid: options.tzid,
-    };
-
-    const tzList = parseTzList(options.config.tzList, options.tzid);
-    const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
-
-    const tzOptions = {
-        selectedTzid: selectedTzid,
-        list: tzList,
-    };
-
-    return (
-        <ThemeProvider options={themeOptions}>
-            <LogProvider options={logOptions}>
-                <I18nProvider options={i18nOptions}>
-                    <TzProvider options={tzOptions}>
-                        <StatusProvider options={statusOptions}>
-                            <Wrapper />
-                        </StatusProvider>
-                    </TzProvider>
-                </I18nProvider>
-            </LogProvider>
-        </ThemeProvider>
-    );
-};
-
-export default DateTimePicker;

package/src/js/components/DateTimePicker/DayButton.js

@@ -1,38 +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 DayButton = ({ day, selected = false, focused = false }) => {
-    const i18n = useI18n();
-    const [status, dispatchStatus] = useStatus();
-    const theme = useTheme();
-    const [tz] = useTz();
-
-    let classStub = "calendar-grid--button";
-    if (day.isAvailable) classStub = classStub + " calendar-grid--available";
-    if (!day.currentMonth) classStub = classStub + " calendar-grid--prevnext";
-    if (selected) classStub = classStub + " calendar-grid--selected";
-    if (focused) classStub = classStub + " calendar-grid--focused";
-
-    const handleClick = () => {
-        dispatchStatus({ type: "SELECT_DAY", day: day.date, tzid: tz.selectedTzid.tzid });
-    };
-
-    return (
-        <button
-            className={theme.classBuilder(classStub)}
-            type="button"
-            tabIndex={-1}
-            disabled={day.isAvailable ? false : true}
-            onClick={day.isAvailable ? handleClick : undefined}
-        >
-            {i18n.f(moment(day.date, "YYYY-MM-DD"), "DD")}
-        </button>
-    );
-};
-
-export default DayButton;

package/src/js/components/DateTimePicker/DayHeadings.js

@@ -1,33 +0,0 @@
-import React from "react";
-import moment from "moment-timezone";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useTheme } from "./contexts/theme-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 DayHeadings = ({ days }) => {
-    const i18n = useI18n();
-    const theme = useTheme();
-
-    const daysMarkup = days.map(day => {
-        const dayObject = moment(dayLookup[day], "YYYY-MM-DD", true);
-        return (
-            <th className={theme.classBuilder("calendar-grid--week-day")} key={`day_${day}`}>
-                {i18n.f(dayObject, "ddd")}
-            </th>
-        );
-    });
-
-    return daysMarkup;
-};
-
-export default DayHeadings;

package/src/js/components/DateTimePicker/Details.js

@@ -1,33 +0,0 @@
-import React, { memo } from "react";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useTheme } from "./contexts/theme-context";
-import TimeZoneSelector from "../generic/TimeZoneSelector";
-
-import { useTz } from "../../contexts/tz-context";
-
-const Details = ({ duration, locale }) => {
-    const i18n = useI18n();
-    const theme = useTheme();
-    const [tz, setTz] = useTz();
-
-    return (
-        <div className={theme.classBuilder("details")}>
-            <div className={theme.classBuilder("details--tz")}>
-                <p className={theme.classBuilder("details--tz-label")}>
-                    <strong>{i18n.t("time_zone")}:</strong>
-                </p>
-                <TimeZoneSelector locale={locale} theme={theme} tz={tz} setTz={setTz} />
-            </div>
-            <div className={theme.classBuilder("details--duration")}>
-                {duration && (
-                    <p>
-                        <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
-                    </p>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default memo(Details);

package/src/js/components/DateTimePicker/Error.js

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { useTheme } from "./contexts/theme-context";
-
-const Error = ({ message = "There was an error", title = false }) => {
-    const theme = useTheme();
-    return (
-        <div className={theme.classBuilder("error")}>
-            <svg
-                className={theme.classBuilder("error-icon")}
-                viewBox="0 0 486.463 486.463"
-                aria-hidden="true"
-            >
-                <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 className={theme.classBuilder("error-text-wrapper")}>{title}</span>
-            ) : null}
-            <span className={theme.classBuilder("error-text")}>{message}</span>
-        </div>
-    );
-};
-
-export default Error;

package/src/js/components/DateTimePicker/Loading.js

@@ -1,20 +0,0 @@
-import React from "react";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useTheme } from "./contexts/theme-context";
-
-const Loading = () => {
-    const i18n = useI18n();
-    const theme = useTheme();
-    return (
-        <div className={theme.classBuilder("loading-wrapper")}>
-            <svg aria-hidden="true" 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/DateTimePicker/LoadingCalendar.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useTheme } from "./contexts/theme-context";
-
-const LoadingCalendar = () => {
-    const i18n = useI18n();
-    const theme = useTheme();
-
-    return (
-        <div className={theme.classBuilder("calendar-loading")}>
-            <svg aria-hidden="true" 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={"calendar-loading__text"}>{i18n.t("loading_calendar")}</span>
-        </div>
-    );
-};
-
-export default LoadingCalendar;

package/src/js/components/DateTimePicker/NoSlotsFound.js

@@ -1,16 +0,0 @@
-import React from "react";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useTheme } from "./contexts/theme-context";
-
-const NoSlotsFound = () => {
-    const i18n = useI18n();
-    const theme = useTheme();
-    return (
-        <div className={theme.classBuilder("no-slots")}>
-            <p>{i18n.t("no_slots_found")}</p>
-        </div>
-    );
-};
-
-export default NoSlotsFound;

package/src/js/components/DateTimePicker/SequencedSlotButton.js

@@ -1,97 +0,0 @@
-import React, { useEffect, useRef } 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 SequencedSlotButton = ({ slot }) => {
-    const i18n = useI18n();
-    const theme = useTheme();
-    const [status, dispatchStatus] = useStatus();
-    const [tz] = useTz();
-
-    const slotButtonRef = useRef();
-
-    const startArray = slot.map(a => a.start);
-    const endArray = slot.map(a => a.end);
-
-    const start = startArray.reduce((prev, current) => {
-        return prev < current ? prev : current;
-    });
-
-    const end = endArray.reduce((prev, current) => {
-        return prev > current ? prev : current;
-    });
-
-    const handleSlotSelection = slot => {
-        const selectedSlot = {
-            start,
-            end,
-            sequence: slot,
-        };
-        dispatchStatus({ type: "SELECT_SLOT", slot: selectedSlot, tzid: tz.selectedTzid.tzid });
-    };
-
-    useEffect(() => {
-        if (status.focusedSlot === start) {
-            slotButtonRef.current.focus();
-        }
-    }, [status.focusedSlot]);
-
-    let classStub = "time-slot";
-    if (status.slotButtonMode === "detailed") classStub = classStub + " time-slot--detailed";
-    if (status.selected.start === start) classStub = classStub + " time-slot--selected";
-
-    const detailedSlot = slot.map((s, i) => (
-        <li key={i} className={theme.classBuilder("detailed-slot-list--item")}>
-            {i18n.customFormatedTimeZone(
-                moment(s.start, "YYYY-MM-DDTHH:mm:00Z"),
-                tz.selectedTzid.tzid,
-                "LT"
-            )}
-            {" - "}
-            {i18n.customFormatedTimeZone(
-                moment(s.end, "YYYY-MM-DDTHH:mm:00Z"),
-                tz.selectedTzid.tzid,
-                "LT"
-            )}{" "}
-            {`(${moment(start, "YYYY-MM-DDTHH:mm:00Z").tz(tz.selectedTzid.tzid).format("z")})`}
-        </li>
-    ));
-
-    return (
-        <button
-            className={theme.classBuilder(classStub)}
-            onClick={() => handleSlotSelection(slot)}
-            ref={slotButtonRef}
-        >
-            <span className={theme.classBuilder("visually-hidden")}>
-                {i18n.t("select_time_slot")}
-            </span>
-            {status.slotButtonMode === "detailed" ? (
-                <ul className={theme.classBuilder("detailed-slot-list")}>{detailedSlot}</ul>
-            ) : (
-                <>
-                    {i18n.customFormatedTimeZone(
-                        moment(start, "YYYY-MM-DDTHH:mm:00Z"),
-                        tz.selectedTzid.tzid,
-                        "LT"
-                    )}
-                    {" - "}
-                    {i18n.customFormatedTimeZone(
-                        moment(end, "YYYY-MM-DDTHH:mm:00Z"),
-                        tz.selectedTzid.tzid,
-                        "LT"
-                    )}{" "}
-                    {`(${moment(start, "YYYY-MM-DDTHH:mm:00Z")
-                        .tz(tz.selectedTzid.tzid)
-                        .format("z")})`}
-                </>
-            )}
-        </button>
-    );
-};
-
-export default SequencedSlotButton;

package/src/js/components/DateTimePicker/SlotButton.js

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef } 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 SlotButton = ({ slot }) => {
-    const i18n = useI18n();
-    const theme = useTheme();
-    const [status, dispatchStatus] = useStatus();
-    const [tz] = useTz();
-
-    const slotButtonRef = useRef();
-
-    const handleSlotSelection = slot => {
-        dispatchStatus({ type: "SELECT_SLOT", slot, tzid: tz.selectedTzid.tzid });
-    };
-
-    useEffect(() => {
-        if (status.focusedSlot === slot.start) {
-            slotButtonRef.current.focus();
-        }
-    }, [status.focusedSlot]);
-
-    let classStub = "time-slot";
-    if (status.selected.start === slot.start) classStub = classStub + " time-slot--selected";
-
-    return (
-        <button
-            className={theme.classBuilder(classStub)}
-            onClick={() => handleSlotSelection(slot)}
-            ref={slotButtonRef}
-        >
-            <span className={theme.classBuilder("visually-hidden")}>
-                {i18n.t("select_time_slot")}
-            </span>
-            {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"
-            )}{" "}
-            {`(${moment(slot.start, "YYYY-MM-DDTHH:mm:00Z").tz(tz.selectedTzid.tzid).format("z")})`}
-        </button>
-    );
-};
-
-export default SlotButton;

package/src/js/components/DateTimePicker/SlotsList.js

@@ -1,45 +0,0 @@
-import React from "react";
-
-import SlotButton from "./SlotButton";
-import SequencedSlotButton from "./SequencedSlotButton";
-
-import { useI18n } from "../../contexts/i18n-context";
-import { useStatus } from "./contexts/status-context";
-import { useTheme } from "./contexts/theme-context";
-
-const SlotsList = () => {
-    const i18n = useI18n();
-    const [status, dispatchStatus] = useStatus();
-    const theme = useTheme();
-
-    const renderSlots = status.daySlots.map((slot, key) => {
-        return (
-            <li key={key} className={theme.classBuilder("slot-list--item")}>
-                {status.sequenced_availability ? (
-                    <SequencedSlotButton slot={slot} />
-                ) : (
-                    <SlotButton slot={slot} />
-                )}
-            </li>
-        );
-    });
-
-    return (
-        <>
-            <div className={theme.classBuilder("time-slots-list")}>
-                <div className={theme.classBuilder("time-slots-list--header")}>
-                    <h3>{i18n.dateToSlotStringWithoutTzShift(status.selectedDay)}</h3>
-                </div>
-                <div className={theme.classBuilder("time-slots-group--wrapper")}>
-                    {status.daySlots.length > 0 ? (
-                        <ul className={theme.classBuilder("slot-list")}>{renderSlots}</ul>
-                    ) : (
-                        <p>{i18n.t("no_slots_for_day")}</p>
-                    )}
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default SlotsList;