@rebilly/instruments 3.21.1-beta.0 → 3.23.0-beta.0

package/src/functions/on.spec.js

@@ -2,6 +2,7 @@ import camelCase from 'lodash.camelcase';
 import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import { RebillyInstrumentsInstance } from '../instance';
 import Events from '../events';
+import iframes from '../state/iframes';
 
 describe('RebillyInstruments on', () => {
   it('should register event listeners', async () => {
@@ -32,7 +33,7 @@ describe('RebillyInstruments on', () => {
         call: jest.fn()
       }
     };
-    instance.state.iframeComponents.form = iframeMock;
+    iframes.form = iframeMock;
 
     let error;
     try {
@@ -52,7 +53,7 @@ describe('RebillyInstruments on', () => {
         call: jest.fn()
       }
     };
-    instance.state.iframeComponents.form = iframeMock;
+    iframes.form = iframeMock;
 
     let error;
     try {

package/src/functions/purchase.js

@@ -1,10 +1,11 @@
+import state from '../state';
 import { postPurchase, postPayment } from '../storefront/purchase';
 import Events from '../events';
 import { mountModal } from '../views/modal';
 import { DataInstance } from './mount/fetch-data';
 import { showError } from '../views/errors';
 
-export async function makePayment({ state, payload }) {
+export async function makePayment({ payload }) {
   const {
     _raw: {
       id
@@ -60,16 +61,21 @@ export async function makePayment({ state, payload }) {
   return fields;
 }
 
-export async function makePurchase({ state, payload }) {
+export async function makePurchase({ payload }) {
   const data = {
     websiteId: state.options.websiteId,
-    items: state.options.items,
     paymentInstruction: {
       token: payload._raw.id
     },
     ...payload
   };
 
+  if (state.data.acceptBumpOffer) {
+    data.items = state.options.bumpOffer;
+  } else {
+    data.items = state.options.items;
+  }
+
   if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
     data.couponIds = state.data.couponIds
   }
@@ -82,6 +88,11 @@ export async function makePurchase({ state, payload }) {
     })
   }
 
+  data.items = data.items.map(item => {
+    delete item.thumbnail;
+    return item;
+  })
+
   const { fields } = await postPurchase({
     state,
     data
@@ -89,7 +100,7 @@ export async function makePurchase({ state, payload }) {
   return fields;
 }
 
-export function handleApprovalUrl({state, fields, payload}) {
+export function handleApprovalUrl({fields, payload}) {
   if (payload.redirectUrl || !fields.transaction?.approvalUrl) {
     const { paymentMethodsUrl } = state.options._computed;
 
@@ -116,7 +127,7 @@ export function handleApprovalUrl({state, fields, payload}) {
   }  
 }
 
-export async function purchase({ state, payload }) {
+export async function purchase({ payload }) {
   Object.keys(payload).forEach(key => {
     if (payload[key] === null) {
       delete payload[key];

package/src/functions/setup.js

@@ -1,10 +1,11 @@
+import state from '../state';
 import { setupPaymentInstrument } from '../storefront/payment-instruments';
 import Events from '../events';
 import { mountModal } from '../views/modal';
 import { DataInstance } from './mount/fetch-data';
 import { showError } from '../views/errors';
  
-export async function setup({ state, payload }) {
+export async function setup({ payload }) {
   try {
     const {
       _raw: {
@@ -26,19 +27,17 @@ export async function setup({ state, payload }) {
     }
 
     const {instrument, transaction} = await setupPaymentInstrument({
-      state,
       data: {
         websiteId: state.options?.websiteId,
         ...data
       }
     });
 
-    state.data = new DataInstance({state, instrument, transaction});
+    state.data = new DataInstance({instrument, transaction});
 
     if (transaction.approvalUrl && transaction.result === 'unknown') {
       const { paymentMethodsUrl } = state.options._computed;
       mountModal({
-        state,
         name: 'rebilly-instruments-approval-url',
         url: `${paymentMethodsUrl}/approval-url`,
         model: {

package/src/functions/show.js

@@ -1,3 +1,4 @@
+import iframes from '../state/iframes';
 import { mountConfirmation } from '../views/confirmation';
 import { mountResult } from '../views/result';
 
@@ -13,17 +14,17 @@ import { mountResult } from '../views/result';
  * Register events that will be triggered
  * @param {ShowParams} params
  */
-export async function show({ componentName, payload, state }) {
+export async function show({ componentName, payload }) {
   switch (componentName) {
     case 'result':
-      if (state.iframeComponents.form) {
-        state.iframeComponents.form.destroy();
-        state.iframeComponents.form = null;
+      if (iframes.hasFrame('form')) {
+        iframes.form.destroy();
+        iframes.form = null;
       }
-      mountResult({payload, state});
+      mountResult({ payload });
       break;
     case 'confirmation':
-      mountConfirmation({payload, state});
+      mountConfirmation({ payload });
       break;
     default:
       throw new Error(`'${componentName}' not a supported component`);

package/src/functions/show.spec.js

@@ -1,7 +1,7 @@
 import * as result from '@/views/result';
 import * as confirmation from '@/views/confirmation';
-import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import { RebillyInstrumentsInstance } from '../instance';
+import iframes from 'src/state/iframes';
 
 const iframeMock = { destroy: jest.fn() };
 
@@ -12,7 +12,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.form = iframeMock;
+    iframes.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -21,8 +21,10 @@ describe('RebillyInstruments show', () => {
     await instance.show('result', payload);
 
     expect(mountResult).toBeCalledTimes(1);
-    expect(mountResult).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents.form).toEqual(null);
+    expect(mountResult).toBeCalledWith(
+      expect.objectContaining({ payload })
+    );
+    expect(iframes.form).toEqual(null);
   });
 
   it('should show confirmation component', async () => {
@@ -31,7 +33,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.form = iframeMock;
+    iframes.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -40,8 +42,10 @@ describe('RebillyInstruments show', () => {
     await instance.show('confirmation', payload);
 
     expect(mountConfirmation).toBeCalledTimes(1);
-    expect(mountConfirmation).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents.form).toEqual(iframeMock);
+    expect(mountConfirmation).toBeCalledWith(
+      expect.objectContaining({payload})
+    );
+    expect(iframes.form).toEqual(iframeMock);
   });
 
   it('should fail for non supported component', async () => {

package/src/functions/update.js

@@ -1,4 +1,5 @@
 import merge from 'lodash.merge';
+import state from '../state';
 import { destroy } from './destroy';
 import { mount } from './mount';
 
@@ -21,7 +22,7 @@ function sanitizeOldPurchaseData({newOptions}) {
   return purchaseData;
 };
 
-export async function update({state, newOptions = {}}) {
+export async function update({newOptions = {}}) {
   if (!state.hasMounted) {
     throw Error('Update method cannot be called before mounting instruments');
   }
@@ -51,10 +52,9 @@ export async function update({state, newOptions = {}}) {
 
   const updatedOptions = merge({...oldOptions}, newOptions);
 
-  await destroy({ state });
+  await destroy();
 
   mount({
-    state,
     form: state.form,
     summary: state.summary,
     ...updatedOptions,

package/src/functions/update.spec.js

@@ -1,5 +1,6 @@
 import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import { avoidUnhandledPromises } from 'tests/async-utilities';
+import iframes from '../state/iframes';
 
 describe('RebillyInstruments Update', () => {
   it('should throw an error when methods are not mounted', async () => {
@@ -31,7 +32,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
+    iframes.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({ locale: 'ja' });
 
@@ -58,7 +59,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
+    iframes.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({
       countryCode: 'ES'
@@ -84,7 +85,7 @@ describe('RebillyInstruments Update', () => {
       }
     };
     
-    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
+    iframes.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({
       items: [

package/src/instance.js

@@ -1,61 +1,41 @@
+import state from './state';
+import iframes from './state/iframes';
 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 InstrumentsState {
-  constructor() {
-    this.options = null;
-    this.data = {};
-    this.mountingPoints = null;
-    this.storefront = null;
-    this.form = null;
-    this.summary = null;
-    this.loader = new Loader();
-    this.translate = new Translate();
-    this.iframeComponents = {
-      summary: null,
-      form: null,
-    };
-    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
+    this.state = state;
+    this.iframes = iframes;
   }
 
   async mount(options) {
-    await mount({ state: this.state, ...options });
+    await mount(options);
   }
 
   async destroy() {
-    await destroy({ state: this.state });
+    await destroy();
   }
 
   async update(newOptions) {
-    await update({state: this.state, newOptions});
+    await update({newOptions});
   }
 
   async purchase(payload) {
-    await purchase({ state: this.state, payload });
+    await purchase({ payload });
   }
 
   async setup(payload) {
-    await setup({ state: this.state, payload });
+    await setup({ payload });
   }
 
   async show(componentName, payload) {
-    await show({ state: this.state, componentName, payload });
+    await show({ componentName, payload });
   }
 
   get version() { 
@@ -63,6 +43,6 @@ export class RebillyInstrumentsInstance {
   }
 
   on(eventName, callback) {
-    on({ state: this.state, eventName, callback });
+    on({ eventName, callback });
   }
 }

package/src/state/iframes.js

@@ -0,0 +1,23 @@
+export default (() => {
+  let state = null;
+  return {
+    getInstance() {
+      if (state === null) {
+        state = {
+          form: null,
+          summary: null,
+          hasFrame(name) {
+            if (state[name] && !name.match(/^has.*/)) {
+              return !!state[name];
+            }
+            return false;
+          },
+          hasComponent(name) {
+            return !!state[name]?.component;
+          }
+        }
+      }
+      return state;
+    }
+  }
+})().getInstance();

package/src/state/index.js

@@ -0,0 +1,61 @@
+import { reactive } from '@vue/reactivity';
+import { Loader } from '../loader';
+import { Translate } from '../i18n';
+import iframes from './iframes';
+
+export default (() => {
+  let state = null;
+  const defaultState = {
+    options: null,
+    data: {},
+    mountingPoints: null,
+    storefront: null,
+    form: null,
+    summary: null,
+    loader: new Loader(),
+    translate: new Translate,
+    hasMounted: false,
+    toModel() {
+      const model = {
+        ...state,
+        data: state.data.toPostmatesMode ? state.data.toPostmatesModel() : {},
+      };
+      
+      // remove functions from model
+      delete model.toModel;
+      delete model.updateModel;
+
+      return JSON.parse(JSON.stringify(model));
+    },
+    updateModel() {
+      const modelSafeState = state?.toModel();
+      if (modelSafeState) {
+        const updateModel = {
+          data: modelSafeState.data,
+          options: modelSafeState.options
+        }
+    
+        if (iframes.hasComponent('summary')) {
+          iframes.summary.component.call('update', updateModel);
+        }
+        if (iframes.hasComponent('summary')) {
+          iframes.form.component.call('update', updateModel);
+        }
+      }
+    },
+    reset() {
+      if (state !== null) {
+        state = reactive({...defaultState});
+      }
+    }
+  };
+
+  return {
+    getInstance() {
+      if (state === null) {
+        state = reactive({...defaultState});
+      }
+      return state;
+    }
+  }
+})().getInstance();

package/src/storefront/account-and-website.js

@@ -1,9 +1,10 @@
 import AccountModel from './models/account-model';
 import WebsiteModel from './models/website-model';
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function fetchAccountAndWebsite({ state = null }) {
-  return Endpoint({state}, async () => {
+export async function fetchAccountAndWebsite() {
+  return Endpoint(async () => {
     state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.account.get({expand: 'website'});
 

package/src/storefront/{fetch-plans-from-addons-bumpOffers.js → fetch-plans-from-addons-bumpOffer.js}

@@ -1,8 +1,9 @@
 import PlanModel from './models/plan-model';
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function fetchPlansFromAddonsBumpOffers({ state = {} }) {
-  return Endpoint({state}, async () => {
+export async function fetchPlansFromAddonsBumpOffer() {
+  return Endpoint(async () => {
     let ids = [];
 
     if (state.options?.addons) {
@@ -10,8 +11,8 @@ export async function fetchPlansFromAddonsBumpOffers({ state = {} }) {
         .map((item) => item.planId));
     }
 
-    if (state.options?.bumpOffers) {
-      ids = ids.concat(state.options.bumpOffers
+    if (state.options?.bumpOffer) {
+      ids = ids.concat(state.options.bumpOffer
         .map((item) => item.planId));
     }
 

package/src/storefront/fetch-products-from-plans.js

@@ -1,8 +1,9 @@
 import ProductModel from './models/product-model';
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function fetchProductsFromPlans({ state = {} }) {
-  return Endpoint({state}, async () => {
+export async function fetchProductsFromPlans() {
+  return Endpoint(async () => {
     let lineItems = state.data.summaryLineItems;
     if(lineItems.length === 0)
     {
@@ -23,8 +24,8 @@ export async function fetchProductsFromPlans({ state = {} }) {
           .map((item) => item.planId));
       }
 
-      if (state.options?.bumpOffers) {
-        ids = ids.concat(state.options.bumpOffers
+      if (state.options?.bumpOffer) {
+        ids = ids.concat(state.options.bumpOffer
           .map((item) => item.planId));
       }
 

package/src/storefront/index.js

@@ -1,9 +1,10 @@
 import RebillyApi, {RebillyStorefrontAPI, RebillyExperimentalAPI} from 'rebilly-js-sdk';
 import { showError } from '../views/errors';
+import state from '../state';
 
 const TIMEOUT = 60000;
 
-export function validateStateForStorefront({state}) {
+export function validateStateForStorefront() {
   if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
@@ -15,9 +16,7 @@ export function validateStateForStorefront({state}) {
   }
 }
 
-export async function Endpoint({
-  state
-} = {}, callback) {
+export async function Endpoint(callback) {
   try {
     validateStateForStorefront({state});
     return await callback();

package/src/storefront/invoices.js

@@ -1,17 +1,19 @@
 import InvoiceModel from './models/invoice-model';
 import ProductModel from './models/product-model';
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function fetchInvoiceAndProducts({ data = null, state = null }) {
-  return Endpoint({state}, async () => {
+export async function fetchInvoiceAndProducts({ data = null }) {
+  return Endpoint(async () => {
     state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.invoices.get({
       ...data,
       expand: 'items.*.product'
     });
 
-    const products = fields.items.filter(item => item._embedded)
-                                 .map(items => new ProductModel(items._embedded.product));
+    const products = fields.items
+      .filter(item => item._embedded)
+      .map(items => new ProductModel(items._embedded.product));
 
     return {
       products,

package/src/storefront/payment-instruments.js

@@ -1,7 +1,8 @@
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function setupPaymentInstrument({ data, state }) {
-  return Endpoint({state}, async () => {
+export async function setupPaymentInstrument({ data }) {
+  return Endpoint(async () => {
     // Create payment instrument
     const { fields: instrument }  = await state.storefront.paymentInstruments.create({data});
 
@@ -33,8 +34,8 @@ export async function setupPaymentInstrument({ data, state }) {
   });
 }
 
-export async function fetchPaymentInstrument({ state }) {
-  return Endpoint({state}, async () => {
+export async function fetchPaymentInstrument() {
+  return Endpoint(async () => {
     const { items: instruments }  = await state.storefront.paymentInstruments.getAll();
     return instruments.map(({fields}) => fields);
   });

package/src/storefront/purchase.js

@@ -1,7 +1,8 @@
+import state from '../state';
 import { Endpoint } from './index';
 
-export async function postPurchase({ data, state }) {
-  return Endpoint({state}, async () => {
+export async function postPurchase({ data }) {
+  return Endpoint(async () => {
     if (data._raw) {
       delete data._raw;
     }
@@ -9,8 +10,8 @@ export async function postPurchase({ data, state }) {
   });
 }
 
-export async function postPayment({ data, state }) {
-  return Endpoint({state}, async () => {
+export async function postPayment({ data }) {
+  return Endpoint(async () => {
     if (data._raw) {
       delete data._raw;
     }

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

@@ -2,12 +2,12 @@ import { collectData } from '@rebilly/risk-data-collector';
 import paymentMethodsFile from '../data/payment-methods.json';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { Endpoint } from './index';
+import state from '../state';
 
 export async function fetchReadyToPay({
-  state,
   riskMetadata = null,
 }) {
-  return Endpoint({state}, async () => {
+  return Endpoint(async () => {
     if (!riskMetadata) {
       const { riskMetadata: data } = await collectData();
       riskMetadata = data;
@@ -16,22 +16,14 @@ export async function fetchReadyToPay({
     const data = {
       riskMetadata
     };
-    
-    let websiteId = state.options?.websiteId || null;
-    if (!websiteId) {
-      if (state.data.transaction?.websiteId) {
-        websiteId = state.data.transaction.websiteId
-      } else if (state.data.invoice?.websiteId) {
-        websiteId = state.data.invoice.websiteId;
-      }
-    }
-    data.websiteId = websiteId;
+
+    data.websiteId = state.options?.websiteId || null;
   
     if (state.options?.items) {
       data.items = state.options.items;
     }
 
-    if (state.data?.amountAndCurrency) {
+    if (state.options?.money && state.data?.amountAndCurrency) {
       const money = state.data.amountAndCurrency;
       data.amount = money.amount;
       data.currency = money.currency;

package/src/storefront/summary.js

@@ -1,8 +1,9 @@
+import state from '../state';
 import SummaryModel from './models/summary-model';
 import { Endpoint } from './index';
 
-export async function fetchSummary({ data = null, state = null } = {}) {
-  return Endpoint({state}, async () => {
+export async function fetchSummary({ data = null } = {}) {
+  return Endpoint(async () => {
     const websiteId = state.options?.websiteId || null;
 
     const payload = {
@@ -12,7 +13,11 @@ export async function fetchSummary({ data = null, state = null } = {}) {
     };
 
     if (state.options?.items) {
-      payload.data.items = state.options.items;
+      if (state.data.acceptBumpOffer) {
+        payload.data.items = state.options.bumpOffer;
+      } else {
+        payload.data.items = state.options.items;
+      }
     } else {
       payload.data.items = state.data.summaryLineItems.map(item => ({
         planId: item.planId,

package/src/storefront/transactions.js

@@ -1,8 +1,9 @@
 import TransactionModel from './models/transaction-model';
 import { Endpoint } from './index';
+import state from '../state';
 
-export async function fetchTransaction({ data = null, state = null }) {
-  return Endpoint({state}, async () => {
+export async function fetchTransaction({ data = null }) {
+  return Endpoint(async () => {
     state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.transactions.get(data);