@rebilly/framepay-react 4.0.6 → 5.1.0

package/test/e2e/fixtures/multiple-methods.js

@@ -21,32 +21,32 @@ const defaultEvents = () => ({
         onReady: false,
         onChange: false,
         onFocus: false,
-        onBlur: false
+        onBlur: false,
     },
     bankAccountType: {
         onReady: false,
         onChange: false,
         onFocus: false,
-        onBlur: false
+        onBlur: false,
     },
     bankAccountNumber: {
         onReady: false,
         onChange: false,
         onFocus: false,
-        onBlur: false
+        onBlur: false,
     },
     bankRoutingNumber: {
         onReady: false,
         onChange: false,
         onFocus: false,
-        onBlur: false
+        onBlur: false,
     },
     iban: {
         onReady: false,
         onChange: false,
         onFocus: false,
-        onBlur: false
-    }
+        onBlur: false,
+    },
 });
 
 class PaymentFormComponent extends Component {
@@ -58,14 +58,14 @@ class PaymentFormComponent extends Component {
                 card: 'payment-card',
                 bank: 'ach',
                 iban: 'ach',
-                googlepay: 'googlepay'
+                googlepay: 'googlepay',
             },
             paymentElement: 'card',
             billingAddress: {
                 firstName: 'first-name-value',
                 lastName: 'last-name-value',
-                country: 'GB'
-            }
+                country: 'GB',
+            },
         };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
@@ -78,22 +78,22 @@ class PaymentFormComponent extends Component {
          *
          */
         const billingAddress = {
-            ...this.state.billingAddress
+            ...this.state.billingAddress,
         };
 
         this.props.Rebilly.createToken(this.formNode, {
             // method: this.state.paymentElements[this.state.paymentElement],
-            billingAddress
+            billingAddress,
         })
-            .then(data => {
+            .then((data) => {
                 this.props.onEvent({
                     token: {
                         error: false,
-                        data: { ...data, method: data.method }
-                    }
+                        data: { ...data, method: data.method },
+                    },
                 });
             })
-            .catch(err => {
+            .catch((err) => {
                 this.props.onEvent({ token: { error: true, data: err } });
             });
     }
@@ -110,13 +110,13 @@ class PaymentFormComponent extends Component {
                 events: {
                     ...defaultEvents(),
                 },
-            })
-        }
+            });
+        };
 
         return (
             <div className="example-2">
                 <ul>
-                    {elements.map(element => (
+                    {elements.map((element) => (
                         <li key={`payment-method-${element}`}>
                             <button
                                 id={`set-active-element-${element}`}
@@ -130,7 +130,7 @@ class PaymentFormComponent extends Component {
                 </ul>
                 <form
                     id="form"
-                    ref={node => (this.formNode = node)}
+                    ref={(node) => (this.formNode = node)}
                     method="post"
                     onSubmit={this.handleSubmit}
                 >
@@ -143,11 +143,11 @@ class PaymentFormComponent extends Component {
                                 defaultValue={
                                     this.state.billingAddress.firstName
                                 }
-                                onChange={e => {
+                                onChange={(e) => {
                                     this.props.onEvent({
                                         billingAddress: {
-                                            firstName: e.target.value
-                                        }
+                                            firstName: e.target.value,
+                                        },
                                     });
                                 }}
                             />
@@ -160,11 +160,11 @@ class PaymentFormComponent extends Component {
                                 defaultValue={
                                     this.state.billingAddress.lastName
                                 }
-                                onChange={e => {
+                                onChange={(e) => {
                                     this.props.onEvent({
                                         billingAddress: {
-                                            lastName: e.target.value
-                                        }
+                                            lastName: e.target.value,
+                                        },
                                     });
                                 }}
                             />
@@ -176,34 +176,34 @@ class PaymentFormComponent extends Component {
                                     onReady={() =>
                                         this.props.onEvent({
                                             events: {
-                                                card: { onReady: true }
-                                            }
+                                                card: { onReady: true },
+                                            },
                                         })
                                     }
-                                    onChange={data =>
+                                    onChange={(data) =>
                                         this.props.onEvent({
                                             events: {
                                                 card: {
                                                     onChange: {
                                                         ...data,
-                                                        error: data.error || ''
-                                                    }
-                                                }
-                                            }
+                                                        error: data.error || '',
+                                                    },
+                                                },
+                                            },
                                         })
                                     }
                                     onFocus={() =>
                                         this.props.onEvent({
                                             events: {
-                                                card: { onFocus: true }
-                                            }
+                                                card: { onFocus: true },
+                                            },
                                         })
                                     }
                                     onBlur={() =>
                                         this.props.onEvent({
                                             events: {
-                                                card: { onBlur: true }
-                                            }
+                                                card: { onBlur: true },
+                                            },
                                         })
                                     }
                                 />
@@ -223,12 +223,12 @@ class PaymentFormComponent extends Component {
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountType: {
-                                                            onReady: true
-                                                        }
-                                                    }
+                                                            onReady: true,
+                                                        },
+                                                    },
                                                 })
                                             }
-                                            onChange={data =>
+                                            onChange={(data) =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountType: {
@@ -236,28 +236,28 @@ class PaymentFormComponent extends Component {
                                                                 ...data,
                                                                 error:
                                                                     data.error ||
-                                                                    ''
-                                                            }
-                                                        }
-                                                    }
+                                                                    '',
+                                                            },
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onFocus={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountType: {
-                                                            onFocus: true
-                                                        }
-                                                    }
+                                                            onFocus: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onBlur={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountType: {
-                                                            onBlur: true
-                                                        }
-                                                    }
+                                                            onBlur: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                         />
@@ -272,12 +272,12 @@ class PaymentFormComponent extends Component {
                                                 this.props.onEvent({
                                                     events: {
                                                         bankRoutingNumber: {
-                                                            onReady: true
-                                                        }
-                                                    }
+                                                            onReady: true,
+                                                        },
+                                                    },
                                                 })
                                             }
-                                            onChange={data =>
+                                            onChange={(data) =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankRoutingNumber: {
@@ -285,28 +285,28 @@ class PaymentFormComponent extends Component {
                                                                 ...data,
                                                                 error:
                                                                     data.error ||
-                                                                    ''
-                                                            }
-                                                        }
-                                                    }
+                                                                    '',
+                                                            },
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onFocus={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankRoutingNumber: {
-                                                            onFocus: true
-                                                        }
-                                                    }
+                                                            onFocus: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onBlur={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankRoutingNumber: {
-                                                            onBlur: true
-                                                        }
-                                                    }
+                                                            onBlur: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                         />
@@ -321,12 +321,12 @@ class PaymentFormComponent extends Component {
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountNumber: {
-                                                            onReady: true
-                                                        }
-                                                    }
+                                                            onReady: true,
+                                                        },
+                                                    },
                                                 })
                                             }
-                                            onChange={data =>
+                                            onChange={(data) =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountNumber: {
@@ -334,28 +334,28 @@ class PaymentFormComponent extends Component {
                                                                 ...data,
                                                                 error:
                                                                     data.error ||
-                                                                    ''
-                                                            }
-                                                        }
-                                                    }
+                                                                    '',
+                                                            },
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onFocus={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountNumber: {
-                                                            onFocus: true
-                                                        }
-                                                    }
+                                                            onFocus: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onBlur={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         bankAccountNumber: {
-                                                            onBlur: true
-                                                        }
-                                                    }
+                                                            onBlur: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                         />
@@ -374,12 +374,12 @@ class PaymentFormComponent extends Component {
                                                 this.props.onEvent({
                                                     events: {
                                                         iban: {
-                                                            onReady: true
-                                                        }
-                                                    }
+                                                            onReady: true,
+                                                        },
+                                                    },
                                                 })
                                             }
-                                            onChange={data =>
+                                            onChange={(data) =>
                                                 this.props.onEvent({
                                                     events: {
                                                         iban: {
@@ -387,28 +387,28 @@ class PaymentFormComponent extends Component {
                                                                 ...data,
                                                                 error:
                                                                     data.error ||
-                                                                    ''
-                                                            }
-                                                        }
-                                                    }
+                                                                    '',
+                                                            },
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onFocus={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         iban: {
-                                                            onFocus: true
-                                                        }
-                                                    }
+                                                            onFocus: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                             onBlur={() =>
                                                 this.props.onEvent({
                                                     events: {
                                                         iban: {
-                                                            onBlur: true
-                                                        }
-                                                    }
+                                                            onBlur: true,
+                                                        },
+                                                    },
                                                 })
                                             }
                                         />
@@ -433,31 +433,37 @@ class App extends Component {
         super(props);
         this.state = {
             events: {
-                ...defaultEvents()
+                ...defaultEvents(),
             },
             token: {
                 error: null,
-                data: null
-            }
+                data: null,
+            },
         };
     }
 
     deepUpdateState(data) {
-        this.setState(prevState => {
+        this.setState((prevState) => {
             return deepMerge(prevState, data);
         });
     }
 
     render() {
         return (
-            <FramePayProvider injectStyle {...params} onTokenReady={(token) => this.deepUpdateState({ error: false, data: token })}>
+            <FramePayProvider
+                injectStyle
+                {...params}
+                onTokenReady={(token) =>
+                    this.deepUpdateState({ error: false, data: token })
+                }
+            >
                 <div>
                     {ReactVersion()}
                     <div>
                         <div className="flex-wrapper">
                             {prettyDebugRender(this.state)}
                             <PaymentForm
-                                onEvent={data => this.deepUpdateState(data)}
+                                onEvent={(data) => this.deepUpdateState(data)}
                             />
                         </div>
                     </div>

package/test/e2e/fixtures/nav.js

@@ -11,10 +11,9 @@ setTimeout(() => {
         'iban',
         'multiple-methods',
         'paypal',
-    ]
-        .forEach(route => {
-            node.innerHTML += `<li><a href="/${route}.html">${route}</a></li>`;
-        });
+    ].forEach((route) => {
+        node.innerHTML += `<li><a href="/${route}.html">${route}</a></li>`;
+    });
 
     document.body.appendChild(node);
 }, 1000);

package/test/e2e/fixtures/paypal.js

@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
-import {
-    FramePayProvider,
-    withFramePayPaypalComponent
-} from '../../../build';
+import { FramePayProvider, withFramePayPaypalComponent } from '../../../build';
 import { prettyDebugRender, ReactVersion } from './util';
 import './style.css';
 
@@ -15,11 +12,10 @@ const params = {
     transactionData: {
         amount: 10,
         currency: 'USD',
-    }
+    },
 };
 
 class App extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -35,10 +31,10 @@ class App extends Component {
                 onReady={() => {
                     console.log('FramePayProvider.onReady');
                 }}
-                onError={err => {
+                onError={(err) => {
                     console.log('FramePayProvider.onError', err);
                 }}
-                onTokenReady={token => this.setState({ token })}
+                onTokenReady={(token) => this.setState({ token })}
             >
                 <div>
                     {ReactVersion()}
@@ -56,7 +52,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayPaypalComponent(App);
-ReactDOM.render(
-    <WrappedApp />,
-    document.getElementById('app')
-);
+ReactDOM.render(<WrappedApp />, document.getElementById('app'));

package/test/e2e/fixtures/util.js

@@ -2,26 +2,31 @@ import React from 'react';
 
 export const prettyRenderState = (data, parentKey) => {
     if (data !== null && typeof data === 'object') {
-        return <ul>
-            {Object.keys(data).map((key, index) => {
+        return (
+            <ul>
+                {Object.keys(data).map((key, index) => {
+                    const dataKey = `${parentKey ? parentKey + '-' : ''}${key}`;
+                    const value = data[key];
 
-                const dataKey = `${parentKey ? parentKey + '-' : ''}${key}`;
-                const value = data[key];
+                    if (value === null) {
+                        return null;
+                    }
 
-                if (value === null) {
-                    return null;
-                }
-
-                return <li
-                    key={`state-render-${key}-${index}`}
-                    id={`key-${key}`}>
-                    <span
-                        className="key"><b>{key}</b>:</span>
-                    &nbsp;
-                    {prettyRenderState(value, dataKey)}
-                </li>;
-            })}
-        </ul>;
+                    return (
+                        <li
+                            key={`state-render-${key}-${index}`}
+                            id={`key-${key}`}
+                        >
+                            <span className="key">
+                                <b>{key}</b>:
+                            </span>
+                            &nbsp;
+                            {prettyRenderState(value, dataKey)}
+                        </li>
+                    );
+                })}
+            </ul>
+        );
     }
 
     if (data === null) {
@@ -30,42 +35,50 @@ export const prettyRenderState = (data, parentKey) => {
 
     const val = typeof data === 'object' ? JSON.stringify(data) : data;
 
-    return <span>
-        <span id={`${parentKey}-${val}`} data-value={val}/>
-        <span id={parentKey} data-value={val}>{String(val)}</span>
-    </span>;
+    return (
+        <span>
+            <span id={`${parentKey}-${val}`} data-value={val} />
+            <span id={parentKey} data-value={val}>
+                {String(val)}
+            </span>
+        </span>
+    );
 };
 
 export const prettyDebugRender = (state) => {
-    return (<div>
-        <div>
-            <pre id="pre">{JSON.stringify(state, null, 2)}</pre>
-        </div>
+    return (
         <div>
-            <div id="data">{prettyRenderState(state)}</div>
+            <div>
+                <pre id="pre">{JSON.stringify(state, null, 2)}</pre>
+            </div>
+            <div>
+                <div id="data">{prettyRenderState(state)}</div>
+            </div>
         </div>
-    </div>);
+    );
 };
 
-
 export const deepMerge = (target, source) => {
     for (const key of Object.keys(source)) {
         if (source[key] instanceof Object) {
             source[key] = source[key] || {};
             target[key] = target[key] || {};
-            Object.assign(
-                source[key],
-                deepMerge(target[key], source[key])
-            );
+            Object.assign(source[key], deepMerge(target[key], source[key]));
         }
     }
 
     return Object.assign(target || {}, source);
 };
 
-
 export const ReactVersion = () => {
-    return (<div>
-        <h3>React version: <span id="react-version" data-version={React.version}>{React.version}</span></h3>
-    </div>);
+    return (
+        <div>
+            <h3>
+                React version:{' '}
+                <span id="react-version" data-version={React.version}>
+                    {React.version}
+                </span>
+            </h3>
+        </div>
+    );
 };

package/test/e2e/specs/card-separate-brands.cy.ts

@@ -6,7 +6,7 @@ describe('card-separate-brands', () => {
     it('should load the page', () => {
         cy.title().should(
             'eq',
-            'Test Card Page Separate Fields allowed Brands'
+            'Test Card Page Separate Fields allowed Brands',
         );
     });
 
@@ -58,7 +58,7 @@ describe('card-separate-brands', () => {
         cy.get('#btn-update').click();
 
         cy.get(
-            '#events-number-onChange-error-code-unavailable-card-brand'
+            '#events-number-onChange-error-code-unavailable-card-brand',
         ).should('not.exist');
 
         cy.get('#btn-restore').click();

package/test/e2e/specs/react-version.cy.ts

@@ -6,7 +6,7 @@ it(`should render with correct react version (${expectedVersion})`, () => {
     cy.visit('/');
     cy.get('#react-version')
         .invoke('text')
-        .should(actualVersion => {
+        .should((actualVersion) => {
             expect(actualVersion.startsWith(expectedVersion)).to.be.true;
         });
 });