cronofy-elements - npm Package Compare versions

Comparing version 1.7.13 to 1.7.14

package.json

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

src/js/components/Agenda/CalendarHeader.js

@@ -55,2 +55,3 @@ import React, { useContext } from "react";
                 <button
+                    type="button"
                     css={css`
@@ -95,2 +96,3 @@ ${buttonReset};
                 <button
+                    type="button"
                     css={css`
@@ -103,5 +105,3 @@ ${navButtonBaseStyles};
                     `}
-                    className={`${theme.prefix}__nav ${
-                        theme.prefix
-                    }__nav--prev`}
+                    className={`${theme.prefix}__nav ${theme.prefix}__nav--prev`}
                     onClick={() => nextPrev("prev")}
@@ -175,2 +175,3 @@ >
                 <button
+                    type="button"
                     css={css`
@@ -183,5 +184,3 @@ ${navButtonBaseStyles};
                     `}
-                    className={`${theme.prefix}__nav ${
-                        theme.prefix
-                    }__nav--next`}
+                    className={`${theme.prefix}__nav ${theme.prefix}__nav--next`}
                     onClick={() => nextPrev("next")}
@@ -188,0 +187,0 @@ >

src/js/components/AvailabilityRules/AddButton.js

@@ -14,2 +14,3 @@ import React, { useContext } from "react";
         <button
+            type="button"
             css={css`
@@ -16,0 +17,0 @@ ${buttonReset}

src/js/components/AvailabilityRules/CalendarSelector.js

@@ -78,2 +78,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -80,0 +81,0 @@ ${buttonReset};

src/js/components/AvailabilityRules/Footer.js

@@ -72,2 +72,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -74,0 +75,0 @@ ${buttonReset};

src/js/components/AvailabilityRules/RemoveButton.js

@@ -14,2 +14,3 @@ import React, { useContext } from "react";
         <button
+            type="button"
             css={css`
@@ -16,0 +17,0 @@ ${buttonReset}

src/js/components/AvailabilityRules/Slot.js

@@ -96,2 +96,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -98,0 +99,0 @@ ${buttonReset};

src/js/components/AvailabilityRules/TimeSelector.js

@@ -118,2 +118,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -140,5 +141,3 @@ ${buttonReset};
                     `}
-                    className={`${
-                        theme.prefix
-                    }__time-select__close-button-icon`}
+                    className={`${theme.prefix}__time-select__close-button-icon`}
                     viewBox="0 0 7 6"
@@ -145,0 +144,0 @@ >

src/js/components/AvailabilityViewer/Navigation.js

@@ -104,2 +104,3 @@ import React, { useContext } from "react";
                     <button
+                        type="button"
                         onClick={() => navigateWeek(-1)}
@@ -126,2 +127,3 @@ css={buttonOneStyles}
                     <button
+                        type="button"
                         onClick={() => navigateWeek(1)}
@@ -128,0 +130,0 @@ css={buttonTwoStyles}

src/js/components/AvailabilityViewer/SelectedSlot.js

@@ -72,2 +72,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -74,0 +75,0 @@ ${buttonReset};

src/js/components/AvailabilityViewer/Slot.js

@@ -195,2 +195,3 @@ import React, { useState, useContext, useEffect } from "react";
         <button
+            type="button"
             ref={hoverButton}
@@ -197,0 +198,0 @@ css={css`

src/js/components/AvailabilityViewer/TimeSelector.js

@@ -113,2 +113,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -115,0 +116,0 @@ ${buttonReset};

src/js/components/CalendarSync/AddToggle.js

@@ -28,2 +28,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -30,0 +31,0 @@ ${buttonReset}

src/js/components/CalendarSync/EditToggle.js

@@ -35,2 +35,3 @@ import React, { useContext } from "react";
             <button
+                type="button"
                 css={css`
@@ -37,0 +38,0 @@ ${buttonReset}

src/js/components/CalendarSync/RemoveLink.js

@@ -54,13 +54,14 @@ import React, { useState, useContext } from "react";
                 <button
+                    type="button"
                     css={css`
-                ${buttonReset};
-                padding: 0;
-                display: flex;
-                cursor: pointer;
-                align-items: center;
-                justify-content: center;
-                width: 20px;
-                height 20px;
-                margin-right: 10px;
-            `}
+                        ${buttonReset};
+                        padding: 0;
+                        display: flex;
+                        cursor: pointer;
+                        align-items: center;
+                        justify-content: center;
+                        width: 20px;
+                        height 20px;
+                        margin-right: 10px;
+                    `}
                     className={`${theme.prefix}__remove`}
@@ -67,0 +68,0 @@ onClick={handleLinkClick}

src/js/components/generic/Button.js

@@ -21,3 +21,8 @@ import React from "react";
     return (
-        <button className={className} onClick={onClick} css={buttonStyles}>
+        <button
+            type="button"
+            className={className}
+            onClick={onClick}
+            css={buttonStyles}
+        >
             {children}
@@ -24,0 +29,0 @@ </button>

src/js/components/generic/IconButton.js

@@ -9,2 +9,3 @@ import React from "react";
     <button
+        type="button"
         onClick={callback}
@@ -11,0 +12,0 @@ css={css`

src/js/components/SlotPicker/Confirm.js

@@ -46,2 +46,3 @@ import React, { useContext } from "react";
                 <button
+                    type="button"
                     css={css`
@@ -68,5 +69,3 @@ ${buttonReset};
                         `}
-                        className={`${theme.prefix}__slots-icon ${
-                            theme.prefix
-                        }__slots-icon--back`}
+                        className={`${theme.prefix}__slots-icon ${theme.prefix}__slots-icon--back`}
                     >
@@ -73,0 +72,0 @@ <use xlinkHref={`#arrow`} />

src/js/components/SlotPicker/Slot.js

@@ -46,2 +46,3 @@ import React, { useContext } from "react";
                 <button
+                    type="button"
                     css={slotStyles}
@@ -55,2 +56,3 @@ className={`${theme.prefix}__slot`}
                 <button
+                    type="button"
                     css={unavailableSlotStyles}
@@ -57,0 +59,0 @@ className={`${theme.prefix}__slot--unavailble`}

src/js/components/SlotPicker/TimeSlots.js

@@ -25,5 +25,3 @@ import React, { useContext } from "react";
             `}
-            className={`${theme.prefix}__slots-list ${
-                theme.prefix
-            }__slots-list--times`}
+            className={`${theme.prefix}__slots-list ${theme.prefix}__slots-list--times`}
         >
@@ -42,2 +40,3 @@ <div
                 <button
+                    type="button"
                     css={css`
@@ -64,5 +63,3 @@ ${buttonReset};
                         `}
-                        className={`${theme.prefix}__icon ${
-                            theme.prefix
-                        }__slots-icon--back`}
+                        className={`${theme.prefix}__icon ${theme.prefix}__slots-icon--back`}
                     >
@@ -69,0 +66,0 @@ <use xlinkHref={`#arrow`} />

src/js/helpers/connections.js

@@ -161,3 +161,4 @@ import * as mocks from "./mocks";
             params.start_interval.minutes,
-            params.required_duration.minutes
+            params.required_duration.minutes,
+            params.available_periods
         );
@@ -164,0 +165,0 @@ }

src/js/helpers/mocks.js

@@ -592,4 +592,19 @@ import moment from "moment-timezone";
 
-export const availabilityOverlappingSlots = (interval = 30, duration = 60) =>
+export const availabilityOverlappingSlots = (
+    interval = 30,
+    duration = 60,
+    availablePeriods = false
+) =>
     new Promise((resolve, reject) => {
+        if (availablePeriods) {
+            const dynamicSlots = generativeAvailabilityOverlappingSlots(
+                interval,
+                duration,
+                availablePeriods
+            );
+            resolve({
+                available_slots: dynamicSlots
+            });
+        }
+
         const utcOffset = moment().utcOffset();
@@ -686,2 +701,63 @@ const invertedOffset =
 
+export const generativeAvailabilityOverlappingSlots = (
+    interval = 30,
+    duration = 60,
+    query
+) => {
+    const createPeriodUsingQuery = (period, interval, duration, acc = []) => {
+        // // 80% chance of creating an available slot
+        // const availableSlot = Math.random() * 100 < 80;
+        // 100% chance of creating an available slot
+        const availableSlot = true;
+
+        const slotEnd = moment(period.start, "YYYY-MM-DDTHH:mm:00Z").add(
+            duration,
+            "minutes"
+        );
+
+        const newPeriodStart = moment(period.start, "YYYY-MM-DDTHH:mm:00Z")
+            .add(interval, "minutes")
+            .format("YYYY-MM-DDTHH:mm[:00Z]");
+
+        const end = moment(period.end, "YYYY-MM-DDTHH:mm:00Z");
+
+        if (slotEnd.diff(end, "minutes") > 0) {
+            return acc;
+        }
+
+        if (availableSlot) {
+            acc.push({
+                start: period.start,
+                end: slotEnd.format("YYYY-MM-DDTHH:mm[:00Z]"),
+                participants: [
+                    {
+                        sub: "acc_5b97a52a5c92eb0cc0400ffe"
+                    },
+                    {
+                        sub: "test_busy_1000-1030_1430-1540_2200-0600"
+                    },
+                    {
+                        sub: "test_busy_1130-1200_1445-1500"
+                    }
+                ]
+            });
+        }
+
+        return createPeriodUsingQuery(
+            {
+                ...period,
+                start: newPeriodStart
+            },
+            interval,
+            duration,
+            acc
+        );
+    };
+
+    const calculatedSlots = query
+        .map(period => createPeriodUsingQuery(period, interval, duration))
+        .reduce((curr, acc) => [...acc, ...curr]);
+    return calculatedSlots;
+};
+
 export const default_availability_rules = [
@@ -688,0 +764,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

2443711

increased by0.27%

Lines of code

20684

increased by0.4%

No dependency changes