@rebilly/instruments 4.8.1 → 4.8.2

package/src/views/method-selector/mount-express-methods.js

@@ -1,107 +0,0 @@
-import mountExpressMethod from './express-methods';
-import { generateFramepayConfig } from './generate-framepay-config';
-import { getMethodData } from './get-method-data';
-import Events from '../../events';
-import state from '../../state';
-
-const browserIsSafari = () => window.ApplePaySession;
-
-export async function mountExpressMethods({ methods, container }) {
-    const methodIds = methods.map((expressMethod) => {
-        const { METHOD_ID } = getMethodData(expressMethod);
-        return METHOD_ID;
-    });
-    const { Rebilly } = window;
-
-    if (!Rebilly?.initialized) {
-        await Rebilly?.initialize(
-            generateFramepayConfig({
-                methodIds,
-            }),
-        );
-    }
-
-    function generateExpressMethodHeight(method) {
-        let height;
-        const optionId = method.optionsPaymentInstrumentsKey;
-
-        // Return the default size of express methods if no id is found
-        if (!optionId) return '48px';
-
-        const { buttonHeight, displayOptions } =
-            state.options?.paymentInstruments?.[optionId] || {};
-
-        if (displayOptions) {
-            height = displayOptions.buttonHeight;
-        } else {
-            height = buttonHeight;
-        }
-
-        if (typeof height === 'number') {
-            height = `${buttonHeight}px`;
-        }
-
-        return height;
-    }
-
-    methods.forEach((method) => {
-        const { METHOD_ID: id } = getMethodData(method);
-        // filter out apple pay unless in safari
-        if (id === 'apple-pay' && !browserIsSafari()) return;
-
-        container.innerHTML += `
-      <div class="rebilly-instruments-${id}-method" style="height: ${generateExpressMethodHeight(
-            method,
-        )}"></div>
-    `;
-        mountExpressMethod({
-            state,
-            id,
-        });
-    });
-
-    // HOTFIX: Hardcoded, use env variables in the future
-    const redirectUrl =
-        state.options.apiMode === 'sandbox'
-            ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
-            : 'https://forms.secure-payments.app/approval-url?close=true';
-
-    Rebilly?.on('token-ready', (token) => {
-        const instrumentReadyPayload = {
-            websiteId: state.options.websiteId,
-            billingAddress: token.billingAddress,
-            redirectUrl,
-            _raw: token,
-        };
-
-        if (state.data?.isShippingRequired) {
-            if (token.shippingAddress) {
-                instrumentReadyPayload.deliveryAddress = token.shippingAddress;
-            } else {
-                instrumentReadyPayload.deliveryAddress =
-                    instrumentReadyPayload.billingAddress;
-            }
-        }
-
-        if (Array.isArray(instrumentReadyPayload.billingAddress?.emails)) {
-            const email = instrumentReadyPayload.billingAddress.emails.find(
-                (e) => e.label === 'main',
-            );
-
-            if (email?.value) {
-                instrumentReadyPayload.billingAddress.email = email.value;
-            }
-        }
-        if (Array.isArray(instrumentReadyPayload.deliveryAddress?.emails)) {
-            const email = instrumentReadyPayload.deliveryAddress.emails.find(
-                (e) => e.label === 'main',
-            );
-
-            if (email?.value) {
-                instrumentReadyPayload.deliveryAddress.email = email.value;
-            }
-        }
-
-        Events.instrumentReady.dispatch(instrumentReadyPayload);
-    });
-}

package/src/views/modal.js

@@ -1,103 +0,0 @@
-import state from '../state';
-import { ModalIframe } from './common/iframe';
-
-const modalTemplate = (isRedirect, method) => `
-  <div class="rebilly-instruments-modal-overlay">
-    <div class="rebilly-instruments-modal-container ${
-        method ? `rebilly-instruments-${method}` : ''
-    } ${isRedirect ? 'is-redirect' : ''}">
-      ${
-          isRedirect
-              ? ''
-              : `
-      <svg class="rebilly-instruments-modal-close" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-        <path d="m15 13.5858 7.2929-7.293c.3905-.3904 1.0237-.3904 1.4142 0 .3905.3906.3905 1.0238 0 1.4143L16.4142 15l7.293 7.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0L15 16.4142l-7.2929 7.293c-.3905.3904-1.0237.3904-1.4142 0-.3905-.3906-.3905-1.0238 0-1.4143L13.5858 15l-7.293-7.2929c-.3904-.3905-.3904-1.0237 0-1.4142.3906-.3905 1.0238-.3905 1.4143 0L15 13.5858Z" fill-rule="nonzero"/>
-      </svg>
-      `
-      }
-      <div class="rebilly-instruments-modal-content"></div>
-    </div>
-  </div>
-`;
-
-export async function mountModal({
-    name = '',
-    url = '',
-    model = {},
-    classListArray = [],
-    close = () => {},
-} = {}) {
-    const method = model?.method?.method;
-    const isRedirect = name === 'rebilly-instruments-approval-url';
-    state.form.insertAdjacentHTML(
-        'beforeend',
-        modalTemplate(isRedirect, method),
-    );
-
-    const modalOverlay = document.querySelector(
-        '.rebilly-instruments-modal-overlay',
-    );
-    const modalContainer = document.querySelector(
-        '.rebilly-instruments-modal-container',
-    );
-    const closeButton = document.querySelector(
-        '.rebilly-instruments-modal-close',
-    );
-    const modalContent = document.querySelector(
-        '.rebilly-instruments-modal-content',
-    );
-
-    document.body.style.overflow = 'hidden';
-    setTimeout(() => {
-        modalOverlay.classList.add('is-visible');
-        modalContainer.classList.add('is-visible');
-    }, 240);
-    state.loader.addDOMElement({ section: 'modal', el: modalContent });
-    state.loader.startLoading({ section: 'modal', id: name });
-
-    const modelSafeState = state.toModel();
-    const injectedModel = {
-        options: modelSafeState.options,
-        ...model,
-    };
-
-    const iframe = await new ModalIframe({
-        name,
-        url,
-        model: injectedModel,
-        classListArray,
-        container: modalContent,
-    });
-
-    const closeModal = (...args) => {
-        modalContainer.classList.remove('is-visible');
-        modalOverlay.classList.remove('is-visible');
-        setTimeout(() => {
-            document.body.style.overflow = 'auto';
-
-            const list = modalOverlay.children;
-            for (let i = 0; i < list.length; i += 1) {
-                list[i].remove();
-            }
-
-            modalOverlay.remove();
-            close(...args);
-            iframe.destroy();
-        }, 300);
-    };
-
-    iframe.bindEventListeners({
-        close: closeModal,
-        loader: state.loader,
-    });
-
-    if (!isRedirect) {
-        closeButton.addEventListener('click', closeModal);
-    }
-
-    iframe.component?.call('route', {
-        name: 'approval-url',
-    });
-
-    return iframe;
-}

package/src/views/result.js

@@ -1,24 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { mountForm } from './form';
-
-export async function mountResult({ payload }) {
-    const iframe = iframes.form;
-
-    if (!iframe) {
-        await mountForm();
-    }
-
-    const modelSafeState = state.toModel();
-    const model = {
-        options: modelSafeState.options,
-        mainStyleVars: modelSafeState.mainStyleVars,
-        [state.options.transactionType]: payload,
-    };
-
-    iframe?.component?.call('route', {
-        name: 'result',
-    });
-
-    iframe?.component?.call('update', model);
-}

package/src/views/summary.js

@@ -1,38 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { ViewIframe } from './common/iframe';
-import { itemsUpdatedHandler } from './common/iframe/events/update-items-handler';
-import { fetchSummary } from '../storefront/summary';
-
-export async function mountSummary() {
-    const modelSafeState = state.toModel();
-    const model = {
-        options: modelSafeState.options,
-        data: modelSafeState.data,
-        mainStyleVars: modelSafeState.mainStyleVars,
-    };
-    const paymentMethodsUrl = state.options?._computed?.paymentMethodsUrl;
-
-    const name = 'rebilly-instruments-summary';
-    const iframe = await new ViewIframe({
-        name,
-        url: `${paymentMethodsUrl}?name=${name}`,
-        container: state.summary,
-        model,
-        route: {
-            name: 'summary',
-        },
-    });
-    iframe.bindEventListeners({ loader: state.loader });
-    iframes.summary = iframe;
-    itemsUpdatedHandler(iframe);
-
-    return {
-        then: (callback) => callback(),
-    };
-}
-
-export async function updateSummary({ instrument } = {}) {
-    await fetchSummary({ data: instrument });
-    state.updateModel();
-}

package/tests/async-utilities.js

@@ -1,22 +0,0 @@
-import { sleep } from '@/utils';
-
-export async function avoidUnhandledPromises() {
-    // We need this sleep to avoid unhandled promises.
-    // This hack will be removed if we refactor the current design.
-    await sleep(100);
-}
-
-/**
- * @param {Promise} promise
- */
-export async function expectConfigurationError(promise) {
-    const NoConfigOrOptionsError =
-        'Could not use Rebilly Instruments mount options to fetch Rebilly data';
-    let error = null;
-    try {
-        await promise;
-    } catch (e) {
-        error = e;
-    }
-    expect(error.message).toBe(NoConfigOrOptionsError);
-}

package/tests/mocks/framepay-mock.js

@@ -1,15 +0,0 @@
-import Emitter from 'component-emitter';
-
-export const createFramepayMock = () => {
-    const framepayBus = new Emitter();
-    const framepayMock = {
-        initialize: vi.fn(),
-        digitalWallet: {
-            mount: vi.fn(),
-        },
-        on: (eventType, delegate = null) => framepayBus.on(eventType, delegate),
-        simulateEvent: (eventType, payload) =>
-            framepayBus.emit(eventType, payload),
-    };
-    return framepayMock;
-};

package/tests/mocks/rebilly-api-mock.js

@@ -1,11 +0,0 @@
-import { ok, get } from 'msw-when-then';
-
-export const rebillyURL = '*';
-
-export const initRebillyApiMocks = (when) => {
-    when(get(`${rebillyURL}/payment-methods`)).thenReturn(
-        (() => {
-            return ok([]);
-        })(),
-    );
-};

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,141 +0,0 @@
-import RebillyInstruments from '@/index';
-import { createFramepayMock } from './framepay-mock';
-import { get, ok, post } from 'msw-when-then';
-import { when } from '../msw/server';
-import { storefrontURL } from './storefront-api-mock';
-import PlanModel from '@/storefront/models/plan-model';
-import ProductModel from '@/storefront/models/product-model';
-import SummaryModel from '@/storefront/models/summary-model';
-import InvoiceModel from '@/storefront/models/invoice-model';
-import merge from 'lodash.merge';
-import { DataInstance } from '@/functions/mount/fetch-data';
-import { sleep } from '@/utils';
-import setupFramepay from '@/functions/mount/setup-framepay';
-
-export const setupFramepayMock = async () => {
-    /*
-     * onload() is never called in JSDOM context but we want to test the rest of the setupFramepay code,
-     * so we run it asynchonously and wait for 10 ms
-     */
-    setupFramepay();
-    await sleep(10);
-};
-
-export async function RenderMockRebillyInstruments(options = {}) {
-    const testInvoice = new InvoiceModel({
-        id: 'test-invoice-id',
-    });
-    const testPlan = new PlanModel({ name: 'Test Plan', id: 'test-plan-id-1' });
-    const testProduct = new ProductModel({
-        description: 'My Awesome Product',
-        id: 'test-product-1',
-        name: 'My Product',
-    });
-    const testSummary = new SummaryModel({
-        currency: 'USD',
-        lineItems: [
-            {
-                description: 'test-plan-id-1',
-                planId: 'test-plan-id-1',
-                productId: 'test-product-1',
-                quantity: 1,
-            },
-        ],
-    });
-
-    when(get(`${storefrontURL}/invoices/*`)).thenReturn(
-        (() => ok(testInvoice))(),
-    );
-
-    when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
-        (() =>
-            ok([
-                {
-                    method: 'payment-card',
-                    feature: {
-                        name: 'Google Pay',
-                        merchantName: 'google-pay-merchant-name',
-                        merchantOrigin: 'google-pay-merchant-origin',
-                    },
-                    brands: [
-                        'Visa',
-                        'MasterCard',
-                        'American Express',
-                        'Discover',
-                    ],
-                    filters: [],
-                },
-            ]))(),
-    );
-
-    when(post(`${storefrontURL}/preview-purchase`)).thenReturn(
-        (() => ok(testSummary))(),
-    );
-
-    when(get(`${storefrontURL}/plans`)).thenReturn((() => ok([testPlan]))());
-
-    when(get(`${storefrontURL}/products`)).thenReturn(
-        (() => ok([testProduct]))(),
-    );
-
-    const defaultOptions = {
-        form: '.form-selector',
-        summary: '.summary-selector',
-        locale: 'auto',
-        apiMode: 'sandbox',
-        _dev: {
-            paymentMethodsUrl: 'https://forms.test.rebilly.dev',
-            framePayStyleLink: 'https://dev.framepay.rebilly.com/rebilly.css',
-        },
-    };
-
-    const hasPurchaseData = [
-        'items',
-        'invoiceId',
-        'transactionId',
-        'money',
-        'jwt',
-    ].some((key) => Object.keys(options).includes(key));
-    if (!hasPurchaseData) {
-        defaultOptions.items = [
-            {
-                planId: 'test-plan-id-1',
-                quantity: 1,
-            },
-        ];
-    }
-
-    if ((options.invoiceId || options.transactionid) && !options.jwt) {
-        defaultOptions.jwt = 'test-jwt';
-    }
-
-    const mergedOptions = merge({ ...defaultOptions }, options);
-
-    const framepayMock = createFramepayMock();
-    global.Rebilly = framepayMock;
-
-    const form = document.createElement('div');
-    form.classList.add(`${mergedOptions.form.replace('.', '')}`);
-    document.body.appendChild(form);
-
-    const summary = document.createElement('div');
-    summary.classList.add(`${mergedOptions.summary.replace('.', '')}`);
-    document.body.appendChild(summary);
-
-    try {
-        await RebillyInstruments.mount({
-            setupFramepay: setupFramepayMock,
-            ...mergedOptions,
-        });
-
-        RebillyInstruments.mock = {
-            data: (data) => {
-                RebillyInstruments.state.data = new DataInstance(data);
-            },
-        };
-    } catch (e) {
-        console.log(e);
-    }
-
-    return RebillyInstruments;
-}

package/tests/mocks/storefront-api-mock.js

@@ -1,62 +0,0 @@
-import { ok, get, post } from 'msw-when-then';
-
-export const storefrontURL = '*/storefront';
-
-export const initStoreFrontApiMocks = (when) => {
-    const mocks = [
-        /* GET */
-        {
-            url: '*/account',
-            method: get,
-            response: () => ok({}),
-        },
-        {
-            url: '*/plans',
-            method: get,
-            response: () => ok([]),
-        },
-        {
-            url: '*/payment-instruments',
-            method: get,
-            response: () => ok([]),
-        },
-        {
-            url: '*/transactions/test-transaction-id',
-            method: get,
-            response: () => ok({}),
-        },
-
-        /* POST */
-        {
-            url: '*/ready-to-pay',
-            method: post,
-            response: () =>
-                ok([
-                    {
-                        filters: [],
-                        method: 'method',
-                    },
-                ]),
-        },
-        {
-            url: '*/preview-purchase',
-            method: post,
-            response: () => ok({}),
-        },
-        {
-            url: '*/payment-instruments',
-            method: post,
-            response: () => ok([]),
-        },
-        {
-            url: '*/payment-instruments/*/setup',
-            method: post,
-            response: () => ok([]),
-        },
-    ];
-
-    mocks.forEach((api) => {
-        const http = api.method(`${storefrontURL}${api.url}`);
-        when(http).thenReturn(api.response());
-    });
-};

package/tests/mocks/storefront-mock.js

@@ -1,20 +0,0 @@
-import Storefront from '@/storefront';
-import { DataInstance } from '@/functions/mount/fetch-data';
-import state from '@/state';
-
-export function MockStorefront(config = {}) {
-    return Storefront(config);
-}
-
-export function StorefontTestingInstance({ options = {}, data = {} } = {}) {
-    state.storefront = null;
-    state.storefront = MockStorefront();
-
-    state.options = null;
-    state.options = options;
-
-    state.data = null;
-    state.data = new DataInstance(data);
-
-    return state;
-}

package/tests/msw/server.js

@@ -1,14 +0,0 @@
-import { setupServer } from 'msw/node';
-import { rest } from 'msw';
-import { whenThen } from 'msw-when-then';
-import { initStoreFrontApiMocks } from '../mocks/storefront-api-mock';
-import { initRebillyApiMocks } from '../mocks/rebilly-api-mock';
-
-export const server = setupServer();
-
-export const { when } = whenThen(server, rest);
-
-export const initGlobalHandlers = () => {
-    initStoreFrontApiMocks(when);
-    initRebillyApiMocks(when);
-};

package/tests/setup-test.js

@@ -1,30 +0,0 @@
-import { initGlobalHandlers, server } from './msw/server';
-import state from '../src/state';
-import 'vitest-canvas-mock';
-
-vi.mock('@rebilly/risk-data-collector', async () => {
-    const actual = await vi.importActual('@rebilly/risk-data-collector');
-    return {
-        default: {
-            collectData: vi.fn().mockReturnValue({ riskMetadata: {} }),
-        },
-        ...actual,
-    };
-});
-
-beforeAll(() => {
-    server.listen();
-});
-
-beforeEach(() => {
-    initGlobalHandlers();
-    state.reset();
-});
-
-afterEach(() => {
-    server.resetHandlers();
-});
-
-afterAll(() => {
-    server.close();
-});

package/vitest.config.js

@@ -1,18 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import path from 'path';
-
-export default defineConfig({
-    test: {
-        environment: 'jsdom',
-        globals: true,
-        watch: true,
-        setupFiles: 'tests/setup-test.js',
-        deps: {
-            inline: ['vitest-canvas-mock'],
-        },
-        alias: {
-            '@': path.resolve(__dirname, 'src'),
-            tests: path.resolve(__dirname, 'tests'),
-        },
-    },
-});