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

package/dist/functions/initialize.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Initialize = Initialize;
+exports.initialize = initialize;
 
 var _storefront = _interopRequireDefault(require("../storefront"));
 
@@ -41,10 +41,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 /**
- * 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(configs = {}) {
+
+/**
+ * Initialize library with configurations.
+ * @param {InitializeParams} params
+ */
+function initialize({
+  state,
+  configs
+}) {
   const {
     organizationId,
     publishableKey,
@@ -53,33 +62,28 @@ function Initialize(configs = {}) {
     i18n,
     theme,
     css,
-    _dev = {
-      liveUrl: null,
-      sandboxUrl: null
-    }
+    _dev = null
   } = configs;
-  this.configs = {
+  state.configs = {
     organizationId,
     publishableKey,
     websiteId,
     apiMode,
     i18n,
     theme,
-    css,
-    _dev
+    css
   };
   const storefront = {
-    publishableKey: this.configs.publishableKey,
-    orgnizationId: this.configs.orgnizationId,
-    mode: this.configs.apiMode
+    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,6 +1,6 @@
 "use strict";
 
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
 describe('RebillyInstruments instance', () => {
   it('should should set configs', () => {
@@ -15,11 +15,11 @@ describe('RebillyInstruments instance', () => {
       }
     };
     const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(testConfigs);
-    expect(rebillyInstruments.configs).toEqual(testConfigs);
+    expect(rebillyInstruments.state.configs).toEqual(testConfigs);
   });
   it('should setup api instance', () => {
     const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect(rebillyInstruments.storefront).toHaveProperty('setPublishableKey');
+    expect(rebillyInstruments.state.storefront).toHaveProperty('setPublishableKey');
   });
   it('should have the right developer settings', () => {
     const devOptions = {
@@ -29,6 +29,6 @@ describe('RebillyInstruments instance', () => {
       }
     };
     const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(devOptions);
-    expect(rebillyInstruments.configs._dev).toEqual(devOptions._dev);
+    expect(rebillyInstruments.state.configs._dev).toEqual(devOptions._dev);
   });
 });

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

@@ -3,24 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchSummaryData = FetchSummaryData;
+exports.fetchSummaryData = fetchSummaryData;
 
-async function FetchSummaryData({
-  riskMetadata,
+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 required for FetchSummaryData');
+    throw new Error('riskMetadata is required for FetchSummaryData');
   }
 
-  const [readyToPay, summary] = await Promise.all([this._fetchReadyToPay(riskMetadata), this._fetchSummary({
-    data: summaryPayload
+  const [readyToPay, summary] = await Promise.all([(0, _readyToPay.fetchReadyToPay)({
+    riskMetadata,
+    state
+  }), (0, _summary.fetchSummary)({
+    data: summaryPayload,
+    state
   })]);
-  const plans = await this._fetchPlans({
-    data: summary
+  const plans = await (0, _plans.fetchPlans)({
+    data: summary,
+    state
   });
-  const products = await this._fetchProducts({
-    data: plans
+  const products = await (0, _products.fetchProducts)({
+    data: plans,
+    state
   });
   return {
     readyToPay,

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

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

package/dist/functions/mount/index.js

@@ -3,20 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Mount = Mount;
+exports.mount = mount;
 
 var _riskDataCollector = require("@rebilly/risk-data-collector");
 
 var _lodash = _interopRequireDefault(require("lodash.merge"));
 
-var _main = require("../../styles/main");
+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.
@@ -25,38 +35,42 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 /**
-* @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 {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 {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 {GooglePayMerchantConfig} GooglePay
-* @param {string} merchantName - todo...
-* @param {string} merchantOrigin - todo...
-*/
+ * @typedef {object} GooglePay
+ * @param {GooglePayDisplayOptions} displayOptions - display options for google pay instrument
+ */
 
 /**
-* @typedef {object} GooglePay
-* @param {GooglePayDisplayOptions} displayOptions - display options for google pay ionstrument
-* @param {GooglePayMerchantConfig} merchantConfig - merchant configurations for google pay ionstrument
-*/
+ * @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} 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
@@ -64,17 +78,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * <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.
-* <vr>Can use RebillyInstruments.show('confirmation', options) to mount defautl component
-* @param {boolean} autoResult - default: true. Show results of transaction after `purchase-complete` 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} 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
@@ -86,30 +101,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /**
  * Mount library with configurations.
- * @param {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
- * @param {string | HTMLElement} summary - The CSS class or HTML element were the summary will be mounted.
- * @param {Options} options - The configurations that are to be passed to the library for use.
+ * @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({
+async function mount({
+  state,
   form = '.rebilly-instruments',
   summary = '.rebilly-instruments-summary',
-  _dev = {
-    framePayScriptLink: null,
-    framePayStyleLink: null,
-    paymentMethodsUrl: null
-  },
-  options = {}
-} = {}) {
-  var _this$configs, _this$configs3;
-
-  this.form = form;
-  this.summary = 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.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js',
-    style: _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css'
+    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.paymentMethodsUrl || 'https://forms.secure-payments.app'
+    paymentMethodsUrl: _dev ? _dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000' : 'https://forms.secure-payments.app'
   };
   const OPTIONS_DEFAULTS = {
     intent: {
@@ -117,6 +139,13 @@ async function Mount({
     },
     locale: 'auto',
     paymentInstruments: {
+      address: {
+        name: 'default',
+        region: 'default',
+        hide: [],
+        show: [],
+        require: []
+      },
       compactExpressInstruments: true,
       googlePay: {
         displayOptions: {
@@ -125,6 +154,13 @@ async function Mount({
           buttonHeight: '44px'
         }
       },
+      applePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'plain',
+          buttonHeight: '44px'
+        }
+      },
       paymentCard: {
         popup: false
       }
@@ -133,67 +169,72 @@ async function Mount({
       autoConfirmation: true,
       autoResult: true
     }
-  }; // TODO: Only add _dev in dev enviroment
-
-  this.options = (0, _lodash.default)(OPTIONS_DEFAULTS, { ...options,
-    _dev,
+  };
+  const combinedOptions = { ...options,
     _computed
-  });
-  this.form = (0, _utils.processPropertyAsDOMElement)({
-    prop: this.form,
+  };
+
+  if (_dev) {
+    combinedOptions._dev = _dev;
+  }
+
+  state.options = (0, _lodash.default)(OPTIONS_DEFAULTS, combinedOptions);
+  state.form = (0, _utils.processPropertyAsDOMElement)({
+    prop: state.form,
     propName: 'form'
   });
-  this.summary = (0, _utils.processPropertyAsDOMElement)({
-    prop: this.summary,
+  state.summary = (0, _utils.processPropertyAsDOMElement)({
+    prop: state.summary,
     propName: 'summary',
     isRequired: false
   }); // Setup loader
 
-  this.loader.addDOMElement({
-    el: this.form
+  state.loader.addDOMElement({
+    el: state.form
   });
-  this.loader.addDOMElement({
+  state.loader.addDOMElement({
     section: 'summary',
-    el: this.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: (0, _main.MAIN_STYLE)(((_this$configs = this.configs) === null || _this$configs === void 0 ? void 0 : _this$configs.theme) || {}),
+    content: state.mainStyle,
     target: 'head'
   }); // Adds configs CSS to override any styles
 
-  if (this.configs.css) {
+  if (state.configs.css) {
     (0, _utils.addDOMElement)({
       element: 'style',
       attributes: {
         type: 'text/css'
       },
-      content: this.configs.css,
+      content: state.configs.css,
       target: 'head'
     });
   } // Adds FramePay
 
 
-  if (!document.querySelectorAll(`[framepay*="script"]`).length) {
+  if (!document.querySelectorAll('[framepay*="script"]').length) {
     (0, _utils.addDOMElement)({
       element: 'script',
       attributes: {
-        'framepay': 'script',
+        framepay: 'script',
         src: framePayUrls.script
       },
       target: 'head'
     });
   }
 
-  if (!document.querySelectorAll(`[framepay*="stylesheet"]`).length) {
+  if (!document.querySelectorAll('[framepay*="stylesheet"]').length) {
     (0, _utils.addDOMElement)({
       element: 'link',
       attributes: {
-        'framepay': 'stylesheet',
+        framepay: 'stylesheet',
         href: framePayUrls.style,
         rel: 'stylesheet'
       },
@@ -202,83 +243,104 @@ async function Mount({
   }
 
   try {
-    var _riskMetadata$browser, _this$configs2;
+    var _riskMetadata$browser, _state$configs2;
 
-    this.loader.startLoading({
+    state.loader.startLoading({
       section: 'summary',
       id: 'initSummary'
     });
-    this.loader.startLoading({
+    state.loader.startLoading({
       id: 'initForm'
     });
     const {
       riskMetadata
     } = await (0, _riskDataCollector.collectData)();
 
-    if (this.options.locale === 'auto' && riskMetadata !== null && riskMetadata !== void 0 && (_riskMetadata$browser = riskMetadata.browserData) !== null && _riskMetadata$browser !== void 0 && _riskMetadata$browser.language) {
+    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;
-      this.options.locale = language;
+      state.options.locale = language;
     }
 
-    const i18n = ((_this$configs2 = this.configs) === null || _this$configs2 === void 0 ? void 0 : _this$configs2.i18n) || {};
-    this.translate.init(this.options.locale, i18n);
+    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 _fetchSummaryData.FetchSummaryData.call(this, {
-      riskMetadata
+    } = await (0, _fetchSummaryData.fetchSummaryData)({
+      riskMetadata,
+      state
     });
+    state.hasMounted = true;
 
-    if (this.form) {
-      this.formOptions = {
+    if (state.form) {
+      const formOptions = {
         summary: summaryData,
+        mainStyle: state.mainStyle,
         readyToPay,
         plans,
         products
       };
-
-      this._mountForm(this.formOptions);
+      (0, _methodSelector.mountMethodSelector)({
+        state,
+        formOptions
+      });
     }
 
-    if (this.summary) {
-      this.summaryOptions = {
+    if (state.summary) {
+      const summaryOptions = {
         summary: summaryData,
         readyToPay,
         plans,
         products
       };
-
-      this._mountSummary(this.summaryOptions);
+      (0, _summary.mountSummary)({
+        state,
+        summaryOptions
+      });
     }
   } catch (error) {
     throw error;
   }
 
-  const i18n = ((_this$configs3 = this.configs) === null || _this$configs3 === void 0 ? void 0 : _this$configs3.i18n) || {};
-  this.translate.init(this.options.locale, i18n);
-  this.translate.translateItems();
-
-  if (this.options.features.autoConfirmation) {
-    this.on('instrument-ready', instrument => {
-      this.show('confirmation', {
-        instrument
-      });
+  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 (this.options.features.autoResult) {
-    this.on('purchase-complete', purchase => {
-      this.show('result', {
-        purchase
-      });
+  if (state.options.features.autoResult) {
+    (0, _on.on)({
+      eventName: 'purchase-completed',
+      callback: purchase => {
+        (0, _show.show)({
+          componentName: 'result',
+          payload: {
+            purchase,
+            mainStyle: state.mainStyle
+          },
+          state
+        });
+      }
     });
   }
-}
-
-;
+}