@rebilly/instruments 4.4.0 → 4.6.0

package/src/views/errors.js

@@ -1,45 +1,47 @@
 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;
-    }
+    const title = 'Error';
+
+    function displayString(message = null) {
+        if (message === null) {
+            message = 'An unexpected error occurred';
+
+            if (typeof error === 'string') {
+                message = error;
+            }
 
-    if (error.details.length > 1) {
-      return `<ul class="rebilly-instruments-error-card-details">
-        ${error.details.map(detail => `<li>${displayDetail(detail)}</li>`).join('')}
-      </ul>`
+            if (error.error) {
+                message = error.error;
+            }
+
+            if (error.message) {
+                message = error.message;
+            }
+        }
+
+        return `<p class="rebilly-instruments-error-card-message">${message}</p>`;
     }
 
-    return displayString(displayDetail(error.details[0]));
-  }
+    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">
+    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">
@@ -49,57 +51,65 @@ const errorTemplate = (error) => {
     </button>
   </header>
   ${error.details ? displayList() : displayString()}
-</div>`
+</div>`;
 };
 
 export function clearError() {
-  const errorContainer = document.querySelector('#rebilly-instruments-error');
-  if (!errorContainer) return ;
+    const errorContainer = document.querySelector('#rebilly-instruments-error');
+    if (!errorContainer) return;
 
-  errorContainer.innerHTML = '';
+    errorContainer.innerHTML = '';
 }
 
 export function showError(error, isCloseable = true) {
-  if (!error) return;
-  const errorContainer = document.querySelector('#rebilly-instruments-error');
-  if (!errorContainer) return ;
-
-  errorContainer.innerHTML = errorTemplate(error);
+    if (!error) return;
+    const errorContainer = document.querySelector('#rebilly-instruments-error');
+    if (!errorContainer) return;
 
-  function clickOutsideError(e) {
-    if (errorContainer.contains(e.target)) return;
+    errorContainer.innerHTML = errorTemplate(error);
 
-    window.removeEventListener('click', clickOutsideError, false);
-    clearError();
-  }
+    function clickOutsideError(e) {
+        if (errorContainer.contains(e.target)) return;
 
-  function windowBlur() {
-    setTimeout(() => {
-      if (document.activeElement.tagName === 'IFRAME') {
-        window.removeEventListener('click', windowBlur, false);
+        window.removeEventListener('click', clickOutsideError, false);
         clearError();
-      }
-    });
-  }
-
-  const closeButton = document.querySelector('.rebilly-instruments-error-card-close-button');
-
-  if(isCloseable) {
-    closeButton.addEventListener('click', clearError);
-
-    window.addEventListener('click', clickOutsideError);
-    window.addEventListener('blur', windowBlur, { once: true });
-  } else {
-    const errorBox = document.querySelector('.rebilly-instruments-error-card');
-    errorBox.classList.add('not-closeable');
-    closeButton.remove();
-  }
-
-  if(errorContainer.scrollIntoView){
-    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();
+    }
+
+    function windowBlur() {
+        setTimeout(() => {
+            if (document.activeElement.tagName === 'IFRAME') {
+                window.removeEventListener('click', windowBlur, false);
+                clearError();
+            }
+        });
+    }
+
+    const closeButton = document.querySelector(
+        '.rebilly-instruments-error-card-close-button',
+    );
+
+    if (isCloseable) {
+        closeButton.addEventListener('click', clearError);
+
+        window.addEventListener('click', clickOutsideError);
+        window.addEventListener('blur', windowBlur, { once: true });
+    } else {
+        const errorBox = document.querySelector(
+            '.rebilly-instruments-error-card',
+        );
+        errorBox.classList.add('not-closeable');
+        closeButton.remove();
+    }
+
+    if (errorContainer.scrollIntoView) {
+        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/form.js

@@ -12,46 +12,50 @@ export const baseMethodSelectorHTML = () => `
 `;
 
 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()
-  }
+    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();
-  }
+    if (state.options?.deposit) {
+        mountAmountSelector();
+    } else {
+        mountMethodSelector();
+    }
 }
 
 export function removeForm() {
-  const container = document.querySelector('[data-rebilly-instruments="form"]');
-  container.remove();
-}
+    const container = document.querySelector(
+        '[data-rebilly-instruments="form"]',
+    );
+    container.remove();
+}

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

@@ -1,52 +1,52 @@
-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`);
+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';
+    }
 
-        if (id === 'apple-pay') {
-          updateApplePayStyling();
+    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`);
+            }
         }
-
-      } else {
-        console.warn(`method '${id}' is not supported`);
-      }
     }
-  }
 
-  Rebilly?.on('ready', () => {
-    mountButton();
-  });
+    Rebilly?.on('ready', () => {
+        mountButton();
+    });
 
-  Rebilly?.on('error', error => {
-    console.error(error)
-  });
+    Rebilly?.on('error', (error) => {
+        console.error(error);
+    });
 }

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

@@ -2,51 +2,52 @@ import state from '../../state';
 import { getMethodData } from './get-method-data';
 
 export function generateDigitalWallet({ expressMethods = [] }) {
-  const output = {};
-
-  const { paymentInstruments } = state.options;
-
-  const transactionData = {
-    countryCode: state.options.countryCode,
-    label: state.options.websiteId
-  }
-
-  if (state.data?.amountAndCurrency) {
-    const {
-      amount,
-      currency
-    } = state.data.amountAndCurrency;
-    transactionData.amount = amount;
-    transactionData.currency =  currency;
-  }
-
-  expressMethods.forEach(method => {
-    const { METHOD_TYPE } = getMethodData(method);
-
-    if (method.feature?.name === 'Google Pay') {
-      output[METHOD_TYPE] = {
-        transactionData,
-        merchantConfig: {
-          merchantName: method.feature.merchantName,
-          merchantOrigin: method.feature.merchantOrigin
-        },
-        googlePayDisplayOptions: paymentInstruments.googlePay.displayOptions,
-      }
-    }
+    const output = {};
+
+    const { paymentInstruments } = state.options;
+
+    const transactionData = {
+        countryCode: state.options.countryCode,
+        label: state.options.websiteId,
+    };
 
-    if (method.feature?.name === 'Apple Pay') {
-      output[METHOD_TYPE] = {
-        transactionData,
-        merchantConfig: {
-          merchantName: paymentInstruments.applePay?.merchantConfig?.merchantName,
-          // Apple Pay code cannot run in an iframe, and the merchant origin must be
-          // registered as a merchant domain, so we can just send the current URL.
-          merchantOrigin: window.location.hostname,
-        },
-        applePayDisplayOptions: paymentInstruments.applePay.displayOptions
-      }
+    if (state.data?.amountAndCurrency) {
+        const { amount, currency } = state.data.amountAndCurrency;
+        transactionData.amount = amount;
+        transactionData.currency = currency;
     }
-  });
 
-  return output;
-}
+    expressMethods.forEach((method) => {
+        const { METHOD_TYPE } = getMethodData(method);
+
+        if (method.feature?.name === 'Google Pay') {
+            output[METHOD_TYPE] = {
+                transactionData,
+                merchantConfig: {
+                    merchantName: method.feature.merchantName,
+                    merchantOrigin: method.feature.merchantOrigin,
+                },
+                googlePayDisplayOptions:
+                    paymentInstruments.googlePay.displayOptions,
+            };
+        }
+
+        if (method.feature?.name === 'Apple Pay') {
+            output[METHOD_TYPE] = {
+                transactionData,
+                merchantConfig: {
+                    merchantName:
+                        paymentInstruments.applePay?.merchantConfig
+                            ?.merchantName,
+                    // Apple Pay code cannot run in an iframe, and the merchant origin must be
+                    // registered as a merchant domain, so we can just send the current URL.
+                    merchantOrigin: window.location.hostname,
+                },
+                applePayDisplayOptions:
+                    paymentInstruments.applePay.displayOptions,
+            };
+        }
+    });
+
+    return output;
+}