cronofy-elements - npm Package Compare versions

Comparing version 1.44.1 to 1.45.0

package.json

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

@@ -5,5 +5,10 @@ import React from "react";
 import { LogProvider } from "../../contexts/log-context";
+import { TzProvider } from "../../contexts/tz-context";
 
+import { parseTzList, getInitialSelectedTzid } from "./utils/tz-utils";
+
 import Wrapper from "./Wrapper";
 
+import "./scss/availabilityrules.scss";
+
 const AvailabilityRules = ({ options }) => {
@@ -23,6 +28,15 @@ const logOptions = {
 
+    const tzList = parseTzList(options.config.tz_list, options.tzid);
+    const selectedTzid = getInitialSelectedTzid(tzList, options.tzid);
+    const tzOptions = {
+        selectedTzid: selectedTzid,
+        list: tzList,
+    };
+
     return (
         <LogProvider options={logOptions}>
             <I18nProvider options={i18nOptions}>
-                <Wrapper options={options} />
+                <TzProvider options={tzOptions}>
+                    <Wrapper options={options} />
+                </TzProvider>
             </I18nProvider>
@@ -29,0 +43,0 @@ </LogProvider>

src/js/components/AvailabilityRules/Calendars.js

@@ -82,3 +82,3 @@ import React, { useState, useContext } from "react";
             css={css`
-                z-index: 2;
+                z-index: 5;
                 position: relative;
@@ -85,0 +85,0 @@ width: 100%;

src/js/components/AvailabilityRules/CalendarSelector.js

@@ -53,3 +53,3 @@ import React, { useContext, useEffect, useRef } from "react";
                 position: absolute;
-                z-index: 6;
+                z-index: 10;
                 top: 100%;
@@ -56,0 +56,0 @@ left: 0;

src/js/components/AvailabilityRules/TimeZoneDisplay.js

@@ -5,4 +5,5 @@ import React, { useContext } from "react";
 import { ExtrasContext, StatusContext, ThemeContext } from "./Wrapper";
+import { useTz } from "../../contexts/tz-context";
 import { useI18n } from "../../contexts/i18n-context";
-import { tzi18n } from "../../helpers/i18n";
+import TimeZoneSelector from "../generic/TimeZoneSelector";
 
@@ -14,2 +15,3 @@ const TimeZoneDisplay = () => {
     const [theme, setTheme] = useContext(ThemeContext);
+    const [tz, setTz] = useTz();
     return (
@@ -21,2 +23,3 @@ <div
                 width: 100%;
+                padding-right: 1em;
                 @media (max-width: ${theme.sizes.breakpoints.small}px) {
@@ -28,3 +31,11 @@ margin-bottom: 16px;
         >
-            {i18n.t("time_zone")}: {tzi18n(extras.limits.tzid, status.locale)}
+            <p
+                css={css`
+                    padding: 0.3em 0.6em 0 0;
+                    margin: 0;
+                `}
+            >
+                {i18n.t("time_zone")}
+            </p>
+            <TimeZoneSelector locale={status.locale} theme={theme} tz={tz} setTz={setTz} />
         </div>
@@ -31,0 +42,0 @@ );

src/js/components/AvailabilityRules/Wrapper.js

@@ -17,6 +17,8 @@ import React, { useState, useEffect } from "react";
 } from "../../helpers/utils.AvailabilityRules";
-import { parseStyleOptions } from "../../helpers/theming";
+import { getInitialSelectedTzid } from "./utils/tz-utils";
+import { parseStyleOptions, classBuilder } from "../../helpers/theming";
 import { globals } from "../../styles/utils";
 import { useI18n } from "../../contexts/i18n-context";
 import { useLog } from "../../contexts/log-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -41,2 +43,3 @@ import Calendars from "./Calendars";
     const log = useLog();
+    const [tz, setTz] = useTz();
 
@@ -57,3 +60,3 @@ const [account, setAccount] = useState(() => parseAccountOptions(options));
         locale: options.locale,
-        tzid: options.tzid,
+        tzid: tz.selectedTzid.tzid,
         callback: options.callback ? options.callback : cb => {},
@@ -89,15 +92,19 @@ startDay: options.config.startDay,
 
-    const [theme, setTheme] = useState(() => ({
-        ...parseStyleOptions(options.styles, "AvailabilityViewer"),
-        sizes: {
-            breakpoints: {
-                small: 650,
+    const [theme, setTheme] = useState(() => {
+        const styles = parseStyleOptions(options.styles, "AvailabilityViewer");
+        return {
+            ...styles,
+            classBuilder: classBuilder(styles.prefix, "AR"),
+            sizes: {
+                breakpoints: {
+                    small: 650,
+                },
+                labelWidth: 60,
+                labelWidthSmall: 24,
+                columnWidth: 100,
+                wrapperWidth: false,
+                wrapperUnderflow: 0,
             },
-            labelWidth: 60,
-            labelWidthSmall: 24,
-            columnWidth: 100,
-            wrapperWidth: false,
-            wrapperUnderflow: 0,
-        },
-    }));
+        };
+    });
 
@@ -180,3 +187,3 @@ const handleRuleChange = (IDs, toggleStatus) => {
                 const rulesResponse = isNewRule
-                    ? buildRuleTemplate(options.config.defaultWeeklyPeriods, options.tzid)
+                    ? buildRuleTemplate(options.config.defaultWeeklyPeriods, tz.selectedTzid.tzid)
                     : res[0];
@@ -206,2 +213,11 @@
 
+                const selectedTzid = getInitialSelectedTzid(
+                    tz.list,
+                    rulesResponse.availability_rule.tzid
+                );
+                setTz({
+                    list: tz.list,
+                    selectedTzid: selectedTzid,
+                });
+
                 setSlots(slots => {
@@ -278,2 +294,11 @@ const hydratedSlots = checkSlotAvailability(
 
+    useEffect(() => {
+        if (tz.selectedTzid.tzid) {
+            setAccount(account => ({
+                ...account,
+                tzid: tz.selectedTzid.tzid,
+            }));
+        }
+    }, [tz.selectedTzid.tzid]);
+
     const generateRules = () => {
@@ -383,3 +408,3 @@ const newRules = buildNewRules(slots);
             `}
-            className={`${theme.prefix}`}
+            className={theme.classBuilder()}
         >
@@ -386,0 +411,0 @@ <ThemeContext.Provider value={[theme, setTheme]}>

src/js/components/DateTimePicker/Calendar.js

@@ -17,3 +17,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -20,0 +20,0 @@ const Calendar = () => {

src/js/components/DateTimePicker/CalendarHeader.js

@@ -7,3 +7,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -10,0 +10,0 @@ const CalendarHeader = () => {

src/js/components/DateTimePicker/Confirm.js

@@ -7,3 +7,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -10,0 +10,0 @@ const Confirm = ({ confirmButtonRef }) => {

src/js/components/DateTimePicker/DateTimePicker.js

@@ -21,3 +21,3 @@ import React, { useMemo } from "react";
 import { StatusProvider } from "./contexts/status-context";
-import { TzProvider } from "./contexts/tz-context";
+import { TzProvider } from "../../contexts/tz-context";
 
@@ -24,0 +24,0 @@ const DateTimePicker = ({ options }) => {

src/js/components/DateTimePicker/DayButton.js

@@ -7,3 +7,3 @@ import React from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -10,0 +10,0 @@ const DayButton = ({ day, selected = false, focused = false }) => {

src/js/components/DateTimePicker/Details.js

@@ -5,7 +5,10 @@ import React, { memo } from "react";
 import { useTheme } from "./contexts/theme-context";
-import TimeZoneSelector from "./TimeZoneSelector";
+import TimeZoneSelector from "../generic/TimeZoneSelector";
 
+import { useTz } from "../../contexts/tz-context";
+
 const Details = ({ duration, locale }) => {
     const i18n = useI18n();
     const theme = useTheme();
+    const [tz, setTz] = useTz();
 
@@ -18,3 +21,3 @@ return (
                 </p>
-                <TimeZoneSelector locale={locale} />
+                <TimeZoneSelector locale={locale} theme={theme} tz={tz} setTz={setTz} />
             </div>
@@ -21,0 +24,0 @@ <div className={theme.classBuilder("details--duration")}>

src/js/components/DateTimePicker/SequencedSlotButton.js

@@ -7,3 +7,3 @@ import React, { useEffect, useRef } from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -10,0 +10,0 @@ const SequencedSlotButton = ({ slot }) => {

src/js/components/DateTimePicker/SlotButton.js

@@ -7,3 +7,3 @@ import React, { useEffect, useRef } from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -10,0 +10,0 @@ const SlotButton = ({ slot }) => {

src/js/components/DateTimePicker/utils/slots.js

@@ -7,3 +7,3 @@ import moment from "moment-timezone";
 
-import { defaultTimeZones } from "./tz-list";
+import { defaultTimeZones } from "../../../helpers/tz-list";
 
@@ -10,0 +10,0 @@ export const getMonthsCoveredByPeriod = (period, tzid) => {

src/js/components/DateTimePicker/Wrapper.js

@@ -17,3 +17,3 @@ import React, { useEffect, useRef, useState } from "react";
 import { useTheme } from "./contexts/theme-context";
-import { useTz } from "./contexts/tz-context";
+import { useTz } from "../../contexts/tz-context";
 
@@ -20,0 +20,0 @@ const Wrapper = () => {

tests/DateTimePicker/SequencedSlotButton.test.js

@@ -10,3 +10,3 @@ import React from "react";
 import { StatusProvider } from "../../src/js/components/DateTimePicker/contexts/status-context";
-import { TzProvider } from "../../src/js/components/DateTimePicker/contexts/tz-context";
+import { TzProvider } from "../../src/js/contexts/tz-context";
 
@@ -13,0 +13,0 @@ const wrapper = ({ children, status }) => (

tests/DateTimePicker/SlotButton.test.js

@@ -10,3 +10,3 @@ import React from "react";
 import { StatusProvider } from "../../src/js/components/DateTimePicker/contexts/status-context";
-import { TzProvider } from "../../src/js/components/DateTimePicker/contexts/tz-context";
+import { TzProvider } from "../../src/js/contexts/tz-context";
 
@@ -13,0 +13,0 @@ const wrapper = ({ children, status }) => (

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

3308960

increased by1%

Number of package files

348

increased by2.35%

Lines of code

27397

increased by0.66%

No dependency changes