@rebilly/instruments 3.36.0 → 3.36.1

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

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

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

@@ -4,193 +4,128 @@ import state from '../../state';
 import iframes from '../../state/iframes';
 import { getPaymentMethods } from './get-payment-methods';
 import { fetchData } from '../../functions/mount/fetch-data';
-import { mountForm } from '../form';
-
+import { ViewIframe } from '../common/iframe';
+import { purchase } from '../../functions/purchase';
+import { setup } from '../../functions/setup';
 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';
-
-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>
+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>
     </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="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')
-  }
-
-  return rootDiv;
-}
-
-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';
-    }
-  }
-}
+  <div data-rebilly-instruments="methods" class="rebilly-instruments-methods"></div>
+</div>
+`;
 
 export async function mountMethodSelector() {
-  const contentEl = getElement('content');
-  const formEl = getElement('form');
+  const { EXPRESS_METHODS, METHODS } = getPaymentMethods();
 
-  const { expressMethods, methods } = getPaymentMethods();
-
-  if (state.options?.deposit) {
-    const existingDepositBackElement = getElement('deposit-back');
-    if (existingDepositBackElement) {
-      existingDepositBackElement.style.height = 'auto';
-    } else {
-      contentEl.insertBefore(backToAmountElement(), formEl);
-    }
+  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
+    });
   }
 
-  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: expressMethods,
-        container,
-      });
-    }
-  }
+  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');
 
-  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(EXPRESS_METHODS.length) {
+    if (!methodSelectorElement) {
+      state.options.digitalWallet = generateDigitalWallet({ EXPRESS_METHODS });
+      mountExpressMethods({
+        methods: EXPRESS_METHODS,
+        container: EXPRESS_METHODS_CONTAINER,
       });
     }
+  } else {
+    EXPRESS_METHODS_CONTAINER.style.display = 'none';
+    document.querySelectorAll('[data-rebilly-instruments="divider"]')
+      .forEach(el => { el.style.display = 'none' });
   }
 
-  if (methods.length) {
-    const iframe = iframes.form;
-    if (!iframe) {
-      await mountForm();
-    }
-
+  if (METHODS.length) {
     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?.call('route', {
-      name: 'method-switch'
+    iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
+      purchase({ payload: confirmedInstrument });
     });
 
-    iframe?.component?.call('update', model);
+    iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
+      setup({ payload: confirmedInstrument });
+    });
 
-    iframe?.component?.on('choose-another-method', () => {
+    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'
+      });
+      
       if (state.data.isPurchase) {
         updateSummary();
       }
-      mountMethodSelector();
+
+      iframe.component.call('update', model);
     });
 
+    iframes.form = iframe;
   } else {
     state.loader.stopLoading({id: 'rebilly-instruments-form'});
-    state.form.querySelector('[data-rebilly-instruments="form"]').style.display = 'none';
-    document.querySelectorAll('[data-rebilly-instruments="divider"]').forEach(el => { el.style.display = 'none' });
+    METHODS_CONTAINER.style.display = 'none';
+    document.querySelectorAll('[data-rebilly-instruments="divider"]')
+      .forEach(el => { el.style.display = 'none' });
   }
 
-  state.translate.translateItems();
+  if (state.options.bumpOffer.length) {
+    mountBumpOffer({
+      container: BUMPOFFER_CONTAINER,
+    });
+  } else if (BUMPOFFER_CONTAINER?.style) {
+    BUMPOFFER_CONTAINER.style.display = 'none';
+  }
 }
 
 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 ('should allow updating method selector', async () => {
+  it.only ('should allow updating method selector', async () => {
     await RenderMockRebillyInstruments();
     await updateMethodSelector({
       mainStyleVars: 'any main style'

package/src/views/result.js

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

package/src/views/summary.js

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

package/src/storefront/deposit-requests.js

@@ -1,12 +0,0 @@
-import { Endpoint } from './index';
-import state from '../state';
-import DepositRequestModel from './models/deposit-request-model';
-
-export async function fetchDepositRequest({data = null}) {
-  return Endpoint(async () => {
-    state.storefront.setSessionToken(state.options.jwt);
-    const {fields} = await state.storefront.cashierRequests.get(data);
-
-    return new DepositRequestModel(fields);
-  });
-}

package/src/storefront/models/deposit-request-model.js

@@ -1,15 +0,0 @@
-import BaseModel from './base-model';
-import merge from 'lodash.merge';
-export default class DepositRequestModel extends BaseModel {
-  constructor(fields) {
-    super(fields);
-    this.amount = Array.isArray(fields.amount) ? fields.amount[0] : fields.amount;
-    this.buttons = fields.buttons ?? [...fields.amounts];
-    this.editable = typeof fields.editable === "boolean" ? fields.editable : Boolean(fields.customAmount);
-    this.customAmount = merge({
-      minimum: 1,
-      maximum: 1000000000000,
-      multipleOf: 1,
-    }, (fields.customAmount || {}));
-  }
-}

package/src/views/amount-selector.js

@@ -1,47 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { mountMethodSelector } from './method-selector';
-import { fetchReadyToPay } from '../storefront/ready-to-pay';
-
-export async function mountAmountSelector() {
-  if (state.data.money) {
-    state.data.money.amount = null;
-    state.data.money.currency = null;
-    state.updateModel();
-  }
-
-  const iframe = iframes.form;
-  if (!iframe) {
-    await mountForm();
-  }
-
-  const modelSafeState = state.toModel();
-  const model = {
-    options: modelSafeState.options,
-    data: modelSafeState.data,
-    mainStyleVars: modelSafeState.mainStyleVars,
-  };
-
-  iframe.component?.call('route', {
-    name: 'amount-selector'
-  });
-
-  iframe.component?.call('update', model);
-
-  iframe?.component?.on('confirm-amount', async (data) => {
-    const { amount, currency } = data;
-    state.data.money = {
-      amount,
-      currency,
-    };
-
-    const readyToPayUpdated = await fetchReadyToPay({
-      riskMetadata: state.data.riskMetadata
-    });
-
-    state.data.readyToPay = readyToPayUpdated;
-
-    state.updateModel();
-    mountMethodSelector();
-  });
-}

package/src/views/form.js

@@ -1,52 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { ViewIframe } from './common/iframe';
-import { mountMethodSelector } from './method-selector';
-import { mountAmountSelector } from './amount-selector';
-
-export const baseMethodSelectorHTML = () => `
-<div data-rebilly-instruments="content" class="rebilly-instruments-content">
-  <div data-rebilly-instruments="content-error" id="rebilly-instruments-error"></div>
-  <div data-rebilly-instruments="form"></div>
-</div>
-`;
-
-export async function mountForm() {
-  state.form.innerHTML += baseMethodSelectorHTML();
-  const container = document.querySelector('[data-rebilly-instruments="form"]');
-  const { paymentMethodsUrl: url } = state.options?._computed;
-  const name = 'rebilly-instruments-form';
-
-  const modelSafeState = state.toModel();
-  const model = {
-    options: modelSafeState.options,
-    data: modelSafeState.data,
-    mainStyleVars: modelSafeState.mainStyleVars,
-  };
-
-  const args = {
-    name,
-    url: `${url}?name=${name}`,
-    container,
-    model,
-  };
-
-  const iframe = await new ViewIframe(args);
-  iframe.bindEventListeners({loader: state.loader});
-
-  iframes.form = iframe;
-
-  state.loader.stopLoading({id: 'rebilly-instruments-form'});
-
-  return {
-    then: (callback) => callback()
-  }
-}
-
-export function determineFirstView() {
-  if (state.options?.deposit) {
-    mountAmountSelector();
-  } else {
-    mountMethodSelector();
-  }
-}