cronofy-elements - npm Package Compare versions

Comparing version 1.9.4 to 1.10.0

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.9.4",
+    "version": "1.10.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

@@ -59,6 +59,7 @@ import React, { useState, useEffect } from "react";
         tzid: options.tzid,
-        ruleSaved: options.callback ? options.callback : cb => {}
+        ruleSaved: options.callback ? options.callback : cb => {},
+        startDay: options.config.startDay
     });
     const [extras, setExtras] = useState(parseExtras(options));
-    const rawSlots = generateEmptyRulesSlots(extras.limits);
+    const rawSlots = generateEmptyRulesSlots(extras.limits, status.startDay);
     const [slots, setSlots] = useState(rawSlots);
@@ -83,3 +84,6 @@ const slotsValue = React.useMemo(() => {
     useEffect(() => {
-        const newSlots = generateEmptyRulesSlots(extras.limits);
+        const newSlots = generateEmptyRulesSlots(
+            extras.limits,
+            status.startDay
+        );
         setStaticSlots(buildStaticSlots(newSlots, extras.limits.slotsPerDay));
@@ -86,0 +90,0 @@

src/js/components/AvailabilityRules/DayLabels.js

@@ -5,4 +5,11 @@ import React, { useContext } from "react";
 
-import { ExtrasContext, I18nContext, ThemeContext } from "./AvailabilityRules";
+import { getWeekDays } from "../../helpers/slots.rules";
 
+import {
+    StatusContext,
+    ExtrasContext,
+    I18nContext,
+    ThemeContext
+} from "./AvailabilityRules";
+
 const dayLookup = {
@@ -42,11 +49,4 @@ sunday: "2020-03-01",
 const DayLabels = () => {
-    const days = [
-        "sunday",
-        "monday",
-        "tuesday",
-        "wednesday",
-        "thursday",
-        "friday",
-        "saturday"
-    ];
+    const [status, setStatus] = useContext(StatusContext);
+    const days = getWeekDays(status.startDay);
     const [extras, setExtras] = useContext(ExtrasContext);
@@ -53,0 +53,0 @@ const [theme, setTheme] = useContext(ThemeContext);

src/js/components/AvailabilityViewer/AvailabilityViewer.js

@@ -84,3 +84,4 @@ import React, { useState, useEffect } from "react";
         tzid: options.tzid,
-        weeksLoaded: []
+        weeksLoaded: [],
+        startDay: options.config.startDay
     });
@@ -90,5 +91,8 @@
 
-    const [weeks, setWeeks] = useState(
-        generateStaticWeeks(options.query.available_periods)
-    );
+    const [weeks, setWeeks] = useState({
+        set: false,
+        current: 1,
+        days: [],
+        total: 0
+    });
 
@@ -113,2 +117,12 @@ const [slotData, setSlotData] = useState(generateDummySlots());
     useEffect(() => {
+        setWeeks(
+            generateStaticWeeks(
+                options.query.available_periods,
+                options.config.startDay
+            )
+        );
+    }, []);
+
+    useEffect(() => {
+        if (!weeks.set) return;
         triggerSlotsForWeek();
@@ -115,0 +129,0 @@

src/js/helpers/init.AvailabilityRules.js

@@ -13,3 +13,28 @@ import {
     const log = logConstructor(logs, "Availability Rules");
+    const startDay =
+        typeof config.week_start_day === "undefined"
+            ? "sunday"
+            : config.week_start_day;
 
+    const validStartDays = [
+        "sunday",
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday"
+    ];
+    const validStartDay = validStartDays.includes(startDay);
+
+    if (!validStartDay) {
+        log.error(
+            `Please provide a valid \`config.week_start_day\`. \`${startDay}\` is not a supported value.`,
+            {
+                docsSlug: "availability-viewer/#config.week_start_day"
+            }
+        );
+        return false;
+    }
+
     options.error = false;
@@ -60,2 +85,3 @@ const demoMode = typeof options.demo === "undefined" ? false : options.demo;
     delete options.translations;
+    delete config.week_start_day;
 
@@ -67,5 +93,5 @@ return {
         domains,
-        config: { ...config, logs },
+        config: { ...config, logs, startDay },
         translations
     };
 };

src/js/helpers/init.AvailabilityViewer.js

@@ -70,4 +70,31 @@ import moment from "moment-timezone";
 
-    config = { ...config, mode, boundsControl, slot_selection, logs };
+    const startDay =
+        typeof config.week_start_day === "undefined" ||
+        config.week_start_day === "default"
+            ? "sunday"
+            : config.week_start_day;
 
+    const validStartDays = [
+        "sunday",
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday"
+    ];
+    const validStartDay = validStartDays.includes(startDay);
+
+    if (!validStartDay) {
+        log.error(
+            `Please provide a valid \`config.week_start_day\`. \`${startDay}\` is not a supported value.`,
+            {
+                docsSlug: "availability-viewer/#config.week_start_day"
+            }
+        );
+        return false;
+    }
+
+    config = { ...config, startDay, mode, boundsControl, slot_selection, logs };
+
     const domains = parseConnectionDomains(
@@ -102,2 +129,3 @@ options.data_center,
     delete config.bounds_control;
+    delete config.week_start_day;
     delete config.translations;
@@ -104,0 +132,0 @@

src/js/helpers/slots.rules.js

@@ -6,15 +6,22 @@ import moment from "moment-timezone";
 
+export const getWeekDays = (startDay = "sunday") => {
+    const dayOrders = {
+        sunday: [0, 1, 2, 3, 4, 5, 6],
+        monday: [1, 2, 3, 4, 5, 6, 0],
+        tuesday: [2, 3, 4, 5, 6, 0, 1],
+        wednesday: [3, 4, 5, 6, 0, 1, 2],
+        thursday: [4, 5, 6, 0, 1, 2, 3],
+        friday: [5, 6, 0, 1, 2, 3, 4],
+        saturday: [6, 0, 1, 2, 3, 4, 5]
+    };
+    const dayNames = Object.keys(dayOrders);
+    return dayOrders[startDay].map(day => dayNames[day]);
+};
+
 export const generateEmptyRulesSlots = (
     limits,
+    startDay = "sunday",
     getEmpties = createEmptySlotsForPeriod
 ) => {
-    const days = [
-        "sunday",
-        "monday",
-        "tuesday",
-        "wednesday",
-        "thursday",
-        "friday",
-        "saturday"
-    ];
+    const days = getWeekDays(startDay);
     const slots = {};
@@ -21,0 +28,0 @@

src/js/helpers/utils.AvailabilityViewer.js

@@ -97,6 +97,21 @@ import moment from "moment-timezone";
 
-export const getAllDays = (startDate, endDate) => {
+export const getDayOffset = day => {
+    const offsets = {
+        sunday: 0,
+        monday: 1,
+        tuesday: 2,
+        wednesday: 3,
+        thursday: 4,
+        friday: 5,
+        saturday: 6
+    };
+    return offsets[day];
+};
+
+export const getAllWeekDays = (startDate, endDate, startDay = "sunday") => {
     const start = moment.utc(startDate, "YYYY-MM-DD");
     const end = moment.utc(endDate, "YYYY-MM-DD");
 
+    const dayOffset = getDayOffset(startDay);
+
     // NB: `startOf("week")` changes with locale setting - some times it uses
@@ -109,10 +124,13 @@ // Monday as the first day of the week, and sometimes it uses Sunday. "week"
     // the closest preceding *Sunday*.
-    const startOfFirstWeek = start
+    let startOfFirstWeek = start
         .add(1, "days")
         .startOf("isoWeek")
-        .subtract(1, "days");
-    const startOfLastWeek = end
+        .subtract(1, "days")
+        .add(dayOffset, "days"); // account for custom startday
+
+    let startOfLastWeek = end
         .add(1, "days")
         .startOf("isoWeek")
-        .subtract(1, "days");
+        .subtract(1, "days")
+        .add(dayOffset, "days"); // account for custom startday
 
@@ -134,2 +152,3 @@ const weekDiff = startOfLastWeek.diff(startOfFirstWeek, "weeks");
     return {
+        set: true,
         current: 1,
@@ -359,6 +378,6 @@ days: weekdays,
 
-export const generateStaticWeeks = queryPeriods => {
+export const generateStaticWeeks = (queryPeriods, startDay) => {
     const periodsWithKeys = addKeysToSlots(queryPeriods);
     const minMax = getMinMaxDates(periodsWithKeys);
-    const weekdays = getAllDays(minMax.min, minMax.max);
+    const weekdays = getAllWeekDays(minMax.min, minMax.max, startDay);
 
@@ -365,0 +384,0 @@ const weeks = getWeeksInfo(weekdays);

tests/init.test.js

@@ -228,3 +228,4 @@ import moment from "moment-timezone";
                 start_time: "01:00",
-                end_time: "02:00"
+                end_time: "02:00",
+                week_start_day: "monday"
             },
@@ -243,3 +244,4 @@ data_center: "DATA_CENTER",
                 start_time: "01:00",
-                end_time: "02:00"
+                end_time: "02:00",
+                startDay: "monday"
             },
@@ -587,2 +589,6 @@ customtzid: true,
         const input = {
+            config: {
+                logs: "info",
+                week_start_day: "monday"
+            },
             data_center: "de",
@@ -596,3 +602,3 @@ target_id: "TARGET",
             availability_rule_id: "RULE_ID",
-            config: { logs: "warn" },
+            config: { logs: "info", startDay: "monday" },
             data_center: "de",
@@ -599,0 +605,0 @@ domains: {

tests/utils.AvailabilityViewer.test.js

@@ -100,3 +100,3 @@ import * as utils from "../src/js/helpers/utils.AvailabilityViewer";
 
-    // getAllDays
+    // getAllWeekDays
     it("gets all the week days for a given period", () => {
@@ -116,4 +116,21 @@ const input = [
         ];
-        expect(utils.getAllDays(...input)).toEqual(out);
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
     });
+    it("gets all the week days for a given period with a specific start day", () => {
+        const input = [
+            "2019-04-02", // Tue
+            "2019-04-04", // Thu
+            "wednesday"
+        ];
+        const out = [
+            "2019-04-03", // Wed
+            "2019-04-04", // Thu
+            "2019-04-05", // Fri
+            "2019-04-06", // Sat
+            "2019-04-07", // Sun
+            "2019-04-08", // Mon
+            "2019-04-09" // Tue
+        ];
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
+    });
     it("gets all the week days for a given period that spans two weeks", () => {
@@ -140,4 +157,28 @@ const input = [
         ];
-        expect(utils.getAllDays(...input)).toEqual(out);
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
     });
+    it("gets all the week days for a given period that spans two weeks with a specific start day", () => {
+        const input = [
+            "2019-04-02", // Tue 1
+            "2019-04-10", // Wed 2
+            "wednesday"
+        ];
+        const out = [
+            "2019-04-03", // Wed
+            "2019-04-04", // Thu
+            "2019-04-05", // Fri
+            "2019-04-06", // Sat
+            "2019-04-07", // Sun
+            "2019-04-08", // Mon
+            "2019-04-09", // Tue
+            "2019-04-10", // Wed 2
+            "2019-04-11", // Thu 2
+            "2019-04-12", // Fri 2
+            "2019-04-13", // Sat 2
+            "2019-04-14", // Sun 2
+            "2019-04-15", // Mon 2
+            "2019-04-16" // Tue 2
+        ];
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
+    });
     it("gets all the week days for a given period that spans three weeks", () => {
@@ -171,4 +212,35 @@ const input = [
         ];
-        expect(utils.getAllDays(...input)).toEqual(out);
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
     });
+    it("gets all the week days for a given period that spans three weeks with a specific start day", () => {
+        const input = [
+            "2019-04-02", // Tue 1
+            "2019-04-16", // Tue 3
+            "wednesday"
+        ];
+        const out = [
+            "2019-04-03", // Wed
+            "2019-04-04", // Thu
+            "2019-04-05", // Fri
+            "2019-04-06", // Sat
+            "2019-04-07", // Sun
+            "2019-04-08", // Mon
+            "2019-04-09", // Tue
+            "2019-04-10", // Wed 2
+            "2019-04-11", // Thu 2
+            "2019-04-12", // Fri 2
+            "2019-04-13", // Sat 2
+            "2019-04-14", // Sun 2
+            "2019-04-15", // Mon 2
+            "2019-04-16", // Tue 2
+            "2019-04-17", // Wed 3
+            "2019-04-18", // Thu 3
+            "2019-04-19", // Fri 3
+            "2019-04-20", // Sat 3
+            "2019-04-21", // Sun 3
+            "2019-04-22", // Mon 3
+            "2019-04-23" // Tue 3
+        ];
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
+    });
     it("gets all the week days for a given period that starts on a Sunday", () => {
@@ -188,3 +260,3 @@ const input = [
         ];
-        expect(utils.getAllDays(...input)).toEqual(out);
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
     });
@@ -212,4 +284,21 @@ it("gets all the week days for a given period that starts on a Saturday", () => {
         ];
-        expect(utils.getAllDays(...input)).toEqual(out);
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
     });
+    it("gets all the week days for a given period that starts on the same day as provided as a week_start_day", () => {
+        const input = [
+            "2020-06-09", // Tue
+            "2020-06-12", // Fri
+            "tuesday"
+        ];
+        const out = [
+            "2020-06-09", // Tue
+            "2020-06-10", // Wed
+            "2020-06-11", // Thu
+            "2020-06-12", // Fri
+            "2020-06-13", // Sat
+            "2020-06-14", // Sun
+            "2020-06-15" // Mon
+        ];
+        expect(utils.getAllWeekDays(...input)).toEqual(out);
+    });
 
@@ -459,2 +548,3 @@ // cropQuery
             ],
+            set: true,
             total: 1
@@ -496,2 +586,3 @@ };
             ],
+            set: true,
             total: 3
@@ -519,2 +610,3 @@ };
             ],
+            set: true,
             total: 1
@@ -526,3 +618,3 @@ };
 
-    // getAllDays
+    // getAllWeekDays
     it("gets all days between 2 dates", () => {
@@ -538,3 +630,3 @@ const out = [
         ];
-        expect(utils.getAllDays("2020-03-01", "2020-03-05")).toEqual(out);
+        expect(utils.getAllWeekDays("2020-03-01", "2020-03-05")).toEqual(out);
     });
@@ -564,2 +656,3 @@
             ],
+            set: true,
             total: 1
@@ -566,0 +659,0 @@ };

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

2472761

increased by0.52%

Number of package files

232

increased by0.43%

Lines of code

21760

increased by1.37%

No dependency changes