cronofy-elements 1.44.0 → 1.46.1

package/demo/date-time-picker.ejs

@@ -136,15 +136,10 @@
                             ]
                         }
                     ],
-                    required_duration: { minutes: 60 },
+                    required_duration: { minutes: 15 },
                     //start_interval: { minutes: 15 },
                     query_periods: [
-                        { start: slotTimes(31,"03:00"), end: slotTimes(31,"12:00") },
-                        { start: slotTimes(32,"09:00"), end: slotTimes(32,"13:00") },
-                        { start: slotTimes(32,"14:00"), end: slotTimes(32,"17:00") },
-                        { start: slotTimes(35,"09:00"), end: slotTimes(35,"13:00") },
-                        { start: slotTimes(36,"14:00"), end: slotTimes(36,"17:00") },
-                        { start: slotTimes(38,"09:00"), end: slotTimes(65,"22:00") }
+                        { start: slotTimes(31,"03:00"), end: slotTimes(150,"12:00") },
                     ]
                 },
                 // tzid: "America/Mexico_City",

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.0",
+    "version": "1.46.1",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
     "main": "build/npm/CronofyElements.js",
     "scripts": {
@@ -45,61 +45,61 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "@babel/cli": "^7.12.10",
-        "@babel/core": "^7.12.10",
-        "@babel/plugin-proposal-class-properties": "^7.12.1",
-        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-        "@babel/polyfill": "^7.12.1",
-        "@babel/preset-env": "^7.12.11",
-        "@babel/preset-react": "^7.12.10",
-        "@emotion/babel-preset-css-prop": "^10.2.1",
-        "@emotion/core": "^10.1.1",
-        "@emotion/jest": "^11.3.0",
-        "@testing-library/jest-dom": "^5.11.8",
-        "@testing-library/react": "^11.2.2",
-        "autoprefixer": "^10.2.5",
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-emotion": "^10.0.33",
-        "core-js": "^3.8.2",
-        "css-loader": "^5.2.4",
-        "deepmerge": "^2.2.1",
-        "ejs": "^2.7.4",
+        "@babel/cli": "^7.16",
+        "@babel/core": "^7.12",
+        "@babel/plugin-proposal-class-properties": "^7.12",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12",
+        "@babel/polyfill": "^7.12",
+        "@babel/preset-env": "^7.12",
+        "@babel/preset-react": "^7.12",
+        "@emotion/babel-preset-css-prop": "^10.2",
+        "@emotion/core": "^10.1",
+        "@emotion/jest": "^11.3",
+        "@testing-library/jest-dom": "^5.11",
+        "@testing-library/react": "^11.2",
+        "autoprefixer": "^10.2",
+        "babel-eslint": "^10.1",
+        "babel-loader": "^8.2",
+        "babel-plugin-emotion": "^10.0",
+        "core-js": "^3.8",
+        "css-loader": "^5.2",
+        "deepmerge": "^2.2",
+        "ejs": "^2.7",
         "eslint": "^7.32",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-loader": "^4.0.2",
-        "eslint-plugin-import": "^2.24.1",
-        "eslint-plugin-jsx-a11y": "^6.4.1",
-        "eslint-plugin-prettier": "^3.4.1",
-        "eslint-plugin-react": "^7.24.0",
-        "eslint-plugin-unused-imports": "^1.1.4",
-        "express": "^4.16.4",
-        "fs": "0.0.1-security",
-        "git-revision-webpack-plugin": "^5.0.0",
-        "jest": "^26.6.3",
-        "jest-fetch-mock": "^3.0.3",
-        "moment": "^2.29.1",
-        "moment-timezone": "^0.5.32",
-        "moment-timezone-data-webpack-plugin": "^1.5.0",
-        "node-fetch": "^2.3.0",
-        "node-sass": "^6.0.0",
-        "path": "^0.12.7",
-        "polished": "^2.3.3",
-        "postcss-loader": "^5.3.0",
-        "prettier": "2.0.5",
-        "react": "^16.14.0",
-        "react-custom-scrollbars": "^4.2.1",
-        "react-day-picker": "^7.4.8",
-        "react-dom": "^16.14.0",
-        "react-emotion": "^9.2.12",
-        "react-select": "^2.4.2",
-        "react-transition-group": "^4.4.1",
-        "sass-loader": "^12.1.1",
-        "style-loader": "^3.0.0",
-        "terser-webpack-plugin": "^5.1.2",
-        "webpack": "^5.37.0",
-        "webpack-bundle-analyzer": "^4.4.1",
-        "webpack-cli": "^4.7.0",
-        "whatwg-fetch": "^3.5.0"
+        "eslint-config-prettier": "^8.3",
+        "eslint-loader": "^4.0",
+        "eslint-plugin-import": ">2.24",
+        "eslint-plugin-jsx-a11y": ">6.4",
+        "eslint-plugin-prettier": ">3.4",
+        "eslint-plugin-react": ">7.24",
+        "eslint-plugin-unused-imports": ">1.1",
+        "express": "^4.16",
+        "fs": ">0.0.1-security",
+        "git-revision-webpack-plugin": "^5.0",
+        "jest": "^26.6",
+        "jest-fetch-mock": "^3.0",
+        "moment": "^2.29",
+        "moment-timezone": "^0.5",
+        "moment-timezone-data-webpack-plugin": "^1.5",
+        "node-fetch": "^2.3",
+        "node-sass": "^6.0",
+        "path": "^0.12",
+        "polished": "^2.3",
+        "postcss-loader": "^5.3",
+        "prettier": "2.0",
+        "react": "^16.14",
+        "react-custom-scrollbars": "^4.2",
+        "react-day-picker": "^7.4",
+        "react-dom": "^16.14",
+        "react-emotion": "^9.2",
+        "react-select": "^2.4",
+        "react-transition-group": "^4.4",
+        "sass-loader": "^12.1",
+        "style-loader": "^3.0",
+        "terser-webpack-plugin": "^5.1",
+        "webpack": "^5.37",
+        "webpack-bundle-analyzer": "^4.4",
+        "webpack-cli": "^4.7",
+        "whatwg-fetch": "^3.5"
     }
 }

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";
@@ -108,17 +115,7 @@ const Wrapper = ({ options }) => {
         const allSlots = { ...slots, ...newSlots };
         setSlots(allSlots);
         const newRules = buildNewRules(allSlots);
-        const callbackContent = {
-            notification: {
-                type: "availability_rule_edited",
-            },
-            availability_rule: {
-                ...account,
-                calendar_ids: calendars.active,
-                weekly_periods: newRules,
-            },
-        };
-        status.callback(callbackContent);
+        setRules(newRules);
     };
 
     useEffect(() => {
@@ -141,7 +138,6 @@ const Wrapper = ({ options }) => {
 
     useEffect(() => {
         if (!status.loading && !status.error) {
-            const newRules = buildNewRules(slots);
             const callbackContent = {
                 notification: {
                     type: "availability_rule_edited",
@@ -149,12 +145,12 @@ const Wrapper = ({ options }) => {
                 availability_rule: {
                     ...account,
                     calendar_ids: calendars.active,
-                    weekly_periods: newRules,
+                    weekly_periods: rules,
                 },
             };
             status.callback(callbackContent);
         }
-    }, [calendars]);
+    }, [calendars, account, rules]);
 
     useEffect(() => {
         // Query the API for rules and calendars, but don't do anything until
@@ -173,7 +169,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 +194,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,11 +274,17 @@ const Wrapper = ({ options }) => {
         }
     }, [status]);
 
-    const generateRules = () => {
-        const newRules = buildNewRules(slots);
+    useEffect(() => {
+        if (tz.selectedTzid.tzid) {
+            setAccount(account => ({
+                ...account,
+                tzid: tz.selectedTzid.tzid,
+            }));
+        }
+    }, [tz.selectedTzid.tzid]);
 
-        setRules(newRules);
-        const rulesRequest = { ...account, weekly_periods: newRules };
+    const generateRules = () => {
+        const rulesRequest = { ...account, weekly_periods: rules };
 
         let tempStatus = status;
 
@@ -373,7 +384,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();