@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

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;
+  }
+}

package/src/storefront/payment-instruments.js

@@ -0,0 +1,30 @@
+import { Endpoint } from './index';
+
+export async function setupPaymentInstrument({ data, state }) {
+  return Endpoint({state}, async () => {
+    // Create payment instrument
+    const { fields: instrument }  = await state.storefront.paymentInstruments.create({data});
+
+    // Setup the payment instrument
+    state.storefront.setSessionToken(instrument.token);
+
+    const setupPayload = {
+      id: instrument.id,
+      data: {
+        websiteId: state.options.websiteId,
+        ...data
+      }
+    }
+
+    if(state.data.getAmountAndCurrency) {
+      setupPayload.data = {
+        ...setupPayload.data,
+        ...state.data.getAmountAndCurrency
+      }
+    }
+
+    const { fields: transaction } = await state.storefront.paymentInstruments.setup(setupPayload);
+
+    return {instrument, transaction};
+  });
+}

package/src/storefront/payment-instruments.spec.js

@@ -0,0 +1,69 @@
+import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
+import { ok, post } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+
+describe('Storefront API Setup', () => {
+  it('can make purchase', async () => {
+    const instance = new StorefontTestingInstance();
+
+    const paymentInstrumentFields = {
+      id: 'payment-instrument-id'
+    };
+
+    const paymentInstrumentSetupFields = {
+      id: 'payment-instrument-id',
+      approvalUrl: null
+    };
+
+    const paymentInstrumentPayload = {
+      data: {
+        token: 'test-token'
+      }
+    };
+
+    const paymentInstrumentSetupPayload = {
+      id: paymentInstrumentFields.id,
+      data: {
+        websiteId: 'website-id',
+        currency: 'USD',
+        amount: 30
+      }
+    };
+
+    when(post(`${storefrontURL}/payment-instruments`)).thenReturn(ok(paymentInstrumentFields));
+    when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn(ok(paymentInstrumentSetupFields));
+
+
+    jest.spyOn(instance.storefront.paymentInstruments, 'create');
+    jest.spyOn(instance.storefront.paymentInstruments, 'setup');
+
+    const paymentInstrumentResponse = await instance.storefront.paymentInstruments.create(
+      paymentInstrumentPayload
+    );
+
+    const paymentInstrumentSetupResponse = await instance.storefront.paymentInstruments.setup(
+      paymentInstrumentSetupPayload
+    );
+
+    expect(instance.storefront.paymentInstruments.create).toBeCalledTimes(1);
+    expect(instance.storefront.paymentInstruments.create).toBeCalledWith(paymentInstrumentPayload);
+
+    expect(instance.storefront.paymentInstruments.setup).toBeCalledTimes(1);
+    expect(instance.storefront.paymentInstruments.setup).toBeCalledWith(paymentInstrumentSetupPayload);
+
+    expect(paymentInstrumentResponse.config).toBeInstanceOf(Object);
+    expect(paymentInstrumentResponse.fields).toBeInstanceOf(Object);
+    expect(paymentInstrumentResponse.response).toBeInstanceOf(Object);
+
+    expect(paymentInstrumentResponse.fields).toEqual(paymentInstrumentFields);
+    expect(paymentInstrumentResponse.fields).toMatchObject(paymentInstrumentFields);
+
+    expect(paymentInstrumentSetupResponse.config).toBeInstanceOf(Object);
+    expect(paymentInstrumentSetupResponse.fields).toBeInstanceOf(Object);
+    expect(paymentInstrumentSetupResponse.response).toBeInstanceOf(Object);
+
+    expect(paymentInstrumentSetupResponse.fields).toEqual(paymentInstrumentSetupFields);
+    expect(paymentInstrumentSetupResponse.fields).toMatchObject(paymentInstrumentSetupFields);
+  });
+});