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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.23.0-beta.0",
+  "version": "3.23.0-beta.1",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,8 +17,6 @@
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.7",
     "@rebilly/risk-data-collector": "^2.3.0",
-    "@vue-reactivity/watch": "^0.2.0",
-    "@vue/reactivity": "^3.2.39",
     "jwt-decode": "^3.1.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",

package/src/functions/destroy.js

@@ -1,23 +1,21 @@
 import { cancellation } from 'rebilly-js-sdk';
 import { registeredListeners } from '../events/base-event';
 import { sleep } from '../utils';
-import state from '../state';
-import iframes from '../state/iframes';
 
-export async function destroy() {
+export async function destroy({ state }) {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await sleep(sleepMilliseconds);
-  
-  Object.keys(iframes).forEach(frame => {
-    if (iframes.hasFrame(frame)) {
-      iframes[frame].destroy();
-      iframes[frame] = null;
-    }
-  });
+
+  Object.values(state.iframeComponents)
+    .forEach(iframe => iframe?.destroy())
 
   registeredListeners.removeAll(document);
-  
+
+  state.iframeComponents = {
+    summary: null,
+    form: null,
+  };
   state.hasMounted = false;
 
   if (state.summary) {

package/src/functions/mount/fetch-data.js

@@ -1,7 +1,6 @@
 import { collectData } from '@rebilly/risk-data-collector';
-import state from '../../state';
 import { fetchProductsFromPlans } from '../../storefront/fetch-products-from-plans';
-import { fetchPlansFromAddonsBumpOffer } from '../../storefront/fetch-plans-from-addons-bumpOffer';
+import { fetchPlansFromAddonsBumpOffers } from '../../storefront/fetch-plans-from-addons-bumpOffers';
 import { fetchReadyToPay } from '../../storefront/ready-to-pay';
 import { fetchSummary } from '../../storefront/summary';
 import { fetchInvoiceAndProducts as FetchInvoiceAndProducts } from '../../storefront/invoices';
@@ -11,6 +10,7 @@ import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/pay
 
 export class DataInstance {
   constructor({
+    state = {},
     ...fields
   } = {}) {
     Object.entries({
@@ -23,14 +23,12 @@ export class DataInstance {
     this.money = state.options?.money || null;
     this.couponIds = [];
     this.addons = [];
-    this.acceptBumpOffer = false;
   }
 
   get amountAndCurrency() {
     let currency;
     let amount;
     let amountDue;
-
     if (this.previewPurchase) {
       currency = this.previewPurchase.currency;
       amount = this.previewPurchase.total;
@@ -120,6 +118,7 @@ export class DataInstance {
 }
 
 export async function fetchData({
+  state = null,
   riskMetadata = null,
 
   // Dependency injectable functions
@@ -127,9 +126,11 @@ export async function fetchData({
   fetchTransaction = FetchTransaction,
   fetchAccountAndWebsite = FetchAccountAndWebsite,
   fetchInstruments = FetchInstruments
-} = {}) {
+}) {
   try {
-    state.data = new DataInstance();
+    state.data = new DataInstance({
+      state
+    });
 
     let readyToPayPromise = Promise.resolve(null);
 
@@ -152,12 +153,12 @@ export async function fetchData({
     }
 
     let productsPromise;
-    const invoiceId = state.options?.invoiceId || state.data?.transaction?.invoiceId;
-    if (invoiceId) {
+    if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
       const { invoice, products } = await fetchInvoiceAndProducts({
         data: {
-          id: invoiceId
-        }
+          id: state.options?.invoiceId || state.data?.transaction?.invoiceId
+        },
+        state,
       });
       productsPromise = Promise.resolve(products);
       state.data.invoice = invoice;
@@ -169,17 +170,17 @@ export async function fetchData({
     }
 
     const previewPurchasePromise = state.options.items ?
-      fetchSummary() : null;
+      fetchSummary({ state }) : null;
 
     if (!state.options?.jwt) {
-      // There is no invoice, only pla ns through the static options,
+      // There is no invoice, only plans through the static options,
       // so we should fetch the products from the provided plan names.
       productsPromise = fetchProductsFromPlans({ state });
     }
 
     let plansPromise = new Promise((resolve) => resolve([]));
-    if (state.options?.addons || state.options?.bumpOffer) {
-      plansPromise = fetchPlansFromAddonsBumpOffer({ state });
+    if (state.options?.addons || state.options?.bumpOffers) {
+      plansPromise = fetchPlansFromAddonsBumpOffers({ state });
     }
 
     const [
@@ -197,6 +198,7 @@ export async function fetchData({
     ]);
 
     return new DataInstance({
+      state,
       readyToPay,
       previewPurchase,
       products,

package/src/functions/mount/fetch-data.spec.js

@@ -3,16 +3,17 @@ import { fetchData, DataInstance } from './fetch-data';
 import TransactionModel from '../../storefront/models/transaction-model';
 
 describe('fetchData function', () => {
-  it ('Should use correct invoice id for invoiceId', async () => {
+  it('Should use correct invoice id for invoiceId', async () => {
     const mockFetchInvoiceAndProducts = jest.fn();
     const invoiceId = 'test-invoice-id';
-    StorefontTestingInstance({
+    const state = new StorefontTestingInstance({
       options: {
         invoiceId
       }
-    });
+    })
 
     await fetchData({
+      state,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -26,10 +27,11 @@ describe('fetchData function', () => {
     );
   });
 
-  it ('Should use correct invoice id for transaction with invoiceIds', async () => {
+  it('Should use correct invoice id for transaction with invoiceIds', async () => {
     const mockFetchInvoiceAndProducts = jest.fn();
     const invoiceId = 'test-invoice-id';
-    StorefontTestingInstance({
+    const state = new StorefontTestingInstance({
+      options: {},
       data: {
         transaction: new TransactionModel({
           invoiceIds: [invoiceId]
@@ -38,6 +40,7 @@ describe('fetchData function', () => {
     });
 
     await fetchData({
+      state,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -51,18 +54,19 @@ describe('fetchData function', () => {
     );
   });
 
-  it ('Should not fetch invoice for transaction with no invoice Ids', async () => {
+  it('Should not fetch invoice for transaction with no invoice Ids', async () => {
     const mockFetchInvoiceAndProducts = jest.fn();
-    StorefontTestingInstance({
+    const invoiceState = {
       options: {},
       data: {
         transaction: new TransactionModel({
           invoiceIds: []
         }),
       }
-    });
+    }
 
     fetchData({
+      state: invoiceState,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -70,28 +74,29 @@ describe('fetchData function', () => {
  
   });
 
-  it ('Should fetch account when JWT is supplied', async () => {
+  it('Should fetch account when JWT is supplied', async () => {
     const mockFetchAccountAndWebsite = jest.fn();
-    StorefontTestingInstance({
+    const accountState = {
       options: {
         jwt: 'TEST_JWT'
       }
-    });
+    }
 
     await fetchData({
+      state: accountState,
       fetchAccountAndWebsite: mockFetchAccountAndWebsite,
     });
 
     expect(mockFetchAccountAndWebsite).toBeCalledTimes(1);
   });
 
-  it ('Should not fetch account when there JWT is not supplied', async () => {
+  it('Should not fetch account when there JWT is not supplied', async () => {
     const mockFetchAccountAndWebsite = jest.fn();
-    StorefontTestingInstance({
-      options: {}
-    });
 
     await fetchData({
+      state: {
+        options: {}
+      },
       fetchAccountAndWebsite: mockFetchAccountAndWebsite,
     });
 
@@ -100,169 +105,117 @@ describe('fetchData function', () => {
 });
 
 describe('DataInstance', () => {
-  describe('Determining amountAndCurrency', () => {
-    it ('should use money option', () => {
-      const expectedAmountAndCurrency = {
-        amount: 10,
-        currency: 'USD'
-      }
-      StorefontTestingInstance({
+  it ('Should correctly determine amountAndCurrency', () => {
+    const expectedAmountAndCurrency = {
+      amount: 10,
+      currency: 'USD'
+    }
+    let fetchedData =  new DataInstance({
+      state: {
         options: {
-          money: expectedAmountAndCurrency
+          money: {
+            ...expectedAmountAndCurrency
+          }
         }
-      });
-      const fetchedData = new DataInstance();
-
-      expect(fetchedData.amountAndCurrency).toEqual(expectedAmountAndCurrency);
+      }
     });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
 
-    it ('should use preview Purchase', () => {
-      const expectedAmountAndCurrency = {
-        amount: 10,
-        currency: 'USD'
+    fetchedData =  new DataInstance({
+      previewPurchase: {
+        total: expectedAmountAndCurrency.amount,
+        currency: expectedAmountAndCurrency.currency
       }
-      StorefontTestingInstance();
-
-      const fetchedData =  new DataInstance({
-        previewPurchase: {
-          total: expectedAmountAndCurrency.amount,
-          currency: expectedAmountAndCurrency.currency
-        }
-      });
-      expect(fetchedData.amountAndCurrency).toEqual(
-        expect.objectContaining(expectedAmountAndCurrency)
-      );
     });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
 
-    it ('should use invoice', () => {
-      const expectedAmountAndCurrency = {
-        amount: 10,
-        currency: 'USD'
+    fetchedData =  new DataInstance({
+      invoice: {
+        ...expectedAmountAndCurrency
       }
-      StorefontTestingInstance();
-
-      const fetchedData =  new DataInstance({
-        invoice: {
-          ...expectedAmountAndCurrency
-        }
-      });
-      expect(fetchedData.amountAndCurrency).toEqual(
-        expect.objectContaining(expectedAmountAndCurrency)
-      );
     });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
 
-    it ('should use transaction', () => {
-      const expectedAmountAndCurrency = {
-        amount: 10,
-        currency: 'USD'
+    fetchedData =  new DataInstance({
+      transaction: {
+        ...expectedAmountAndCurrency
       }
-      StorefontTestingInstance();
-
-      const fetchedData =  new DataInstance({
-        transaction: {
-          ...expectedAmountAndCurrency
-        }
-      });
-      expect(fetchedData.amountAndCurrency).toEqual(
-        expect.objectContaining(expectedAmountAndCurrency)
-      );
     });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
 
-    it ('should handle empty value', () => {
-      StorefontTestingInstance();
-
-      const fetchedData =  new DataInstance();
-      expect(fetchedData.amountAndCurrency).toEqual(
-        expect.objectContaining({
-          amount: undefined,
-          currency: undefined
-        })
-      );
-    })
+    fetchedData =  new DataInstance();
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining({
+        amount: undefined,
+        currency: undefined
+      })
+    );
   });
 
-  describe('isPayment', () => {
-    it ('money is truthy', () => {
-      StorefontTestingInstance({
+  it ('Should correctly determine isPayment', () => {
+    let fetchedData = new DataInstance({
+      state: {
         options: {
           money: true
         }
-      });
-      const fetchedData = new DataInstance();
-      expect(fetchedData.isPayment).toBeTruthy();
+      }
     });
+    expect(fetchedData.isPayment).toBeTruthy();
 
-    it ('invoice is truthy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        invoice: true
-      });
-      expect(fetchedData.isPayment).toBeTruthy();
+    fetchedData = new DataInstance({
+      invoice: true
     });
+    expect(fetchedData.isPayment).toBeTruthy();
 
-    it ('transaction is truthy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        transaction: true
-      });
-      expect(fetchedData.isPayment).toBeTruthy();
+    fetchedData = new DataInstance({
+      transaction: true
     });
+    expect(fetchedData.isPayment).toBeTruthy();
 
-    it ('previewPurchase is falsy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        previewPurchase: true
-      });
-      expect(fetchedData.isPayment).toBeFalsy();
+    fetchedData = new DataInstance({
+      previewPurchase: true
     });
+    expect(fetchedData.isPayment).toBeFalsy();
 
-    it ('empty is falsy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({});
-      expect(fetchedData.isPayment).toBeFalsy();
-    });
+    fetchedData = new DataInstance({});
+    expect(fetchedData.isPayment).toBeFalsy();
   });
 
-  describe('isPurchase', () => {
-    it ('previewPurchase is truthy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        previewPurchase: true
-      });
-      expect(fetchedData.isPurchase).toBeTruthy();
+  it ('Should correctly determine isPurchase', () => {
+    let fetchedData = new DataInstance({
+      previewPurchase: true
     });
-
-    it ('money is falsy', () => {
-      StorefontTestingInstance({
+    expect(fetchedData.isPurchase).toBeTruthy();
+    
+    fetchedData = new DataInstance({
+      state: {
         options: {
           money: true
         }
-      });
-      const fetchedData = new DataInstance();
-      expect(fetchedData.isPurchase).toBeFalsy();
+      }
     });
+    expect(fetchedData.isPurchase).toBeFalsy();
 
-    it ('invoice is falsy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        invoice: true
-      });
-      expect(fetchedData.isPurchase).toBeFalsy();
+    fetchedData = new DataInstance({
+      invoice: true
     });
+    expect(fetchedData.isPurchase).toBeFalsy();
 
-    it ('transaction is falsy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({
-        transaction: true
-      });
-      expect(fetchedData.isPurchase).toBeFalsy();
+    fetchedData = new DataInstance({
+      transaction: true
     });
+    expect(fetchedData.isPurchase).toBeFalsy();
 
-    it ('empty is falsy', () => {
-      StorefontTestingInstance();
-      const fetchedData = new DataInstance({});
-      expect(fetchedData.isPurchase).toBeFalsy();
-    });
+    fetchedData = new DataInstance({});
+    expect(fetchedData.isPurchase).toBeFalsy();
   });
 
   it ('Should get summaryItems', () => {

package/src/functions/mount/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-import state from '../../state';
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
 import { fetchData } from './fetch-data';
@@ -65,6 +64,7 @@ import { showError } from '../../views/errors';
 /**
  * Mount library with configurations.
  * @param {object} options - The options object
+ * @param {object} options.state - Global state
  * @param {function} options.setupFramepayInstance - Helper for adding FramePay scripts to the DOM
  * @param {string | HTMLElement} options.form - The CSS class or HTML element were the form will be mounted.
  * @param {string | HTMLElement} options.summary - The CSS class or HTML element were the summary will be mounted.
@@ -77,6 +77,7 @@ import { showError } from '../../views/errors';
  * @param {string} options.locale - default: auto. Language to render component text
  */
 export async function mount({
+  state,
   setupFramepay = setupFramepayInstance,
   ...options
 } = {}) {
@@ -98,22 +99,22 @@ export async function mount({
     state.options = setupOptions({ options });
     state.storefront = setupStorefront({ options });
     state.mainStyleVars = setupStylesVars({ options });
-    state.options.themeFramepay = setupFramepayTheme({ options });
+    state.options.themeFramepay = setupFramepayTheme({ state, options });
 
     // Setup loader
     state.loader.addDOMElement({ el: state.form });
     state.loader.addDOMElement({ section: 'summary', el: state.summary });
-    state.loader.startLoading({ section: 'summary', id: 'rebilly-instruments-summary' });
-    state.loader.startLoading({ id: 'rebilly-instruments-form' });
+    state.loader.startLoading({ state, section: 'summary', id: 'rebilly-instruments-summary' });
+    state.loader.startLoading({ state, id: 'rebilly-instruments-form' });
 
     const [data] = await Promise.all([
-      fetchData(),
-      setupFramepay()
+      fetchData({ state }),
+      setupFramepay(state)
     ]);
     state.data = data;
     Events.dataReady.dispatch(state.data);
 
-    state.i18n = setupI18n();
+    state.i18n = setupI18n({ state });
 
     // Update state options from data
     if ((!state.options.websiteId) && state.data.transaction?.websiteId) {
@@ -127,10 +128,10 @@ export async function mount({
 
     // Mount content
     if (state.form) {
-      mountMethodSelector();
+      mountMethodSelector({ state });
     }
     if (state.summary) {
-      mountSummary();
+      mountSummary({ state });
     }
     state.i18n({state});
     state.hasMounted = true;

package/src/functions/mount/mount.spec.js

@@ -1,5 +1,4 @@
 import {RenderMockRebillyInstruments} from 'tests/mocks/rebilly-instruments-mock';
-import { sleep } from '@/utils';
 
 describe('RebillyInstruments instance', () => {
   it('should inject HTML to the merchant\'s website', async () => {
@@ -29,13 +28,16 @@ describe('RebillyInstruments instance', () => {
       },
     };
     await RenderMockRebillyInstruments(options);
-    
-    const sleepMilliseconds = 1000;
-    await sleep(sleepMilliseconds);
+
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 100);
+    })
 
     // Mounts form and summary
     const summarySelector = document.querySelector('.summary-selector');
-    expect(summarySelector.innerHTML).toContain('<iframe name="rebilly-instruments-summary" class="rebilly-instruments-iframe" loading="lazy" allow="payment" src="https://forms.test.rebilly.dev/summary"></iframe>');
+    expect(summarySelector.innerHTML).toContain('<iframe name="rebilly-instruments-summary" class="rebilly-instruments-iframe" loading="lazy" allow="payment" src="https://forms.local.rebilly.dev:3000/summary"></iframe>');
 
     // Theme config overrides initial styles
     const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];

package/src/functions/mount/setup-framepay-theme.js

@@ -1,5 +1,3 @@
-import state from '../../state';
-
 function processCSS(rawCss) {
   const cssMap = {};
  [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
@@ -46,6 +44,7 @@ const getStyleProps = (obj, particle = '') => {
 }
 
 export default ({
+  state,
   options = {}
 }) => {
   const fullCss = `

package/src/functions/mount/setup-framepay.js

@@ -1,6 +1,4 @@
-import state from '../../state';
-
-export default async function setupFramepay () {
+export default async function setupFramepay (state = {}) {
     const {_dev} = state.options || {};
     const urls = {
         script: _dev?.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js',

package/src/functions/mount/setup-i18n.js

@@ -1,11 +1,9 @@
-import state from '../../state';
-
-const triggerTranslations = () => {
+const triggerTranslations = ({state}) => {
   state.translate.init(state.options.locale, state.options.i18n);
   state.translate.translateItems();
 }
 
-export default () => {
+export default ({state = {}}) => {
   if (
     state.options.locale === 'auto' &&
     state.data.riskMetadata?.browserData?.language

package/src/functions/mount/setup-options.js

@@ -8,7 +8,7 @@ export const defaults = {
     labels: 'stacked'
   },
   addons: [],
-  bumpOffer: [],
+  bumpOffers: [],
   paymentInstruments: {
     address: {
       name: 'default',
@@ -82,6 +82,7 @@ export function validateOptions(options) {
 export default ({
   options = {}
 } = {}) => {
+
   const sanitizedOptions = sanitizeOptions(options)
 
   validateOptions(sanitizedOptions);
@@ -137,6 +138,7 @@ export default ({
   // Add optional key's
   [
     'items',
+    'bumpOffers',
     'money',
     'invoiceId',
     'transactionId',
@@ -148,15 +150,11 @@ export default ({
     }
   });
 
-  // only add "addons" or "bumpOffer" if items are available
+  // only add "addons" if items are available
   if (combinedOptions.items) {
     if (options.addons) {
       combinedOptions.addons = options.addons;
     }
-
-    if (options.bumpOffer) {
-      combinedOptions.bumpOffer = options.bumpOffer;
-    }
   }
 
   return combinedOptions;