@rebilly/framepay-react 2.0.0 → 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

@@ -0,0 +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/README.md

@@ -35,10 +35,11 @@ This package is a wrapper for [FramePay](https://rebilly.github.io/framepay-docs
         - [Incorrect](#incorrect)
         - [Correct](#correct)
     - [Developer instructions](#developer-instructions)
-        - [Prerequisites](#prerequisites)
-        - [Project setup](#project-setup)
-        - [How to run unit tests?](#how-to-run-unit-tests)
-        - [How to run E2E tests?](#how-to-run-e2e-tests)
+      - [Prerequisites](#prerequisites)
+      - [Project setup](#project-setup)
+      - [Manual preview](#manual-preview)
+      - [How to run unit tests?](#how-to-run-unit-tests)
+      - [How to run E2E tests?](#how-to-run-e2e-tests)
 
 ### FramePay documentation
 For more information on FramePay see its [official documentation](https://www.rebilly.com/docs/dev-docs/framepay/).
@@ -344,5 +345,5 @@ Unit tests can be run using the `test:unit` command.
 #### How to run E2E tests?
 - Ensure you are running the preview examples, otherwise all E2E tests will fail
 - Run one of the following commands:
-    - `test:cypress:run` - runs all tests headlessly
-    - `test:cypress:open` - opens GUI which allows you to interact with each test visually
+    - `test:e2e:run` - runs all tests headlessly
+    - `test:e2e:open` - opens GUI which allows you to interact with each test visually

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,11 +1,11 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "2.0.0",
+    "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",
     "types": "build/index.d.ts",
-    "repository": "https://github.com/Rebilly/framepay-react",
+    "repository": "https://github.com/Rebilly/rebilly",
     "license": "MIT",
     "keywords": [
         "framepay",
@@ -17,7 +17,16 @@
     ],
     "files": [
         "build",
-        "types"
+        "types",
+        "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",
@@ -35,21 +44,19 @@
         "fix": "run-s fix:*",
         "fix:prettier": "prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\"  --write",
         "fix:tslint": "tslint --fix --project .",
-        "test:lint": "tslint --project . && prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\" --list-different",
+        "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",
-        "test:cypress:ci": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test serve:e2e:no-build https-get://localhost:8000 test:cypress:run",
-        "test:cypress:ci:react-14": "cross-env REACT_VERSION=0.14.0 run-s set-react-14 dotenv build:e2e clean-react-alias test:cypress:ci",
-        "test:cypress:ci:react-15": "cross-env REACT_VERSION=15.0.0 run-s set-react-15 dotenv build:e2e clean-react-alias test:cypress:ci",
-        "test:cypress:ci:react-16": "cross-env REACT_VERSION=16 run-s set-react-16 dotenv build:e2e clean-react-alias test:cypress:ci",
-        "test:cypress:ci:react-17": "cross-env REACT_VERSION=17 run-s set-react-17 dotenv build:e2e clean-react-alias test:cypress:ci",
-        "test:cypress:ci:react-18": "cross-env REACT_VERSION=18 run-s set-react-18 dotenv build:e2e clean-react-alias test:cypress:ci",
-        "test:cypress:ci:all": "run-s test:cypress:ci:react-*",
-        "test:cypress:open": "cypress open",
-        "test:cypress:run": "cypress run",
+        "test:e2e:base": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test serve:e2e:no-build https-get://localhost:8000 test:e2e:run",
+        "test:e2e:react-14": "cross-env REACT_VERSION=0.14.0 run-s set-react-14 dotenv build:e2e clean-react-alias test:e2e:base",
+        "test:e2e:react-15": "cross-env REACT_VERSION=15.0.0 run-s set-react-15 dotenv build:e2e clean-react-alias test:e2e:base",
+        "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:open": "cypress open",
+        "test:e2e:run": "cypress run",
         "watch": "run-s build && run-p \"build -- --w\"",
-        "clean:e2e": "rm -rf test/e2e/build",
-        "precommit": "run-s fix",
-        "prepush": "run-s fix"
+        "clean:e2e": "rm -rf test/e2e/build"
     },
     "peerDependencies": {
         "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
@@ -72,7 +79,6 @@
         "cypress-iframe": "^1.0.1",
         "dotenv": "^7.0.0",
         "express": "^4.16.4",
-        "husky": "^1.3.1",
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "npm-run-all": "^4.1.5",

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