react-datatrans-light-box - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

example/src/App.js

@@ -20,13 +20,8 @@ import React, { Component } from 'react'
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
   }
 
-  start() {
-    this.setState({ showLightbox: true })
-  }
-
   render() {
@@ -37,33 +32,37 @@ return <div>
         {this.state.showLightbox
-          ? 'Lightbox was rendered and cannot be reused.'
+          ? <Lightbox
+              {...config}
+              onLoaded={this.onLoaded}
+              onOpened={this.onOpened}
+              onCancelled={this.onCancelled}
+              onError={this.onError}
+            />
           : <button onClick={this.start}>Start Lightbox</button>
         }
+      </div>
 
-        {this.state.showLightbox &&
-          <Lightbox
-            {...config}
-            onLoaded={this.onLoaded}
-            onOpened={this.onOpened}
-            onCancelled={this.onCancelled}
-            onError={this.onError} />
-          }
-      </div>
     </div>
   }
 
-  onLoaded() {
+  start = () => {
+    this.setState({ showLightbox: true })
+  }
+
+  onLoaded = () => {
     console.log('Loaded')
   }
 
-  onOpened() {
+  onOpened = () => {
     console.log('Opened')
   }
 
-  onCancelled() {
+  onCancelled = () => {
     console.log('Cancelled')
+    this.setState({ showLightbox: false })
   }
 
-  onError(data) {
+  onError = (data) => {
     console.log('Error:', data)
+    this.setState({ showLightbox: false })
   }
 }

lib/main.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Lightbox=t(require("react")):e.Lightbox=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=o.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(8),c=n(6),s=function(e){return e&&e.__esModule?e:{default:e}}(c),f=n(2),p=["production","onLoaded","onOpened","onCancelled","onError","version"],l=function(e){return e?"https://pay.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js":"https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js"},d=function(e){var t={params:(0,f.convertArrays)((0,f.filterProps)(e,p)),loaded:e.onLoaded,opened:e.onOpened,closed:e.onCancelled,error:e.onError};window.Datatrans.startPayment(t)},y=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),i(t,[{key:"componentDidMount",value:function(){var e=this,t=l(this.props.production);if(!document.querySelectorAll('script[src="'+t+'"]'))return void d(this.props);var n=document.createElement("script");n.src=t,n.onload=function(){d(e.props)},document.body.appendChild(n)}},{key:"render",value:function(){return null}}]),t}(a.Component);t.default=y,y.propTypes={merchantId:s.default.string.isRequired,refno:s.default.string.isRequired,amount:s.default.string.isRequired,currency:s.default.string.isRequired,sign:s.default.string.isRequired,production:s.default.bool,onLoaded:s.default.func,onOpened:s.default.func,onCancelled:s.default.func,onError:s.default.func},y.defaultProps={onLoaded:function(){},onOpened:function(){},onCancelled:function(){},onError:function(){},production:!1}},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.filterProps=function(e,t){var n=o({},e);return t.forEach(function(e){return delete n[e]}),n},t.convertArrays=function(e){return Object.keys(e).reduce(function(t,n){var u=e[n];return Array.isArray(u)?o({},t,r({},n,u.join(","))):o({},t,r({},n,u))},{})}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,u,i,a,c){if(o(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,r,u,i,a,c],p=0;s=new Error(t.replace(/%s/g,function(){return f[p++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(3),o=n(4),u=n(7);e.exports=function(){function e(e,t,n,r,i,a){a!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n){t.exports=e},function(e,t,n){e.exports=n(0)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Lightbox=t(require("react")):e.Lightbox=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=o.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(8),c=n(6),s=function(e){return e&&e.__esModule?e:{default:e}}(c),f=n(2),p=["production","onLoaded","onOpened","onCancelled","onError","version"],l=function(e){return e?"https://pay.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js":"https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js"},d=function(e){var t={params:(0,f.convertArrays)((0,f.filterProps)(e,p)),loaded:e.onLoaded,opened:e.onOpened,closed:e.onCancelled,error:e.onError};window.Datatrans.startPayment(t)},y=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),i(t,[{key:"componentDidMount",value:function(){var e=this,t=l(this.props.production);if(document.querySelector('script[src="'+t+'"]'))return void d(this.props);var n=document.createElement("script");n.src=t,n.onload=function(){d(e.props)},document.body.appendChild(n)}},{key:"componentWillUnmount",value:function(){window.Datatrans&&window.setTimeout(function(){try{window.Datatrans.close()}catch(e){}},1)}},{key:"render",value:function(){return null}}]),t}(a.Component);t.default=y,y.propTypes={merchantId:s.default.string.isRequired,refno:s.default.string.isRequired,amount:s.default.string.isRequired,currency:s.default.string.isRequired,sign:s.default.string.isRequired,production:s.default.bool,onLoaded:s.default.func,onOpened:s.default.func,onCancelled:s.default.func,onError:s.default.func},y.defaultProps={onLoaded:function(){},onOpened:function(){},onCancelled:function(){},onError:function(){},production:!1}},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.filterProps=function(e,t){var n=o({},e);return t.forEach(function(e){return delete n[e]}),n},t.convertArrays=function(e){return Object.keys(e).reduce(function(t,n){var u=e[n];return Array.isArray(u)?o({},t,r({},n,u.join(","))):o({},t,r({},n,u))},{})}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,u,i,a,c){if(o(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,r,u,i,a,c],p=0;s=new Error(t.replace(/%s/g,function(){return f[p++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(3),o=n(4),u=n(7);e.exports=function(){function e(e,t,n,r,i,a){a!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n){t.exports=e},function(e,t,n){e.exports=n(0)}])});

package.json

 {
   "name": "react-datatrans-light-box",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Datatrans Lightbox component for React apps",
@@ -5,0 +5,0 @@ "main": "lib/main.js",

README.md

@@ -28,3 +28,3 @@ [![NPM version][npm-version-image]][npm-url] [![Build Status](https://circleci.com/gh/datatrans/react-datatrans-light-box.png?circle-token=:circle-token)](https://circleci.com/gh/datatrans/react-datatrans-light-box)
   production: false,
-  paymentmethod: ['ECA', 'VIS', 'PFC', 'TWI'],
+  paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'],
   themeConfiguration: {
@@ -38,13 +38,8 @@ brandColor: '#aa9374'
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
   }
 
-  start() {
-    this.setState({ showLightbox: true })
-  }
-
   render() {
@@ -55,35 +50,38 @@ return <div>
         {this.state.showLightbox
-          ? 'Lightbox was rendered and cannot be reused.'
+          ? <Lightbox
+              {...config}
+              onLoaded={this.onLoaded}
+              onOpened={this.onOpened}
+              onCancelled={this.onCancelled}
+              onError={this.onError}
+            />
           : <button onClick={this.start}>Start Lightbox</button>
         }
+      </div>
 
-        {this.state.showLightbox &&
-          <Lightbox
-            {...config}
-            onLoaded={this.onLoaded}
-            onOpened={this.onOpened}
-            onCancelled={this.onCancelled}
-            onError={this.onError} />
-          }
-      </div>
     </div>
   }
 
-  onLoaded() {
+  start = () => {
+    this.setState({ showLightbox: true })
+  }
+
+  onLoaded = () => {
     console.log('Loaded')
   }
 
-  onOpened() {
+  onOpened = () => {
     console.log('Opened')
   }
 
-  onCancelled() {
+  onCancelled = () => {
     console.log('Cancelled')
+    this.setState({ showLightbox: false })
   }
 
-  onError(data) {
+  onError = (data) => {
     console.log('Error:', data)
+    this.setState({ showLightbox: false })
   }
 }
-
 ```
@@ -90,0 +88,0 @@

src/Lightbox.js

@@ -21,6 +21,4 @@ import { Component } from 'react'
   }
-  console.log(config)
   window.Datatrans.startPayment(config)
 }
-
 export default class Lightbox extends Component {
@@ -30,3 +28,3 @@ componentDidMount() {
 
-    if (!document.querySelectorAll('script[src="' + scriptSource + '"]')) {
+    if (document.querySelector('script[src="' + scriptSource + '"]')) {
       startPayment(this.props)
@@ -46,2 +44,13 @@
 
+  componentWillUnmount() {
+    // make sure to always clean things up
+    if (window.Datatrans) {
+      window.setTimeout(() => {
+        try {
+          window.Datatrans.close()
+        } catch (err) {} // eslint-disable-line no-empty
+      }, 1)
+    }
+  }
+
   render() {
@@ -48,0 +57,0 @@ return null

No alert changes

Improved metrics

Total package byte prevSize

19732

increased by1.87%

Lines of code

230

increased by3.6%

Worsened metrics

Number of lines in readme file

113

decreased by-1.74%

No dependency changes