@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/src/index.spec.js

@@ -1,11 +1,15 @@
-import RebillyInstruments, {RebillyInstrumentsInstance} from './index';
+import RebillyInstruments, { RebillyInstrumentsInstance } from './index';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
+import { initialize } from './functions/initialize';
 
 describe('RebillyInstruments instance', () => {
   let rebillyInstruments;
 
-  function setupInstance(config = {
-    test: 'value'
-  }) {
+  function setupInstance(
+    config = {
+      test: 'value'
+    }
+  ) {
     rebillyInstruments.initialize(config);
   }
 
@@ -17,23 +21,10 @@ describe('RebillyInstruments instance', () => {
     expect(RebillyInstruments).toBeInstanceOf(RebillyInstrumentsInstance);
   });
 
-  it('should be initializable', () => {
-    jest.spyOn(rebillyInstruments, 'initialize');
-
-    const config = {
-      test: 'value'
-    };
-    rebillyInstruments.initialize(config);
-
-    expect(rebillyInstruments.initialize).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.initialize).toHaveBeenCalledWith(config);
-  });
-
-  it('should be mountable', () => {
+  it('should be mountable', async () => {
     jest.spyOn(rebillyInstruments, 'mount');
 
-    document.body.innerHTML =
-    `
+    document.body.innerHTML = `
       <div class="form-selector"></div>
       <div class="summary-selector"></div>
     `;
@@ -48,28 +39,7 @@ describe('RebillyInstruments instance', () => {
 
     expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
     expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
-  });
-
-  it('should be updateable', () => {
-    jest.spyOn(rebillyInstruments, 'update');
-
-    const config = {
-      test: 'value'
-    };
-    setupInstance();
-    rebillyInstruments.update(config);
-
-    expect(rebillyInstruments.update).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.update).toHaveBeenCalledWith(config);
-  });
-
-  it('should be destroyable', () => {
-    jest.spyOn(rebillyInstruments, 'destroy');
-
-    setupInstance();
-    rebillyInstruments.destroy();
-
-    expect(rebillyInstruments.destroy).toHaveBeenCalledTimes(1);
+    await avoidUnhandledPromises();
   });
 
   it('should be able to trigger a purchase', () => {
@@ -83,4 +53,3 @@ describe('RebillyInstruments instance', () => {
     expect(rebillyInstruments.purchase).toHaveBeenCalledTimes(1);
   });
 });
-

package/src/loader/index.js

@@ -1,54 +1,70 @@
 import isDOMElement from '../utils/is-dom-element';
 
 export class Loader {
-    constructor() {
-        this.summary = [];
-        this.form = [];
-        this.DOM = {
-            loading: `
-                <div class="rebilly-instruments-loader active">
+  constructor() {
+    this.summary = [];
+    this.form = [];
+    this.modal = [];
+    this.DOM = {
+      loading: `
+                <div class="rebilly-instruments-loader is-active">
                     <div class="rebilly-instruments-loader-spinner"></div>
                 </div>
             `
-        };
-    }
+    };
+  }
+
+  addDOMElement({ section = 'form', el = null } = {}) {
+    const minHeight = '200px';
+
+    if (isDOMElement(el)) {
+      el.style.position = 'relative';
+      el.style.minHeight = minHeight;
 
-    addDOMElement({section = 'form', el = null} = {}) {
-        const minHeight = '200px';
+      this.DOM[section] = el;
+    }
+  }
 
-        if (isDOMElement(el)) {
-            el.style.position = 'relative';
-            el.style.minHeight = minHeight;
-            el.style.paddingTop = section === 'form' ? '8px' : '0px';
+  startLoading({ section = 'form', id = '' } = {}) {
+    this[section].push(id);
 
-            this.DOM[section] = el;
-        }
+    if (this.DOM?.[section]) {
+      if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
+        this.DOM[section].innerHTML = this.DOM.loading;
+      } else {
+        this.DOM[section]
+          .querySelector('.rebilly-instruments-loader')
+          .classList.add('is-active');
+      }
     }
+  }
+
+  stopLoading({ section = 'form', id = '' } = {}) {
+    const idIndex = this[section].indexOf(id);
 
-    startLoading({section = 'form', id = ''} = {}) {
-        this[section].push(id);
-
-        if (this.DOM?.[section]) {
-            if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-                this.DOM[section].innerHTML = this.DOM.loading;
-            } else {
-                this.DOM[section].querySelector('.rebilly-instruments-loader')
-                    .classList.add('active'); 
-            }
-        }
+    if (idIndex !== -1) {
+      this[section].splice(idIndex, 1);
     }
 
-    stopLoading({section = 'form', id = ''} = {}) {
-        const idIndex = this[section].indexOf(id);
-
-        if (idIndex !== -1) {
-            this[section].splice(idIndex, 1);
-        }
-        
-        if (!this[section].length
-            && this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-            this.DOM[section].querySelector('.rebilly-instruments-loader')
-                .classList.remove('active');
-        }
+    if (
+      !this[section].length &&
+      this.DOM[section].querySelector('.rebilly-instruments-loader')
+    ) {
+      this.DOM[section]
+        .querySelector('.rebilly-instruments-loader')
+        .classList.remove('is-active');
     }
+  }
+
+  clearAll() {
+    this.form.forEach((id) => {
+      this.stopLoading({ id });
+    });
+    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,5 +1,5 @@
 import { Loader } from './index';
- 
+
 describe('Loader Class', () => {
   let loader;
 
@@ -11,57 +11,64 @@ describe('Loader Class', () => {
       <div class="summary-selector"></div>
     `;
 
-    loader.addDOMElement({el: document.querySelector('.form-selector')});
-    loader.addDOMElement({section: 'summary', el: document.querySelector('.summary-selector')});
-  })
+    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'});
+    loader.startLoading({ id: 'loadForm' });
+    loader.startLoading({ id: 'updateForm' });
 
     // Start loading state
-    loader.startLoading({section: 'summary', id: 'loadSummary'});
-    loader.startLoading({section: 'summary', id: 'updateSummary'});
+    loader.startLoading({ section: 'summary', id: 'loadSummary' });
+    loader.startLoading({ section: 'summary', id: 'updateSummary' });
 
     // Stop one loading state
-    loader.stopLoading({id: 'loadForm'});
+    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'});
+    loader.startLoading({ id: 'loadForm' });
 
     expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
     expect(
-      loader.DOM.form.querySelector('.rebilly-instruments-loader')
-        .classList.contains('active')
+      loader.DOM.form
+        .querySelector('.rebilly-instruments-loader')
+        .classList.contains('is-active')
     ).toEqual(true);
 
-    loader.stopLoading({id: 'loadForm'});
+    loader.stopLoading({ id: 'loadForm' });
 
     expect(
-      loader.DOM.form.querySelector('.rebilly-instruments-loader')
-        .classList.contains('active')
+      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'});
+    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('active')
+      loader.DOM.form
+        .querySelector('.rebilly-instruments-loader')
+        .classList.contains('is-active')
     ).toEqual(true);
 
-    loader.stopLoading({id: 'loadForm'});
-    
+    loader.stopLoading({ id: 'loadForm' });
+
     expect(
-      loader.DOM.form.querySelector('.rebilly-instruments-loader')
-        .classList.contains('active')
+      loader.DOM.form
+        .querySelector('.rebilly-instruments-loader')
+        .classList.contains('is-active')
     ).toEqual(true);
   });
 });

package/src/storefront/index.js

@@ -1,7 +1,7 @@
-import {RebillyStorefrontAPI} from 'rebilly-js-sdk';
+import { RebillyStorefrontAPI } from 'rebilly-js-sdk';
 
 export class StorefrontInstance {
-  constructor ({
+  constructor({
     publishableKey = null,
     organizationId = null,
     mode = 'live',
@@ -17,15 +17,17 @@ export class StorefrontInstance {
     const api = RebillyStorefrontAPI({
       organizationId,
       sandbox: mode === 'sandbox',
-      timeout: Number.isNaN(parseInt(timeout, 10)) ? 10000 : parseInt(timeout, 10),
-      urls,
+      timeout: Number.isNaN(parseInt(timeout, 10))
+        ? 10000
+        : parseInt(timeout, 10),
+      urls
     });
-  
+
     api.setPublishableKey(publishableKey);
-  
+
     this.api = api;
     return this.api;
   }
 }
 
-export default (config = {}) => new StorefrontInstance(config)
+export default (config = {}) => new StorefrontInstance(config);

package/src/storefront/models/plan-model.js

@@ -14,7 +14,7 @@ export default class PlanModel {
     customFields = {},
     createdTime = '',
     updatedTime = '',
-    invoiceTimeShift = {},
+    invoiceTimeShift = {}
   } = {}) {
     this.id = id;
     this.name = name;

package/src/storefront/models/product-model.js

@@ -8,7 +8,7 @@ export default class ProductModel {
     options = [],
     customFields = {},
     createdTime = '',
-    updatedTime = '',
+    updatedTime = ''
   } = {}) {
     this.id = id;
     this.name = name;

package/src/storefront/models/ready-to-pay-model.js

@@ -1,12 +1,18 @@
 export class ReadyToPayFeatureModel {
   constructor({
     name = '',
+    // Google Pay fields
+    merchantName = '',
+    merchantOrigin = '',
+    // Plaid fields
     linkToken = '',
-    expirationTime = '',
+    expirationTime = ''
   } = {}) {
     this.name = name;
+    this.merchantName = merchantName;
+    this.merchantOrigin = merchantOrigin;
     this.linkToken = linkToken;
-    this.expirtationTime = expirationTime;
+    this.expirationTime = expirationTime;
   }
 }
 
@@ -16,7 +22,7 @@ export default class ReadyToPayModel {
     method = '',
     feature = null,
     brands = [],
-    filters = [],
+    filters = []
   } = {}) {
     this.index = index;
     this.method = method;
@@ -24,4 +30,4 @@ export default class ReadyToPayModel {
     this.brands = brands;
     this.filters = filters;
   }
-}
+}

package/src/storefront/models/summary-model.js

@@ -1,4 +1,4 @@
-export class SummaryLineItemModel{
+export class SummaryLineItemModel {
   constructor({
     type = '',
     description = '',
@@ -19,21 +19,14 @@ export class SummaryLineItemModel{
 }
 
 export class SummaryTaxModel {
-  constructor({
-    amount = '',
-    description = ''
-  } = {}) {
+  constructor({ amount = '', description = '' } = {}) {
     this.amount = amount;
     this.description = description;
   }
 }
 
 export class SummaryDiscountModel {
-  constructor({
-    couponId = '',
-    amount = 0,
-    description = ''
-  } = {}) {
+  constructor({ couponId = '', amount = 0, description = '' } = {}) {
     this.couponId = couponId;
     this.amount = amount;
     this.description = description;
@@ -53,13 +46,13 @@ export default class SummaryModel {
     total = 0.0
   } = {}) {
     function map(array) {
-      const list = (Array.isArray(array) ? array : []);
+      const list = Array.isArray(array) ? array : [];
       return {
         // eslint-disable-next-line new-cap
-        to: (instance) => list.map(item => new instance(item))
-      }
+        to: (instance) => list.map((item) => new instance(item))
+      };
     }
-    
+
     this.currency = currency;
     this.lineItems = map(lineItems).to(SummaryLineItemModel);
     this.taxes = map(taxes).to(SummaryTaxModel);
@@ -70,4 +63,4 @@ export default class SummaryModel {
     this.discountsAmount = discountsAmount;
     this.total = total;
   }
-}
+}

package/src/storefront/plans.js

@@ -1,30 +1,34 @@
 import PlanModel from './models/plan-model';
 
-export async function FetchPlans ({
-  data = null
-} = {}) {
-  if (!this.storefront) {
+export async function fetchPlans({ data = null, state = null }) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
-    throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  if (!state.configs || !state.options) {
+    throw new Error(
+      'Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data'
+    );
   }
 
   try {
     const { lineItems } = data || {};
 
     const filterByPlanId = {
-      filter: '',
-    }
+      filter: ''
+    };
 
     if (lineItems) {
-      filterByPlanId.filter = `id:${lineItems.map(item => item.planId).join(',')}`;
+      filterByPlanId.filter = `id:${lineItems
+        .map((item) => item.planId)
+        .join(',')}`;
     }
 
-    const {items: planItems} = await this.storefront.plans.getAll(filterByPlanId);
-    return planItems.map(({fields}) => new PlanModel(fields));
+    const { items: planItems } = await state.storefront.plans.getAll(
+      filterByPlanId
+    );
+    return planItems.map(({ fields }) => new PlanModel(fields));
   } catch (error) {
     throw error;
   }
-};
+}

package/src/storefront/plans.spec.js

@@ -2,27 +2,21 @@ import { MockStorefront } 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 { FetchPlans } from './plans';
+import { fetchPlans } from './plans';
 import PlanModel from './models/plan-model';
+import { expectConfigurationError } from 'tests/async-utilities';
 
 describe('Storefront API Plan', () => {
   class TestPlansInstance {
-    constructor({
-      configs = {},
-      options = {}
-    } = {}) {
+    constructor({ configs = {}, options = {} } = {}) {
       this.configs = configs;
       this.options = options;
       this.storefront = MockStorefront();
     }
-
-    fetchPlans(...args) {
-      return FetchPlans.apply(this, args);
-    }
   }
-  
-  it ('can fetch plans', async () => {
-    const testPlan = {name: 'Test Plan', id: 'test-plan-id-1'};
+
+  it('can fetch plans', async () => {
+    const testPlan = { name: 'Test Plan', id: 'test-plan-id-1' };
 
     when(get(`${storefrontURL}/plans`)).thenReturn(ok([testPlan]));
 
@@ -30,7 +24,7 @@ describe('Storefront API Plan', () => {
 
     jest.spyOn(instance.storefront.plans, 'getAll');
 
-    const response = await instance.fetchPlans({});
+    const response = await fetchPlans({ state: instance });
 
     expect(instance.storefront.plans.getAll).toBeCalledTimes(1);
     expect(instance.storefront.plans.getAll).toBeCalledWith({
@@ -41,18 +35,22 @@ describe('Storefront API Plan', () => {
     expect(response).toEqual([new PlanModel(testPlan)]);
   });
 
-  it ('can fetch plans with filter', async () => {
+  it('can fetch plans with filter', async () => {
     const instance = new TestPlansInstance();
 
     jest.spyOn(instance.storefront.plans, 'getAll');
 
-    await instance.fetchPlans({
+    await fetchPlans({
+      state: instance,
       data: {
-        lineItems: [{
-          planId: 'test-plan-id-1'
-        }, {
-          planId: 'test-plan-id-2'
-        }]
+        lineItems: [
+          {
+            planId: 'test-plan-id-1'
+          },
+          {
+            planId: 'test-plan-id-2'
+          }
+        ]
       }
     });
 
@@ -61,31 +59,25 @@ describe('Storefront API Plan', () => {
     });
   });
 
-  it ('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
     const noConfigOrOptionsInstance = new TestPlansInstance({
       configs: null,
-      options: null,
+      options: null
     });
+    await expectConfigurationError(
+      fetchPlans({ state: noConfigOrOptionsInstance })
+    );
+
     const noConfigInstance = new TestPlansInstance({
       configs: null,
-      options: {},
+      options: {}
     });
+    await expectConfigurationError(fetchPlans({ state: noConfigInstance }));
+
     const noOptionsInstance = new TestPlansInstance({
       configs: {},
-      options: null,
+      options: null
     });
-
-    expect(async () => {
-      await noConfigOrOptionsInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-
-    expect(async () => {
-      await noConfigInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-
-    expect(async () => {
-      await noOptionsInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await expectConfigurationError(fetchPlans({ state: noOptionsInstance }));
   });
 });

package/src/storefront/products.js

@@ -1,30 +1,34 @@
 import ProductModel from './models/product-model';
 
-export async function FetchProducts ({
-  data = null
-} = {}) {
-  if (!this.storefront) {
+export async function fetchProducts({ data = null, state }) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
-    throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  if (!state.configs || !state.options) {
+    throw new Error(
+      'Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data'
+    );
   }
 
   try {
     const plansData = data || [];
 
     const filterByProductId = {
-      filter: '',
-    }
+      filter: ''
+    };
 
     if (plansData.length) {
-      filterByProductId.filter = `id:${plansData.map(item => item.productId).join(',')}`;
+      filterByProductId.filter = `id:${plansData
+        .map((item) => item.productId)
+        .join(',')}`;
     }
 
-    const {items: productItems} = await this.storefront.products.getAll(filterByProductId);
-    return productItems.map(({fields}) => new ProductModel(fields));
+    const { items: productItems } = await state.storefront.products.getAll(
+      filterByProductId
+    );
+    return productItems.map(({ fields }) => new ProductModel(fields));
   } catch (error) {
     throw error;
   }
-};
+}