From 5ce61649f0b2936d38cc9a8ed55836d05f3a95ff Mon Sep 17 00:00:00 2001
From: Patrick Stadler <patrick.stadler@datatrans.ch>
Date: Thu, 1 Nov 2018 10:11:10 +0100
Subject: [PATCH] clean up DOM on unmount (see #11)

---
 README.md          | 42 ++++++++++++++++++++----------------------
 example/src/App.js | 39 +++++++++++++++++++--------------------
 lib/main.js        |  2 +-
 src/Lightbox.js    | 15 ++++++++++++---
 4 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index 9cff73d..243f0c5 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ const config = {
   currency: 'CHF',
   sign: '30916165706580013',
   production: false,
-  paymentmethod: ['ECA', 'VIS', 'PFC', 'TWI'],
+  paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'],
   themeConfiguration: {
     brandColor: '#aa9374'
   }
@@ -34,15 +34,10 @@ const config = {
 export default class App extends Component {
   constructor(props) {
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
-  }
-
-  start() {
-    this.setState({ showLightbox: true })
   }
 
   render() {
@@ -50,39 +45,42 @@ export default class App extends Component {
       <h1>Datatrans Lightbox Demo</h1>
       <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>
         }
-
-        {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 })
   }
 }
-
 ```
 
 ## Properties
diff --git a/example/src/App.js b/example/src/App.js
index 20ddf9b..18f1aab 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -17,15 +17,10 @@ const config = {
 export default class App extends Component {
   constructor(props) {
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
-  }
-
-  start() {
-    this.setState({ showLightbox: true })
   }
 
   render() {
@@ -33,35 +28,39 @@ export default class App extends Component {
       <h1>Datatrans Lightbox Demo</h1>
       <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>
         }
-
-        {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 })
   }
 }
diff --git a/lib/main.js b/lib/main.js
index f5545a7..c74460d 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -1 +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)}])});
\ No newline at end of file
+!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)}])});
\ No newline at end of file
diff --git a/src/Lightbox.js b/src/Lightbox.js
index cad2493..6fa5edf 100644
--- a/src/Lightbox.js
+++ b/src/Lightbox.js
@@ -18,15 +18,13 @@ const startPayment = (props) => {
     closed: props.onCancelled,
     error: props.onError
   }
-  console.log(config)
   window.Datatrans.startPayment(config)
 }
-
 export default class Lightbox extends Component {
   componentDidMount() {
     const scriptSource = getUrl(this.props.production)
 
-    if (!document.querySelectorAll('script[src="' + scriptSource + '"]')) {
+    if (document.querySelector('script[src="' + scriptSource + '"]')) {
       startPayment(this.props)
 
       return
@@ -41,6 +39,17 @@ export default class Lightbox extends Component {
     document.body.appendChild(script)
   }
 
+  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() {
     return null
   }