@rebilly/framepay-react 2.0.1 → 2.1.0

package/src/lib/components/injector.tsx

@@ -0,0 +1,495 @@
+// tslint:disable:max-classes-per-file
+
+import * as React from 'react';
+import { ContextConsumer } from '../context';
+import ApplePayElementComponent from './elements/applepay-element';
+import BankElementComponent from './elements/bank-element';
+import CardElementComponent from './elements/card-element';
+import GooglePayElementComponent from './elements/googlepay-element';
+import IBANElementComponent from './elements/iban-element';
+import PaypalElementComponent from './elements/paypal-element';
+
+import {
+    FramePayApplePayProps,
+    FramePayBankProps,
+    FramePayCardProps,
+    FramePayComponentProps,
+    FramePayGooglePayProps,
+    FramePayIBANProps,
+    FramePayPaypalProps
+} from '../../../types/injector';
+
+const makeRebillyProps = (data: FramePayContext): RebillyProps =>
+    Object.assign(Object.create(data.api || {}), {
+        error: data.error,
+        ready: data.ready
+    }) as RebillyProps;
+
+function Hoc<P extends object>(
+    name: string,
+    WrappedComponent: React.ComponentType<P>,
+    provider: (data: FramePayContext) => object
+) {
+    return class extends React.Component<P, {}> {
+        static readonly displayName = `withFramePay${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        const provided = provider(data);
+                        return (
+                            <WrappedComponent
+                                {...{ ...this.props, ...provided }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+/**
+ * Returns the PaymentElementWrapper elements.
+ *
+ * @param type {string} PaymentElements
+ */
+const elementsFabric = (type: PaymentElements): object => {
+    if (type === 'iban') {
+        /**
+         * IBAN
+         */
+
+        /**
+         * IBAN number element
+         */
+        const IBANElement = Hoc(
+            'IBANElement',
+            IBANElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'iban'
+                } as IBANProps)
+        );
+
+        return {
+            IBANElement
+        };
+    }
+
+    if (type === 'bankAccount') {
+        /**
+         * BankAccount
+         * @see https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-bankaccount-mount
+         */
+
+        /**
+         * Bank AccountType Element
+         */
+        const BankAccountTypeElement = Hoc(
+            'BankAccountTypeElement',
+            BankElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'bankAccountType'
+                } as BankProps)
+        );
+
+        /**
+         * BankRoutingNumber Element
+         */
+        const BankRoutingNumberElement = Hoc(
+            'BankRoutingNumberElement',
+            BankElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'bankRoutingNumber'
+                } as BankProps)
+        );
+
+        /**
+         * Bank AccountNumber Element
+         */
+        const BankAccountNumberElement = Hoc(
+            'BankAccountNumberElement',
+            BankElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'bankAccountNumber'
+                } as BankProps)
+        );
+
+        return {
+            BankAccountNumberElement,
+            BankAccountTypeElement,
+            BankRoutingNumberElement
+        };
+    }
+
+    if (type === 'card') {
+        /**
+         * Default Card Element
+         * @see https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-card-mount
+         */
+        const CardElement = Hoc(
+            'CardElement',
+            CardElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data)
+                } as CardProps)
+        );
+
+        /**
+         * Card CVV Element
+         */
+        const CardCvvElement = Hoc(
+            'CardCvvElement',
+            CardElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'cardCvv'
+                } as CardProps)
+        );
+
+        /**
+         * Card Expiry Element
+         */
+        const CardExpiryElement = Hoc(
+            'CardExpiryElement',
+            CardElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'cardExpiry'
+                } as CardProps)
+        );
+
+        /**
+         * Card Number Element
+         */
+        const CardNumberElement = Hoc(
+            'CardNumberElement',
+            CardElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data),
+                    elementType: 'cardNumber'
+                } as CardProps)
+        );
+
+        return {
+            CardCvvElement,
+            CardElement,
+            CardExpiryElement,
+            CardNumberElement
+        };
+    }
+
+    if (type === 'applePay') {
+        /**
+         * Apple Pay
+         */
+
+        const ApplePayElement = Hoc(
+            'ApplePayElement',
+            ApplePayElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data)
+                } as ApplePayProps)
+        );
+
+        return {
+            ApplePayElement
+        };
+    }
+
+    if (type === 'googlePay') {
+        /**
+         * Google Pay
+         */
+
+        const GooglePayElement = Hoc(
+            'GooglePayElement',
+            GooglePayElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data)
+                } as GooglePayProps)
+        );
+
+        return {
+            GooglePayElement
+        };
+    }
+
+    if (type === 'paypal') {
+        /**
+         * Paypal
+         */
+
+        const PaypalElement = Hoc(
+            'PaypalElement',
+            PaypalElementComponent,
+            (data: FramePayContext) =>
+                ({
+                    Rebilly: makeRebillyProps(data)
+                } as PaypalProps)
+        );
+
+        return {
+            PaypalElement
+        };
+    }
+
+    /**
+     * Throw the error by default.
+     */
+    throw new Error(
+        `Invalid PaymentMethod type, see PaymentMethodTypes declaration`
+    );
+};
+
+export function withFramePay<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<
+        OriginalProps & FramePayComponentProps
+    >
+) {
+    const elements = {
+        ...elementsFabric('card'),
+        ...elementsFabric('bankAccount'),
+        ...elementsFabric('iban'),
+        ...elementsFabric('applePay'),
+        ...elementsFabric('googlePay'),
+        ...elementsFabric('paypal')
+    };
+    return class extends React.Component<
+        OriginalProps & FramePayComponentProps,
+        {}
+    > {
+        static readonly displayName = `withFramePay${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayCardComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayCardProps>
+) {
+    const elements = elementsFabric('card');
+    return class extends React.Component<
+        OriginalProps & FramePayCardProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayCardComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayBankComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayBankProps>
+) {
+    const elements = elementsFabric('bankAccount');
+    return class extends React.Component<
+        OriginalProps & FramePayBankProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayBankComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayIBANComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayIBANProps>
+) {
+    const elements = elementsFabric('iban');
+    return class extends React.Component<
+        OriginalProps & FramePayIBANProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayIBANComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayApplePayComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayApplePayProps>
+) {
+    const elements = elementsFabric('applePay');
+    return class extends React.Component<
+        OriginalProps & FramePayApplePayProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayApplePayComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayGooglePayComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<
+        OriginalProps & FramePayGooglePayProps
+    >
+) {
+    const elements = elementsFabric('googlePay');
+    return class extends React.Component<
+        OriginalProps & FramePayGooglePayProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayGooglePayComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
+
+export function withFramePayPaypalComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayPaypalProps>
+) {
+    const elements = elementsFabric('paypal');
+    return class extends React.Component<
+        OriginalProps & FramePayPaypalProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayPaypalComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}

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

@@ -0,0 +1,98 @@
+// 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';
+import Provider from './provider';
+
+describe('Provider', () => {
+    it('should add the FramePay script on the page', () => {
+        const props = { publishableKey: 'pk_sandbox_1234567890' };
+
+        class ChildComponent extends React.Component {
+            render() {
+                return <div>child</div>;
+            }
+        }
+
+        expect(document.head.innerHTML).not.toContain(FRAMEPAY_SCRIPT_LINK);
+
+        render(
+            <Provider {...props}>
+                <ChildComponent />
+            </Provider>
+        );
+        expect(document.head.innerHTML).toContain(FRAMEPAY_SCRIPT_LINK);
+    });
+
+    it('should add the FramePay styles on the page', () => {
+        const props = {
+            injectStyle: true,
+            publishableKey: 'pk_sandbox_1234567890'
+        };
+
+        class ChildComponent extends React.Component {
+            render() {
+                return <div>child</div>;
+            }
+        }
+
+        expect(document.head.innerHTML).not.toContain(FRAMEPAY_STYLE_LINK);
+        render(
+            <Provider {...props}>
+                <ChildComponent />
+            </Provider>
+        );
+        expect(document.head.innerHTML).toContain(FRAMEPAY_STYLE_LINK);
+    });
+
+    it('should render with single child component', () => {
+        const props = { publishableKey: 'pk_sandbox_1234567890' };
+
+        class ChildComponent extends React.Component {
+            render() {
+                return <div>child</div>;
+            }
+        }
+
+        const { container } = render(
+            <Provider {...props}>
+                <ChildComponent />
+            </Provider>
+        );
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div>
+              child
+            </div>
+        `);
+    });
+
+    it('should render with multiple child components', () => {
+        const props = { publishableKey: 'pk_sandbox_1234567890' };
+
+        class ChildComponent extends React.Component<{
+            readonly title: string;
+        }> {
+            render() {
+                return <div>{this.props.title}</div>;
+            }
+        }
+
+        const { container } = render(
+            <Provider {...props}>
+                <ChildComponent title="child-1" />
+                <ChildComponent title="child-2" />
+            </Provider>
+        );
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <div>
+                child-1
+              </div>
+              <div>
+                child-2
+              </div>
+            </div>
+        `);
+    });
+});

package/src/lib/components/provider.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { FRAMEPAY_SCRIPT_LINK } from '../constants';
+import { ContextProvider } from '../context';
+import { injectScript, injectStyle } from '../dom-util';
+import FramePayError from '../framepay-error';
+import getRebillyApi from '../get-rebilly-api';
+
+export default class Provider extends React.Component<
+    ProviderProps,
+    FramePayContext
+> {
+    static readonly defaultProps = {
+        injectScript: true,
+        injectStyle: false,
+        onError: () => ({}),
+        onReady: () => ({}),
+        onTokenReady: () => ({})
+    };
+
+    readonly state: FramePayContext = {
+        api: getRebillyApi(),
+        error: null,
+        ready: false
+    };
+
+    componentDidMount() {
+        if (this.props.injectScript) {
+            injectScript({
+                onError: () => this.onApiError(),
+                onReady: () => this.onApiReady()
+            });
+        }
+        if (this.props.injectStyle) {
+            injectStyle();
+        }
+    }
+
+    onApiError() {
+        return this.setState(
+            {
+                error: FramePayError.codes.remoteScriptError,
+                ready: false
+            },
+            () => {
+                const error = FramePayError({
+                    code: FramePayError.codes.remoteScriptError,
+                    details: `Remote CDN link "${FRAMEPAY_SCRIPT_LINK}"`
+                });
+                throw error;
+            }
+        );
+    }
+
+    async onApiReady() {
+        const api = getRebillyApi();
+        try {
+            // tslint:disable:no-shadowed-variable
+            const { injectStyle, children, ...settings } = this.props;
+            // tslint:enable:no-shadowed-variable
+            api.initialize(settings);
+            api.on('ready', () => {
+                this.setState({ ready: true, api, error: null });
+
+                // call onReady callback
+                if (this.props.onReady) {
+                    this.props.onReady();
+                }
+            });
+            api.on('error', error => {
+                this.setState({
+                    api,
+                    error: (error as any).code,
+                    ready: false
+                });
+
+                // call error callback
+                if (this.props.onError) {
+                    // @ts-ignore
+                    this.props.onError(error);
+                }
+            });
+            api.on('token-ready', token => {
+                if (this.props.onTokenReady) {
+                    this.props.onTokenReady(token);
+                }
+            });
+        } catch (e) {
+            return this.setState(
+                {
+                    error: FramePayError.codes.initializeError,
+                    ready: false
+                },
+                () => {
+                    throw FramePayError({
+                        code: FramePayError.codes.initializeError,
+                        details: 'Api initialize error',
+                        trace: e
+                    });
+                }
+            );
+        }
+    }
+
+    render() {
+        return (
+            <ContextProvider value={this.state}>
+                {this.props.children}
+            </ContextProvider>
+        );
+    }
+}