cronofy-elements 1.42.0 → 1.44.1

package/demo/date-time-picker.ejs

@@ -22,25 +22,6 @@
     <div id="cronofy-date-time-picker-two"></div>
     <hr>
     <div class="wrapper">
-        <div class="column">
-            <h2>Consectetur adipisicing elit</h2>
-            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="/">Voluptate sed ex totam odit</a> quae hic voluptatibus, quisquam dicta animi laborum velit laboriosam, placeat suscipit tenetur voluptates! Illo tempora minus animi.</p>
-            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem consequuntur repudiandae nesciunt, totam dicta earum deleniti magnam eveniet eligendi sunt adipisci veniam esse aliquid aperiam corporis optio fuga tempora sit!</p>
-        </div>
-        <div class="column">
-            <h2>Est deserunt non quis do quis nostrud ad exercitation proident incididunt.</h2>
-            <p>Excepturi dicta neque ut, a expedita quaerat, tempore dolor placeat quibusdam cumque ipsam cum officia voluptate, ea fuga optio necessitatibus inventore tempora?</p>
-            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nisi eveniet voluptas provident esse beatae minus at error dignissimos neque? Temporibus velit numquam aut labore porro neque ipsum, deleniti a?</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt eligendi, error quos nulla dolorem alias corrupti iste fugiat deleniti nam unde, porro provident a voluptatem at voluptates, dolores sed!</p>
-        </div>
-    </div>
-    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nisi eveniet voluptas provident esse beatae minus at error dignissimos neque? Temporibus velit numquam aut labore porro neque ipsum, deleniti a?</p>
-    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis saepe maxime corporis nemo hic rerum porro in repudiandae? Libero eligendi impedit reiciendis exercitationem fuga ex eos aliquid itaque facere corrupti.</p>    
-    <hr>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt eligendi, error quos nulla dolorem alias corrupti iste fugiat deleniti nam unde, porro provident a voluptatem at voluptates, dolores sed!</p>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum commodi fuga laboriosam? Quas officiis doloremque iure modi, ipsam dolore ad illum saepe et voluptatum quis tempore ullam dolor, sequi nulla!</p>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt eligendi, error quos nulla dolorem alias corrupti iste fugiat deleniti nam unde, porro provident a voluptatem at voluptates, dolores sed!</p>
-
     <script>
         const locale = "<%= locale %>";
 
@@ -64,10 +45,83 @@
                 return output.utc().format();
             };
 
+            const sequencedAvailabilityQuery = {
+                sequence: [
+                {
+                    sequence_id: "test",
+                    ordinal: 1,
+                    participants: [
+                          {
+                              required: "all",
+                              members: [
+                                  {
+                                      sub: "<%= sub %>",
+                                      // managed_availability: true,
+                                      // availability_rule_ids: ["weekly_work_hours"]
+                                  }
+                              ]
+                          }
+                      ],
+                      required_duration: { minutes: 5 },
+                  },
+                  {
+                    sequence_id: "test-1",
+                    ordinal: 2,
+                    participants: [
+                          {
+                              required: "all",
+                              members: [
+                                  {
+                                      sub: "<%= sub %>",
+                                      // managed_availability: true,
+                                      // availability_rule_ids: ["weekly_work_hours"]
+                                  }
+                              ]
+                          }
+                      ],
+                      required_duration: { minutes: 45 },
+                      start_interval: { minutes: 5 },
+                      buffer: {
+                        before: {
+                          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") }
+                ]
+              }
+
             CronofyElements.DateTimePicker({
                 element_token: "<%= date_time_picker_token %>",
                 target_id: 'cronofy-date-time-picker',
                 api_domain:"<%= api_domain %>",
+                //availability_query: sequencedAvailabilityQuery,
                 availability_query: {
                     // response_format: "slots",
                     participants: [
@@ -152,8 +206,7 @@
                     ],
                     required_duration: { minutes: 30 },
                     query_periods: [
-                        { start: slotTimes(1,"23:00"), end: slotTimes(2,"01:00") },
-                        { start: slotTimes(2,"23:00"), end: slotTimes(3,"01:00") }
+                        { start: slotTimes(1,"23:00"), end: slotTimes(100,"01:00") },
                     ]
                 },
                 config: {
@@ -162,8 +215,15 @@
                 styles: {
                     prefix: "SP2",
                     colors: {
-                      buttonTextHover: "red",
-                      buttonHoverText: "orange"
+                      button: "#9977FF",
+                      buttonActive: "#5088FF",
+                      buttonHover: "#AACCFF",
+                      buttonHoverText: "#50AAFF",
+                      buttonTextHover: "#AA50FF",
+                      neutralDark: "#403040",
+                      neutral: "#A03040",
+                      neutralLight: "#F05080",
+
                     }
                 },
                 callback: slot => console.log('callback',slot),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cronofy-elements",
-    "version": "1.42.0",
+    "version": "1.44.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",
-        "eslint": "^7.32.0",
-        "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": "^11.1.1",
-        "style-loader": "^2.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"
+        "@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",
+        "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/DateTimePicker/DateTimePicker.js

@@ -6,6 +6,7 @@ import {
     parseTzList,
     getInitialSelectedTzid,
     getMonthsLoadingFromQuery,
+    getDurationFromQuery,
 } from "./utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "./utils/calendar";
 
@@ -30,6 +31,8 @@ const DateTimePicker = ({ options }) => {
             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;
@@ -61,6 +64,7 @@ const DateTimePicker = ({ options }) => {
                 : () => 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,
@@ -75,6 +79,7 @@ const DateTimePicker = ({ options }) => {
             endDateObject,
             focusedSlot: false,
             availableDays: [],
+            sequenced_availability: options.query.sequence ? true : false,
             slots: {},
             slotFetchCount: 0,
             slotInjectionPoint: undefined,

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

@@ -17,9 +17,11 @@ const Details = ({ duration, locale }) => {
                 <TimeZoneSelector locale={locale} />
             </div>
             <div className={theme.classBuilder("details--duration")}>
-                <p>
-                    <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
-                </p>
+                {duration && (
+                    <p>
+                        <strong>{i18n.t("duration_label")}:</strong> {duration} {i18n.t("minutes")}
+                    </p>
+                )}
             </div>
         </div>
     );

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

@@ -0,0 +1,71 @@
+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.selected.start === 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(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/SlotsList.js

@@ -1,6 +1,7 @@
 import React from "react";
 
 import SlotButton from "./SlotButton";
+import SequencedSlotButton from "./SequencedSlotButton";
 
 import { useI18n } from "../../contexts/i18n-context";
 import { useStatus } from "./contexts/status-context";
@@ -14,7 +15,11 @@ const SlotsList = () => {
     const renderSlots = status.daySlots.map((slot, key) => {
         return (
             <li key={key} className={theme.classBuilder("slot-list--item")}>
-                <SlotButton slot={slot} />
+                {status.sequenced_availability ? (
+                    <SequencedSlotButton slot={slot} />
+                ) : (
+                    <SlotButton slot={slot} />
+                )}
             </li>
         );
     });

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import moment from "moment";
 
-import { getSlots } from "./utils/slots";
+import { getSequencedSlots, getSlots } from "./utils/slots";
 
 import Calendar from "./Calendar";
 import Confirm from "./Confirm";
@@ -31,26 +31,20 @@ const Wrapper = () => {
         }
 
         const fetchMonthSlots = (query, month) => {
-            return getSlots({
+            const fetch = status.sequenced_availability ? getSequencedSlots : getSlots;
+
+            return fetch({
                 query,
                 auth: status.auth,
                 tzid: status.tzid,
-            })
-                .then(res => {
-                    dispatchStatus({
-                        type: "SET_SLOTS",
-                        slots: res,
-                        tzid: tz.selectedTzid.tzid,
-                        month: month,
-                    });
-                })
-                .catch(res => {
-                    dispatchStatus({
-                        type: "ERROR_LOADING_SLOTS",
-                        error: res,
-                        month: month,
-                    });
+            }).then(res => {
+                dispatchStatus({
+                    type: "SET_SLOTS",
+                    slots: res,
+                    tzid: tz.selectedTzid.tzid,
+                    month: month,
                 });
+            });
         };
 
         const currentMonth = status.months.find(m => m.current);
@@ -60,7 +54,15 @@ const Wrapper = () => {
             .then(() => {
                 // Get slots for remianing months
                 const remainingMonths = status.months.filter(month => !month.current);
-                remainingMonths.forEach(month => fetchMonthSlots(month.query, month.month));
+                remainingMonths.forEach(month =>
+                    fetchMonthSlots(month.query, month.month).catch(res => {
+                        dispatchStatus({
+                            type: "ERROR_LOADING_SLOTS",
+                            error: res,
+                            month: month.month,
+                        });
+                    })
+                );
             })
             .catch(error => {
                 dispatchStatus({ type: "ERROR_GETTING_SLOTS", error });
@@ -172,7 +174,7 @@ const Wrapper = () => {
 
     return (
         <section className={theme.classBuilder()} style={theme.customProperties}>
-            <Details duration={status.query.required_duration.minutes} locale={status.locale} />
+            <Details duration={status.duration} locale={status.locale} />
             <div className={theme.classBuilder("wrapper")}>
                 <div
                     className={

package/src/js/components/DateTimePicker/contexts/status-reducer.js

@@ -6,6 +6,7 @@ import {
     getAvailableDays,
     getLocalDayFromUtc,
     removeMonthFromLoading,
+    addSequencedSlotsToObject,
 } from "../utils/slots";
 import { getMonthsInDisplay, parseTimeSlots } from "../utils/calendar";
 
@@ -43,6 +44,7 @@ export const statusReducer = (state, action) => {
                 notification: {
                     type: "error",
                     message: "There was an error getting the slots",
+                    body: action.error.body,
                 },
             };
             state.callback(notification);
@@ -66,6 +68,12 @@ export const statusReducer = (state, action) => {
         }
 
         case "NO_SLOTS_FOUND": {
+            const notification = {
+                notification: {
+                    type: "no_slots_found",
+                },
+            };
+            state.callback(notification);
             return { ...state, columnView: "no-slots" };
         }
 
@@ -91,21 +99,31 @@ export const statusReducer = (state, action) => {
 
         case "SET_SLOTS": {
             if (!action.slots.length > 0) {
-                return state;
+                const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
+                return {
+                    ...state,
+                    monthsLoading,
+                    slotFetchCount: state.slotFetchCount + 1,
+                };
             }
 
-            const slotsObject = addSlotsToObject(state.slots, action.slots);
-            const availableDays = getAvailableDays(addSlotsToObject({}, action.slots), action.tzid);
-            const availableDaysSet = new Set([...state.availableDays, ...availableDays]);
+            const slotsObject = state.sequenced_availability
+                ? addSequencedSlotsToObject(state.slots, action.slots)
+                : addSlotsToObject(state.slots, action.slots);
+            const availableDays = getAvailableDays(slotsObject, action.tzid);
             const monthsLoading = removeMonthFromLoading(state.monthsLoading, action.month);
 
+            const injectionPoint = state.sequenced_availability
+                ? getLocalDayFromUtc(action.slots[0].sequence[0].start, action.tzid)
+                : getLocalDayFromUtc(action.slots[0].start, action.tzid);
+
             return {
                 ...state,
-                availableDays: [...availableDaysSet].sort(),
+                availableDays,
                 monthsLoading,
                 slots: slotsObject,
                 slotFetchCount: state.slotFetchCount + 1,
-                slotInjectionPoint: getLocalDayFromUtc(action.slots[0].start, action.tzid),
+                slotInjectionPoint: injectionPoint,
             };
         }
 
@@ -118,13 +136,17 @@ export const statusReducer = (state, action) => {
 
         case "SELECT_DAY": {
             const daySlots = getSlotsByDay(state.slots, action.day, action.tzid);
-            const focusedSlot = daySlots[0];
+            const focusedSlot = state.sequenced_availability
+                ? daySlots[0]?.reduce((prev, current) => {
+                      return prev.start < current.start ? prev.start : current.start;
+                  })
+                : daySlots[0]?.start;
 
             return {
                 ...state,
                 selectedDay: action.day,
                 focusedDay: action.day,
-                focusedSlot: focusedSlot?.start,
+                focusedSlot: focusedSlot,
                 columnView: "slots",
                 daySlots,
                 populated: true,