cronofy-elements - npm Package Compare versions

Comparing version 1.47.0 to 1.48.0

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.47.0",
+    "version": "1.48.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
@@ -5,0 +5,0 @@ "main": "build/npm/CronofyElements.js",

src/js/components/DateTimePicker/DateTimePicker.js

@@ -81,2 +81,3 @@ import React, { useMemo } from "react";
             slots: {},
+            slotButtonMode: options.config.slotButtonMode,
             slotFetchCount: 0,
@@ -83,0 +84,0 @@ slotInjectionPoint: undefined,

src/js/components/DateTimePicker/SequencedSlotButton.js

@@ -44,4 +44,22 @@ import React, { useEffect, useRef } from "react";
     let classStub = "time-slot";
+    if (status.slotButtonMode === "detailed") classStub = classStub + " time-slot--detailed";
     if (status.selected.start === start) classStub = classStub + " time-slot--selected";
 
+    const detailedSlot = slot.map((s, i) => (
+        <li key={i} className={theme.classBuilder("detailed-slot-list--item")}>
+            {i18n.customFormatedTimeZone(
+                moment(s.start, "YYYY-MM-DDTHH:mm:00Z"),
+                tz.selectedTzid.tzid,
+                "LT"
+            )}
+            {" - "}
+            {i18n.customFormatedTimeZone(
+                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 (
@@ -56,14 +74,22 @@ <button
             </span>
-            {i18n.customFormatedTimeZone(
-                moment(start, "YYYY-MM-DDTHH:mm:00Z"),
-                tz.selectedTzid.tzid,
-                "LT"
+            {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")})`}
+                </>
             )}
-            {" - "}
-            {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>
@@ -70,0 +96,0 @@ );

src/js/helpers/connections.js

@@ -279,17 +279,3 @@ import * as mocks from "./mocks";
 ) => {
-    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;
 
@@ -296,0 +282,0 @@ return fetch(`${api_domain}/v1/sequenced_availability?et=${token}`, {

src/js/helpers/init.DateTimePicker.js

@@ -13,3 +13,3 @@ import moment from "moment-timezone";
 import { logConstructor } from "./logging";
-import { queryForDateTimePicker } from "./mocks";
+import { queryForDateTimePicker, sequencedQueryForDateTimePicker } from "./mocks";
 
@@ -79,4 +79,6 @@ import {
     let query;
-    if (options.demo) {
+    if (options.demo && !isSequencedAvailabilityQuery) {
         query = queryForDateTimePicker;
+    } else if (options.demo && isSequencedAvailabilityQuery) {
+        query = sequencedQueryForDateTimePicker;
     } else if (isBookableEventsQuery) {
@@ -110,2 +112,24 @@ query = options.availability_query;
 
+    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);
@@ -193,2 +217,3 @@
             tzList,
+            slotButtonMode,
         },
@@ -195,0 +220,0 @@ translations,

src/js/helpers/mocks.js

@@ -565,2 +565,63 @@ import moment from "moment-timezone";
 
+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 = (
@@ -776,1 +837,37 @@ interval = 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") }],
+};

tests/DateTimePicker/SequencedSlotButton.test.js

 import React from "react";
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, within } from "@testing-library/react";
 import "@testing-library/jest-dom";
@@ -70,2 +70,29 @@
 
+    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", () => {
@@ -72,0 +99,0 @@ const slot = [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3344061

increased by0.39%

Lines of code

27987

increased by0.54%

No dependency changes