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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.21.1-beta.0",
+  "version": "3.23.0-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,6 +17,8 @@
     "@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,21 +1,23 @@
 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({ state }) {
+export async function destroy() {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await sleep(sleepMilliseconds);
-
-  Object.values(state.iframeComponents)
-    .forEach(iframe => iframe?.destroy())
+  
+  Object.keys(iframes).forEach(frame => {
+    if (iframes.hasFrame(frame)) {
+      iframes[frame].destroy();
+      iframes[frame] = null;
+    }
+  });
 
   registeredListeners.removeAll(document);
-
-  state.iframeComponents = {
-    summary: null,
-    form: null,
-  };
+  
   state.hasMounted = false;
 
   if (state.summary) {

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

@@ -1,6 +1,7 @@
 import { collectData } from '@rebilly/risk-data-collector';
+import state from '../../state';
 import { fetchProductsFromPlans } from '../../storefront/fetch-products-from-plans';
-import { fetchPlansFromAddonsBumpOffers } from '../../storefront/fetch-plans-from-addons-bumpOffers';
+import { fetchPlansFromAddonsBumpOffer } from '../../storefront/fetch-plans-from-addons-bumpOffer';
 import { fetchReadyToPay } from '../../storefront/ready-to-pay';
 import { fetchSummary } from '../../storefront/summary';
 import { fetchInvoiceAndProducts as FetchInvoiceAndProducts } from '../../storefront/invoices';
@@ -10,7 +11,6 @@ import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/pay
 
 export class DataInstance {
   constructor({
-    state = {},
     ...fields
   } = {}) {
     Object.entries({
@@ -23,12 +23,14 @@ 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;
@@ -118,7 +120,6 @@ export class DataInstance {
 }
 
 export async function fetchData({
-  state = null,
   riskMetadata = null,
 
   // Dependency injectable functions
@@ -126,20 +127,22 @@ export async function fetchData({
   fetchTransaction = FetchTransaction,
   fetchAccountAndWebsite = FetchAccountAndWebsite,
   fetchInstruments = FetchInstruments
-}) {
+} = {}) {
   try {
-    state.data = new DataInstance({
-      state
-    });
+    state.data = new DataInstance();
+
+    let readyToPayPromise = Promise.resolve(null);
 
-    let accountPromise = Promise.resolve(null);
     let availableInstrumentsPromise = null;
     if (state.options?.jwt) {
-      accountPromise = fetchAccountAndWebsite({state}).then(({account, website}) => {
+      fetchAccountAndWebsite({state}).then(({account, website}) => {
         state.data.account = account;
         state.data.website = website;
       });
+      readyToPayPromise = fetchReadyToPay({riskMetadata, state});
       availableInstrumentsPromise = fetchInstruments({state});
+    } else {
+      readyToPayPromise = fetchReadyToPay({riskMetadata, state});
     }
 
     if (state.options?.transactionId) {
@@ -149,12 +152,12 @@ export async function fetchData({
     }
 
     let productsPromise;
-    if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
+    const invoiceId = state.options?.invoiceId || state.data?.transaction?.invoiceId;
+    if (invoiceId) {
       const { invoice, products } = await fetchInvoiceAndProducts({
         data: {
-          id: state.options?.invoiceId || state.data?.transaction?.invoiceId
-        },
-        state,
+          id: invoiceId
+        }
       });
       productsPromise = Promise.resolve(products);
       state.data.invoice = invoice;
@@ -165,21 +168,18 @@ export async function fetchData({
       state.data.riskMetadata = riskMetadata;
     }
 
-    const readyToPayPromise = state.data?.readyToPay ??
-        accountPromise.then(() => fetchReadyToPay({riskMetadata, state}));
-
     const previewPurchasePromise = state.options.items ?
-      fetchSummary({ state }) : null;
+      fetchSummary() : null;
 
     if (!state.options?.jwt) {
-      // There is no invoice, only plans through the static options,
+      // There is no invoice, only pla ns 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?.bumpOffers) {
-      plansPromise = fetchPlansFromAddonsBumpOffers({ state });
+    if (state.options?.addons || state.options?.bumpOffer) {
+      plansPromise = fetchPlansFromAddonsBumpOffer({ state });
     }
 
     const [
@@ -197,7 +197,6 @@ export async function fetchData({
     ]);
 
     return new DataInstance({
-      state,
       readyToPay,
       previewPurchase,
       products,

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

@@ -3,17 +3,16 @@ 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';
-    const state = new StorefontTestingInstance({
+    StorefontTestingInstance({
       options: {
         invoiceId
       }
-    })
+    });
 
     await fetchData({
-      state,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -27,11 +26,10 @@ 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';
-    const state = new StorefontTestingInstance({
-      options: {},
+    StorefontTestingInstance({
       data: {
         transaction: new TransactionModel({
           invoiceIds: [invoiceId]
@@ -40,7 +38,6 @@ describe('fetchData function', () => {
     });
 
     await fetchData({
-      state,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -54,19 +51,18 @@ 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();
-    const invoiceState = {
+    StorefontTestingInstance({
       options: {},
       data: {
         transaction: new TransactionModel({
           invoiceIds: []
         }),
       }
-    }
+    });
 
     fetchData({
-      state: invoiceState,
       fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
@@ -74,29 +70,28 @@ 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();
-    const accountState = {
+    StorefontTestingInstance({
       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,
     });
 
@@ -105,117 +100,169 @@ describe('fetchData function', () => {
 });
 
 describe('DataInstance', () => {
-  it ('Should correctly determine amountAndCurrency', () => {
-    const expectedAmountAndCurrency = {
-      amount: 10,
-      currency: 'USD'
-    }
-    let fetchedData =  new DataInstance({
-      state: {
+  describe('Determining amountAndCurrency', () => {
+    it ('should use money option', () => {
+      const expectedAmountAndCurrency = {
+        amount: 10,
+        currency: 'USD'
+      }
+      StorefontTestingInstance({
         options: {
-          money: {
-            ...expectedAmountAndCurrency
-          }
+          money: expectedAmountAndCurrency
         }
-      }
+      });
+      const fetchedData = new DataInstance();
+
+      expect(fetchedData.amountAndCurrency).toEqual(expectedAmountAndCurrency);
     });
-    expect(fetchedData.amountAndCurrency).toEqual(
-      expect.objectContaining(expectedAmountAndCurrency)
-    );
 
-    fetchedData =  new DataInstance({
-      previewPurchase: {
-        total: expectedAmountAndCurrency.amount,
-        currency: expectedAmountAndCurrency.currency
+    it ('should use preview Purchase', () => {
+      const expectedAmountAndCurrency = {
+        amount: 10,
+        currency: 'USD'
       }
+      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)
-    );
 
-    fetchedData =  new DataInstance({
-      invoice: {
-        ...expectedAmountAndCurrency
+    it ('should use invoice', () => {
+      const expectedAmountAndCurrency = {
+        amount: 10,
+        currency: 'USD'
       }
+      StorefontTestingInstance();
+
+      const fetchedData =  new DataInstance({
+        invoice: {
+          ...expectedAmountAndCurrency
+        }
+      });
+      expect(fetchedData.amountAndCurrency).toEqual(
+        expect.objectContaining(expectedAmountAndCurrency)
+      );
     });
-    expect(fetchedData.amountAndCurrency).toEqual(
-      expect.objectContaining(expectedAmountAndCurrency)
-    );
 
-    fetchedData =  new DataInstance({
-      transaction: {
-        ...expectedAmountAndCurrency
+    it ('should use transaction', () => {
+      const expectedAmountAndCurrency = {
+        amount: 10,
+        currency: 'USD'
       }
+      StorefontTestingInstance();
+
+      const fetchedData =  new DataInstance({
+        transaction: {
+          ...expectedAmountAndCurrency
+        }
+      });
+      expect(fetchedData.amountAndCurrency).toEqual(
+        expect.objectContaining(expectedAmountAndCurrency)
+      );
     });
-    expect(fetchedData.amountAndCurrency).toEqual(
-      expect.objectContaining(expectedAmountAndCurrency)
-    );
 
-    fetchedData =  new DataInstance();
-    expect(fetchedData.amountAndCurrency).toEqual(
-      expect.objectContaining({
-        amount: undefined,
-        currency: undefined
-      })
-    );
+    it ('should handle empty value', () => {
+      StorefontTestingInstance();
+
+      const fetchedData =  new DataInstance();
+      expect(fetchedData.amountAndCurrency).toEqual(
+        expect.objectContaining({
+          amount: undefined,
+          currency: undefined
+        })
+      );
+    })
   });
 
-  it ('Should correctly determine isPayment', () => {
-    let fetchedData = new DataInstance({
-      state: {
+  describe('isPayment', () => {
+    it ('money is truthy', () => {
+      StorefontTestingInstance({
         options: {
           money: true
         }
-      }
+      });
+      const fetchedData = new DataInstance();
+      expect(fetchedData.isPayment).toBeTruthy();
     });
-    expect(fetchedData.isPayment).toBeTruthy();
 
-    fetchedData = new DataInstance({
-      invoice: true
+    it ('invoice is truthy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        invoice: true
+      });
+      expect(fetchedData.isPayment).toBeTruthy();
     });
-    expect(fetchedData.isPayment).toBeTruthy();
 
-    fetchedData = new DataInstance({
-      transaction: true
+    it ('transaction is truthy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        transaction: true
+      });
+      expect(fetchedData.isPayment).toBeTruthy();
     });
-    expect(fetchedData.isPayment).toBeTruthy();
 
-    fetchedData = new DataInstance({
-      previewPurchase: true
+    it ('previewPurchase is falsy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        previewPurchase: true
+      });
+      expect(fetchedData.isPayment).toBeFalsy();
     });
-    expect(fetchedData.isPayment).toBeFalsy();
 
-    fetchedData = new DataInstance({});
-    expect(fetchedData.isPayment).toBeFalsy();
+    it ('empty is falsy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({});
+      expect(fetchedData.isPayment).toBeFalsy();
+    });
   });
 
-  it ('Should correctly determine isPurchase', () => {
-    let fetchedData = new DataInstance({
-      previewPurchase: true
+  describe('isPurchase', () => {
+    it ('previewPurchase is truthy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        previewPurchase: true
+      });
+      expect(fetchedData.isPurchase).toBeTruthy();
     });
-    expect(fetchedData.isPurchase).toBeTruthy();
-    
-    fetchedData = new DataInstance({
-      state: {
+
+    it ('money is falsy', () => {
+      StorefontTestingInstance({
         options: {
           money: true
         }
-      }
+      });
+      const fetchedData = new DataInstance();
+      expect(fetchedData.isPurchase).toBeFalsy();
     });
-    expect(fetchedData.isPurchase).toBeFalsy();
 
-    fetchedData = new DataInstance({
-      invoice: true
+    it ('invoice is falsy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        invoice: true
+      });
+      expect(fetchedData.isPurchase).toBeFalsy();
     });
-    expect(fetchedData.isPurchase).toBeFalsy();
 
-    fetchedData = new DataInstance({
-      transaction: true
+    it ('transaction is falsy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({
+        transaction: true
+      });
+      expect(fetchedData.isPurchase).toBeFalsy();
     });
-    expect(fetchedData.isPurchase).toBeFalsy();
 
-    fetchedData = new DataInstance({});
-    expect(fetchedData.isPurchase).toBeFalsy();
+    it ('empty is falsy', () => {
+      StorefontTestingInstance();
+      const fetchedData = new DataInstance({});
+      expect(fetchedData.isPurchase).toBeFalsy();
+    });
   });
 
   it ('Should get summaryItems', () => {

package/src/functions/mount/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import state from '../../state';
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
 import { fetchData } from './fetch-data';
@@ -64,7 +65,6 @@ 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,7 +77,6 @@ import { showError } from '../../views/errors';
  * @param {string} options.locale - default: auto. Language to render component text
  */
 export async function mount({
-  state,
   setupFramepay = setupFramepayInstance,
   ...options
 } = {}) {
@@ -99,22 +98,22 @@ export async function mount({
     state.options = setupOptions({ options });
     state.storefront = setupStorefront({ options });
     state.mainStyleVars = setupStylesVars({ options });
-    state.options.themeFramepay = setupFramepayTheme({ state, options });
+    state.options.themeFramepay = setupFramepayTheme({ options });
 
     // Setup loader
     state.loader.addDOMElement({ el: state.form });
     state.loader.addDOMElement({ section: 'summary', el: state.summary });
-    state.loader.startLoading({ state, section: 'summary', id: 'rebilly-instruments-summary' });
-    state.loader.startLoading({ state, id: 'rebilly-instruments-form' });
+    state.loader.startLoading({ section: 'summary', id: 'rebilly-instruments-summary' });
+    state.loader.startLoading({ id: 'rebilly-instruments-form' });
 
     const [data] = await Promise.all([
-      fetchData({ state }),
-      setupFramepay(state)
+      fetchData(),
+      setupFramepay()
     ]);
     state.data = data;
     Events.dataReady.dispatch(state.data);
 
-    state.i18n = setupI18n({ state });
+    state.i18n = setupI18n();
 
     // Update state options from data
     if ((!state.options.websiteId) && state.data.transaction?.websiteId) {
@@ -128,10 +127,10 @@ export async function mount({
 
     // Mount content
     if (state.form) {
-      mountMethodSelector({ state });
+      mountMethodSelector();
     }
     if (state.summary) {
-      mountSummary({ state });
+      mountSummary();
     }
     state.i18n({state});
     state.hasMounted = true;

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

@@ -1,4 +1,5 @@
 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 () => {
@@ -28,16 +29,13 @@ describe('RebillyInstruments instance', () => {
       },
     };
     await RenderMockRebillyInstruments(options);
-
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve();
-      }, 100);
-    })
+    
+    const sleepMilliseconds = 1000;
+    await sleep(sleepMilliseconds);
 
     // 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.local.rebilly.dev:3000/summary"></iframe>');
+    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>');
 
     // Theme config overrides initial styles
     const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];

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

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

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

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

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

@@ -1,9 +1,11 @@
-const triggerTranslations = ({state}) => {
+import state from '../../state';
+
+const triggerTranslations = () => {
   state.translate.init(state.options.locale, state.options.i18n);
   state.translate.translateItems();
 }
 
-export default ({state = {}}) => {
+export default () => {
   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: [],
-  bumpOffers: [],
+  bumpOffer: [],
   paymentInstruments: {
     address: {
       name: 'default',
@@ -82,7 +82,6 @@ export function validateOptions(options) {
 export default ({
   options = {}
 } = {}) => {
-
   const sanitizedOptions = sanitizeOptions(options)
 
   validateOptions(sanitizedOptions);
@@ -138,7 +137,6 @@ export default ({
   // Add optional key's
   [
     'items',
-    'bumpOffers',
     'money',
     'invoiceId',
     'transactionId',
@@ -150,11 +148,15 @@ export default ({
     }
   });
 
-  // only add "addons" if items are available
+  // only add "addons" or "bumpOffer" if items are available
   if (combinedOptions.items) {
     if (options.addons) {
       combinedOptions.addons = options.addons;
     }
+
+    if (options.bumpOffer) {
+      combinedOptions.bumpOffer = options.bumpOffer;
+    }
   }
 
   return combinedOptions;