@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/dist/functions/mount/mount.spec.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _rebillyInstrumentsMock = require("../../../tests/mocks/rebilly-instruments-mock");
+
+var _mswWhenThen = require("msw-when-then");
+
+var _server = require("../../../tests/msw/server");
+
+var _storefrontApiMock = require("../../../tests/mocks/storefront-api-mock");
+
+var _planModel = _interopRequireDefault(require("../../storefront/models/plan-model"));
+
+var _productModel = _interopRequireDefault(require("../../storefront/models/product-model"));
+
+var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('RebillyInstruments instance', () => {
+  it('should throw error when there is no DOM element to mount the form', () => {
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    expect(async () => {
+      await rebillyInstruments.mount({});
+    }).rejects.toEqual(new Error('Could not find DOM element with CSS class or id ".rebilly-instruments" to mount form'));
+  });
+  it('should throw error when providing the wrong type for the form property', () => {
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+    const options = {
+      form: []
+    };
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    expect(async () => {
+      await rebillyInstruments.mount(options);
+    }).rejects.toEqual(new Error('Please provide a valid CSS class, id or DOM element for "form" property'));
+  });
+  it.only("should inject HTML to the merchant's website", async () => {
+    const testPlan = new _planModel.default({
+      name: 'Test Plan',
+      id: 'test-plan-id-1'
+    });
+    const testProduct = new _productModel.default({
+      description: 'My Awesome Product',
+      id: 'test-product-1'
+    });
+    const testSummary = new _summaryModel.default({
+      currency: 'USD',
+      lineItems: [{
+        description: 'test-plan-id-1',
+        planId: 'test-plan-id-1',
+        productId: 'test-product-1',
+        quantity: 1
+      }]
+    });
+    const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
+    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
+    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/ready-to-pay`)).thenReturn((() => {
+      return (0, _mswWhenThen.ok)([{
+        method: 'payment-card',
+        feature: {
+          name: 'Google Pay',
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
+        filters: []
+      }]);
+    })());
+    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/preview-purchase`)).thenReturn((() => {
+      return (0, _mswWhenThen.ok)(testSummary);
+    })());
+    (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/plans`)).thenReturn((() => {
+      return (0, _mswWhenThen.ok)([testPlan]);
+    })());
+    (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/products`)).thenReturn((() => {
+      return (0, _mswWhenThen.ok)([testProduct]);
+    })());
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+    const options = {
+      form: '.form-selector',
+      summary: '.summary-selector',
+      _dev: {
+        framePayStyleLink: framePayStyleUrl
+      },
+      options: {
+        locale: 'auto',
+        intent: {
+          items: [{
+            planId: 'test-plan-id-1',
+            quantity: 1
+          }]
+        }
+      }
+    };
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)({
+      theme: {
+        color: {
+          background: '#000'
+        }
+      },
+      css: `
+        .rebilly-instruments-summary-line-item-synopsis-title {
+          color: rgb(0, 68, 212);
+        }
+      `
+    });
+    await rebillyInstruments.mount(options); // Mounts form and summary
+
+    const summarySelector = document.querySelector('.summary-selector');
+    expect(summarySelector.innerHTML).toMatch(testPlan.name); // Theme config overrides initial styles
+
+    const SUMMARY_CONTAINER = summarySelector.querySelector('.rebilly-instruments-content');
+    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual('rgb(0, 0, 0)'); // CSS config property overrides initial styles
+
+    const LINE_ITEM_TITLE = document.querySelector('.rebilly-instruments-summary-line-item-synopsis-title');
+    expect(getComputedStyle(LINE_ITEM_TITLE).color).toEqual('rgb(0, 68, 212)'); // Mounts default FramePay script
+
+    const SCRIPTS = [...document.querySelectorAll('head script')];
+    const FRAMEPAY_SCRIPT = SCRIPTS.find(script => script.src === framePayScriptUrl);
+    expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl); // Mounts _dev FramePay style
+
+    const STYLE_LINKS = [...document.querySelectorAll('head link')];
+    const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
+    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
+  });
+});

package/dist/functions/on.js

@@ -3,30 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.On = On;
+exports.on = on;
 
-var _events = _interopRequireDefault(require("../events"));
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _events = _interopRequireWildcard(require("../events"));
 
-/**
- * Register events that will be triggered
- * @param {string} eventName - The name of the event
- * @param {function} callback - The function that is triggered by the event.
- */
-function On(eventName, callback) {
-  switch (eventName) {
-    case 'instrument-ready':
-      _events["default"].instrumentReady.addEventListener(callback);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-      break;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-    case 'purchase-complete':
-      _events["default"].purchaseComplete.addEventListener(callback);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-      break;
+/**
+ @typedef OnParams
+ @type {Object}
+ @property {string} eventName - The name of the event
+ @property {function} callback - The function that is triggered by the event.
+ */
 
-    default:
-      throw new Error("".concat(eventName, " not a suported event"));
+/**
+ * Register events that will be triggered
+ * @param {OnParams} params
+ */
+function on({
+  eventName,
+  callback
+}) {
+  if (!_events.publicEventNames.includes(eventName)) {
+    throw new Error(`${eventName} is not a supported event`);
   }
+
+  const internalEventName = (0, _lodash.default)(eventName);
+
+  _events.default[internalEventName].addEventListener(callback);
 }

package/dist/functions/on.spec.js

@@ -1,73 +1,55 @@
 "use strict";
 
-var _events = _interopRequireDefault(require("../events"));
-
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-describe('RebillyInstruments on', function () {
-  it('should be able to register event listeners', function () {
-    var events = [{
-      name: 'instrument-ready',
-      dispatch: _events["default"].instrumentReady.dispatch
-    }, {
-      name: 'purchase-complete',
-      dispatch: _events["default"].purchaseComplete.dispatch
-    }];
-    var rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    events.forEach( /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(event) {
-        var callback, details;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                callback = jest.fn();
-                rebillyInstruments.on(event.name, callback);
-                details = {
-                  test: 'data'
-                };
-                _context.next = 5;
-                return event.dispatch(details);
+var _events = _interopRequireDefault(require("../events"));
 
-              case 5:
-                expect(callback).toBeCalledTimes(1);
-                expect(callback).toBeCalledWith(details);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('RebillyInstruments on', () => {
+  it('should register event listeners', async () => {
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    const publicEventNames = ['instrument-ready', 'purchase-completed'];
+    await Promise.all(publicEventNames.map(async eventName => {
+      const callback = jest.fn();
+      rebillyInstruments.on(eventName, callback);
+      const details = {
+        test: 'data'
+      };
 
-              case 7:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
+      _events.default[(0, _lodash.default)(eventName)].dispatch(details);
 
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
+      expect(callback).toBeCalledTimes(1);
+      expect(callback).toBeCalledWith(details);
+    }));
   });
-  it('should throw error for a non defined event', function () {
-    var callback = jest.fn();
-    var rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              rebillyInstruments.on('not-an-event', callback);
-
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }))).rejects.toEqual(new Error("not-an-event not a suported event"));
+  it('should throw error for internal namespaced events', async () => {
+    const callback = jest.fn();
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    let error;
+
+    try {
+      // rebilly-instruments-purchase-completed will be used internally but not available externally
+      await rebillyInstruments.on('rebilly-instruments-purchase-completed', callback);
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toEqual(new Error('rebilly-instruments-purchase-completed is not a supported event'));
+  });
+  it('should throw error for a non defined event', async () => {
+    const callback = jest.fn();
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    let error;
+
+    try {
+      await rebillyInstruments.on('not-an-event', callback);
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toEqual(new Error('not-an-event is not a supported event'));
   });
 });

package/dist/functions/purchase.js

@@ -3,164 +3,51 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Purchase = Purchase;
+exports.purchase = purchase;
 
-var _zoid = _interopRequireDefault(require("zoid"));
+var _purchase = require("../storefront/purchase");
 
 var _events = _interopRequireDefault(require("../events"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function zoidComponentClose(purchase) {
-  var _this = this;
-
-  return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _yield$Promise$all, _yield$Promise$all2, transaction, invoice, updatedPurchase;
-
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-
-            _this.storefront.setSessionToken(purchase.token);
-
-            _context.next = 4;
-            return Promise.all([_this.storefront.transactions.get({
-              id: purchase.transaction.id
-            }), _this.storefront.invoices.get({
-              id: purchase.invoice.id
-            })]);
-
-          case 4:
-            _yield$Promise$all = _context.sent;
-            _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
-            transaction = _yield$Promise$all2[0].fields;
-            invoice = _yield$Promise$all2[1].fields;
-            updatedPurchase = _objectSpread(_objectSpread({}, purchase), {}, {
-              transaction: transaction,
-              invoice: invoice
-            });
-
-            _events["default"].purchaseComplete.dispatch(updatedPurchase);
-
-            _context.next = 15;
-            break;
-
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](0);
-
-            _events["default"].purchaseComplete.dispatch(_context.t0);
-
-          case 15:
-          case "end":
-            return _context.stop();
+var _modal = require("../views/modal");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function purchase({
+  state,
+  payload: purchasePayload
+}) {
+  try {
+    const {
+      fields: purchaseFields
+    } = await (0, _purchase.postPurchase)({
+      state,
+      data: purchasePayload
+    });
+
+    if (purchaseFields.transaction.approvalUrl) {
+      const {
+        paymentMethodsUrl
+      } = state.options._computed;
+      (0, _modal.mountModal)({
+        state,
+        name: 'rebilly-instruments-approval-url',
+        url: `${paymentMethodsUrl}/approval-url`,
+        model: {
+          purchase: purchaseFields
+        },
+        close: updatedPurchase => {
+          // TODO: Check if this is purchase...
+          _events.default.purchaseCompleted.dispatch(updatedPurchase);
         }
-      }
-    }, _callee, null, [[0, 12]]);
-  }));
-}
-
-function openApprovalUrl(purchase) {
-  function containerTemplate(_ref2) {
-    var doc = _ref2.doc,
-        uid = _ref2.uid,
-        focus = _ref2.focus;
-    var container = doc.createElement('div');
-    var text = doc.createElement('p');
-    text.innerText = 'Click here to show popup window';
-    container.id = uid;
-    container.append(text);
-    container.classList.add('rebilly-instruments-overlay');
-    container.addEventListener('click', focus);
-    return container;
+      });
+    } else {
+      _events.default.purchaseCompleted.dispatch(purchaseFields);
+    }
+
+    return purchaseFields;
+  } catch (error) {
+    // TODO: Display error to customer
+    return error;
   }
-
-  ;
-  var paymentMethodsUrl = this.options._computed.paymentMethodsUrl;
-
-  var zoidComponent = _zoid["default"].create({
-    tag: 'rebilly-instruments-approval-url',
-    url: "".concat(paymentMethodsUrl, "/approval-url"),
-    defaultContext: 'popup',
-    dimensions: {
-      width: '600px',
-      height: '600px'
-    },
-    containerTemplate: containerTemplate
-  });
-
-  zoidComponent({
-    RebillyInstruments: {
-      approvalUrl: purchase.transaction.approvalUrl
-    },
-    onClose: zoidComponentClose.call(this, purchase)
-  }).render();
-}
-
-function Purchase(_x) {
-  return _Purchase.apply(this, arguments);
-}
-
-function _Purchase() {
-  _Purchase = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(purchasePayload) {
-    var _yield$this$_postPurc, purchase;
-
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
-            return this._postPurchase(purchasePayload);
-
-          case 3:
-            _yield$this$_postPurc = _context2.sent;
-            purchase = _yield$this$_postPurc.fields;
-
-            if (purchase.transaction.approvalUrl) {
-              openApprovalUrl.call(this, purchase);
-            } else {
-              _events["default"].purchaseComplete.dispatch(purchase);
-            }
-
-            _context2.next = 11;
-            break;
-
-          case 8:
-            _context2.prev = 8;
-            _context2.t0 = _context2["catch"](0);
-            return _context2.abrupt("return", _context2.t0);
-
-          case 11:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2, this, [[0, 8]]);
-  }));
-  return _Purchase.apply(this, arguments);
 }