@rebilly/framepay-react 2.0.0 → 2.1.0

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

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

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

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class IBANElement extends BaseElement<IBANProps, IBANState> {
+    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: `IBANElement invalid elementNode, elementType: ${elementType ||
+                        'default'}`
+                });
+            }
+
+            try {
+                return this.props.Rebilly.iban.mount(this.elementNode);
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `IBANElement 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: `IBANElement events binding error, elementType: ${elementType ||
+                    'default'}`,
+                trace: e
+            });
+        }
+    }
+
+    render() {
+        return <div ref={node => (this.elementNode = node)} />;
+    }
+}

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import FramePayError from '../../framepay-error';
+import BaseElement from './base-element';
+
+export default class PaypalElement extends BaseElement<
+    PaypalProps,
+    PaypalState
+> {
+    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: `PaypalElement invalid elementNode`
+                });
+            }
+
+            try {
+                return Rebilly.paypal.mount(this.elementNode);
+            } catch (e) {
+                throw FramePayError({
+                    code: FramePayError.codes.elementMountError,
+                    details: `PaypalElement error in remote api call`,
+                    trace: e
+                });
+            }
+        };
+
+        const element = makeElement();
+        this.setState({ element });
+    }
+}

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

@@ -0,0 +1,162 @@
+// tslint:disable:max-classes-per-file
+import { Substitute } from '@fluffy-spoon/substitute';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { withFramePay } from '../..';
+
+import { FramePayComponentProps } from '../../../types/injector';
+
+import { ContextProvider } from '../context';
+
+describe('Injector', () => {
+    it('withFramePay HOC the context data should be provided', () => {
+        expect(true).toEqual(true);
+
+        interface OriginalProps {
+            readonly someProperty: string;
+        }
+
+        class TMPComponent extends React.Component<
+            OriginalProps & FramePayComponentProps
+        > {
+            render() {
+                return (
+                    <div>
+                        error: {this.props.Rebilly.error}
+                        ready: {String(this.props.Rebilly.ready)}
+                    </div>
+                );
+            }
+        }
+
+        const context = Substitute.for<FramePayContext>();
+        const TMPWrapper = withFramePay(TMPComponent);
+
+        class App extends React.Component {
+            render() {
+                return (
+                    <ContextProvider
+                        value={{
+                            ...context,
+                            error: 'withFramePay',
+                            ready: true
+                        }}
+                    >
+                        <TMPWrapper />
+                    </ContextProvider>
+                );
+            }
+        }
+
+        const { container } = render(<App />);
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div>
+              error: 
+              withFramePay
+              ready: 
+              true
+            </div>
+        `);
+    });
+
+    it('withFramePayCardComponent HOC the context data should be provided', () => {
+        expect(true).toEqual(true);
+
+        interface OriginalProps {
+            readonly someProperty: string;
+        }
+
+        class TMPComponent extends React.Component<
+            OriginalProps & FramePayComponentProps
+        > {
+            render() {
+                return (
+                    <div>
+                        error: {this.props.Rebilly.error}
+                        ready: {String(this.props.Rebilly.ready)}
+                    </div>
+                );
+            }
+        }
+
+        const context = Substitute.for<FramePayContext>();
+        const TMPWrapper = withFramePay(TMPComponent);
+
+        class App extends React.Component {
+            render() {
+                return (
+                    <ContextProvider
+                        value={{
+                            ...context,
+                            error: 'withFramePayCardComponent',
+                            ready: true
+                        }}
+                    >
+                        <TMPWrapper />
+                    </ContextProvider>
+                );
+            }
+        }
+
+        const { container } = render(<App />);
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div>
+              error: 
+              withFramePayCardComponent
+              ready: 
+              true
+            </div>
+        `);
+    });
+
+    it('withFramePayBankComponent HOC the context data should be provided', () => {
+        expect(true).toEqual(true);
+
+        interface OriginalProps {
+            readonly someProperty: string;
+        }
+
+        class TMPComponent extends React.Component<
+            OriginalProps & FramePayComponentProps
+        > {
+            render() {
+                return (
+                    <div>
+                        error: {this.props.Rebilly.error}
+                        ready: {String(this.props.Rebilly.ready)}
+                    </div>
+                );
+            }
+        }
+
+        const context = Substitute.for<FramePayContext>();
+        const TMPWrapper = withFramePay(TMPComponent);
+
+        class App extends React.Component {
+            render() {
+                return (
+                    <ContextProvider
+                        value={{
+                            ...context,
+                            error: 'withFramePayBankComponent',
+                            ready: true
+                        }}
+                    >
+                        <TMPWrapper />
+                    </ContextProvider>
+                );
+            }
+        }
+
+        const { container } = render(<App />);
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div>
+              error: 
+              withFramePayBankComponent
+              ready: 
+              true
+            </div>
+        `);
+    });
+});