cronofy-elements 1.44.1 → 1.45.0

package/demo/rules.ejs

@@ -77,7 +77,13 @@
                     //     start_time: "09:00",
                     //     end_time: "13:00"
                     // }],
-                    // auto_create_rules: true
+                    // auto_create_rules: true,
+                    // tz_list: [
+                    //     "America/Sao_Paulo",
+                    //     "Etc/UTC",
+                    //     "Pacific/Fakaofo",
+                    //     "Europe/London",
+                    // ],
                 },
                 callback: cb => console.log('rules callback',cb),
                 styles: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cronofy-elements",
-    "version": "1.44.1",
+    "version": "1.45.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
     "main": "build/npm/CronofyElements.js",
     "scripts": {

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

@@ -2,9 +2,14 @@ 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,
@@ -19,10 +24,19 @@ const AvailabilityRules = ({ options }) => {
         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}>
-                <Wrapper options={options} />
+                <TzProvider options={tzOptions}>
+                    <Wrapper options={options} />
+                </TzProvider>
             </I18nProvider>
         </LogProvider>
     );

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

@@ -50,7 +50,7 @@ const CalendarSelector = ({ calendars, done, add, remove }) => {
             ref={wrapperRef}
             css={css`
                 position: absolute;
-                z-index: 6;
+                z-index: 10;
                 top: 100%;
                 left: 0;
                 transform: translateY(10px);

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

@@ -79,7 +79,7 @@ const Calendars = ({ loading }) => {
     return (
         <div
             css={css`
-                z-index: 2;
+                z-index: 5;
                 position: relative;
                 width: 100%;
                 display: flex;

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

@@ -2,27 +2,38 @@ import React, { useContext } from "react";
 import { css } from "@emotion/core";
 
 import { ExtrasContext, StatusContext, ThemeContext } from "./Wrapper";
+import { useTz } from "../../contexts/tz-context";
 import { useI18n } from "../../contexts/i18n-context";
-import { tzi18n } from "../../helpers/i18n";
+import TimeZoneSelector from "../generic/TimeZoneSelector";
 
 const TimeZoneDisplay = () => {
     const [extras, setExtras] = useContext(ExtrasContext);
     const [status, setStatus] = useContext(StatusContext);
     const i18n = useI18n();
     const [theme, setTheme] = useContext(ThemeContext);
+    const [tz, setTz] = useTz();
     return (
         <div
             css={css`
                 flex-grow: 1;
                 display: flex;
                 width: 100%;
+                padding-right: 1em;
                 @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     margin-bottom: 16px;
                 }
             `}
             className={`${theme.prefix}__timezone`}
         >
-            {i18n.t("time_zone")}: {tzi18n(extras.limits.tzid, status.locale)}
+            <p
+                css={css`
+                    padding: 0.3em 0.6em 0 0;
+                    margin: 0;
+                `}
+            >
+                {i18n.t("time_zone")}
+            </p>
+            <TimeZoneSelector locale={status.locale} theme={theme} tz={tz} setTz={setTz} />
         </div>
     );
 };

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

@@ -14,10 +14,12 @@ import {
     parseAccountOptions,
     buildRuleTemplate,
 } from "../../helpers/utils.AvailabilityRules";
-import { parseStyleOptions } from "../../helpers/theming";
+import { getInitialSelectedTzid } from "./utils/tz-utils";
+import { parseStyleOptions, classBuilder } from "../../helpers/theming";
 import { globals } from "../../styles/utils";
 import { useI18n } from "../../contexts/i18n-context";
 import { useLog } from "../../contexts/log-context";
+import { useTz } from "../../contexts/tz-context";
 
 import Calendars from "./Calendars";
 import Container from "../generic/Container";
@@ -37,6 +39,7 @@ export const ThemeContext = React.createContext();
 const Wrapper = ({ options }) => {
     const i18n = useI18n();
     const log = useLog();
+    const [tz, setTz] = useTz();
 
     const [account, setAccount] = useState(() => parseAccountOptions(options));
     const [calendars, setCalendars] = useState(() => ({
@@ -52,7 +55,7 @@ const Wrapper = ({ options }) => {
         saved: false,
         savedSuccess: false,
         locale: options.locale,
-        tzid: options.tzid,
+        tzid: tz.selectedTzid.tzid,
         callback: options.callback ? options.callback : cb => {},
         startDay: options.config.startDay,
         defaultWeeklyPeriods: options.config.defaultWeeklyPeriods,
@@ -83,19 +86,23 @@ const Wrapper = ({ options }) => {
         )
     );
 
-    const [theme, setTheme] = useState(() => ({
-        ...parseStyleOptions(options.styles, "AvailabilityViewer"),
-        sizes: {
-            breakpoints: {
-                small: 650,
+    const [theme, setTheme] = useState(() => {
+        const styles = parseStyleOptions(options.styles, "AvailabilityViewer");
+        return {
+            ...styles,
+            classBuilder: classBuilder(styles.prefix, "AR"),
+            sizes: {
+                breakpoints: {
+                    small: 650,
+                },
+                labelWidth: 60,
+                labelWidthSmall: 24,
+                columnWidth: 100,
+                wrapperWidth: false,
+                wrapperUnderflow: 0,
             },
-            labelWidth: 60,
-            labelWidthSmall: 24,
-            columnWidth: 100,
-            wrapperWidth: false,
-            wrapperUnderflow: 0,
-        },
-    }));
+        };
+    });
 
     const handleRuleChange = (IDs, toggleStatus) => {
         const availability = toggleStatus === "available";
@@ -173,7 +180,7 @@ const Wrapper = ({ options }) => {
             .then(res => {
                 const isNewRule = res[0].type === 404;
                 const rulesResponse = isNewRule
-                    ? buildRuleTemplate(options.config.defaultWeeklyPeriods, options.tzid)
+                    ? buildRuleTemplate(options.config.defaultWeeklyPeriods, tz.selectedTzid.tzid)
                     : res[0];
 
                 if (isNewRule) {
@@ -198,6 +205,15 @@ const Wrapper = ({ options }) => {
                     tzid: rulesResponse.availability_rule.tzid,
                 }));
 
+                const selectedTzid = getInitialSelectedTzid(
+                    tz.list,
+                    rulesResponse.availability_rule.tzid
+                );
+                setTz({
+                    list: tz.list,
+                    selectedTzid: selectedTzid,
+                });
+
                 setSlots(slots => {
                     const hydratedSlots = checkSlotAvailability(
                         rulesResponse.availability_rule.weekly_periods,
@@ -269,6 +285,15 @@ const Wrapper = ({ options }) => {
         }
     }, [status]);
 
+    useEffect(() => {
+        if (tz.selectedTzid.tzid) {
+            setAccount(account => ({
+                ...account,
+                tzid: tz.selectedTzid.tzid,
+            }));
+        }
+    }, [tz.selectedTzid.tzid]);
+
     const generateRules = () => {
         const newRules = buildNewRules(slots);
 
@@ -373,7 +398,7 @@ const Wrapper = ({ options }) => {
                     overflow: hidden;
                 }
             `}
-            className={`${theme.prefix}`}
+            className={theme.classBuilder()}
         >
             <ThemeContext.Provider value={[theme, setTheme]}>
                 <StatusContext.Provider value={[status, setStatus]}>

package/src/js/components/AvailabilityRules/scss/_base.buttons.scss

@@ -0,0 +1,58 @@
+.AR__button {
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: 0;
+    font-family: inherit;
+    position: relative;
+    display: block;
+    cursor: pointer;
+    font-size: 1em;
+    border: 0.1em solid var(--greyMid);
+    background-color: var(--white);
+
+    &:focus {
+        border-color: var(--availableActive);
+        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
+        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
+        outline: none;
+    }
+    &:hover {
+        border-color: var(--availableActive);
+        box-shadow: inset var(--availableActive) 0 0 0 0.1em;
+        background-color: var(--availableHover);
+        color: var(--black);
+        outline: none;
+    }
+
+    &:active {
+        background-color: var(--availableActive);
+        color: var(--black);
+        outline: none;
+    }
+}
+
+.AR__disabled-button {
+    pointer-events: none;
+    border: unset;
+    background-color: unset;
+
+    &:focus {
+        border-color: unset;
+        box-shadow: unset;
+        outline: none;
+        background-color: unset;
+    }
+    &:hover {
+        border-color: unset;
+        box-shadow: unset;
+        outline: none;
+    }
+
+    &:active {
+        border-color: unset;
+        box-shadow: unset;
+        outline: none;
+        background-color: unset;
+    }
+}

package/src/js/components/AvailabilityRules/scss/_base.theme.scss

@@ -0,0 +1,4 @@
+.AR {
+    @import "base.buttons";
+    @import "components.timezoneselector";
+}

package/src/js/components/AvailabilityRules/scss/_components.timezoneselector.scss

@@ -0,0 +1,74 @@
+.AR__timezone-selector {
+    position: relative;
+    flex-grow: 1;
+    max-width: 16rem;
+}
+
+.AR__timezone-selector--button {
+    @extend .AR__button;
+    display: inline-block;
+    border: 0.1em solid var(--greyMid);
+    background: var(--white);
+    padding: 0.3em 1em;
+    text-align: left;
+    width: 100%;
+    border-radius: 0.4em;
+    z-index: 4;
+}
+
+.AR__timezone-selector--icon {
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    fill: var(--grey);
+    float: right;
+}
+
+.AR__timezone-selector--icon-open {
+    transform: scaleY(-1);
+}
+
+.AR__timezone-selector--listbox-wrapper {
+    @extend %unset;
+    position: absolute;
+    width: 100%;
+    border: 0.1em solid var(--greyMid);
+    background-color: var(--white);
+    border-top: 0;
+    padding-top: 1.15em;
+    top: 1em;
+    z-index: 3;
+    border-radius: 0 0 0.4em 0.4em;
+}
+
+.AR__timezone-selector--listbox {
+    @extend %unset;
+    width: 100%;
+    max-height: 15em;
+    overflow-y: auto;
+}
+
+.AR__timezone-selector--option {
+    @extend %unset;
+    display: block;
+    cursor: pointer;
+    padding: 0.5em 1em;
+    position: relative;
+    line-height: 1.8em;
+
+    &:hover {
+        background-color: var(--availableHover);
+        color: var(--black);
+    }
+}
+
+.AR__timezone-selector--focused {
+    border-color: var(--availableActive);
+    box-shadow: inset var(--availableActive) 0 0 0 0.1em;
+    outline: none;
+}
+
+.AR__timezone-selector--selected {
+    background-color: var(--availableHover);
+    color: var(--black);
+}

package/src/js/components/AvailabilityRules/scss/_generic.reset.scss

@@ -0,0 +1,13 @@
+//Unsetting styles to avoid clashes with styles outside the component
+%unset {
+    padding: unset;
+    margin-top: unset;
+    margin-bottom: unset;
+    margin-left: unset;
+    margin-right: unset;
+    border: unset;
+    background: unset;
+    border-spacing: 0;
+    font-style: unset;
+    list-style: unset;
+}

package/src/js/components/AvailabilityRules/scss/_settings.colours.scss

@@ -0,0 +1,12 @@
+.AR {
+    // Fallbacks
+    --black: #000000;
+    --white: #ffffff;
+
+    --grey: #6f6f6f;
+    --greyMid: #999999;
+    --greyLight: #e4ebf2;
+
+    --availableHover: #c0e992;
+    --availableActive: #7ed321;
+}

package/src/js/components/AvailabilityRules/scss/availabilityrules.scss

@@ -0,0 +1,5 @@
+@import "../../../styles/settings.utils";
+@import "settings.colours";
+
+@import "generic.reset";
+@import "base.theme";

package/src/js/components/AvailabilityRules/utils/tz-utils.js

@@ -0,0 +1,44 @@
+import moment from "moment-timezone";
+import { humanizeTzName } from "../../../helpers/utils";
+import { defaultTimeZones } from "../../../helpers/tz-list";
+
+export const createTzObject = tzid => {
+    const name = humanizeTzName(tzid);
+
+    const zone = moment.tz(tzid);
+
+    return {
+        tzid: tzid,
+        offset: zone.format("Z"),
+        offsetMins: zone.utcOffset(),
+        name: name,
+        abbr: zone.zoneAbbr(),
+    };
+};
+
+export const parseTzList = (timezones, tzid) => {
+    const tzList = timezones ? timezones : moment.tz.names();
+    const filtered = timezones ? timezones : tzList.filter(item => defaultTimeZones.includes(item));
+
+    const result = [];
+
+    filtered.map(tz => {
+        const item = createTzObject(tz);
+        result.push(item);
+    });
+
+    const isInList = result.findIndex(item => tzid === item.tzid);
+
+    if (isInList <= -1) {
+        const item = createTzObject(tzid);
+        result.push(item);
+    }
+
+    result.sort((tzA, tzB) => tzA.offsetMins - tzB.offsetMins);
+    return result;
+};
+
+export const getInitialSelectedTzid = (tzList, tzid) => {
+    const result = tzList.find(tz => tzid === tz.tzid);
+    return result;
+};

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

@@ -14,7 +14,7 @@ import DayHeadings from "./DayHeadings";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
 const Calendar = () => {
     const [status, dispatchStatus] = useStatus();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const CalendarHeader = () => {
     const i18n = useI18n();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const Confirm = ({ confirmButtonRef }) => {
     const i18n = useI18n();

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

@@ -18,7 +18,7 @@ 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";
+import { TzProvider } from "../../contexts/tz-context";
 
 const DateTimePicker = ({ options }) => {
     const statusOptions = useMemo(() => {

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const DayButton = ({ day, selected = false, focused = false }) => {
     const i18n = useI18n();

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

@@ -2,11 +2,14 @@ import React, { memo } from "react";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useTheme } from "./contexts/theme-context";
-import TimeZoneSelector from "./TimeZoneSelector";
+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")}>
@@ -14,7 +17,7 @@ const Details = ({ duration, locale }) => {
                 <p className={theme.classBuilder("details--tz-label")}>
                     <strong>{i18n.t("time_zone")}:</strong>
                 </p>
-                <TimeZoneSelector locale={locale} />
+                <TimeZoneSelector locale={locale} theme={theme} tz={tz} setTz={setTz} />
             </div>
             <div className={theme.classBuilder("details--duration")}>
                 {duration && (

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const SequencedSlotButton = ({ slot }) => {
     const i18n = useI18n();

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

@@ -4,7 +4,7 @@ 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";
+import { useTz } from "../../contexts/tz-context";
 
 const SlotButton = ({ slot }) => {
     const i18n = useI18n();

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

@@ -14,7 +14,7 @@ import SlotsList from "./SlotsList";
 
 import { useStatus } from "./contexts/status-context";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
 const Wrapper = () => {
     const [status, dispatchStatus] = useStatus();

package/src/js/components/DateTimePicker/utils/slots.js

@@ -4,7 +4,7 @@ import { getAvailability, getSequencedAvailability } from "../../../helpers/conn
 import { uniqueItems, humanizeTzName } from "../../../helpers/utils";
 import { errorMessages } from "../../../helpers/logging";
 
-import { defaultTimeZones } from "./tz-list";
+import { defaultTimeZones } from "../../../helpers/tz-list";
 
 export const getMonthsCoveredByPeriod = (period, tzid) => {
     const start = moment

package/src/js/components/{DateTimePicker → generic}/TimeZoneSelector.js

@@ -1,14 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useTheme } from "./contexts/theme-context";
-
 import { tzi18n } from "../../helpers/i18n";
-import { useTz } from "./contexts/tz-context";
-
-const TimeZoneSelector = ({ locale }) => {
-    const theme = useTheme();
-    const [tz, setTz] = useTz();
 
+const TimeZoneSelector = ({ locale, theme, tz, setTz }) => {
     const [showList, setShowList] = useState(() => false);
     const [focused, setFocused] = useState(() => false);
 
@@ -31,27 +25,26 @@ const TimeZoneSelector = ({ locale }) => {
     };
 
     const handleKeyDown = e => {
+        const list = tz.list;
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
-                const nextFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) + 1;
-                const nextItem =
-                    nextFocusedItemIndex > tz.list.length - 1 ? 0 : nextFocusedItemIndex;
+                const nextFocusedItemIndex = list.findIndex(item => focused === item.tzid) + 1;
+                const nextItem = nextFocusedItemIndex > list.length - 1 ? 0 : nextFocusedItemIndex;
 
-                setFocused(tz.list[nextItem].tzid);
+                setFocused(list[nextItem].tzid);
 
                 break;
             case "ArrowUp":
                 e.preventDefault();
-                const prevFocusedItemIndex = tz.list.findIndex(item => focused === item.tzid) - 1;
-                const prevItem =
-                    prevFocusedItemIndex < 0 ? tz.list.length - 1 : prevFocusedItemIndex;
+                const prevFocusedItemIndex = list.findIndex(item => focused === item.tzid) - 1;
+                const prevItem = prevFocusedItemIndex < 0 ? list.length - 1 : prevFocusedItemIndex;
 
-                setFocused(tz.list[prevItem].tzid);
+                setFocused(list[prevItem].tzid);
 
                 break;
             case "Enter":
-                const tz = tz.list.find(item => focused === item.tzid);
+                const tz = list.find(item => focused === item.tzid);
                 handleOptionSelect(tz);
                 break;
             case "Escape":