@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

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

@@ -2,16 +2,18 @@
 import { collectData } from '@rebilly/risk-data-collector';
 import { getPaymentMethods } from './get-payment-methods';
 import { mountExpressMethods } from './mount-express-methods';
-import { processDigitalWalletOptions } from './process-digital-wallet-options';
+import { generateDigitalWallet } from './generate-digital-wallet';
 import { MountMethods } from './mount-methods';
-import { FetchSummaryData } from '../../functions/mount/fetch-summary-data';
-import Events from '../../events';
+import { fetchData } from '../../functions/mount/fetch-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' : ''}">
+  <div class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
+    <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>
@@ -21,112 +23,81 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 </div>
 `;
 
-export function MountMethodSelector(
-  {
-    readyToPay,
-    summary,
-    plans,
-    products,
-    mainStyle
-  } = {}) {
-  const {EXPRESS_METHODS, METHODS} = getPaymentMethods.call(this, readyToPay);
-
-  this.form.innerHTML += baseMethodSelectorHTML(this.options.paymentInstruments.compactExpressInstruments);
-
-  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods');
-  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 digitalWallet = {
-    transactionData: {
-      amount: summary.total,
-      currency: summary.currency,
-      countryCode: this.options.intent.countryCode,
-      label: this.configs.websiteId
-    },
-    ...processDigitalWalletOptions(this.options, EXPRESS_METHODS)
-  }
-
-  this.configs = {
-    ...this.configs,
-    digitalWallet
-  };
-
-  function initializeFramepay() {
-    if (Rebilly.initialized) {
-      mountExpressMethods.call(this, {
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER,
-      });
-    } else {
-      Rebilly.initialize({
-        publishableKey: this.configs.publishableKey,
-        organizationId: this.configs.organizationId,
-        digitalWallet,
-      });
-  
-    Rebilly.on('ready', () => {
-      mountExpressMethods.call(this, {
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER,
-      })
-    });
-
-    Rebilly.on('token-ready', (data) => {
-      Events.instrumentReady.dispatch(data);
-    });
-    }
-  }
-
-  if (METHODS.length) {    
-    MountMethods.call(this, {
+export 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'
+  );
+
+  state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
+
+  if (METHODS.length) {
+    MountMethods({
+      state,
       METHODS_CONTAINER,
-      METHODS,
-      mainStyle,
-      plans,
-      products
+      METHODS
     });
   } else {
     METHODS_CONTAINER.style.display = 'none';
   }
 
-  if (window.Rebilly && EXPRESS_METHODS.length) {
-    initializeFramepay.call(this);
+  if (EXPRESS_METHODS.length) {
+    mountExpressMethods({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
   } else {
-    EXPRESS_METHODS_CONTAINER.style.display = 'none';
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
   }
 
-  this.translate.translateItems();
+  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';
+  }
+
+  state.translate.translateItems();
 
-  this.loader.stopLoading({id: 'initForm'});
-};
+  state.loader.stopLoading({ id: 'initForm' });
+}
 
-export async function UpdateMethodSelector({mainStyle} = {}) {
-  this.loader.startLoading({id: 'initForm'});
-  const {riskMetadata} = await collectData();
+export async function updateMethodSelector({ state }) {
+  state.loader.startLoading({ id: 'initForm' });
+  const { riskMetadata } = await collectData();
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await FetchSummaryData.call(this, { riskMetadata });
+  state.data = await fetchData({ state, riskMetadata });
 
-  this.formOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products,
-    mainStyle,
-  };
+  if (state.data.transaction && state.data.transaction?.type === 'setup') {
+    state.options.transactionType = 'setup';
+  }
 
-  this.form.querySelectorAll(':not(.rebilly-instruments-confirmation)').forEach(element => {
-    if (!element.classList.contains('rebilly-instruments-loader')
-      && !element.classList.contains('rebilly-instruments-loader-spinner')) {
-      element.remove();
-    }
-  });
+  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.call(this, this.formOptions);
-}
+  mountMethodSelector({ state });
+}

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

@@ -2,109 +2,119 @@ 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 } from './index';
+import { mountMethodSelector, updateMethodSelector } from './index';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
+import { MockStorefront } from 'tests/mocks/storefront-mock';
+import { DataInstance } from '../../functions/mount/fetch-data';
+import setupOptions from '../../functions/mount/setup-options';
 
 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 = {},
+      translate = new Translate()
     } = {}) {
-      this.configs = configs;
-      this.options = options;
+      this.options = setupOptions({options});
       this.form = form;
       this.loader = loader;
       this.translate = translate;
-      this.zoidComponents = zoidComponents;
-    }
-
-    mountMethodSelector(readyToPayAndSummary, ...args) {
-      this.loader.DOM.form = this.form;
-      return MountMethodSelector.apply(this, args.concat(readyToPayAndSummary));
+      this.storefront = MockStorefront();
+      this.data = new DataInstance({
+        state: {options},
+        previewPurchase: 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
+        }),
+        readyToPay: [
+          new ReadyToPayModel({
+            method: 'payment-card',
+            feature: {
+              name: 'Google Pay',
+              merchantName: 'google-pay-merchant-name',
+              merchantOrigin: 'google-pay-merchant-origin'
+            },
+            brands: ['Visa'],
+            filters: []
+          }),
+        ]
+      });
     }
   }
 
   const options = {
-    intent: {
-      countryCode: 'US',
-      items: [
-        {
-          planId: 'my-awesome-product',
-          quantity: 1,
-          thumbnail: '',
-        },
-        {
-          planId: 'awesome-t-shirt',
-          quantity: 2,
-          thumbnail: '',
-        }
-      ]
-    },
-    paymentInstruments: {
-      compactExpressInstruments: true
-    },
-  };
-
-  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(
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    items: [
+      {
+        planId: 'my-awesome-product',
+        quantity: 1
+      },
       {
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay',
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        brands: ['Visa'],
-        filters: []
+        planId: 'awesome-t-shirt',
+        quantity: 2
       }
-    )
-  ];
-
-  const configs = {
-    websiteId: 'test-website-id'
+    ],
+    _computed: {
+      paymentMethodsUrl: ''
+    }
   };
 
-  it('should inject the proper HTML for express methods', () => {
-    const mountSummaryInstance = new TestMountMethodSelectorInstance({configs, options});
-    mountSummaryInstance.mountMethodSelector({summary: summaryData, readyToPay: readyToPayData});
+  it('should inject the proper HTML for express methods', async () => {
+    const mountSummaryInstance = new TestMountMethodSelectorInstance({
+      options
+    });
+
+    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
+
+    mountMethodSelector({ state: mountSummaryInstance });
 
     const form = document.querySelector('.rebilly-instruments-form');
     expect(form).toMatchSnapshot();
+    await avoidUnhandledPromises();
+  });
+
+  it('should allow updating method selector', async () => {
+    const state = new TestMountMethodSelectorInstance({
+      options
+    });
+
+    state.loader.DOM.form = state.form;
+
+    await updateMethodSelector({
+      state,
+      mainStyle: 'any main style'
+    });
   });
-})
+});

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

@@ -1,77 +1,53 @@
-/* eslint-disable no-undef */
-import { MethodIframe } from '../common/iframe';
+
+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';
 
-async function mountGooglePay({
-  methodId,
+export function mountExpressMethods({
+  state,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
 }) {
-  const container = document.querySelector('.rebilly-instruments-express-methods');
-
-  const {paymentMethodsUrl} = this.options._computed;
+  // 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);
 
-  const model = {
-    configs: this.configs,
-    options: this.options,
-  };
-  const iframe = await new MethodIframe({
-    name: methodId,
-    url: `${paymentMethodsUrl}/${methodId}`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: this.loader
+    EXPRESS_METHODS_CONTAINER.innerHTML += `
+      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
+    `;
   });
-  this.iframeComponents.push(iframe);
-}
-
-function mountApplePay({
-  EXPRESS_METHODS_CONTAINER,
-  METHOD_ID, 
-  METHOD_TYPE,
-}) {
-  EXPRESS_METHODS_CONTAINER.innerHTML += `
-    <div id="rebilly-instruments-${METHOD_ID}" data-rebilly-instruments-express-type="${METHOD_TYPE}"></div>
-  `;
-  Rebilly.applePay.mount(`#rebilly-instruments-${METHOD_ID}`);
 
-  Rebilly.on('token-ready', (token) => {
-    dispatch('instrument-ready', token);
-  });
-}
 
-function mountPaypal() {
-  console.log('PayPal - work in progress');
-  this.loader.stopLoading({id: 'paypal-express'});
-}
-
-const browserIsSafari = () => window.ApplePaySession;
-
-export function mountExpressMethods({
-  EXPRESS_METHODS,
-  EXPRESS_METHODS_CONTAINER,
-}) {
   EXPRESS_METHODS.forEach((expressMethod) => {
-    const {method, feature} = expressMethod;
-    const methodData = getMethodData(expressMethod);
-
-    if (method === 'paypal') {
-      mountPaypal.call(this);
-    };
+    const { method, feature } = expressMethod;
+    const { METHOD_ID, METHOD_TYPE } = getMethodData(expressMethod);
 
     if (feature?.name === 'Google Pay') {
-      mountGooglePay.call(this, {
-        methodId: methodData.METHOD_ID
+      mountGooglePay({
+        state,
+        METHOD_ID
       });
     }
 
-    if (feature?.name === 'Apple Pay' && browserIsSafari()) {
-      mountApplePay.call(this, {
-        EXPRESS_METHODS_CONTAINER,
-        ...methodData,
+    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,
       });
-    } else {
-      this.loader.stopLoading({id: 'payment-card-express'});
     }
   });
 }

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

@@ -1,30 +1,35 @@
 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
 }) {
-  METHODS.forEach(async method => {
-    const { METHOD_ID: methodId, METHOD_TYPE: methodType } = getMethodData(method);
-    const { paymentMethodsUrl } = this.options._computed || 'https://www.example.com';
+  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' && !this.options.paymentInstruments[methodType]?.popup;
+    const isiFrame =
+      methodId === 'payment-card' &&
+      !state.options.paymentInstruments[methodType]?.popup;
     const model = {
-      configs: this.configs,
-      options: this.options,
-      mainStyle,
-      method,
-      plans,
-      products,
+      options: state.options,
+      mainStyle: state.mainStyle,
+      plans: state.data.plans,
+      products: state.data.products,
+      method
     };
 
-    METHODS_CONTAINER.insertAdjacentHTML('beforeend', `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`);
+    METHODS_CONTAINER.insertAdjacentHTML(
+      'beforeend',
+      `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+    );
     const container = document.querySelector(`#${selector}`);
 
     if (isiFrame) {
@@ -35,22 +40,28 @@ export function MountMethods({
         model
       });
       iframe.bindEventListeners({
-        loader: this.loader,
+        loader: state.loader,
         id: method.method
       });
-      this.iframeComponents.push(iframe);
+      state.iframeComponents.push(iframe);
     } else {
-      container.insertAdjacentHTML('beforeend', `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${method.method}">${camelCase(method.method)}</button>`);
+      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 this._mountModal.call(this, {
+        const iframe = await mountModal({
+          state,
           name: methodId,
           url: `${paymentMethodsUrl}/${methodId}`,
           model
         });
-        this.iframeComponents.push(iframe);
+        state.iframeComponents.push(iframe);
       });
-      this.loader.stopLoading({id: method.method});
+      state.loader.stopLoading({ id: method.method });
     }
   });
 }