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

package/dist/functions/purchase.spec.js

@@ -1,89 +1,73 @@
 "use strict";
 
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
 var _mswWhenThen = require("msw-when-then");
 
-var _server = require("tests/msw/server");
+var _server = require("../../tests/msw/server");
 
-var _storefrontApiMock = require("tests/mocks/storefront-api-mock");
+var _storefrontApiMock = require("../../tests/mocks/storefront-api-mock");
 
 var _events = _interopRequireDefault(require("../events"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _asyncUtilities = require("../../tests/async-utilities");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 purchase', function () {
-  it('should be able to make a purchase', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var configs, options, token, billingAddress, deliveryAddress, fields, rebillyInstruments, purchaseCompleteListener, purchasePayload;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            configs = {
-              websiteId: 'test-website-id'
-            };
-            options = {
-              intent: {
-                items: [{
-                  planId: 'test-plan-id',
-                  quantity: 1
-                }]
-              }
-            };
-            token = {
-              id: 'test-token-id'
-            };
-            billingAddress = {
-              billing: 'address'
-            };
-            deliveryAddress = {
-              delivery: 'address'
-            };
-            fields = {
-              orderId: 'test-order-id',
-              invoice: {
-                id: 'test-invoice-id'
-              },
-              transaction: {
-                id: 'test-transaction-id'
-              }
-            };
-            (0, _server.when)((0, _mswWhenThen.post)("".concat(_storefrontApiMock.storefrontURL, "/purchase"))).thenReturn((0, _mswWhenThen.ok)(fields));
-            rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(configs, options);
-            jest.spyOn(rebillyInstruments.storefront.purchase, 'purchase');
-            jest.spyOn(_events["default"].purchaseComplete, 'dispatch');
-            purchaseCompleteListener = jest.fn();
-            rebillyInstruments.on('purchase-complete', purchaseCompleteListener);
-            purchasePayload = {
-              websiteId: rebillyInstruments.configs.websiteId,
-              items: rebillyInstruments.options.intent.items,
-              billingAddress: billingAddress,
-              deliveryAddress: deliveryAddress,
-              paymentInstruction: {
-                token: token.id
-              }
-            };
-            _context.next = 15;
-            return rebillyInstruments.purchase(purchasePayload);
-
-          case 15:
-            expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledTimes(1);
-            expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledWith(expect.objectContaining({
-              data: purchasePayload
-            }));
-            expect(_events["default"].purchaseComplete.dispatch).toBeCalledTimes(1);
-            expect(purchaseCompleteListener).toBeCalledTimes(1);
-            expect(purchaseCompleteListener).toBeCalledWith(expect.objectContaining(fields));
-
-          case 20:
-          case "end":
-            return _context.stop();
-        }
+describe('RebillyInstruments purchase', () => {
+  it('should be able to make a purchase', async () => {
+    const configs = {
+      websiteId: 'test-website-id'
+    };
+    const options = {
+      intent: {
+        items: [{
+          planId: 'test-plan-id',
+          quantity: 1
+        }]
+      }
+    };
+    const token = {
+      id: 'test-token-id'
+    };
+    const billingAddress = {
+      billing: 'address'
+    };
+    const deliveryAddress = {
+      delivery: 'address'
+    };
+    const fields = {
+      orderId: 'test-order-id',
+      invoice: {
+        id: 'test-invoice-id'
+      },
+      transaction: {
+        id: 'test-transaction-id'
+      }
+    };
+    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/purchase`)).thenReturn((0, _mswWhenThen.ok)(fields));
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(configs, options);
+    jest.spyOn(rebillyInstruments.state.storefront.purchase, 'purchase');
+    jest.spyOn(_events.default.purchaseCompleted, 'dispatch');
+    const purchaseCompletedListener = jest.fn();
+    rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
+    const purchasePayload = {
+      websiteId: rebillyInstruments.state.configs.websiteId,
+      items: rebillyInstruments.state.options.intent.items,
+      billingAddress,
+      deliveryAddress,
+      paymentInstruction: {
+        token: token.id
       }
-    }, _callee);
-  })));
+    };
+    await rebillyInstruments.purchase(purchasePayload);
+    expect(rebillyInstruments.state.storefront.purchase.purchase).toBeCalledTimes(1);
+    expect(rebillyInstruments.state.storefront.purchase.purchase).toBeCalledWith(expect.objectContaining({
+      data: purchasePayload
+    }));
+    expect(_events.default.purchaseCompleted.dispatch).toBeCalledTimes(1);
+    expect(purchaseCompletedListener).toBeCalledTimes(1);
+    expect(purchaseCompletedListener).toBeCalledWith(expect.objectContaining(fields));
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
+  });
 });

package/dist/functions/show.js

@@ -3,53 +3,49 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Show = Show;
+exports.show = show;
 
-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 _confirmation = require("../views/confirmation");
 
-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); }); }; }
+var _result = require("../views/result");
 
 /**
- * Register events that will be triggered
- * @param {string} componentName - The name of the component to render to the form
- * @param {function} payload - The extra data to provide the component
+ @typedef ShowParams
+ @type {Object}
+ @property {string} componentName - The name of the component to render to the form.
+ @property {object} payload - The extra data to provide the component.
+ @property {object} state - The global state.
  */
-function Show(_x) {
-  return _Show.apply(this, arguments);
-}
-
-function _Show() {
-  _Show = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(componentName) {
-    var payload,
-        _args = arguments;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            payload = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
-            _context.t0 = componentName;
-            _context.next = _context.t0 === 'result' ? 4 : _context.t0 === 'confirmation' ? 6 : 8;
-            break;
-
-          case 4:
-            this._mountResult.call(this, payload);
-
-            return _context.abrupt("break", 9);
-
-          case 6:
-            this._mountConfirmation.call(this, payload);
 
-            return _context.abrupt("break", 9);
-
-          case 8:
-            throw new Error("'".concat(componentName, "' not a supported component'"));
-
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee, this);
-  }));
-  return _Show.apply(this, arguments);
+/**
+ * Register events that will be triggered
+ * @param {ShowParams} params
+ */
+async function show({
+  componentName,
+  payload,
+  state
+}) {
+  switch (componentName) {
+    case 'result':
+      state.iframeComponents = state.iframeComponents.filter(iframe => {
+        iframe.destroy();
+        return false;
+      });
+      payload.state = state;
+      (0, _result.mountResult)(payload);
+      break;
+
+    case 'confirmation':
+      state.iframeComponents = state.iframeComponents.filter(iframe => {
+        iframe.destroy();
+        return false;
+      });
+      payload.state = state;
+      (0, _confirmation.mountConfirmation)(payload);
+      break;
+
+    default:
+      throw new Error(`'${componentName}' not a supported component`);
+  }
 }

package/dist/functions/show.spec.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var result = _interopRequireWildcard(require("../views/result"));
+
+var confirmation = _interopRequireWildcard(require("../views/confirmation"));
+
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
+
+var _show = require("./show");
+
+var _index = require("../index");
+
+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); }
+
+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; }
+
+const iframeMock = {
+  destroy: jest.fn()
+};
+describe('RebillyInstruments show', () => {
+  it('should show result component', async () => {
+    const mountResult = jest.spyOn(result, 'mountResult').mockReturnValue(Promise.resolve());
+    const instance = new _index.RebillyInstrumentsInstance();
+    instance.state.iframeComponents.push(iframeMock);
+    const payload = {
+      test: 'value'
+    };
+    await instance.show('result', payload);
+    expect(mountResult).toBeCalledTimes(1);
+    expect(mountResult).toBeCalledWith(payload);
+    expect(instance.state.iframeComponents).toEqual([]);
+  });
+  it('should show confirmation component', async () => {
+    const mountConfirmation = jest.spyOn(confirmation, 'mountConfirmation').mockReturnValue(Promise.resolve());
+    const instance = new _index.RebillyInstrumentsInstance();
+    instance.state.iframeComponents.push(iframeMock);
+    const payload = {
+      test: 'value'
+    };
+    await instance.show('confirmation', payload);
+    expect(mountConfirmation).toBeCalledTimes(1);
+    expect(mountConfirmation).toBeCalledWith(payload);
+    expect(instance.state.iframeComponents).toEqual([]);
+  });
+  it('should fail for non supported component', async () => {
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    let error;
+
+    try {
+      await rebillyInstruments.show('not-a-component', 'any payload');
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error.toString()).toBe(`Error: 'not-a-component' not a supported component`);
+  });
+});

package/dist/functions/update.js

@@ -3,10 +3,65 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Update = Update;
+exports.update = update;
 
-function Update() {
-  console.error('Update no yet implemented');
-}
+var _lodash = _interopRequireDefault(require("lodash.merge"));
 
-;
+var _lodash2 = _interopRequireDefault(require("lodash.isequal"));
+
+var _destroy = require("./destroy");
+
+var _initialize = require("./initialize");
+
+var _mount = require("./mount");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function update(state, newConfig) {
+  var _newConfig$options, _newConfig$options$in, _newConfig$options2, _newConfig$options2$i;
+
+  if (!state.hasMounted) {
+    throw Error('Update method cannot be called before mounting instruments');
+  }
+  /**
+   * Framepay locale option is almost but not fully updatable yet:
+   * https://github.com/Rebilly/framepay/issues/450
+   * That's why this toggle disables real time locale update until that issue is fixed.
+   */
+
+
+  const temporaryDisableRealTimeLocaleUpdate = true;
+  const updatingJustLocale = (newConfig === null || newConfig === void 0 ? void 0 : newConfig.options) && (0, _lodash2.default)(Object.keys(newConfig === null || newConfig === void 0 ? void 0 : newConfig.options), ['locale']);
+
+  if (updatingJustLocale && !temporaryDisableRealTimeLocaleUpdate) {
+    const updatedOptions = (0, _lodash.default)(state.options, newConfig.options);
+    const newLocale = newConfig === null || newConfig === void 0 ? void 0 : newConfig.options.locale;
+    state.options = updatedOptions;
+    state.translate.updateTranslationsToNewLocale(newLocale);
+    state.iframeComponents.forEach(iframe => iframe.component.call('changeLocale', newLocale));
+    return;
+  } // Check if the provided intent items object is different to avoid merging the items entries
+
+
+  if (newConfig !== null && newConfig !== void 0 && (_newConfig$options = newConfig.options) !== null && _newConfig$options !== void 0 && (_newConfig$options$in = _newConfig$options.intent) !== null && _newConfig$options$in !== void 0 && _newConfig$options$in.items && !(0, _lodash2.default)(state.options.intent.items, newConfig === null || newConfig === void 0 ? void 0 : (_newConfig$options2 = newConfig.options) === null || _newConfig$options2 === void 0 ? void 0 : (_newConfig$options2$i = _newConfig$options2.intent) === null || _newConfig$options2$i === void 0 ? void 0 : _newConfig$options2$i.items)) {
+    var _newConfig$options3, _newConfig$options3$i;
+
+    state.options.intent.items = newConfig === null || newConfig === void 0 ? void 0 : (_newConfig$options3 = newConfig.options) === null || _newConfig$options3 === void 0 ? void 0 : (_newConfig$options3$i = _newConfig$options3.intent) === null || _newConfig$options3$i === void 0 ? void 0 : _newConfig$options3$i.items;
+  }
+
+  const updatedOptions = (0, _lodash.default)(state.options, newConfig.options);
+  await (0, _destroy.destroy)({
+    state
+  });
+  (0, _initialize.initialize)({
+    state,
+    configs: state.configs
+  });
+  (0, _mount.mount)({
+    state,
+    form: state.form,
+    summary: state.summary,
+    options: updatedOptions,
+    _dev: state._dev
+  });
+}

package/dist/functions/update.spec.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
+
+var _asyncUtilities = require("../../tests/async-utilities");
+
+describe('RebillyInstruments Update', () => {
+  it('should throw an error when methods are not mounted', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    rebillyInstruments.state.hasMounted = false;
+    let error;
+
+    try {
+      await rebillyInstruments.update();
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toEqual(new Error('Update method cannot be called before mounting instruments'));
+  }); // TODO: Un skip this test when we activate real time update (currently disabled by feature toggle in update.js)
+
+  it.skip('should call changeLocale when updating locale options', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    const call = jest.fn(); // Simulate mounted iframe
+
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+    await rebillyInstruments.update({
+      options: {
+        locale: 'ja'
+      }
+    });
+    expect(call).toBeCalledWith('changeLocale', 'ja'); // It would be better to match real UI instead of implementation state
+
+    expect(rebillyInstruments.state.options.locale).toBe('ja');
+    expect(rebillyInstruments.state.translate.locale).toBe('ja');
+  });
+  it('should destroy and update when updating options different than locale', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    const formElement = document.querySelector('.form-selector');
+    const summaryElement = document.querySelector('.summary-selector');
+    expect(formElement.innerHTML).not.toEqual('');
+    expect(summaryElement.innerHTML).not.toEqual('');
+    const call = jest.fn(); // Simulate mounted iframe
+
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+    await rebillyInstruments.update({
+      options: {
+        intent: {
+          countryCode: 'ES'
+        }
+      }
+    });
+    expect(rebillyInstruments.state.options.intent.countryCode).toEqual('ES');
+    expect(formElement.innerHTML).toEqual('');
+    expect(summaryElement.innerHTML).toEqual('');
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
+  });
+  it('should replace the intent items with different options', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    const formElement = document.querySelector('.form-selector');
+    const summaryElement = document.querySelector('.summary-selector');
+    expect(formElement.innerHTML).not.toEqual('');
+    expect(summaryElement.innerHTML).not.toEqual('');
+    const call = jest.fn(); // Simulate mounted iframe
+
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.iframeComponents = [fakeIFrameComponent];
+    await rebillyInstruments.update({
+      options: {
+        intent: {
+          items: [{
+            planId: 'test-plan-id-1',
+            quantity: 5
+          }]
+        }
+      }
+    });
+    expect(rebillyInstruments.state.options.intent.items[0].quantity).toEqual(5);
+    expect(formElement.innerHTML).toEqual('');
+    expect(summaryElement.innerHTML).toEqual('');
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
+  });
+});

package/dist/i18n/en.json

@@ -0,0 +1,19 @@
+{
+  "en": {
+    "summary": {
+      "subTotal": "Sub Total",
+      "discounts": "Discouts",
+      "taxes": "Taxes",
+      "shipping": "Shipping",
+      "total": "Total"
+    },
+    "form": {
+      "expressCheckout": "Express checkout",
+      "or": "Or",
+      "popupOverlayText": "Click here to show popup window"
+    },
+    "paymentMethods": {
+      "payment-card": "Payment card"
+    }
+  }
+}

package/dist/i18n/es.json

@@ -0,0 +1,19 @@
+{
+  "es": {
+    "summary": {
+      "subTotal": "Sub Total",
+      "discounts": "Descuentos",
+      "taxes": "Impuestos",
+      "shipping": "Envío",
+      "total": "Total"
+    },
+    "form": {
+      "expressCheckout": "Chequeo rápido",
+      "or": "O pague con",
+      "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente"
+    },
+    "paymentMethods": {
+      "payment-card": "Tarjeta de crédito"
+    }
+  }
+}

package/dist/i18n/i18n.spec.js

@@ -2,37 +2,20 @@
 
 var _index = require("./index");
 
-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; }
-
-describe('i18n Class', function () {
-  var canTranslate = document.createElement('div');
+describe('i18n Class', () => {
+  const canTranslate = document.createElement('div');
   canTranslate.innerHTML = 'Discounts';
   canTranslate.setAttribute('data-rebilly-i18n', 'summary.discounts');
-  var canNotTranslate = document.createElement('div');
+  const canNotTranslate = document.createElement('div');
   canNotTranslate.innerHTML = 'Untouched';
   canNotTranslate.setAttribute('data-rebilly-i18n', 'does.not.exist');
   document.body.append(canTranslate);
   document.body.append(canNotTranslate);
-  it('can translate element with proper data attribute and skip wrong translation path or languages', function () {
-    var translate = new _index.Translate();
+  it('can translate element with proper data attribute and skip wrong translation path or languages', () => {
+    const translate = new _index.Translate();
     translate.init('es-US');
     translate.translateItems();
-
-    var _document$querySelect = document.querySelectorAll('[data-rebilly-i18n]'),
-        _document$querySelect2 = _slicedToArray(_document$querySelect, 2),
-        translated = _document$querySelect2[0],
-        untouched = _document$querySelect2[1];
-
+    const [translated, untouched] = document.querySelectorAll('[data-rebilly-i18n]');
     expect(translated.innerHTML).toEqual('Descuentos');
     expect(untouched.innerHTML).toEqual('Untouched');
   });