react-payline - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta.0

index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var PaylineProvider_1 = require("./src/PaylineProvider");
-Object.defineProperty(exports, "PaylineProvider", { enumerable: true, get: function () { return PaylineProvider_1.default; } });
-Object.defineProperty(exports, "PaylineHead", { enumerable: true, get: function () { return PaylineProvider_1.PaylineHead; } });
+exports.PaylineProvider = PaylineProvider_1.default;
+exports.PaylineHead = PaylineProvider_1.PaylineHead;
 var withPayline_1 = require("./src/withPayline");
-Object.defineProperty(exports, "withPayline", { enumerable: true, get: function () { return withPayline_1.default; } });
+exports.withPayline = withPayline_1.default;
 var usePayline_1 = require("./src/usePayline");
-Object.defineProperty(exports, "usePayline", { enumerable: true, get: function () { return usePayline_1.default; } });
+exports.usePayline = usePayline_1.default;
 var PaylineWidget_1 = require("./src/PaylineWidget");
-Object.defineProperty(exports, "PaylineWidget", { enumerable: true, get: function () { return PaylineWidget_1.default; } });
+exports.PaylineWidget = PaylineWidget_1.default;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-payline",
-  "version": "1.1.0",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
@@ -19,8 +19,4 @@ "author": "alex-pex",
   "types": "index.d.ts",
-  "dependencies": {
-    "react-helmet": "^5.2.1"
-  },
   "devDependencies": {
     "@types/react": "^16.9.19",
-    "@types/react-helmet": "^5.0.15",
     "react": "^16.12.0",
@@ -27,0 +23,0 @@ "typescript": "^3.7.5"

README.md

@@ -5,3 +5,3 @@ # react-payline
 
-This package provides a small layer between [Payline](https://docs.payline.com/pages/viewpage.action?pageId=747145714) and your React application. It removes the need of including js and css files, the use of `window.Payline` to access the API and the burden of declaring/removing global functions to use the event handlers.
+This package provides a small layer between [Payline](https://docs.payline.com/pages/viewpage.action?pageId=747147012) and your React application. It removes the need of including js and css files, the use of `window.Payline` to access the API and the burden of declaring/removing global functions to use the event handlers.
 
@@ -40,3 +40,3 @@ And if you're a TypeScript user: this package is written in TypeScript and bundles type definitions 😘.
 
-If you need more info, please refer to the documentation (FR): https://payline.atlassian.net/wiki/x/lB2eB
+If you need more info, please refer to the documentation (FR): https://docs.payline.com/pages/viewpage.action?pageId=747145714
 
@@ -43,0 +43,0 @@ ### Payline API

src/PaylineProvider.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaylineHead = void 0;
-var react_1 = __importDefault(require("react"));
-var react_helmet_1 = require("react-helmet");
+var react_1 = __importStar(require("react"));
 exports.PaylineHead = function (_a) {
@@ -18,8 +20,35 @@ var _b = _a.production, production = _b === void 0 ? false : _b;
     var _b = _a.production, production = _b === void 0 ? false : _b, children = _a.children;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_helmet_1.Helmet, null,
-            react_1.default.createElement(exports.PaylineHead, { production: production })),
-        children));
+    var baseUrl = production ? 'https://payment.payline.com' : 'https://homologation-payment.payline.com';
+    // add script
+    var scriptUrl = baseUrl + "/scripts/widget-min.js";
+    var _c = react_1.useState(window.Payline !== undefined), setIsLoaded = _c[1];
+    react_1.useLayoutEffect(function () {
+        var script = document.querySelector("script[src=\"" + scriptUrl + "\"]");
+        if (!script) {
+            script = document.createElement('script');
+            script.src = scriptUrl;
+            document.head.appendChild(script);
+        }
+        var onLoad = function () { return setIsLoaded(true); };
+        script.addEventListener('load', onLoad, false);
+        return function () {
+            if (script)
+                script.removeEventListener('load', onLoad, false);
+        };
+    }, [scriptUrl]);
+    // add stylesheet
+    var stylesheetUrl = baseUrl + "/styles/widget-min.css";
+    react_1.useLayoutEffect(function () {
+        var stylesheet = document.querySelector("link[href=\"" + stylesheetUrl + "\"]");
+        if (!stylesheet) {
+            stylesheet = document.createElement('link');
+            stylesheet.href = stylesheetUrl;
+            stylesheet.rel = 'stylesheet';
+            document.head.appendChild(stylesheet);
+        }
+    }, [stylesheetUrl]);
+    // render children
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
 exports.default = PaylineProvider;
 //# sourceMappingURL=PaylineProvider.js.map

src/PaylineWidget.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -44,2 +25,9 @@ var t = {};
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -46,0 +34,0 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

src/usePayline.d.ts

@@ -22,3 +22,10 @@ declare type PaylineApi = {
 };
+declare global {
+    interface Window {
+        Payline?: {
+            Api: PaylineApi;
+        };
+    }
+}
 declare const usePayline: () => PaylineApi | undefined;
 export default usePayline;

src/usePayline.js

@@ -5,9 +5,8 @@ "use strict";
     if (typeof window === 'undefined')
-        return;
-    var Payline = window.Payline;
-    if (!Payline)
-        throw new Error('PaylineProvider is not rendered within the component tree.');
-    return Payline.Api;
+        return undefined;
+    if (!window.Payline)
+        throw new Error('window.Payline is unavailable. Check if PaylineProvider is rendered within the component tree.');
+    return window.Payline.Api;
 };
 exports.default = usePayline;
 //# sourceMappingURL=usePayline.js.map

src/withPayline.d.ts

 import React from 'react';
-declare const withPayline: (production: boolean) => (WrappedComponent: React.ComponentType) => (props: any) => JSX.Element;
+declare const withPayline: (production: boolean) => (WrappedComponent: React.ComponentType<{}>) => (props: any) => JSX.Element;
 export default withPayline;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22075

increased by5.71%

Dependency count

1

decreased by-50%

Dev dependency count

3

decreased by-25%

Lines of code

258

increased by9.79%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedreact-helmet@^5.2.1

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-fast-compare@2.0.4(transitive)

• - Removedreact-helmet@5.2.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-side-effect@1.2.0(transitive)

• - Removedshallowequal@1.1.0(transitive)