@rebilly/instruments 3.14.4-beta.0 → 3.15.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.14.4-beta.0",
+  "version": "3.15.1-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/functions/destroy.js

@@ -6,22 +6,21 @@ export async function destroy({ state }) {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await sleep(sleepMilliseconds);
-  [
-    ...(state.iframeComponents?.form || []),
-    ...(state.iframeComponents?.summary || [])
-  ].forEach((iframe) => {
-    iframe.destroy();
-  });
+
+  Object.values(state.iframeComponents)
+    .forEach(iframe => iframe?.destroy())
 
   registeredListeners.removeAll(document);
 
   state.iframeComponents = {
-    summary: [],
-    form: [],
+    summary: null,
+    form: null,
   };
   state.hasMounted = false;
 
-  state.summary.textContent = '';
+  if (state.summary) {
+    state.summary.textContent = '';
+  }
   state.form.textContent = '';
   cancellation.cancelAll();
   state.loader.clearAll();

package/src/functions/mount/index.js

@@ -105,7 +105,7 @@ export async function mount({
     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-methods' });
+    state.loader.startLoading({ state, id: 'rebilly-instruments-form' });
 
     state.data = await fetchData({ state });
     Events.dataReady.dispatch(state.data);

package/src/functions/on.spec.js

@@ -1,5 +1,6 @@
 import camelCase from 'lodash.camelcase';
 import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { RebillyInstrumentsInstance } from '../instance';
 import Events from '../events';
 
 describe('RebillyInstruments on', () => {
@@ -25,12 +26,18 @@ describe('RebillyInstruments on', () => {
 
   it('should throw error for internal namespaced events', async () => {
     const callback = jest.fn();
-    const rebillyInstruments = await RenderMockRebillyInstruments();
+    const instance = new RebillyInstrumentsInstance();
+    const iframeMock = {
+      component: {
+        call: jest.fn()
+      }
+    };
+    instance.state.iframeComponents.form = iframeMock;
 
     let error;
     try {
       // rebilly-instruments-purchase-completed will be used internally but not available externally
-      await rebillyInstruments.on('rebilly-instruments-purchase-completed', callback);
+      await instance.on('rebilly-instruments-purchase-completed', callback);
     } catch (e) {
       error = e;
     }
@@ -39,11 +46,17 @@ describe('RebillyInstruments on', () => {
 
   it('should throw error for a non defined event', async () => {
     const callback = jest.fn();
-    const rebillyInstruments = await RenderMockRebillyInstruments();
+    const instance = new RebillyInstrumentsInstance();
+    const iframeMock = {
+      component: {
+        call: jest.fn()
+      }
+    };
+    instance.state.iframeComponents.form = iframeMock;
 
     let error;
     try {
-      await rebillyInstruments.on('not-an-event', callback);
+      await instance.on('not-an-event', callback);
     } catch (e) {
       error = e;
     }

package/src/functions/show.js

@@ -16,17 +16,13 @@ import { mountResult } from '../views/result';
 export async function show({ componentName, payload, state }) {
   switch (componentName) {
     case 'result':
-      state.iframeComponents.form = state.iframeComponents.form.filter((iframe) => {
-        iframe.destroy();
-        return false;
-      });
+      if (state.iframeComponents.form) {
+        state.iframeComponents.form.destroy();
+        state.iframeComponents.form = null;
+      }
       mountResult({payload, state});
       break;
     case 'confirmation':
-      state.iframeComponents.form = state.iframeComponents.form.filter((iframe) => {
-        iframe.destroy();
-        return false;
-      });
       mountConfirmation({payload, state});
       break;
     default:

package/src/functions/show.spec.js

@@ -12,7 +12,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.form.push(iframeMock);
+    instance.state.iframeComponents.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -22,7 +22,7 @@ describe('RebillyInstruments show', () => {
 
     expect(mountResult).toBeCalledTimes(1);
     expect(mountResult).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents.form).toEqual([]);
+    expect(instance.state.iframeComponents.form).toEqual(null);
   });
 
   it('should show confirmation component', async () => {
@@ -31,7 +31,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.form.push(iframeMock);
+    instance.state.iframeComponents.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -41,7 +41,7 @@ describe('RebillyInstruments show', () => {
 
     expect(mountConfirmation).toBeCalledTimes(1);
     expect(mountConfirmation).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents.form).toEqual([]);
+    expect(instance.state.iframeComponents.form).toEqual(iframeMock);
   });
 
   it('should fail for non supported component', async () => {

package/src/functions/update.spec.js

@@ -31,7 +31,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({ locale: 'ja' });
 
@@ -58,7 +58,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({
       countryCode: 'ES'
@@ -84,7 +84,7 @@ describe('RebillyInstruments Update', () => {
       }
     };
     
-    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents.form = fakeIFrameComponent;
 
     await rebillyInstruments.update({
       items: [

package/src/instance.js

@@ -19,8 +19,8 @@ export class InstrumentsState {
     this.loader = new Loader();
     this.translate = new Translate();
     this.iframeComponents = {
-      summary: [],
-      form: [],
+      summary: null,
+      form: null,
     };
     this.hasMounted = false;
   }

package/src/loader/index.js

@@ -92,8 +92,10 @@ export class Loader {
     }
 
     if (
-      !this[section].length &&
-      this.DOM[section].querySelector('.rebilly-instruments-loader')
+      this.DOM[section] && (
+        !this[section].length &&
+        this.DOM[section].querySelector('.rebilly-instruments-loader')
+      )
     ) {
       this.DOM[section]
         .querySelector('.rebilly-instruments-loader')
@@ -106,9 +108,11 @@ export class Loader {
     this.form.forEach((id) => {
       this.stopLoading({ id });
     });
-    this.summary.forEach((id) => {
-      this.stopLoading({ section: 'summary', id });
-    });
+    if (this.summary) {
+      this.summary.forEach((id) => {
+        this.stopLoading({ section: 'summary', id });
+      });
+    }
     this.modal.forEach((id) => {
       this.stopLoading({ section: 'modal', id });
     });

package/src/storefront/account.spec.js

@@ -0,0 +1,39 @@
+import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
+import { ok, get } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+import { fetchAccount } from './account';
+import { AddressModel } from './models/account-model';
+
+describe('Storefront API Account', () => {
+  it('should handle fetch a customer with a null primary address', async () => {
+    const options = {
+      jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjBkNTRkOS0xNmM4LTRlZDAtYjljMy01ODAyZmQ4YzE2ZTIiLCJleHAiOjE2ODY2OTc0MTQuODQxMjUsImlhdCI6MTY1NTE2MTQxNC44Nzk4OTEsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsiMzY0NEFGTEFKMUciXSwicGF5bWVudE1ldGhvZHMiOlsicGF5bWVudC1jYXJkIl19LCJwZXJtaXNzaW9ucyI6WzI4NCwyODYsNDE0LDQxNSw0MzQsNDExLDQxMiw0MTMsNDI0LDQyNSw0MjYsNDI3LDQyOCw0MjksNDA5LDQxMCw0MDEsNDAyLDQzMyw0ODgsNDg3XX1dLCJjbGFpbXMiOnsid2Vic2l0ZUlkIjoiZGVtby13ZWJzaXRlIiwidHJhbnNhY3Rpb25JZCI6IjRiZDE3N2NmLTFlY2EtNDA2Yy04OWI0LTEzYzMzODk5NzlmMCIsInBheW1lbnRNZXRob2RzIjpbInBheW1lbnQtY2FyZCJdfSwibWVyY2hhbnQiOiIzNjQ0QUZMQUoxRyIsImN1c3RvbWVyIjp7ImlkIjoidGVzdC1jdXN0b21lci1pZCIsIm5hbWUiOiJUZXN0IEN1c3RvbWVyIE5hbWUiLCJjcmVhdGVkVGltZSI6IjIwMjItMDctMTRUMDA6MDA6MDArMDA6MDAifX0.VPue9QBhRGe3vvncaD47w84N8Bv2hEeShUl6SlNqoOQ',
+      websiteId: 'test-website-id',
+      items: [
+        {
+          planId: 'test-plan-id',
+          quantity: 1
+        }
+      ]
+    };
+
+    when(get(`${storefrontURL}/acount`)).thenReturn(
+      ok({
+        defaultPaymentInstrument: null,
+        id: "test-customer-id",
+        primaryAddress: null,
+        websiteId: "test-website-id",
+      })
+    );
+
+    const instance = StorefontTestingInstance({
+      options
+    });
+
+    jest.spyOn(instance.storefront.account, 'get');
+
+    const response = await fetchAccount({ state: instance });
+    expect(response.address).toEqual(new AddressModel({}));
+  })
+});

package/src/storefront/models/account-model.js

@@ -30,10 +30,10 @@ export class AddressModel {
 
 export default class AccountModel extends BaseModel {
   constructor({
-    primaryAddress = null,
+    primaryAddress = {},
     ...fields
   } = {}) {
     super(fields);
-    this.address = new AddressModel(primaryAddress);
+    this.address = new AddressModel({...primaryAddress});
   }
 }

package/src/views/common/iframe/index.js

@@ -1,7 +1,5 @@
-import { MethodIframe as method } from './method-iframe';
 import { ViewIframe as view } from './view-iframe';
 import { ModalIframe as modal } from './modal-iframe';
 
-export const MethodIframe = method;
 export const ViewIframe = view;
 export const ModalIframe = modal;

package/src/views/confirmation.js

@@ -1,7 +1,3 @@
-import { purchase } from '../functions/purchase';
-import { setup } from '../functions/setup';
-import { ViewIframe } from './common/iframe';
-import { updateMethodSelector } from './method-selector';
 import { updateSummary } from './summary';
 
 export const baseConfirmationHTML =
@@ -15,58 +11,23 @@ export async function mountConfirmation({ payload: instrument, state }) {
     updateSummary({ state, instrument });
   }
 
-  const contentElement = state.form.querySelector('.rebilly-instruments-content');
-  contentElement.insertAdjacentHTML('afterend', baseConfirmationHTML);
-
-  const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
-  methodSelectorElement.style.visibility = 'hidden';
-  methodSelectorElement.style.height = '0px';
-
-  state.loader.startLoading({ id: 'rebilly-instruments-confirmation' });
-
-  const container = document.querySelector('.rebilly-instruments-confirmation');
-
-  const { paymentMethodsUrl } = state.options._computed;
-
+  const iframe = state.iframeComponents.form;
   const model = {
     options: state.options,
     data: state.data.toPostmatesModel(),
     mainStyleVars: state.mainStyleVars,
     instrument
   };
-  const name = 'rebilly-instruments-confirmation';
-  const iframe = await new ViewIframe({
-    name,
-    url: `${paymentMethodsUrl}/confirmation`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
 
-  iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
-    purchase({ state, payload: confirmedInstrument });
+  iframe?.component?.call('route', {
+    name: 'confirmation'
   });
 
-  iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
-    setup({ state, payload: confirmedInstrument });
-  });
+  iframe?.component?.call('update', model);
 
-  iframe.component.on('choose-another-method', () => {
-    state.iframeComponents.form = state.iframeComponents.form.filter((item) => {
-      if (item.name === iframe.name) {
-        item.destroy();
-        return false;
-      }
-      return true;
+  document.querySelectorAll('[data-rebilly-instruments="express-method"]')
+    .forEach(el => {
+      el.style.overflow = 'hidden';
+      el.style.height = '0px';
     });
-    if (state.data.isPurchase) {
-      updateSummary({ state });
-    }
-    updateMethodSelector({ state, mainStyleVars: state.mainStyleVars });
-    state.form.querySelector('.rebilly-instruments-confirmation').remove();
-  });
-
-  state.iframeComponents.form.push(iframe);
 }

package/src/views/method-selector/index.js

@@ -3,13 +3,16 @@ import { collectData } from '@rebilly/risk-data-collector';
 import { getPaymentMethods } from './get-payment-methods';
 import { fetchData } from '../../functions/mount/fetch-data';
 import { ViewIframe } from '../common/iframe';
+import { purchase } from '../../functions/purchase';
+import { setup } from '../../functions/setup';
 import { mountExpressMethods } from './mount-express-methods';
 import { generateDigitalWallet } from './generate-digital-wallet';
+import { updateSummary } from '../summary';
 
 export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 <div class="rebilly-instruments-content">
   <div id="rebilly-instruments-error"></div>
-  <div class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
+  <div data-rebilly-instruments="express-method" class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
     <div class="rebilly-instruments-express-methods ${
       compactExpressInstruments ? 'is-compact' : ''
     }">
@@ -19,8 +22,8 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
     <div data-rebilly-instruments="divider" class="rebilly-instruments-divider">
       <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
     </div>
-    <div class="rebilly-instruments-methods"></div>
   </div>
+  <div class="rebilly-instruments-methods"></div>
 </div>
 `;
 
@@ -63,14 +66,41 @@ export async function mountMethodSelector({ state }) {
     };
     const { paymentMethodsUrl } = state.options._computed;
 
+    const name = 'rebilly-instruments-form';
     const iframe = await new ViewIframe({
-      name: 'rebilly-instruments-methods',
+      name,
       url: `${paymentMethodsUrl}`,
       container: METHODS_CONTAINER,
       model
     });
     iframe.bindEventListeners({loader: state.loader});
-    state.iframeComponents.form.push(iframe);
+
+    iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
+      purchase({ state, payload: confirmedInstrument });
+    });
+
+    iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
+      setup({ state, payload: confirmedInstrument });
+    });
+
+    iframe.component.on('choose-another-method', () => {
+      document.querySelectorAll('[data-rebilly-instruments="express-method"]')
+        .forEach(el => {
+          el.style.height = 'auto';
+        });
+
+      iframe.component.call('route', {
+        name: 'method-switch'
+      });
+      
+      if (state.data.isPurchase) {
+        updateSummary({ state });
+      }
+
+      iframe.component.call('update', model);
+    });
+
+    state.iframeComponents.form = iframe;
   } else {
     METHODS_CONTAINER.style.display = 'none';
     document.querySelectorAll('[data-rebilly-instruments="divider"]')

package/src/views/result.js

@@ -27,5 +27,5 @@ export async function mountResult({ payload, state }) {
     loader: state.loader
   });
 
-  state.iframeComponents.form.push(iframe);
+  state.iframeComponents.form = iframe;
 }

package/src/views/summary.js

@@ -16,7 +16,7 @@ export async function mountSummary({ state }) {
     model
   });
   iframe.bindEventListeners({loader: state.loader});
-  state.iframeComponents.summary.push(iframe);
+  state.iframeComponents.summary = iframe;
 }
 
 export async function updateSummary({ state, instrument }) {
@@ -25,10 +25,8 @@ export async function updateSummary({ state, instrument }) {
     data: state.data.toPostmatesModel(),
     options: state.options
   }
-  Object.values(state.iframeComponents).forEach(components => {
-    components.forEach(frame => {
-      frame.component.call('update', updateModel);
-    });
-  });
+
+  state.iframeComponents.summary.component.call('update', updateModel);
+  state.iframeComponents.form.component.call('update', updateModel);
 }
 

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

@@ -1,25 +0,0 @@
-import BaseIframe from './base-iframe';
-import {
-  dispatchRebillyInsturmentEventHandler,
-  resizeComponentHandler,
-  stopLoaderHandler,
-  displayOverlay,
-  showErrorHandler
-} from './event-listeners';
-
-export class MethodIframe extends BaseIframe {
-  constructor(args = {}) {
-    super(args);
-  }
-
-  bindEventListeners({ loader, id } = {}) {
-    dispatchRebillyInsturmentEventHandler(this);
-    resizeComponentHandler(this);
-    stopLoaderHandler(this, {
-      loader,
-      id
-    });
-    displayOverlay(this);
-    showErrorHandler(this);
-  }
-}