@rebilly/framepay-react 2.0.1 → 2.2.0

package/build/lib/context.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -31,7 +27,7 @@ var React = __importStar(require("react"));
 var constants_1 = require("./constants");
 var get_rebilly_api_1 = __importDefault(require("./get-rebilly-api"));
 var defaultContextValue = {
-    api: (0, get_rebilly_api_1.default)(),
+    api: get_rebilly_api_1.default(),
     error: null,
     ready: false
 };
@@ -49,4 +45,4 @@ var ContextProvider = ProvidedContext.Provider;
 exports.ContextProvider = ContextProvider;
 var ContextConsumer = ProvidedContext.Consumer;
 exports.ContextConsumer = ContextConsumer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29udGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLDJDQUErQjtBQUMvQix5Q0FBNEM7QUFDNUMsc0VBQThDO0FBRTlDLElBQU0sbUJBQW1CLEdBQUc7SUFDeEIsR0FBRyxFQUFFLElBQUEseUJBQWEsR0FBRTtJQUNwQixLQUFLLEVBQUUsSUFBSTtJQUNYLEtBQUssRUFBRSxLQUFLO0NBQ2YsQ0FBQztBQUVGLHdCQUF3QjtBQUN4QixJQUFJLGVBQWUsQ0FBQztBQUNwQixJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMseUJBQWEsQ0FBQyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMseUJBQWEsQ0FBQyxFQUFFO0lBQzlELGlDQUFpQztJQUNqQyxJQUFNLGtCQUFrQixHQUFHLE9BQU8sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQzNELGVBQWUsR0FBRyxrQkFBa0IsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0NBQzdEO0tBQU07SUFDSCxlQUFlLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBa0IsbUJBQW1CLENBQUMsQ0FBQztDQUMvRTtBQUVELElBQU0sZUFBZSxHQUFHLGVBQWUsQ0FBQyxRQUFRLENBQUM7QUFHeEMsMENBQWU7QUFGeEIsSUFBTSxlQUFlLEdBQUcsZUFBZSxDQUFDLFFBQVEsQ0FBQztBQUV2QiwwQ0FBZSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29udGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsMkNBQStCO0FBQy9CLHlDQUE0QztBQUM1QyxzRUFBOEM7QUFFOUMsSUFBTSxtQkFBbUIsR0FBRztJQUN4QixHQUFHLEVBQUUseUJBQWEsRUFBRTtJQUNwQixLQUFLLEVBQUUsSUFBSTtJQUNYLEtBQUssRUFBRSxLQUFLO0NBQ2YsQ0FBQztBQUVGLHdCQUF3QjtBQUN4QixJQUFJLGVBQWUsQ0FBQztBQUNwQixJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMseUJBQWEsQ0FBQyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMseUJBQWEsQ0FBQyxFQUFFO0lBQzlELGlDQUFpQztJQUNqQyxJQUFNLGtCQUFrQixHQUFHLE9BQU8sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQzNELGVBQWUsR0FBRyxrQkFBa0IsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0NBQzdEO0tBQU07SUFDSCxlQUFlLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBa0IsbUJBQW1CLENBQUMsQ0FBQztDQUMvRTtBQUVELElBQU0sZUFBZSxHQUFHLGVBQWUsQ0FBQyxRQUFRLENBQUM7QUFHeEMsMENBQWU7QUFGeEIsSUFBTSxlQUFlLEdBQUcsZUFBZSxDQUFDLFFBQVEsQ0FBQztBQUV2QiwwQ0FBZSJ9

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.2.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",
@@ -34,7 +42,7 @@
         "serve:e2e": "run-s dotenv build:* && node test/e2e/local-server.mjs",
         "serve:e2e:no-build": "node test/e2e/local-server.mjs",
         "fix": "run-s fix:*",
-        "fix:prettier": "prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\"  --write",
+        "fix:prettier": "prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\" --write",
         "fix:tslint": "tslint --fix --project .",
         "lint:no-fix": "tslint --project . && prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\" --list-different",
         "test:unit": "jest --config ./test/unit/jest.config.js",
@@ -44,7 +52,8 @@
         "test:e2e:react-16": "cross-env REACT_VERSION=16 run-s set-react-16 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:react-17": "cross-env REACT_VERSION=17 run-s set-react-17 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:react-18": "cross-env REACT_VERSION=18 run-s set-react-18 dotenv build:e2e clean-react-alias test:e2e:base",
-        "test:e2e": "run-s test:e2e:react-*",
+        "test:e2e:pr": "yarn test:e2e:react-18",
+        "test:e2e:post-merge": "run-s test:e2e:react-*",
         "test:e2e:open": "cypress open",
         "test:e2e:run": "cypress run",
         "watch": "run-s build && run-p \"build -- --w\"",
@@ -59,43 +68,45 @@
     },
     "devDependencies": {
         "@fluffy-spoon/substitute": "^1.89.0",
-        "@small-tech/auto-encrypt-localhost": "^7.2.0",
+        "@small-tech/auto-encrypt-localhost": "^8.3.2",
         "@testing-library/cypress": "^9.0.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.2.5",
-        "@types/node": "^18.11.18",
-        "core-js": "3",
+        "@types/jest": "^29.5.0",
+        "@types/node": "^18.15.7",
+        "core-js": "^3.23.3",
         "cross-env": "^5.2.0",
         "cypress": "^12.3.0",
         "cypress-iframe": "^1.0.1",
         "dotenv": "^7.0.0",
         "express": "^4.16.4",
         "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.3.1",
+        "jest-environment-jsdom": "^28.0.0",
         "npm-run-all": "^4.1.5",
         "parcel-bundler": "^1.12.5",
         "portfinder": "^1.0.20",
-        "prettier": "^1.15.2",
+        "prettier": "^2.7.1",
         "prop-types": "^15.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "start-server-and-test": "^1.15.2",
+        "start-server-and-test": "^2.0.0",
         "ts-jest": "^29.0.3",
         "tslint": "^5.11.0",
         "tslint-config-prettier": "^1.17.0",
         "tslint-immutable": "^5.0.0",
-        "typescript": "4.9.4"
+        "typescript": "4.3.5"
     },
     "prettier": {
-        "singleQuote": true
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid"
     },
     "resolutions": {
         "yargs-parser": "^13.1.2",
         "dot-prop": "^4.2.1",
         "node-notifier": "^8.0.1",
         "glob-parent": "^5.1.2",
-        "trim-newlines": "^3.0.1",
+        "trim-newlines": "^4.0.2",
         "node-forge": "^0.10.0",
         "postcss": "^7.0.36"
     }

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,77 @@
+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);
+        }
+    });
+});