cronofy-elements - npm Package Compare versions

Comparing version 1.18.1 to 1.19.0

package.json

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

src/js/components/AvailabilityRules/AvailabilityRules.js

@@ -47,3 +47,7 @@ import React, { useState, useEffect } from "react";
     const [account, setAccount] = useState(parseAccountOptions(options));
-    const [calendars, setCalendars] = useState({ all: [], active: [] });
+    const [calendars, setCalendars] = useState({
+        all: [],
+        active: [],
+        profiles: []
+    });
     const [rules, setRules] = useState([]);
@@ -166,3 +170,4 @@ const [i18n, setI18n] = useState(
                     active: rulesResponse.availability_rule.calendar_ids || [],
-                    all: calsResponse
+                    all: calsResponse.parsed,
+                    profiles: calsResponse.profiles
                 });
@@ -169,0 +174,0 @@

src/js/components/AvailabilityRules/Calendar.js

@@ -27,3 +27,3 @@ import React, { useContext } from "react";
             {remove ? (
-                <RemoveButton callback={() => remove(calendar.id)} />
+                <RemoveButton callback={() => remove([calendar.id])} />
             ) : null}
@@ -30,0 +30,0 @@ </div>

src/js/components/AvailabilityRules/Calendars.js

@@ -21,15 +21,12 @@ import React, { useState, useContext } from "react";
 
-    const addCalendars = (id = false) => {
-        if (id) {
-            // console.log("adding calendar", id);
-            const alreadyExists = calendars.active.includes(id);
-            if (alreadyExists) return;
-
-            const targetCal = calendars.all.find(cal => cal.id === id);
+    const addCalendars = (ids = []) => {
+        if (ids.length > 0) {
+            const newIDs = ids.filter(id => !calendars.active.includes(id));
+            if (newIDs.length <= 0) return;
             setCalendars({
-                active: [...calendars.active, targetCal.id],
-                all: calendars.all
+                ...calendars,
+                active: [...calendars.active, ...newIDs]
             });
         } else {
-            // console.log("adding all calendars");
+            // Add all calendars
             setCalendars({
@@ -42,6 +39,7 @@ ...calendars,
 
-    const removeCalendars = (id = false) => {
-        if (id) {
-            // console.log("removing calendar", id);
-            const filteredCals = calendars.active.filter(cal => cal !== id);
+    const removeCalendars = (ids = []) => {
+        if (ids.length > 0) {
+            const filteredCals = calendars.active.filter(
+                cal => !ids.includes(cal)
+            );
             setCalendars({
@@ -52,3 +50,3 @@ ...calendars,
         } else {
-            // console.log("removing all calendars");
+            // Remove all calendars
             setCalendars({ ...calendars, active: [] });
@@ -55,0 +53,0 @@ }

src/js/components/AvailabilityRules/CalendarSelector.js

@@ -5,9 +5,7 @@ import React, { useContext, useEffect, useRef } from "react";
 
-import { I18nContext, ThemeContext } from "./AvailabilityRules";
-import Checkmark from "./Checkmark";
+import CalendarProfiles from "./CalendarProfiles";
 
-import { buttonReset } from "../../styles/utils";
+import { ThemeContext } from "./AvailabilityRules";
 
 const CalendarSelector = ({ calendars, done, add, remove }) => {
-    const i18n = useContext(I18nContext);
     const [theme, setTheme] = useContext(ThemeContext);
@@ -38,47 +36,12 @@ const wrapperRef = useRef(null);
 
-    const calendarsMarkup = calendars.all.map(cal => {
-        const isActive = calendars.active.includes(cal.id);
-        const callback = isActive ? remove : add;
-        return (
-            <div
-                css={css`
-                    display: flex;
-                    align-items: center;
-                    cursor: pointer;
-                    user-select: none;
-                    margin-bottom: 20px;
-                `}
-                key={`cal-toggle-${cal.id}`}
-                onClick={() => callback(cal.id)}
-                className={`${theme.prefix}__calendars__modal-list-item`}
-            >
-                <Checkmark checked={isActive} />
-                <div
-                    className={`${theme.prefix}__calendars__modal-item-details`}
-                >
-                    <span
-                        css={css`
-                            font-weight: bold;
-                            display: block;
-                            line-height: 1;
-                            margin-bottom: 4px;
-                        `}
-                        className={`${theme.prefix}__calendars__modal-item-title`}
-                    >
-                        {cal.name}
-                    </span>
-                    <span
-                        css={css`
-                            display: block;
-                            font-size: 12px;
-                            font-style: italic;
-                            line-height: 12px;
-                            color: ${theme.colors.grey};
-                        `}
-                        className={`${theme.prefix}__calendars__modal-item-subtitle`}
-                    >{`${cal.profile_name} [${cal.provider_name}]`}</span>
-                </div>
-            </div>
-        );
-    });
+    const profilesMarkup = calendars.profiles.map(profile => (
+        <CalendarProfiles
+            key={profile.profile_name}
+            activeCalendars={calendars.active}
+            calendars={profile.profile_calendars}
+            name={profile.profile_name}
+            service={profile.provider_service}
+            callbacks={{ add, remove }}
+        />
+    ));
 
@@ -91,4 +54,5 @@ return (
                 z-index: 6;
-                top: 20px;
-                left: 10px;
+                top: 100%;
+                left: 0;
+                transform: translateY(10px);
                 background: ${theme.colors.white};
@@ -99,39 +63,31 @@ border: 1px solid ${theme.colors.hairline};
                     0;
-                padding: 30px 20px 10px 10px;
+                &:before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translate(-50%, -50%) rotate(45deg);
+                    z-index: 1;
+                    width: 12px;
+                    height: 12px;
+                    pointer-events: none;
+                    background: ${theme.colors.greyPale};
+                    border-top: 1px solid ${theme.colors.hairline};
+                    border-left: 1px solid ${theme.colors.hairline};
+                }
+                // List reset here to account for common
+                // hard-to-override base styles
+                ul,
+                ul li {
+                    margin: 0;
+                    padding: 0;
+                    list-style: none;
+                }
+                .${theme.prefix}__calendars__modal-list-item {
+                    padding: 12px;
+                }
             `}
             className={`${theme.prefix}__calendars__modal`}
         >
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    position: absolute;
-                    top: 7px;
-                    right: 7px;
-                    width: 12px;
-                    height: 12px;
-                `}
-                className={`${theme.prefix}__calendars__modal-close`}
-                onClick={done}
-            >
-                <svg
-                    css={css`
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        width: 12px;
-                        height: 12px;
-                        display: block;
-                    `}
-                    className={`${theme.prefix}__calendars__modal-close-icon`}
-                    viewBox="0 0 7 6"
-                >
-                    <path
-                        fill={theme.colors.black}
-                        d="M3.5 2.287L5.451.336c.163-.163.455-.135.651.062.197.196.225.488.062.65L4.213 3l1.951 1.951c.163.163.135.455-.062.651-.196.197-.488.225-.65.062L3.5 3.713 1.549 5.664c-.163.163-.455.135-.651-.062-.197-.196-.225-.488-.062-.65L2.787 3 .836 1.049C.673.886.7.594.898.398c.196-.197.488-.225.65-.062L3.5 2.287z"
-                    />
-                </svg>
-                <span className="visuallyhidden">{i18n.t("close")}</span>
-            </button>
             <div
@@ -145,3 +101,3 @@ css={css`
             >
-                {calendarsMarkup}
+                {profilesMarkup}
             </div>
@@ -148,0 +104,0 @@ </div>

src/js/components/AvailabilityRules/RemoveButton.js

@@ -17,2 +17,3 @@ import React, { useContext } from "react";
                 background: ${theme.colors.white};
+                padding: 0;
                 border-radius: 50%;
@@ -19,0 +20,0 @@ height: 16px;

src/js/components/AvailabilityRules/Slot.js

@@ -111,2 +111,3 @@ import React, { useContext } from "react";
                 `}
+                tabIndex="-1"
                 className={`${theme.prefix}__slot-button`}
@@ -113,0 +114,0 @@ onMouseDown={handleMouseDown}

src/js/helpers/connections.js

@@ -92,3 +92,3 @@ import * as mocks from "./mocks";
 export const parseRulesCalendars = response => {
-    const calendars = response["cronofy.data"].profiles.map(profile => {
+    const parsed = response["cronofy.data"].profiles.map(profile => {
         return profile.profile_calendars
@@ -103,3 +103,7 @@ .filter(cal => !cal.calendar_deleted)
     });
-    return calendars.reduce((acc, curr) => [...acc, ...curr], []);
+
+    return {
+        parsed: parsed.reduce((acc, curr) => [...acc, ...curr], []),
+        profiles: response["cronofy.data"].profiles
+    };
 };
@@ -106,0 +110,0 @@

src/js/helpers/mocks.js

@@ -177,2 +177,3 @@ import moment from "moment-timezone";
                 provider_name: "google",
+                provider_service: "google",
                 profile_id: "A_PROFILE_ID",
@@ -202,3 +203,4 @@ profile_name: "[e-mail]",
             {
-                provider_name: "office365",
+                provider_name: "exchange",
+                provider_service: "office365",
                 profile_id: "rahul_malviya_outlook",
@@ -229,2 +231,3 @@ profile_name: "[e-mail]",
                 provider_name: "live_connect",
+                provider_service: "live_connect",
                 profile_id: "ya_chin_ho_office365",
@@ -247,2 +250,3 @@ profile_name: "[e-mail]",
                 provider_name: "apple",
+                provider_service: "apple",
                 profile_id: "monica_ribeiro_itunes",
@@ -249,0 +253,0 @@ profile_name: "[e-mail]",

src/js/translations/en/core.json

 {
     "core": {
+        "apple": "Apple",
         "back": "Back",
         "close": "Close",
         "error": "Error",
+        "exhange": "Exchange",
         "global_error": "There was an error loading the element",
+        "google": "Google",
+        "gsuite": "Google",
+        "icloud": "Apple",
+        "live_connect": "Outlook.com",
         "loading": "Loading",
         "next": "Next",
+        "office365": "Office 365",
+        "outlook_com": "Outlook.com",
         "previous": "Previous",
@@ -10,0 +18,0 @@ "refreshing": "Refreshing",

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

2616275

increased by52.62%

Number of package files

232

increased by1.31%

Lines of code

24406

increased by11.25%

Worsened metrics

Number of medium supply chain risk alerts

48

increased by17.07%

No dependency changes