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

package/src/views/errors.js

@@ -1,95 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,195 +0,0 @@
-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
-    }));
-  });
-});