@rebilly/instruments 4.5.0 → 4.6.0

package/src/views/common/iframe/base-iframe.js

@@ -1,65 +1,66 @@
 import Postmate from 'popostmate';
 
 export default class BaseIframe {
-  constructor({
-    name = '',
-    url = '',
-    model = {},
-    container = null,
-    classListArray = [],
-    route = null,
-  } = {}) {
-    classListArray = Array.isArray(classListArray) ? classListArray : [];
-    if (!classListArray.includes('rebilly-instruments-iframe')) {
-      classListArray.push('rebilly-instruments-iframe');
-    }
+    constructor({
+        name = '',
+        url = '',
+        model = {},
+        container = null,
+        classListArray = [],
+        route = null,
+    } = {}) {
+        classListArray = Array.isArray(classListArray) ? classListArray : [];
+        if (!classListArray.includes('rebilly-instruments-iframe')) {
+            classListArray.push('rebilly-instruments-iframe');
+        }
 
-    this.container = container;
-    this.classListArray = classListArray;
-    this.name = name;
-    this.url = url;
-    this.model = model;
-    this.component = null;
+        this.container = container;
+        this.classListArray = classListArray;
+        this.name = name;
+        this.url = url;
+        this.model = model;
+        this.component = null;
 
-    return (async () => {
-      this.component = await this.createComponent();
+        // eslint-disable-next-line no-constructor-return
+        return (async () => {
+            this.component = await this.createComponent();
 
-      if (route) {
-        this.component.call('route', route);
-      }
+            if (route) {
+                this.component.call('route', route);
+            }
 
-      return this;
-    })();
-  }
+            return this;
+        })();
+    }
 
-  async destroy() {
-    if (this.component.frame.parentNode) {
-      await this.component.destroy();
+    async destroy() {
+        if (this.component.frame.parentNode) {
+            await this.component.destroy();
+        }
     }
-  }
 
-  async createComponent() {
-    // Use a fake container so we can capture the appendChild call
-    // and immediately apply the feature-policy flags to the iframe
-    // before Postmate tries to load the iframe. The feature policy
-    // would otherwise not apply until the frame was reloaded.
-    const container = {
-      appendChild: (iframe) => {
-        iframe.setAttribute('loading', 'lazy');
-        iframe.setAttribute('allow', 'payment');
-        iframe.allowPaymentRequest = true;
-        this.container.appendChild(iframe);
-      },
-    };
+    async createComponent() {
+        // Use a fake container so we can capture the appendChild call
+        // and immediately apply the feature-policy flags to the iframe
+        // before Postmate tries to load the iframe. The feature policy
+        // would otherwise not apply until the frame was reloaded.
+        const container = {
+            appendChild: (iframe) => {
+                iframe.setAttribute('loading', 'lazy');
+                iframe.setAttribute('allow', 'payment');
+                iframe.allowPaymentRequest = true;
+                this.container.appendChild(iframe);
+            },
+        };
 
-    const component = await new Postmate({
-      name: this.name,
-      url: this.url,
-      container,
-      classListArray: this.classListArray,
-      model: this.model
-    });
+        const component = await new Postmate({
+            name: this.name,
+            url: this.url,
+            container,
+            classListArray: this.classListArray,
+            model: this.model,
+        });
 
-    return component;
-  }
+        return component;
+    }
 }

package/src/views/common/iframe/events/change-iframe-src-handler.js

@@ -1,6 +1,6 @@
 export function changeIframeSrcHandler(iframe) {
-  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
-    iframe.component.frame.src = url;
-    iframe.component.frame.style.height = '75vh';
-  });
-}
+    iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
+        iframe.component.frame.src = url;
+        iframe.component.frame.style.height = '75vh';
+    });
+}

package/src/views/common/iframe/events/dispatch-event-handler.js

@@ -2,7 +2,7 @@ import camelCase from 'lodash.camelcase';
 import Events from '../../../../events';
 
 export function dispatchEventHandler(iframe) {
-  iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
-    Events[camelCase(event).replace(/-/, '')].dispatch(detail);
-  });
-}
+    iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
+        Events[camelCase(event).replace(/-/, '')].dispatch(detail);
+    });
+}

package/src/views/common/iframe/events/resize-component-handler.js

@@ -1,9 +1,9 @@
 export function resizeComponentHandler(iframe) {
-  let prevHeight = '';
-  iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
-    if (height !== prevHeight) {
-      prevHeight = height;
-      iframe.component.frame.style.height = height;
-    }
-  });
-}
+    let prevHeight = '';
+    iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
+        if (height !== prevHeight) {
+            prevHeight = height;
+            iframe.component.frame.style.height = height;
+        }
+    });
+}

package/src/views/common/iframe/events/show-error-handler.js

@@ -1,5 +1,5 @@
 import { showError } from '../../../errors';
 
 export function showErrorHandler(iframe) {
-  iframe.component.on(`${iframe.name}-show-error`, showError);
-}
+    iframe.component.on(`${iframe.name}-show-error`, showError);
+}

package/src/views/common/iframe/events/stop-loader-handler.js

@@ -1,9 +1,9 @@
 export function stopLoaderHandler(iframe, data) {
-  iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
-    let {section} = data;
-    if (!section) {
-      section = id.includes('summary') ? 'summary' : 'form';
-    }
-    data.loader?.stopLoading({ section, id });
-  });
-}
+    iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
+        let { section } = data;
+        if (!section) {
+            section = id.includes('summary') ? 'summary' : 'form';
+        }
+        data.loader?.stopLoading({ section, id });
+    });
+}

package/src/views/common/iframe/events/update-addons-handler.js

@@ -1,16 +1,23 @@
 import state from '../../../../state';
 
 export function updateAddonsHandler(iframe) {
-  iframe.component.on(`${iframe.name}-update-addons`, async ({addons, previewPurchase}) => {
-    const addonPlanIds = addons.map(addon => addon.planId);
-    state.data.addons = addonPlanIds;
-    state.data.previewPurchase = previewPurchase;
-    
-    state.data.previewPurchase.addonLineItems = state.data.previewPurchase.lineItems
-      .filter(item => addonPlanIds.includes(item.planId));
-    state.data.previewPurchase.lineItems = state.data.previewPurchase.lineItems
-      .filter(item => !addonPlanIds.includes(item.planId));
-   
-    state.updateModel();
-  });
-}
+    iframe.component.on(
+        `${iframe.name}-update-addons`,
+        async ({ addons, previewPurchase }) => {
+            const addonPlanIds = addons.map((addon) => addon.planId);
+            state.data.addons = addonPlanIds;
+            state.data.previewPurchase = previewPurchase;
+
+            state.data.previewPurchase.addonLineItems =
+                state.data.previewPurchase.lineItems.filter((item) =>
+                    addonPlanIds.includes(item.planId),
+                );
+            state.data.previewPurchase.lineItems =
+                state.data.previewPurchase.lineItems.filter(
+                    (item) => !addonPlanIds.includes(item.planId),
+                );
+
+            state.updateModel();
+        },
+    );
+}

package/src/views/common/iframe/events/update-coupons-handler.js

@@ -1,12 +1,12 @@
 import state from '../../../../state';
 
 export function updateCouponsHandler(iframe) {
-  iframe.component.on(`${iframe.name}-update-coupon`, async ({
-    couponIds,
-    previewPurchase
-  } = {}) => {
-    state.data.couponIds = couponIds;
-    state.data.previewPurchase = previewPurchase;
-    state.updateModel();
-  });
-}
+    iframe.component.on(
+        `${iframe.name}-update-coupon`,
+        async ({ couponIds, previewPurchase } = {}) => {
+            state.data.couponIds = couponIds;
+            state.data.previewPurchase = previewPurchase;
+            state.updateModel();
+        },
+    );
+}

package/src/views/common/iframe/events/update-items-handler.js

@@ -1,30 +1,34 @@
 import state from '../../../../state';
 import { fetchSummary } from '../../../../storefront/summary';
-import { createQuantitiesMap, getQuantityValue, isObject } from '../../../../utils/quantity';
+import {
+    createQuantitiesMap,
+    getQuantityValue,
+    isObject,
+} from '../../../../utils/quantity';
 
 let loading = false;
 export async function itemsUpdatedHandler(iframe) {
-  iframe.component.on(`${iframe.name}-update-items`, async (lineItems) => {
-    try {
-      if (loading) return;
-      loading = true;
-      const mappedItems = createQuantitiesMap(lineItems);
+    iframe.component.on(`${iframe.name}-update-items`, async (lineItems) => {
+        try {
+            if (loading) return;
+            loading = true;
+            const mappedItems = createQuantitiesMap(lineItems);
 
-      state.data.summaryLineItems.forEach(item => {
-        const quantity = getQuantityValue(mappedItems.get(item.planId));
-        if(isObject(item.quantity)) {
-          item.quantity.default = quantity;
-        } else {
-          item.quantity = quantity;
-        }
-      })
+            state.data.summaryLineItems.forEach((item) => {
+                const quantity = getQuantityValue(mappedItems.get(item.planId));
+                if (isObject(item.quantity)) {
+                    item.quantity.default = quantity;
+                } else {
+                    item.quantity = quantity;
+                }
+            });
 
-      await fetchSummary();
-      state.updateModel();
-      loading = false;
-    } catch (err) {
-      console.error(err);
-      loading = false;
-    }
-  });
+            await fetchSummary();
+            state.updateModel();
+            loading = false;
+        } catch (err) {
+            console.error(err);
+            loading = false;
+        }
+    });
 }

package/src/views/common/iframe/modal-iframe.js

@@ -8,64 +8,75 @@ import { showErrorHandler } from './events/show-error-handler';
 import { stopLoaderHandler } from './events/stop-loader-handler';
 
 export class ModalIframe extends BaseIframe {
-  constructor(args = {}) {
-    super(args);
-  }
+    constructor(args = {}) {
+        super(args);
+    }
 
-  bindEventListeners({ close = () => {}, loader } = {}) {
-    dispatchEventHandler(this);
-    resizeComponentHandler(this);
-    changeIframeSrcHandler(this);
-    stopLoaderHandler(this, {
-      loader,
-      section: 'modal',
-      id: this.name
-    });
-    showErrorHandler(this);
+    bindEventListeners({ close = () => {}, loader } = {}) {
+        dispatchEventHandler(this);
+        resizeComponentHandler(this);
+        changeIframeSrcHandler(this);
+        stopLoaderHandler(this, {
+            loader,
+            section: 'modal',
+            id: this.name,
+        });
+        showErrorHandler(this);
 
-    // Close modal via postmate
-    this.component.on(`${this.name}-close`, (...args) => {
-      close(...args);
-    });
+        // Close modal via postmate
+        this.component.on(`${this.name}-close`, (...args) => {
+            close(...args);
+        });
 
-    // Close modal via postMessage (specifically during approval url flow)
-    window.addEventListener('message', async (event) => {
-      if(event.data === 'rebilly-instruments-approval-url-close') {
-        if (state.options.transactionType === 'purchase') {
-          state.storefront.setSessionToken(state.data.token || state.options.jwt);
+        // Close modal via postMessage (specifically during approval url flow)
+        window.addEventListener(
+            'message',
+            async (event) => {
+                if (event.data === 'rebilly-instruments-approval-url-close') {
+                    if (state.options.transactionType === 'purchase') {
+                        state.storefront.setSessionToken(
+                            state.data.token || state.options.jwt,
+                        );
 
-          const [
-            {fields: transaction},
-            {fields: invoice}
-          ] = await Promise.all([
-            state.storefront.transactions.get({id: state.data.transaction.id}),
-            state.data.invoice?.id
-              ? state.storefront.invoices.get({id: state.data.invoice.id})
-              : {fields: null}
-          ]);
-          
-          const updatedPurchase = {
-            orderId: state.data.orderId,
-            token: state.data.token,
-            transaction,
-          };
-          if (invoice) {
-            updatedPurchase.invoice = invoice;
-          }
-          close(updatedPurchase);
-        } else if (state.options.transactionType === 'setup') {
-          state.storefront.setSessionToken(state.data.instrument.token || state.options.jwt);
-          const {
-            fields: transaction
-          } = await state.storefront.transactions.get({id: state.data.transaction.id});
-          close({
-            transaction,
-            instrument: state.data.instrument
-          });
-        } else {
-          close();
-        }
-      }
-    }, false);
-  }
+                        const [{ fields: transaction }, { fields: invoice }] =
+                            await Promise.all([
+                                state.storefront.transactions.get({
+                                    id: state.data.transaction.id,
+                                }),
+                                state.data.invoice?.id
+                                    ? state.storefront.invoices.get({
+                                          id: state.data.invoice.id,
+                                      })
+                                    : { fields: null },
+                            ]);
+
+                        const updatedPurchase = {
+                            orderId: state.data.orderId,
+                            token: state.data.token,
+                            transaction,
+                        };
+                        if (invoice) {
+                            updatedPurchase.invoice = invoice;
+                        }
+                        close(updatedPurchase);
+                    } else if (state.options.transactionType === 'setup') {
+                        state.storefront.setSessionToken(
+                            state.data.instrument.token || state.options.jwt,
+                        );
+                        const { fields: transaction } =
+                            await state.storefront.transactions.get({
+                                id: state.data.transaction.id,
+                            });
+                        close({
+                            transaction,
+                            instrument: state.data.instrument,
+                        });
+                    } else {
+                        close();
+                    }
+                }
+            },
+            false,
+        );
+    }
 }

package/src/views/common/iframe/view-iframe.js

@@ -8,16 +8,16 @@ import { showErrorHandler } from './events/show-error-handler';
 import { stopLoaderHandler } from './events/stop-loader-handler';
 
 export class ViewIframe extends BaseIframe {
-  constructor(args = {}) {
-    super(args);
-  }
+    constructor(args = {}) {
+        super(args);
+    }
 
-  bindEventListeners({ loader } = {}) {
-    dispatchEventHandler(this);
-    resizeComponentHandler(this);
-    stopLoaderHandler(this, { loader });
-    showErrorHandler(this);
-    updateCouponsHandler(this);
-    updateAddonsHandler(this);
-  }
+    bindEventListeners({ loader } = {}) {
+        dispatchEventHandler(this);
+        resizeComponentHandler(this);
+        stopLoaderHandler(this, { loader });
+        showErrorHandler(this);
+        updateCouponsHandler(this);
+        updateAddonsHandler(this);
+    }
 }

package/src/views/common/render-utilities.js

@@ -1,4 +1,4 @@
 export function replaceContent(form, newContent) {
-  const contentElement = form.querySelector('.rebilly-instruments-content');
-  contentElement.innerHTML = newContent;
+    const contentElement = form.querySelector('.rebilly-instruments-content');
+    contentElement.innerHTML = newContent;
 }

package/src/views/confirmation.js

@@ -2,41 +2,44 @@ import state from '../state';
 import iframes from '../state/iframes';
 import { mountForm } from './form';
 import { updateSummary } from './summary';
-import { purchase} from '../functions/purchase';
+import { purchase } from '../functions/purchase';
 import { setup } from '../functions/setup';
 
 export async function mountConfirmation({ payload: instrument }) {
-  if (
-    (instrument.billingAddress && state.summary) &&
-    state.data.isPurchase
-  ) {
-    updateSummary({ instrument });
-  }
+    if (instrument.billingAddress && state.summary && state.data.isPurchase) {
+        updateSummary({ instrument });
+    }
 
-  const iframe = iframes.form;
-  if (!iframe) {
-    await mountForm();
-  }
- 
-  const modelSafeState = state.toModel();
-  const model = {
-    options: modelSafeState.options,
-    data: modelSafeState.data,
-    mainStyleVars: modelSafeState.mainStyleVars,
-    instrument
-  };
-  
-  iframe?.component?.call('update', model);
+    const iframe = iframes.form;
+    if (!iframe) {
+        await mountForm();
+    }
 
-  iframe?.component?.call('route', {
-    name: 'confirmation'
-  });
+    const modelSafeState = state.toModel();
+    const model = {
+        options: modelSafeState.options,
+        data: modelSafeState.data,
+        mainStyleVars: modelSafeState.mainStyleVars,
+        instrument,
+    };
 
-  iframe?.component?.on(`${iframe.name}-confirm-purchase`, (confirmedInstrument) => {
-    purchase({ payload: confirmedInstrument });
-  });
+    iframe?.component?.call('update', model);
 
-  iframe?.component?.on(`${iframe.name}-confirm-setup`, (confirmedInstrument) => {
-    setup({ payload: confirmedInstrument });
-  });
+    iframe?.component?.call('route', {
+        name: 'confirmation',
+    });
+
+    iframe?.component?.on(
+        `${iframe.name}-confirm-purchase`,
+        (confirmedInstrument) => {
+            purchase({ payload: confirmedInstrument });
+        },
+    );
+
+    iframe?.component?.on(
+        `${iframe.name}-confirm-setup`,
+        (confirmedInstrument) => {
+            setup({ payload: confirmedInstrument });
+        },
+    );
 }