@rebilly/framepay-react 4.0.6 → 5.0.0

package/test/e2e/fixtures/card-separate-brands.js

@@ -1,7 +1,11 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
-import { FramePayProvider, SUPPORTED_CARD_BRANDS, withFramePayCardComponent } from '../../../build';
+import {
+    FramePayProvider,
+    SUPPORTED_CARD_BRANDS,
+    withFramePayCardComponent,
+} from '../../../build';
 import { deepMerge, prettyDebugRender, ReactVersion } from './util';
 import './style.css';
 
@@ -11,22 +15,21 @@ const params = {
     publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
     icon: {
         display: true,
-        color: 'blue'
+        color: 'blue',
     },
     card: {
         brands: {
             allowed: [
                 SUPPORTED_CARD_BRANDS.MasterCard,
-                SUPPORTED_CARD_BRANDS.Amex
-            ]
-        }
-    }
+                SUPPORTED_CARD_BRANDS.Amex,
+            ],
+        },
+    },
 };
 
 console.log('params', params);
 
 class CardElementComponent extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -36,32 +39,32 @@ class CardElementComponent extends Component {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 cvv: {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 expiry: {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
-                }
+                    onBlur: null,
+                },
             },
             billingAddress: {
                 firstName: 'first-name-value',
                 lastName: 'last-name-value',
                 address: 'address-value',
                 country: 'GB',
-                region: 'region-value'
+                region: 'region-value',
             },
             token: {
                 error: null,
-                data: null
-            }
+                data: null,
+            },
         };
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleUpdateSettings = this.handleUpdateSettings.bind(this);
@@ -76,30 +79,30 @@ class CardElementComponent extends Component {
          *
          */
         const billingAddress = {
-            ...this.state.billingAddress
+            ...this.state.billingAddress,
         };
         if (billingAddress.emails) {
             billingAddress.emails = [
                 {
                     label: 'Email',
-                    value: billingAddress.emails
-                }
+                    value: billingAddress.emails,
+                },
             ];
         }
         if (billingAddress.phoneNumbers) {
             billingAddress.phoneNumbers = [
                 {
                     label: 'Phone Number',
-                    value: billingAddress.phoneNumbers
-                }
+                    value: billingAddress.phoneNumbers,
+                },
             ];
         }
 
         this.props.Rebilly.createToken(this.formNode, { billingAddress })
-            .then(data => {
+            .then((data) => {
                 this.deepUpdateState({ token: { error: false, data } });
             })
-            .catch(err => {
+            .catch((err) => {
                 this.deepUpdateState({ token: { error: true, data: err } });
             });
     }
@@ -112,149 +115,263 @@ class CardElementComponent extends Component {
         this.setState({ button: 'update' });
         this.props.Rebilly.update({
             ...params,
-            card: { brands: { allowed: null } }
+            card: { brands: { allowed: null } },
         });
     }
 
     handleRestoreSettings() {
         this.setState({ button: 'restore' });
         this.props.Rebilly.update({
-            ...params
+            ...params,
         });
     }
 
     render() {
-        return (<div>
-            <h2>{this.props.title}</h2>
-            <h3>FramePay version: {this.props.Rebilly.version}</h3>
-            <div className="flex-wrapper">
-                {prettyDebugRender(this.state)}
-                <div className="example-2">
-                    <form id="form" ref={node => this.formNode = node} method="post" onSubmit={this.handleSubmit}>
-                        <fieldset>
-                            <div className="field">
-                                <input
-                                    type="text"
-                                    name="firstName"
-                                    placeholder="First Name"
-                                    defaultValue={this.state.billingAddress.firstName}
-                                    onChange={e => {
-                                        this.deepUpdateState({ billingAddress: { firstName: e.target.value } });
-                                    }}/>
-                            </div>
-                            <div className="field">
-                                <input
-                                    type="text"
-                                    name="lastName"
-                                    placeholder="Last Name"
-                                    defaultValue={this.state.billingAddress.lastName}
-                                    onChange={e => {
-                                        this.deepUpdateState({ billingAddress: { lastName: e.target.value } });
-                                    }}/>
-                            </div>
-                            <div className="field">
-                                <input
-                                    type="text"
-                                    name="email"
-                                    placeholder="Email"
-                                    defaultValue={this.state.billingAddress.emails}
-                                    onChange={e => {
-                                        this.deepUpdateState({ billingAddress: { emails: e.target.value } });
-                                    }}/>
-                            </div>
-                            <div className="field">
-                                <input
-                                    type="text"
-                                    name="phone"
-                                    placeholder="Phone"
-                                    defaultValue={this.state.billingAddress.phoneNumbers}
-                                    onChange={e => {
-                                        this.deepUpdateState({ billingAddress: { phoneNumbers: e.target.value } });
-                                    }}/>
-                            </div>
-                            <div className="field">
-                                <label htmlFor="card">Card Number</label>
-                                <this.props.CardNumberElement
-                                    id="card"
-                                    onReady={() => this.deepUpdateState({ events: { number: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({
-                                        events: {
-                                            number: {
-                                                onChange: {
-                                                    ...data,
-                                                    error: data.error || ''
-                                                }
-                                            }
+        return (
+            <div>
+                <h2>{this.props.title}</h2>
+                <h3>FramePay version: {this.props.Rebilly.version}</h3>
+                <div className="flex-wrapper">
+                    {prettyDebugRender(this.state)}
+                    <div className="example-2">
+                        <form
+                            id="form"
+                            ref={(node) => (this.formNode = node)}
+                            method="post"
+                            onSubmit={this.handleSubmit}
+                        >
+                            <fieldset>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="firstName"
+                                        placeholder="First Name"
+                                        defaultValue={
+                                            this.state.billingAddress.firstName
+                                        }
+                                        onChange={(e) => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    firstName: e.target.value,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="lastName"
+                                        placeholder="Last Name"
+                                        defaultValue={
+                                            this.state.billingAddress.lastName
+                                        }
+                                        onChange={(e) => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    lastName: e.target.value,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="email"
+                                        placeholder="Email"
+                                        defaultValue={
+                                            this.state.billingAddress.emails
+                                        }
+                                        onChange={(e) => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    emails: e.target.value,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="phone"
+                                        placeholder="Phone"
+                                        defaultValue={
+                                            this.state.billingAddress
+                                                .phoneNumbers
+                                        }
+                                        onChange={(e) => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    phoneNumbers:
+                                                        e.target.value,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <label htmlFor="card">Card Number</label>
+                                    <this.props.CardNumberElement
+                                        id="card"
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onReady: true },
+                                                },
+                                            })
                                         }
-                                    })}
-                                    onFocus={() => this.deepUpdateState({ events: { number: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { number: { onBlur: true } } })}
-                                />
-                            </div>
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: {
+                                                        onChange: {
+                                                            ...data,
+                                                            error:
+                                                                data.error ||
+                                                                '',
+                                                        },
+                                                    },
+                                                },
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onBlur: true },
+                                                },
+                                            })
+                                        }
+                                    />
+                                </div>
 
-                            <div className="field">
-                                <label htmlFor="cvv">Card CVV</label>
-                                <this.props.CardCvvElement
-                                    id="cvv"
-                                    onReady={() => this.deepUpdateState({ events: { cvv: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({
-                                        events: {
-                                            cvv: {
-                                                onChange: {
-                                                    ...data,
-                                                    error: data.error || ''
-                                                }
-                                            }
+                                <div className="field">
+                                    <label htmlFor="cvv">Card CVV</label>
+                                    <this.props.CardCvvElement
+                                        id="cvv"
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onReady: true },
+                                                },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: {
+                                                        onChange: {
+                                                            ...data,
+                                                            error:
+                                                                data.error ||
+                                                                '',
+                                                        },
+                                                    },
+                                                },
+                                            })
                                         }
-                                    })}
-                                    onFocus={() => this.deepUpdateState({ events: { cvv: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { cvv: { onBlur: true } } })}
-                                />
-                            </div>
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onBlur: true },
+                                                },
+                                            })
+                                        }
+                                    />
+                                </div>
 
-                            <div className="field">
-                                <label htmlFor="expiry">Card expiry</label>
-                                <this.props.CardExpiryElement
-                                    id="expiry"
-                                    onReady={() => this.deepUpdateState({ events: { expiry: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({
-                                        events: {
-                                            expiry: {
-                                                onChange: {
-                                                    ...data,
-                                                    error: data.error || ''
-                                                }
-                                            }
+                                <div className="field">
+                                    <label htmlFor="expiry">Card expiry</label>
+                                    <this.props.CardExpiryElement
+                                        id="expiry"
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onReady: true },
+                                                },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: {
+                                                        onChange: {
+                                                            ...data,
+                                                            error:
+                                                                data.error ||
+                                                                '',
+                                                        },
+                                                    },
+                                                },
+                                            })
                                         }
-                                    })}
-                                    onFocus={() => this.deepUpdateState({ events: { expiry: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { expiry: { onBlur: true } } })}
-                                />
-                            </div>
-                        </fieldset>
-                        <button id="submit">Make Payment</button>
-                    </form>
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onBlur: true },
+                                                },
+                                            })
+                                        }
+                                    />
+                                </div>
+                            </fieldset>
+                            <button id="submit">Make Payment</button>
+                        </form>
 
-                    <button id="btn-update" onClick={this.handleUpdateSettings}>Update</button>
-                    <button id="btn-restore" onClick={this.handleRestoreSettings}>Restore</button>
+                        <button
+                            id="btn-update"
+                            onClick={this.handleUpdateSettings}
+                        >
+                            Update
+                        </button>
+                        <button
+                            id="btn-restore"
+                            onClick={this.handleRestoreSettings}
+                        >
+                            Restore
+                        </button>
+                    </div>
                 </div>
             </div>
-        </div>);
+        );
     }
 }
 
 const CardElement = withFramePayCardComponent(CardElementComponent);
 
 class App extends Component {
-
     render() {
-        return (<FramePayProvider injectStyle {...params}>
-            <div>
-                {ReactVersion()}
-                <CardElement/>
-            </div>
-        </FramePayProvider>);
+        return (
+            <FramePayProvider injectStyle {...params}>
+                <div>
+                    {ReactVersion()}
+                    <CardElement />
+                </div>
+            </FramePayProvider>
+        );
     }
 }
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));