@rebilly/instruments 3.37.2 → 3.38.0

package/src/views/method-selector/__snapshots__/method-selector.spec.js.snap

@@ -105,77 +105,28 @@ exports[`Methods Selector Component should inject the proper HTML for express me
 
   <div
     class="rebilly-instruments-content"
+    data-rebilly-instruments="content"
   >
     
   
     <div
+      data-rebilly-instruments="content-error"
       id="rebilly-instruments-error"
     />
     
   
-  
     <div
-      class="rebilly-instruments-method-selector "
-      data-rebilly-instruments="express-method"
+      data-rebilly-instruments="form"
     >
-      
-    
-      <div
-        class="rebilly-instruments-express-methods "
-      >
-        
-      
-        <span
-          class="rebilly-instruments-express-methods-label"
-          data-rebilly-i18n="form.expressCheckout"
-        >
-          Express checkout
-        </span>
-        
-      
-        <div
-          class="rebilly-instruments-express-methods-container"
-        >
-          
-      
-          <div
-            class="rebilly-instruments-google-pay-method"
-          />
-          
-    
-        </div>
-        
-    
-      </div>
-      
-    
-      <div
-        class="rebilly-instruments-divider"
-        data-rebilly-instruments="divider"
-        style="display: none;"
-      >
-        
-      
-        <span
-          class="rebilly-instruments-divider-label"
-          data-rebilly-i18n="form.or"
-        >
-          Or
-        </span>
-        
-    
-      </div>
-      
-  
+      <iframe
+        allow="payment"
+        class="rebilly-instruments-iframe"
+        loading="lazy"
+        name="rebilly-instruments-form"
+        src="https://forms.test.rebilly.dev?name=rebilly-instruments-form"
+      />
     </div>
     
-  
-    <div
-      class="rebilly-instruments-methods"
-      data-rebilly-instruments="methods"
-      style="display: none;"
-    />
-    
 
   </div>
   

package/src/views/method-selector/generate-digital-wallet.js

@@ -1,7 +1,7 @@
 import state from '../../state';
 import { getMethodData } from './get-method-data';
 
-export function generateDigitalWallet({ EXPRESS_METHODS }) {
+export function generateDigitalWallet({ expressMethods = [] }) {
   const output = {};
 
   const { paymentInstruments } = state.options;
@@ -20,7 +20,7 @@ export function generateDigitalWallet({ EXPRESS_METHODS }) {
     transactionData.currency =  currency;
   }
 
-  EXPRESS_METHODS.forEach(method => {
+  expressMethods.forEach(method => {
     const { METHOD_TYPE } = getMethodData(method);
 
     if (method.feature?.name === 'Google Pay') {

package/src/views/method-selector/generate-digital-wallet.spec.js

@@ -38,11 +38,6 @@ describe('generateDigitalWallet', () => {
     });
   }
 
-  const summary = new SummaryModel({
-    currency: 'USD',
-    total: 1,
-  });
-
   it('should generate the correct digital wallet config for Google pay', () => {
     const expressMethods = [
       new ReadyToPayModel({
@@ -57,10 +52,7 @@ describe('generateDigitalWallet', () => {
     ];
     setupState();
 
-    const output = generateDigitalWallet({
-      EXPRESS_METHODS: expressMethods,
-      summary
-    });
+    const output = generateDigitalWallet({expressMethods});
 
     const expectedOutput ={
       googlePay: {
@@ -100,10 +92,7 @@ describe('generateDigitalWallet', () => {
     ];
     setupState();
 
-    const output = generateDigitalWallet({
-      EXPRESS_METHODS: expressMethods,
-      summary
-    });
+    const output = generateDigitalWallet({expressMethods});
 
     const expectedOutput = {
       applePay: {

package/src/views/method-selector/get-payment-methods.js

@@ -2,20 +2,20 @@ import state from '../../state';
 
 export function getPaymentMethods() {
   const result = {
-    EXPRESS_METHODS: [],
-    METHODS: []
+    expressMethods: [],
+    methods: []
   };
 
   state.data.readyToPay?.forEach((method) => {
     if (method.metadata.isExpressMethod) {
-      result.EXPRESS_METHODS.push(method);
+      result.expressMethods.push(method);
     } else {
-      result.METHODS.push(method);
+      result.methods.push(method);
     }
   });
 
   if (!window.ApplePaySession) {
-    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => method?.feature?.name !== 'Apple Pay');
+    result.expressMethods = result.expressMethods.filter(method => method?.feature?.name !== 'Apple Pay');
     state.loader.stopLoading({ id: 'applePay-express' });
   } 
 

package/src/views/method-selector/get-payment-methods.spec.js

@@ -32,7 +32,8 @@ it('should only return the allowed methods', async () => {
   state.data.readyToPay = await fetchReadyToPay({});
 
   const results = getPaymentMethods();
-  expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);
-  expect(results['EXPRESS_METHODS'].length).toEqual(1);
-  expect(results['METHODS'].length).toEqual(1);
+
+  expect(results.hasOwnProperty('expressMethods')).toEqual(true);
+  expect(results['expressMethods'].length).toEqual(1);
+  expect(results['methods'].length).toEqual(1);
 });

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

@@ -4,128 +4,193 @@ import state from '../../state';
 import iframes from '../../state/iframes';
 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 { mountForm } from '../form';
+
 import { mountExpressMethods } from './mount-express-methods';
 import { mountBumpOffer } from './mount-bump-offer';
 import { generateDigitalWallet } from './generate-digital-wallet';
 import { updateSummary } from '../summary';
+import { mountAmountSelector } from '../amount-selector';
 
-export const baseMethodSelectorHTML = ({compactExpressInstruments, bumpOffer}) => `
-<div class="rebilly-instruments-content">
-  <div id="rebilly-instruments-error"></div>
-  ${bumpOffer.length ? '<div data-rebilly-instruments="bump-offer" class="rebilly-instruments-bump-offers"></div>' : ''}
-  <div data-rebilly-instruments="express-method" class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
-    <div class="rebilly-instruments-express-methods ${
-      compactExpressInstruments ? 'is-compact' : ''
-    }">
-      <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
-      <div class="rebilly-instruments-express-methods-container"></div>
-    </div>
-    <div data-rebilly-instruments="divider" class="rebilly-instruments-divider">
-      <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
+function getElement(id, rootElement = state.form) {
+  return rootElement.querySelector(`[data-rebilly-instruments="${id}"]`);
+}
+
+const bumpOfferElement = () => {
+  const rootDiv = document.createElement('div');
+  rootDiv.classList.add('rebilly-instruments-bump-offers');
+  rootDiv.setAttribute('data-rebilly-instruments', 'bump-offer');
+  return rootDiv;
+}
+
+const backToAmountElement = () => {
+  const template = `
+  <div class="rebilly-instruments-confirmation-go-back-link" style="display: inline-block;margin-bottom: var(--rebilly-spacingM);margin-left: calc(var(--rebilly-spacingXs) * -1);">
+      <a
+        class="rebilly-instruments-link has-icon-left"
+        style="display: inline-flex;color: var(--rebilly-colorPrimary);cursor: pointer;"
+      >
+        <svg
+          class="rebilly-instruments-icon"
+          style="margin-right: var(--rebilly-spacingXs);fill: var(--rebilly-colorPrimary)"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.2929 11.2929l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L9.4142 11H17c.5523 0 1 .4477 1 1s-.4477 1-1 1H9.4142l3.293 3.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0l-5-5A.9969.9969 0 016 12c0-.2761.112-.5261.2929-.7071z"
+            fill-rule="nonzero"
+          />
+        </svg>
+        <span data-rebilly-i18n="deposit.goBack"></span>
+      </a>
     </div>
+  `;
+  const rootDiv = document.createElement('div');
+  rootDiv.setAttribute('data-rebilly-instruments', 'deposit-back');
+  rootDiv.innerHTML += template;
+
+  const link = rootDiv.querySelector('.rebilly-instruments-link');
+  link.addEventListener('click', () => {
+    hideExtraUI();
+    mountAmountSelector();
+  });
+
+  return rootDiv;
+}
+
+
+const expressMethodsElement = ({
+  expressMethods,
+}) => {
+  const rootDiv = document.createElement('div');
+  rootDiv.classList.add('rebilly-instruments-method-selector');
+  rootDiv.setAttribute('data-rebilly-instruments', 'express-methods');
+  rootDiv.innerHTML = `
+  <div class="rebilly-instruments-express-methods ">
+    <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
+    <div class="rebilly-instruments-express-methods-container" data-rebilly-instruments="express-methods-container"></div>
   </div>
-  <div data-rebilly-instruments="methods" class="rebilly-instruments-methods"></div>
-</div>
-`;
+  <div data-rebilly-instruments="divider" class="rebilly-instruments-divider">
+    <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
+  </div>
+  `;
+  const expressMethodsContainer = getElement('express-methods-container', rootDiv);
+  
+  const useCompactExpressInstruments = state.options.paymentInstruments.compactExpressInstruments && expressMethods.length;
+  if (useCompactExpressInstruments) {
+    rootDiv.classList.add('has-express-compact');
+    expressMethodsContainer.classList.add('is-compact')
+  }
 
-export async function mountMethodSelector() {
-  const { EXPRESS_METHODS, METHODS } = getPaymentMethods();
+  return rootDiv;
+}
 
-  const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
-  if (methodSelectorElement) {
-    methodSelectorElement.style.visibility = 'visible';
-    methodSelectorElement.style.height = 'auto';
-  } else {
-    state.form.innerHTML += baseMethodSelectorHTML({
-      compactExpressInstruments: state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length,
-      bumpOffer: state.options.bumpOffer
-    });
+export function hideExtraUI() {
+  const { expressMethods } = getPaymentMethods();
+
+  if (state.options?.deposit) {
+    const linkElement = getElement('deposit-back');
+    if (linkElement) {
+      linkElement.style.height = '0px';
+      linkElement.style.overflow = 'hidden';
+    }
+  }
+
+  if (expressMethods.length) {
+    const expressMethodsElement = getElement('express-methods');
+    if (expressMethodsElement) {
+      expressMethodsElement.style.height = '0px';
+      expressMethodsElement.style.overflow = 'hidden';
+    }
+  }
+
+  if (state.options?.bumpOffer?.length) {
+    const bumpOfferElement = getElement('bump-offer');
+    if (bumpOfferElement) {
+      bumpOfferElement.style.height = '0px';
+      bumpOfferElement.style.overflow = 'hidden';
+      bumpOfferElement.style.marginBottom = '0px';
+    }
   }
+}
 
-  const BUMPOFFER_CONTAINER = document.querySelector('[data-rebilly-instruments="bump-offer"]');
-  const METHODS_CONTAINER = document.querySelector('[data-rebilly-instruments="methods"]');
-  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods-container');
+export async function mountMethodSelector() {
+  const contentEl = getElement('content');
+  const formEl = getElement('form');
+
+  const { expressMethods, methods } = getPaymentMethods();
 
-  if(EXPRESS_METHODS.length) {
-    if (!methodSelectorElement) {
-      state.options.digitalWallet = generateDigitalWallet({ EXPRESS_METHODS });
+  if (state.options?.deposit) {
+    const existingDepositBackElement = getElement('deposit-back');
+    if (existingDepositBackElement) {
+      existingDepositBackElement.style.height = 'auto';
+    } else {
+      contentEl.insertBefore(backToAmountElement(), formEl);
+    }
+  }
+
+  if (expressMethods.length) {
+    const existingExpressMethodElement = getElement('express-methods');
+    if (existingExpressMethodElement) {
+      existingExpressMethodElement.style.height = 'auto';
+    } else {
+      contentEl.insertBefore(expressMethodsElement({expressMethods}), formEl);
+      state.options.digitalWallet = generateDigitalWallet({ expressMethods });
+      const container = document.querySelector('[data-rebilly-instruments="express-methods-container"]');
       mountExpressMethods({
-        methods: EXPRESS_METHODS,
-        container: EXPRESS_METHODS_CONTAINER,
+        methods: expressMethods,
+        container,
       });
     }
-  } else {
-    EXPRESS_METHODS_CONTAINER.style.display = 'none';
-    document.querySelectorAll('[data-rebilly-instruments="divider"]')
-      .forEach(el => { el.style.display = 'none' });
   }
 
-  if (METHODS.length) {
+  if (state.options?.bumpOffer?.length) {
+    const existingExpressMethodElement = getElement('bump-offer');
+    if (existingExpressMethodElement) {
+      existingExpressMethodElement.style.height = 'auto';
+      existingExpressMethodElement.style.marginBottom = 'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
+    } else {
+      contentEl.insertBefore(bumpOfferElement(), formEl);
+      const container = getElement('bump-offer');
+      mountBumpOffer({
+        container,
+      });
+    }
+  }
+
+  if (methods.length) {
+    const iframe = iframes.form;
+    if (!iframe) {
+      await mountForm();
+    }
+
     const modelSafeState = state.toModel();
     const model = {
       options: modelSafeState.options,
       data: modelSafeState.data,
       mainStyleVars: modelSafeState.mainStyleVars,
     };
-    const { paymentMethodsUrl } = state.options?._computed;
-
-    const name = 'rebilly-instruments-form';
-    const iframe = await new ViewIframe({
-      name,
-      url: `${paymentMethodsUrl}`,
-      container: METHODS_CONTAINER,
-      model
-    });
-    iframe.bindEventListeners({loader: state.loader});
 
-    iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
-      purchase({ payload: confirmedInstrument });
+    iframe?.component?.call('route', {
+      name: 'method-switch'
     });
 
-    iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
-      setup({ payload: confirmedInstrument });
-    });
+    iframe?.component?.call('update', model);
 
-    iframe.component.on('choose-another-method', () => {
-      document.querySelectorAll('[data-rebilly-instruments="express-method"]')
-        .forEach(el => {
-          el.style.height = 'auto';
-        });
-      document.querySelectorAll('[data-rebilly-instruments="bump-offer"]')
-        .forEach(el => {
-          el.style.height = 'auto';
-          el.style.marginBottom = 'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
-        });
-
-      iframe.component.call('route', {
-        name: 'method-switch'
-      });
-      
+    iframe?.component?.on('choose-another-method', () => {
       if (state.data.isPurchase) {
         updateSummary();
       }
-
-      iframe.component.call('update', model);
+      mountMethodSelector();
     });
 
-    iframes.form = iframe;
   } else {
     state.loader.stopLoading({id: 'rebilly-instruments-form'});
-    METHODS_CONTAINER.style.display = 'none';
-    document.querySelectorAll('[data-rebilly-instruments="divider"]')
-      .forEach(el => { el.style.display = 'none' });
+    state.form.querySelector('[data-rebilly-instruments="form"]').style.display = 'none';
+    document.querySelectorAll('[data-rebilly-instruments="divider"]').forEach(el => { el.style.display = 'none' });
   }
 
-  if (state.options.bumpOffer.length) {
-    mountBumpOffer({
-      container: BUMPOFFER_CONTAINER,
-    });
-  } else if (BUMPOFFER_CONTAINER?.style) {
-    BUMPOFFER_CONTAINER.style.display = 'none';
-  }
+  state.translate.translateItems();
 }
 
 export async function updateMethodSelector() {

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

@@ -11,7 +11,7 @@ describe('Methods Selector Component', () => {
     expect(form).toMatchSnapshot();
   });
 
-  it.only ('should allow updating method selector', async () => {
+  it ('should allow updating method selector', async () => {
     await RenderMockRebillyInstruments();
     await updateMethodSelector({
       mainStyleVars: 'any main style'

package/src/views/result.js

@@ -1,17 +1,13 @@
-import { ViewIframe } from './common/iframe';
-import { replaceContent } from './common/render-utilities';
 import state from '../state';
 import iframes from '../state/iframes';
+import { mountForm } from './form';
 
 export async function mountResult({ payload }) {
-  const resultContainerClassName = 'rebilly-instruments-result';
-  replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
+  const iframe = iframes.form;
 
-  state.loader.startLoading({ id: 'rebilly-instruments-result' });
-  state.loader.stopLoading({ id: 'express-purchase' });
-
-  const container = document.querySelector(`.${resultContainerClassName}`);
-  const { paymentMethodsUrl } = state.options._computed;
+  if(!iframe) {
+    await mountForm();
+  }
 
   const modelSafeState = state.toModel();
   const model = {
@@ -20,15 +16,9 @@ export async function mountResult({ payload }) {
     [state.options.transactionType]: payload
   };
 
-  const iframe = await new ViewIframe({
-    name: 'rebilly-instruments-result',
-    url: `${paymentMethodsUrl}/result`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader
+  iframe?.component?.call('route', {
+    name: 'result'
   });
 
-  iframes.form = iframe;
+  iframe?.component?.call('update', model);
 }

package/src/views/summary.js

@@ -13,15 +13,23 @@ export async function mountSummary() {
   };
   const { paymentMethodsUrl } = state.options?._computed;
 
+  const name = 'rebilly-instruments-summary'
   const iframe = await new ViewIframe({
-    name: 'rebilly-instruments-summary',
-    url: `${paymentMethodsUrl}/summary`,
+    name,
+    url: `${paymentMethodsUrl}?name=${name}`,
     container: state.summary,
-    model
+    model,
+    route: {
+      name: 'summary'
+    }
   });
   iframe.bindEventListeners({ loader: state.loader });
   iframes.summary = iframe;
   itemsUpdatedHandler(iframe);
+
+  return {
+    then: (callback) => callback()
+  }
 }
 
 export async function updateSummary({ instrument } = {}) {