cronofy-elements 1.44.1 → 1.47.0

package/demo/date-time-picker.ejs

@@ -49,6 +49,7 @@
                 sequence: [
                 {
                     sequence_id: "test",
+                    sequence_title: "Test Event One",
                     ordinal: 1,
                     participants: [
                           {
@@ -66,6 +67,7 @@
                   },
                   {
                     sequence_id: "test-1",
+                    sequence_title: "Test Event Two",
                     ordinal: 2,
                     participants: [
                           {
@@ -86,31 +88,7 @@
                           minimum: { minutes: 15 }
                         }
                       }
-                  },
-                  {
-                    sequence_id: "test-2",
-                    ordinal: 3,
-                    participants: [
-                          {
-                              required: "all",
-                              members: [
-                                  {
-                                      sub: "<%= sub %>",
-                                      // managed_availability: true,
-                                      // availability_rule_ids: ["weekly_work_hours"]
-                                  }
-                              ]
-                          }
-                      ],
-                      required_duration: { minutes: 30 },
-                      start_interval: { minutes: 10 },
-                      buffer: {
-                        before: {
-                          minimum: { minutes: 15 }
-                        }
-                      }
-                  },
-                  
+                  },                  
                 ],
                 query_periods: [
                     { start: slotTimes(01,"08:00"), end: slotTimes(31,"17:00") }
@@ -136,15 +114,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.1",
+    "version": "1.47.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";
@@ -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

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useState } 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";
+import { useTz } from "../../contexts/tz-context";
 
 const Confirm = ({ confirmButtonRef }) => {
     const i18n = useI18n();
@@ -12,6 +12,12 @@ const Confirm = ({ confirmButtonRef }) => {
     const theme = useTheme();
     const [tz] = useTz();
 
+    const [sequenceTitlePresent, setSequenceTitlePresent] = useState(
+        () =>
+            status.selected.sequence &&
+            status.selected.sequence.every(obj => Object.keys(obj).includes("sequence_title"))
+    );
+
     const handleCancel = () => {
         dispatchStatus({ type: "CANCEL_SLOT_SELECTION" });
     };
@@ -52,6 +58,36 @@ const Confirm = ({ confirmButtonRef }) => {
                     )}{" "}
                     {`(${moment.tz(tz.selectedTzid.tzid).format("z")})`}
                 </p>
+                {status.selected.sequence && sequenceTitlePresent && (
+                    <dl className={theme.classBuilder("confirm-details--sequence")}>
+                        {status.selected.sequence.map((slot, k) => (
+                            <div key={k}>
+                                <dt
+                                    className={theme.classBuilder(
+                                        "confirm-details--sequence-title"
+                                    )}
+                                >
+                                    {slot.sequence_title}
+                                </dt>
+                                <dd
+                                    className={theme.classBuilder("confirm-details--sequence-time")}
+                                >
+                                    {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"
+                                    )}
+                                </dd>
+                            </div>
+                        ))}
+                    </dl>
+                )}
             </div>
             <button
                 className={theme.classBuilder("confirm-button")}