@rebilly/instruments 3.12.3-beta.0 → 3.13.2-beta.0

package/src/views/common/iframe/event-listeners.js

@@ -1,5 +1,6 @@
 import camelCase from 'lodash.camelcase';
 import Events from '../../../events';
+import { showError } from '../../errors';
 
 export function dispatchRebillyInsturmentEventHandler(iframe) {
   iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
@@ -13,15 +14,13 @@ export function resizeComponentHandler(iframe) {
   });
 }
 
-export function stopLoaderHandler(iframe, data = { section: 'form' }) {
-  const iframeLoader = iframe.container.querySelectorAll('.rebilly-instruments-loader.is-active');
-
-  if (iframeLoader && iframeLoader.length) {
-    iframeLoader.forEach(loader => loader.classList.remove('is-active'));
-  }
-  
-  iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
-    data.loader?.stopLoading({ section: data.section, id: id || data.id });
+export function stopLoaderHandler(iframe, data) {
+  iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
+    let {section} = data;
+    if (!section) {
+      section = id.includes('summary') ? 'summary' : 'form';
+    }
+    data.loader?.stopLoading({ section, id });
   });
 }
 
@@ -41,3 +40,7 @@ export function displayOverlay(iframe) {
     }
   });
 }
+
+export function showErrorHandler(iframe) {
+  iframe.component.on(`${iframe.name}-show-error`, showError);
+}

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

@@ -3,7 +3,8 @@ import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
   stopLoaderHandler,
-  displayOverlay
+  displayOverlay,
+  showErrorHandler
 } from './event-listeners';
 
 export class MethodIframe extends BaseIframe {
@@ -19,5 +20,6 @@ export class MethodIframe extends BaseIframe {
       id
     });
     displayOverlay(this);
+    showErrorHandler(this);
   }
 }

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

@@ -3,7 +3,8 @@ import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
   changeIframeSrcHandler,
-  stopLoaderHandler
+  stopLoaderHandler,
+  showErrorHandler
 } from './event-listeners';
 
 export class ModalIframe extends BaseIframe {
@@ -18,8 +19,9 @@ export class ModalIframe extends BaseIframe {
     stopLoaderHandler(this, {
       loader,
       section: 'modal',
-      id: 'modal-content'
+      id: this.name
     });
+    showErrorHandler(this);
 
     // Close modal via postmate
     this.component.on(`${this.name}-close`, (...args) => {

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

@@ -2,7 +2,8 @@ import BaseIframe from './base-iframe';
 import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
-  stopLoaderHandler
+  stopLoaderHandler,
+  showErrorHandler,
 } from './event-listeners';
 
 export class ViewIframe extends BaseIframe {
@@ -14,5 +15,6 @@ export class ViewIframe extends BaseIframe {
     dispatchRebillyInsturmentEventHandler(this);
     resizeComponentHandler(this);
     stopLoaderHandler(this, { loader });
+    showErrorHandler(this);
   }
 }

package/src/views/confirmation.js

@@ -1,7 +1,6 @@
 import { purchase } from '../functions/purchase';
 import { setup } from '../functions/setup';
 import { ViewIframe } from './common/iframe';
-import { replaceContent } from './common/render-utilities';
 import { updateMethodSelector } from './method-selector';
 import { updateSummary } from './summary';
 
@@ -16,9 +15,14 @@ export async function mountConfirmation({ payload: instrument, state }) {
     updateSummary({ state, instrument });
   }
 
-  replaceContent(state.form, baseConfirmationHTML);
+  const contentElement = state.form.querySelector('.rebilly-instruments-content');
+  contentElement.insertAdjacentHTML('afterend', baseConfirmationHTML);
 
-  state.loader.startLoading({ id: 'confirmation' });
+  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');
 
@@ -27,7 +31,7 @@ export async function mountConfirmation({ payload: instrument, state }) {
   const model = {
     options: state.options,
     data: state.data.toPostmatesModel(),
-    mainStyle: state.mainStyle,
+    mainStyleVars: state.mainStyleVars,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -50,7 +54,7 @@ export async function mountConfirmation({ payload: instrument, state }) {
   });
 
   iframe.component.on('choose-another-method', () => {
-    state.iframeComponents = state.iframeComponents.filter((item) => {
+    state.iframeComponents.form = state.iframeComponents.form.filter((item) => {
       if (item.name === iframe.name) {
         item.destroy();
         return false;
@@ -60,8 +64,9 @@ export async function mountConfirmation({ payload: instrument, state }) {
     if (state.data.isPurchase) {
       updateSummary({ state });
     }
-    updateMethodSelector({ state, mainStyle: state.mainStyle });
+    updateMethodSelector({ state, mainStyleVars: state.mainStyleVars });
+    state.form.querySelector('.rebilly-instruments-confirmation').remove();
   });
 
-  state.iframeComponents.push(iframe);
+  state.iframeComponents.form.push(iframe);
 }

package/src/views/errors.js

@@ -0,0 +1,95 @@
+const errorTemplate = (error) => {
+  const title = 'Error';
+  
+  function displayString(message = null) {
+    if (message === null) {
+      message = 'An unexpected error occurred';
+
+      if (typeof error === 'string') {
+        message = error;
+      }
+
+      if (error.error) {
+        message = error.error;
+      }
+
+      if (error.message) {
+        message = error.message;
+      }
+    }
+    
+    return `<p class="rebilly-instruments-error-card-message">${message}</p>`;
+  }
+
+  function displayList() {
+    function displayDetail(detail) {
+      let detailMessage = detail;
+      if (detail['data-rebilly']) {
+        detailMessage = `"${detail['data-rebilly']}" ${detail.error}`
+      }
+      return detailMessage;
+    }
+
+    if (error.details.length > 1) {
+      return `<ul class="rebilly-instruments-error-card-details">
+        ${error.details.map(detail => `<li>${displayDetail(detail)}</li>`).join('')}
+      </ul>`
+    }
+
+    return displayString(displayDetail(error.details[0]));
+  }
+
+  return `<div class="rebilly-instruments-error-card">
+  <header class="rebilly-instruments-error-card-header">
+    <p class="rebilly-instruments-error-card-title">${title}</p>
+    <button class="rebilly-instruments-error-card-close-button">
+      <svg class="rebilly-instruments-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z" fill-rule="nonzero"/>
+      </svg>
+    </button>
+  </header>
+  ${error.details ? displayList() : displayString()}
+</div>`
+};
+
+export function clearError() {
+  const errorContainer = document.querySelector('#rebilly-instruments-error');
+  if (!errorContainer) return ;
+
+  errorContainer.innerHTML = '';
+}
+
+export function showError(error) {
+  const errorContainer = document.querySelector('#rebilly-instruments-error');
+  if (!errorContainer) return ;
+
+  errorContainer.innerHTML = errorTemplate(error);
+
+  const closeButton = document.querySelector('.rebilly-instruments-error-card-close-button');
+  closeButton.addEventListener('click', clearError);
+
+  function clickOutsideError(e) {
+    if (errorContainer.contains(e.target)) return;
+
+    window.removeEventListener('click', clickOutsideError, false);
+    clearError();
+  }
+
+  function windowBlur() {
+    setTimeout(() => {
+      if (document.activeElement.tagName === 'IFRAME') {
+        window.removeEventListener('click', windowBlur, false);
+        clearError();
+      }
+    });
+  }
+
+  window.addEventListener('click', clickOutsideError);
+  window.addEventListener('blur', windowBlur, { once: true });
+
+  errorContainer.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'});
+  console.error('Rebilly Instruments Error', error);
+
+  // Must focus to ensure window blur event will trigger
+  window.focus();
+}

package/src/views/method-selector/express-methods.js

@@ -0,0 +1,51 @@
+export default function mountExpressMethod({
+  state,
+  id
+}) {
+  const {Rebilly} = window;
+  const container = document.querySelector(`.rebilly-instruments-${id}-method`);
+  
+  // Hack: The correct way to do this is to accept the options via the framepay package
+  // Will remove once these options are added to framepay
+  function updateApplePayStyling() {
+    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
+    const {
+      applePayDisplayOptions: {
+        buttonHeight
+      }
+    } = state.options.digitalWallet.applePay;
+
+    applePayButton.style.margin = '0px';
+    applePayButton.style.width = '100%';
+    applePayButton.style.height = buttonHeight;
+    applePayButton.style.cursor = 'pointer';
+  }
+
+  function mountButton() {
+    if(!container.children.length) {
+      const rebillyMountFunction = {
+        'google-pay': 'googlePay',
+        'pay-pal-billing-agreement': 'paypal',
+        'apple-pay': 'applePay'
+      }
+
+      if (rebillyMountFunction[id]) {
+        Rebilly[rebillyMountFunction[id]].mount(`.rebilly-instruments-${id}-method`);
+
+        if (id === 'apple-pay') {
+          updateApplePayStyling();
+        }
+      } else {
+        console.warn(`method '${id}' is not supported`);
+      }
+    }
+  }
+
+  Rebilly?.on('ready', () => {
+    mountButton();
+  });
+
+  Rebilly?.on('error', error => {
+    console.error(error)
+  });
+}

package/src/views/method-selector/generate-framepay-config.js

@@ -0,0 +1,54 @@
+import merge from 'lodash.merge';
+
+export function generateFramepayConfig ({
+  state,
+  methodIds
+} = {}) {
+  const {
+    options,
+    data
+  } = state;
+
+  const config = {
+    style: options.themeFramepay,
+    locale: options?.locale || 'auto',
+    organizationId: options.organizationId,
+    websiteId: options.websiteId,
+    methods: data.readyToPay,
+  };
+
+  if (methodIds.includes('pay-pal-billing-agreement')) {
+    config.transactionData = merge(
+      typeof config.transactionData === 'object' ? config.transactionData : {},
+      data.amountAndCurrency
+    );
+    config.paypal = options.paymentInstruments.paypal;
+  }
+
+  if (methodIds.includes('google-pay')) {
+    config.transactionData = merge(
+      typeof config.transactionData === 'object' ? config.transactionData : {},
+      options.digitalWallet.googlePay?.transactionData
+    );
+    config.googlePay = options.digitalWallet.googlePay.googlePayDisplayOptions;
+  }
+
+  if (methodIds.includes('apple-pay')) {
+    config.transactionData = merge(
+      typeof config.transactionData === 'object' ? config.transactionData : {},
+      options.digitalWallet.applePay?.transactionData
+    );
+    config.applePay = options.digitalWallet.applePay.applePayDisplayOptions;
+  }
+
+  if (options.publishableKey) {
+    config.publishableKey = options.publishableKey;
+  }
+
+  if (options.jwt) {
+    config.jwt = options.jwt;
+    config.sandbox = options.apiMode === 'sandbox';
+  }
+
+  return config;
+}

package/src/views/method-selector/generate-framepay-config.spec.js

@@ -0,0 +1,195 @@
+import {generateFramepayConfig} from './generate-framepay-config';
+
+describe('Generate FramePay Config', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {
+      options: {
+        themeFramepay: {},
+        locale: 'en-CA',
+        organizationId: 'test-organization-id',
+        websiteId: 'test-website-id'
+      },
+      data: {
+        readyToPay: []
+      }
+    };
+  });
+
+  it('should generate default config', () => {
+    const config = generateFramepayConfig({
+      state,
+      methodIds: []
+    });
+
+    const {options, data} = state;
+
+    expect(config).toEqual(expect.objectContaining ({
+      style: options.themeFramepay,
+      locale: options.locale,
+      organizationId: options.organizationId,
+      websiteId: options.websiteId,
+      methods: data.readyToPay,
+    }))
+  });
+
+  it('should add publishableKey', () => {
+    state.options.publishableKey = 'test-publishable-key';
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: []
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      publishableKey: state.options.publishableKey
+    }));
+  });
+
+  it('should add jwt', () => {
+    state.options.jwt = 'test-jwt';
+    state.options.apiMode = 'sandbox';
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: []
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      jwt: state.options.jwt,
+      sandbox: true
+    }));
+  });
+
+  it('should add configurations for PayPal', () => {
+    state.data.amountAndCurrency = {
+      amount: 10,
+      currency: 'CAD'
+    };
+    state.options.paymentInstruments = {
+      paypal: {
+        test: 'key'
+      }
+    }
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: ['pay-pal-billing-agreement']
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.data.amountAndCurrency
+      ),
+      paypal: state.options.paymentInstruments.paypal
+    }));
+  });
+
+  it('should add configurations for Google Pay', () => {
+    state.options.digitalWallet = {
+      googlePay: {
+        transactionData: {
+          test: 'key'
+        },
+        googlePayDisplayOptions: {
+          test: 'key'
+        }
+      }
+    }
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: ['google-pay']
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.options.digitalWallet.googlePay.transactionData
+      ),
+      googlePay: state.options.digitalWallet.googlePay.googlePayDisplayOptions
+    }));
+  });
+
+  it('should add configurations for Apple Pay', () => {
+    state.options.digitalWallet = {
+      applePay: {
+        transactionData: {
+          test: 'key'
+        },
+        applePayDisplayOptions: {
+          test: 'key'
+        }
+      }
+    }
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: ['apple-pay']
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.options.digitalWallet.applePay.transactionData
+      ),
+      applePay: state.options.digitalWallet.applePay.applePayDisplayOptions
+    }));
+  });
+
+  it('should add all instrument methods together', () => {
+    state.data.amountAndCurrency = {
+      test: 'key'
+    };
+    state.options = {
+      paymentInstruments: {
+        paypal: {
+          test: 'key'
+        }
+      },
+      digitalWallet: {
+        googlePay: {
+          transactionData: {
+            test: 'key'
+          },
+          googlePayDisplayOptions: {
+            test: 'key'
+          }
+        },
+        applePay: {
+          transactionData: {
+            test: 'key'
+          },
+          applePayDisplayOptions: {
+            test: 'key'
+          }
+        }
+      }
+    }
+
+    const config = generateFramepayConfig({
+      state,
+      methodIds: ['pay-pal-billing-agreement', 'google-pay', 'apple-pay']
+    });
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.data.amountAndCurrency
+      ),
+      paypal: state.options.paymentInstruments.paypal
+    }));
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.options.digitalWallet.googlePay.transactionData
+      ),
+      googlePay: state.options.digitalWallet.googlePay.googlePayDisplayOptions
+    }));
+
+    expect(config).toEqual(expect.objectContaining ({
+      transactionData: expect.objectContaining(
+        state.options.digitalWallet.applePay.transactionData
+      ),
+      applePay: state.options.digitalWallet.applePay.applePayDisplayOptions
+    }));
+  });
+});

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

@@ -9,7 +9,6 @@ const isExpressMethod = ({ method, feature }) => (
 
 const isSupportedMethod = ({ method }) => SUPPORTED_METHODS.includes(method);
 
-// TODO: just loader is used. We could simplify signature
 export function getPaymentMethods({ state }) {
   const result = {
     EXPRESS_METHODS: [],

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

@@ -1,13 +1,14 @@
 /* eslint-disable no-undef */
 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 { mountExpressMethods } from './mount-express-methods';
 import { generateDigitalWallet } from './generate-digital-wallet';
-import { MountMethods } from './mount-methods';
-import { fetchData } from '../../functions/mount/fetch-data';
 
 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 class="rebilly-instruments-express-methods ${
       compactExpressInstruments ? 'is-compact' : ''
@@ -23,81 +24,67 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 </div>
 `;
 
-export function mountMethodSelector({ state }) {
+export async function mountMethodSelector({ state }) {
   const { EXPRESS_METHODS, METHODS } = getPaymentMethods({ state });
 
-  state.form.innerHTML += baseMethodSelectorHTML(
-    state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
-  );
-
-  const EXPRESS_METHODS_CONTAINER = document.querySelector(
-    '.rebilly-instruments-express-methods-container'
-  );
-  const METHODS_DIVIDER = document.querySelector(
-    '.rebilly-instruments-divider'
-  );
-  METHODS_DIVIDER.style.display =
-    METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
-  const METHODS_CONTAINER = document.querySelector(
-    '.rebilly-instruments-methods'
-  );
+  const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
+  if (methodSelectorElement) {
+    methodSelectorElement.style.visibility = 'visible';
+    methodSelectorElement.style.height = 'auto';
+  } else {
+    state.form.innerHTML += baseMethodSelectorHTML(
+      state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
+    );
+  }
 
-  state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
+  const METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
+  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods-container');
 
-  if (METHODS.length) {
-    MountMethods({
-      state,
-      METHODS_CONTAINER,
-      METHODS
-    });
+  if(EXPRESS_METHODS.length) {
+    if (!methodSelectorElement) {
+      state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
+      mountExpressMethods({
+        state,
+        methods: EXPRESS_METHODS,
+        container: EXPRESS_METHODS_CONTAINER,
+      });
+    }
   } else {
-    METHODS_CONTAINER.style.display = 'none';
+    EXPRESS_METHODS_CONTAINER.style.display = 'none';
+    document.querySelector('.rebilly-instruments-divider')
+      .style.display = 'none';
   }
 
-  if (EXPRESS_METHODS.length) {
-    mountExpressMethods({
-      state,
-      EXPRESS_METHODS,
-      EXPRESS_METHODS_CONTAINER
+  if (METHODS.length) {
+    const model = {
+      options: state.options,
+      data: state.data.toPostmatesModel(),
+      mainStyleVars: state.mainStyleVars,
+    };
+    const { paymentMethodsUrl } = state.options._computed;
+
+    const iframe = await new ViewIframe({
+      name: 'rebilly-instruments-methods',
+      url: `${paymentMethodsUrl}`,
+      container: METHODS_CONTAINER,
+      model
     });
+    iframe.bindEventListeners({loader: state.loader});
+    state.iframeComponents.form.push(iframe);
   } else {
-    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
-  }
-
-  if (!METHODS.length && !EXPRESS_METHODS.length) {
-    state.form.innerHTML = `
-      <p data-rebilly-i18n="form.error.noPaymentMethods">
-        No payment methods available for this transaction, please contact support.
-      <p>
-    `;
-    state.form.style.minHeight = 'auto';
+    METHODS_CONTAINER.style.display = 'none';
   }
-
-  state.translate.translateItems();
-
-  state.loader.stopLoading({ id: 'initForm' });
 }
 
 export async function updateMethodSelector({ state }) {
-  state.loader.startLoading({ id: 'initForm' });
-  const { riskMetadata } = await collectData();
+  state.loader.startLoading({ id: 'rebilly-instruments-methods' });
 
+  const { riskMetadata } = await collectData();
   state.data = await fetchData({ state, riskMetadata });
 
   if (state.data.transaction && state.data.transaction?.type === 'setup') {
     state.options.transactionType = 'setup';
   }
 
-  state.form
-    .querySelectorAll(':not(.rebilly-instruments-confirmation)')
-    .forEach((element) => {
-      if (
-        !element.classList.contains('rebilly-instruments-loader') &&
-        !element.classList.contains('rebilly-instruments-loader-spinner')
-      ) {
-        element.remove();
-      }
-    });
-
   mountMethodSelector({ state });
 }