@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

package/dist/utils/process-property-as-dom-element.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = processPropertyAsDOMElement;
-
-var _hasValidCssSelector = _interopRequireDefault(require("./has-valid-css-selector"));
-
-var _isDomElement = _interopRequireDefault(require("./is-dom-element"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function processPropertyAsDOMElement({
-  prop,
-  propName = 'Mounting',
-  isRequired = true
-} = {}) {
-  let DOMElement;
-
-  if (typeof prop === 'undefined') {
-    throw new Error('processPropertyDOMElement: Missing argument "prop"');
-  }
-
-  if ((0, _hasValidCssSelector.default)(prop)) {
-    DOMElement = document.querySelector(prop);
-  } else if ((0, _isDomElement.default)(prop)) {
-    DOMElement = prop;
-  } else {
-    throw new Error(`Please provide a valid CSS class, id or DOM element for "${propName}" property`);
-  }
-
-  if (!DOMElement && isRequired) {
-    throw new Error(`Could not find DOM element with CSS class or id "${prop}" to mount ${propName}`);
-  }
-
-  return DOMElement;
-}

package/dist/utils/sleep.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = sleep;
-
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}

package/dist/views/__snapshots__/summary.spec.js.snap

@@ -1,246 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Summary component should render the summary correctly 1`] = `
-<div
-  class="rebilly-instruments-summary-line-items"
->
-  
-    
-  <div
-    class="rebilly-instruments-summary-line-item"
-  >
-    
-      
-      
-    <div
-      class="rebilly-instruments-summary-line-item-synopsis"
-    >
-      
-          
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-title"
-      >
-        My Awesome Product
-      </p>
-      
-          
-            
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-description"
-      >
-        My Awesome Product
-      </p>
-      
-          
-      
-    </div>
-    
-      
-    <div
-      class="rebilly-instruments-summary-line-item-price-breakdown"
-    >
-      
-        
-      <p
-        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
-      >
-        1
-      </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"
-      >
-        $30.00
-      </p>
-      
-      
-    </div>
-    
-    
-  </div>
-  
-  
-  
-    
-  <div
-    class="rebilly-instruments-summary-line-item"
-  >
-    
-      
-      
-    <div
-      class="rebilly-instruments-summary-line-item-synopsis"
-    >
-      
-          
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-title"
-      >
-        My Awesome T-Shirt
-      </p>
-      
-          
-            
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-description"
-      >
-        Awesome T-Shirt
-      </p>
-      
-          
-      
-    </div>
-    
-      
-    <div
-      class="rebilly-instruments-summary-line-item-price-breakdown"
-    >
-      
-        
-      <p
-        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
-      >
-        2
-      </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"
-      >
-        $20.00
-      </p>
-      
-      
-    </div>
-    
-    
-  </div>
-  
-  
-</div>
-`;
-
-exports[`Summary component should render the summary correctly 2`] = `
-<div
-  class="rebilly-instruments-summary-breakdown"
->
-  <table>
-    
-        
-    <colgroup>
-      
-          
-      <col />
-      
-          
-      <col />
-      
-        
-    </colgroup>
-    
-      
-    <tr
-      class="rebilly-instruments-summary-breakdown-sub-total"
-    >
-      
-        
-      <td
-        data-rebilly-i18n="summary.subTotal"
-      >
-        Sub Total
-      </td>
-      
-        
-      <td>
-        $70.00
-      </td>
-      
-      
-    </tr>
-    <tr
-      class="rebilly-instruments-summary-breakdown-taxes"
-    >
-      
-        
-      <td
-        data-rebilly-i18n="summary.taxes"
-      >
-        Taxes
-      </td>
-      
-        
-      <td>
-        $0.00
-      </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"
-      >
-        
-        USD
-      
-      </span>
-      
-      $70.00
-    
-    </p>
-    <p>
-      
-  
-    </p>
-  </div>
-</div>
-`;

package/dist/views/common/iframe/base-iframe.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _popostmate = _interopRequireDefault(require("popostmate"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class BaseIframe {
-  constructor({
-    state = {},
-    name = '',
-    url = '',
-    model = {},
-    container = null,
-    classListArray = []
-  } = {}) {
-    classListArray = Array.isArray(classListArray) ? classListArray : [];
-
-    if (!classListArray.includes('rebilly-instruments-iframe')) {
-      classListArray.push('rebilly-instruments-iframe');
-    }
-
-    this.state = state;
-    this.container = container;
-    this.classListArray = classListArray;
-    this.name = name;
-    this.url = url;
-    this.model = model;
-    this.component = null;
-    return (async () => {
-      this.component = await this.createComponent();
-      return this;
-    })();
-  }
-
-  async destroy() {
-    if (this.component.frame.parentNode) {
-      await this.component.destroy();
-    }
-  }
-
-  async createComponent() {
-    const component = await new _popostmate.default({
-      name: this.name,
-      url: this.url,
-      container: this.container,
-      classListArray: this.classListArray,
-      model: this.model
-    });
-    return component;
-  }
-
-}
-
-exports.default = BaseIframe;

package/dist/views/common/iframe/event-listeners.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dispatchRebillyInsturmentEventHandler = dispatchRebillyInsturmentEventHandler;
-exports.resizeComponentHandler = resizeComponentHandler;
-exports.stopLoaderHandler = stopLoaderHandler;
-exports.changeIframeSrcHandler = changeIframeSrcHandler;
-
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-var _events = _interopRequireDefault(require("../../../events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function dispatchRebillyInsturmentEventHandler(iframe) {
-  iframe.component.on(`${iframe.name}-dispatch`, ({
-    event,
-    detail
-  }) => {
-    _events.default[(0, _lodash.default)(event).replace(/-/, '')].dispatch(detail);
-  });
-}
-
-function resizeComponentHandler(iframe) {
-  iframe.component.on(`${iframe.name}-resize-frame`, height => {
-    iframe.component.frame.style.height = height;
-  });
-}
-
-function stopLoaderHandler(iframe, data = {
-  section: 'form'
-}) {
-  iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
-    var _data$loader;
-
-    (_data$loader = data.loader) === null || _data$loader === void 0 ? void 0 : _data$loader.stopLoading({
-      section: data.section,
-      id: id || data.id
-    });
-  });
-}
-
-function changeIframeSrcHandler(iframe) {
-  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
-    iframe.component.frame.src = url;
-    iframe.component.frame.style.height = '75vh';
-  });
-}

package/dist/views/common/iframe/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModalIframe = exports.ViewIframe = exports.MethodIframe = void 0;
-
-var _methodIframe = require("./method-iframe");
-
-var _viewIframe = require("./view-iframe");
-
-var _modalIframe = require("./modal-iframe");
-
-const MethodIframe = _methodIframe.MethodIframe;
-exports.MethodIframe = MethodIframe;
-const ViewIframe = _viewIframe.ViewIframe;
-exports.ViewIframe = ViewIframe;
-const ModalIframe = _modalIframe.ModalIframe;
-exports.ModalIframe = ModalIframe;

package/dist/views/common/iframe/method-iframe.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MethodIframe = void 0;
-
-var _baseIframe = _interopRequireDefault(require("./base-iframe"));
-
-var _eventListeners = require("./event-listeners");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class MethodIframe extends _baseIframe.default {
-  constructor(args = {}) {
-    super(args);
-  }
-
-  bindEventListeners({
-    loader,
-    id
-  } = {}) {
-    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
-    (0, _eventListeners.resizeComponentHandler)(this);
-    (0, _eventListeners.stopLoaderHandler)(this, {
-      loader,
-      id
-    });
-  }
-
-}
-
-exports.MethodIframe = MethodIframe;

package/dist/views/common/iframe/modal-iframe.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModalIframe = void 0;
-
-var _baseIframe = _interopRequireDefault(require("./base-iframe"));
-
-var _eventListeners = require("./event-listeners");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class ModalIframe extends _baseIframe.default {
-  constructor(args = {}) {
-    super(args);
-  }
-
-  bindEventListeners({
-    close = () => {},
-    loader
-  } = {}) {
-    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
-    (0, _eventListeners.resizeComponentHandler)(this);
-    (0, _eventListeners.changeIframeSrcHandler)(this);
-    (0, _eventListeners.stopLoaderHandler)(this, {
-      loader,
-      section: 'modal',
-      id: 'modal-content'
-    }); // Close modal via postmate
-
-    this.component.on(`${this.name}-close`, (...args) => {
-      close(...args);
-    }); // Close modal via postMessage (specifically during approal url flow)
-
-    window.addEventListener('message', async event => {
-      if (event.data === 'rebilly-instruments-approval-url-close') {
-        if (this.state.options.transactionType === 'purchase') {
-          var _this$state$data$invo;
-
-          this.state.storefront.setSessionToken(this.state.data.token);
-          const [{
-            fields: transaction
-          }, {
-            fields: invoice
-          }] = await Promise.all([this.state.storefront.transactions.get({
-            id: this.state.data.transaction.id
-          }), (_this$state$data$invo = this.state.data.invoice) !== null && _this$state$data$invo !== void 0 && _this$state$data$invo.id ? this.state.storefront.invoices.get({
-            id: this.state.data.invoice.id
-          }) : {
-            fields: null
-          }]);
-          const updatedPurchase = {
-            orderId: this.state.data.orderId,
-            token: this.state.data.token,
-            transaction
-          };
-
-          if (invoice) {
-            updatedPurchase.invoice = invoice;
-          }
-
-          close(updatedPurchase);
-        } else if (this.state.options.transactionType === 'setup') {
-          this.state.storefront.setSessionToken(this.state.data.instrument.token);
-          const {
-            fields: transaction
-          } = await this.state.storefront.transactions.get({
-            id: this.state.data.transaction.id
-          });
-          close({
-            transaction,
-            instrument: this.state.data.instrument
-          });
-        } else {
-          close();
-        }
-      }
-    }, false);
-  }
-
-}
-
-exports.ModalIframe = ModalIframe;

package/dist/views/common/iframe/view-iframe.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ViewIframe = void 0;
-
-var _baseIframe = _interopRequireDefault(require("./base-iframe"));
-
-var _eventListeners = require("./event-listeners");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class ViewIframe extends _baseIframe.default {
-  constructor(args = {}) {
-    super(args);
-  }
-
-  bindEventListeners({
-    loader
-  } = {}) {
-    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
-    (0, _eventListeners.resizeComponentHandler)(this);
-    (0, _eventListeners.stopLoaderHandler)(this, {
-      loader
-    });
-  }
-
-}
-
-exports.ViewIframe = ViewIframe;

package/dist/views/common/render-utilities.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.replaceContent = replaceContent;
-
-function replaceContent(form, newContent) {
-  const contentElement = form.querySelector('.rebilly-instruments-content');
-  contentElement.innerHTML = newContent;
-}

package/dist/views/confirmation.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mountConfirmation = mountConfirmation;
-exports.baseConfirmationHTML = void 0;
-
-var _purchase = require("../functions/purchase");
-
-var _setup = require("../functions/setup");
-
-var _iframe = require("./common/iframe");
-
-var _renderUtilities = require("./common/render-utilities");
-
-var _methodSelector = require("./method-selector");
-
-var _summary = require("./summary");
-
-const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></div>';
-exports.baseConfirmationHTML = baseConfirmationHTML;
-
-async function mountConfirmation({
-  payload: instrument,
-  state
-}) {
-  if (instrument.billingAddress && state.summary && state.data.isPurchase) {
-    (0, _summary.updateSummary)({
-      state,
-      instrument
-    });
-  }
-
-  (0, _renderUtilities.replaceContent)(state.form, baseConfirmationHTML);
-  state.loader.startLoading({
-    id: 'confirmation'
-  });
-  const container = document.querySelector('.rebilly-instruments-confirmation');
-  const {
-    paymentMethodsUrl
-  } = state.options._computed;
-  const model = {
-    options: state.options,
-    mainStyle: state.mainStyle,
-    instrument
-  };
-  const name = 'rebilly-instruments-confirmation';
-  const iframe = await new _iframe.ViewIframe({
-    name,
-    url: `${paymentMethodsUrl}/confirmation`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
-  iframe.component.on(`${name}-confirm-purchase`, confirmedInstrument => {
-    (0, _purchase.purchase)({
-      state,
-      payload: confirmedInstrument
-    });
-  });
-  iframe.component.on(`${name}-confirm-setup`, confirmedInstrument => {
-    (0, _setup.setup)({
-      state,
-      payload: confirmedInstrument
-    });
-  });
-  iframe.component.on('choose-another-method', () => {
-    state.iframeComponents = state.iframeComponents.filter(item => {
-      if (item.name === iframe.name) {
-        item.destroy();
-        return false;
-      }
-
-      return true;
-    });
-
-    if (state.data.isPurchase) {
-      (0, _summary.updateSummary)({
-        state
-      });
-    }
-
-    (0, _methodSelector.updateMethodSelector)({
-      state,
-      mainStyle: state.mainStyle
-    });
-  });
-  state.iframeComponents.push(iframe);
-}

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

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Summary component should inject the proper HTML for express methods 1`] = `null`;