@rebilly/instruments 3.1.0-beta.0 → 3.1.4-beta.0

package/dist/functions/setup.spec.js

@@ -1,87 +0,0 @@
-"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 _events = _interopRequireDefault(require("../events"));
-
-var _asyncUtilities = require("../../tests/async-utilities");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('RebillyInstruments setup', () => {
-  it('should be able to setup a payment instrument', async () => {
-    const options = {
-      websiteId: 'test-website-id',
-      money: {
-        amount: 30,
-        currency: 'USD'
-      },
-      transactionType: 'setup'
-    };
-    const token = {
-      id: 'test-token-id'
-    };
-    const billingAddress = {
-      billing: 'address'
-    };
-    const deliveryAddress = {
-      delivery: 'address'
-    };
-    const paymentInstrumentFields = {
-      id: 'payment-instrument-id'
-    };
-    const paymentInstrumentSetupFields = {
-      id: 'payment-instrument-id',
-      approvalUrl: null
-    };
-    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/payment-instruments`)).thenReturn((0, _mswWhenThen.ok)(paymentInstrumentFields));
-    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/payment-instruments/*/setup`)).thenReturn((0, _mswWhenThen.ok)(paymentInstrumentSetupFields));
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)(options);
-    const spyCreatePaymentInstrument = jest.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'create');
-    const spySetupPaymentInstrument = jest.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'setup');
-    const spyDispatchSetupCompleted = jest.spyOn(_events.default.setupCompleted, 'dispatch');
-    const setupCompletedListener = jest.fn();
-    rebillyInstruments.on('setup-completed', setupCompletedListener);
-    const setupPayload = {
-      billingAddress,
-      deliveryAddress,
-      ...options.money,
-      _raw: token
-    };
-    rebillyInstruments.mock.data({
-      previewPurchase: {
-        currency: 'USD',
-        total: 30
-      }
-    });
-    await rebillyInstruments.setup(setupPayload);
-    expect(spyCreatePaymentInstrument).toBeCalledTimes(1);
-    expect(spyCreatePaymentInstrument).toBeCalledWith(expect.objectContaining({
-      data: expect.objectContaining({
-        token: token.id
-      })
-    }));
-    expect(spySetupPaymentInstrument).toBeCalledTimes(1);
-    expect(spySetupPaymentInstrument).toBeCalledWith(expect.objectContaining({
-      id: expect.stringContaining(paymentInstrumentFields.id),
-      data: expect.objectContaining({
-        websiteId: rebillyInstruments.state.options.websiteId,
-        currency: 'USD',
-        amount: 30
-      })
-    }));
-    expect(spyDispatchSetupCompleted).toBeCalledTimes(1);
-    expect(setupCompletedListener).toBeCalledTimes(1);
-    expect(setupCompletedListener).toBeCalledWith(expect.objectContaining({
-      instrument: paymentInstrumentFields,
-      transaction: paymentInstrumentSetupFields
-    }));
-    await (0, _asyncUtilities.avoidUnhandledPromises)();
-  });
-});

package/dist/functions/show.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.show = show;
-
-var _confirmation = require("../views/confirmation");
-
-var _result = require("../views/result");
-
-/**
- @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.
- */
-
-/**
- * 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;
-      });
-      (0, _result.mountResult)({
-        payload,
-        state
-      });
-      break;
-
-    case 'confirmation':
-      state.iframeComponents = state.iframeComponents.filter(iframe => {
-        iframe.destroy();
-        return false;
-      });
-      (0, _confirmation.mountConfirmation)({
-        payload,
-        state
-      });
-      break;
-
-    default:
-      throw new Error(`'${componentName}' not a supported component`);
-  }
-}

package/dist/functions/show.spec.js

@@ -1,61 +0,0 @@
-"use strict";
-
-var result = _interopRequireWildcard(require("../views/result"));
-
-var confirmation = _interopRequireWildcard(require("../views/confirmation"));
-
-var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
-
-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,
-      state: instance.state
-    });
-    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,
-      state: instance.state
-    });
-    expect(instance.state.iframeComponents).toEqual([]);
-  });
-  it('should fail for non supported component', async () => {
-    const rebillyInstruments = new _index.RebillyInstrumentsInstance();
-    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

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.update = update;
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _destroy = require("./destroy");
-
-var _mount = require("./mount");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function sanitizeOldPurchaseData({
-  newOptions
-}) {
-  let purchaseData = {};
-  const hasPurchaseDataKeys = Object.keys(newOptions).some(key => ['items', 'money', 'invoiceId', 'transactionId'].includes(key));
-  purchaseData = hasPurchaseDataKeys ? {
-    items: null,
-    money: null,
-    invoiceId: null,
-    transactionId: null
-  } : purchaseData;
-  return purchaseData;
-}
-
-;
-
-async function update({
-  state,
-  newOptions = {}
-}) {
-  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 updatingJustLocale =
-  //   newOptions?.options && isEqual(Object.keys(newOptions), ['locale']);
-  // if (updatingJustLocale) {
-  //   const updatedOptions = merge(state.options, newOptions);
-  //   const newLocale = newOptions?.locale;
-  //   state.options = updatedOptions;
-  //   state.translate.updateTranslationsToNewLocale(newLocale);
-  //   state.iframeComponents.forEach((iframe) =>
-  //     iframe.component.call('changeLocale', newLocale)
-  //   );
-  //   return;
-  // }
-
-
-  const oldOptions = { ...state.options,
-    ...sanitizeOldPurchaseData({
-      newOptions
-    })
-  };
-  const updatedOptions = (0, _lodash.default)({ ...oldOptions
-  }, newOptions);
-  await (0, _destroy.destroy)({
-    state
-  });
-  (0, _mount.mount)({
-    state,
-    form: state.form,
-    summary: state.summary,
-    ...updatedOptions
-  });
-}

package/dist/functions/update.spec.js

@@ -1,86 +0,0 @@
-"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({
-      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({
-      countryCode: 'ES'
-    });
-    expect(rebillyInstruments.state.options.countryCode).toEqual('ES');
-    await (0, _asyncUtilities.avoidUnhandledPromises)();
-  });
-  it('should replace the 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({
-      items: [{
-        planId: 'test-plan-id-1',
-        quantity: 5
-      }]
-    });
-    expect(rebillyInstruments.state.options.items[0].quantity).toEqual(5);
-    await (0, _asyncUtilities.avoidUnhandledPromises)();
-  });
-});

package/dist/i18n/en.json

@@ -1,22 +0,0 @@
-{
-  "en": {
-    "summary": {
-      "subTotal": "Sub Total",
-      "discounts": "Discounts",
-      "taxes": "Taxes",
-      "shipping": "Shipping",
-      "total": "Total"
-    },
-    "form": {
-      "expressCheckout": "Express checkout",
-      "or": "Or",
-      "popupOverlayText": "Click here to show popup window",
-      "error": {
-        "noPaymentMethods": "No payment methods available for this transaction, please contact support."
-      }
-    },
-    "paymentMethods": {
-      "payment-card": "Payment card"
-    }
-  }
-}

package/dist/i18n/es.json

@@ -1,22 +0,0 @@
-{
-  "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",
-      "error": {
-        "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia."
-      }
-    },
-    "paymentMethods": {
-      "payment-card": "Tarjeta de crédito"
-    }
-  }
-}

package/dist/i18n/i18n.spec.js

@@ -1,22 +0,0 @@
-"use strict";
-
-var _index = require("./index");
-
-describe('i18n Class', () => {
-  const canTranslate = document.createElement('div');
-  canTranslate.innerHTML = 'Discounts';
-  canTranslate.setAttribute('data-rebilly-i18n', 'summary.discounts');
-  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', () => {
-    const translate = new _index.Translate();
-    translate.init('es-US');
-    translate.translateItems();
-    const [translated, untouched] = document.querySelectorAll('[data-rebilly-i18n]');
-    expect(translated.innerHTML).toEqual('Descuentos');
-    expect(untouched.innerHTML).toEqual('Untouched');
-  });
-});

package/dist/i18n/index.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Translate = void 0;
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _en = _interopRequireDefault(require("./en.json"));
-
-var _es = _interopRequireDefault(require("./es.json"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class Translate {
-  constructor() {
-    this.locale = '';
-    this.items = [];
-    this.languages = {};
-  }
-
-  init(locale, messages) {
-    this.items = document.querySelectorAll('[data-rebilly-i18n]');
-    this.locale = this.getLocale(locale);
-    this.languages = (0, _lodash.default)({}, { ..._en.default,
-      ..._es.default
-    }, messages);
-  }
-
-  translateItems() {
-    this.items = document.querySelectorAll('[data-rebilly-i18n]');
-
-    if (this.locale in this.languages) {
-      return this.items.forEach(item => {
-        const translate = this.getTranslation(this.languages[this.locale], item.dataset.rebillyI18n);
-
-        if (translate) {
-          item.innerHTML = translate;
-        }
-      });
-    }
-
-    return false;
-  }
-
-  updateTranslationsToNewLocale(newLocale) {
-    this.locale = newLocale;
-    this.translateItems();
-  }
-
-  getLocale(locale = this.locale) {
-    if (!locale.includes('-') || locale in this.languages) {
-      return locale;
-    }
-
-    locale = locale.replace(/[-._]\w+$/gi, '');
-    return this.getLocale(locale);
-  }
-
-  translateItem(item) {
-    const locale = this.getLocale();
-    return this.getTranslation(this.languages[locale], item.dataset.rebillyI18n);
-  }
-
-  getTranslation(lan = this.locale, prop) {
-    return prop.split('.').reduce((acc, val) => acc === null || acc === void 0 ? void 0 : acc[val], lan);
-  }
-
-}
-
-exports.Translate = Translate;

package/dist/index.spec.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _index = _interopRequireWildcard(require("./index"));
-
-var _asyncUtilities = require("../tests/async-utilities");
-
-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; }
-
-describe('RebillyInstruments instance', () => {
-  let rebillyInstruments;
-  beforeEach(() => {
-    rebillyInstruments = _index.default;
-  });
-  it('should have default export as instance of class', () => {
-    expect(_index.default).toBeInstanceOf(_index.RebillyInstrumentsInstance);
-  });
-  it('should be mountable', async () => {
-    jest.spyOn(rebillyInstruments, 'mount');
-    document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      items: []
-    };
-    await rebillyInstruments.mount(options);
-    expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
-    await (0, _asyncUtilities.avoidUnhandledPromises)();
-  });
-});

package/dist/loader/index.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Loader = void 0;
-
-var _isDomElement = _interopRequireDefault(require("../utils/is-dom-element"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class Loader {
-  constructor() {
-    this.summary = [];
-    this.form = [];
-    this.modal = [];
-    this.DOM = {
-      loading: `
-                <div class="rebilly-instruments-loader is-active">
-                    <div class="rebilly-instruments-loader-spinner"></div>
-                </div>
-            `
-    };
-  }
-
-  addDOMElement({
-    section = 'form',
-    el = null
-  } = {}) {
-    if ((0, _isDomElement.default)(el)) {
-      el.style.position = 'relative';
-      this.DOM[section] = el;
-    }
-  }
-
-  startLoading({
-    section = 'form',
-    id = ''
-  } = {}) {
-    var _this$DOM;
-
-    const minHeight = '200px';
-    this[section].push(id);
-
-    if ((_this$DOM = this.DOM) !== null && _this$DOM !== void 0 && _this$DOM[section]) {
-      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('is-active');
-      }
-
-      this.DOM[section].style.minHeight = minHeight;
-    }
-  }
-
-  stopLoading({
-    section = 'form',
-    id = ''
-  } = {}) {
-    const idIndex = this[section].indexOf(id);
-
-    if (idIndex !== -1) {
-      this[section].splice(idIndex, 1);
-    }
-
-    if (!this[section].length && this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-      this.DOM[section].querySelector('.rebilly-instruments-loader').classList.remove('is-active');
-      this.DOM[section].style.minHeight = '';
-    }
-  }
-
-  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;