@rebilly/instruments 3.14.5-beta.0 → 3.15.2-beta.0

package/src/storefront/products.spec.js

@@ -14,10 +14,14 @@ describe('Storefront API Plan', () => {
 
     const instance = new StorefontTestingInstance({
       data: {
-        plans: [{
-          productId: 'test-product-id'
-        }
-      ]}
+        invoice: {
+          items: [
+            {
+              productId: 'test-product-id'
+            },
+          ],
+        },
+      },
     });
 
     jest.spyOn(instance.storefront.products, 'getAll');
@@ -36,15 +40,17 @@ describe('Storefront API Plan', () => {
   it('can fetch products with filter', async () => {
     const instance = new StorefontTestingInstance({
       data: {
-        plans: [
-          {
-            productId: 'test-product-1'
-          },
-          {
-            productId: 'test-product-2'
-          }
-        ]
-      }
+        invoice: {
+          items: [
+            {
+              productId: 'test-product-1'
+            },
+            {
+              productId: 'test-product-2'
+            },
+          ],
+        },
+      },
     });
 
     jest.spyOn(instance.storefront.products, 'getAll');

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

@@ -2,7 +2,7 @@ import { collectData } from '@rebilly/risk-data-collector';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { Endpoint } from './index';
 
-export async function fetchReadyToPay({ state, riskMetadata = null }) {
+export async function fetchReadyToPay({ state, riskMetadata = null, paymentMethodsMetadata = []}) {
   return Endpoint({state}, async () => {
     if (!riskMetadata) {
       const { riskMetadata: data } = await collectData();
@@ -37,15 +37,7 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       data.billingAddress = state.data.account.address;
     }
 
-    const [
-      { fields: readyToPayFields },
-      { items: paymentMethodsMetadataItems } 
-    ] = await Promise.all([
-      state.storefront.purchase.readyToPay({ data }),
-      state.storefront.rebilly.paymentMethods.getAll()
-    ]);
-
-    const paymentMethodsMetadata = paymentMethodsMetadataItems.map(({fields}) => fields);
+    const { fields: readyToPayFields } = await state.storefront.purchase.readyToPay({ data });
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method

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/storefront/plans.js

@@ -1,27 +0,0 @@
-import PlanModel from './models/plan-model';
-import { Endpoint } from './index';
-
-export async function fetchPlans({ state = {}, data = {} }) {
-  return Endpoint({state}, async () => {
-    const lineItems = data.lineItems || state.data.summaryLineItems;
-
-    const filterByPlanId = {
-      filter: ''
-    };
-
-    if (lineItems.length) {
-      filterByPlanId.filter = `id:${lineItems
-        .map((item) => item.planId)
-        .join(',')}`;
-    }
-
-    // Only fetch plans if we  hae specific plans to fetch
-    if (filterByPlanId.filter.length) {
-      const { items: planItems } = await state.storefront.plans.getAll(
-        filterByPlanId
-      );
-      return planItems.map(({ fields }) => new PlanModel(fields));
-    }
-    return [];
-  });
-}

package/src/storefront/plans.spec.js

@@ -1,68 +0,0 @@
-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 { fetchPlans } from './plans';
-import PlanModel from './models/plan-model';
-import { expectConfigurationError } from 'tests/async-utilities';
-
-describe('Storefront API Plan', () => {
-  it('can fetch plans', async () => {
-    const testPlan = { name: 'Test Plan', id: 'test-plan-id-1' };
-
-    when(get(`${storefrontURL}/plans`)).thenReturn(ok([testPlan]));
-
-    const instance = new StorefontTestingInstance();
-
-    jest.spyOn(instance.storefront.plans, 'getAll');
-
-    const response = await fetchPlans({ state: instance, data: {
-      lineItems: [
-        {
-          planId: 'test-plan-id'
-        }
-      ]
-    } });
-
-    expect(instance.storefront.plans.getAll).toBeCalledTimes(1);
-    expect(instance.storefront.plans.getAll).toBeCalledWith({
-      filter: 'id:test-plan-id'
-    });
-    expect(response).toBeInstanceOf(Array);
-    expect(response[0]).toBeInstanceOf(PlanModel);
-    expect(response).toEqual([new PlanModel(testPlan)]);
-  });
-
-  it('can fetch plans with filter', async () => {
-    const instance = new StorefontTestingInstance();
-
-    jest.spyOn(instance.storefront.plans, 'getAll');
-
-    await fetchPlans({
-      state: instance,
-      data: {
-        lineItems: [
-          {
-            planId: 'test-plan-id-1'
-          },
-          {
-            planId: 'test-plan-id-2'
-          }
-        ]
-      }
-    });
-
-    expect(instance.storefront.plans.getAll).toBeCalledWith({
-      filter: 'id:test-plan-id-1,test-plan-id-2'
-    });
-  });
-
-  it('should throw errors with no options', async () => {
-    const noConfigOrOptionsInstance = new StorefontTestingInstance({
-      options: null
-    });
-    await expectConfigurationError(
-      fetchPlans({ state: noConfigOrOptionsInstance })
-    );
-  });
-});

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);
-  }
-}