cronofy-elements - npm Package Compare versions

Comparing version 1.7.11 to 1.7.12

package.json

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

src/js/components/AvailabilityViewer/AvailabilityViewer.js

@@ -10,4 +10,3 @@ import React, { useState, useEffect } from "react";
     calculateSlotHeight,
-    parseInterval,
-    convertLocalToUTC
+    parseInterval
 } from "../../helpers/slots";
@@ -92,10 +91,4 @@ import { objectIsEmpty, uniqueItems } from "../../helpers/utils";
         duration: options.query ? options.query.required_duration.minutes : 60,
-        start: convertLocalToUTC(
-            options.config.start_time ? options.config.start_time : "09:00",
-            options.tzid
-        ),
-        end: convertLocalToUTC(
-            options.config.end_time ? options.config.end_time : "17:30",
-            options.tzid
-        ),
+        start: options.config.start_time ? options.config.start_time : "09:00",
+        end: options.config.end_time ? options.config.end_time : "17:30",
         interval: parseInterval(options.config.interval)
@@ -127,3 +120,4 @@ });
                 startTime: limits.start,
-                endTime: limits.end
+                endTime: limits.end,
+                tzid: status.tzid
             });
@@ -130,0 +124,0 @@ if (croppedQuery.available_periods.length > 0) {

src/js/components/AvailabilityViewer/LabelColumn.js

@@ -24,2 +24,7 @@ import React, { useContext, useState } from "react";
         let labelText = null;
+
+        const localStart = moment
+            .utc(label.start, "YYYY-MM-DDTHH:mm:00Z")
+            .tz(status.tzid);
+
         if (label.hour) {
@@ -49,6 +54,3 @@ labelText = (
                 >
-                    {moment(label.start, "YYYY-MM-DDTHH:mm:00Z")
-                        .tz(status.tzid)
-                        .format("LT")
-                        .replace(" ", "")}
+                    {localStart.format("LT").replace(" ", "")}
                 </span>
@@ -55,0 +57,0 @@ );

src/js/components/AvailabilityViewer/TimeSelector.js

@@ -11,3 +11,2 @@ import React, { useContext } from "react";
 } from "./AvailabilityViewer";
-import { convertLocalToUTC, convertUTCToLocal } from "../../helpers/slots";
 
@@ -53,3 +52,3 @@ import { buttonReset } from "../../styles/utils";
             ...limits,
-            start: convertLocalToUTC(e.target.value, status.tzid)
+            start: e.target.value
         });
@@ -62,3 +61,3 @@ done();
             ...limits,
-            end: convertLocalToUTC(e.target.value, status.tzid)
+            end: e.target.value
         });
@@ -70,3 +69,3 @@ done();
         .filter(time => {
-            const localEnd = convertUTCToLocal(limits.end, status.tzid);
+            const localEnd = limits.end;
             const end = localEnd === "00:00" ? "24:00" : localEnd;
@@ -88,3 +87,3 @@ return parseInt(time, 10) < parseInt(end, 10);
         .filter(time => {
-            const localStart = convertUTCToLocal(limits.start, status.tzid);
+            const localStart = limits.start;
             const start = localStart === "00:00" ? "00:01" : localStart;
@@ -210,3 +209,3 @@ return parseInt(time, 10) > parseInt(start, 10);
                         onChange={e => handleStartChange(e)}
-                        value={convertUTCToLocal(limits.start, status.tzid)}
+                        value={limits.start}
                         className={`${theme.prefix}__time-select__select`}
@@ -276,8 +275,3 @@ >
                         onChange={e => handleEndChange(e)}
-                        value={
-                            convertUTCToLocal(limits.end, status.tzid) ===
-                            "00:00"
-                                ? "24:00"
-                                : convertUTCToLocal(limits.end, status.tzid)
-                        }
+                        value={limits.end === "00:00" ? "24:00" : limits.end}
                         className={`${theme.prefix}__time-select__select`}
@@ -284,0 +278,0 @@ >

src/js/components/AvailabilityViewer/WeekWrapper.js

@@ -14,3 +14,4 @@ import React, { useContext, useEffect, useState } from "react";
     LimitsContext,
-    SlotsContext
+    SlotsContext,
+    StatusContext
 } from "./AvailabilityViewer";
@@ -22,9 +23,12 @@
     const [theme, setTheme] = useContext(ThemeContext);
+    const [status, setStatus] = useContext(StatusContext);
     const slots = useContext(SlotsContext);
     const [limits, setLimits] = useContext(LimitsContext);
 
-    const [labels, setLabels] = useState(timeLabels(limits, slots[0].day));
+    const [labels, setLabels] = useState(
+        timeLabels(limits, slots[1].day, status.tzid)
+    );
 
     useEffect(() => {
-        setLabels(timeLabels(limits, slots[0].day));
+        setLabels(timeLabels(limits, slots[1].day, status.tzid));
     }, [slots, limits]);
@@ -31,0 +35,0 @@ return (

src/js/helpers/slots.js

@@ -146,16 +146,36 @@ const moment = require("moment-timezone");
 
-export const createEmptySlotsForPeriod = (period, duration, acc = []) => {
-    // Make sure the period starts on a round value (according to the duration)
-    const roundedPeriod = roundPeriod(period, duration);
-
+export const createEmptySlotsForPeriod = (
+    period,
+    duration,
+    tzid = false,
+    acc = []
+) => {
     // Work out the slot end (by adding the duration to the rounded period's start)
     const slotEnd = moment.utc(
         moment
-            .utc(roundedPeriod.start, "YYYY-MM-DDTHH:mm:00Z")
+            .utc(period.start, "YYYY-MM-DDTHH:mm:00Z")
             .add(duration, "minutes")
     );
 
+    let duringDSTChangeover = false;
+    // If we have a timezone to work with, check if we're inside a DST changeover.
+    if (tzid) {
+        // Get the local time.
+        const localStart = moment(period.start, "YYYY-MM-DDTHH:mm:00Z")
+            .clone()
+            .tz(tzid);
+        // Get the time an hour after the local start time.
+        const localStartPlusHour = localStart
+            .clone()
+            .add(60, "minutes")
+            .tz(tzid);
+
+        // If the two *local* times are the same, then we're in the middle of a DST change.
+        duringDSTChangeover =
+            localStart.format("HH:mm") === localStartPlusHour.format("HH:mm");
+    }
+
     // Check the difference between the slot end and the period end
     const endDiff = slotEnd.diff(
-        moment.utc(roundedPeriod.end, "YYYY-MM-DDTHH:mm:00Z"),
+        moment.utc(period.end, "YYYY-MM-DDTHH:mm:00Z"),
         "minutes"
@@ -175,8 +195,9 @@ );
         start: slotEnd.format("YYYY-MM-DDTHH:mm[:00Z]"),
-        end: roundedPeriod.end
+        end: period.end
     };
+
     const accumulatedSlots = [
         ...acc,
         {
-            start: roundedPeriod.start,
+            start: period.start,
             end: slotEnd.format("YYYY-MM-DDTHH:mm[:00Z]")
@@ -188,3 +209,13 @@ }
     // finish *after* the period has ended).
-    return createEmptySlotsForPeriod(updatedPeriod, duration, accumulatedSlots);
+    if (!duringDSTChangeover) {
+        return createEmptySlotsForPeriod(
+            updatedPeriod,
+            duration,
+            tzid,
+            accumulatedSlots
+        );
+    }
+
+    // But if we're inside a DST-changeover, then we recur *without* adding to the slots.
+    return createEmptySlotsForPeriod(updatedPeriod, duration, tzid, acc);
 };
@@ -229,7 +260,8 @@
 
-export const timeLabels = (limits, day) => {
+export const timeLabels = (limits, day, tzid) => {
     // If the endTime is an early hour than the startTime, that means
     // the period overflows a day boundary.
+
     const isEndBeforeStart =
-        parseInt(limits.start, 10) > parseInt(limits.end, 10);
+        parseInt(limits.start, 10) >= parseInt(limits.end, 10);
 
@@ -240,3 +272,4 @@ // If the end does overflow a day boundary, we need to increment the
         isEndBeforeStart || limits.start === limits.end
-            ? moment(day, "YYYY-MM-DD")
+            ? moment
+                  .tz(day, "YYYY-MM-DD", tzid)
                   .add(1, "days")
@@ -247,8 +280,10 @@ .format("YYYY-MM-DD")
     const timeLabelPeriod = {
-        start: moment(`${day}T${limits.start}`, "YYYY-MM-DDTHH:mm").format(
-            `YYYY-MM-DDTHH:mm[:00]`
-        ),
-        end: moment(`${endDay}T${limits.end}`, "YYYY-MM-DDTHH:mm").format(
-            `YYYY-MM-DDTHH:mm[:00]`
-        )
+        start: moment
+            .tz(`${day}T${limits.start}`, "YYYY-MM-DDTHH:mm", tzid)
+            .utc()
+            .format(`YYYY-MM-DDTHH:mm[:00]`),
+        end: moment
+            .tz(`${endDay}T${limits.end}`, "YYYY-MM-DDTHH:mm", tzid)
+            .utc()
+            .format(`YYYY-MM-DDTHH:mm[:00]`)
     };
@@ -255,0 +290,0 @@ const slots = createEmptySlotsForPeriod(timeLabelPeriod, limits.interval);

src/js/helpers/slots.rules.js

 import moment from "moment";
 
-import { createEmptySlotsForPeriod } from "./slots";
+import { createEmptySlotsForPeriod, roundPeriod } from "./slots";
 import { buildSlotID, arrayOfDaySlots } from "./utils.AvailabilityRules";
@@ -34,3 +34,6 @@
 
-    const daySlots = getEmpties(period, limits.duration);
+    // Make sure the period starts on a round value (according to the duration)
+    const roundedPeriod = roundPeriod(period, limits.duration);
+
+    const daySlots = getEmpties(roundedPeriod, limits.duration);
     const slotTimes = daySlots.map(slot => ({
@@ -37,0 +40,0 @@ start: moment(slot.start, "YYYY-MM-DDTHH:mm").format(`HH:mm`),

src/js/helpers/utils.AvailabilityViewer.js

 import moment from "moment-timezone";
-import { createEmptySlotsForPeriod, convertUTCToLocal } from "./slots";
+import { createEmptySlotsForPeriod, roundPeriod } from "./slots";
 import { objectToArray } from "./utils";
@@ -58,4 +58,4 @@
 export const buildDayPeriod = (startTime, endTime, day, tzid) => {
-    const localStart = `${day}T${convertUTCToLocal(startTime, tzid)}`;
-    const localEnd = `${day}T${convertUTCToLocal(endTime, tzid)}`;
+    const localStart = `${day}T${startTime}`;
+    const localEnd = `${day}T${endTime}`;
     const UTCStart = moment.tz(localStart, "YYYY-MM-DDTHH:mm", tzid).utc();
@@ -269,5 +269,9 @@ const UTCEnd = moment.tz(localEnd, "YYYY-MM-DDTHH:mm", tzid).utc();
         const dayPeriod = buildPeriod(limits.start, limits.end, day, tzid);
+
+        // Make sure the period starts on a round value (according to the duration)
+        const roundedPeriod = roundPeriod(dayPeriod, limits.duration);
+
         acc.push({
             day: day,
-            slots: getEmpties(dayPeriod, limits.interval)
+            slots: getEmpties(roundedPeriod, limits.interval, tzid)
         });
@@ -373,3 +377,9 @@ return acc;
     const endsBefore = testPeriod.end.diff(wrapper.start, "hours");
-    // console.log(`${testPeriod.end.format("(DD) HH:mm")} is ${endsBefore} hours after ${wrapper.start.format("(DD) HH:mm")}`);
+    // console.log(
+    //     `${testPeriod.end.format(
+    //         "(DD) HH:mm"
+    //     )} [end] is ${endsBefore} hours after ${wrapper.start.format(
+    //         "(DD) HH:mm"
+    //     )} [start]`
+    // );
     if (endsBefore <= 0) return false;
@@ -379,3 +389,9 @@
     const startsAfter = testPeriod.start.diff(wrapper.end, "hours");
-    // console.log(`${testPeriod.start.format("(DD) HH:mm")} is ${startsAfter} hours after ${wrapper.end.format("(DD) HH:mm")}`);
+    // console.log(
+    //     `${testPeriod.start.format(
+    //         "(DD) HH:mm"
+    //     )} [start] is ${startsAfter} hours after ${wrapper.end.format(
+    //         "(DD) HH:mm"
+    //     )} [end]`
+    // );
     if (startsAfter >= 0) return false;
@@ -403,12 +419,13 @@
     const bounds = days.map(day => {
-        const startTime = moment.utc(
-            `${day}T${extent.startTime}:00Z`,
-            "YYYY-MM-DDTHH:mm:00Z"
-        );
+        const localStart = extent.startTime;
+        const localEnd = extent.endTime;
 
-        const endTimeRaw = moment.utc(
-            `${day}T${extent.endTime}:00Z`,
-            "YYYY-MM-DDTHH:mm:00Z"
-        );
+        const startTime = moment
+            .tz(`${day}T${localStart}`, "YYYY-MM-DDTHH:mm", extent.tzid)
+            .utc();
 
+        const endTimeRaw = moment
+            .tz(`${day}T${localEnd}`, "YYYY-MM-DDTHH:mm", extent.tzid)
+            .utc();
+
         // If the endTime is an earlier hour than the startTime, that means
@@ -415,0 +432,0 @@ // the period overflows a day boundary.

tests/utils.AvailabilityViewer.test.js

@@ -583,13 +583,2 @@ import * as utils from "../src/js/helpers/utils.AvailabilityViewer";
     });
-    it("builds a day period that overlaps midnight", () => {
-        moment.tz.setDefault("America/Vancouver");
-        const input = ["15:00", "01:00", "2020-03-20", "America/Vancouver"];
-        const out = {
-            start: "2020-03-20T15:00:00Z",
-            end: "2020-03-21T01:00:00Z"
-        };
-        expect(moment().utcOffset()).toEqual(-420);
-        expect(utils.buildDayPeriod(...input)).toEqual(out);
-        moment.tz.setDefault("Etc/UTC");
-    });
 
@@ -596,0 +585,0 @@ // getMinMaxDates

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

2437061

increased by0.01%

Lines of code

20601

increased by0.14%

No dependency changes