@rebilly/framepay-react 4.0.6 → 5.0.0

package/src/lib/components/injector.tsx

@@ -1,4 +1,4 @@
-// tslint:disable:max-classes-per-file
+/* eslint-disable @typescript-eslint/ban-types */
 
 import * as React from 'react';
 import { ContextConsumer } from '../context';
@@ -16,19 +16,19 @@ import {
     FramePayComponentProps,
     FramePayGooglePayProps,
     FramePayIBANProps,
-    FramePayPaypalProps
+    FramePayPaypalProps,
 } from '../../../types/injector';
 
 const makeRebillyProps = (data: FramePayContext): RebillyProps =>
     Object.assign(Object.create(data.api || {}), {
         error: data.error,
-        ready: data.ready
+        ready: data.ready,
     }) as RebillyProps;
 
 function Hoc<P extends object>(
     name: string,
     WrappedComponent: React.ComponentType<P>,
-    provider: (data: FramePayContext) => object
+    provider: (data: FramePayContext) => object,
 ) {
     return class extends React.Component<P, {}> {
         static readonly displayName = `withFramePay${name}(${
@@ -72,12 +72,12 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'iban'
-                } as IBANProps)
+                    elementType: 'iban',
+                } as IBANProps),
         );
 
         return {
-            IBANElement
+            IBANElement,
         };
     }
 
@@ -96,8 +96,8 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'bankAccountType'
-                } as BankProps)
+                    elementType: 'bankAccountType',
+                } as BankProps),
         );
 
         /**
@@ -109,8 +109,8 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'bankRoutingNumber'
-                } as BankProps)
+                    elementType: 'bankRoutingNumber',
+                } as BankProps),
         );
 
         /**
@@ -122,14 +122,14 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'bankAccountNumber'
-                } as BankProps)
+                    elementType: 'bankAccountNumber',
+                } as BankProps),
         );
 
         return {
             BankAccountNumberElement,
             BankAccountTypeElement,
-            BankRoutingNumberElement
+            BankRoutingNumberElement,
         };
     }
 
@@ -143,8 +143,8 @@ const elementsFabric = (type: PaymentElements): object => {
             CardElementComponent,
             (data: FramePayContext) =>
                 ({
-                    Rebilly: makeRebillyProps(data)
-                } as CardProps)
+                    Rebilly: makeRebillyProps(data),
+                } as CardProps),
         );
 
         /**
@@ -156,8 +156,8 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'cardCvv'
-                } as CardProps)
+                    elementType: 'cardCvv',
+                } as CardProps),
         );
 
         /**
@@ -169,8 +169,8 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'cardExpiry'
-                } as CardProps)
+                    elementType: 'cardExpiry',
+                } as CardProps),
         );
 
         /**
@@ -182,15 +182,15 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data),
-                    elementType: 'cardNumber'
-                } as CardProps)
+                    elementType: 'cardNumber',
+                } as CardProps),
         );
 
         return {
             CardCvvElement,
             CardElement,
             CardExpiryElement,
-            CardNumberElement
+            CardNumberElement,
         };
     }
 
@@ -204,12 +204,12 @@ const elementsFabric = (type: PaymentElements): object => {
             ApplePayElementComponent,
             (data: FramePayContext) =>
                 ({
-                    Rebilly: makeRebillyProps(data)
-                } as ApplePayProps)
+                    Rebilly: makeRebillyProps(data),
+                } as ApplePayProps),
         );
 
         return {
-            ApplePayElement
+            ApplePayElement,
         };
     }
 
@@ -223,12 +223,12 @@ const elementsFabric = (type: PaymentElements): object => {
             GooglePayElementComponent,
             (data: FramePayContext) =>
                 ({
-                    Rebilly: makeRebillyProps(data)
-                } as GooglePayProps)
+                    Rebilly: makeRebillyProps(data),
+                } as GooglePayProps),
         );
 
         return {
-            GooglePayElement
+            GooglePayElement,
         };
     }
 
@@ -242,12 +242,12 @@ const elementsFabric = (type: PaymentElements): object => {
             PaypalElementComponent,
             (data: FramePayContext) =>
                 ({
-                    Rebilly: makeRebillyProps(data)
-                } as PaypalProps)
+                    Rebilly: makeRebillyProps(data),
+                } as PaypalProps),
         );
 
         return {
-            PaypalElement
+            PaypalElement,
         };
     }
 
@@ -255,14 +255,14 @@ const elementsFabric = (type: PaymentElements): object => {
      * Throw the error by default.
      */
     throw new Error(
-        `Invalid PaymentMethod type, see PaymentMethodTypes declaration`
+        `Invalid PaymentMethod type, see PaymentMethodTypes declaration`,
     );
 };
 
 export function withFramePay<OriginalProps extends object>(
     WrappedComponent: React.ComponentType<
         OriginalProps & FramePayComponentProps
-    >
+    >,
 ) {
     const elements = {
         ...elementsFabric('card'),
@@ -270,7 +270,7 @@ export function withFramePay<OriginalProps extends object>(
         ...elementsFabric('iban'),
         ...elementsFabric('applePay'),
         ...elementsFabric('googlePay'),
-        ...elementsFabric('paypal')
+        ...elementsFabric('paypal'),
     } as FramePayComponentProps;
     return class extends React.Component<OriginalProps, {}> {
         static readonly displayName = `withFramePay(${
@@ -286,7 +286,7 @@ export function withFramePay<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -298,7 +298,7 @@ export function withFramePay<OriginalProps extends object>(
 }
 
 export function withFramePayCardComponent<OriginalProps extends object>(
-    WrappedComponent: React.ComponentType<OriginalProps & FramePayCardProps>
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayCardProps>,
 ) {
     const elements = elementsFabric('card') as FramePayCardProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -315,7 +315,7 @@ export function withFramePayCardComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -327,7 +327,7 @@ export function withFramePayCardComponent<OriginalProps extends object>(
 }
 
 export function withFramePayBankComponent<OriginalProps extends object>(
-    WrappedComponent: React.ComponentType<OriginalProps & FramePayBankProps>
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayBankProps>,
 ) {
     const elements = elementsFabric('bankAccount') as FramePayBankProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -344,7 +344,7 @@ export function withFramePayBankComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -356,7 +356,7 @@ export function withFramePayBankComponent<OriginalProps extends object>(
 }
 
 export function withFramePayIBANComponent<OriginalProps extends object>(
-    WrappedComponent: React.ComponentType<OriginalProps & FramePayIBANProps>
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayIBANProps>,
 ) {
     const elements = elementsFabric('iban') as FramePayIBANProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -373,7 +373,7 @@ export function withFramePayIBANComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -385,7 +385,9 @@ export function withFramePayIBANComponent<OriginalProps extends object>(
 }
 
 export function withFramePayApplePayComponent<OriginalProps extends object>(
-    WrappedComponent: React.ComponentType<OriginalProps & FramePayApplePayProps>
+    WrappedComponent: React.ComponentType<
+        OriginalProps & FramePayApplePayProps
+    >,
 ) {
     const elements = elementsFabric('applePay') as FramePayApplePayProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -402,7 +404,7 @@ export function withFramePayApplePayComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -416,7 +418,7 @@ export function withFramePayApplePayComponent<OriginalProps extends object>(
 export function withFramePayGooglePayComponent<OriginalProps extends object>(
     WrappedComponent: React.ComponentType<
         OriginalProps & FramePayGooglePayProps
-    >
+    >,
 ) {
     const elements = elementsFabric('googlePay') as FramePayGooglePayProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -433,7 +435,7 @@ export function withFramePayGooglePayComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );
@@ -445,7 +447,7 @@ export function withFramePayGooglePayComponent<OriginalProps extends object>(
 }
 
 export function withFramePayPaypalComponent<OriginalProps extends object>(
-    WrappedComponent: React.ComponentType<OriginalProps & FramePayPaypalProps>
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayPaypalProps>,
 ) {
     const elements = elementsFabric('paypal') as FramePayPaypalProps;
     return class extends React.Component<OriginalProps, {}> {
@@ -462,7 +464,7 @@ export function withFramePayPaypalComponent<OriginalProps extends object>(
                                 {...{
                                     ...this.props,
                                     ...elements,
-                                    Rebilly: makeRebillyProps(data)
+                                    Rebilly: makeRebillyProps(data),
                                 }}
                             />
                         );

package/src/lib/components/provider.spec.tsx

@@ -1,5 +1,3 @@
-// tslint:disable:max-classes-per-file
-
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { FRAMEPAY_SCRIPT_LINK, FRAMEPAY_STYLE_LINK } from '../constants';
@@ -20,7 +18,7 @@ describe('Provider', () => {
         render(
             <Provider {...props}>
                 <ChildComponent />
-            </Provider>
+            </Provider>,
         );
         expect(document.head.innerHTML).toContain(FRAMEPAY_SCRIPT_LINK);
     });
@@ -28,7 +26,7 @@ describe('Provider', () => {
     it('should add the FramePay styles on the page', () => {
         const props = {
             injectStyle: true,
-            publishableKey: 'pk_sandbox_1234567890'
+            publishableKey: 'pk_sandbox_1234567890',
         };
 
         class ChildComponent extends React.Component {
@@ -41,7 +39,7 @@ describe('Provider', () => {
         render(
             <Provider {...props}>
                 <ChildComponent />
-            </Provider>
+            </Provider>,
         );
         expect(document.head.innerHTML).toContain(FRAMEPAY_STYLE_LINK);
     });
@@ -58,7 +56,7 @@ describe('Provider', () => {
         const { container } = render(
             <Provider {...props}>
                 <ChildComponent />
-            </Provider>
+            </Provider>,
         );
         expect(container.firstChild).toMatchInlineSnapshot(`
             <div>
@@ -82,7 +80,7 @@ describe('Provider', () => {
             <Provider {...props}>
                 <ChildComponent title="child-1" />
                 <ChildComponent title="child-2" />
-            </Provider>
+            </Provider>,
         );
         expect(container).toMatchInlineSnapshot(`
             <div>

package/src/lib/components/provider.tsx

@@ -14,20 +14,20 @@ export default class Provider extends React.Component<
         injectStyle: false,
         onError: () => ({}),
         onReady: () => ({}),
-        onTokenReady: () => ({})
+        onTokenReady: () => ({}),
     };
 
     readonly state: FramePayContext = {
         api: getRebillyApi(),
         error: null,
-        ready: false
+        ready: false,
     };
 
     componentDidMount() {
         if (this.props.injectScript) {
             injectScript({
                 onError: () => this.onApiError(),
-                onReady: () => this.onApiReady()
+                onReady: () => this.onApiReady(),
             });
         }
         if (this.props.injectStyle) {
@@ -39,24 +39,23 @@ export default class Provider extends React.Component<
         return this.setState(
             {
                 error: FramePayError.codes.remoteScriptError,
-                ready: false
+                ready: false,
             },
             () => {
                 const error = FramePayError({
                     code: FramePayError.codes.remoteScriptError,
-                    details: `Remote CDN link "${FRAMEPAY_SCRIPT_LINK}"`
+                    details: `Remote CDN link "${FRAMEPAY_SCRIPT_LINK}"`,
                 });
                 throw error;
-            }
+            },
         );
     }
 
     async onApiReady() {
         const api = getRebillyApi();
         try {
-            // tslint:disable:no-shadowed-variable
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { injectStyle, children, ...settings } = this.props;
-            // tslint:enable:no-shadowed-variable
             api.initialize(settings);
             api.on('ready', () => {
                 this.setState({ ready: true, api, error: null });
@@ -66,20 +65,21 @@ export default class Provider extends React.Component<
                     this.props.onReady();
                 }
             });
-            api.on('error', error => {
+            api.on('error', (error) => {
                 this.setState({
                     api,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     error: (error as any).code,
-                    ready: false
+                    ready: false,
                 });
 
                 // call error callback
                 if (this.props.onError) {
-                    // @ts-ignore
+                    // @ts-ignore todo fix typing issues
                     this.props.onError(error);
                 }
             });
-            api.on('token-ready', token => {
+            api.on('token-ready', (token) => {
                 if (this.props.onTokenReady) {
                     this.props.onTokenReady(token);
                 }
@@ -88,15 +88,15 @@ export default class Provider extends React.Component<
             return this.setState(
                 {
                     error: FramePayError.codes.initializeError,
-                    ready: false
+                    ready: false,
                 },
                 () => {
                     throw FramePayError({
                         code: FramePayError.codes.initializeError,
                         details: 'Api initialize error',
-                        trace: e
+                        trace: e,
                     });
-                }
+                },
             );
         }
     }

package/src/lib/constants.ts

@@ -39,5 +39,5 @@ export const SUPPORTED_CARD_BRANDS: SupportedCardBrandsObject = {
     JCB: SupportedCardBrands.JCB,
     Maestro: SupportedCardBrands.Maestro,
     MasterCard: SupportedCardBrands.MasterCard,
-    Visa: SupportedCardBrands.Visa
+    Visa: SupportedCardBrands.Visa,
 };

package/src/lib/context.ts

@@ -5,13 +5,11 @@ import getRebillyApi from './get-rebilly-api';
 const defaultContextValue = {
     api: getRebillyApi(),
     error: null,
-    ready: false
+    ready: false,
 };
 
-// tslint:disable:no-let
 let ProvidedContext;
 if (/^15.*/.test(REACT_VERSION) || /^0.14.*/.test(REACT_VERSION)) {
-    // tslint:disable:no-var-requires
     const createReactContext = require('create-react-context');
     ProvidedContext = createReactContext(defaultContextValue);
 } else {

package/src/lib/dom-util.ts

@@ -6,7 +6,6 @@ interface ScriptProperties {
 }
 
 export const injectScript = ({ onReady, onError }: ScriptProperties) => {
-    // tslint:disable:no-expression-statement
     const script = document.createElement('script');
     const header = document.querySelector('head');
     script.setAttribute('type', 'text/javascript');
@@ -19,11 +18,9 @@ export const injectScript = ({ onReady, onError }: ScriptProperties) => {
     if (header) {
         header.appendChild(script);
     }
-    // tslint:enable:no-expression-statement
 };
 
 export const injectStyle = () => {
-    // tslint:disable:no-expression-statement
     const style = document.createElement('link');
     const header = document.querySelector('head');
     style.setAttribute('rel', 'stylesheet');
@@ -31,5 +28,4 @@ export const injectStyle = () => {
     if (header) {
         header.appendChild(style);
     }
-    // tslint:enable:no-expression-statement
 };

package/src/lib/framepay-error.ts

@@ -1,7 +1,7 @@
 export const ERROR_CODES = {
     elementMountError: 'element-mount-error',
     initializeError: 'initialize-error',
-    remoteScriptError: 'remote-script-error'
+    remoteScriptError: 'remote-script-error',
 } as ErrorCodes;
 
 export const defaultErrorMessages = {
@@ -10,29 +10,31 @@ export const defaultErrorMessages = {
     [ERROR_CODES.initializeError]: `
         FramePay initialize error\r\n
         See https://github.com/Rebilly/framepay-react/tree/alpha#the-framepay-context-framepayprovider\r\n
-        See https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-initialize`
+        See https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-initialize`,
 } as DefaultErrorMessages;
 
 class ErrorBuilder {
     make({
         code,
         details,
-        trace
+        trace,
     }: {
         readonly code: FramePayErrorCode;
         readonly details: string;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         readonly trace: any;
     }): {
         readonly code: FramePayErrorCode;
         readonly details: string;
         readonly message: DefaultErrorMessage;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         readonly trace: any;
     } {
         return {
             code,
             details,
             message: defaultErrorMessages[code],
-            trace: trace || null
+            trace: trace || null,
         };
     }
 }
@@ -42,16 +44,17 @@ const handler = new ErrorBuilder();
 const FramePayError = ({
     code,
     details = '',
-    trace = ''
+    trace = '',
 }: {
     readonly code: FramePayErrorCode;
     readonly details?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     readonly trace?: any;
 }) =>
     handler.make({
         code,
         details,
-        trace
+        trace,
     });
 
 FramePayError.codes = ERROR_CODES;

package/src/lib/get-rebilly-api.ts

@@ -2,7 +2,7 @@
  * Just simple wrapper of remote FramePay api
  */
 const remoteApi = (): RebillyApi => {
-    // @ts-ignore
+    // @ts-ignore todo setup typescript config correctly
     return typeof window !== 'undefined' ? window.Rebilly : undefined;
 };
 

package/test/e2e/cypress-support.js

@@ -1,2 +1,2 @@
 import '@testing-library/cypress/add-commands';
-import 'cypress-iframe';
+import 'cypress-iframe';

package/test/e2e/fixtures/apple-pay.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import {
     FramePayProvider,
-    withFramePayApplePayComponent
+    withFramePayApplePayComponent,
 } from '../../../build';
 import { prettyDebugRender, ReactVersion } from './util';
 import './style.css';
@@ -20,7 +20,6 @@ const params = {
 };
 
 class App extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -36,10 +35,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()}
@@ -57,7 +56,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayApplePayComponent(App);
-ReactDOM.render(
-    <WrappedApp />,
-    document.getElementById('app')
-);
+ReactDOM.render(<WrappedApp />, document.getElementById('app'));