@rebilly/instruments 1.0.2-beta.1 → 1.0.2-beta.10

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

@@ -0,0 +1,110 @@
+/* eslint-disable no-undef */
+import { collectData } from '@rebilly/risk-data-collector';
+import { getPaymentMethods } from './get-payment-methods';
+import { mountExpressMethods } from './mount-express-methods';
+import { generateDigitalWallet } from './generate-digital-wallet';
+import { MountMethods } from './mount-methods';
+import { fetchSummaryData } from '../../functions/mount/fetch-summary-data';
+
+export const baseMethodSelectorHTML = (compactExpressInstruments) => `
+<div class="rebilly-instruments-content">
+  <div class="rebilly-instruments-method-selector">
+    <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 class="rebilly-instruments-divider">
+      <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
+    </div>
+    <div class="rebilly-instruments-methods"></div>
+  </div>
+</div>
+`;
+
+export function mountMethodSelector({ state, formOptions }) {
+  const { readyToPay, summary, plans, products, mainStyle } = formOptions;
+  const { EXPRESS_METHODS, METHODS } = getPaymentMethods({
+    methods: readyToPay,
+    state
+  });
+
+  state.form.innerHTML += baseMethodSelectorHTML(
+    state.options.paymentInstruments.compactExpressInstruments
+  );
+
+  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'
+  );
+
+  state.configs.digitalWallet = generateDigitalWallet({state, summary, EXPRESS_METHODS});
+
+  if (METHODS.length) {
+    MountMethods({
+      state,
+      METHODS_CONTAINER,
+      METHODS,
+      mainStyle,
+      plans,
+      products
+    });
+  } else {
+    METHODS_CONTAINER.style.display = 'none';
+  }
+
+  if (EXPRESS_METHODS.length) {
+    mountExpressMethods({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
+  } else {
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+  }
+
+  state.translate.translateItems();
+
+  state.loader.stopLoading({ id: 'initForm' });
+}
+
+export async function updateMethodSelector({ state, mainStyle }) {
+  state.loader.startLoading({ id: 'initForm' });
+  const { riskMetadata } = await collectData();
+
+  const {
+    readyToPay,
+    summary: summaryData,
+    plans,
+    products
+  } = await fetchSummaryData({ state, riskMetadata });
+
+  const formOptions = {
+    summary: summaryData,
+    readyToPay,
+    plans,
+    products,
+    mainStyle
+  };
+
+  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, formOptions });
+}

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

@@ -0,0 +1,146 @@
+import SummaryModel from '@/storefront/models/summary-model';
+import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
+import { Loader } from '../../loader';
+import { Translate } from '../../i18n';
+import { mountMethodSelector, updateMethodSelector } from './index';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
+import { MockStorefront } from 'tests/mocks/storefront-mock';
+
+describe('Summary component', () => {
+  let formElement;
+  beforeEach(() => {
+    formElement = document.createElement('div');
+    document.body.append(formElement);
+  });
+
+  class TestMountMethodSelectorInstance {
+    constructor({
+      configs = {},
+      options = {},
+      form = formElement,
+      loader = new Loader(),
+      translate = new Translate(),
+      zoidComponents = {}
+    } = {}) {
+      this.configs = configs;
+      this.options = options;
+      this.form = form;
+      this.loader = loader;
+      this.translate = translate;
+      this.zoidComponents = zoidComponents;
+      this.storefront = MockStorefront();
+    }
+  }
+
+  const options = {
+    intent: {
+      countryCode: 'US',
+      items: [
+        {
+          planId: 'my-awesome-product',
+          quantity: 1,
+          thumbnail: ''
+        },
+        {
+          planId: 'awesome-t-shirt',
+          quantity: 2,
+          thumbnail: ''
+        }
+      ]
+    },
+    paymentInstruments: {
+      googlePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonHeight: '44px',
+          buttonType: 'short'
+        }
+      },
+      compactExpressInstruments: true
+    },
+    _computed: {
+      paymentMethodsUrl: ''
+    }
+  };
+
+  const summaryData = new SummaryModel({
+    currency: 'USD',
+    lineItems: [
+      {
+        type: 'debit',
+        description: 'My Awesome Product',
+        unitPrice: 30,
+        quantity: 1,
+        price: 30,
+        productId: 'my-awesome-product',
+        planId: 'my-awesome-product'
+      },
+      {
+        type: 'debit',
+        description: 'Awesome T-Shirt',
+        unitPrice: 20,
+        quantity: 2,
+        price: 40,
+        productId: 'my-app',
+        planId: 'awesome-t-shirt'
+      }
+    ],
+    subtotalAmount: 70,
+    taxAmount: 0,
+    shippingAmount: 0,
+    discountsAmount: 0,
+    total: 70
+  });
+
+  const readyToPayData = [
+    new ReadyToPayModel({
+      method: 'payment-card',
+      feature: {
+        name: 'Google Pay',
+        merchantName: 'google-pay-merchant-name',
+        merchantOrigin: 'google-pay-merchant-origin'
+      },
+      brands: ['Visa'],
+      filters: []
+    })
+  ];
+
+  const configs = {
+    websiteId: 'test-website-id'
+  };
+
+  it('should inject the proper HTML for express methods', async () => {
+    const mountSummaryInstance = new TestMountMethodSelectorInstance({
+      configs,
+      options
+    });
+
+    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
+
+    mountMethodSelector({
+      state: mountSummaryInstance,
+      formOptions: {
+        summary: summaryData,
+        readyToPay: readyToPayData
+      }
+    });
+
+    const form = document.querySelector('.rebilly-instruments-form');
+    expect(form).toMatchSnapshot();
+    await avoidUnhandledPromises();
+  });
+
+  it('should allow updating method selector', async () => {
+    const state = new TestMountMethodSelectorInstance({
+      configs,
+      options
+    });
+
+    state.loader.DOM.form = state.form;
+
+    await updateMethodSelector({
+      state,
+      mainStyle: 'any main style'
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+
+import mountGooglePay from './express-methods/google-pay';
+import mountApplePay from './express-methods/apple-pay';
+import mountPaypal from './express-methods/paypal';
+import { getMethodData } from './get-method-data';
+
+export function mountExpressMethods({
+  state,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
+}) {
+  // A child div for each method must be created before mounting.
+  // Any DOM operation (innerHTML, append, etc) done on the parent div (EXPRESS_METHODS_CONTAINER) in between
+  // the two Postmate's instantiation (1 parent, 1 child) will cause the parent <-> child handshake to fail
+  EXPRESS_METHODS.forEach((expressMethod) => {
+    const { METHOD_ID } = getMethodData(expressMethod);
+
+    EXPRESS_METHODS_CONTAINER.innerHTML += `
+      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
+    `;
+  });
+
+
+  EXPRESS_METHODS.forEach((expressMethod) => {
+    const { method, feature } = expressMethod;
+    const { METHOD_ID, METHOD_TYPE } = getMethodData(expressMethod);
+
+    if (feature?.name === 'Google Pay') {
+      mountGooglePay({
+        state,
+        METHOD_ID
+      });
+    }
+
+    if (feature?.name === 'Apple Pay') {
+      mountApplePay({
+        state,
+        METHOD_ID,
+        METHOD_TYPE,
+        EXPRESS_METHODS,
+        EXPRESS_METHODS_CONTAINER
+      });
+    }
+
+    if (method === 'paypal') {
+      mountPaypal({
+        state,
+        METHOD_ID,
+        METHOD_TYPE,
+      });
+    }
+  });
+}

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

@@ -0,0 +1,71 @@
+import camelCase from 'lodash.camelcase';
+import { mountModal } from '../modal';
+import { MethodIframe } from '../common/iframe';
+import { getMethodData } from './get-method-data';
+
+export function MountMethods({
+  state,
+  METHODS_CONTAINER,
+  METHODS,
+  mainStyle,
+  plans,
+  products
+}) {
+  METHODS.forEach(async (method) => {
+    const { METHOD_ID: methodId, METHOD_TYPE: methodType } =
+      getMethodData(method);
+    const { paymentMethodsUrl } =
+      state.options._computed || 'https://www.example.com';
+
+    const selector = `rebilly-instruments-${methodId}`;
+    const isiFrame =
+      methodId === 'payment-card' &&
+      !state.options.paymentInstruments[methodType]?.popup;
+    const model = {
+      configs: state.configs,
+      options: state.options,
+      mainStyle,
+      method,
+      plans,
+      products
+    };
+
+    METHODS_CONTAINER.insertAdjacentHTML(
+      'beforeend',
+      `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+    );
+    const container = document.querySelector(`#${selector}`);
+
+    if (isiFrame) {
+      const iframe = await new MethodIframe({
+        name: methodId,
+        url: `${paymentMethodsUrl}/${methodId}`,
+        container,
+        model
+      });
+      iframe.bindEventListeners({
+        loader: state.loader,
+        id: method.method
+      });
+      state.iframeComponents.push(iframe);
+    } else {
+      container.insertAdjacentHTML(
+        'beforeend',
+        `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${
+          method.method
+        }">${camelCase(method.method)}</button>`
+      );
+      const paymentCardButton = document.querySelector(`.${selector}`);
+      paymentCardButton.addEventListener('click', async () => {
+        const iframe = await mountModal({
+          state,
+          name: methodId,
+          url: `${paymentMethodsUrl}/${methodId}`,
+          model
+        });
+        state.iframeComponents.push(iframe);
+      });
+      state.loader.stopLoading({ id: method.method });
+    }
+  });
+}

package/src/views/modal.js

@@ -0,0 +1,84 @@
+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}` : ''
+    } ${isRedirect ? 'is-redirect' : ''}">
+      <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 = () => {},
+  state = null
+} = {}) {
+  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'
+  );
+
+  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: 'modal-content' });
+
+  const injectedModel = {
+    configs: state.configs,
+    options: state.options,
+    ...model
+  };
+
+  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';
+      modalOverlay.children.forEach((child) => child.remove());
+      modalOverlay.remove();
+      close(...args);
+      iframe.destroy();
+    }, 300);
+  };
+
+  iframe.bindEventListeners({
+    close: closeModal,
+    loader: state.loader
+  });
+
+  modalOverlay.addEventListener('click', closeModal);
+  closeButton.addEventListener('click', closeModal);
+
+  return iframe;
+}

package/src/views/result.js

@@ -0,0 +1,30 @@
+import { ViewIframe } from './common/iframe';
+import { replaceContent } from './common/render-utilities';
+
+export async function mountResult({ purchase, mainStyle, state }) {
+  const resultContainerClassName = 'rebilly-instruments-result';
+  replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
+
+  state.loader.startLoading({ id: 'result' });
+
+  const container = document.querySelector(`.${resultContainerClassName}`);
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {
+    configs: state.configs,
+    options: state.options,
+    mainStyle,
+    purchase
+  };
+  const iframe = await new ViewIframe({
+    name: 'rebilly-instruments-result',
+    url: `${paymentMethodsUrl}/result`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+
+  state.iframeComponents.push(iframe);
+}

package/src/{components → views}/summary.js

@@ -1,20 +1,27 @@
 import { collectData } from '@rebilly/risk-data-collector';
 import { formatCurrency } from '../utils';
-import { FetchSummaryData } from '../functions/mount/fetch-summary-data';
+import { fetchSummaryData } from '../functions/mount/fetch-summary-data';
 
 export const baseSummaryHTML = `
-  <div class="rebilly-instruments-summary-container">
+  <div class="rebilly-instruments-content">
     <div class="rebilly-instruments-summary-line-items"></div>
     <div class="rebilly-instruments-summary-breakdown"></div>
   </div>
 `;
 
-export function MountSummary({summary, plans, products} = {}) {
-  this.summary.innerHTML += baseSummaryHTML;
-  const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
-  const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown')
-  const {intent: {items: optionItems}} = this.options;
-  const hasThumbnails = optionItems.some(optionItem => optionItem.thumbnail);
+export function mountSummary({ state, summaryOptions }) {
+  const { summary, plans, products } = summaryOptions;
+  state.summary.innerHTML += baseSummaryHTML;
+  const itemsContainer = document.querySelector(
+    '.rebilly-instruments-summary-line-items'
+  );
+  const summaryBreakdown = document.querySelector(
+    '.rebilly-instruments-summary-breakdown'
+  );
+  const {
+    intent: { items: optionItems }
+  } = state.options;
+  const hasThumbnails = optionItems?.some((optionItem) => optionItem.thumbnail);
 
   const {
     lineItems,
@@ -26,28 +33,47 @@ export function MountSummary({summary, plans, products} = {}) {
     total
   } = summary;
 
-  lineItems.forEach(lineItem => {
-    const {thumbnail} = optionItems.find(optionItem => optionItem.planId === lineItem.planId);
-    const {name} = plans.find(plan => plan.id === lineItem.planId);
-    const {description} = products.find(product => product.id === lineItem.productId);
+  lineItems.forEach((lineItem) => {
+    const { thumbnail } = optionItems.find(
+      (optionItem) => optionItem.planId === lineItem.planId
+    );
+    const { name } = plans.find((plan) => plan.id === lineItem.planId);
+    const { description } = products.find(
+      (product) => product.id === lineItem.productId
+    );
 
     itemsContainer.innerHTML += `
       <div class="rebilly-instruments-summary-line-item">
-        ${hasThumbnails ? `
+        ${
+          hasThumbnails
+            ? `
           <figure class="rebilly-instruments-summary-line-item-figure">
             ${thumbnail ? `<img src="${thumbnail}" alt="${name}">` : ''}
           </figure>
-        ` : ``}
+        `
+            : ''
+        }
         <div class="rebilly-instruments-summary-line-item-synopsis">
             <p class="rebilly-instruments-summary-line-item-synopsis-title">${name}</p>
-            <p class="rebilly-instruments-summary-line-item-synopsis-description">${description}</p>
+            ${
+              description
+                ? `
+              <p class="rebilly-instruments-summary-line-item-synopsis-description">${description}</p>
+            `
+                : ''
+            }
         </div>
         <div class="rebilly-instruments-summary-line-item-price-breakdown">
-          <p class="rebilly-instruments-summary-line-item-price-breakdown-quantity">${lineItem.quantity}</p>
+          <p class="rebilly-instruments-summary-line-item-price-breakdown-quantity">${
+            lineItem.quantity
+          }</p>
           <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>
-          <p class="rebilly-instruments-summary-line-item-price-breakdown-unit-price">${formatCurrency(lineItem.unitPrice, currency)}</p>
+          <p class="rebilly-instruments-summary-line-item-price-breakdown-unit-price">${formatCurrency(
+            lineItem.unitPrice,
+            currency
+          )}</p>
         </div>
       </div>
     `;
@@ -78,19 +104,22 @@ export function MountSummary({summary, plans, products} = {}) {
     <div class="rebilly-instruments-summary-breakdown-total">
       <p data-rebilly-i18n="summary.total">Total</p>
       <p class="rebilly-instruments-summary-breakdown-total-amount">
-        <span class="rebilly-instruments-summary-breakdown-total-amount-currency">${currency}</span>${formatCurrency(total, currency)}
+        <span class="rebilly-instruments-summary-breakdown-total-amount-currency">${currency}</span>${formatCurrency(
+    total,
+    currency
+  )}
       </p>
     </div>
   `;
-  
-  this.translate.translateItems();
 
-  this.loader.stopLoading({section: 'summary', id: 'initSummary'});
-};
+  state.translate.translateItems();
+
+  state.loader.stopLoading({ section: 'summary', id: 'initSummary' });
+}
 
-export async function UpdateSummary(instrument = null) {
-  this.loader.startLoading({section: 'summary', id: 'initSummary'});
-  const {riskMetadata} = await collectData();
+export async function updateSummary({ state, instrument = null }) {
+  state.loader.startLoading({ section: 'summary', id: 'initSummary' });
+  const { riskMetadata } = await collectData();
 
   let summaryPayload;
 
@@ -105,20 +134,23 @@ export async function UpdateSummary(instrument = null) {
     summary: summaryData,
     plans,
     products
-  } = await FetchSummaryData.call(this, {
+  } = await fetchSummaryData({
     riskMetadata,
-    summaryPayload
+    summaryPayload,
+    state
   });
 
-  this.summaryOptions = {
+  const summaryOptions = {
     summary: summaryData,
     readyToPay,
     plans,
-    products,
+    products
   };
 
-  const itemsContainer = document.querySelector('.rebilly-instruments-summary-container');
-  itemsContainer.remove();
+  const itemsContainer = state.summary.querySelector(
+    '.rebilly-instruments-content'
+  );
+  itemsContainer?.remove();
 
-  MountSummary.call(this, this.summaryOptions);
-}
+  mountSummary({ state, summaryOptions });
+}