Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cronofy-elements

Package Overview
Dependencies
Maintainers
3
Versions
172
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cronofy-elements - npm Package Compare versions

Comparing version 1.17.3 to 1.17.4

build/CronofyElements.v1.17.4.js

2

package.json
{
"name": "cronofy-elements",
"version": "1.17.3",
"version": "1.17.4",
"description": "Fast track scheduling with Cronofy's embeddable UI Elements",

@@ -5,0 +5,0 @@ "main": "build/npm/CronofyElements.js",

@@ -8,3 +8,3 @@ import React, { useState, useEffect } from "react";

generateDummySlots,
getSlotsForWeek,
getSlotsForPage,
calculateSlotHeight

@@ -17,4 +17,4 @@ } from "../../helpers/slots";

cropQuery,
generateWeeklySlots,
generateStaticWeeks
generatePageSlots,
generateStaticPages
} from "../../helpers/utils.AvailabilityViewer";

@@ -34,6 +34,6 @@ import { parseStyleOptions } from "../../helpers/theming";

export const MasterSlotsContext = React.createContext();
export const PagesContext = React.createContext();
export const SlotsContext = React.createContext();
export const StatusContext = React.createContext();
export const ThemeContext = React.createContext();
export const WeeksContext = React.createContext();

@@ -90,3 +90,3 @@ const AvailabilityViewer = ({ options, error }) => {

tzid: options.tzid,
weeksLoaded: [],
pagesLoaded: [],
startDay: options.config.startDay

@@ -97,3 +97,3 @@ });

const [weeks, setWeeks] = useState({
const [pages, setPages] = useState({
set: false,

@@ -106,4 +106,4 @@ current: 1,

const [slotData, setSlotData] = useState(generateDummySlots());
const [slotsForWeek, setSlotsForWeek] = useState(
getSlotsForWeek(slotData, weeks.current)
const [slotsForPage, setSlotsForPage] = useState(
getSlotsForPage(slotData, pages.current)
);

@@ -118,5 +118,5 @@

const triggerSlotsForWeek = () => {
const slots = getSlotsForWeek(slotData, weeks.current);
setSlotsForWeek(slots);
const triggerSlotsForPage = () => {
const slots = getSlotsForPage(slotData, pages.current);
setSlotsForPage(slots);
};

@@ -127,3 +127,3 @@

// differently depending on the scenario (checking visible period and updating
// the grid, vs. checking all weeks to test if *anything* is available).
// the grid, vs. checking all pages to test if *anything* is available).
const handleGetAvailability = ({ query, callback }) => {

@@ -181,3 +181,3 @@ connections

// There isn't any availability for the selected
// week. Check if *anything* is available...
// page. Check if *anything* is available...
checkAllAvailability(options.query);

@@ -194,3 +194,3 @@ }

const weeksLoaded = uniqueItems([...status.weeksLoaded, weeks.current]);
const pagesLoaded = uniqueItems([...status.pagesLoaded, pages.current]);

@@ -202,3 +202,3 @@ setStatus({

preloading: false,
weeksLoaded
pagesLoaded
});

@@ -211,3 +211,3 @@ };

// There is no availability for any of the
// weeks shown in the viewer.
// pages shown in the viewer.
notification = {

@@ -220,5 +220,5 @@ notification: {

} else {
// There is no availability for the week that
// There is no availability for the page that
// is currently visible, but there is at least
// one free slot in one of the offscreen weeks.
// one free slot in one of the offscreen pages.
notification = {

@@ -241,4 +241,4 @@ notification: {

{
currentWeek: weeks.current,
days: weeks.days,
currentPage: pages.current,
days: pages.days,
startTime: limits.start,

@@ -248,3 +248,3 @@ endTime: limits.end,

},
true // this is where we ignore week divisions
true // this is where we ignore page divisions
);

@@ -258,6 +258,7 @@ handleGetAvailability({

useEffect(() => {
setWeeks(
generateStaticWeeks(
setPages(
generateStaticPages(
options.query.query_periods,
options.config.startDay
options.config.startDay,
status.tzid
)

@@ -268,4 +269,4 @@ );

useEffect(() => {
if (!weeks.set) return;
triggerSlotsForWeek();
if (!pages.set) return;
triggerSlotsForPage();

@@ -280,4 +281,4 @@ if (!error) {

const croppedQuery = cropQuery(query, {
currentWeek: weeks.current,
days: weeks.days,
currentPage: pages.current,
days: pages.days,
startTime: limits.start,

@@ -289,3 +290,3 @@ endTime: limits.end,

// Happy Path.
// Check the visible week's availability, and pass
// Check the visible page's availability, and pass
// the result into `handleNormalAvailability()`

@@ -319,6 +320,6 @@ handleGetAvailability({

}
}, [limits, weeks]);
}, [limits, pages]);
useEffect(() => {
triggerSlotsForWeek();
triggerSlotsForPage();
}, [slotData]);

@@ -341,6 +342,6 @@

if (rawData) {
const slots = generateWeeklySlots({
const slots = generatePageSlots({
availablePeriods: rawData,
limits,
weeks,
pages,
tzid: status.tzid,

@@ -367,3 +368,3 @@ unrestricted: status.slotSelection === "unrestricted"

>
<SlotsContext.Provider value={slotsForWeek}>
<SlotsContext.Provider value={slotsForPage}>
<LimitsContext.Provider

@@ -383,7 +384,7 @@ value={[limits, setLimits]}

<WeekWrapper />
<WeeksContext.Provider
value={[weeks, setWeeks]}
<PagesContext.Provider
value={[pages, setPages]}
>
<Footer />
</WeeksContext.Provider>
</PagesContext.Provider>
</Container>

@@ -390,0 +391,0 @@ </LimitsContext.Provider>

@@ -9,5 +9,5 @@ import React, { useContext } from "react";

I18nContext,
PagesContext,
StatusContext,
ThemeContext,
WeeksContext
ThemeContext
} from "./AvailabilityViewer";

@@ -17,28 +17,28 @@

const log = useContext(LoggingContext);
const i18n = useContext(I18nContext);
const [pages, setPages] = useContext(PagesContext);
const [status, setStatus] = useContext(StatusContext);
const [theme, setTheme] = useContext(ThemeContext);
const [status, setStatus] = useContext(StatusContext);
const i18n = useContext(I18nContext);
const [weeks, setWeeks] = useContext(WeeksContext);
const navigateWeek = nextPrev => {
const navigatePage = nextPrev => {
if (typeof nextPrev !== "number") {
log.warn("navigateWeek called without a number");
log.warn("navigatePage called without a number");
}
let newWeeks = { ...weeks };
let newPages = { ...pages };
// Calculate new week
let newWeek = newWeeks.current + nextPrev;
// Calculate new page
let newPage = newPages.current + nextPrev;
if (nextPrev > 0) {
newWeek = newWeek > newWeeks.total ? newWeeks.total : newWeek;
newPage = newPage > newPages.total ? newPages.total : newPage;
}
if (nextPrev < 0) {
newWeek = newWeek <= 1 ? 1 : newWeek;
newPage = newPage <= 1 ? 1 : newPage;
}
newWeeks.current = newWeek;
newPages.current = newPage;
const dataIsPreloaded = status.weeksLoaded.includes(newWeek);
const dataIsPreloaded = status.pagesLoaded.includes(newPage);

@@ -51,3 +51,3 @@ setStatus({

});
setWeeks({ ...newWeeks });
setPages({ ...newPages });
};

@@ -92,7 +92,7 @@

${navButton};
${weeks.current <= 1 ? disabledButton : ""}
${pages.current <= 1 ? disabledButton : ""}
`;
const buttonTwoStyles = css`
${navButton};
${weeks.current >= weeks.total ? disabledButton : ""}
${pages.current >= pages.total ? disabledButton : ""}
`;

@@ -102,3 +102,3 @@

<React.Fragment>
{weeks.total > 0 ? (
{pages.total > 0 ? (
<div

@@ -113,5 +113,5 @@ className={`${theme.prefix}__navigation`}

type="button"
onClick={() => navigateWeek(-1)}
onClick={() => navigatePage(-1)}
css={buttonOneStyles}
disabled={weeks.current <= 1 ? true : false}
disabled={pages.current <= 1 ? true : false}
className={`${theme.prefix}__button ${theme.prefix}__button--prev`}

@@ -127,3 +127,3 @@ >

transform-origin: 50% 50%;
${weeks.current <= 1 ? disabledIcon : ""}
${pages.current <= 1 ? disabledIcon : ""}
`}

@@ -137,6 +137,6 @@ className={`${theme.prefix}__icon ${theme.prefix}__icon--prev`}

type="button"
onClick={() => navigateWeek(1)}
onClick={() => navigatePage(1)}
css={buttonTwoStyles}
className={`${theme.prefix}__button ${theme.prefix}__button--next`}
disabled={weeks.current >= weeks.total ? true : false}
disabled={pages.current >= pages.total ? true : false}
>

@@ -149,3 +149,3 @@ <span className={"visuallyhidden"}>

${icon};
${weeks.current >= weeks.total
${pages.current >= pages.total
? disabledIcon

@@ -152,0 +152,0 @@ : ""}

@@ -81,4 +81,3 @@ import moment from "moment-timezone";

const now = moment.utc().endOf("hour");
// Adding 34 days minus 1 hour to ensure that the resulting
// query stays within the requiered bounds defined in
// Adding 34 days to ensure that the resulting query stays within the requiered bounds defined in
// https://docs.cronofy.com/developers/api/scheduling/availability/#param-participants.members.available_periods.end

@@ -90,4 +89,6 @@ query.query_periods = [

.clone()
.add(35, "days")
.subtract(1, "hours")
.local()
.add(34, "days")
.endOf("day")
.utc()
.format("YYYY-MM-DDTHH:mm[:00Z]")

@@ -94,0 +95,0 @@ }

@@ -301,8 +301,8 @@ const moment = require("moment-timezone");

export const getSlotsForWeek = (slots = [], week = 1) => {
if (slots.length < 7 * week) {
export const getSlotsForPage = (slots = [], page = 1) => {
if (slots.length < 7 * page) {
return slots;
}
const start = (week - 1) * 7;
const start = (page - 1) * 7;
const end = start + 7;

@@ -309,0 +309,0 @@

@@ -94,4 +94,4 @@ import moment from "moment-timezone";

export const getDayOffset = day => {
const offsets = {
export const getDayOffset = (day, target = "sunday") => {
const dayNumbers = {
sunday: 0,

@@ -105,41 +105,48 @@ monday: 1,

};
return offsets[day];
const diff = dayNumbers[day] - dayNumbers[target];
const adjustedDiff = diff < 0 ? diff + 7 : diff;
return adjustedDiff;
};
export const getAllWeekDays = (startDate, endDate, startDay = "sunday") => {
const start = moment.utc(startDate, "YYYY-MM-DD");
const end = moment.utc(endDate, "YYYY-MM-DD");
export const getStartDate = (dateObject, targetDayName) => {
// Belt and braces: we *need* this value to be a lowercase day-name in English
// regardless of whatever locale or format moment might try to give us if left
// to its own devices.
const dateDayName = dateObject
.clone()
.locale("en")
.format("dddd")
.toLowerCase();
const dayOffset = getDayOffset(startDay);
const offset = getDayOffset(dateDayName, targetDayName);
return dateObject.subtract(offset, "days");
};
// NB: `startOf("week")` changes with locale setting - some times it uses
// Monday as the first day of the week, and sometimes it uses Sunday. "week"
// is therefore unpredictable).
// "isoWeek" is consistent, but always starts on a Monday. To account for this
// (because we want the week to start on Sunday) we'll add a day to our start-
// date, calucate the closest preceding Monday, then subtract a week to give
// the closest preceding *Sunday*.
let startOfFirstWeek = start
.add(1, "days")
.startOf("isoWeek")
.subtract(1, "days")
.add(dayOffset, "days"); // account for custom startday
export const getPageCount = (weekStartDate, end, count = 1) => {
const weekEndDate = weekStartDate.clone().add(7, "days");
const endDiff = end.diff(weekEndDate, "days");
if (endDiff < 0) {
return count;
}
return getPageCount(weekEndDate, end, count + 1);
};
let startOfLastWeek = end
.add(1, "days")
.startOf("isoWeek")
.subtract(1, "days")
.add(dayOffset, "days"); // account for custom startday
export const getAllWeekDays = ({
startDate,
endDate,
startDay = "sunday",
tzid
}) => {
const start = moment.tz(startDate, "YYYY-MM-DD", tzid);
const end = moment.tz(endDate, "YYYY-MM-DD", tzid);
const weekDiff = startOfLastWeek.diff(startOfFirstWeek, "weeks");
const weekStartDate = getStartDate(start, startDay);
const weekOne = getDaysForWeek(startOfFirstWeek);
if (weekDiff <= 0) {
return weekOne;
const weekCount = getPageCount(weekStartDate, end);
let weeks = [];
for (let i = 0; i < weekCount; i++) {
weeks.push(...getDaysForWeek(weekStartDate.clone().add(i * 7, "days")));
}
let extraWeeks = [];
for (let i = 0; i < weekDiff; i++) {
extraWeeks.push(...getDaysForWeek(startOfFirstWeek.add(7, "days")));
}
return [...weekOne, ...extraWeeks];
return weeks;
};

@@ -280,8 +287,8 @@

export const generateWeeklySlots = (
{ availablePeriods, limits, weeks, tzid, unrestricted },
export const generatePageSlots = (
{ availablePeriods, limits, pages, tzid, unrestricted },
getEmpties = createEmptySlotsForPeriod,
buildPeriod = buildDayPeriod
) => {
const weekdaysEmpties = weeks.days.reduce((acc, day) => {
const weekdaysEmpties = pages.days.reduce((acc, day) => {
const dayPeriod = buildPeriod(limits.start, limits.end, day, tzid);

@@ -308,3 +315,3 @@

return {
weeks,
pages,
slots: allSlots

@@ -377,6 +384,11 @@ };

export const generateStaticWeeks = (queryPeriods, startDay) => {
export const generateStaticPages = (queryPeriods, startDay, tzid) => {
const periodsWithKeys = addKeysToSlots(queryPeriods);
const minMax = getMinMaxDates(periodsWithKeys);
const weekdays = getAllWeekDays(minMax.min, minMax.max, startDay);
const weekdays = getAllWeekDays({
startDate: minMax.min,
endDate: minMax.max,
startDay: startDay,
tzid: tzid
});

@@ -387,4 +399,4 @@ const weeks = getWeeksInfo(weekdays);

export const divideDaysIntoWeeks = (days, currentWeek) =>
[...days].slice((currentWeek - 1) * 7, currentWeek * 7);
export const divideDaysIntoWeeks = (days, currentPage) =>
[...days].slice((currentPage - 1) * 7, currentPage * 7);

@@ -438,3 +450,3 @@ // compare 2 periods (objects with start/end as moment instances).

} else {
days = divideDaysIntoWeeks(extent.days, extent.currentWeek);
days = divideDaysIntoWeeks(extent.days, extent.currentPage);
}

@@ -538,3 +550,9 @@

// This is the last slot, so just add it to the array
return [...acc, curr];
return [
...acc,
{
start: curr.start,
end: curr.end
}
];
}

@@ -554,3 +572,9 @@

// The slots don't abut, so just add this one
return [...acc, curr];
return [
...acc,
{
start: curr.start,
end: curr.end
}
];
}, []);

@@ -557,0 +581,0 @@ return periods;

@@ -99,6 +99,6 @@ import * as utils from "../src/js/helpers/utils.AvailabilityViewer";

it("gets all the week days for a given period", () => {
const input = [
"2019-04-02", // Tue
"2019-04-04" // Thu
];
const input = {
startDate: "2019-04-02", // Tue
endDate: "2019-04-04" // Thu
};
const out = [

@@ -113,11 +113,18 @@ "2019-03-31", // Sun

];
expect(utils.getAllWeekDays(...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 = [
const input = {
startDate: "2019-04-02", // Tue
endDate: "2019-04-04", // Thu
startDay: "wednesday"
};
const out = [
"2019-03-27", // Wed
"2019-03-28", // Thu
"2019-03-29", // Fri
"2019-03-30", // Sat
"2019-03-31", // Sun
"2019-04-01", // Mon
"2019-04-02", // Tue
"2019-04-04", // Thu
"wednesday"
];
const out = [
"2019-04-03", // Wed

@@ -131,9 +138,9 @@ "2019-04-04", // Thu

];
expect(utils.getAllWeekDays(...input)).toEqual(out);
expect(utils.getAllWeekDays(input)).toEqual(out);
});
it("gets all the week days for a given period that spans two weeks", () => {
const input = [
"2019-04-02", // Tue 1
"2019-04-10" // Wed 2
];
const input = {
startDate: "2019-04-02", // Tue 1
endDate: "2019-04-10" // Wed 2
};
const out = [

@@ -155,10 +162,10 @@ "2019-03-31", // Sun

];
expect(utils.getAllWeekDays(...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 input = {
startDate: "2019-04-04", // Thu 1
endDate: "2019-04-10", // Wed 2
startDay: "wednesday"
};
const out = [

@@ -180,9 +187,9 @@ "2019-04-03", // Wed

];
expect(utils.getAllWeekDays(...input)).toEqual(out);
expect(utils.getAllWeekDays(input)).toEqual(out);
});
it("gets all the week days for a given period that spans three weeks", () => {
const input = [
"2019-04-02", // Tue 1
"2019-04-16" // Tue 3
];
const input = {
startDate: "2019-04-02", // Tue 1
endDate: "2019-04-16" // Tue 3
};
const out = [

@@ -211,10 +218,10 @@ "2019-03-31", // Sun

];
expect(utils.getAllWeekDays(...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 input = {
startDate: "2019-04-04", // Thu 1
endDate: "2019-04-18", // Thu 3
startDay: "wednesday"
};
const out = [

@@ -243,9 +250,9 @@ "2019-04-03", // Wed

];
expect(utils.getAllWeekDays(...input)).toEqual(out);
expect(utils.getAllWeekDays(input)).toEqual(out);
});
it("gets all the week days for a given period that starts on a Sunday", () => {
const input = [
"2020-06-07", // Sun
"2020-06-10" // Wed
];
const input = {
startDate: "2020-06-07", // Sun
endDate: "2020-06-10" // Wed
};
const out = [

@@ -260,9 +267,9 @@ "2020-06-07", // Sun

];
expect(utils.getAllWeekDays(...input)).toEqual(out);
expect(utils.getAllWeekDays(input)).toEqual(out);
});
it("gets all the week days for a given period that starts on a Saturday", () => {
const input = [
"2020-06-06", // Sat
"2020-06-10" // Wed
];
const input = {
startDate: "2020-06-06", // Sat
endDate: "2020-06-10" // Wed
};
const out = [

@@ -284,10 +291,10 @@ "2020-05-31", // Sun

];
expect(utils.getAllWeekDays(...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 input = {
startDate: "2020-06-09", // Tue
endDate: "2020-06-12", // Fri
startDay: "tuesday"
};
const out = [

@@ -302,3 +309,3 @@ "2020-06-09", // Tue

];
expect(utils.getAllWeekDays(...input)).toEqual(out);
expect(utils.getAllWeekDays(input)).toEqual(out);
});

@@ -319,3 +326,3 @@

],
currentWeek: 1
currentPage: 1
};

@@ -524,3 +531,3 @@

// generateStaticWeeks
// generateStaticPages
it("correctly generates static weeks", () => {

@@ -546,3 +553,3 @@ const input = [

};
expect(utils.generateStaticWeeks(input)).toEqual(out);
expect(utils.generateStaticPages(input)).toEqual(out);
});

@@ -584,3 +591,3 @@ it("correctly generates multiple static weeks", () => {

};
expect(utils.generateStaticWeeks(input)).toEqual(out);
expect(utils.generateStaticPages(input)).toEqual(out);
});

@@ -609,3 +616,3 @@ it("correctly generates static week from same-day start", () => {

expect(moment().utcOffset()).toEqual(0);
expect(utils.generateStaticWeeks(input)).toEqual(out);
expect(utils.generateStaticPages(input)).toEqual(out);
});

@@ -624,3 +631,8 @@

];
expect(utils.getAllWeekDays("2020-03-01", "2020-03-05")).toEqual(out);
expect(
utils.getAllWeekDays({
startDate: "2020-03-01",
endDate: "2020-03-05"
})
).toEqual(out);
});

@@ -1016,4 +1028,2 @@

const result = utils.tweenSlots(options);
console.log("expected", expected);
console.log("result", result);
expect(result).toEqual(expected);

@@ -1041,2 +1051,32 @@ expect(Array.isArray(result)).toBe(true);

});
// getDayOffset
it("calculates the numerical difference between two day strings", () => {
const tueSun = utils.getDayOffset("tuesday", "sunday");
expect(tueSun).toEqual(2);
const sunTue = utils.getDayOffset("sunday", "tuesday");
expect(sunTue).toEqual(5);
const sunSun = utils.getDayOffset("sunday", "sunday");
expect(sunSun).toEqual(0);
const monMon = utils.getDayOffset("monday", "monday");
expect(monMon).toEqual(0);
const tueTue = utils.getDayOffset("tuesday", "tuesday");
expect(tueTue).toEqual(0);
const sunMon = utils.getDayOffset("sunday", "monday");
expect(sunMon).toEqual(6);
const monSun = utils.getDayOffset("monday", "sunday");
expect(monSun).toEqual(1);
const friWed = utils.getDayOffset("friday", "wednesday");
expect(friWed).toEqual(2);
const wedFri = utils.getDayOffset("wednesday", "friday");
expect(wedFri).toEqual(5);
});
});

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc