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

package/dist/functions/destroy.spec.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _events = _interopRequireWildcard(require("../events"));
+
+var _baseEvent = _interopRequireDefault(require("../events/base-event"));
+
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 Destroy', () => {
+  it('should be able to destroy instance', 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('');
+    await rebillyInstruments.destroy();
+    expect(formElement.innerHTML).toEqual('');
+    expect(summaryElement.innerHTML).toEqual('');
+  });
+  it('should remove registered listeners', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    const fakeEventListener = jest.fn();
+    _events.default.fakeEvent = new _baseEvent.default('fake-event');
+
+    _events.publicEventNames.push('fake-event');
+
+    rebillyInstruments.on('fake-event', fakeEventListener);
+
+    _events.default.fakeEvent.dispatch();
+
+    expect(fakeEventListener).toHaveBeenCalledTimes(1);
+    fakeEventListener.mockClear();
+    await rebillyInstruments.destroy();
+
+    _events.default.fakeEvent.dispatch();
+
+    expect(fakeEventListener).not.toHaveBeenCalled();
+  });
+  it('should remove multiple listeners on the same event', async () => {
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
+    const fakeEventListener = jest.fn();
+    const anotherFakeEventListener = jest.fn();
+    _events.default.fakeEvent = new _baseEvent.default('fake-event');
+
+    _events.publicEventNames.push('fake-event');
+
+    rebillyInstruments.on('fake-event', fakeEventListener);
+    rebillyInstruments.on('fake-event', anotherFakeEventListener);
+
+    _events.default.fakeEvent.dispatch();
+
+    expect(fakeEventListener).toHaveBeenCalledTimes(1);
+    expect(anotherFakeEventListener).toHaveBeenCalledTimes(1);
+    fakeEventListener.mockClear();
+    anotherFakeEventListener.mockClear();
+    await rebillyInstruments.destroy();
+
+    _events.default.fakeEvent.dispatch();
+
+    expect(fakeEventListener).not.toHaveBeenCalled();
+    expect(anotherFakeEventListener).not.toHaveBeenCalled();
+  });
+});

package/dist/functions/initialize.js

@@ -3,14 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Initialize = Initialize;
+exports.initialize = initialize;
 
 var _storefront = _interopRequireDefault(require("../storefront"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {"live" | "sandbox"} ApiMode
+ * @typedef {Object} Typeography
+ * @param {string} fontFamily - Same as CSS property "font-family". Will be used thoughout the library ui
+ */
+
+/**
+ * @typedef {Object} Color
+ * @param {string} primary - CSS hexcode or color name, used to draw user attention
+ * @param {string} errorText - CSS hexcode or color name, used to display error messages
+ * @param {string} text - CSS hexcode or color name, used to display font color
+ * @param {string} buttonText - CSS hexcode or color name, used for buttons text, primary will be it's background
+ * @param {string} background - CSS hexcode or color name, the color used for the background of the forms
+ */
+
+/**
+ * @typedef {Object} Theme
+ * @param {Color} color - object with color properties
+ * @param {Typeography} typography - object with typography options
  */
 
 /**
@@ -18,53 +34,56 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * @property {string} organizationId - The Rebilly organization id that all api requests will be associated with.
  * @property {string} publishableKey - The Rebilly publishable api key used to access the storefront api's.
  * @property {string} websiteId - The Rebilly website api.
- * @property {ApiMode} apiMode - The mode for the Rebilly api. default "live".
+ * @property {"live" | "sandbox"} apiMode - default "live". The mode for the Rebilly api. default "live".
  * @property {string} css - CSS string that overrides any styles.
+ * @property {Theme} theme - CSS string that overrides any styles.
+ * @property {object} i18n - object containing the language defintions. (or overrides for existing languages)
  */
 
 /**
- * Initialize library with configurations.
+ * @typedef {Object} InitializeParams
+ * @param {Object} state - The global state.
  * @param {Configs} configs - The configurations that are to be passed to the library for use.
  */
-function Initialize() {
-  var configs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var organizationId = configs.organizationId,
-      publishableKey = configs.publishableKey,
-      websiteId = configs.websiteId,
-      _configs$apiMode = configs.apiMode,
-      apiMode = _configs$apiMode === void 0 ? 'live' : _configs$apiMode,
-      i18n = configs.i18n,
-      theme = configs.theme,
-      css = configs.css,
-      _configs$_dev = configs._dev,
-      _dev = _configs$_dev === void 0 ? {
-    liveUrl: null,
-    sandboxUrl: null
-  } : _configs$_dev;
 
-  this.configs = {
-    organizationId: organizationId,
-    publishableKey: publishableKey,
-    websiteId: websiteId,
-    apiMode: apiMode,
-    i18n: i18n,
-    theme: theme,
-    css: css,
-    _dev: _dev
+/**
+ * Initialize library with configurations.
+ * @param {InitializeParams} params
+ */
+function initialize({
+  state,
+  configs
+}) {
+  const {
+    organizationId,
+    publishableKey,
+    websiteId,
+    apiMode = 'live',
+    i18n,
+    theme,
+    css,
+    _dev = null
+  } = configs;
+  state.configs = {
+    organizationId,
+    publishableKey,
+    websiteId,
+    apiMode,
+    i18n,
+    theme,
+    css
   };
-  var storefront = {
-    publishableKey: this.configs.publishableKey,
-    orgnizationId: this.configs.orgnizationId,
-    mode: this.configs.apiMode
+  const storefront = {
+    publishableKey: state.configs.publishableKey,
+    orgnizationId: state.configs.orgnizationId,
+    mode: state.configs.apiMode || 'live'
   };
 
-  if (_dev.liveUrl || _dev.sandboxUrl) {
-    storefront.liveUrl = _dev.liveUrl;
-    storefront.sandboxUrl = _dev.sandboxUrl;
+  if (_dev) {
+    state.configs._dev = _dev;
+    storefront.liveUrl = _dev.liveUrl || 'https://api.local.rebilly.dev';
+    storefront.sandboxUrl = _dev.sandboxUrl || 'https://api-sandbox.local.rebilly.dev';
   }
 
-  this.storefront = (0, _storefront["default"])(storefront);
-}
-
-;
+  state.storefront = (0, _storefront.default)(storefront);
+}

package/dist/functions/initialize.spec.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
-describe('RebillyInstruments instance', function () {
-  it('should should set configs', function () {
-    var testConfigs = {
+describe('RebillyInstruments instance', () => {
+  it('should should set configs', () => {
+    const testConfigs = {
       apiMode: 'live',
       organizationId: 'test-organization-id',
       publishableKey: 'test-publishable-key',
@@ -14,21 +14,21 @@ describe('RebillyInstruments instance', function () {
         sandboxUrl: null
       }
     };
-    var rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(testConfigs);
-    expect(rebillyInstruments.configs).toEqual(testConfigs);
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(testConfigs);
+    expect(rebillyInstruments.state.configs).toEqual(testConfigs);
   });
-  it('should setup api instance', function () {
-    var rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect(rebillyInstruments.storefront).toHaveProperty('setPublishableKey');
+  it('should setup api instance', () => {
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    expect(rebillyInstruments.state.storefront).toHaveProperty('setPublishableKey');
   });
-  it('should have the right developer settings', function () {
-    var devOptions = {
+  it('should have the right developer settings', () => {
+    const devOptions = {
       _dev: {
         liveUrl: 'https://api.rebilly.com',
         sandboxUrl: 'https://api-sandbox.rebilly.com'
       }
     };
-    var rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(devOptions);
-    expect(rebillyInstruments.configs._dev).toEqual(devOptions._dev);
+    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(devOptions);
+    expect(rebillyInstruments.state.configs._dev).toEqual(devOptions._dev);
   });
 });

package/dist/functions/mount/fetch-summary-data.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fetchSummaryData = fetchSummaryData;
+
+var _plans = require("../../storefront/plans");
+
+var _products = require("../../storefront/products");
+
+var _readyToPay = require("../../storefront/ready-to-pay");
+
+var _summary = require("../../storefront/summary");
+
+async function fetchSummaryData({
+  state = null,
+  riskMetadata = null,
+  summaryPayload = null
+}) {
+  if (!riskMetadata) {
+    throw new Error('riskMetadata is required for FetchSummaryData');
+  }
+
+  const [readyToPay, summary] = await Promise.all([(0, _readyToPay.fetchReadyToPay)({
+    riskMetadata,
+    state
+  }), (0, _summary.fetchSummary)({
+    data: summaryPayload,
+    state
+  })]);
+  const plans = await (0, _plans.fetchPlans)({
+    data: summary,
+    state
+  });
+  const products = await (0, _products.fetchProducts)({
+    data: plans,
+    state
+  });
+  return {
+    readyToPay,
+    summary,
+    plans,
+    products
+  };
+}

package/dist/functions/mount/fetch-summary-data.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _fetchSummaryData = require("./fetch-summary-data");
+
+describe.skip('Fetch Summary Data function helper', () => {
+  class TestInstance {
+    constructor() {
+      this.storefront = jest.fn();
+      this.configs = jest.fn();
+      this.options = jest.fn();
+      this._fetchSummary = jest.fn(() => {
+        return new Promise(resolve => resolve({}));
+      });
+      this._fetchProducts = jest.fn();
+    }
+
+  }
+
+  it.skip('should fetch all the data', async () => {
+    const instance = new TestInstance();
+    await (0, _fetchSummaryData.fetchSummaryData)({
+      riskMetadata: {},
+      state: instance
+    });
+    expect(fetchReadyToPay).toBeCalledTimes(1);
+    expect(instance._fetchSummary).toBeCalledTimes(1);
+    expect(instance._fetchPlans).toBeCalledTimes(1);
+    expect(instance._fetchProducts).toBeCalledTimes(1);
+  });
+  it('should pass riskMetadata to ready to pay', async () => {
+    const testRiskMetadata = {};
+    const instance = new TestInstance();
+    await (0, _fetchSummaryData.fetchSummaryData)({
+      riskMetadata: testRiskMetadata,
+      state: instance
+    });
+    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
+    expect(async () => {
+      await (0, _fetchSummaryData.fetchSummaryData)({
+        state: instance
+      });
+    }).rejects.toEqual(new Error('riskMetadata is required for FetchSummaryData'));
+  });
+});

package/dist/functions/mount/index.js

@@ -0,0 +1,346 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mount = mount;
+
+var _riskDataCollector = require("@rebilly/risk-data-collector");
+
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+
+var _summary = require("../../views/summary");
+
+var _methodSelector = require("../../views/method-selector");
+
+var _style = require("../../style");
+
+var _utils = require("../../utils");
+
+var _fetchSummaryData = require("./fetch-summary-data");
+
+var _show = require("../show");
+
+var _on = require("../on");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable max-len */
+
+/**
+ * @typedef {object} Item
+ * @property {string} planId - The Rebilly id of the plan.
+ * @property {number} quantity - The number of the plans to be purchased.
+ * @property {string} thumbnail - The source img for the product. Recommend 100px by 100px.
+ */
+
+/**
+ * @typedef {object} Intent
+ * @property {"purchase" | "vault"} mode - Which mode the mount is usings. Default "purchase".
+ * @property {Array.<Item>} items - Which plans the customer is purchasing.
+ * @property {string} customerId - Which customer is associated with the instrument.
+ * @property {string} countryCode - The country code for the transaction
+ */
+
+/**
+ * @typedef {GooglePayDisplayOptions} GooglePay
+ * @param {"back" | "white"} buttonColor - default "black". Color of google pay button
+ * @param {"short" | "long"} buttonType - default "short". The length of the button
+ * @param {string} buttonHeight - The value and units of the button to match other payment buttons
+ * <br>example: "44px", "1rem" etc.
+ */
+
+/**
+ * @typedef {object} GooglePay
+ * @param {GooglePayDisplayOptions} displayOptions - display options for google pay instrument
+ */
+
+/**
+ * @typedef {object} PaymentCard
+ * @param {boolean} popup - default: false. Show method as a button with a form popup
+ * <br>Otherwise the form will be mounted inline.
+ */
+
+/**
+ * @typedef {object} Address
+ * @param {string} name - default: default. One of default, combined, or stacked.
+ * @param {string} region - default: default. One of default, split, or stacked.
+ * @param {Array.<"organization" | "phoneNumber">} show. Show extra fields listed.
+ * @param {Array.<"address" | "address2" | "email | "country" | "region" | "postalCode"">} hide. Hide the listed fields.
+ * @param {Array.<"organization" | "address" | "address2" | "email" | "phoneNumber" | "country" | "region" | "postalCode">} require.
+ * <br>If the field name is included, enforce the data for those inputs to be included.
+ * <br>First name and last name are always required. Country is always required if the products require shipping.
+ */
+
+/**
+ * @typedef {object} PaymentInstruments
+ * @param {boolean} compactExpressInstruments - default: true. Show express methods as
+ * <br>inline pill buttons, or list of full width button.
+ * @param {PaymentCard} paymentCard - settings for payment card instruments
+ * @param {GooglePay} googlePay - settings for google pay instruments
+ * @param {Address} address - customization for address components for all payment instruments.
+ */
+
+/**
+ * @typedef {object} Features
+ * @param {boolean} autoConfirmation - default: true. Will mount the confirmation screen after `instrument-ready`
+ * <br>event is triggered. Will need to trigger purchase manually if set to false.
+ * <br>Can use RebillyInstruments.show('confirmation', options) to mount defautl component
+ * @param {boolean} autoResult - default: true. Show results of transaction after `purchase-completed` event is triggered
+ * <br>Will need to handle purchase result manually if set to false.
+ * <br>Can use RebillyInstruments.show('result', options) to display default component
+ */
+
+/**
+ * @typedef {object} Options
+ * @property {Intent} intent - The information required for purchaseing or vaulting an instrument
+ * @property {PaymentInstruments} paymentInstruments - settings for various payment instruments
+ * @property {Features} features - flags to enable and disable different features
+ * @property {string} locale - default: auto. Language to render component text
+ */
+
+/**
+ * Mount library with configurations.
+ * @typedef {object} MountParams
+ * @property {Object} state - Global state
+ * @property {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
+ * @property {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
+ * @property {string | HTMLElement} summary - The CSS class or HTML element were the summary will be mounted.
+ * @property {Options} options - The configurations that are to be passed to the library for use.
+ */
+
+/**
+ * Mount library with configurations.
+ * @param {MountParams} params
+ */
+async function mount({
+  state,
+  form = '.rebilly-instruments',
+  summary = '.rebilly-instruments-summary',
+  options = {},
+  _dev = null
+}) {
+  var _state$configs, _state$configs3;
+
+  state.form = form;
+  state.summary = summary;
+  state.mainStyle = null;
+  state._dev = _dev;
+  const framePayUrls = {
+    script: _dev ? _dev.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js' : 'https://framepay.rebilly.com/rebilly.js',
+    style: _dev ? _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css' : 'https://framepay.rebilly.com/rebilly.css'
+  };
+  const _computed = {
+    paymentMethodsUrl: _dev ? _dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000' : 'https://forms.secure-payments.app'
+  };
+  const OPTIONS_DEFAULTS = {
+    intent: {
+      countryCode: 'US'
+    },
+    locale: 'auto',
+    paymentInstruments: {
+      address: {
+        name: 'default',
+        region: 'default',
+        hide: [],
+        show: [],
+        require: []
+      },
+      compactExpressInstruments: true,
+      googlePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'short',
+          buttonHeight: '44px'
+        }
+      },
+      applePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'plain',
+          buttonHeight: '44px'
+        }
+      },
+      paymentCard: {
+        popup: false
+      }
+    },
+    features: {
+      autoConfirmation: true,
+      autoResult: true
+    }
+  };
+  const combinedOptions = { ...options,
+    _computed
+  };
+
+  if (_dev) {
+    combinedOptions._dev = _dev;
+  }
+
+  state.options = (0, _lodash.default)(OPTIONS_DEFAULTS, combinedOptions);
+  state.form = (0, _utils.processPropertyAsDOMElement)({
+    prop: state.form,
+    propName: 'form'
+  });
+  state.summary = (0, _utils.processPropertyAsDOMElement)({
+    prop: state.summary,
+    propName: 'summary',
+    isRequired: false
+  }); // Setup loader
+
+  state.loader.addDOMElement({
+    el: state.form
+  });
+  state.loader.addDOMElement({
+    section: 'summary',
+    el: state.summary
+  }); // Adds base stylesheet
+
+  state.mainStyle = await (0, _style.mainStyle)(((_state$configs = state.configs) === null || _state$configs === void 0 ? void 0 : _state$configs.theme) || {});
+  (0, _utils.addDOMElement)({
+    element: 'style',
+    attributes: {
+      type: 'text/css'
+    },
+    content: state.mainStyle,
+    target: 'head'
+  }); // Adds configs CSS to override any styles
+
+  if (state.configs.css) {
+    (0, _utils.addDOMElement)({
+      element: 'style',
+      attributes: {
+        type: 'text/css'
+      },
+      content: state.configs.css,
+      target: 'head'
+    });
+  } // Adds FramePay
+
+
+  if (!document.querySelectorAll('[framepay*="script"]').length) {
+    (0, _utils.addDOMElement)({
+      element: 'script',
+      attributes: {
+        framepay: 'script',
+        src: framePayUrls.script
+      },
+      target: 'head'
+    });
+  }
+
+  if (!document.querySelectorAll('[framepay*="stylesheet"]').length) {
+    (0, _utils.addDOMElement)({
+      element: 'link',
+      attributes: {
+        framepay: 'stylesheet',
+        href: framePayUrls.style,
+        rel: 'stylesheet'
+      },
+      target: 'head'
+    });
+  }
+
+  try {
+    var _riskMetadata$browser, _state$configs2;
+
+    state.loader.startLoading({
+      section: 'summary',
+      id: 'initSummary'
+    });
+    state.loader.startLoading({
+      id: 'initForm'
+    });
+    const {
+      riskMetadata
+    } = await (0, _riskDataCollector.collectData)();
+
+    if (state.options.locale === 'auto' && riskMetadata !== null && riskMetadata !== void 0 && (_riskMetadata$browser = riskMetadata.browserData) !== null && _riskMetadata$browser !== void 0 && _riskMetadata$browser.language) {
+      const {
+        browserData: {
+          language
+        }
+      } = riskMetadata;
+      state.options.locale = language;
+    }
+
+    const i18n = ((_state$configs2 = state.configs) === null || _state$configs2 === void 0 ? void 0 : _state$configs2.i18n) || {};
+    state.translate.init(state.options.locale, i18n);
+    const {
+      readyToPay,
+      summary: summaryData,
+      plans,
+      products
+    } = await (0, _fetchSummaryData.fetchSummaryData)({
+      riskMetadata,
+      state
+    });
+    state.hasMounted = true;
+
+    if (state.form) {
+      const formOptions = {
+        summary: summaryData,
+        mainStyle: state.mainStyle,
+        readyToPay,
+        plans,
+        products
+      };
+      (0, _methodSelector.mountMethodSelector)({
+        state,
+        formOptions
+      });
+    }
+
+    if (state.summary) {
+      const summaryOptions = {
+        summary: summaryData,
+        readyToPay,
+        plans,
+        products
+      };
+      (0, _summary.mountSummary)({
+        state,
+        summaryOptions
+      });
+    }
+  } catch (error) {
+    throw error;
+  }
+
+  const i18n = ((_state$configs3 = state.configs) === null || _state$configs3 === void 0 ? void 0 : _state$configs3.i18n) || {};
+  state.translate.init(state.options.locale, i18n);
+  state.translate.translateItems();
+
+  if (state.options.features.autoConfirmation) {
+    (0, _on.on)({
+      eventName: 'instrument-ready',
+      callback: instrument => {
+        (0, _show.show)({
+          componentName: 'confirmation',
+          payload: {
+            instrument,
+            mainStyle: state.mainStyle
+          },
+          state
+        });
+      }
+    });
+  }
+
+  if (state.options.features.autoResult) {
+    (0, _on.on)({
+      eventName: 'purchase-completed',
+      callback: purchase => {
+        (0, _show.show)({
+          componentName: 'result',
+          payload: {
+            purchase,
+            mainStyle: state.mainStyle
+          },
+          state
+        });
+      }
+    });
+  }
+}