@rebilly/instruments 1.0.2-beta.9 → 3.0.0-beta.0

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 });
     }
   });
 }

package/src/views/modal.js

@@ -2,46 +2,59 @@ 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' : ''}">
+    <div class="rebilly-instruments-modal-container ${
+      method ? `rebilly-instruments-${method}` : ''
+    } ${isRedirect ? 'is-redirect' : ''}">
+      ${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({
+export async function mountModal({
   name = '',
   url = '',
   model = {},
   classListArray = [],
-  close = () => {}
+  close = () => {},
+  state = null
 } = {}) {
   const method = model?.method?.method;
   const isRedirect = name === 'rebilly-instruments-approval-url';
-  this.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');
+  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);
-  this.loader.addDOMElement({section: 'modal', el: modalContent});
-  this.loader.startLoading({section: 'modal', id: 'modal-content'});
+  state.loader.addDOMElement({ section: 'modal', el: modalContent });
+  state.loader.startLoading({ section: 'modal', id: 'modal-content' });
 
   const injectedModel = {
-    configs: this.configs,
-    options: this.options,
+    options: state.options,
     ...model
-  }
+  };
 
   const iframe = await new ModalIframe({
+    state,
     name,
     url,
     model: injectedModel,
@@ -54,20 +67,21 @@ export async function MountModal({
     modalOverlay.classList.remove('is-visible');
     setTimeout(() => {
       document.body.style.overflow = 'auto';
-      modalOverlay.children.forEach(child => child.remove());
+      modalOverlay.children.forEach((child) => child.remove());
       modalOverlay.remove();
       close(...args);
-      iframe.component.destroy();
+      iframe.destroy();
     }, 300);
-  }
-  
+  };
+
   iframe.bindEventListeners({
     close: closeModal,
-    loader: this.loader
+    loader: state.loader
   });
 
-  modalOverlay.addEventListener('click', closeModal);
-  closeButton.addEventListener('click', closeModal);
+  if (!isRedirect) {
+    closeButton.addEventListener('click', closeModal);
+  }
 
   return iframe;
-}
+}

package/src/views/result.js

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