cronofy-elements 1.46.1 → 1.48.2

package/demo/availability-viewer.ejs

@@ -115,6 +115,12 @@
         //     { start: offsetTime(1, "09:00"), end: offsetTime(90, "17:30") }
         // ];
 
+        // Query period with at least one missing week in the middle
+        // availablePeriods = [
+        //   { start: offsetTime(1, "09:00"), end: offsetTime(7, "17:30") },
+        //   { start: offsetTime(25, "09:00"), end: offsetTime(50, "17:30") }
+        // ];
+
         if (display.one) {
 
             const originalQuery = {

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") }
@@ -151,6 +129,7 @@
                 },
                 config: {
                     logs: 'info',
+                    //slot_button_mode: 'detailed' //summary | detailed
                     //selected_date: "2022-05-15"
                     //mode: 'no_confirm'
                     // week_start_day: "tuesday"

package/package.json

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

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

@@ -14,7 +14,7 @@ import {
     parseAccountOptions,
     buildRuleTemplate,
 } from "../../helpers/utils.AvailabilityRules";
-import { getInitialSelectedTzid } from "./utils/tz-utils";
+import { getInitialSelectedTzid, addTzidToTzList } from "./utils/tz-utils";
 import { parseStyleOptions, classBuilder } from "../../helpers/theming";
 import { globals } from "../../styles/utils";
 import { useI18n } from "../../contexts/i18n-context";
@@ -198,10 +198,19 @@ const Wrapper = ({ options }) => {
                     tz.list,
                     rulesResponse.availability_rule.tzid
                 );
-                setTz({
-                    list: tz.list,
-                    selectedTzid: selectedTzid,
-                });
+                if (selectedTzid) {
+                    setTz({
+                        list: tz.list,
+                        selectedTzid: selectedTzid,
+                    });
+                } else {
+                    //If we get here the tzid from the availbility rule is not in the tz.list so we need to add it.
+                    const result = addTzidToTzList(tz.list, rulesResponse.availability_rule.tzid);
+                    setTz({
+                        list: result.tzList,
+                        selectedTzid: result.selectedTzid,
+                    });
+                }
 
                 setSlots(slots => {
                     const hydratedSlots = checkSlotAvailability(

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

@@ -42,3 +42,20 @@ export const getInitialSelectedTzid = (tzList, tzid) => {
     const result = tzList.find(tz => tzid === tz.tzid);
     return result;
 };
+
+export const addTzidToTzList = (tzList, tzid) => {
+    const isValidTimeZone = !!moment.tz.zone(tzid);
+    if (isValidTimeZone) {
+        const newTzList = [...tzList];
+        const item = createTzObject(tzid);
+        newTzList.push(item);
+        newTzList.sort((tzA, tzB) => tzA.offsetMins - tzB.offsetMins);
+
+        return {
+            tzList: newTzList,
+            selectedTzid: item,
+        };
+    } else {
+        throw `There was an error setting the selected tzid as ${tzid}.`;
+    }
+};

package/src/js/components/AvailabilityViewer/AvailabilityViewer.js

@@ -336,6 +336,10 @@ const AvailabilityViewer = ({ options, error, eventCallback }) => {
                     // If we get here, the query_periods are not within the visible window.
                     // Empty queries will have triggered a `log.warn` earlier.
                     log.info("The provided query_periods are not within the visible window");
+                    // Passing an empty array to `handleNormalAvailability()`
+                    // to trigger the page being updated when there is an empty week
+                    // in the middle of a query period.
+                    handleNormalAvailability([]);
                 }
                 if (status.slotSelection === "unrestricted" && emptyQuery) {
                     setRawData([]);

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import moment from "moment-timezone";
 
 import { useI18n } from "../../contexts/i18n-context";
@@ -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")}

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

@@ -78,6 +78,7 @@ const DateTimePicker = ({ options }) => {
             availableDays: [],
             sequenced_availability: options.query.sequence ? true : false,
             slots: {},
+            slotButtonMode: options.config.slotButtonMode,
             slotFetchCount: 0,
             slotInjectionPoint: undefined,
             tzid: options.tzid,

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

@@ -41,29 +41,55 @@ const SequencedSlotButton = ({ slot }) => {
     }, [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";
 
-    return (
-        <button
-            className={theme.classBuilder(classStub)}
-            onClick={() => handleSlotSelection(slot)}
-            ref={slotButtonRef}
-        >
-            <span className={theme.classBuilder("visually-hidden")}>
-                {i18n.t("select_time_slot")}
-            </span>
+    const detailedSlot = slot.map((s, i) => (
+        <li key={i} className={theme.classBuilder("detailed-slot-list--item")}>
             {i18n.customFormatedTimeZone(
-                moment(start, "YYYY-MM-DDTHH:mm:00Z"),
+                moment(s.start, "YYYY-MM-DDTHH:mm:00Z"),
                 tz.selectedTzid.tzid,
                 "LT"
             )}
             {" - "}
             {i18n.customFormatedTimeZone(
-                moment(end, "YYYY-MM-DDTHH:mm:00Z"),
+                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>
     );
 };

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

@@ -186,7 +186,7 @@ const Wrapper = () => {
 
         // For allowing only this to be called once slots have been fetched
         // Since we know the first month that is being fetched will be for the initial selected day
-        if (status.selectedDay && fetchCount >= 1) {
+        if (status.selectedDay && fetchCount >= 1 && !status.selected) {
             const currentMonth = moment(status.selectedDay, "YYYY-MM-DD").format("YYYY-MM");
             const month = status.months.filter(el => {
                 return el.month === currentMonth;

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

@@ -110,7 +110,7 @@ export const statusReducer = (state, action) => {
 
             // Add action slots to state slots
             const slotsObject = state.sequenced_availability
-                ? addSequencedSlotsToObject(state.slots, action.slots)
+                ? addSequencedSlotsToObject(state.slots, action.slots, state.query.sequence)
                 : addSlotsToObject(state.slots, action.slots);
 
             // since we already know the available days for state slots
@@ -118,7 +118,7 @@ export const statusReducer = (state, action) => {
             // this way we don't have to loop through the entirety of the state slotsObject
             // every time new slots are rendered
             const actionSlotsObject = state.sequenced_availability
-                ? addSequencedSlotsToObject({}, action.slots)
+                ? addSequencedSlotsToObject({}, action.slots, [])
                 : addSlotsToObject({}, action.slots);
 
             const availableDays = uniqueItems([

package/src/js/components/DateTimePicker/scss/_components.confirm.scss

@@ -10,6 +10,16 @@
     font-size: 1.5em;
 }
 
+.DTP__confirm-details--sequence-title {
+    display: inline-block;
+    font-weight: bold;
+}
+
+.DTP__confirm-details--sequence-time {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
 .DTP__confirm-button {
     @extend .DTP__button;
     background-color: var(--buttonConfirm);

package/src/js/components/DateTimePicker/scss/_components.slotslist.scss

@@ -25,6 +25,16 @@
     border-radius: 0.4em;
 }
 
+.DTP__time-slot--detailed {
+  height: unset;
+}
+
+.DTP__detailed-slot-list,
+.DTP__detailed-slot-list--item {
+    @extend %unset;
+    list-style: none;
+}
+
 .DTP__time-slot--selected {
     @extend .DTP__button;
     background-color: var(--buttonActive);

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

@@ -196,13 +196,26 @@ export const addSlotsToObject = (slotsObject, newSlotsArray) => {
     return slotsObject;
 };
 
-export const addSequencedSlotsToObject = (slotsObject, newSlotsArray) => {
+export const addSequenceTitle = (slot, sequence) => {
+    if (sequence.length > 0) {
+        const title = sequence.find(s => {
+            return s.sequence_id === slot.sequence_id;
+        }).sequence_title;
+        return title;
+    }
+};
+
+export const addSequencedSlotsToObject = (slotsObject, newSlotsArray, sequence) => {
     newSlotsArray.forEach(slot => {
+        const formattedSlot = slot.sequence.map(s => {
+            const title = addSequenceTitle(s, sequence);
+            return title ? { ...s, sequence_title: title } : s;
+        });
         const startArray = slot.sequence.map(a => a.start);
         const start = startArray.reduce((prev, current) => {
             return prev < current ? prev : current;
         });
-        slotsObject[start] = slot.sequence;
+        slotsObject[start] = formattedSlot;
     });
     return slotsObject;
 };

package/src/js/helpers/connections.js

@@ -276,21 +276,7 @@ export const getSequencedAvailability = (
     tzid = "Etc/UTC",
     mock = false
 ) => {
-    if (
-        (mock && params.response_format === "slots") ||
-        (mock && typeof params.start_interval === "undefined")
-    ) {
-        return mocks.availabilitySlots;
-    }
-    if (mock && params.response_format === "overlapping_slots") {
-        return mocks.availabilityOverlappingSlots(
-            params.start_interval.minutes,
-            params.required_duration.minutes,
-            params.query_periods,
-            tzid
-        );
-    }
-    if (mock) return mocks.availability;
+    if (mock) return mocks.sequencedAvailabilitySlots;
 
     return fetch(`${api_domain}/v1/sequenced_availability?et=${token}`, {
         method: "POST",

package/src/js/helpers/init.DateTimePicker.js

@@ -10,7 +10,7 @@ import {
     validateLocaleModifiers,
 } from "./init";
 import { logConstructor } from "./logging";
-import { queryForDateTimePicker } from "./mocks";
+import { queryForDateTimePicker, sequencedQueryForDateTimePicker } from "./mocks";
 
 import {
     getMonthsFromQuery,
@@ -75,8 +75,10 @@ export const parseDateTimePickerOptions = (options = {}) => {
     const isSequencedAvailabilityQuery = options.availability_query.sequence ? true : false;
 
     let query;
-    if (options.demo) {
+    if (options.demo && !isSequencedAvailabilityQuery) {
         query = queryForDateTimePicker;
+    } else if (options.demo && isSequencedAvailabilityQuery) {
+        query = sequencedQueryForDateTimePicker;
     } else if (isBookableEventsQuery) {
         query = options.availability_query;
         query = parseWithOverlappingSlots(query);
@@ -88,6 +90,45 @@ export const parseDateTimePickerOptions = (options = {}) => {
         query = parseWithOverlappingSlots(query);
     }
 
+    if (isSequencedAvailabilityQuery) {
+        const isOneTitlePresent = query.sequence.some(obj =>
+            Object.keys(obj).includes("sequence_title")
+        );
+
+        if (isOneTitlePresent) {
+            const isEveryTitlePresent = query.sequence.every(obj =>
+                Object.keys(obj).includes("sequence_title")
+            );
+
+            if (!isEveryTitlePresent) {
+                log.error("There is a missing `sequence_title` from at least one sequence event.");
+                return false;
+            }
+        }
+    }
+
+    if (typeof config.slot_button_mode !== "undefined" && !isSequencedAvailabilityQuery) {
+        log.warn(
+            `\`config.slot_button_mode\`. can only be used with a sequenced availability query. Setting this option on a regular availability query will have no effect.`
+        );
+    }
+
+    const slotButtonMode =
+        typeof config.slot_button_mode === "undefined" ? "summary" : config.slot_button_mode;
+
+    const validSlotButtonModes = ["summary", "detailed"];
+    const validSlotButtonMode = validSlotButtonModes.includes(slotButtonMode);
+
+    if (isSequencedAvailabilityQuery && !validSlotButtonMode) {
+        log.error(
+            `Please provide a valid \`config.slot_button_mode\`. \`${slotButtonMode}\` is not a supported value.`,
+            {
+                docsSlug: "date-time-picker/#config.slot_button_mode",
+            }
+        );
+        return false;
+    }
+
     const tzid = parseTimezone(options.tzid, "date-time-picker", log);
 
     const tzList = typeof config.tz_list === "undefined" ? false : config.tz_list;
@@ -170,6 +211,7 @@ export const parseDateTimePickerOptions = (options = {}) => {
             startDate,
             endDate,
             tzList,
+            slotButtonMode,
         },
         translations,
         log,

package/src/js/helpers/mocks.js

@@ -562,6 +562,67 @@ export const availabilitySlots = new Promise(function (resolve, reject) {
     });
 });
 
+export const sequencedAvailabilitySlots = new Promise(function (resolve, reject) {
+    const createMockSequenceSlot = (day, startOne, endOne, startTwo, endTwo) => ({
+        sequence: [
+            {
+                sequence_id: "demo-one",
+                start: offsetTime(day, startOne),
+                end: offsetTime(day, endOne),
+                participants: [
+                    {
+                        sub: "acc_5b97a52a5c92eb0cc0400ffe",
+                    },
+                ],
+            },
+            {
+                sequence_id: "demo-two",
+                start: offsetTime(day, startTwo),
+                end: offsetTime(day, endTwo),
+                participants: [
+                    {
+                        sub: "acc_5b97a52a5c92eb0cc0400ffe",
+                    },
+                ],
+            },
+        ],
+    });
+
+    resolve({
+        available_slots: [
+            createMockSequenceSlot(1, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(1, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(1, "11:00", "11:30", "11:30", "12:00"),
+            createMockSequenceSlot(1, "12:00", "12:30", "12:30", "13:00"),
+            createMockSequenceSlot(1, "14:00", "14:30", "14:30", "15:00"),
+            createMockSequenceSlot(2, "14:30", "15:00", "15:00", "15:30"),
+            createMockSequenceSlot(2, "16:30", "17:00", "17:00", "17:30"),
+            createMockSequenceSlot(3, "08:00", "08:30", "08:30", "09:00"),
+            createMockSequenceSlot(3, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(3, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(3, "11:00", "11:30", "11:30", "12:00"),
+            createMockSequenceSlot(3, "12:00", "12:30", "12:30", "13:00"),
+            createMockSequenceSlot(3, "14:00", "14:30", "14:30", "15:00"),
+            createMockSequenceSlot(4, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(4, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(4, "12:00", "12:30", "12:30", "13:00"),
+            createMockSequenceSlot(4, "16:00", "16:30", "16:30", "17:00"),
+            createMockSequenceSlot(5, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(5, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(5, "11:00", "11:30", "11:30", "12:00"),
+            createMockSequenceSlot(5, "12:00", "12:30", "12:30", "13:00"),
+            createMockSequenceSlot(5, "13:30", "14:00", "14:00", "14:30"),
+            createMockSequenceSlot(8, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(8, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(8, "11:00", "11:30", "11:30", "12:00"),
+            createMockSequenceSlot(8, "14:00", "14:30", "14:30", "15:00"),
+            createMockSequenceSlot(9, "09:00", "09:30", "09:30", "10:00"),
+            createMockSequenceSlot(9, "10:00", "10:30", "10:30", "11:00"),
+            createMockSequenceSlot(9, "11:00", "11:30", "11:30", "12:00"),
+        ],
+    });
+});
+
 export const availabilityOverlappingSlots = (
     interval = 30,
     duration = 60,
@@ -772,3 +833,39 @@ export const queryForDateTimePicker = {
     query_periods: [{ start: offsetTime(1, "09:00"), end: offsetTime(9, "11:30") }],
     required_duration: { minutes: 30 },
 };
+
+export const sequencedQueryForDateTimePicker = {
+    sequence: [
+        {
+            sequence_id: "demo-one",
+            sequence_title: "Demo Event One",
+            ordinal: 1,
+            participants: [
+                {
+                    members: [
+                        {
+                            sub: "acc_5b97a52a5c92eb0cc0400ffe",
+                        },
+                    ],
+                },
+            ],
+            required_duration: { minutes: 30 },
+        },
+        {
+            sequence_id: "demo-two",
+            sequence_title: "Demo Event Two",
+            ordinal: 2,
+            participants: [
+                {
+                    members: [
+                        {
+                            sub: "acc_5b97a52a5c92eb0cc0400ffe",
+                        },
+                    ],
+                },
+            ],
+            required_duration: { minutes: 30 },
+        },
+    ],
+    query_periods: [{ start: offsetTime(1, "09:00"), end: offsetTime(9, "11:30") }],
+};

package/tests/DateTimePicker/SequencedSlotButton.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, within } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import SequencedSlotButton from "../../src/js/components/DateTimePicker/SequencedSlotButton";
@@ -67,6 +67,33 @@ describe("SequencedSlotButton", () => {
         expect(button.innerHTML).toEqual(expect.stringContaining("10:30 AM - 12:00 PM (BST)"));
     });
 
+    it("displays a detailed view when slot button mode is set to detailed", () => {
+        const status = {
+            slotButtonMode: "detailed",
+        };
+        const { container } = render(<SequencedSlotButton slot={slot} />, {
+            wrapper: e => wrapper({ ...e, status }),
+        });
+
+        const button = container.querySelector(".DTP__time-slot");
+        const detailedList = container.querySelector(".DTP__detailed-slot-list");
+
+        expect(button).toBeInTheDocument();
+        expect(detailedList).toBeInTheDocument();
+
+        const { getAllByRole } = within(detailedList);
+        const items = getAllByRole("listitem");
+        expect(items.length).toBe(2);
+
+        const listText = items.map(item => item.textContent);
+        expect(listText).toMatchInlineSnapshot(`
+            Array [
+              "10:30 AM - 11:00 AM (BST)",
+              "11:30 AM - 12:00 PM (BST)",
+            ]
+        `);
+    });
+
     it("displays slot button with time in GMT", () => {
         const slot = [
             { sequence_id: "test-1", start: "2022-11-05T09:30:00Z", end: "2022-11-05T10:00:00Z" },

package/tests/DateTimePicker/contexts/status-reducer.test.js

@@ -9,8 +9,9 @@ import {
     testSequencedSlotsArray,
     testDaySlots,
     testDaySequencedSlots,
-    testSequencedSlotsAObject,
+    testSequencedSlotsObject,
     testQuery,
+    testSequencedQuery,
 } from "../dummy-data";
 
 import {
@@ -584,6 +585,7 @@ describe("Date Time Picker status reducer", () => {
         it("sets sequenced slots", () => {
             const oldState = {
                 ...startingState,
+                query: testSequencedQuery,
                 slots: {},
                 availableDays: [],
                 slotFetchCount: 0,
@@ -649,7 +651,7 @@ describe("Date Time Picker status reducer", () => {
             } = result;
 
             // These values have been updated
-            expect(slots).toStrictEqual(testSequencedSlotsAObject);
+            expect(slots).toStrictEqual(testSequencedSlotsObject);
             expect(availableDays).toStrictEqual([
                 "2021-09-29",
                 "2021-09-30",
@@ -748,7 +750,7 @@ describe("Date Time Picker status reducer", () => {
         it("SELECT_DAY for sequenced slots", async () => {
             const oldState = {
                 ...startingState,
-                slots: testSequencedSlotsAObject,
+                slots: testSequencedSlotsObject,
                 sequenced_availability: true,
             };
             const date = "2021-09-29";