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

package/src/views/result.js

@@ -1,7 +1,9 @@
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
+import state from '../state';
+import iframes from '../state/iframes';
 
-export async function mountResult({ payload, state }) {
+export async function mountResult({ payload }) {
   const resultContainerClassName = 'rebilly-instruments-result';
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
@@ -11,14 +13,14 @@ export async function mountResult({ payload, state }) {
   const container = document.querySelector(`.${resultContainerClassName}`);
   const { paymentMethodsUrl } = state.options._computed;
 
+  const modelSafeState = state.toModel();
   const model = {
-    options: state.options,
-    mainStyleVars: state.mainStyleVars,
+    options: modelSafeState.options,
+    mainStyleVars: modelSafeState.mainStyleVars,
     [state.options.transactionType]: payload
   };
 
   const iframe = await new ViewIframe({
-    state,
     name: 'rebilly-instruments-result',
     url: `${paymentMethodsUrl}/result`,
     container,
@@ -28,5 +30,5 @@ export async function mountResult({ payload, state }) {
     loader: state.loader
   });
 
-  state.iframeComponents.form = iframe;
+  iframes.form = iframe;
 }

package/src/views/summary.js

@@ -1,33 +1,29 @@
+import state from '../state';
+import iframes from '../state/iframes';
 import { ViewIframe } from './common/iframe';
 import { fetchSummary } from '../storefront/summary';
 
-export async function mountSummary({ state }) {
+export async function mountSummary() {
+  const modelSafeState = state.toModel();
   const model = {
-    options: state.options,
-    data: state.data.toPostmatesModel(),
-    mainStyleVars: state.mainStyleVars,
+    options: modelSafeState.options,
+    data: modelSafeState.data,
+    mainStyleVars: modelSafeState.mainStyleVars,
   };
-  const { paymentMethodsUrl } = state.options._computed;
+  const { paymentMethodsUrl } = state.options?._computed;
 
   const iframe = await new ViewIframe({
-    state,
     name: 'rebilly-instruments-summary',
     url: `${paymentMethodsUrl}/summary`,
     container: state.summary,
     model
   });
   iframe.bindEventListeners({loader: state.loader});
-  state.iframeComponents.summary = iframe;
+  iframes.summary = iframe;
 }
 
-export async function updateSummary({ state, instrument }) {
-  await fetchSummary({data: instrument, state});
-  const updateModel = {
-    data: state.data.toPostmatesModel(),
-    options: state.options
-  }
-
-  state.iframeComponents.summary.component.call('update', updateModel);
-  state.iframeComponents.form.component.call('update', updateModel);
+export async function updateSummary({ instrument } = {}) {
+  await fetchSummary({ data: instrument });
+  state.updateModel();
 }
 

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,4 +1,4 @@
-import RebillyInstrumentsInstance from '@rebilly/instruments';
+import RebillyInstruments from 'src/index';
 import { createFramepayMock } from 'tests/mocks/framepay-mock';
 import { get, ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
@@ -42,7 +42,6 @@ export async function RenderMockRebillyInstruments(options = {}) {
       }
     ]
   });
-  const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
 
   when(get(`${storefrontURL}/invoices/*`)).thenReturn(
     (() => ok(testInvoice))()
@@ -80,7 +79,8 @@ export async function RenderMockRebillyInstruments(options = {}) {
     summary: '.summary-selector',
     locale: 'auto',
     _dev: {
-      framePayStyleLink: framePayStyleUrl
+      paymentMethodsUrl: 'https://forms.test.rebilly.dev',
+      framePayStyleLink: 'https://dev.framepay.rebilly.com/rebilly.css'
     },
   };
 
@@ -105,26 +105,24 @@ export async function RenderMockRebillyInstruments(options = {}) {
   const framepayMock = createFramepayMock();
   global.Rebilly = framepayMock;
 
-  const rebillyInstruments = RebillyInstrumentsInstance;
+  const form = document.createElement('div');
+  form.classList.add(`${mergedOptions.form.replace('.', '')}`);
+  document.body.appendChild(form);
 
-  document.body.innerHTML = `
-    <div class="${mergedOptions.form.replace('.', '')}"></div>
-    <div class="${mergedOptions.summary.replace('.', '')}"></div>
-  `;
+  const summary = document.createElement('div');
+  summary.classList.add(`${mergedOptions.summary.replace('.', '')}`);
+  document.body.appendChild(summary);
 
-  await rebillyInstruments.mount({
-        setupFramepay: setupFramepayMock,
-        ...mergedOptions,
-    });
+  await RebillyInstruments.mount({
+    setupFramepay: setupFramepayMock,
+    ...mergedOptions,
+  });
 
-  rebillyInstruments.mock = {
+  RebillyInstruments.mock = {
     data: (data) => {
-      rebillyInstruments.state.data = new DataInstance({
-        state: rebillyInstruments.state,
-        ...data
-      });
+      RebillyInstruments.state.data = new DataInstance(data);
     }
   };
 
-  return rebillyInstruments;
-}
+  return RebillyInstruments;
+}

package/tests/mocks/storefront-mock.js

@@ -1,22 +1,23 @@
 import Storefront from '@/storefront';
 import { DataInstance } from '@/functions/mount/fetch-data';
+import state from '../../src/state';
 
 export function MockStorefront(config = {}) {
   return Storefront(config);
 }
 
 export function StorefontTestingInstance({
-  MockStorefrontConfig = {},
   options = {},
   data = {}
 } = {}) {
-  class TestInstance {
-    constructor() {
-      this.options = options;
-      this.storefront = MockStorefront(MockStorefrontConfig);
-      this.data = new DataInstance({state: {options}, ...data});
-    }
-  }
+  state.storefront = null;
+  state.storefront = MockStorefront();
+  
+  state.options = null;
+  state.options = options;
 
-  return new TestInstance();
+  state.data = null;
+  state.data = new DataInstance(data);
+
+  return state;
 }

package/tests/setup-jest.js

@@ -1,4 +1,5 @@
 import { initGlobalHandlers, server } from './msw/server';
+import state from '../src/state';
 
 jest.mock('@rebilly/risk-data-collector', () => {
   return {
@@ -18,6 +19,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   initGlobalHandlers();
+  state.reset();
 });
 
 afterEach(() => {