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

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/index.js

@@ -44,6 +44,11 @@ class Translate {
     return false;
   }
 
+  updateTranslationsToNewLocale(newLocale) {
+    this.locale = newLocale;
+    this.translateItems();
+  }
+
   getLocale(locale = this.locale) {
     if (!locale.includes('-') || locale in this.languages) {
       return locale;

package/dist/index.js

@@ -3,45 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RebillyInstrumentsInstance = void 0;
-
-var _initialize = require("./functions/initialize");
+exports.default = exports.RebillyInstrumentsInstance = exports.InstrumentsState = void 0;
 
 var _mount = require("./functions/mount");
 
 var _purchase = require("./functions/purchase");
 
-var _show = require("./functions/show");
-
 var _on = require("./functions/on");
 
-var _readyToPay = require("./storefront/ready-to-pay");
-
-var _summary = require("./storefront/summary");
-
-var _plans = require("./storefront/plans");
-
-var _products = require("./storefront/products");
-
-var _purchase2 = require("./storefront/purchase");
-
-var _summary2 = require("./components/summary");
-
-var _form = require("./components/form/form");
+var _update = require("./functions/update");
 
-var _confirmation = require("./components/confirmation");
-
-var _result = require("./components/result");
+var _destroy = require("./functions/destroy");
 
 var _loader = require("./loader");
 
 var _i18n = require("./i18n");
 
-// import { Update } from './functions/update'; // TODO: import when implemented
-// import { Destroy } from './functions/destroy'; // TODO: import when implemented
-class RebillyInstrumentsInstance {
+var _initialize = require("./functions/initialize");
+
+var _show = require("./functions/show");
+
+class InstrumentsState {
   constructor() {
-    this.configs = null;
     this.options = null;
     this.mountingPoints = null;
     this.storefront = null;
@@ -49,36 +32,65 @@ class RebillyInstrumentsInstance {
     this.summary = null;
     this.loader = new _loader.Loader();
     this.translate = new _i18n.Translate();
-    this.zoidComponents = {};
-    const functionsMap = {
-      // "Private" functions
-      _fetchReadyToPay: _readyToPay.FetchReadyToPay,
-      _fetchSummary: _summary.FetchSummary,
-      _fetchPlans: _plans.FetchPlans,
-      _fetchProducts: _products.FetchProducts,
-      _postPurchase: _purchase2.PostPurchase,
-      _mountSummary: _summary2.MountSummary,
-      _mountForm: _form.MountForm,
-      _mountConfirmation: _confirmation.MountConfirmation,
-      _mountResult: _result.MountResult,
-      _updateSummary: _summary2.UpdateSummary,
-      _updateForm: _form.UpdateForm,
-      // Public Functions
-      initialize: _initialize.Initialize,
-      mount: _mount.Mount,
-      // update: Update, // TODO: Implement functionality
-      // destroy: Destroy, // TODO: Implement functionality
-      purchase: _purchase.Purchase,
-      show: _show.Show,
-      on: _on.On
-    }; // eslint-disable-next-line no-restricted-syntax
-
-    for (const local of Object.keys(functionsMap)) {
-      // eslint-disable-next-line func-names
-      this[local] = function (...args) {
-        return functionsMap[local].apply(this, args);
-      };
-    }
+    this.iframeComponents = [];
+    this.hasMounted = false;
+  }
+
+}
+
+exports.InstrumentsState = InstrumentsState;
+
+class RebillyInstrumentsInstance {
+  constructor() {
+    this.state = new InstrumentsState(); // TODO: mountConfirmation, mountResult have different contract shape when they look similar
+    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
+    // when commenting them
+  }
+
+  initialize(configs) {
+    (0, _initialize.initialize)({
+      state: this.state,
+      configs
+    });
+  }
+
+  async mount(options) {
+    await (0, _mount.mount)({
+      state: this.state,
+      ...options
+    });
+  }
+
+  async destroy() {
+    await (0, _destroy.destroy)({
+      state: this.state
+    });
+  }
+
+  async update(newConfig) {
+    await (0, _update.update)(this.state, newConfig);
+  }
+
+  async purchase(payload) {
+    await (0, _purchase.purchase)({
+      state: this.state,
+      payload
+    });
+  }
+
+  async show(componentName, payload) {
+    await (0, _show.show)({
+      componentName,
+      payload,
+      state: this.state
+    });
+  }
+
+  on(eventName, callback) {
+    (0, _on.on)({
+      eventName,
+      callback
+    });
   }
 
 }

package/dist/index.spec.js

@@ -2,6 +2,10 @@
 
 var _index = _interopRequireWildcard(require("./index"));
 
+var _asyncUtilities = require("../tests/async-utilities");
+
+var _initialize = require("./functions/initialize");
+
 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; }
@@ -21,16 +25,7 @@ describe('RebillyInstruments instance', () => {
   it('should have default export as instance of class', () => {
     expect(_index.default).toBeInstanceOf(_index.RebillyInstrumentsInstance);
   });
-  it('should be initializable', () => {
-    jest.spyOn(rebillyInstruments, 'initialize');
-    const config = {
-      test: 'value'
-    };
-    rebillyInstruments.initialize(config);
-    expect(rebillyInstruments.initialize).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.initialize).toHaveBeenCalledWith(config);
-  });
-  it('should be mountable', () => {
+  it('should be mountable', async () => {
     jest.spyOn(rebillyInstruments, 'mount');
     document.body.innerHTML = `
       <div class="form-selector"></div>
@@ -44,6 +39,7 @@ describe('RebillyInstruments instance', () => {
     rebillyInstruments.mount(options);
     expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
     expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
   });
   it('should be able to trigger a purchase', () => {
     jest.spyOn(rebillyInstruments, 'purchase');

package/dist/loader/index.js

@@ -13,9 +13,10 @@ class Loader {
   constructor() {
     this.summary = [];
     this.form = [];
+    this.modal = [];
     this.DOM = {
       loading: `
-                <div class="rebilly-instruments-loader active">
+                <div class="rebilly-instruments-loader is-active">
                     <div class="rebilly-instruments-loader-spinner"></div>
                 </div>
             `
@@ -31,7 +32,6 @@ class Loader {
     if ((0, _isDomElement.default)(el)) {
       el.style.position = 'relative';
       el.style.minHeight = minHeight;
-      el.style.paddingTop = section === 'form' ? '8px' : '0px';
       this.DOM[section] = el;
     }
   }
@@ -48,7 +48,7 @@ class Loader {
       if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
         this.DOM[section].innerHTML = this.DOM.loading;
       } else {
-        this.DOM[section].querySelector('.rebilly-instruments-loader').classList.add('active');
+        this.DOM[section].querySelector('.rebilly-instruments-loader').classList.add('is-active');
       }
     }
   }
@@ -64,10 +64,30 @@ class Loader {
     }
 
     if (!this[section].length && this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-      this.DOM[section].querySelector('.rebilly-instruments-loader').classList.remove('active');
+      this.DOM[section].querySelector('.rebilly-instruments-loader').classList.remove('is-active');
     }
   }
 
+  clearAll() {
+    this.form.forEach(id => {
+      this.stopLoading({
+        id
+      });
+    });
+    this.summary.forEach(id => {
+      this.stopLoading({
+        section: 'summary',
+        id
+      });
+    });
+    this.modal.forEach(id => {
+      this.stopLoading({
+        section: 'modal',
+        id
+      });
+    });
+  }
+
 }
 
 exports.Loader = Loader;

package/dist/loader/loader.spec.js

@@ -46,11 +46,11 @@ describe('Loader Class', () => {
       id: 'loadForm'
     });
     expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
     loader.stopLoading({
       id: 'loadForm'
     });
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(false);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(false);
   });
   it('keeps loading when there are Ids on the element array', () => {
     loader.startLoading({
@@ -60,10 +60,10 @@ describe('Loader Class', () => {
       id: 'updateForm'
     });
     expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
     loader.stopLoading({
       id: 'loadForm'
     });
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
   });
 });

package/dist/storefront/models/ready-to-pay-model.js

@@ -8,12 +8,18 @@ exports.default = exports.ReadyToPayFeatureModel = void 0;
 class ReadyToPayFeatureModel {
   constructor({
     name = '',
+    // Google Pay fields
+    merchantName = '',
+    merchantOrigin = '',
+    // Plaid fields
     linkToken = '',
     expirationTime = ''
   } = {}) {
     this.name = name;
+    this.merchantName = merchantName;
+    this.merchantOrigin = merchantOrigin;
     this.linkToken = linkToken;
-    this.expirtationTime = expirationTime;
+    this.expirationTime = expirationTime;
   }
 
 }

package/dist/storefront/plans.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchPlans = FetchPlans;
+exports.fetchPlans = fetchPlans;
 
 var _planModel = _interopRequireDefault(require("./models/plan-model"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-async function FetchPlans({
-  data = null
-} = {}) {
-  if (!this.storefront) {
+async function fetchPlans({
+  data = null,
+  state = null
+}) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
+  if (!state.configs || !state.options) {
     throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
   }
 
@@ -34,13 +35,11 @@ async function FetchPlans({
 
     const {
       items: planItems
-    } = await this.storefront.plans.getAll(filterByPlanId);
+    } = await state.storefront.plans.getAll(filterByPlanId);
     return planItems.map(({
       fields
     }) => new _planModel.default(fields));
   } catch (error) {
     throw error;
   }
-}
-
-;
+}

package/dist/storefront/plans.spec.js

@@ -1,17 +1,19 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-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 _plans = require("./plans");
 
 var _planModel = _interopRequireDefault(require("./models/plan-model"));
 
+var _asyncUtilities = require("../../tests/async-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Storefront API Plan', () => {
@@ -25,10 +27,6 @@ describe('Storefront API Plan', () => {
       this.storefront = (0, _storefrontMock.MockStorefront)();
     }
 
-    fetchPlans(...args) {
-      return _plans.FetchPlans.apply(this, args);
-    }
-
   }
 
   it('can fetch plans', async () => {
@@ -39,7 +37,9 @@ describe('Storefront API Plan', () => {
     (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/plans`)).thenReturn((0, _mswWhenThen.ok)([testPlan]));
     const instance = new TestPlansInstance();
     jest.spyOn(instance.storefront.plans, 'getAll');
-    const response = await instance.fetchPlans({});
+    const response = await (0, _plans.fetchPlans)({
+      state: instance
+    });
     expect(instance.storefront.plans.getAll).toBeCalledTimes(1);
     expect(instance.storefront.plans.getAll).toBeCalledWith({
       filter: ''
@@ -51,7 +51,8 @@ describe('Storefront API Plan', () => {
   it('can fetch plans with filter', async () => {
     const instance = new TestPlansInstance();
     jest.spyOn(instance.storefront.plans, 'getAll');
-    await instance.fetchPlans({
+    await (0, _plans.fetchPlans)({
+      state: instance,
       data: {
         lineItems: [{
           planId: 'test-plan-id-1'
@@ -64,28 +65,27 @@ describe('Storefront API Plan', () => {
       filter: 'id:test-plan-id-1,test-plan-id-2'
     });
   });
-  it('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
     const noConfigOrOptionsInstance = new TestPlansInstance({
       configs: null,
       options: null
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _plans.fetchPlans)({
+      state: noConfigOrOptionsInstance
+    }));
     const noConfigInstance = new TestPlansInstance({
       configs: null,
       options: {}
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _plans.fetchPlans)({
+      state: noConfigInstance
+    }));
     const noOptionsInstance = new TestPlansInstance({
       configs: {},
       options: null
     });
-    expect(async () => {
-      await noConfigOrOptionsInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noConfigInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noOptionsInstance.fetchPlans();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await (0, _asyncUtilities.expectConfigurationError)((0, _plans.fetchPlans)({
+      state: noOptionsInstance
+    }));
   });
 });

package/dist/storefront/products.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchProducts = FetchProducts;
+exports.fetchProducts = fetchProducts;
 
 var _productModel = _interopRequireDefault(require("./models/product-model"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-async function FetchProducts({
-  data = null
-} = {}) {
-  if (!this.storefront) {
+async function fetchProducts({
+  data = null,
+  state
+}) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
+  if (!state.configs || !state.options) {
     throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
   }
 
@@ -32,13 +33,11 @@ async function FetchProducts({
 
     const {
       items: productItems
-    } = await this.storefront.products.getAll(filterByProductId);
+    } = await state.storefront.products.getAll(filterByProductId);
     return productItems.map(({
       fields
     }) => new _productModel.default(fields));
   } catch (error) {
     throw error;
   }
-}
-
-;
+}