From c41bf79e4b67318e31d68f4fcfe3a6229e0837a4 Mon Sep 17 00:00:00 2001 From: Anna Melzer Date: Thu, 25 Oct 2018 23:41:51 +0200 Subject: [PATCH] Improve type checking for card verify --- src/renderer/component/cardVerify/view.jsx | 71 +++++++++++++++------- 1 file changed, 50 insertions(+), 21 deletions(-) diff --git a/src/renderer/component/cardVerify/view.jsx b/src/renderer/component/cardVerify/view.jsx index 0f3ff4fe0..5d3f3e007 100644 --- a/src/renderer/component/cardVerify/view.jsx +++ b/src/renderer/component/cardVerify/view.jsx @@ -7,6 +7,20 @@ let scriptLoading = false; let scriptLoaded = false; let scriptDidError = false; +declare class CardVerify { + static stripeHandler: { + open: Function, + close: Function, + }; +} + +declare class StripeCheckout { + static configure({}): { + open: Function, + close: Function, + }; +} + type Props = { disabled: boolean, label: ?string, @@ -27,14 +41,20 @@ type Props = { // token.id can be used to create a charge or customer. // token.email contains the email address entered by the user. token: string, + email: string, }; -class CardVerify extends React.Component { - constructor(props) { +type State = { + open: boolean, +}; + +class CardVerifyComponent extends React.Component { + constructor(props: Props) { super(props); this.state = { open: false, }; + this.onClick = this.onClick.bind(this); } componentDidMount() { @@ -65,12 +85,14 @@ class CardVerify extends React.Component { scriptDidError = true; scriptLoading = false; reject(event); - this.onScriptError(event); + this.onScriptError(); }; }); const wrappedPromise = new Promise((accept, cancel) => { - promise.then(() => (canceled ? cancel({ isCanceled: true }) : accept())); - promise.catch(error => (canceled ? cancel({ isCanceled: true }) : cancel(error))); + promise.then(() => (canceled ? cancel(new Error({ isCanceled: true })) : accept())); + promise.catch( + error => (canceled ? cancel(new Error({ isCanceled: true })) : cancel(error)) + ); }); return { @@ -83,7 +105,9 @@ class CardVerify extends React.Component { this.loadPromise.promise.then(this.onScriptLoaded).catch(this.onScriptError); - document.body.appendChild(script); + if (document.body) { + document.body.appendChild(script); + } } componentDidUpdate() { @@ -112,7 +136,7 @@ class CardVerify extends React.Component { } }; - onScriptError = (...args) => { + onScriptError = () => { throw new Error('Unable to load credit validation script.'); }; @@ -120,6 +144,23 @@ class CardVerify extends React.Component { this.setState({ open: false }); }; + onClick = () => { + if (scriptDidError) { + throw new Error('Tried to call onClick, but StripeCheckout failed to load'); + } else if (CardVerify.stripeHandler) { + this.showStripeDialog(); + } else { + this.hasPendingClick = true; + } + }; + + loadPromise: { + promise: Promise, + cancel: Function, + }; + + hasPendingClick: boolean; + updateStripeHandler() { if (!CardVerify.stripeHandler) { CardVerify.stripeHandler = StripeCheckout.configure({ @@ -142,18 +183,6 @@ class CardVerify extends React.Component { }); } - onClick = () => { - if (scriptDidError) { - try { - throw new Error('Tried to call onClick, but StripeCheckout failed to load'); - } catch (x) {} - } else if (CardVerify.stripeHandler) { - this.showStripeDialog(); - } else { - this.hasPendingClick = true; - } - }; - render() { return (