cronofy-elements - npm Package Compare versions

Comparing version 1.46.1 to 1.47.0

package.json

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

src/js/components/DateTimePicker/Confirm.js

@@ -1,2 +0,2 @@
-import React from "react";
+import React, { useState } from "react";
 import moment from "moment-timezone";
@@ -15,2 +15,8 @@
 
+    const [sequenceTitlePresent, setSequenceTitlePresent] = useState(
+        () =>
+            status.selected.sequence &&
+            status.selected.sequence.every(obj => Object.keys(obj).includes("sequence_title"))
+    );
+
     const handleCancel = () => {
@@ -56,2 +62,32 @@ dispatchStatus({ type: "CANCEL_SLOT_SELECTION" });
                 </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>
@@ -58,0 +94,0 @@ <button

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

@@ -113,3 +113,3 @@ import moment from "moment-timezone";
             const slotsObject = state.sequenced_availability
-                ? addSequencedSlotsToObject(state.slots, action.slots)
+                ? addSequencedSlotsToObject(state.slots, action.slots, state.query.sequence)
                 : addSlotsToObject(state.slots, action.slots);
@@ -122,3 +122,3 @@
             const actionSlotsObject = state.sequenced_availability
-                ? addSequencedSlotsToObject({}, action.slots)
+                ? addSequencedSlotsToObject({}, action.slots, [])
                 : addSlotsToObject({}, action.slots);
@@ -125,0 +125,0 @@

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

@@ -199,4 +199,17 @@ import moment from "moment-timezone";
 
-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);
@@ -206,3 +219,3 @@ const start = startArray.reduce((prev, current) => {
         });
-        slotsObject[start] = slot.sequence;
+        slotsObject[start] = formattedSlot;
     });
@@ -209,0 +222,0 @@ return slotsObject;

src/js/components/DateTimePicker/Wrapper.js

@@ -189,3 +189,3 @@ import React, { useEffect, useRef, useState } from "react";
         // 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");
@@ -192,0 +192,0 @@ const month = status.months.filter(el => {

src/js/helpers/init.DateTimePicker.js

@@ -91,2 +91,19 @@ import moment from "moment-timezone";
 
+    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;
+            }
+        }
+    }
+
     const tzid = parseTimezone(options.tzid, "date-time-picker", log);
@@ -93,0 +110,0 @@

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

@@ -12,4 +12,5 @@ import { statusReducer } from "../../../src/js/components/DateTimePicker/contexts/status-reducer";
     testDaySequencedSlots,
-    testSequencedSlotsAObject,
+    testSequencedSlotsObject,
     testQuery,
+    testSequencedQuery,
 } from "../dummy-data";
@@ -588,2 +589,3 @@
                 ...startingState,
+                query: testSequencedQuery,
                 slots: {},
@@ -654,3 +656,3 @@ availableDays: [],
             // These values have been updated
-            expect(slots).toStrictEqual(testSequencedSlotsAObject);
+            expect(slots).toStrictEqual(testSequencedSlotsObject);
             expect(availableDays).toStrictEqual([
@@ -754,3 +756,3 @@ "2021-09-29",
                 ...startingState,
-                slots: testSequencedSlotsAObject,
+                slots: testSequencedSlotsObject,
                 sequenced_availability: true,
@@ -757,0 +759,0 @@ };

tests/DateTimePicker/dummy-data.js

@@ -74,2 +74,56 @@ export const rawSlots = {
 
+export const testSequencedQuery = {
+    sequence: [
+        {
+            sequence_id: "test-one",
+            ordinal: 1,
+            participants: [
+                {
+                    sub: "acc_5f35432b3f07d06753082354",
+                },
+            ],
+            required_duration: { minutes: 60 },
+        },
+        {
+            sequence_id: "test-two",
+            ordinal: 2,
+            participants: [
+                {
+                    sub: "acc_5f35432b3f07d06753082354",
+                },
+            ],
+            required_duration: { minutes: 30 },
+        },
+    ],
+    query_periods: [{ start: "2021-09-29T08:00:00Z", end: "2021-10-04T18:00:00Z" }],
+};
+
+export const testSequencedQueryWithTitle = {
+    sequence: [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            ordinal: 1,
+            participants: [
+                {
+                    sub: "acc_5f35432b3f07d06753082354",
+                },
+            ],
+            required_duration: { minutes: 60 },
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            ordinal: 2,
+            participants: [
+                {
+                    sub: "acc_5f35432b3f07d06753082354",
+                },
+            ],
+            required_duration: { minutes: 30 },
+        },
+    ],
+    query_periods: [{ start: "2021-09-29T08:00:00Z", end: "2021-10-04T18:00:00Z" }],
+};
+
 export const testTzList = [
@@ -537,3 +591,3 @@ { tzid: "America/Phoenix", offset: "-07:00", offsetMins: -420, name: "Phoenix", abbr: "MST" },
 
-export const testSequencedSlotsAObject = {
+export const testSequencedSlotsObject = {
     "2021-09-29T08:00:00Z": [
@@ -653,2 +707,133 @@ {
 
+export const testSequencedSlotsObjectWithTitle = {
+    "2021-09-29T08:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-09-29T08:00:00Z",
+            end: "2021-09-29T09:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-09-29T09:00:00Z",
+            end: "2021-09-29T09:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-09-29T10:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-09-29T10:00:00Z",
+            end: "2021-09-29T11:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-09-29T11:00:00Z",
+            end: "2021-09-29T11:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-09-30T08:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-09-30T08:00:00Z",
+            end: "2021-09-30T09:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-09-30T09:00:00Z",
+            end: "2021-09-30T09:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-09-30T10:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-09-30T10:00:00Z",
+            end: "2021-09-30T11:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-09-30T11:00:00Z",
+            end: "2021-09-30T11:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-09-30T11:30:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-09-30T11:30:00Z",
+            end: "2021-09-30T12:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-09-30T12:30:00Z",
+            end: "2021-09-30T13:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-10-01T08:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-10-01T08:00:00Z",
+            end: "2021-10-01T09:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-10-01T09:00:00Z",
+            end: "2021-10-01T09:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-10-04T08:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-10-04T08:00:00Z",
+            end: "2021-10-04T09:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-10-04T09:00:00Z",
+            end: "2021-10-04T09:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+    "2021-10-04T10:00:00Z": [
+        {
+            sequence_id: "test-one",
+            sequence_title: "Test Event One",
+            start: "2021-10-04T10:00:00Z",
+            end: "2021-10-04T11:00:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+        {
+            sequence_id: "test-two",
+            sequence_title: "Test Event Two",
+            start: "2021-10-04T11:00:00Z",
+            end: "2021-10-04T11:30:00Z",
+            participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
+        },
+    ],
+};
+
 export const testDaySlots = [
@@ -655,0 +840,0 @@ {

tests/DateTimePicker/utils.test.js

 import * as utils from "../../src/js/components/DateTimePicker/utils/slots";
-import { rawSlots, testSequencedSlotsAObject, testSequencedSlotsArray } from "./dummy-data";
+import {
+    rawSlots,
+    testSequencedSlotsObject,
+    testSequencedSlotsObjectWithTitle,
+    testSequencedSlotsArray,
+    testSequencedQuery,
+    testSequencedQueryWithTitle,
+} from "./dummy-data";
 import moment from "moment-timezone";
@@ -141,6 +148,20 @@
         const exampleSlots = [...testSequencedSlotsArray];
-        const slotsObject = utils.addSequencedSlotsToObject({}, exampleSlots);
-        expect(slotsObject).toStrictEqual(testSequencedSlotsAObject);
+        const slotsObject = utils.addSequencedSlotsToObject(
+            {},
+            exampleSlots,
+            testSequencedQuery.sequence
+        );
+        expect(slotsObject).toStrictEqual(testSequencedSlotsObject);
     });
 
+    it("adds sequenced slots to object with sequence title", () => {
+        const exampleSlots = [...testSequencedSlotsArray];
+        const slotsObject = utils.addSequencedSlotsToObject(
+            {},
+            exampleSlots,
+            testSequencedQueryWithTitle.sequence
+        );
+        expect(slotsObject).toStrictEqual(testSequencedSlotsObjectWithTitle);
+    });
+
     describe("Parses the timezone list correctly", () => {
@@ -147,0 +168,0 @@ it("gets timezone list", () => {

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

3330955

increased by0.36%

Lines of code

27838

increased by0.96%

No dependency changes