@rebilly/instruments 1.0.2-beta.9 → 3.0.0-beta.0

package/src/index.js

@@ -1,30 +1,17 @@
-import { Initialize } from './functions/initialize';
-import { Mount } from './functions/mount';
-import { Purchase } from './functions/purchase';
-import { Show } from './functions/show';
-import { On } from './functions/on';
-import { Update } from './functions/update';
-import { Destroy } from './functions/destroy';
-
-import { FetchReadyToPay } from './storefront/ready-to-pay';
-import { FetchSummary } from './storefront/summary';
-import { FetchPlans } from './storefront/plans';
-import { FetchProducts } from './storefront/products';
-import { PostPurchase } from './storefront/purchase';
-
-import { MountSummary, UpdateSummary } from './views/summary';
-import { MountMethodSelector, UpdateMethodSelector } from './views/method-selector';
-import { MountConfirmation } from './views/confirmation';
-import { MountResult } from './views/result';
-import { MountModal } from './views/modal';
-
+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 { Loader } from './loader';
 import { Translate } from './i18n';
+import { show } from './functions/show';
 
-export class RebillyInstrumentsInstance {
+export class InstrumentsState {
   constructor() {
-    this.configs = null;
     this.options = null;
+    this.data = {};
     this.mountingPoints = null;
     this.storefront = null;
     this.form = null;
@@ -33,41 +20,43 @@ export class RebillyInstrumentsInstance {
     this.translate = new Translate();
     this.iframeComponents = [];
     this.hasMounted = false;
+  }
+}
+
+export class RebillyInstrumentsInstance {
+  constructor() {
+    this.state = new InstrumentsState();
+    // TODO: mountConfirmation, mountResult have different contract shape when they look similar
+    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
+    // when commenting them
+  }
 
-    const functionsMap = {
-      // "Private" functions
-      _fetchReadyToPay: FetchReadyToPay,
-      _fetchSummary: FetchSummary,
-      _fetchPlans: FetchPlans,
-      _fetchProducts: FetchProducts,
-      _postPurchase: PostPurchase,
+  async mount(options) {
+    await mount({ state: this.state, ...options });
+  }
 
-      _mountSummary: MountSummary,
-      _mountMethodSelector: MountMethodSelector,
-      _mountConfirmation: MountConfirmation,
-      _mountResult: MountResult,
-      _mountModal: MountModal,
+  async destroy() {
+    await destroy({ state: this.state });
+  }
 
-      _updateSummary: UpdateSummary,
-      _updateSelector: UpdateMethodSelector,
+  async update(newOptions) {
+    await update({state: this.state, newOptions});
+  }
 
-      // Public Functions
-      initialize: Initialize,
-      mount: Mount,
-      destroy: Destroy,
-      update: Update, 
-      purchase: Purchase,
-      show: Show,
-      on: On,
-    };
+  async purchase(payload) {
+    await purchase({ state: this.state, payload });
+  }
+
+  async setup(payload) {
+    await setup({ state: this.state, payload });
+  }
+
+  async show(componentName, payload) {
+    await show({ state: this.state, componentName, payload });
+  }
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const local of Object.keys(functionsMap)) {
-      // eslint-disable-next-line func-names
-      this[local] = function(...args) {
-        return functionsMap[local].apply(this, args);
-      }
-    }
+  on(eventName, callback) {
+    on({ state: this.state, eventName, callback });
   }
 }
 

package/src/index.spec.js

@@ -1,14 +1,9 @@
-import RebillyInstruments, {RebillyInstrumentsInstance} from './index';
+import RebillyInstruments, { RebillyInstrumentsInstance } from './index';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
 
 describe('RebillyInstruments instance', () => {
   let rebillyInstruments;
 
-  function setupInstance(config = {
-    test: 'value'
-  }) {
-    rebillyInstruments.initialize(config);
-  }
-
   beforeEach(() => {
     rebillyInstruments = RebillyInstruments;
   });
@@ -17,48 +12,24 @@ 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>
     `;
 
     const options = {
       form: '.form-selector',
-      test: 'value'
+      summary: '.summary-selector',
+      items: []
     };
 
-    setupInstance();
-    rebillyInstruments.mount(options);
+    await rebillyInstruments.mount(options);
 
     expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
     expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
-  });
-
-  it('should be able to trigger a purchase', () => {
-    jest.spyOn(rebillyInstruments, 'purchase');
-
-    const instrument = {};
-
-    setupInstance();
-    rebillyInstruments.purchase(instrument);
-
-    expect(rebillyInstruments.purchase).toHaveBeenCalledTimes(1);
+    await avoidUnhandledPromises();
   });
 });
-

package/src/loader/index.js

@@ -1,66 +1,70 @@
 import isDOMElement from '../utils/is-dom-element';
 
 export class Loader {
-    constructor() {
-        this.summary = [];
-        this.form = [];
-        this.modal = [];
-        this.DOM = {
-            loading: `
+  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 } = {}) {
+    if (isDOMElement(el)) {
+      el.style.position = 'relative';
 
-            this.DOM[section] = el;
-        }
+      this.DOM[section] = el;
     }
+  }
 
-    startLoading({section = 'form', id = ''} = {}) {
-        this[section].push(id);
+  startLoading({ section = 'form', id = '' } = {}) {
+    const minHeight = '200px';
+    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('is-active'); 
-            }
-        }
+    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');
+      }
+      this.DOM[section].style.minHeight = minHeight; 
     }
+  }
 
-    stopLoading({section = 'form', id = ''} = {}) {
-        const idIndex = this[section].indexOf(id);
+  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('is-active');
-        }
+    if (idIndex !== -1) {
+      this[section].splice(idIndex, 1);
     }
 
-    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})
-        });
+    if (
+      !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 });
+    });
+    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,56 +11,63 @@ 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')
+      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')
+      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')
+      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')
+      loader.DOM.form
+        .querySelector('.rebilly-instruments-loader')
         .classList.contains('is-active')
     ).toEqual(true);
   });

package/src/storefront/index.js

@@ -1,7 +1,35 @@
-import {RebillyStorefrontAPI} from 'rebilly-js-sdk';
+import { RebillyStorefrontAPI } from 'rebilly-js-sdk';
+
+export function validateStateForStorefront({state}) {
+  if (!state.storefront) {
+    throw new Error('Could not access rebilly-js-sdk instance');
+  }
+
+  if (!state.options) {
+    throw new Error(
+      'Could not use Rebilly Instruments mount options to fetch Rebilly data'
+    );
+  }
+}
+
+export async function Endpoint({
+  state
+} = {}, callback) {
+  try {
+    validateStateForStorefront({state});
+    return await callback();
+  } catch(error) {
+    // TODO: standard error handling for all endpoints
+    // console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
+    throw error;
+  }
+}
 
 export class StorefrontInstance {
-  constructor ({
+  constructor({
     publishableKey = null,
     organizationId = null,
     mode = 'live',
@@ -17,15 +45,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/invoices.js

@@ -0,0 +1,11 @@
+import InvoiceModel from './models/invoice-model';
+import { Endpoint } from './index';
+
+export async function fetchInvoice({ data = null, state = null }) {
+  return Endpoint({state}, async () => {
+    state.storefront.setSessionToken(state.options.customerJwt);
+    const {fields} = await state.storefront.invoices.get(data);
+
+    return new InvoiceModel(fields);
+  });
+}

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

@@ -0,0 +1,10 @@
+export default class BaseModel {
+  constructor({
+    ...fields
+  } = {}) {
+    Object.entries(fields)
+      .forEach(([key, value]) => {
+        this[key] = value;
+      })
+  }
+}

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

@@ -0,0 +1,3 @@
+import BaseModel from './base-model';
+
+export default class InvoiceModel extends BaseModel {}

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

@@ -1,35 +1,3 @@
-export default class PlanModel {
-  constructor({
-    id = '',
-    name = '',
-    productId = '',
-    productOptions = {},
-    currency = '',
-    currencySign = '',
-    pricing = {},
-    recurringInterval = {},
-    trial = null,
-    isTrialOnly = false,
-    setup = null,
-    customFields = {},
-    createdTime = '',
-    updatedTime = '',
-    invoiceTimeShift = {},
-  } = {}) {
-    this.id = id;
-    this.name = name;
-    this.productId = productId;
-    this.productOptions = productOptions;
-    this.currency = currency;
-    this.currencySign = currencySign;
-    this.pricing = pricing;
-    this.recurringInterval = recurringInterval;
-    this.trial = trial;
-    this.isTrialOnly = isTrialOnly;
-    this.setup = setup;
-    this.customFields = customFields;
-    this.createdTime = createdTime;
-    this.updatedTime = updatedTime;
-    this.invoiceTimeShift = invoiceTimeShift;
-  }
-}
+import BaseModel from './base-model';
+
+export default class PlanModel extends BaseModel {}

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

@@ -1,23 +1,3 @@
-export default class ProductModel {
-  constructor({
-    id = '',
-    name = '',
-    unitLabel = '',
-    description = {},
-    requiresShipping = false,
-    options = [],
-    customFields = {},
-    createdTime = '',
-    updatedTime = '',
-  } = {}) {
-    this.id = id;
-    this.name = name;
-    this.unitLabel = unitLabel;
-    this.description = description;
-    this.requiresShipping = requiresShipping;
-    this.options = options;
-    this.customFields = customFields;
-    this.createdTime = createdTime;
-    this.updatedTime = updatedTime;
-  }
-}
+import BaseModel from './base-model';
+
+export default class ProductModel extends BaseModel {}

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

@@ -6,7 +6,7 @@ export class ReadyToPayFeatureModel {
     merchantOrigin = '',
     // Plaid fields
     linkToken = '',
-    expirationTime = '',
+    expirationTime = ''
   } = {}) {
     this.name = name;
     this.merchantName = merchantName;
@@ -22,7 +22,7 @@ export default class ReadyToPayModel {
     method = '',
     feature = null,
     brands = [],
-    filters = [],
+    filters = []
   } = {}) {
     this.index = index;
     this.method = method;
@@ -30,4 +30,4 @@ export default class ReadyToPayModel {
     this.brands = brands;
     this.filters = filters;
   }
-}
+}

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

@@ -1,42 +1,28 @@
-export class SummaryLineItemModel{
+import BaseModel from './base-model';
+
+export class SummaryLineItemModel extends BaseModel {
   constructor({
-    type = '',
-    description = '',
     unitPrice = 0.0,
     quantity = 0,
     price = 0.0,
-    planId = '',
-    productId = ''
+    ...fields
   } = {}) {
-    this.type = type;
-    this.description = description;
+    super(fields);
     this.unitPrice = unitPrice;
     this.quantity = quantity;
     this.price = price;
-    this.planId = planId;
-    this.productId = productId;
   }
 }
 
-export class SummaryTaxModel {
-  constructor({
-    amount = '',
-    description = ''
-  } = {}) {
-    this.amount = amount;
-    this.description = description;
-  }
-}
+export class SummaryTaxModel extends BaseModel {}
 
-export class SummaryDiscountModel {
+export class SummaryDiscountModel extends BaseModel {
   constructor({
-    couponId = '',
     amount = 0,
-    description = ''
-  } = {}) {
-    this.couponId = couponId;
+    ...fields
+  }) {
+    super(fields);
     this.amount = amount;
-    this.description = description;
   }
 }
 
@@ -53,13 +39,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 +56,4 @@ export default class SummaryModel {
     this.discountsAmount = discountsAmount;
     this.total = total;
   }
-}
+}

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

@@ -0,0 +1,19 @@
+import BaseModel from './base-model';
+
+export default class TransactionModel extends BaseModel {
+  constructor({
+    invoiceIds = [],
+    ...fields
+  }) {
+    super(fields);
+    this.invoiceIds = invoiceIds || [];
+  }
+
+  get invoiceId () {
+    return this.invoiceIds[0] || null;
+  }
+
+  get hasInvoice () {
+      return !!this.invoiceId;
+  }
+}