@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

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

@@ -17,7 +17,7 @@ var _generateDigitalWallet = require("./generate-digital-wallet");
 
 var _mountMethods = require("./mount-methods");
 
-var _fetchSummaryData = require("../../functions/mount/fetch-summary-data");
+var _fetchData = require("../../functions/mount/fetch-data");
 
 /* eslint-disable no-undef */
 const baseMethodSelectorHTML = compactExpressInstruments => `
@@ -38,31 +38,21 @@ const baseMethodSelectorHTML = compactExpressInstruments => `
 exports.baseMethodSelectorHTML = baseMethodSelectorHTML;
 
 function mountMethodSelector({
-  state,
-  formOptions
+  state
 }) {
-  const {
-    readyToPay,
-    summary,
-    plans,
-    products,
-    mainStyle
-  } = formOptions;
   const {
     EXPRESS_METHODS,
     METHODS
   } = (0, _getPaymentMethods.getPaymentMethods)({
-    methods: readyToPay,
     state
   });
-  state.form.innerHTML += baseMethodSelectorHTML(state.options.paymentInstruments.compactExpressInstruments);
+  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 = (0, _generateDigitalWallet.generateDigitalWallet)({
     state,
-    summary,
     EXPRESS_METHODS
   });
 
@@ -70,10 +60,7 @@ function mountMethodSelector({
     (0, _mountMethods.MountMethods)({
       state,
       METHODS_CONTAINER,
-      METHODS,
-      mainStyle,
-      plans,
-      products
+      METHODS
     });
   } else {
     METHODS_CONTAINER.style.display = 'none';
@@ -89,6 +76,15 @@ function mountMethodSelector({
     EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
   }
 
+  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();
   state.loader.stopLoading({
     id: 'initForm'
@@ -96,38 +92,31 @@ function mountMethodSelector({
 }
 
 async function updateMethodSelector({
-  state,
-  mainStyle
+  state
 }) {
+  var _state$data$transacti;
+
   state.loader.startLoading({
     id: 'initForm'
   });
   const {
     riskMetadata
   } = await (0, _riskDataCollector.collectData)();
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await (0, _fetchSummaryData.fetchSummaryData)({
+  state.data = await (0, _fetchData.fetchData)({
     state,
     riskMetadata
   });
-  const formOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products,
-    mainStyle
-  };
+
+  if (state.data.transaction && ((_state$data$transacti = state.data.transaction) === null || _state$data$transacti === void 0 ? void 0 : _state$data$transacti.type) === 'setup') {
+    state.options.transactionType = 'setup';
+  }
+
   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
+    state
   });
 }

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

@@ -14,6 +14,10 @@ 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', () => {
@@ -30,11 +34,53 @@ describe('Summary component', () => {
       loader = new _loader.Loader(),
       translate = new _i18n.Translate()
     } = {}) {
-      this.options = options;
+      this.options = (0, _setupOptions.default)({
+        options
+      });
       this.form = form;
       this.loader = loader;
       this.translate = translate;
       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: []
+        })]
+      });
     }
 
   }
@@ -44,73 +90,22 @@ describe('Summary component', () => {
     countryCode: 'US',
     items: [{
       planId: 'my-awesome-product',
-      quantity: 1,
-      thumbnail: ''
+      quantity: 1
     }, {
       planId: 'awesome-t-shirt',
-      quantity: 2,
-      thumbnail: ''
+      quantity: 2
     }],
-    paymentInstruments: {
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonHeight: '44px',
-          buttonType: 'short'
-        }
-      },
-      compactExpressInstruments: true
-    },
     _computed: {
       paymentMethodsUrl: ''
     }
   };
-  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'
-    }, {
-      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.default({
-    method: 'payment-card',
-    feature: {
-      name: 'Google Pay',
-      merchantName: 'google-pay-merchant-name',
-      merchantOrigin: 'google-pay-merchant-origin'
-    },
-    brands: ['Visa'],
-    filters: []
-  })];
   it('should inject the proper HTML for express methods', async () => {
     const mountSummaryInstance = new TestMountMethodSelectorInstance({
       options
     });
     mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
     (0, _index.mountMethodSelector)({
-      state: mountSummaryInstance,
-      formOptions: {
-        summary: summaryData,
-        readyToPay: readyToPayData
-      }
+      state: mountSummaryInstance
     });
     const form = document.querySelector('.rebilly-instruments-form');
     expect(form).toMatchSnapshot();

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

@@ -18,10 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function MountMethods({
   state,
   METHODS_CONTAINER,
-  METHODS,
-  mainStyle,
-  plans,
-  products
+  METHODS
 }) {
   METHODS.forEach(async method => {
     var _state$options$paymen;
@@ -37,10 +34,10 @@ function MountMethods({
     const isiFrame = methodId === 'payment-card' && !((_state$options$paymen = state.options.paymentInstruments[methodType]) !== null && _state$options$paymen !== void 0 && _state$options$paymen.popup);
     const model = {
       options: state.options,
-      mainStyle,
-      method,
-      plans,
-      products
+      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}`);

package/dist/views/modal.js

@@ -10,9 +10,11 @@ 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>
@@ -53,6 +55,7 @@ async function mountModal({
     ...model
   };
   const iframe = await new _iframe.ModalIframe({
+    state,
     name,
     url,
     model: injectedModel,
@@ -76,7 +79,10 @@ async function mountModal({
     close: closeModal,
     loader: state.loader
   });
-  modalOverlay.addEventListener('click', closeModal);
-  closeButton.addEventListener('click', closeModal);
+
+  if (!isRedirect) {
+    closeButton.addEventListener('click', closeModal);
+  }
+
   return iframe;
 }

package/dist/views/result.js

@@ -10,8 +10,7 @@ var _iframe = require("./common/iframe");
 var _renderUtilities = require("./common/render-utilities");
 
 async function mountResult({
-  purchase,
-  mainStyle,
+  payload,
   state
 }) {
   const resultContainerClassName = 'rebilly-instruments-result';
@@ -25,8 +24,8 @@ async function mountResult({
   } = state.options._computed;
   const model = {
     options: state.options,
-    mainStyle,
-    purchase
+    mainStyle: state.mainStyle,
+    [state.options.transactionType]: payload
   };
   const iframe = await new _iframe.ViewIframe({
     name: 'rebilly-instruments-result',

package/dist/views/summary.js

@@ -3,108 +3,172 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.lineItemHTML = lineItemHTML;
+exports.summaryBreakdownHTML = summaryBreakdownHTML;
 exports.mountSummary = mountSummary;
 exports.updateSummary = updateSummary;
-exports.baseSummaryHTML = void 0;
 
 var _riskDataCollector = require("@rebilly/risk-data-collector");
 
 var _utils = require("../utils");
 
-var _fetchSummaryData = require("../functions/mount/fetch-summary-data");
+var _fetchData = require("../functions/mount/fetch-data");
 
-const baseSummaryHTML = `
-  <div class="rebilly-instruments-content">
-    <div class="rebilly-instruments-summary-line-items"></div>
-    <div class="rebilly-instruments-summary-breakdown"></div>
-  </div>
-`;
-exports.baseSummaryHTML = baseSummaryHTML;
-
-function mountSummary({
+function lineItemHTML({
   state,
-  summaryOptions
+  lineItem
 }) {
+  var _state$data;
+
   const {
-    summary,
     products
-  } = summaryOptions;
-  state.summary.innerHTML += baseSummaryHTML;
-  const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
-  const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown');
+  } = state.data;
+  const {
+    currency = null
+  } = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.amountAndCurrency;
   const {
-    items: optionItems
+    items: optionItems = []
   } = state.options;
   const hasThumbnails = optionItems === null || optionItems === void 0 ? void 0 : optionItems.some(optionItem => optionItem.thumbnail);
   const {
-    lineItems,
-    currency,
-    discountsAmount,
-    shippingAmount,
-    subtotalAmount,
-    taxAmount,
-    total
-  } = summary;
-  lineItems.forEach(lineItem => {
-    const {
-      thumbnail
-    } = optionItems.find(optionItem => optionItem.planId === lineItem.planId);
-    const {
-      name
-    } = products.find(product => product.id === lineItem.productId);
-    itemsContainer.innerHTML += `
-      <div class="rebilly-instruments-summary-line-item">
-        ${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>
-            ${lineItem.description ? `
-              <p class="rebilly-instruments-summary-line-item-synopsis-description">${lineItem.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>
-          <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">${(0, _utils.formatCurrency)(lineItem.unitPrice, currency)}</p>
-        </div>
+    thumbnail = null
+  } = optionItems.find(optionItem => optionItem.planId === lineItem.planId) || {};
+  const {
+    name
+  } = products.find(product => product.id === lineItem.productId);
+  return `
+    <div class="rebilly-instruments-summary-line-item">
+      ${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>
+          ${lineItem.description ? `
+            <p class="rebilly-instruments-summary-line-item-synopsis-description">${lineItem.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>
+        <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">${(0, _utils.formatCurrency)(lineItem.unitPrice, currency)}</p>
       </div>
-    `;
-  });
-  summaryBreakdown.innerHTML = `
-    <table>
-      <colgroup>
-        <col>
-        <col>
-      </colgroup>
-      <tr class="rebilly-instruments-summary-breakdown-sub-total">
-        <td data-rebilly-i18n="summary.subTotal">Sub Total</td>
-        <td>${(0, _utils.formatCurrency)(subtotalAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-discounts">
-        <td data-rebilly-i18n="summary.discounts">Discounts</td>
-        <td>${(0, _utils.formatCurrency)(discountsAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-taxes">
-        <td data-rebilly-i18n="summary.taxes">Taxes</td>
-        <td>${(0, _utils.formatCurrency)(taxAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-taxes">
-        <td data-rebilly-i18n="summary.shipping">Shipping</td>
-        <td>${(0, _utils.formatCurrency)(shippingAmount, currency)}</td>
-      </tr>
-    </table>
-    <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>${(0, _utils.formatCurrency)(total, currency)}
-      </p>
     </div>
   `;
+}
+
+function summaryBreakdownHTML({
+  state,
+  element
+}) {
+  const {
+    amount = null,
+    currency = null,
+    discountsAmount = null,
+    shippingAmount = null,
+    subtotalAmount = null,
+    taxAmount = null
+  } = { ...state.data.amountAndCurrency,
+    ...state.data.summaryItems
+  };
+  let table = null;
+  [{
+    label: 'Sub Total',
+    class: 'sub-total',
+    i18n: 'summary.subTotal',
+    value: subtotalAmount,
+    show: true
+  }, {
+    label: 'Discounts',
+    class: 'discounts',
+    i18n: 'summary.discounts',
+    value: discountsAmount,
+    show: discountsAmount > 0
+  }, {
+    label: 'Taxes',
+    class: 'taxes',
+    i18n: 'summary.taxes',
+    value: taxAmount,
+    show: true
+  }, {
+    label: 'Shipping',
+    class: 'shipping',
+    i18n: 'summary.shipping',
+    value: shippingAmount,
+    show: state.data.isShippingRequired
+  }].filter(({
+    value
+  }) => value !== null).forEach(item => {
+    if (!table) {
+      table = document.createElement('table');
+      table.insertAdjacentHTML('beforeend', `
+        <colgroup>
+          <col>
+          <col>
+        </colgroup>
+      `);
+    }
+
+    if (item.show) {
+      const row = document.createElement('tr');
+      row.setAttribute('class', `rebilly-instruments-summary-breakdown-${item.class}`);
+      row.insertAdjacentHTML('beforeend', `
+        <td data-rebilly-i18n="${item.i18n}">${item.label}</td>
+        <td>${(0, _utils.formatCurrency)(item.value, currency)}</td>
+      `);
+      table.appendChild(row);
+    }
+  });
+
+  if (table) {
+    element.appendChild(table);
+  }
+
+  const totalElement = document.createElement('div');
+  totalElement.setAttribute('class', 'rebilly-instruments-summary-breakdown-total');
+  totalElement.insertAdjacentHTML('beforeend', `
+    <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>
+      ${(0, _utils.formatCurrency)(amount, currency)}
+    <p>
+  `);
+  element.appendChild(totalElement);
+  return element;
+}
+
+async function mountSummary({
+  state
+}) {
+  const contentContainer = document.createElement('div');
+  contentContainer.setAttribute('class', 'rebilly-instruments-content');
+  const lineItems = state.data.summaryLineItems;
+
+  if (lineItems) {
+    const lineItemsElement = document.createElement('div');
+    lineItemsElement.setAttribute('class', 'rebilly-instruments-summary-line-items');
+    lineItems.forEach(lineItem => {
+      lineItemsElement.insertAdjacentHTML('beforeend', lineItemHTML({
+        state,
+        lineItem
+      }));
+    });
+    contentContainer.appendChild(lineItemsElement);
+  }
+
+  const summaryBreakdownElement = document.createElement('div');
+  summaryBreakdownElement.setAttribute('class', 'rebilly-instruments-summary-breakdown');
+  contentContainer.appendChild(summaryBreakdownHTML({
+    state,
+    element: summaryBreakdownElement
+  }));
+  state.summary.appendChild(contentContainer);
+  state.summary.style.minHeight = '';
   state.translate.translateItems();
   state.loader.stopLoading({
     section: 'summary',
@@ -116,6 +180,8 @@ async function updateSummary({
   state,
   instrument = null
 }) {
+  var _state$data$transacti;
+
   state.loader.startLoading({
     section: 'summary',
     id: 'initSummary'
@@ -131,26 +197,19 @@ async function updateSummary({
     };
   }
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await (0, _fetchSummaryData.fetchSummaryData)({
+  state.data = await (0, _fetchData.fetchData)({
     riskMetadata,
     summaryPayload,
     state
   });
-  const summaryOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products
-  };
+
+  if (state.data.transaction && ((_state$data$transacti = state.data.transaction) === null || _state$data$transacti === void 0 ? void 0 : _state$data$transacti.type) === 'setup') {
+    state.options.transactionType = 'setup';
+  }
+
   const itemsContainer = state.summary.querySelector('.rebilly-instruments-content');
   itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.remove();
   mountSummary({
-    state,
-    summaryOptions
+    state
   });
 }