@rebilly/instruments 4.8.1 → 4.8.3

package/src/functions/mount/index.js

@@ -1,105 +0,0 @@
-/* eslint-disable max-len */
-import state from '../../state';
-import { mountSummary } from '../../views/summary';
-import { mountForm, determineFirstView, removeForm } from '../../views/form';
-import { fetchData } from './fetch-data';
-import Events from '../../events';
-import setupElement from './setup-element';
-import setupStorefront from './setup-storefront';
-import setupOptions from './setup-options';
-import setupFramepayInstance from './setup-framepay';
-import setupStylesVars from './setup-styles-vars';
-import setupI18n from './setup-i18n';
-import setupFramepayTheme from './setup-framepay-theme';
-import setupUserFlow from './setup-user-flow';
-import { showError } from '../../views/errors';
-
-/** See src/data/options-schema for options structure */
-export async function mount({
-    setupFramepay = setupFramepayInstance,
-    ...options
-} = {}) {
-    try {
-        state.data = {};
-        state.options = {};
-
-        // Setup options
-        state.options = setupOptions({ options });
-
-        // Setup DOM
-        state.form = setupElement({ element: 'form' });
-        state.summary = setupElement({ element: 'summary' });
-        // hardcode max-width to not break UX
-        // PayPal button cannot exceed 750px;
-        state.form.style.maxWidth = '750px';
-        if (state.summary) {
-            state.summary.style.maxWidth = '750px';
-        }
-
-        // Setup state
-        state.storefront = setupStorefront();
-        state.mainStyleVars = setupStylesVars();
-        state.options.themeFramepay = setupFramepayTheme();
-
-        // Setup loader
-        state.loader.addDOMElement({ el: state.form });
-        state.loader.addDOMElement({ section: 'summary', el: state.summary });
-        state.loader.startLoading({
-            section: 'summary',
-            id: 'rebilly-instruments-summary',
-        });
-        state.loader.startLoading({ id: 'rebilly-instruments-form' });
-
-        const [data] = await Promise.all([fetchData(), setupFramepay()]);
-        state.data = data;
-        Events.dataReady.dispatch(state.data);
-
-        state.i18n = setupI18n();
-
-        // Update state options from data
-        if (!state.options.websiteId && state.data.transaction?.websiteId) {
-            state.options.websiteId = state.data.transaction.websiteId;
-        } else if (!state.options.websiteId && state.data.invoice?.websiteId) {
-            state.options.websiteId = state.data.invoice.websiteId;
-        }
-        if (
-            state.data.transaction &&
-            state.data.transaction?.type === 'setup'
-        ) {
-            state.options.transactionType = 'setup';
-        }
-
-        // Mount content
-        if (state.form) {
-            mountForm().then(() => determineFirstView());
-        }
-        if (state.summary) {
-            mountSummary();
-        }
-        state.i18n({ state });
-        state.hasMounted = true;
-
-        const invoiceId =
-            state.options?.invoiceId || state.data?.transaction?.invoiceId;
-        if (invoiceId && state.data.invoice.isPaid) {
-            state.loader.stopLoading({ id: 'rebilly-instruments-form' });
-            removeForm();
-            showError(
-                state.translate.getTranslation('form.error.invoiceIsPaid'),
-                false,
-            );
-        }
-
-        if (!data.readyToPay?.length) {
-            state.loader.stopLoading({ id: 'rebilly-instruments-form' });
-            showError(
-                state.translate.getTranslation('form.error.noPaymentMethods'),
-            );
-        }
-    } catch (error) {
-        showError(error);
-        throw error;
-    }
-
-    setupUserFlow({ state });
-}

package/src/functions/mount/mount.spec.js

@@ -1,96 +0,0 @@
-import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { sleep } from '@/utils';
-
-describe('RebillyInstruments instance', () => {
-    it("should inject HTML to the merchant's website", async () => {
-        const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
-        const framePayStyleUrl = 'https://framepay.rebilly.com/rebilly.css';
-
-        const options = {
-            form: '.form-selector',
-            summary: '.summary-selector',
-            locale: 'auto',
-            items: [
-                {
-                    planId: 'test-plan-id-1',
-                    quantity: 1,
-                },
-            ],
-            theme: {
-                colorBackground: '#000',
-            },
-            css: `
-      .rebilly-instruments-summary-line-item-synopsis-title {
-        color: rgb(0, 68, 212);
-      }
-      `,
-            _dev: {
-                framePayStyleLink: framePayStyleUrl,
-            },
-        };
-        await RenderMockRebillyInstruments(options);
-
-        const sleepMilliseconds = 1000;
-        await sleep(sleepMilliseconds);
-
-        // Mounts form and summary
-        const summarySelector = document.querySelector('.summary-selector');
-        const iframe = summarySelector.querySelector('iframe');
-        expect(iframe.getAttribute('name')).toEqual(
-            'rebilly-instruments-summary',
-        );
-        expect(iframe.getAttribute('class')).toEqual(
-            'rebilly-instruments-iframe',
-        );
-        expect(iframe.getAttribute('loading')).toEqual('lazy');
-        expect(iframe.getAttribute('allow')).toEqual('payment');
-        expect(iframe.getAttribute('src')).toEqual(
-            'https://forms.test.rebilly.dev?name=rebilly-instruments-summary',
-        );
-
-        // Theme config overrides initial styles
-        const STYLE_VARS = document.querySelectorAll(
-            'style[type="text/css"]',
-        )[0];
-
-        expect(STYLE_VARS.innerHTML).toMatch(
-            '--rebilly-colorBackground: #000;',
-        );
-
-        // Mounts default FramePay script
-        const SCRIPTS = [...document.querySelectorAll('head script')];
-        const FRAMEPAY_SCRIPT = SCRIPTS.find(
-            (script) => script.src === framePayScriptUrl,
-        );
-        expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl);
-
-        // Mounts _dev FramePay style
-        const STYLE_LINKS = [...document.querySelectorAll('head link')];
-        const FRAMEPAY_STYLE = STYLE_LINKS.find(
-            (script) => script.href === framePayStyleUrl,
-        );
-
-        expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
-    });
-
-    it('should mount with JWT pruchase data', async () => {
-        // Use https://www.jwt.io to help encode and decode JWT
-        const jwt =
-            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ';
-
-        const options = {
-            form: '.form-selector',
-            summary: '.summary-selector',
-            jwt,
-        };
-
-        const instance = await RenderMockRebillyInstruments(options);
-
-        expect(instance.state.options).toEqual(
-            expect.objectContaining({
-                transactionId: 'test-transaction-id',
-                organizationId: 'test-organization-id',
-            }),
-        );
-    });
-});

package/src/functions/mount/setup-element.js

@@ -1,29 +0,0 @@
-import { processPropertyAsDOMElement } from '../../utils';
-import state from '../../state';
-
-export default ({ element = '' }) => {
-    const { options } = state;
-
-    if (element !== 'form' && element !== 'summary') {
-        throw new Error('element must be "form" or "summary"');
-    }
-
-    const getProp = () => {
-        if (options[element]) {
-            return options[element];
-        }
-        switch (element) {
-            case 'summary':
-                return '.rebilly-instruments-summary';
-            case 'form':
-            default:
-                return '.rebilly-instruments';
-        }
-    };
-
-    return processPropertyAsDOMElement({
-        prop: getProp(),
-        propName: element,
-        isRequired: ['form'].includes(element),
-    });
-};

package/src/functions/mount/setup-framepay-theme.js

@@ -1,104 +0,0 @@
-import state from '../../state';
-
-function processCSS(rawCss) {
-    const cssMap = {};
-    [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)].forEach(
-        (item) => {
-            cssMap[item[1]] = item[2].trim();
-        },
-    );
-
-    function parseValue(value) {
-        const cssVariables = value.match(/var\((.+?)\)/g);
-        if (cssVariables) {
-            let cssValue = value;
-            cssVariables.forEach((variable) => {
-                const cssVarName = variable.match(/\((.*)\)/i)[1];
-                cssValue = value.replace(variable, cssMap[cssVarName]);
-            });
-            return parseValue(cssValue);
-        }
-        return value;
-    }
-
-    return Object.entries(cssMap).map(([key, value]) => [
-        key,
-        parseValue(value),
-    ]);
-}
-
-function replaceCssVars(rawCss) {
-    const CssVarsObj = {};
-    processCSS(rawCss).forEach(([key, value]) => {
-        CssVarsObj[key] = value;
-    });
-    return CssVarsObj;
-}
-
-const getStyleProps = (obj, particle = '') => {
-    const output = {
-        color: obj[`--rebilly-${particle}ColorText`],
-        fontFamily: obj[`--rebilly-${particle}FontFamily`],
-        fontSize: obj[`--rebilly-${particle}FontSize`],
-        fontWeight: obj[`--rebilly-${particle}FontWeight`],
-        lineHeight: obj[`--rebilly-${particle}FontLineHeight`],
-        background: obj[`--rebilly-${particle}ColorBackground`],
-        boxShadow: obj[`--rebilly-${particle}BoxShadow`],
-    };
-    return output;
-};
-
-export default () => {
-    const fullCss = `
-    ${state.mainStyleVars}
-    ${state.options?.css || ''}
-  `;
-
-    const resolvedCssVarsObj = replaceCssVars(fullCss);
-
-    const framepayStyle = {
-        base: {
-            ...getStyleProps(resolvedCssVarsObj, 'input'),
-            ':hover': getStyleProps(resolvedCssVarsObj, 'inputHover'),
-            ':focus': getStyleProps(resolvedCssVarsObj, 'inputFocus'),
-            '::placeholder': getStyleProps(
-                resolvedCssVarsObj,
-                'inputPlaceholder',
-            ),
-            '::selection': getStyleProps(resolvedCssVarsObj, 'inputSelection'),
-        },
-        invalid: {
-            ...getStyleProps(resolvedCssVarsObj, 'inputError'),
-            ':hover': getStyleProps(resolvedCssVarsObj, 'inputErrorHover'),
-            ':focus': getStyleProps(resolvedCssVarsObj, 'inputErrorFocus'),
-            '::placeholder': getStyleProps(
-                resolvedCssVarsObj,
-                'inputErrorPlaceholder',
-            ),
-            '::selection': getStyleProps(
-                resolvedCssVarsObj,
-                'inputErrorSelection',
-            ),
-        },
-        buttons: {
-            base: {
-                ...getStyleProps(resolvedCssVarsObj, 'buttonSecondary'),
-                ':hover': getStyleProps(
-                    resolvedCssVarsObj,
-                    'buttonSecondaryHover',
-                ),
-                ':focus': getStyleProps(
-                    resolvedCssVarsObj,
-                    'buttonSecondaryActive',
-                ),
-            },
-            active: {
-                ...getStyleProps(resolvedCssVarsObj, 'button'),
-                ':hover': getStyleProps(resolvedCssVarsObj, 'buttonHover'),
-                ':focus': getStyleProps(resolvedCssVarsObj, 'buttonActive'),
-            },
-        },
-    };
-
-    return framepayStyle;
-};

package/src/functions/mount/setup-framepay.js

@@ -1,26 +0,0 @@
-import state from '../../state';
-
-export default async function setupFramepay() {
-    const { _dev } = state.options || {};
-    const urls = {
-        script:
-            _dev?.framePayScriptLink ||
-            'https://framepay.rebilly.com/rebilly.js',
-        style:
-            _dev?.framePayStyleLink ||
-            'https://framepay.rebilly.com/rebilly.css',
-    };
-
-    return new Promise((resolve) => {
-        const framepayStyle = document.createElement('link');
-        framepayStyle.setAttribute('href', urls.style);
-        framepayStyle.setAttribute('rel', 'stylesheet');
-        document.head.prepend(framepayStyle);
-
-        const framepayScript = document.createElement('script');
-        framepayScript.setAttribute('src', urls.script);
-
-        framepayScript.onload = () => resolve();
-        document.head.append(framepayScript);
-    });
-}

package/src/functions/mount/setup-i18n.js

@@ -1,21 +0,0 @@
-import state from '../../state';
-
-const triggerTranslations = () => {
-    state.translate.init(state.options.locale, state.options.i18n);
-    state.translate.translateItems();
-};
-
-export default () => {
-    if (
-        state.options.locale === 'auto' &&
-        state.data.riskMetadata?.browserData?.language
-    ) {
-        const {
-            browserData: { language },
-        } = state.data.riskMetadata;
-        state.options.locale = language;
-    }
-    state.translate.init(state.options.locale, state.options.i18n);
-
-    return triggerTranslations;
-};

package/src/functions/mount/setup-options.js

@@ -1,100 +0,0 @@
-import decodeJwt from 'jwt-decode';
-import merge from 'lodash.merge';
-import { parseQuantity } from '../../utils/quantity';
-import { validateOptions } from '../../data/options-schema';
-
-export function handleComputedProperty(options) {
-    options._computed = {
-        paymentMethodsUrl:
-            options._dev?.paymentMethodsUrl ??
-            'https://forms.secure-payments.app',
-    };
-    return options;
-}
-
-export function handleNestedPropertiesDefaultValues(options) {
-    /*
-    The JSON Schema default property doesn't work on nested schemas.
-    So we'll need to handle the default properties in these instances.
-    In most cases default property in schema is sufficient.
-
-    see https://ajv.js.org/guide/modifying-data.html#assigning-defaults
-  */
-    if (options.deposit?.currency) {
-        options.deposit = merge(
-            {
-                editable: true,
-                buttons: [],
-                customAmount: {
-                    minimum: 1,
-                    maximum: 1000000000000,
-                    multipleOf: 1,
-                },
-            },
-            options.deposit || {},
-        );
-
-        // default to first deposit button if there is no deposit amount
-        if (Number.isNaN(options.deposit.amount)) {
-            if (options.deposit.buttons.length > 0) {
-                [options.deposit.amount] = options.deposit.buttons;
-            }
-        }
-    } else if (options.deposit?.depositRequestId) {
-        options.deposit = merge(
-            {
-                customAmount: {
-                    minimum: 1,
-                    maximum: 1000000000000,
-                    multipleOf: 1,
-                },
-            },
-            options.deposit || {},
-        );
-    }
-
-    if (options.items) {
-        options.items = options.items.map((item) => ({
-            ...item,
-            quantity: parseQuantity(item),
-        }));
-    }
-
-    return options;
-}
-
-export function handleJwtDestructuring(options) {
-    if (options.jwt && !options.publishableKey) {
-        const {
-            merchant: organizationId,
-            claims: { transactionId, invoiceId, websiteId, cashierRequestId },
-        } = decodeJwt(options.jwt);
-        Object.entries({
-            organizationId,
-            transactionId,
-            invoiceId,
-            websiteId,
-        }).forEach(([key, value]) => {
-            if (value) {
-                options[key] = value;
-            }
-        });
-        if (cashierRequestId && !options.deposit) {
-            options.deposit = {};
-            options.deposit.depositRequestId = cashierRequestId;
-        }
-    }
-
-    return options;
-}
-
-export default ({ options = {} } = {}) => {
-    let validOptions = validateOptions(options);
-    if (validOptions) {
-        validOptions = handleJwtDestructuring(validOptions);
-        validOptions = handleNestedPropertiesDefaultValues(validOptions);
-        validOptions = handleComputedProperty(validOptions);
-    }
-
-    return validOptions;
-};