@rebilly/instruments 4.4.0 → 4.6.0

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

@@ -1,103 +1,107 @@
 import mountExpressMethod from './express-methods';
-import {generateFramepayConfig} from './generate-framepay-config'
+import { generateFramepayConfig } from './generate-framepay-config';
 import { getMethodData } from './get-method-data';
 import Events from '../../events';
 import state from '../../state';
 
 const browserIsSafari = () => window.ApplePaySession;
 
-export async function mountExpressMethods({
-  methods,
-  container
-}) {
-  const methodIds = methods.map((expressMethod) => {
-    const { METHOD_ID } = getMethodData(expressMethod);
-    return METHOD_ID
-  });
-  const {Rebilly} = window;
-
-  if(!Rebilly?.initialized) {
-    await Rebilly?.initialize(
-      generateFramepayConfig({
-        methodIds
-      })
-    );
-  }
-
-  function generateExpressMethodHeight(method) {
-    let height;
-    const optionId = method.optionsPaymentInstrumentsKey;
-    
-    // Return the default size of express methods if no id is found
-    if (!optionId) return '48px';
-
-    const {buttonHeight, displayOptions} = state.options.paymentInstruments?.[optionId];
-
-    if (displayOptions) {
-      height = displayOptions.buttonHeight;
-    } else {
-      height = buttonHeight;
+export async function mountExpressMethods({ methods, container }) {
+    const methodIds = methods.map((expressMethod) => {
+        const { METHOD_ID } = getMethodData(expressMethod);
+        return METHOD_ID;
+    });
+    const { Rebilly } = window;
+
+    if (!Rebilly?.initialized) {
+        await Rebilly?.initialize(
+            generateFramepayConfig({
+                methodIds,
+            }),
+        );
     }
-  
-    if (typeof height === 'number') {
-      height = `${buttonHeight}px`;
+
+    function generateExpressMethodHeight(method) {
+        let height;
+        const optionId = method.optionsPaymentInstrumentsKey;
+
+        // Return the default size of express methods if no id is found
+        if (!optionId) return '48px';
+
+        const { buttonHeight, displayOptions } =
+            state.options?.paymentInstruments?.[optionId] || {};
+
+        if (displayOptions) {
+            height = displayOptions.buttonHeight;
+        } else {
+            height = buttonHeight;
+        }
+
+        if (typeof height === 'number') {
+            height = `${buttonHeight}px`;
+        }
+
+        return height;
     }
-  
-    return height;
-  }
 
-  methods.forEach(method => {
-    const {METHOD_ID: id} = getMethodData(method);
-    // filter out apple pay unless in safari
-    if (id === 'apple-pay' && !browserIsSafari()) return
+    methods.forEach((method) => {
+        const { METHOD_ID: id } = getMethodData(method);
+        // filter out apple pay unless in safari
+        if (id === 'apple-pay' && !browserIsSafari()) return;
 
-    container.innerHTML += `
-      <div class="rebilly-instruments-${id}-method" style="height: ${generateExpressMethodHeight(method)}"></div>
+        container.innerHTML += `
+      <div class="rebilly-instruments-${id}-method" style="height: ${generateExpressMethodHeight(
+            method,
+        )}"></div>
     `;
-    mountExpressMethod({
-      state,
-      id,
+        mountExpressMethod({
+            state,
+            id,
+        });
     });
-  });
-
-  // HOTFIX: Hardcoded, use env variables in the future
-  const redirectUrl = state.options.apiMode === 'sandbox'
-    ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
-    : 'https://forms.secure-payments.app/approval-url?close=true';
-
-  Rebilly?.on('token-ready', (token) => {
-    const instrumentReadyPayload = {
-      websiteId: state.options.websiteId,
-      billingAddress: token.billingAddress,
-      redirectUrl,
-      _raw: token
-    };
-    
-    if (state.data?.isShippingRequired) {
-      if (token.shippingAddress) {
-        instrumentReadyPayload.deliveryAddress = token.shippingAddress;
-      } else {
-        instrumentReadyPayload.deliveryAddress = instrumentReadyPayload.billingAddress;
-      }
-    }
 
-    if (Array.isArray(instrumentReadyPayload.billingAddress?.emails)) {
-      const email = instrumentReadyPayload.billingAddress.emails
-        .find(e => e.label === 'main')
+    // HOTFIX: Hardcoded, use env variables in the future
+    const redirectUrl =
+        state.options.apiMode === 'sandbox'
+            ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
+            : 'https://forms.secure-payments.app/approval-url?close=true';
 
-      if (email?.value) {
-        instrumentReadyPayload.billingAddress.email = email.value;
-      }
-    }
-    if (Array.isArray(instrumentReadyPayload.deliveryAddress?.emails)) {
-      const email = instrumentReadyPayload.deliveryAddress.emails
-        .find(e => e.label === 'main')
+    Rebilly?.on('token-ready', (token) => {
+        const instrumentReadyPayload = {
+            websiteId: state.options.websiteId,
+            billingAddress: token.billingAddress,
+            redirectUrl,
+            _raw: token,
+        };
 
-      if (email?.value) {
-        instrumentReadyPayload.deliveryAddress.email = email.value;
-      }
-    }
+        if (state.data?.isShippingRequired) {
+            if (token.shippingAddress) {
+                instrumentReadyPayload.deliveryAddress = token.shippingAddress;
+            } else {
+                instrumentReadyPayload.deliveryAddress =
+                    instrumentReadyPayload.billingAddress;
+            }
+        }
+
+        if (Array.isArray(instrumentReadyPayload.billingAddress?.emails)) {
+            const email = instrumentReadyPayload.billingAddress.emails.find(
+                (e) => e.label === 'main',
+            );
 
-    Events.instrumentReady.dispatch(instrumentReadyPayload);
-  });
+            if (email?.value) {
+                instrumentReadyPayload.billingAddress.email = email.value;
+            }
+        }
+        if (Array.isArray(instrumentReadyPayload.deliveryAddress?.emails)) {
+            const email = instrumentReadyPayload.deliveryAddress.emails.find(
+                (e) => e.label === 'main',
+            );
+
+            if (email?.value) {
+                instrumentReadyPayload.deliveryAddress.email = email.value;
+            }
+        }
+
+        Events.instrumentReady.dispatch(instrumentReadyPayload);
+    });
 }

package/src/views/modal.js

@@ -4,93 +4,100 @@ import { ModalIframe } from './common/iframe';
 const modalTemplate = (isRedirect, method) => `
   <div class="rebilly-instruments-modal-overlay">
     <div class="rebilly-instruments-modal-container ${
-      method ? `rebilly-instruments-${method}` : ''
+        method ? `rebilly-instruments-${method}` : ''
     } ${isRedirect ? 'is-redirect' : ''}">
-      ${isRedirect ? '' : `
+      ${
+          isRedirect
+              ? ''
+              : `
       <svg class="rebilly-instruments-modal-close" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
         <path d="m15 13.5858 7.2929-7.293c.3905-.3904 1.0237-.3904 1.4142 0 .3905.3906.3905 1.0238 0 1.4143L16.4142 15l7.293 7.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0L15 16.4142l-7.2929 7.293c-.3905.3904-1.0237.3904-1.4142 0-.3905-.3906-.3905-1.0238 0-1.4143L13.5858 15l-7.293-7.2929c-.3904-.3905-.3904-1.0237 0-1.4142.3906-.3905 1.0238-.3905 1.4143 0L15 13.5858Z" fill-rule="nonzero"/>
       </svg>
-      `}
+      `
+      }
       <div class="rebilly-instruments-modal-content"></div>
     </div>
   </div>
 `;
 
 export async function mountModal({
-  name = '',
-  url = '',
-  model = {},
-  classListArray = [],
-  close = () => {},
+    name = '',
+    url = '',
+    model = {},
+    classListArray = [],
+    close = () => {},
 } = {}) {
-  const method = model?.method?.method;
-  const isRedirect = name === 'rebilly-instruments-approval-url';
-  state.form.insertAdjacentHTML('beforeend', modalTemplate(isRedirect, method));
+    const method = model?.method?.method;
+    const isRedirect = name === 'rebilly-instruments-approval-url';
+    state.form.insertAdjacentHTML(
+        'beforeend',
+        modalTemplate(isRedirect, method),
+    );
 
-  const modalOverlay = document.querySelector(
-    '.rebilly-instruments-modal-overlay'
-  );
-  const modalContainer = document.querySelector(
-    '.rebilly-instruments-modal-container'
-  );
-  const closeButton = document.querySelector(
-    '.rebilly-instruments-modal-close'
-  );
-  const modalContent = document.querySelector(
-    '.rebilly-instruments-modal-content'
-  );
+    const modalOverlay = document.querySelector(
+        '.rebilly-instruments-modal-overlay',
+    );
+    const modalContainer = document.querySelector(
+        '.rebilly-instruments-modal-container',
+    );
+    const closeButton = document.querySelector(
+        '.rebilly-instruments-modal-close',
+    );
+    const modalContent = document.querySelector(
+        '.rebilly-instruments-modal-content',
+    );
 
-  document.body.style.overflow = 'hidden';
-  setTimeout(() => {
-    modalOverlay.classList.add('is-visible');
-    modalContainer.classList.add('is-visible');
-  }, 240);
-  state.loader.addDOMElement({ section: 'modal', el: modalContent });
-  state.loader.startLoading({ section: 'modal', id: name });
+    document.body.style.overflow = 'hidden';
+    setTimeout(() => {
+        modalOverlay.classList.add('is-visible');
+        modalContainer.classList.add('is-visible');
+    }, 240);
+    state.loader.addDOMElement({ section: 'modal', el: modalContent });
+    state.loader.startLoading({ section: 'modal', id: name });
 
-  const modelSafeState = state.toModel();
-  const injectedModel = {
-    options: modelSafeState.options,
-    ...model
-  };
+    const modelSafeState = state.toModel();
+    const injectedModel = {
+        options: modelSafeState.options,
+        ...model,
+    };
 
-  const iframe = await new ModalIframe({
-    name,
-    url,
-    model: injectedModel,
-    classListArray,
-    container: modalContent
-  });
+    const iframe = await new ModalIframe({
+        name,
+        url,
+        model: injectedModel,
+        classListArray,
+        container: modalContent,
+    });
 
-  const closeModal = (...args) => {
-    modalContainer.classList.remove('is-visible');
-    modalOverlay.classList.remove('is-visible');
-    setTimeout(() => {
-      document.body.style.overflow = 'auto';
+    const closeModal = (...args) => {
+        modalContainer.classList.remove('is-visible');
+        modalOverlay.classList.remove('is-visible');
+        setTimeout(() => {
+            document.body.style.overflow = 'auto';
 
-      const list = modalOverlay.children;
-      for (let i = 0; i < list.length; i += 1) {
-        list[i].remove();
-      }
+            const list = modalOverlay.children;
+            for (let i = 0; i < list.length; i += 1) {
+                list[i].remove();
+            }
 
-      modalOverlay.remove();
-      close(...args);
-      iframe.destroy();
-    }, 300);
-  };
+            modalOverlay.remove();
+            close(...args);
+            iframe.destroy();
+        }, 300);
+    };
 
-  iframe.bindEventListeners({
-    close: closeModal,
-    loader: state.loader
-  });
+    iframe.bindEventListeners({
+        close: closeModal,
+        loader: state.loader,
+    });
 
-  if (!isRedirect) {
-    closeButton.addEventListener('click', closeModal);
-  }
+    if (!isRedirect) {
+        closeButton.addEventListener('click', closeModal);
+    }
 
-  iframe.component?.call('route', {
-    name: 'approval-url'
-  });
+    iframe.component?.call('route', {
+        name: 'approval-url',
+    });
 
-  return iframe;
+    return iframe;
 }

package/src/views/result.js

@@ -3,22 +3,22 @@ import iframes from '../state/iframes';
 import { mountForm } from './form';
 
 export async function mountResult({ payload }) {
-  const iframe = iframes.form;
+    const iframe = iframes.form;
 
-  if(!iframe) {
-    await mountForm();
-  }
+    if (!iframe) {
+        await mountForm();
+    }
 
-  const modelSafeState = state.toModel();
-  const model = {
-    options: modelSafeState.options,
-    mainStyleVars: modelSafeState.mainStyleVars,
-    [state.options.transactionType]: payload
-  };
+    const modelSafeState = state.toModel();
+    const model = {
+        options: modelSafeState.options,
+        mainStyleVars: modelSafeState.mainStyleVars,
+        [state.options.transactionType]: payload,
+    };
 
-  iframe?.component?.call('route', {
-    name: 'result'
-  });
+    iframe?.component?.call('route', {
+        name: 'result',
+    });
 
-  iframe?.component?.call('update', model);
+    iframe?.component?.call('update', model);
 }

package/src/views/summary.js

@@ -5,35 +5,34 @@ import { itemsUpdatedHandler } from './common/iframe/events/update-items-handler
 import { fetchSummary } from '../storefront/summary';
 
 export async function mountSummary() {
-  const modelSafeState = state.toModel();
-  const model = {
-    options: modelSafeState.options,
-    data: modelSafeState.data,
-    mainStyleVars: modelSafeState.mainStyleVars,
-  };
-  const { paymentMethodsUrl } = state.options?._computed;
+    const modelSafeState = state.toModel();
+    const model = {
+        options: modelSafeState.options,
+        data: modelSafeState.data,
+        mainStyleVars: modelSafeState.mainStyleVars,
+    };
+    const paymentMethodsUrl = state.options?._computed?.paymentMethodsUrl;
 
-  const name = 'rebilly-instruments-summary'
-  const iframe = await new ViewIframe({
-    name,
-    url: `${paymentMethodsUrl}?name=${name}`,
-    container: state.summary,
-    model,
-    route: {
-      name: 'summary'
-    }
-  });
-  iframe.bindEventListeners({ loader: state.loader });
-  iframes.summary = iframe;
-  itemsUpdatedHandler(iframe);
+    const name = 'rebilly-instruments-summary';
+    const iframe = await new ViewIframe({
+        name,
+        url: `${paymentMethodsUrl}?name=${name}`,
+        container: state.summary,
+        model,
+        route: {
+            name: 'summary',
+        },
+    });
+    iframe.bindEventListeners({ loader: state.loader });
+    iframes.summary = iframe;
+    itemsUpdatedHandler(iframe);
 
-  return {
-    then: (callback) => callback()
-  }
+    return {
+        then: (callback) => callback(),
+    };
 }
 
 export async function updateSummary({ instrument } = {}) {
-  await fetchSummary({ data: instrument });
-  state.updateModel();
+    await fetchSummary({ data: instrument });
+    state.updateModel();
 }
-

package/tests/async-utilities.js

@@ -1,22 +1,22 @@
-import { sleep } from '@/utils'
+import { sleep } from '@/utils';
 
 export async function avoidUnhandledPromises() {
-  // We need this sleep to avoid unhandled promises.
-  // This hack will be removed if we refactor the current design.
-  await sleep(100)
+    // We need this sleep to avoid unhandled promises.
+    // This hack will be removed if we refactor the current design.
+    await sleep(100);
 }
 
 /**
  * @param {Promise} promise
  */
 export async function expectConfigurationError(promise) {
-  const NoConfigOrOptionsError =
-    'Could not use Rebilly Instruments mount options to fetch Rebilly data'
-  let error = null
-  try {
-    await promise
-  } catch (e) {
-    error = e
-  }
-  expect(error.message).toBe(NoConfigOrOptionsError)
+    const NoConfigOrOptionsError =
+        'Could not use Rebilly Instruments mount options to fetch Rebilly data';
+    let error = null;
+    try {
+        await promise;
+    } catch (e) {
+        error = e;
+    }
+    expect(error.message).toBe(NoConfigOrOptionsError);
 }

package/tests/mocks/framepay-mock.js

@@ -1,14 +1,15 @@
 import Emitter from 'component-emitter';
 
 export const createFramepayMock = () => {
-    const framepayBus =  new Emitter();
+    const framepayBus = new Emitter();
     const framepayMock = {
-      initialize: vi.fn(),
-      digitalWallet: {
-        mount: vi.fn()
-      },
-      on: (eventType, delegate = null) => framepayBus.on(eventType, delegate),
-      simulateEvent: (eventType, payload) => framepayBus.emit(eventType, payload) 
+        initialize: vi.fn(),
+        digitalWallet: {
+            mount: vi.fn(),
+        },
+        on: (eventType, delegate = null) => framepayBus.on(eventType, delegate),
+        simulateEvent: (eventType, payload) =>
+            framepayBus.emit(eventType, payload),
     };
     return framepayMock;
-}
+};

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

@@ -3,7 +3,9 @@ import { ok, get } from 'msw-when-then';
 export const rebillyURL = '*';
 
 export const initRebillyApiMocks = (when) => {
-  when(get(`${rebillyURL}/payment-methods`)).thenReturn((() => {
-    return ok([])
-  })());
+    when(get(`${rebillyURL}/payment-methods`)).thenReturn(
+        (() => {
+            return ok([]);
+        })(),
+    );
 };