cronofy-elements - npm Package Compare versions

Comparing version 1.31.0 to 1.32.0

compat.config.js

 const path = require("path");
 const baseConfig = require("./webpack.config.js");
-const GitRevisionPlugin = require("git-revision-webpack-plugin");
+const { GitRevisionPlugin } = require("git-revision-webpack-plugin");
 const gitRevisionPlugin = new GitRevisionPlugin();
@@ -23,3 +23,4 @@
         umdNamedDefine: true
-    }
+    },
+    target: ["web", "es5"]
 });

demo/server.js

@@ -6,2 +6,3 @@ require("@babel/polyfill");
 const path = require("path");
+const moment = require("moment");
 
@@ -265,6 +266,97 @@ const url = require("url");
 
+const slotTimes = function(days, time) {
+    const timeString = `${moment().utc().format("YYYY-MM-DD")}T${time}:00Z`;
+    const output = moment(timeString)
+        .add(days, "days");
+    return output.utc().format();
+};
+
 app.get("/slot-picker", async (req, res) => {
+    const createBookableEvents = req.query.bookable_events;
+
+    let bookable_event_ids = ["BOOKABLE_EVENT_ID"];
+
+    if (createBookableEvents) {
+
+        const example_bookable_events = [
+            {
+                "bookable_event_id": "BOOKABLE_EVENT_1",
+                "start": slotTimes(1,"10:00"),
+                "end": slotTimes(1,"11:00"),
+                "status": "confirmed",
+                "registration": {
+                    "capacity": 5
+                }
+            },
+            {
+                "bookable_event_id": "BOOKABLE_EVENT_2",
+                "start": slotTimes(1,"12:00"),
+                "end": slotTimes(1,"13:30"),
+                "status": "confirmed",
+                "registration": {
+                    "capacity": 5
+                }
+            },
+            {
+                "bookable_event_id": "BOOKABLE_EVENT_3",
+                "start": slotTimes(1,"15:00"),
+                "end": slotTimes(1,"17:00"),
+                "status": "confirmed",
+                "registration": {
+                    "capacity": 5
+                }
+            },
+            {
+                "bookable_event_id": "BOOKABLE_EVENT_4",
+                "start": slotTimes(2,"12:00"),
+                "end": slotTimes(2,"13:30"),
+                "status": "confirmed",
+                "registration": {
+                    "capacity": 5
+                }
+            }
+        ];
+
+        const bookableEventsUrl = `${apiDomain}/v1/bookable_events`;
+        const eventCreationOptions = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json; charset=utf-8",
+                Authorization: `Bearer ${env.CLIENT_SECRET}`
+            }
+        };
+
+        bookable_event_ids = await Promise.all(example_bookable_events.map(async event => {
+            const options = {
+                ...eventCreationOptions,
+                body: JSON.stringify(event)
+            };
+    
+            const bookable_event = await getData(bookableEventsUrl, options);
+            console.log("New bookable event created:");
+            console.log({eventId: bookable_event.bookable_event.bookable_event_id});
+            return bookable_event.bookable_event.bookable_event_id;
+        }));
+    }
+
+    const bookableEventsSlotPickerTokenOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json; charset=utf-8",
+            Authorization: `Bearer ${env.CLIENT_SECRET}`
+        },
+        body: JSON.stringify({
+            version: "1",
+            permissions: ["availability"],
+            bookable_event_ids: bookable_event_ids,
+            origin: "http://localhost:8080"
+        })
+    }
+
     const slot_picker_token = await getData(baseUrl, slotPickerTokenOptions);
+    const bookable_events_token = await getData(baseUrl, bookableEventsSlotPickerTokenOptions);
     return res.render("slot-picker", {
+        bookable_event_ids: bookable_event_ids,
         slot_picker_token: slot_picker_token.element_token.token,
+        bookable_events_token: bookable_events_token.element_token.token,
         api_domain: rawApiDomain,
@@ -271,0 +363,0 @@ app_domain: appDomain,

git.README.md

@@ -22,4 +22,8 @@ # Cronofy UI Elements
 
-If you're running SSL on your local dev server then you will need to tell Node to ignore TLS verifications.
+If using powprox for local API hosting (our default) you can set an environment variable to tell Node about a custom root CA in your `.bash_profile` or equivalent:
 
+    export NODE_EXTRA_CA_CERTS="$HOME/.powprox/ssl/ca/pow-root-ca.crt"
+
+Alternatively, though not recommended, you can disable all TLS verification:
+
     NODE_TLS_REJECT_UNAUTHORIZED=0 make dev
@@ -26,0 +30,0 @@

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.31.0",
+    "version": "1.32.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
@@ -9,3 +9,3 @@ "main": "build/npm/CronofyElements.js",
         "build": "webpack --mode=production",
-        "build_analyse": "webpack --mode=production --analyse",
+        "build_analyse": "webpack --mode=production --analyze",
         "build_compat": "webpack --config compat.config.js --mode=production",
@@ -16,3 +16,3 @@ "build_dev": "webpack --mode=development",
         "dev": "webpack --mode=development --watch",
-        "dev_analyse": "webpack --mode=development --watch --analyse",
+        "dev_analyse": "webpack --mode=development --watch --analyze",
         "dev_compat": "webpack --config compat.config.js --mode=development --watch",
@@ -44,3 +44,2 @@ "serve": "npm run build_server && node build/server.js",
     "peerDependencies": {},
-    "dependencies": {},
     "devDependencies": {
@@ -58,24 +57,22 @@ "@babel/cli": "^7.12.10",
         "@testing-library/react": "^11.2.2",
+        "autoprefixer": "^10.2.5",
         "babel-loader": "^8.2.2",
         "babel-plugin-emotion": "^10.0.33",
         "core-js": "^3.8.2",
-        "css-loader": "^5.0.1",
+        "css-loader": "^5.2.4",
         "deepmerge": "^2.2.1",
         "ejs": "^2.7.4",
         "express": "^4.16.4",
-        "file-loader": "^5.1.0",
         "fs": "0.0.1-security",
-        "git-revision-webpack-plugin": "^3.0.6",
+        "git-revision-webpack-plugin": "^5.0.0",
         "jest": "^26.6.3",
         "jest-fetch-mock": "^3.0.3",
-        "mini-css-extract-plugin": "^0.4.5",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.32",
-        "moment-timezone-data-webpack-plugin": "^1.3.0",
+        "moment-timezone-data-webpack-plugin": "^1.5.0",
         "node-fetch": "^2.3.0",
-        "node-sass": "^4.14.1",
-        "optimize-css-assets-webpack-plugin": "^5.0.4",
+        "node-sass": "^6.0.0",
         "path": "^0.12.7",
         "polished": "^2.3.3",
-        "postcss-loader": "^2.1.5",
+        "postcss-loader": "^5.3.0",
         "prettier": "2.0.5",
@@ -89,10 +86,10 @@ "react": "^16.14.0",
         "react-transition-group": "^4.4.1",
-        "sass-loader": "^7.0.3",
-        "style-loader": "^0.23.1",
-        "uglifyjs-webpack-plugin": "^1.2.7",
-        "webpack": "^4.44.2",
-        "webpack-bundle-analyzer": "^3.9.0",
-        "webpack-cli": "^3.3.12",
+        "sass-loader": "^11.1.1",
+        "style-loader": "^2.0.0",
+        "terser-webpack-plugin": "^5.1.2",
+        "webpack": "^5.37.0",
+        "webpack-bundle-analyzer": "^4.4.1",
+        "webpack-cli": "^4.7.0",
         "whatwg-fetch": "^3.5.0"
     }
 }

src/js/components/SlotPicker/SlotPicker.js

@@ -124,7 +124,11 @@ import React, { useState, useEffect } from "react";
     useEffect(() => {
-        const query = {
-            response_format: "overlapping_slots",
-            ...options.query
-        };
+        let query = options.query;
 
+        if (!options.query.bookable_events) {
+            query = {
+                response_format: "overlapping_slots",
+                ...options.query
+            };
+        }
+
         connections
@@ -140,15 +144,22 @@ .getAvailability(
             .then(res => {
-                if (typeof res.available_slots === "undefined") {
-                    setStatus({
-                        ...status,
-                        error: {
-                            type: 400,
-                            message: "There was a problem loading the data."
-                        },
-                        loading: false
-                    });
-                    return;
+                let returnedSlots;
+                if (typeof res.available_bookable_events !== "undefined") {
+                    returnedSlots = res.available_bookable_events;
+                } else {
+                    returnedSlots = res.available_slots;
+
+                    if (typeof res.available_slots === "undefined") {
+                        setStatus({
+                            ...status,
+                            error: {
+                                type: 400,
+                                message: "There was a problem loading the data."
+                            },
+                            loading: false
+                        });
+                        return;
+                    }
                 }
                 const daysFromPeriods = getDaysFromAvailablePeriods(
-                    res.available_slots,
+                    returnedSlots,
                     status.locale,
@@ -167,2 +178,3 @@ status.tzid
                 );
+
                 const daysToSlots = days.reduce(
@@ -169,0 +181,0 @@ (acc, day) => ({

src/js/helpers/init.SlotPicker.js

@@ -44,4 +44,13 @@ import {
 
-    const query = parseQuery({ options, elementSlug: "slot-picker", log });
+    const isBookableEventsQuery = options.availability_query.bookable_events
+        ? true
+        : false;
 
+    let query;
+    if (isBookableEventsQuery) {
+        query = options.availability_query;
+    } else {
+        query = parseQuery({ options, elementSlug: "slot-picker", log });
+    }
+
     const tzid = parseTimezone(options.tzid, "slot-picker", log);
@@ -48,0 +57,0 @@

tests/init.SlotPicker.test.js

@@ -138,2 +138,30 @@ import moment from "moment-timezone";
     });
+
+    it("passes query through unchanged if bookable_events are present", () => {
+        const result = parseSlotPickerOptions({
+            availability_query: {
+                bookable_events: ["EVENT", "EVENT"],
+                test: "UNKNOWN_KEY"
+            },
+            element_token: "TOKEN",
+            target_id: "TARGET"
+        });
+        expect(result).toHaveProperty("query");
+        expect(result.query.bookable_events.length).toBe(2);
+        expect(console.warn).toHaveBeenCalledTimes(0);
+        expect(console.error).toHaveBeenCalledTimes(0);
+    });
+
+    it("errors if query does not contain query_periods", () => {
+        const result = parseSlotPickerOptions({
+            availability_query: {
+                test: "UNKNOWN_KEY"
+            },
+            element_token: "TOKEN",
+            target_id: "TARGET"
+        });
+        expect(result).toHaveProperty("query");
+        expect(console.warn).toHaveBeenCalledTimes(0);
+        expect(console.error).toHaveBeenCalledTimes(1);
+    });
 });

webpack.config.js

 const webpack = require("webpack");
 const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const GitRevisionPlugin = require("git-revision-webpack-plugin");
+const { GitRevisionPlugin } = require("git-revision-webpack-plugin");
 const gitRevisionPlugin = new GitRevisionPlugin();
@@ -11,2 +8,3 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
 const MomentTimezoneDataPlugin = require("moment-timezone-data-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
@@ -28,10 +26,4 @@ const deprecationNotice = `CronofyComponents has been deprecated. Please use CronofyElements instead. Full details can be found on the Cronofy Elements documention page: https://docs.cronofy.com/developers/ui-elements/`;
     optimization: {
-        minimizer: [
-            new UglifyJsPlugin({
-                cache: true,
-                parallel: true,
-                sourceMap: argv.mode === "development"
-            }),
-            new OptimizeCSSAssetsPlugin({})
-        ]
+        minimize: true,
+        minimizer: [new TerserPlugin()]
     },
@@ -71,7 +63,3 @@ module: {
                 use: [
-                    // fallback to style-loader in development
-                    process.env.NODE_ENV !== "production"
-                        ? "style-loader"
-                        : MiniCssExtractPlugin.loader,
-                    // MiniCssExtractPlugin.loader,
+                    "style-loader",
                     {
@@ -96,18 +84,2 @@ loader: "css-loader", // translates CSS into CommonJS
                 ]
-            },
-            {
-                test: /\.(png|jpg|gif)$/,
-                use: ["file-loader"]
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|otf)$/,
-                use: [
-                    {
-                        loader: "file-loader",
-                        options: {
-                            // path: path.resolve(__dirname, 'assets/css'),
-                            name: "fonts/[name].[ext]"
-                        }
-                    }
-                ]
             }
@@ -117,9 +89,2 @@ ]
     plugins: [
-        new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
-            // both options are optional
-            path: path.resolve(__dirname, "build/css"),
-            filename: "app.css",
-            chunkFilename: "[id].css"
-        }),
         new webpack.BannerPlugin({
@@ -134,4 +99,5 @@ banner: `const CronofyComponents = {
         new BundleAnalyzerPlugin({
-            analyzerMode: argv.analyse ? "server" : "disabled", // server | static | disabled
-            analyzerPort: 8181
+            analyzerMode: argv.analyze ? "server" : "disabled", // server | static | disabled
+            analyzerPort: 8181,
+            defaultSizes: "stat"
         }),
@@ -138,0 +104,0 @@ new MomentTimezoneDataPlugin({

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

46

decreased by-4.17%

Number of package files

244

increased by0.83%

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

2866890

decreased by-1.76%

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Lines of code

21794

decreased by-20.9%

No dependency changes