@rebilly/framepay-react 2.0.1 → 2.1.0

package/.env.example

@@ -0,0 +1,2 @@
+FRAMEPAY_SCRIPT_LINK="https://framepay.rebilly.com/rebilly.js"
+FRAMEPAY_STYLE_LINK="https://framepay.rebilly.com/rebilly.css"

package/CHANGELOG.md

@@ -1 +1,8 @@
+## [2.1.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v2.0.1...framepay-react-v2.1.0) (2023-03-22)
+
+
+### Features
+
+* add src files to contents of framepay-react package ([#51](https://github.com/Rebilly/rebilly/issues/51)) ([7b03ac1](https://github.com/Rebilly/rebilly/commit/7b03ac11af8b8da17b84926cbe46b37a285bf518))
+
 ## [2.0.1](https://github.com/Rebilly/rebilly/compare/framepay-react-v2.0.0...framepay-react-v2.0.1) (2023-03-15)

package/env.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * Load the environment variables from .env into the process.env
+ * @see env.example
+ *
+ */
+require('dotenv').config();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "description": "A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features",
     "main": "build/index.js",
     "author": "Rebilly",
@@ -18,7 +18,15 @@
     "files": [
         "build",
         "types",
-        "CHANGELOG.md"
+        "CHANGELOG.md",
+        "src",
+        "test",
+        ".env.example",
+        "LICENSE",
+        "env.js",
+        "tsconfig.json",
+        "tsconfig.spec.json",
+        "tslint.json"
     ],
     "scripts": {
         "set-react-14": "cross-env REACT_VERSION=0.14.0 node ./test/e2e/switch-react-version",

package/src/index.spec.ts

@@ -0,0 +1,19 @@
+import * as lib from './index';
+
+const exportKeys: ReadonlyArray<string> = [
+    'SUPPORTED_CARD_BRANDS',
+    'FramePayProvider',
+    'withFramePay',
+    'withFramePayApplePayComponent',
+    'withFramePayCardComponent',
+    'withFramePayBankComponent',
+    'withFramePayGooglePayComponent',
+    'withFramePayIBANComponent',
+    'withFramePayPaypalComponent'
+].sort();
+
+describe('lib/index', () => {
+    it('Library exports list correctly', () => {
+        expect(Object.keys(lib).sort()).toEqual(exportKeys);
+    });
+});

package/src/index.ts

@@ -0,0 +1,42 @@
+import { SUPPORTED_CARD_BRANDS } from './lib/constants';
+
+import {
+    withFramePay,
+    withFramePayApplePayComponent,
+    withFramePayBankComponent,
+    withFramePayCardComponent,
+    withFramePayGooglePayComponent,
+    withFramePayIBANComponent,
+    withFramePayPaypalComponent
+} from './lib/components/injector';
+
+import FramePayProvider from './lib/components/provider';
+
+import {
+    FramePayApplePayProps,
+    FramePayBankProps,
+    FramePayCardProps,
+    FramePayComponentProps,
+    FramePayGooglePayProps,
+    FramePayIBANProps,
+    FramePayPaypalProps
+} from '../types/injector';
+
+export {
+    SUPPORTED_CARD_BRANDS,
+    FramePayProvider,
+    withFramePay,
+    withFramePayCardComponent,
+    withFramePayBankComponent,
+    withFramePayIBANComponent,
+    withFramePayApplePayComponent,
+    withFramePayGooglePayComponent,
+    withFramePayPaypalComponent,
+    FramePayComponentProps,
+    FramePayCardProps,
+    FramePayBankProps,
+    FramePayIBANProps,
+    FramePayApplePayProps,
+    FramePayGooglePayProps,
+    FramePayPaypalProps
+};

package/src/lib/components/elements/applepay-element.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class ApplePayElement extends BaseElement<
+    ApplePayProps,
+    ApplePayState
+> {
+    setupElement() {
+        const { Rebilly } = this.props;
+
+        const makeElement = () => {
+            // elementNode already checked in BaseElement.handleSetupElement
+            // just ts checks fix
+            if (!this.elementNode) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `ApplePayElement invalid elementNode`
+                });
+            }
+
+            try {
+                return Rebilly.applePay.mount(this.elementNode);
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `ApplePayElement error in remote api call`,
+                    trace: e
+                });
+            }
+        };
+
+        const element = makeElement();
+        this.setState({ element });
+    }
+}

package/src/lib/components/elements/bank-element.spec.tsx

@@ -0,0 +1,119 @@
+import { Arg, Substitute } from '@fluffy-spoon/substitute';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BankElement from './bank-element';
+
+describe('BankElement', () => {
+    it('should not setup the element while api is not ready', () => {
+        const props = Substitute.for<BankProps>();
+
+        const setupElementSpy = jest.spyOn(
+            BankElement.prototype,
+            'setupElement'
+        );
+
+        render(
+            <BankElement
+                {...props}
+                Rebilly={{
+                    ...props.Rebilly,
+                    bankAccount: props.Rebilly.bankAccount,
+                    ready: false
+                }}
+                elementType="bankRoutingNumber"
+            />
+        );
+
+        expect(setupElementSpy).not.toHaveBeenCalled();
+    });
+
+    it('should setup the element when api is ready', () => {
+        const props = Substitute.for<BankProps>();
+
+        const setupElementSpy = jest.spyOn(
+            BankElement.prototype,
+            'setupElement'
+        );
+
+        render(
+            <BankElement
+                {...props}
+                Rebilly={{
+                    ...props.Rebilly,
+                    bankAccount: props.Rebilly.bankAccount,
+                    ready: true
+                }}
+                elementType="bankAccountType"
+            />
+        );
+
+        expect(setupElementSpy).toHaveBeenCalled();
+    });
+
+    it('should destroy the element on component unmount', done => {
+        const props = Substitute.for<BankProps>();
+        const element = Substitute.for<PaymentElement>();
+
+        element.destroy().mimicks(() => {
+            done();
+        });
+
+        props.Rebilly.bankAccount.mount(Arg.any(), Arg.any()).returns(element);
+
+        class TmpComponent extends React.Component {
+            render() {
+                return (
+                    <BankElement
+                        {...props}
+                        Rebilly={{
+                            ...props.Rebilly,
+                            bankAccount: props.Rebilly.bankAccount,
+                            ready: true
+                        }}
+                        elementType="bankRoutingNumber"
+                    />
+                );
+            }
+        }
+
+        const { unmount } = render(<TmpComponent />);
+        unmount();
+    });
+
+    it('should render the empty div element', () => {
+        const props = Substitute.for<BankProps>();
+
+        props.Rebilly.ready.returns(true);
+
+        const { container } = render(
+            <BankElement {...props} Rebilly={props.Rebilly} />
+        );
+        expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
+    });
+
+    it('should fail the element mount on remote error', () => {
+        const props = Substitute.for<BankProps>();
+
+        try {
+            render(
+                <BankElement
+                    {...props}
+                    Rebilly={{
+                        ...props.Rebilly,
+                        bankAccount: {
+                            ...props.Rebilly.bankAccount,
+                            mount: null
+                        },
+                        ready: true
+                    }}
+                    elementType="bankAccountNumber"
+                />
+            );
+            // never
+            expect(true).toEqual(false);
+        } catch (error) {
+            expect(error.code).toEqual(FramePayError.codes.elementMountError);
+        }
+    });
+});

package/src/lib/components/elements/bank-element.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class BankElement extends BaseElement<BankProps, BankState> {
+    setupElement() {
+        const { onReady, onChange, onFocus, onBlur, elementType } = this.props;
+
+        const makeElement = () => {
+            // elementNode already checked in BaseElement.handleSetupElement
+            // just ts checks fix
+            if (!this.elementNode) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `BankElement invalid elementNode, elementType: ${elementType ||
+                        'default'}`
+                });
+            }
+
+            try {
+                return this.props.Rebilly.bankAccount.mount(
+                    this.elementNode,
+                    elementType
+                );
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `BankElement error in remote api call, elementType: ${elementType ||
+                        'default'}`,
+                    trace: e
+                });
+            }
+        };
+
+        const element = makeElement();
+
+        try {
+            element.on('ready', () => {
+                this.setState({ ready: true }, () => {
+                    if (onReady) {
+                        onReady();
+                    }
+                });
+            });
+
+            element.on('change', (data: PaymentElementOnChangeEventData) => {
+                if (onChange) {
+                    onChange(data);
+                }
+            });
+
+            element.on('focus', () => {
+                if (onFocus) {
+                    onFocus();
+                }
+            });
+
+            element.on('blur', () => {
+                if (onBlur) {
+                    onBlur();
+                }
+            });
+
+            this.setState({ element });
+        } catch (e) {
+            throw FramePayError({
+                code: FramePayError.codes.elementMountError,
+                details: `BankElement events binding error, elementType: ${elementType ||
+                    'default'}`,
+                trace: e
+            });
+        }
+    }
+}

package/src/lib/components/elements/base-element.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+export default class BaseElement<
+    T extends PaymentComponentProps,
+    S extends PaymentComponentState
+> extends React.Component<T, S> {
+    readonly state = {
+        element: null,
+        mounted: false,
+        ready: false
+    } as S;
+
+    /* tslint:disable:readonly-keyword */
+    protected elementNode: HTMLDivElement | null = null;
+
+    /* tslint:enable:readonly-keyword */
+
+    componentWillUnmount() {
+        if (this.state.mounted && !this.state.element) {
+            // tslint:disable-next-line:no-console
+            console.log(
+                `WARNING Element does not exist, please fix the setupElement method and add setState({element})`
+            );
+            return;
+        }
+        if (this.state.element) {
+            this.state.element.destroy();
+        }
+    }
+
+    componentDidMount() {
+        this.handleSetupElement();
+    }
+
+    setupElement() {
+        throw new Error(`Please implement method setupElement`);
+    }
+
+    handleSetupElement() {
+        if (!this.props.Rebilly.ready) {
+            /**
+             * The remote api isn't ready
+             */
+            return;
+        }
+        if (this.state.mounted) {
+            /**
+             * The field already mounted
+             */
+            return;
+        }
+        if (!this.elementNode) {
+            /**
+             * Component dom element not mounted
+             */
+            return;
+        }
+        /**
+         * Setup field
+         */
+        // @ts-ignore
+        this.state.mounted = true;
+        this.setupElement();
+    }
+
+    shouldComponentUpdate(nextProps: any, nextState: any) {
+        // we can't use the componentDidUpdate, componentWillReceiveProps methods
+        // also, we can't return true here (to avoid the dom element re-render)
+        // so, in that case we had to use that method as componentDidUpdate or componentWillReceiveProps
+        // with some magic
+        const rules: ReadonlyArray<any> = [
+            // @ts-ignore
+            [this.props.Rebilly.ready, nextProps.Rebilly.ready],
+            // @ts-ignore
+            [this.state.mounted, nextState.mounted],
+            // @ts-ignore
+            [this.state.ready, nextState.ready],
+            // @ts-ignore
+            [!!this.state.element, !!nextState.element]
+        ];
+
+        const shouldUpdate = rules.find(([prev, next]) => prev !== next);
+
+        if (shouldUpdate) {
+            // @ts-ignore
+            this.props = nextProps;
+            this.handleSetupElement();
+            // @ts-ignore
+            this.state = { ...nextState };
+        }
+
+        return false;
+    }
+
+    render() {
+        return (
+            <div id={this.props.id} ref={node => (this.elementNode = node)} />
+        );
+    }
+}

package/src/lib/components/elements/card-element.spec.tsx

@@ -0,0 +1,113 @@
+import { Substitute } from '@fluffy-spoon/substitute';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import CardElement from './card-element';
+
+describe('CardElement', () => {
+    it('should not setup the element while api is not ready', () => {
+        const props = Substitute.for<CardProps>();
+
+        props.Rebilly.ready.returns(false);
+
+        const setupElementSpy = jest.spyOn(
+            CardElement.prototype,
+            'setupElement'
+        );
+
+        render(<CardElement {...props} Rebilly={props.Rebilly} />);
+
+        expect(setupElementSpy).not.toHaveBeenCalled();
+    });
+
+    it('should setup the element when api is ready', () => {
+        const props = Substitute.for<CardProps>();
+        const setupElementSpy = jest.spyOn(
+            CardElement.prototype,
+            'setupElement'
+        );
+
+        const { rerender } = render(
+            <CardElement
+                Rebilly={{
+                    ready: false
+                }}
+            />
+        );
+
+        expect(setupElementSpy).toHaveBeenCalledTimes(0);
+
+        rerender(
+            <CardElement
+                Rebilly={{
+                    card: props.Rebilly.card,
+                    ready: true
+                }}
+            />
+        );
+
+        expect(setupElementSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render the empty div element', () => {
+        const props = Substitute.for<CardProps>();
+        const { container } = render(
+            <CardElement {...props} Rebilly={props.Rebilly} />
+        );
+        expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
+    });
+
+    it('should destroy the element on component unmount', done => {
+        const props = Substitute.for<CardProps>();
+        const element = Substitute.for<PaymentElement>();
+
+        element.destroy().mimicks(() => {
+            done();
+        });
+
+        class TmpComponent extends React.Component {
+            render() {
+                return (
+                    <CardElement
+                        {...props}
+                        Rebilly={{
+                            ...props.Rebilly,
+                            card: {
+                                ...props.Rebilly.card,
+                                mount: () => element
+                            },
+                            ready: true
+                        }}
+                    />
+                );
+            }
+        }
+
+        const { unmount } = render(<TmpComponent />);
+        unmount();
+    });
+
+    it('should fail the element mount on remote error', () => {
+        const props = Substitute.for<CardProps>();
+
+        try {
+            render(
+                <CardElement
+                    {...props}
+                    Rebilly={{
+                        ...props.Rebilly,
+                        card: {
+                            ...props.Rebilly.card,
+                            mount: null
+                        },
+                        ready: true
+                    }}
+                />
+            );
+            // never
+            expect(true).toEqual(false);
+        } catch (error) {
+            expect(error.code).toEqual(FramePayError.codes.elementMountError);
+        }
+    });
+});

package/src/lib/components/elements/card-element.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class CardElement extends BaseElement<CardProps, CardState> {
+    setupElement() {
+        const { onReady, onChange, onFocus, onBlur, elementType } = this.props;
+
+        const makeElement = () => {
+            // elementNode already checked in BaseElement.handleSetupElement
+            // just ts checks fix
+            if (!this.elementNode) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `CardElement invalid elementNode, elementType: ${elementType ||
+                        'default'}`
+                });
+            }
+
+            try {
+                return this.props.Rebilly.card.mount(
+                    this.elementNode,
+                    elementType
+                );
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `CardElement error in remote api call, elementType: ${elementType ||
+                        'default'}`,
+                    trace: e
+                });
+            }
+        };
+
+        const element = makeElement();
+
+        try {
+            element.on('ready', () => {
+                this.setState({ ready: true }, () => {
+                    if (onReady) {
+                        onReady();
+                    }
+                });
+            });
+
+            element.on('change', (data: PaymentElementOnChangeEventData) => {
+                if (onChange) {
+                    onChange(data);
+                }
+            });
+
+            element.on('focus', () => {
+                if (onFocus) {
+                    onFocus();
+                }
+            });
+            element.on('blur', () => {
+                if (onBlur) {
+                    onBlur();
+                }
+            });
+
+            this.setState({ element });
+        } catch (e) {
+            throw FramePayError({
+                code: FramePayError.codes.elementMountError,
+                details: `CardElement events binding error, elementType: ${elementType ||
+                    'default'}`,
+                trace: e
+            });
+        }
+    }
+}

package/src/lib/components/elements/googlepay-element.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class GooglePayElement extends BaseElement<
+    GooglePayProps,
+    GooglePayState
+> {
+    setupElement() {
+        const { Rebilly } = this.props;
+
+        const makeElement = () => {
+            // elementNode already checked in BaseElement.handleSetupElement
+            // just ts checks fix
+            if (!this.elementNode) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `GooglePayElement invalid elementNode`
+                });
+            }
+
+            try {
+                return Rebilly.googlePay.mount(this.elementNode);
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `GooglePayElement error in remote api call`,
+                    trace: e
+                });
+            }
+        };
+
+        const element = makeElement();
+        this.setState({ element });
+    }
+}