@rebilly/instruments 4.8.1 → 4.8.2

package/src/style/base/theme.spec.js

@@ -1,19 +0,0 @@
-import { Theme } from './theme';
-
-describe('RebillyInstruments theme', () => {
-    it('builds the theme object', () => {
-        const theme = new Theme().build();
-
-        expect(theme).toMatchSnapshot();
-    });
-
-    it('properly overrides the default properties', () => {
-        const overrides = {
-            colorPrimary: 'red',
-            buttonBorderRadius: '30px',
-        };
-        const theme = new Theme(overrides).build();
-        expect(theme.cssVars).toMatch('--rebilly-colorPrimary: red;');
-        expect(theme.cssVars).toMatch('--rebilly-buttonBorderRadius: 30px;');
-    });
-});

package/src/style/index.js

@@ -1,11 +0,0 @@
-import { Theme } from './base/theme';
-import { vars } from './base';
-
-export const mainStyleVars = (themeOverride) => {
-    const resolvedTheme = new Theme(themeOverride).build();
-    const style = `
-    ${vars(resolvedTheme)}
-  `;
-
-    return style;
-};

package/src/style/utils/border.js

@@ -1,47 +0,0 @@
-export default class Border {
-    allStyles = [
-        'none',
-        'hidden',
-        'dotted',
-        'dashed',
-        'solid',
-        'double',
-        'groove',
-        'ridge',
-        'inset',
-        'outset',
-        'initial',
-        'inherit',
-    ];
-
-    constructor(str) {
-        this.str = str || '';
-
-        const style = this.allStyles.find((s) => this.str.includes(s));
-        const borderProps = this.str.split(style).map((a) => a.trim());
-        this.border = [borderProps[0], style, borderProps[1]];
-    }
-
-    get stylePosition() {
-        let stylePosition = 0;
-        if (this.border.length === 3) {
-            stylePosition = 1;
-        } else if (this.border.length === 2) {
-            if (this.allStyles.includes(this.border[0])) {
-                stylePosition = 0;
-            } else {
-                stylePosition = 1;
-            }
-        }
-        return stylePosition;
-    }
-
-    updateColor(color) {
-        this.border[this.stylePosition + 1] = color;
-        return this;
-    }
-
-    get value() {
-        return this.border.join(' ');
-    }
-}

package/src/style/utils/color-values.js

@@ -1,35 +0,0 @@
-import Values from 'values.js';
-
-export const colorValues = (color) => new Values(color);
-
-export function alphaColor(color, alphaValue = 1) {
-    if (color === null) {
-        return color;
-    }
-
-    const _alphaColor = colorValues(color);
-    _alphaColor.alpha = alphaValue;
-    return _alphaColor.rgbString();
-}
-
-export const mutedTextColor = (color) => alphaColor(color, 0.5);
-
-export const mutedBorderColor = (color) => alphaColor(color, 0.25);
-
-export const darken = (color, percent) => {
-    if (color === null) {
-        return color;
-    }
-
-    const _color = colorValues(color);
-    return _color.shade(percent).hexString();
-};
-
-export const lighten = (color, percent) => {
-    if (color === null) {
-        return color;
-    }
-
-    const _color = colorValues(color);
-    return _color.tint(percent).hexString();
-};

package/src/style/utils/minifyCss.js

@@ -1,14 +0,0 @@
-export function minifyCss(_content) {
-    let content = _content;
-    // Remove all comments and new lines
-    content = content.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '');
-    // Remove spaces between selectors
-    content = content.replace(/\s{2,}/g, ' ');
-    // Remove spaces of nested { }
-    content = content.replace(/\s([{:}])\s/g, '$1');
-    // Remove spaces between , and ;
-    content = content.replace(/([;,])\s/g, '$1');
-    // Remove important! spaces
-    content = content.replace(/\s!/g, '!');
-    return content;
-}

package/src/utils/add-dom-element.js

@@ -1,17 +0,0 @@
-export default function addDOMElement({
-    element = 'div',
-    attributes = {},
-    content = null,
-    target = 'body',
-    insertMethod = 'append',
-} = {}) {
-    const ELEMENT = document.createElement(element);
-    const ELEMENT_ATTRIBUTES = Object.entries(attributes);
-    ELEMENT_ATTRIBUTES.forEach(([attribute, value]) => {
-        ELEMENT.setAttribute(attribute, value);
-    });
-    if (content) {
-        ELEMENT.innerHTML = content;
-    }
-    document[target][insertMethod](ELEMENT);
-}

package/src/utils/format-currency.js

@@ -1,8 +0,0 @@
-export default function formatCurrency(number, currency) {
-    const converToNumber = Number(number);
-    if (Number.isNaN(converToNumber) || number === null) return '-';
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: currency || 'USD',
-    }).format(number);
-}

package/src/utils/has-valid-css-selector.js

@@ -1,4 +0,0 @@
-export default function hasValidCSSSelector(selector) {
-    const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
-    return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
-}

package/src/utils/index.js

@@ -1,15 +0,0 @@
-import addDOMElement from './add-dom-element';
-import processPropertyAsDOMElement from './process-property-as-dom-element';
-import isDOMElement from './is-dom-element';
-import hasValidCSSSelector from './has-valid-css-selector';
-import formatCurrency from './format-currency';
-import sleep from './sleep';
-
-export {
-    addDOMElement,
-    processPropertyAsDOMElement,
-    isDOMElement,
-    hasValidCSSSelector,
-    formatCurrency,
-    sleep,
-};

package/src/utils/is-dom-element.js

@@ -1,3 +0,0 @@
-export default function isDOMElement(element) {
-    return element instanceof Element || element instanceof HTMLDocument;
-}

package/src/utils/process-property-as-dom-element.js

@@ -1,31 +0,0 @@
-import hasValidCSSSelector from './has-valid-css-selector';
-import isDOMElement from './is-dom-element';
-
-export default function processPropertyAsDOMElement({
-    prop,
-    propName = 'Mounting',
-    isRequired = true,
-} = {}) {
-    let DOMElement;
-
-    if (typeof prop === 'undefined') {
-        throw new Error('processPropertyDOMElement: Missing argument "prop"');
-    }
-
-    if (hasValidCSSSelector(prop)) {
-        DOMElement = document.querySelector(prop);
-    } else if (isDOMElement(prop)) {
-        DOMElement = prop;
-    } else {
-        throw new Error(
-            `Please provide a valid CSS class, id or DOM element for "${propName}" property`,
-        );
-    }
-
-    if (!DOMElement && isRequired) {
-        throw new Error(
-            `Could not find DOM element with CSS class or id "${prop}" to mount ${propName}`,
-        );
-    }
-    return DOMElement;
-}

package/src/utils/quantity.js

@@ -1,47 +0,0 @@
-import { toRaw } from 'vue';
-
-const defaultOptions = {
-    minimum: 1,
-    maximum: Number.MAX_SAFE_INTEGER,
-    multipleOf: 1,
-};
-export const isObject = (val) => typeof val === 'object';
-
-export function parseQuantity({ quantity }) {
-    return isObject(quantity) ? { ...defaultOptions, ...quantity } : quantity;
-}
-
-export function mergeOptionsItemsQuantity(items) {
-    return items.map((item) => ({
-        ...item,
-        quantity: parseQuantity(item),
-    }));
-}
-
-export function getQuantityValue(quantity) {
-    return isObject(quantity) ? quantity.default : quantity;
-}
-
-export function mapItemsQuantities(items) {
-    return items.map(({ planId, quantity }) => ({
-        planId,
-        quantity: getQuantityValue(quantity),
-    }));
-}
-
-export function createQuantitiesMap(items) {
-    return items.reduce((map, item) => {
-        map.set(item.planId, toRaw(item.quantity));
-        return map;
-    }, new Map());
-}
-
-export function updateItemQuantityFromMap(quantitiesByPlanId) {
-    return function updateQuantity(item) {
-        const quantity = quantitiesByPlanId.get(item.planId) || item.quantity;
-        if (isObject(quantity)) {
-            quantity.default = getQuantityValue(item.quantity);
-            item.quantity = quantity;
-        }
-    };
-}

package/src/utils/sleep.js

@@ -1,5 +0,0 @@
-export default function sleep(ms) {
-    return new Promise((resolve) => {
-        setTimeout(resolve, ms);
-    });
-}

package/src/views/amount-selector.js

@@ -1,46 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { mountMethodSelector } from './method-selector';
-import { fetchReadyToPay } from '../storefront/ready-to-pay';
-import { mountForm } from './form';
-
-export async function mountAmountSelector() {
-    if (state.data.money) {
-        state.data.money.amount = null;
-        state.data.money.currency = null;
-        state.updateModel();
-    }
-
-    const iframe = iframes.form;
-    if (!iframe) {
-        await mountForm();
-    }
-
-    const modelSafeState = state.toModel();
-    const model = {
-        options: modelSafeState.options,
-        data: modelSafeState.data,
-        mainStyleVars: modelSafeState.mainStyleVars,
-    };
-
-    iframe.component?.call('route', {
-        name: 'amount-selector',
-    });
-
-    iframe.component?.call('update', model);
-
-    iframe?.component?.on('confirm-amount', async (data) => {
-        const { amount, currency } = data;
-        state.data.money = {
-            amount,
-            currency,
-        };
-
-        const readyToPayUpdated = await fetchReadyToPay();
-
-        state.data.readyToPay = readyToPayUpdated;
-
-        state.updateModel();
-        mountMethodSelector();
-    });
-}

package/src/views/common/iframe/base-iframe.js

@@ -1,66 +0,0 @@
-import Postmate from 'popostmate';
-
-export default class BaseIframe {
-    constructor({
-        name = '',
-        url = '',
-        model = {},
-        container = null,
-        classListArray = [],
-        route = null,
-    } = {}) {
-        classListArray = Array.isArray(classListArray) ? classListArray : [];
-        if (!classListArray.includes('rebilly-instruments-iframe')) {
-            classListArray.push('rebilly-instruments-iframe');
-        }
-
-        this.container = container;
-        this.classListArray = classListArray;
-        this.name = name;
-        this.url = url;
-        this.model = model;
-        this.component = null;
-
-        // eslint-disable-next-line no-constructor-return
-        return (async () => {
-            this.component = await this.createComponent();
-
-            if (route) {
-                this.component.call('route', route);
-            }
-
-            return this;
-        })();
-    }
-
-    async destroy() {
-        if (this.component.frame.parentNode) {
-            await this.component.destroy();
-        }
-    }
-
-    async createComponent() {
-        // Use a fake container so we can capture the appendChild call
-        // and immediately apply the feature-policy flags to the iframe
-        // before Postmate tries to load the iframe. The feature policy
-        // would otherwise not apply until the frame was reloaded.
-        const container = {
-            appendChild: (iframe) => {
-                iframe.setAttribute('loading', 'lazy');
-                iframe.setAttribute('allow', 'payment');
-                iframe.allowPaymentRequest = true;
-                this.container.appendChild(iframe);
-            },
-        };
-
-        const component = await new Postmate({
-            name: this.name,
-            url: this.url,
-            container,
-            classListArray: this.classListArray,
-            model: this.model,
-        });
-
-        return component;
-    }
-}

package/src/views/common/iframe/events/change-iframe-src-handler.js

@@ -1,6 +0,0 @@
-export function changeIframeSrcHandler(iframe) {
-    iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
-        iframe.component.frame.src = url;
-        iframe.component.frame.style.height = '75vh';
-    });
-}

package/src/views/common/iframe/events/dispatch-event-handler.js

@@ -1,8 +0,0 @@
-import camelCase from 'lodash.camelcase';
-import Events from '../../../../events';
-
-export function dispatchEventHandler(iframe) {
-    iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
-        Events[camelCase(event).replace(/-/, '')].dispatch(detail);
-    });
-}

package/src/views/common/iframe/events/resize-component-handler.js

@@ -1,9 +0,0 @@
-export function resizeComponentHandler(iframe) {
-    let prevHeight = '';
-    iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
-        if (height !== prevHeight) {
-            prevHeight = height;
-            iframe.component.frame.style.height = height;
-        }
-    });
-}

package/src/views/common/iframe/events/show-error-handler.js

@@ -1,5 +0,0 @@
-import { showError } from '../../../errors';
-
-export function showErrorHandler(iframe) {
-    iframe.component.on(`${iframe.name}-show-error`, showError);
-}

package/src/views/common/iframe/events/stop-loader-handler.js

@@ -1,9 +0,0 @@
-export function stopLoaderHandler(iframe, data) {
-    iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
-        let { section } = data;
-        if (!section) {
-            section = id.includes('summary') ? 'summary' : 'form';
-        }
-        data.loader?.stopLoading({ section, id });
-    });
-}

package/src/views/common/iframe/events/update-addons-handler.js

@@ -1,23 +0,0 @@
-import state from '../../../../state';
-
-export function updateAddonsHandler(iframe) {
-    iframe.component.on(
-        `${iframe.name}-update-addons`,
-        async ({ addons, previewPurchase }) => {
-            const addonPlanIds = addons.map((addon) => addon.planId);
-            state.data.addons = addonPlanIds;
-            state.data.previewPurchase = previewPurchase;
-
-            state.data.previewPurchase.addonLineItems =
-                state.data.previewPurchase.lineItems.filter((item) =>
-                    addonPlanIds.includes(item.planId),
-                );
-            state.data.previewPurchase.lineItems =
-                state.data.previewPurchase.lineItems.filter(
-                    (item) => !addonPlanIds.includes(item.planId),
-                );
-
-            state.updateModel();
-        },
-    );
-}

package/src/views/common/iframe/events/update-coupons-handler.js

@@ -1,12 +0,0 @@
-import state from '../../../../state';
-
-export function updateCouponsHandler(iframe) {
-    iframe.component.on(
-        `${iframe.name}-update-coupon`,
-        async ({ couponIds, previewPurchase } = {}) => {
-            state.data.couponIds = couponIds;
-            state.data.previewPurchase = previewPurchase;
-            state.updateModel();
-        },
-    );
-}

package/src/views/common/iframe/events/update-items-handler.js

@@ -1,34 +0,0 @@
-import state from '../../../../state';
-import { fetchSummary } from '../../../../storefront/summary';
-import {
-    createQuantitiesMap,
-    getQuantityValue,
-    isObject,
-} from '../../../../utils/quantity';
-
-let loading = false;
-export async function itemsUpdatedHandler(iframe) {
-    iframe.component.on(`${iframe.name}-update-items`, async (lineItems) => {
-        try {
-            if (loading) return;
-            loading = true;
-            const mappedItems = createQuantitiesMap(lineItems);
-
-            state.data.summaryLineItems.forEach((item) => {
-                const quantity = getQuantityValue(mappedItems.get(item.planId));
-                if (isObject(item.quantity)) {
-                    item.quantity.default = quantity;
-                } else {
-                    item.quantity = quantity;
-                }
-            });
-
-            await fetchSummary();
-            state.updateModel();
-            loading = false;
-        } catch (err) {
-            console.error(err);
-            loading = false;
-        }
-    });
-}

package/src/views/common/iframe/index.js

@@ -1,5 +0,0 @@
-import { ViewIframe as view } from './view-iframe';
-import { ModalIframe as modal } from './modal-iframe';
-
-export const ViewIframe = view;
-export const ModalIframe = modal;

package/src/views/common/iframe/modal-iframe.js

@@ -1,82 +0,0 @@
-import BaseIframe from './base-iframe';
-import state from '../../../state';
-
-import { changeIframeSrcHandler } from './events/change-iframe-src-handler';
-import { resizeComponentHandler } from './events/resize-component-handler';
-import { dispatchEventHandler } from './events/dispatch-event-handler';
-import { showErrorHandler } from './events/show-error-handler';
-import { stopLoaderHandler } from './events/stop-loader-handler';
-
-export class ModalIframe extends BaseIframe {
-    constructor(args = {}) {
-        super(args);
-    }
-
-    bindEventListeners({ close = () => {}, loader } = {}) {
-        dispatchEventHandler(this);
-        resizeComponentHandler(this);
-        changeIframeSrcHandler(this);
-        stopLoaderHandler(this, {
-            loader,
-            section: 'modal',
-            id: this.name,
-        });
-        showErrorHandler(this);
-
-        // Close modal via postmate
-        this.component.on(`${this.name}-close`, (...args) => {
-            close(...args);
-        });
-
-        // Close modal via postMessage (specifically during approval url flow)
-        window.addEventListener(
-            'message',
-            async (event) => {
-                if (event.data === 'rebilly-instruments-approval-url-close') {
-                    if (state.options.transactionType === 'purchase') {
-                        state.storefront.setSessionToken(
-                            state.data.token || state.options.jwt,
-                        );
-
-                        const [{ fields: transaction }, { fields: invoice }] =
-                            await Promise.all([
-                                state.storefront.transactions.get({
-                                    id: state.data.transaction.id,
-                                }),
-                                state.data.invoice?.id
-                                    ? state.storefront.invoices.get({
-                                          id: state.data.invoice.id,
-                                      })
-                                    : { fields: null },
-                            ]);
-
-                        const updatedPurchase = {
-                            orderId: state.data.orderId,
-                            token: state.data.token,
-                            transaction,
-                        };
-                        if (invoice) {
-                            updatedPurchase.invoice = invoice;
-                        }
-                        close(updatedPurchase);
-                    } else if (state.options.transactionType === 'setup') {
-                        state.storefront.setSessionToken(
-                            state.data.instrument.token || state.options.jwt,
-                        );
-                        const { fields: transaction } =
-                            await state.storefront.transactions.get({
-                                id: state.data.transaction.id,
-                            });
-                        close({
-                            transaction,
-                            instrument: state.data.instrument,
-                        });
-                    } else {
-                        close();
-                    }
-                }
-            },
-            false,
-        );
-    }
-}

package/src/views/common/iframe/view-iframe.js

@@ -1,23 +0,0 @@
-import BaseIframe from './base-iframe';
-
-import { resizeComponentHandler } from './events/resize-component-handler';
-import { dispatchEventHandler } from './events/dispatch-event-handler';
-import { updateCouponsHandler } from './events/update-coupons-handler';
-import { updateAddonsHandler } from './events/update-addons-handler';
-import { showErrorHandler } from './events/show-error-handler';
-import { stopLoaderHandler } from './events/stop-loader-handler';
-
-export class ViewIframe extends BaseIframe {
-    constructor(args = {}) {
-        super(args);
-    }
-
-    bindEventListeners({ loader } = {}) {
-        dispatchEventHandler(this);
-        resizeComponentHandler(this);
-        stopLoaderHandler(this, { loader });
-        showErrorHandler(this);
-        updateCouponsHandler(this);
-        updateAddonsHandler(this);
-    }
-}

package/src/views/common/render-utilities.js

@@ -1,4 +0,0 @@
-export function replaceContent(form, newContent) {
-    const contentElement = form.querySelector('.rebilly-instruments-content');
-    contentElement.innerHTML = newContent;
-}

package/src/views/confirmation.js

@@ -1,45 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { mountForm } from './form';
-import { updateSummary } from './summary';
-import { purchase } from '../functions/purchase';
-import { setup } from '../functions/setup';
-
-export async function mountConfirmation({ payload: instrument }) {
-    if (instrument.billingAddress && state.summary && state.data.isPurchase) {
-        updateSummary({ instrument });
-    }
-
-    const iframe = iframes.form;
-    if (!iframe) {
-        await mountForm();
-    }
-
-    const modelSafeState = state.toModel();
-    const model = {
-        options: modelSafeState.options,
-        data: modelSafeState.data,
-        mainStyleVars: modelSafeState.mainStyleVars,
-        instrument,
-    };
-
-    iframe?.component?.call('update', model);
-
-    iframe?.component?.call('route', {
-        name: 'confirmation',
-    });
-
-    iframe?.component?.on(
-        `${iframe.name}-confirm-purchase`,
-        (confirmedInstrument) => {
-            purchase({ payload: confirmedInstrument });
-        },
-    );
-
-    iframe?.component?.on(
-        `${iframe.name}-confirm-setup`,
-        (confirmedInstrument) => {
-            setup({ payload: confirmedInstrument });
-        },
-    );
-}