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

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

@@ -1,8 +1,8 @@
 "use strict";
 
-var _summaryModel = _interopRequireDefault(require("@/storefront/models/summary-model"));
+var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
 
-var _readyToPayModel = _interopRequireDefault(require("@/storefront/models/ready-to-pay-model"));
+var _readyToPayModel = _interopRequireDefault(require("../../storefront/models/ready-to-pay-model"));
 
 var _loader = require("../../loader");
 
@@ -10,6 +10,14 @@ var _i18n = require("../../i18n");
 
 var _index = require("./index");
 
+var _asyncUtilities = require("../../../tests/async-utilities");
+
+var _storefrontMock = require("../../../tests/mocks/storefront-mock");
+
+var _fetchData = require("../../functions/mount/fetch-data");
+
+var _setupOptions = _interopRequireDefault(require("../../functions/mount/setup-options"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Summary component', () => {
@@ -21,93 +29,96 @@ describe('Summary component', () => {
 
   class TestMountMethodSelectorInstance {
     constructor({
-      configs = {},
       options = {},
       form = formElement,
       loader = new _loader.Loader(),
-      translate = new _i18n.Translate(),
-      zoidComponents = {}
+      translate = new _i18n.Translate()
     } = {}) {
-      this.configs = configs;
-      this.options = options;
+      this.options = (0, _setupOptions.default)({
+        options
+      });
       this.form = form;
       this.loader = loader;
       this.translate = translate;
-      this.zoidComponents = zoidComponents;
-    }
-
-    mountMethodSelector(readyToPayAndSummary, ...args) {
-      this.loader.DOM.form = this.form;
-      return _index.MountMethodSelector.apply(this, args.concat(readyToPayAndSummary));
+      this.storefront = (0, _storefrontMock.MockStorefront)();
+      this.data = new _fetchData.DataInstance({
+        state: {
+          options
+        },
+        previewPurchase: new _summaryModel.default({
+          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.default({
+          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.default({
-    currency: "USD",
-    lineItems: [{
-      type: "debit",
-      description: "My Awesome Product",
-      unitPrice: 30,
-      quantity: 1,
-      price: 30,
-      productId: "my-awesome-product",
-      planId: "my-awesome-product"
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    items: [{
+      planId: 'my-awesome-product',
+      quantity: 1
     }, {
-      type: "debit",
-      description: "Awesome T-Shirt",
-      unitPrice: 20,
-      quantity: 2,
-      price: 40,
-      productId: "my-app",
-      planId: "awesome-t-shirt"
+      planId: 'awesome-t-shirt',
+      quantity: 2
     }],
-    subtotalAmount: 70,
-    taxAmount: 0,
-    shippingAmount: 0,
-    discountsAmount: 0,
-    total: 70
-  });
-  const readyToPayData = [new _readyToPayModel.default({
-    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'
+    _computed: {
+      paymentMethodsUrl: ''
+    }
   };
-  it('should inject the proper HTML for express methods', () => {
+  it('should inject the proper HTML for express methods', async () => {
     const mountSummaryInstance = new TestMountMethodSelectorInstance({
-      configs,
       options
     });
-    mountSummaryInstance.mountMethodSelector({
-      summary: summaryData,
-      readyToPay: readyToPayData
+    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
+    (0, _index.mountMethodSelector)({
+      state: mountSummaryInstance
     });
     const form = document.querySelector('.rebilly-instruments-form');
     expect(form).toMatchSnapshot();
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
+  });
+  it('should allow updating method selector', async () => {
+    const state = new TestMountMethodSelectorInstance({
+      options
+    });
+    state.loader.DOM.form = state.form;
+    await (0, _index.updateMethodSelector)({
+      state,
+      mainStyle: 'any main style'
+    });
   });
 });

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

@@ -5,88 +5,64 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mountExpressMethods = mountExpressMethods;
 
-var _iframe = require("../common/iframe");
+var _googlePay = _interopRequireDefault(require("./express-methods/google-pay"));
 
-var _getMethodData = require("./get-method-data");
-
-/* eslint-disable no-undef */
-async function mountGooglePay({
-  methodId
-}) {
-  const container = document.querySelector('.rebilly-instruments-express-methods');
-  const {
-    paymentMethodsUrl
-  } = this.options._computed;
-  const model = {
-    configs: this.configs,
-    options: this.options
-  };
-  const iframe = await new _iframe.MethodIframe({
-    name: methodId,
-    url: `${paymentMethodsUrl}/${methodId}`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: this.loader
-  });
-  this.iframeComponents.push(iframe);
-}
+var _applePay = _interopRequireDefault(require("./express-methods/apple-pay"));
 
-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);
-  });
-}
+var _paypal = _interopRequireDefault(require("./express-methods/paypal"));
 
-function mountPaypal() {
-  console.log('PayPal - work in progress');
-  this.loader.stopLoading({
-    id: 'paypal-express'
-  });
-}
+var _getMethodData = require("./get-method-data");
 
-const browserIsSafari = () => window.ApplePaySession;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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
+    } = (0, _getMethodData.getMethodData)(expressMethod);
+    EXPRESS_METHODS_CONTAINER.innerHTML += `
+      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
+    `;
+  });
   EXPRESS_METHODS.forEach(expressMethod => {
     const {
       method,
       feature
     } = expressMethod;
-    const methodData = (0, _getMethodData.getMethodData)(expressMethod);
-
-    if (method === 'paypal') {
-      mountPaypal.call(this);
-    }
-
-    ;
+    const {
+      METHOD_ID,
+      METHOD_TYPE
+    } = (0, _getMethodData.getMethodData)(expressMethod);
 
     if ((feature === null || feature === void 0 ? void 0 : feature.name) === 'Google Pay') {
-      mountGooglePay.call(this, {
-        methodId: methodData.METHOD_ID
+      (0, _googlePay.default)({
+        state,
+        METHOD_ID
       });
     }
 
-    if ((feature === null || feature === void 0 ? void 0 : feature.name) === 'Apple Pay' && browserIsSafari()) {
-      mountApplePay.call(this, {
-        EXPRESS_METHODS_CONTAINER,
-        ...methodData
+    if ((feature === null || feature === void 0 ? void 0 : feature.name) === 'Apple Pay') {
+      (0, _applePay.default)({
+        state,
+        METHOD_ID,
+        METHOD_TYPE,
+        EXPRESS_METHODS,
+        EXPRESS_METHODS_CONTAINER
       });
-    } else {
-      this.loader.stopLoading({
-        id: 'payment-card-express'
+    }
+
+    if (method === 'paypal') {
+      (0, _paypal.default)({
+        state,
+        METHOD_ID,
+        METHOD_TYPE
       });
     }
   });

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

@@ -7,6 +7,8 @@ exports.MountMethods = MountMethods;
 
 var _lodash = _interopRequireDefault(require("lodash.camelcase"));
 
+var _modal = require("../modal");
+
 var _iframe = require("../common/iframe");
 
 var _getMethodData = require("./get-method-data");
@@ -14,14 +16,12 @@ var _getMethodData = require("./get-method-data");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function MountMethods({
+  state,
   METHODS_CONTAINER,
-  METHODS,
-  mainStyle,
-  plans,
-  products
+  METHODS
 }) {
   METHODS.forEach(async method => {
-    var _this$options$payment;
+    var _state$options$paymen;
 
     const {
       METHOD_ID: methodId,
@@ -29,16 +29,15 @@ function MountMethods({
     } = (0, _getMethodData.getMethodData)(method);
     const {
       paymentMethodsUrl
-    } = this.options._computed || 'https://www.example.com';
+    } = state.options._computed || 'https://www.example.com';
     const selector = `rebilly-instruments-${methodId}`;
-    const isiFrame = methodId === 'payment-card' && !((_this$options$payment = this.options.paymentInstruments[methodType]) !== null && _this$options$payment !== void 0 && _this$options$payment.popup);
+    const isiFrame = methodId === 'payment-card' && !((_state$options$paymen = state.options.paymentInstruments[methodType]) !== null && _state$options$paymen !== void 0 && _state$options$paymen.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>`);
     const container = document.querySelector(`#${selector}`);
@@ -51,22 +50,23 @@ 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}">${(0, _lodash.default)(method.method)}</button>`);
       const paymentCardButton = document.querySelector(`.${selector}`);
       paymentCardButton.addEventListener('click', async () => {
-        const iframe = await this._mountModal.call(this, {
+        const iframe = await (0, _modal.mountModal)({
+          state,
           name: methodId,
           url: `${paymentMethodsUrl}/${methodId}`,
           model
         });
-        this.iframeComponents.push(iframe);
+        state.iframeComponents.push(iframe);
       });
-      this.loader.stopLoading({
+      state.loader.stopLoading({
         id: method.method
       });
     }

package/dist/views/modal.js

@@ -3,33 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MountModal = MountModal;
+exports.mountModal = mountModal;
 
 var _iframe = require("./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' : ''}">
+      ${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>
 `;
 
-async function MountModal({
+async function mountModal({
   name = '',
   url = '',
   model = {},
   classListArray = [],
-  close = () => {}
+  close = () => {},
+  state = null
 } = {}) {
-  const {
-    method
-  } = model === null || model === void 0 ? void 0 : model.method;
+  var _model$method;
+
+  const method = model === null || model === void 0 ? void 0 : (_model$method = model.method) === null || _model$method === void 0 ? void 0 : _model$method.method;
   const isRedirect = name === 'rebilly-instruments-approval-url';
-  this.form.insertAdjacentHTML('beforeend', modalTemplate(isRedirect, method));
+  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');
@@ -39,20 +42,20 @@ async function MountModal({
     modalOverlay.classList.add('is-visible');
     modalContainer.classList.add('is-visible');
   }, 240);
-  this.loader.addDOMElement({
+  state.loader.addDOMElement({
     section: 'modal',
     el: modalContent
   });
-  this.loader.startLoading({
+  state.loader.startLoading({
     section: 'modal',
     id: 'modal-content'
   });
   const injectedModel = {
-    configs: this.configs,
-    options: this.options,
+    options: state.options,
     ...model
   };
   const iframe = await new _iframe.ModalIframe({
+    state,
     name,
     url,
     model: injectedModel,
@@ -68,15 +71,18 @@ async function MountModal({
       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/dist/views/result.js

@@ -3,30 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MountResult = MountResult;
+exports.mountResult = mountResult;
 
 var _iframe = require("./common/iframe");
 
 var _renderUtilities = require("./common/render-utilities");
 
-async function MountResult({
-  purchase,
-  mainStyle
+async function mountResult({
+  payload,
+  state
 }) {
   const resultContainerClassName = 'rebilly-instruments-result';
-  (0, _renderUtilities.replaceContent)(this.form, `<div class="${resultContainerClassName}"></div>`);
-  this.loader.startLoading({
+  (0, _renderUtilities.replaceContent)(state.form, `<div class="${resultContainerClassName}"></div>`);
+  state.loader.startLoading({
     id: 'result'
   });
   const container = document.querySelector(`.${resultContainerClassName}`);
   const {
     paymentMethodsUrl
-  } = this.options._computed;
+  } = 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 _iframe.ViewIframe({
     name: 'rebilly-instruments-result',
@@ -35,9 +34,7 @@ async function MountResult({
     model
   });
   iframe.bindEventListeners({
-    loader: this.loader
+    loader: state.loader
   });
-  this.iframeComponents.push(iframe);
-}
-
-;
+  state.iframeComponents.push(iframe);
+}