@rebilly/instruments 4.4.0 → 4.6.0

package/src/style/base/theme.js

@@ -1,30 +1,30 @@
 import theme from './default-theme';
 
 export class Theme {
-  constructor(overrides = {}) {
-    this.overrides = overrides;
-    this.theme = theme;
-  }
+    constructor(overrides = {}) {
+        this.overrides = overrides;
+        this.theme = theme;
+    }
 
-  static nonCssProperties = ['labels'];
+    static nonCssProperties = ['labels'];
 
-  overrideTheme() {
-    Object.keys(this.overrides).forEach(prop => {
-      this.theme[prop] = this.overrides[prop];
-    })
-  }
+    overrideTheme() {
+        Object.keys(this.overrides).forEach((prop) => {
+            this.theme[prop] = this.overrides[prop];
+        });
+    }
 
-  get cssVars() {
-    return Object.keys(this.theme)
-      .filter(v => !Theme.nonCssProperties.includes(v))
-      .map((p, i) => `${!i ? '' : '  '}--rebilly-${p}: ${this.theme[p]};`)
-      .join('\n');
-  }
+    get cssVars() {
+        return Object.keys(this.theme)
+            .filter((v) => !Theme.nonCssProperties.includes(v))
+            .map((p, i) => `${!i ? '' : '  '}--rebilly-${p}: ${this.theme[p]};`)
+            .join('\n');
+    }
 
-  build() {
-    this.overrideTheme();
-    return {
-      cssVars: this.cssVars
+    build() {
+        this.overrideTheme();
+        return {
+            cssVars: this.cssVars,
+        };
     }
-  }
 }

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

@@ -1,19 +1,19 @@
 import { Theme } from './theme';
 
 describe('RebillyInstruments theme', () => {
-  it('builds the theme object', () => {
-    const theme = new Theme().build();
+    it('builds the theme object', () => {
+        const theme = new Theme().build();
 
-    expect(theme).toMatchSnapshot();
-  });
+        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;');
-  });
+    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

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

package/src/style/utils/border.js

@@ -1,34 +1,47 @@
 export default class Border {
-  allStyles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit'];
+    allStyles = [
+        'none',
+        'hidden',
+        'dotted',
+        'dashed',
+        'solid',
+        'double',
+        'groove',
+        'ridge',
+        'inset',
+        'outset',
+        'initial',
+        'inherit',
+    ];
 
-  constructor(str) {
-    this.str = str || '';
+    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]];
-  }
+        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;
-      }
+    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;
     }
-    return stylePosition;
-  }
 
-  updateColor(color) {
-    this.border[this.stylePosition + 1] = color;
-    return this;
-  }
+    updateColor(color) {
+        this.border[this.stylePosition + 1] = color;
+        return this;
+    }
 
-  get value() {
-    return this.border.join(' ');
-  }
-}
+    get value() {
+        return this.border.join(' ');
+    }
+}

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

@@ -3,13 +3,13 @@ import Values from 'values.js';
 export const colorValues = (color) => new Values(color);
 
 export function alphaColor(color, alphaValue = 1) {
-  if(color === null) {
-    return color;
-  }
+    if (color === null) {
+        return color;
+    }
 
-  const _alphaColor = colorValues(color);
-  _alphaColor.alpha = alphaValue;
-  return _alphaColor.rgbString();
+    const _alphaColor = colorValues(color);
+    _alphaColor.alpha = alphaValue;
+    return _alphaColor.rgbString();
 }
 
 export const mutedTextColor = (color) => alphaColor(color, 0.5);
@@ -17,19 +17,19 @@ 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;
-  }
+    if (color === null) {
+        return color;
+    }
 
-  const _color = colorValues(color);
-  return _color.shade(percent).hexString()
-}
+    const _color = colorValues(color);
+    return _color.shade(percent).hexString();
+};
 
 export const lighten = (color, percent) => {
-  if(color === null) {
-    return color;
-  }
+    if (color === null) {
+        return color;
+    }
 
-  const _color = colorValues(color);
-  return _color.tint(percent).hexString()
-}
+    const _color = colorValues(color);
+    return _color.tint(percent).hexString();
+};

package/src/style/utils/minifyCss.js

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

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

@@ -1,17 +1,17 @@
 export default function addDOMElement({
-  element = 'div',
-  attributes = {},
-  content = null,
-  target = 'body',
-  insertMethod = 'append'
+    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);
+    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,7 +1,8 @@
 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
-  );
+    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 +1,4 @@
 export default function hasValidCSSSelector(selector) {
-  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
-  return typeof selector === 'string' && selector.match(REGEX_CSS_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

@@ -6,10 +6,10 @@ import formatCurrency from './format-currency';
 import sleep from './sleep';
 
 export {
-  addDOMElement,
-  processPropertyAsDOMElement,
-  isDOMElement,
-  hasValidCSSSelector,
-  formatCurrency,
-  sleep
+    addDOMElement,
+    processPropertyAsDOMElement,
+    isDOMElement,
+    hasValidCSSSelector,
+    formatCurrency,
+    sleep,
 };

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

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

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

@@ -2,30 +2,30 @@ import hasValidCSSSelector from './has-valid-css-selector';
 import isDOMElement from './is-dom-element';
 
 export default function processPropertyAsDOMElement({
-  prop,
-  propName = 'Mounting',
-  isRequired = true
+    prop,
+    propName = 'Mounting',
+    isRequired = true,
 } = {}) {
-  let DOMElement;
+    let DOMElement;
 
-  if (typeof prop === 'undefined') {
-    throw new Error('processPropertyDOMElement: Missing argument "prop"');
-  }
+    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 (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;
+    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,49 +1,47 @@
 import { toRaw } from 'vue';
 
 const defaultOptions = {
-  minimum: 1,
-  maximum: Number.MAX_SAFE_INTEGER,
-  multipleOf: 1,
+    minimum: 1,
+    maximum: Number.MAX_SAFE_INTEGER,
+    multipleOf: 1,
 };
-export const isObject = val => typeof val === 'object';
+export const isObject = (val) => typeof val === 'object';
 
 export function parseQuantity({ quantity }) {
-  return isObject(quantity) ?
-    { ...defaultOptions, ...quantity } :
-    quantity;
+    return isObject(quantity) ? { ...defaultOptions, ...quantity } : quantity;
 }
 
 export function mergeOptionsItemsQuantity(items) {
-  return items.map(item => ({
-    ...item,
-    quantity: parseQuantity(item)
-  }))
+    return items.map((item) => ({
+        ...item,
+        quantity: parseQuantity(item),
+    }));
 }
 
 export function getQuantityValue(quantity) {
-  return isObject(quantity) ? quantity.default : quantity;
+    return isObject(quantity) ? quantity.default : quantity;
 }
 
 export function mapItemsQuantities(items) {
-  return items.map(({ planId, quantity }) => ({
-    planId,
-    quantity: getQuantityValue(quantity)
-  }))
+    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())
+    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;
-    }
-  }
-}
+    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,3 +1,5 @@
 export default function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
 }

package/src/views/amount-selector.js

@@ -2,46 +2,47 @@ 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,
+    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,
     };
 
-    const readyToPayUpdated = await fetchReadyToPay({
-      riskMetadata: state.data.riskMetadata
+    iframe.component?.call('route', {
+        name: 'amount-selector',
     });
 
-    state.data.readyToPay = readyToPayUpdated;
+    iframe.component?.call('update', model);
 
-    state.updateModel();
-    mountMethodSelector();
-  });
-}
+    iframe?.component?.on('confirm-amount', async (data) => {
+        const { amount, currency } = data;
+        state.data.money = {
+            amount,
+            currency,
+        };
+
+        const readyToPayUpdated = await fetchReadyToPay({
+            riskMetadata: state.data.riskMetadata,
+        });
+
+        state.data.readyToPay = readyToPayUpdated;
+
+        state.updateModel();
+        mountMethodSelector();
+    });
+}