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

package/dist/views/summary.js

@@ -3,121 +3,180 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MountSummary = MountSummary;
-exports.UpdateSummary = UpdateSummary;
-exports.baseSummaryHTML = void 0;
+exports.lineItemHTML = lineItemHTML;
+exports.summaryBreakdownHTML = summaryBreakdownHTML;
+exports.mountSummary = mountSummary;
+exports.updateSummary = updateSummary;
 
 var _riskDataCollector = require("@rebilly/risk-data-collector");
 
 var _utils = require("../utils");
 
-var _fetchSummaryData = require("../functions/mount/fetch-summary-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({
-  summary,
-  plans,
-  products
-} = {}) {
-  this.summary.innerHTML += baseSummaryHTML;
-  const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
-  const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown');
+var _fetchData = require("../functions/mount/fetch-data");
+
+function lineItemHTML({
+  state,
+  lineItem
+}) {
+  var _state$data;
+
   const {
-    intent: {
-      items: optionItems
-    }
-  } = this.options;
-  const hasThumbnails = optionItems.some(optionItem => optionItem.thumbnail);
+    products
+  } = state.data;
   const {
-    lineItems,
-    currency,
-    discountsAmount,
-    shippingAmount,
-    subtotalAmount,
-    taxAmount,
-    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);
-    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>
-            ${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>
-          <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>
+    currency = null
+  } = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.amountAndCurrency;
+  const {
+    items: optionItems = []
+  } = state.options;
+  const hasThumbnails = optionItems === null || optionItems === void 0 ? void 0 : optionItems.some(optionItem => optionItem.thumbnail);
+  const {
+    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>
   `;
-  this.translate.translateItems();
-  this.loader.stopLoading({
+}
+
+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
+  }, {
+    label: 'Discounts',
+    class: 'discounts',
+    i18n: 'summary.discounts',
+    value: discountsAmount
+  }, {
+    label: 'Taxes',
+    class: 'taxes',
+    i18n: 'summary.taxes',
+    value: taxAmount
+  }, {
+    label: 'Shipping',
+    class: 'shipping',
+    i18n: 'summary.shipping',
+    value: shippingAmount
+  }].filter(({
+    value
+  }) => value !== null).forEach(item => {
+    if (!table) {
+      table = document.createElement('table');
+      table.insertAdjacentHTML('beforeend', `
+        <colgroup>
+          <col>
+          <col>
+        </colgroup>
+      `);
+    }
+
+    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',
     id: 'initSummary'
   });
 }
 
-;
+async function updateSummary({
+  state,
+  instrument = null
+}) {
+  var _state$data$transacti;
 
-async function UpdateSummary(instrument = null) {
-  this.loader.startLoading({
+  state.loader.startLoading({
     section: 'summary',
     id: 'initSummary'
   });
@@ -132,22 +191,19 @@ async function UpdateSummary(instrument = null) {
     };
   }
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await _fetchSummaryData.FetchSummaryData.call(this, {
+  state.data = await (0, _fetchData.fetchData)({
     riskMetadata,
-    summaryPayload
+    summaryPayload,
+    state
   });
-  this.summaryOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products
-  };
-  const itemsContainer = this.summary.querySelector('.rebilly-instruments-content');
+
+  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.call(this, this.summaryOptions);
+  mountSummary({
+    state
+  });
 }

package/dist/views/summary.spec.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _summaryModel = _interopRequireDefault(require("@/storefront/models/summary-model"));
+var _summaryModel = _interopRequireDefault(require("../storefront/models/summary-model"));
 
-var _planModel = _interopRequireDefault(require("@/storefront/models/plan-model"));
+var _planModel = _interopRequireDefault(require("../storefront/models/plan-model"));
 
-var _productModel = _interopRequireDefault(require("@/storefront/models/product-model"));
+var _productModel = _interopRequireDefault(require("../storefront/models/product-model"));
 
 var _loader = require("../loader");
 
@@ -12,6 +12,8 @@ var _i18n = require("../i18n");
 
 var _summary = require("./summary");
 
+var _fetchData = require("../functions/mount/fetch-data");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Summary component', () => {
@@ -24,93 +26,88 @@ describe('Summary component', () => {
 
   class TestMountSummaryInstance {
     constructor({
-      configs = {},
       options = {},
       summary = summaryElement,
       loader = new _loader.Loader(),
-      translate = new _i18n.Translate()
+      translate = new _i18n.Translate(),
+      data = {}
     } = {}) {
-      this.configs = configs;
       this.options = options;
       this.summary = summary;
       this.loader = loader;
       this.translate = translate;
-    }
-
-    mountSummary(summaryProductsPlans, ...args) {
-      this.loader.DOM.summary = this.summary;
-      return _summary.MountSummary.apply(this, args.concat(summaryProductsPlans));
+      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: 'test-product-1',
+            planId: 'my-awesome-product'
+          }, {
+            type: 'debit',
+            description: 'Awesome T-Shirt',
+            unitPrice: 20,
+            quantity: 2,
+            price: 40,
+            productId: 'test-product-2',
+            planId: 'awesome-t-shirt'
+          }],
+          subtotalAmount: 70,
+          taxAmount: 0,
+          shippingAmount: 0,
+          discountsAmount: 0,
+          total: 70
+        }),
+        plans: [new _planModel.default({
+          name: 'My Awesome Product',
+          id: 'my-awesome-product',
+          productId: 'test-product-1'
+        }), new _planModel.default({
+          name: 'My Awesome T-Shirt',
+          id: 'awesome-t-shirt',
+          productId: 'test-product-2'
+        })],
+        products: [new _productModel.default({
+          name: 'My Awesome Product',
+          id: 'test-product-1'
+        }), new _productModel.default({
+          name: 'My Awesome T-Shirt',
+          id: 'test-product-2'
+        })],
+        ...data
+      });
     }
 
   }
 
   const options = {
-    intent: {
-      countryCode: 'US',
-      items: [{
-        planId: 'my-awesome-product',
-        quantity: 1,
-        thumbnail: ''
-      }, {
-        planId: 'awesome-t-shirt',
-        quantity: 2,
-        thumbnail: ''
-      }]
-    }
-  };
-  const summaryData = new _summaryModel.default({
-    currency: "USD",
-    lineItems: [{
-      type: "debit",
-      description: "My Awesome Product",
-      unitPrice: 30,
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    items: [{
+      planId: 'my-awesome-product',
       quantity: 1,
-      price: 30,
-      productId: "test-product-1",
-      planId: "my-awesome-product"
+      thumbnail: ''
     }, {
-      type: "debit",
-      description: "Awesome T-Shirt",
-      unitPrice: 20,
+      planId: 'awesome-t-shirt',
       quantity: 2,
-      price: 40,
-      productId: "test-product-2",
-      planId: "awesome-t-shirt"
-    }],
-    subtotalAmount: 70,
-    taxAmount: 0,
-    shippingAmount: 0,
-    discountsAmount: 0,
-    total: 70
-  });
-  const planData = [new _planModel.default({
-    name: 'My Awesome Product',
-    id: 'my-awesome-product',
-    productId: 'test-product-1'
-  }), new _planModel.default({
-    name: 'My Awesome T-Shirt',
-    id: 'awesome-t-shirt',
-    productId: 'test-product-2'
-  })];
-  const productData = [new _productModel.default({
-    description: 'My Awesome Product',
-    id: 'test-product-1'
-  }), new _productModel.default({
-    description: 'My Awesome T-Shirt',
-    id: 'test-product-2'
-  })];
-  const configs = {
-    websiteId: 'test-website-id'
+      thumbnail: ''
+    }]
   };
   it('should render the summary correctly', () => {
     const mountSummaryInstance = new TestMountSummaryInstance({
-      configs,
       options
-    });
-    mountSummaryInstance.mountSummary({
-      summary: summaryData,
-      plans: planData,
-      products: productData
+    }); //TODO: improve design to avoid this manual change
+
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+    (0, _summary.mountSummary)({
+      state: mountSummaryInstance
     }); // Number of line items
 
     const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
@@ -121,15 +118,14 @@ describe('Summary component', () => {
   });
   it('should not render the plan description if its falsy', () => {
     const mountSummaryInstance = new TestMountSummaryInstance({
-      configs,
       options
     }); // Making one product description falsy
 
-    productData[0].description = null;
-    mountSummaryInstance.mountSummary({
-      summary: summaryData,
-      plans: planData,
-      products: productData
+    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null; //TODO: improve design to avoid this manual change
+
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+    (0, _summary.mountSummary)({
+      state: mountSummaryInstance
     }); // Check that only one description is render
 
     const itemsSynopsysDescription = document.querySelectorAll('.rebilly-instruments-summary-line-item-synopsis-description');

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@rebilly/instruments",
-  "version": "1.0.2-beta.8",
+  "version": "2.1.1-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
     "build": "yarn babel src --out-dir dist --copy-files",
     "dev": "yarn babel src --watch --out-dir dist",
-    "test": "yarn jest"
+    "test": "yarn jest",
+    "test:watch": "yarn jest --watchAll"
   },
   "dependencies": {
     "@babel/cli": "^7.14.5",
@@ -19,9 +20,9 @@
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
+    "popostmate": "^1.6.4",
     "postcss": "^8.3.6",
-    "postmate": "^1.5.2",
-    "rebilly-js-sdk": "^42.0.2",
+    "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },
   "devDependencies": {

package/src/events/base-event.js

@@ -5,42 +5,40 @@ export class RegisteredListeners {
     document.addEventListener(eventName, callback, false);
 
     if (!(eventName in this._listeners)) {
-      this._listeners[eventName] = []
+      this._listeners[eventName] = [];
     }
     this._listeners[eventName].push(callback);
   }
 
   removeAll() {
-    Object.keys(this._listeners).forEach(eventName => {
-      this._listeners[eventName].forEach(callback => 
-        document.removeEventListener(eventName, callback, false));
-    })
+    Object.keys(this._listeners).forEach((eventName) => {
+      this._listeners[eventName].forEach((callback) =>
+        document.removeEventListener(eventName, callback, false)
+      );
+    });
     this._listeners = {};
   }
 }
 
 export const registeredListeners = new RegisteredListeners();
 
-export default class BaseEvent {  
+export default class BaseEvent {
   /**
-   * @param {string} name 
+   * @param {string} name
    */
   constructor(name) {
-    this.name = name;
+    // Using namespaced internal name as a protection mechanism
+    const PREFIX = 'rebilly-instruments-';
+    this.internalName = PREFIX+ name;
   }
 
-  addEventListener (callback) {
-    const innerCallback = ({detail}) => callback(detail);
-    registeredListeners.add(this.name, innerCallback);
+  addEventListener(callback) {
+    const innerCallback = ({ detail }) => callback(detail);
+    registeredListeners.add(this.internalName, innerCallback);
   }
 
-  removeEventListener() {
-    document.removeEventListener(this.name, this.callback, false);
-    this.callback = null;
-  }
-  
   dispatch(detail) {
-    const event = new CustomEvent(this.name, {
+    const event = new CustomEvent(this.internalName, {
       bubbles: true,
       detail
     });

package/src/events/events.spec.js

@@ -2,8 +2,10 @@ import kebabCase from 'lodash.kebabcase';
 import events, { publicEventNames } from '@/events';
 
 it('Should export all public event names', async () => {
-  Object.keys(events).forEach(internalEventName => {
-    expect(events[internalEventName].name).toEqual(kebabCase(internalEventName))
+  Object.keys(events).forEach((internalEventName) => {
+    expect(events[internalEventName].internalName).toEqual(
+      `rebilly-instruments-${kebabCase(internalEventName)}`
+    );
     expect(kebabCase(internalEventName) in publicEventNames);
-  })
-});
+  });
+});

package/src/events/index.js

@@ -3,9 +3,12 @@ import BaseEvent from './base-event';
 
 const events = {
   instrumentReady: new BaseEvent('instrument-ready'),
-  purchaseCompleted: new BaseEvent('purchase-completed')
-}
+  purchaseCompleted: new BaseEvent('purchase-completed'),
+  setupCompleted: new BaseEvent('setup-completed')
+};
 
 export default events;
 
-export const publicEventNames =  Object.keys(events).map(internalName => kebabCase(internalName));
+export const publicEventNames = Object.keys(events).map((internalName) =>
+  kebabCase(internalName)
+);

package/src/functions/destroy.js

@@ -1,23 +1,22 @@
-import {cancellation} from 'rebilly-js-sdk';
+import { cancellation } from 'rebilly-js-sdk';
 import { registeredListeners } from '../events/base-event';
 import { sleep } from '../utils';
 
-export async function Destroy() {
+export async function destroy({ state }) {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await sleep(sleepMilliseconds);
-
-  [...this.iframeComponents || {}].forEach(iframe => {
-    iframe.component?.destroy();
+  [...(state.iframeComponents || {})].forEach((iframe) => {
+    iframe.destroy();
   });
 
   registeredListeners.removeAll(document);
-  
-  this.iframeComponents = [];
-  this.hasMounted = false;
-  
-  this.summary.textContent = '';
-  this.form.textContent = '';
+
+  state.iframeComponents = [];
+  state.hasMounted = false;
+
+  state.summary.textContent = '';
+  state.form.textContent = '';
   cancellation.cancelAll();
-  this.loader.clearAll();
-};
+  state.loader.clearAll();
+}