@rebilly/instruments 4.8.1 → 4.8.2

package/src/i18n/en.json

@@ -1,35 +0,0 @@
-{
-    "en": {
-        "summary": {
-            "subTotal": "Sub Total",
-            "discounts": "Discounts",
-            "taxes": "Taxes",
-            "shipping": "Shipping",
-            "total": "Total"
-        },
-        "deposit": {
-            "goBack": "Choose another amount"
-        },
-        "form": {
-            "expressCheckout": "Express checkout",
-            "or": "Or",
-            "popupOverlayText": "Click here to show popup window",
-            "andMore": "and more",
-            "error": {
-                "noPaymentMethods": "No payment methods available for this transaction, please contact support.",
-                "invoiceIsPaid": "The invoice has been fully paid."
-            },
-            "loaderMessages": {
-                "processingPayment": "Processing payment instrument."
-            },
-            "bumpOffer": {
-                "title": "Yes, I want to upgrade!",
-                "startingAt": "Starting at {basePrice}"
-            }
-        },
-        "paymentMethods": {
-            "payment-card": "Payment card",
-            "ach": "Bank account"
-        }
-    }
-}

package/src/i18n/es.json

@@ -1,32 +0,0 @@
-{
-    "es": {
-        "summary": {
-            "subTotal": "Sub Total",
-            "discounts": "Descuentos",
-            "taxes": "Impuestos",
-            "shipping": "Envío",
-            "total": "Total"
-        },
-        "deposit": {
-            "goBack": "Elija otro monto a depositar"
-        },
-        "form": {
-            "expressCheckout": "Chequeo rápido",
-            "or": "O pague con",
-            "andMore": "y más",
-            "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
-            "error": {
-                "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia.",
-                "invoiceIsPaid": "La factura ha sido completamente pagada."
-            },
-            "bumpOffer": {
-                "title": "¡Sí, me gustaría actualizar!",
-                "startingAt": "A partir de {basePrice}"
-            }
-        },
-        "paymentMethods": {
-            "payment-card": "Tarjeta de crédito",
-            "ach": "Cuenta bancaria"
-        }
-    }
-}

package/src/i18n/i18n.spec.js

@@ -1,27 +0,0 @@
-import { Translate } from './index';
-
-describe('i18n Class', () => {
-    const canTranslate = document.createElement('div');
-    canTranslate.innerHTML = 'Discounts';
-    canTranslate.setAttribute('data-rebilly-i18n', 'summary.discounts');
-
-    const canNotTranslate = document.createElement('div');
-    canNotTranslate.innerHTML = 'Untouched';
-    canNotTranslate.setAttribute('data-rebilly-i18n', 'does.not.exist');
-
-    document.body.append(canTranslate);
-    document.body.append(canNotTranslate);
-
-    it('can translate element with proper data attribute and skip wrong translation path or languages', () => {
-        const translate = new Translate();
-        translate.init('es-US');
-        translate.translateItems();
-
-        const [translated, untouched] = document.querySelectorAll(
-            '[data-rebilly-i18n]',
-        );
-
-        expect(translated.innerHTML).toEqual('Descuentos');
-        expect(untouched.innerHTML).toEqual('Untouched');
-    });
-});

package/src/i18n/index.js

@@ -1,59 +0,0 @@
-import merge from 'lodash.merge';
-import en from './en.json';
-import es from './es.json';
-
-export class Translate {
-    constructor() {
-        this.locale = '';
-        this.items = [];
-        this.languages = {};
-    }
-
-    init(locale, messages) {
-        this.items = document.querySelectorAll('[data-rebilly-i18n]');
-        this.locale = this.getLocale(locale);
-        this.languages = merge({}, { ...en, ...es }, messages);
-    }
-
-    translateItems() {
-        this.items = document.querySelectorAll('[data-rebilly-i18n]');
-
-        if (this.locale in this.languages) {
-            return this.items.forEach((item) => {
-                const translate = this.getTranslation(
-                    item.dataset.rebillyI18n,
-                    this.languages[this.locale],
-                );
-                if (translate) {
-                    item.innerHTML = translate;
-                }
-            });
-        }
-        return false;
-    }
-
-    updateTranslationsToNewLocale(newLocale) {
-        this.locale = newLocale;
-        this.translateItems();
-    }
-
-    getLocale(locale = this.locale) {
-        if (!locale.includes('-') || locale in this.languages) {
-            return locale;
-        }
-        locale = locale.replace(/[-._]\w+$/gi, '');
-        return this.getLocale(locale);
-    }
-
-    translateItem(item) {
-        const locale = this.getLocale();
-        return this.getTranslation(
-            item.dataset.rebillyI18n,
-            this.languages[locale],
-        );
-    }
-
-    getTranslation(prop, lan = this.languages[this.locale]) {
-        return prop.split('.').reduce((acc, val) => acc?.[val], lan);
-    }
-}

package/src/index.js

@@ -1,3 +0,0 @@
-import { RebillyInstrumentsInstance } from './instance';
-
-export default new RebillyInstrumentsInstance();

package/src/instance.js

@@ -1,48 +0,0 @@
-import state from './state';
-import iframes from './state/iframes';
-import { mount } from './functions/mount';
-import { purchase } from './functions/purchase';
-import { setup } from './functions/setup';
-import { on } from './functions/on';
-import { update } from './functions/update';
-import { destroy } from './functions/destroy';
-import { show } from './functions/show';
-
-export class RebillyInstrumentsInstance {
-    constructor() {
-        this.state = state;
-        this.iframes = iframes;
-    }
-
-    async mount(options) {
-        await mount(options);
-    }
-
-    async destroy() {
-        await destroy();
-    }
-
-    async update(newOptions) {
-        await update({ newOptions });
-    }
-
-    async purchase(payload) {
-        await purchase({ payload });
-    }
-
-    async setup(payload) {
-        await setup({ payload });
-    }
-
-    async show(componentName, payload) {
-        await show({ componentName, payload });
-    }
-
-    get version() {
-        return 'RebillyInstruments Ver.[VI]{version}[/VI]';
-    }
-
-    on(eventName, callback) {
-        on({ eventName, callback });
-    }
-}

package/src/instance.spec.js

@@ -1,44 +0,0 @@
-import { avoidUnhandledPromises } from 'tests/async-utilities';
-import { setupFramepayMock } from 'tests/mocks/rebilly-instruments-mock';
-import RebillyInstruments from './index';
-import { RebillyInstrumentsInstance } from './instance';
-
-describe('RebillyInstruments instance', () => {
-    let rebillyInstruments;
-
-    beforeEach(() => {
-        rebillyInstruments = RebillyInstruments;
-    });
-
-    it('should have default export as instance of class', () => {
-        expect(RebillyInstruments).toBeInstanceOf(RebillyInstrumentsInstance);
-    });
-
-    it('should be mountable', async () => {
-        vi.spyOn(rebillyInstruments, 'mount');
-
-        document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-
-        const options = {
-            form: '.form-selector',
-            summary: '.summary-selector',
-            apiMode: 'sandbox',
-            items: [
-                {
-                    planId: 'test-plan-id',
-                    quantity: 1,
-                },
-            ],
-            setupFramepay: setupFramepayMock,
-        };
-
-        await rebillyInstruments.mount(options);
-
-        expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
-        expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
-        await avoidUnhandledPromises();
-    });
-});

package/src/loader/index.js

@@ -1,145 +0,0 @@
-import isDOMElement from '../utils/is-dom-element';
-
-export const summaryLoaderHTML = `
-  <div class="rebilly-instruments-summary-loader-total rebilly-instruments-loader-display-flex rebilly-instruments-loader-align-center rebilly-instruments-loader-justify-space-between">
-    <div><p class="is-el-loading">Total</p></div>
-    <p class="total is-el-loading">$99.99</p>
-  </div>
-`;
-
-export const methodsLoaderHTML = `
-  <div class="rebilly-instruments-methods-loader">
-    <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
-    <div class="rebilly-instruments-divider">
-      <span class="rebilly-instruments-divider-label"><span class="is-el-loading">Divi</span></span>
-    </div>
-    <div class="rebilly-instruments-loader-display-flex rebilly-instruments-loader-justify-end">
-      <div class="rebilly-instruments-methods-loader-card-icon is-el-loading"></div>
-      <div class="rebilly-instruments-methods-loader-card-icon is-el-loading"></div>
-    </div>
-    <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
-    <div class="rebilly-instruments-methods-loader-form-fields">
-      <div class="rebilly-instruments-loader-form-label"><small class="is-el-loading">Card holder name</small></div>
-      <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
-    </div>
-    <div class="rebilly-instruments-loader-form-el is-button">Continue</div> 
-  </div>
-`;
-
-const loaderContainer = (padding = '0px') => `
-  <div class="rebilly-instruments-loader is-active" style="padding: ${padding}"></div>
-`;
-
-export const basicLoaderHTML = `
-  <div class="rebilly-instruments-loader-spinner"></div>
-`;
-
-export class Loader {
-    constructor() {
-        this.summary = [];
-        this.form = [];
-        this.modal = [];
-        this.DOM = {
-            loaderContainer,
-            summaryLoaderHTML,
-            methodsLoaderHTML,
-            basicLoaderHTML,
-        };
-    }
-
-    addDOMElement({ section = 'form', el = null } = {}) {
-        if (isDOMElement(el)) {
-            el.style.position = 'relative';
-            this.DOM[section] = el;
-        }
-    }
-
-    startLoading({ section = 'form', id = '' } = {}) {
-        this[section].push(id);
-
-        const rootEl = document.querySelector(':root');
-        const contentPadding = 2;
-        let minHeight = '240px';
-
-        if (this.DOM?.[section]) {
-            let loaderEl = this.DOM[section].querySelector(
-                '.rebilly-instruments-loader',
-            );
-            const { padding, paddingTop, paddingBottom } = getComputedStyle(
-                this.DOM?.[section],
-            );
-            if (!loaderEl) {
-                this.DOM[section].innerHTML = loaderContainer(
-                    `${parseFloat(padding) + contentPadding}px`,
-                );
-                loaderEl = this.DOM[section].querySelector(
-                    '.rebilly-instruments-loader',
-                );
-                if (section === 'form') {
-                    loaderEl.insertAdjacentHTML(
-                        'afterbegin',
-                        this.DOM.methodsLoaderHTML,
-                    );
-                    minHeight = getComputedStyle(rootEl).getPropertyValue(
-                        '--rebilly-methodLoaderMinHeight',
-                    );
-                } else if (section === 'summary') {
-                    loaderEl.insertAdjacentHTML(
-                        'afterbegin',
-                        this.DOM.summaryLoaderHTML,
-                    );
-                    minHeight = getComputedStyle(rootEl).getPropertyValue(
-                        '--rebilly-summaryLoaderMinHeight',
-                    );
-                }
-            } else {
-                if (
-                    id.includes('confirmation') ||
-                    id.includes('result') ||
-                    id.includes('modal')
-                ) {
-                    loaderEl.innerHTML = this.DOM.basicLoaderHTML;
-                }
-                loaderEl.classList.add('is-active');
-            }
-            this.DOM[
-                section
-            ].style.minHeight = `calc(${minHeight} + ${paddingTop} + ${paddingBottom} + ${
-                contentPadding * 2
-            }px)`;
-        }
-    }
-
-    stopLoading({ section = 'form', id = '' } = {}) {
-        const idIndex = this[section].indexOf(id);
-
-        if (idIndex !== -1) {
-            this[section].splice(idIndex, 1);
-        }
-
-        if (
-            this.DOM[section] &&
-            !this[section].length &&
-            this.DOM[section].querySelector('.rebilly-instruments-loader')
-        ) {
-            this.DOM[section]
-                .querySelector('.rebilly-instruments-loader')
-                .classList.remove('is-active');
-            this.DOM[section].style.minHeight = '';
-        }
-    }
-
-    clearAll() {
-        this.form.forEach((id) => {
-            this.stopLoading({ id });
-        });
-        if (this.summary) {
-            this.summary.forEach((id) => {
-                this.stopLoading({ section: 'summary', id });
-            });
-        }
-        this.modal.forEach((id) => {
-            this.stopLoading({ section: 'modal', id });
-        });
-    }
-}

package/src/loader/loader.spec.js

@@ -1,74 +0,0 @@
-import { Loader } from './index';
-
-describe('Loader Class', () => {
-    let loader;
-
-    beforeEach(() => {
-        loader = new Loader();
-
-        document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-
-        loader.addDOMElement({ el: document.querySelector('.form-selector') });
-        loader.addDOMElement({
-            section: 'summary',
-            el: document.querySelector('.summary-selector'),
-        });
-    });
-
-    it('manage state of loading ids', () => {
-        loader.startLoading({ id: 'loadForm' });
-        loader.startLoading({ id: 'updateForm' });
-
-        // Start loading state
-        loader.startLoading({ section: 'summary', id: 'loadSummary' });
-        loader.startLoading({ section: 'summary', id: 'updateSummary' });
-
-        // Stop one loading state
-        loader.stopLoading({ id: 'loadForm' });
-
-        expect(loader.form.length).toEqual(1);
-        expect(loader.summary.length).toEqual(2);
-    });
-
-    it('adds the loader HTML on element and removes the active class when stoped', () => {
-        loader.startLoading({ id: 'loadForm' });
-
-        expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-        expect(
-            loader.DOM.form
-                .querySelector('.rebilly-instruments-loader')
-                .classList.contains('is-active'),
-        ).toEqual(true);
-
-        loader.stopLoading({ id: 'loadForm' });
-
-        expect(
-            loader.DOM.form
-                .querySelector('.rebilly-instruments-loader')
-                .classList.contains('is-active'),
-        ).toEqual(false);
-    });
-
-    it('keeps loading when there are Ids on the element array', () => {
-        loader.startLoading({ id: 'loadForm' });
-        loader.startLoading({ id: 'updateForm' });
-
-        expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-        expect(
-            loader.DOM.form
-                .querySelector('.rebilly-instruments-loader')
-                .classList.contains('is-active'),
-        ).toEqual(true);
-
-        loader.stopLoading({ id: 'loadForm' });
-
-        expect(
-            loader.DOM.form
-                .querySelector('.rebilly-instruments-loader')
-                .classList.contains('is-active'),
-        ).toEqual(true);
-    });
-});

package/src/state/iframes.js

@@ -1,23 +0,0 @@
-export default (() => {
-    let state = null;
-    return {
-        getInstance() {
-            if (state === null) {
-                state = {
-                    form: null,
-                    summary: null,
-                    hasFrame(name) {
-                        if (state[name] && !name.match(/^has.*/)) {
-                            return !!state[name];
-                        }
-                        return false;
-                    },
-                    hasComponent(name) {
-                        return !!state[name]?.component;
-                    },
-                };
-            }
-            return state;
-        },
-    };
-})().getInstance();

package/src/state/index.js

@@ -1,64 +0,0 @@
-import { reactive } from 'vue';
-import { Loader } from '../loader';
-import { Translate } from '../i18n';
-import iframes from './iframes';
-
-export default (() => {
-    let state = null;
-    const defaultState = {
-        options: null,
-        data: {},
-        mountingPoints: null,
-        storefront: null,
-        form: null,
-        summary: null,
-        loader: new Loader(),
-        translate: new Translate(),
-        hasMounted: false,
-        toModel() {
-            const model = {
-                ...state,
-                data: state.data.toPostmatesModel
-                    ? state.data.toPostmatesModel()
-                    : {},
-            };
-
-            // remove functions from model
-            delete model.toModel;
-            delete model.updateModel;
-            delete model.reset;
-
-            return JSON.parse(JSON.stringify(model));
-        },
-        updateModel() {
-            const modelSafeState = state?.toModel();
-            if (modelSafeState) {
-                const updateModel = {
-                    data: modelSafeState.data,
-                    options: modelSafeState.options,
-                };
-
-                if (iframes.hasComponent('summary')) {
-                    iframes.summary.component.call('update', updateModel);
-                }
-                if (iframes.hasComponent('form')) {
-                    iframes.form.component.call('update', updateModel);
-                }
-            }
-        },
-        reset() {
-            if (state !== null) {
-                state = reactive({ ...defaultState });
-            }
-        },
-    };
-
-    return {
-        getInstance() {
-            if (state === null) {
-                state = reactive({ ...defaultState });
-            }
-            return state;
-        },
-    };
-})().getInstance();

package/src/storefront/account-and-website.js

@@ -1,18 +0,0 @@
-import AccountModel from './models/account-model';
-import WebsiteModel from './models/website-model';
-import { Endpoint } from './index';
-import state from '../state';
-
-export async function fetchAccountAndWebsite() {
-    return Endpoint(async () => {
-        state.storefront.setSessionToken(state.options.jwt);
-        const { fields } = await state.storefront.account.get({
-            expand: 'website',
-        });
-
-        return {
-            website: new WebsiteModel(fields._embedded?.website),
-            account: new AccountModel(fields),
-        };
-    });
-}

package/src/storefront/account-and-website.spec.js

@@ -1,73 +0,0 @@
-import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
-import { ok, get } from 'msw-when-then';
-import { when } from 'tests/msw/server';
-import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import { fetchAccountAndWebsite } from './account-and-website';
-import AccountModel, { AddressModel } from './models/account-model';
-import WebsiteModel from './models/website-model';
-
-describe('Storefront API Account', () => {
-    it('should handle fetch a customer with a null primary address', async () => {
-        const options = {
-            jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjBkNTRkOS0xNmM4LTRlZDAtYjljMy01ODAyZmQ4YzE2ZTIiLCJleHAiOjE2ODY2OTc0MTQuODQxMjUsImlhdCI6MTY1NTE2MTQxNC44Nzk4OTEsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsiMzY0NEFGTEFKMUciXSwicGF5bWVudE1ldGhvZHMiOlsicGF5bWVudC1jYXJkIl19LCJwZXJtaXNzaW9ucyI6WzI4NCwyODYsNDE0LDQxNSw0MzQsNDExLDQxMiw0MTMsNDI0LDQyNSw0MjYsNDI3LDQyOCw0MjksNDA5LDQxMCw0MDEsNDAyLDQzMyw0ODgsNDg3XX1dLCJjbGFpbXMiOnsid2Vic2l0ZUlkIjoiZGVtby13ZWJzaXRlIiwidHJhbnNhY3Rpb25JZCI6IjRiZDE3N2NmLTFlY2EtNDA2Yy04OWI0LTEzYzMzODk5NzlmMCIsInBheW1lbnRNZXRob2RzIjpbInBheW1lbnQtY2FyZCJdfSwibWVyY2hhbnQiOiIzNjQ0QUZMQUoxRyIsImN1c3RvbWVyIjp7ImlkIjoidGVzdC1jdXN0b21lci1pZCIsIm5hbWUiOiJUZXN0IEN1c3RvbWVyIE5hbWUiLCJjcmVhdGVkVGltZSI6IjIwMjItMDctMTRUMDA6MDA6MDArMDA6MDAifX0.VPue9QBhRGe3vvncaD47w84N8Bv2hEeShUl6SlNqoOQ',
-            items: [
-                {
-                    planId: 'test-plan-id',
-                    quantity: 1,
-                },
-            ],
-        };
-
-        when(get(`${storefrontURL}/acount`)).thenReturn(
-            ok({
-                defaultPaymentInstrument: null,
-                id: 'test-customer-id',
-                primaryAddress: null,
-                websiteId: 'test-website-id',
-            }),
-        );
-
-        const instance = StorefontTestingInstance({
-            options,
-        });
-
-        vi.spyOn(instance.storefront.account, 'get');
-
-        const response = await fetchAccountAndWebsite({ state: instance });
-        expect(response.account.address).toEqual(new AddressModel({}));
-    });
-
-    it('should return an object with account and website', async () => {
-        const options = {
-            jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjBkNTRkOS0xNmM4LTRlZDAtYjljMy01ODAyZmQ4YzE2ZTIiLCJleHAiOjE2ODY2OTc0MTQuODQxMjUsImlhdCI6MTY1NTE2MTQxNC44Nzk4OTEsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsiMzY0NEFGTEFKMUciXSwicGF5bWVudE1ldGhvZHMiOlsicGF5bWVudC1jYXJkIl19LCJwZXJtaXNzaW9ucyI6WzI4NCwyODYsNDE0LDQxNSw0MzQsNDExLDQxMiw0MTMsNDI0LDQyNSw0MjYsNDI3LDQyOCw0MjksNDA5LDQxMCw0MDEsNDAyLDQzMyw0ODgsNDg3XX1dLCJjbGFpbXMiOnsid2Vic2l0ZUlkIjoiZGVtby13ZWJzaXRlIiwidHJhbnNhY3Rpb25JZCI6IjRiZDE3N2NmLTFlY2EtNDA2Yy04OWI0LTEzYzMzODk5NzlmMCIsInBheW1lbnRNZXRob2RzIjpbInBheW1lbnQtY2FyZCJdfSwibWVyY2hhbnQiOiIzNjQ0QUZMQUoxRyIsImN1c3RvbWVyIjp7ImlkIjoidGVzdC1jdXN0b21lci1pZCIsIm5hbWUiOiJUZXN0IEN1c3RvbWVyIE5hbWUiLCJjcmVhdGVkVGltZSI6IjIwMjItMDctMTRUMDA6MDA6MDArMDA6MDAifX0.VPue9QBhRGe3vvncaD47w84N8Bv2hEeShUl6SlNqoOQ',
-            items: [
-                {
-                    planId: 'test-plan-id',
-                    quantity: 1,
-                },
-            ],
-        };
-
-        when(get(`${storefrontURL}/acount`)).thenReturn(
-            ok({
-                defaultPaymentInstrument: null,
-                id: 'test-customer-id',
-                primaryAddress: null,
-                websiteId: 'test-website-id',
-                _embedded: {
-                    website: {},
-                },
-            }),
-        );
-
-        const instance = StorefontTestingInstance({
-            options,
-        });
-
-        vi.spyOn(instance.storefront.account, 'get');
-
-        const response = await fetchAccountAndWebsite({ state: instance });
-        expect(response.account instanceof AccountModel).toBe(true);
-        expect(response.website instanceof WebsiteModel).toBe(true);
-    });
-});

package/src/storefront/deposit-requests.js

@@ -1,12 +0,0 @@
-import { Endpoint } from './index';
-import state from '../state';
-import DepositRequestModel from './models/deposit-request-model';
-
-export async function fetchDepositRequest({ data = null }) {
-    return Endpoint(async () => {
-        state.storefront.setSessionToken(state.options.jwt);
-        const { fields } = await state.storefront.cashierRequests.get(data);
-
-        return new DepositRequestModel(fields);
-    });
-}