@rebilly/instruments 1.0.2-beta.9 → 3.0.0-beta.0

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

@@ -0,0 +1,189 @@
+"use strict";
+
+var _fetchData = require("./fetch-data");
+
+var _transactionModel = _interopRequireDefault(require("../../storefront/models/transaction-model"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('fetchData function', () => {
+  it('Should use correct invoice id for invoiceId', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {
+        invoiceId
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(expect.objectContaining({
+      data: {
+        id: invoiceId
+      }
+    }));
+  });
+  it('Should use correct invoice id for transaction with invoiceIds', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new _transactionModel.default({
+          invoiceIds: [invoiceId]
+        })
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(expect.objectContaining({
+      data: {
+        id: invoiceId
+      }
+    }));
+  });
+  it('Should not fetch invoice for transaction with no invoice Ids', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new _transactionModel.default({
+          invoiceIds: []
+        })
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(0);
+  });
+});
+describe('DataInstance', () => {
+  it('Should correctly determine amountAndCurrency', () => {
+    const expectedAmountAndCurrency = {
+      amount: 10,
+      currency: 'USD'
+    };
+    let fetchedData = new _fetchData.DataInstance({
+      state: {
+        options: {
+          money: { ...expectedAmountAndCurrency
+          }
+        }
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(expect.objectContaining(expectedAmountAndCurrency));
+    fetchedData = new _fetchData.DataInstance({
+      previewPurchase: {
+        total: expectedAmountAndCurrency.amount,
+        currency: expectedAmountAndCurrency.currency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(expect.objectContaining(expectedAmountAndCurrency));
+    fetchedData = new _fetchData.DataInstance({
+      invoice: { ...expectedAmountAndCurrency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(expect.objectContaining(expectedAmountAndCurrency));
+    fetchedData = new _fetchData.DataInstance({
+      transaction: { ...expectedAmountAndCurrency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(expect.objectContaining(expectedAmountAndCurrency));
+    fetchedData = new _fetchData.DataInstance();
+    expect(fetchedData.amountAndCurrency).toEqual(expect.objectContaining({
+      amount: undefined,
+      currency: undefined
+    }));
+  });
+  it('Should correctly determine isPayment', () => {
+    let fetchedData = new _fetchData.DataInstance({
+      state: {
+        options: {
+          money: true
+        }
+      }
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+    fetchedData = new _fetchData.DataInstance({
+      invoice: true
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+    fetchedData = new _fetchData.DataInstance({
+      transaction: true
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+    fetchedData = new _fetchData.DataInstance({
+      previewPurchase: true
+    });
+    expect(fetchedData.isPayment).toBeFalsy();
+    fetchedData = new _fetchData.DataInstance({});
+    expect(fetchedData.isPayment).toBeFalsy();
+  });
+  it('Should correctly determine isPurchase', () => {
+    let fetchedData = new _fetchData.DataInstance({
+      previewPurchase: true
+    });
+    expect(fetchedData.isPurchase).toBeTruthy();
+    fetchedData = new _fetchData.DataInstance({
+      state: {
+        options: {
+          money: true
+        }
+      }
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+    fetchedData = new _fetchData.DataInstance({
+      invoice: true
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+    fetchedData = new _fetchData.DataInstance({
+      transaction: true
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+    fetchedData = new _fetchData.DataInstance({});
+    expect(fetchedData.isPurchase).toBeFalsy();
+  });
+  it('Should get summaryItems', () => {
+    const expectedSummaryItems = {
+      discountsAmount: 1,
+      shippingAmount: 2,
+      subtotalAmount: 3,
+      taxAmount: 4
+    };
+    let fetchedData = new _fetchData.DataInstance({
+      previewPurchase: { ...expectedSummaryItems
+      }
+    });
+    expect(fetchedData.summaryItems).toEqual(expect.objectContaining(expectedSummaryItems));
+    fetchedData = new _fetchData.DataInstance({
+      invoice: { ...expectedSummaryItems
+      }
+    });
+    expect(fetchedData.summaryItems).toEqual(expect.objectContaining(expectedSummaryItems));
+  });
+  it('Should get summaryLineItems', () => {
+    const expectedSummaryLineItems = [{
+      line: 'item'
+    }];
+    let fetchedData = new _fetchData.DataInstance({
+      previewPurchase: {
+        lineItems: expectedSummaryLineItems
+      }
+    });
+    expect(fetchedData.summaryLineItems).toEqual(expectedSummaryLineItems);
+    fetchedData = new _fetchData.DataInstance({
+      invoice: {
+        items: expectedSummaryLineItems
+      }
+    });
+    expect(fetchedData.summaryLineItems).toEqual(expectedSummaryLineItems);
+  });
+});

package/dist/functions/mount/index.js

@@ -3,17 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Mount = Mount;
+exports.mount = mount;
 
-var _riskDataCollector = require("@rebilly/risk-data-collector");
+var _summary = require("../../views/summary");
 
-var _lodash = _interopRequireDefault(require("lodash.merge"));
+var _methodSelector = require("../../views/method-selector");
 
-var _style = require("../../style");
+var _fetchData = require("./fetch-data");
 
-var _utils = require("../../utils");
+var _show = require("../show");
 
-var _fetchSummaryData = require("./fetch-summary-data");
+var _on = require("../on");
+
+var _setupElement = _interopRequireDefault(require("./setup-element"));
+
+var _setupStorefront = _interopRequireDefault(require("./setup-storefront"));
+
+var _setupOptions = _interopRequireDefault(require("./setup-options"));
+
+var _setupFramepay = _interopRequireDefault(require("./setup-framepay"));
+
+var _setupStyles = _interopRequireDefault(require("./setup-styles"));
+
+var _setupI18n = _interopRequireDefault(require("./setup-i18n"));
+
+var _setupFramepayTheme = _interopRequireDefault(require("./setup-framepay-theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -24,282 +38,181 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @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} GooglePayDisplayOptions
+ * @property {"back" | "white"} [buttonColor=black] - Color of google pay button
+ * @property {"short" | "long"} [buttonType=short] - The length of the button
+ * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ *
+ * @typedef {object} ApplePayDisplayOptions
+ * @property {"back" | "white"} [buttonColor=black] - Color of apple pay button
+ * @property {"short" | "long"} [buttonType=short] - The length of the button
+ * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ *
+ * @typedef {object} ApplePayMerchantOptions
+ * @property {string} merchantName - The name of the merchant store.
+ *
+ * @typedef {object} GooglePay
+ * @property {GooglePayDisplayOptions} displayOptions - display options for google pay instrument
+ *
+ * @typedef {object} ApplePay
+ * @property {ApplePayDisplayOptions} displayOptions - display options for apple pay instrument
+ * @property {ApplePayMerchantOptions} merchantOptions - merchant options for apple pay instrument
+ *
+ * @typedef {object} PaymentCard
+ * @property {boolean} [popup=true] - Show method as a button with a form popup. 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.
- */
-
-/**
+ * @property {string} [name=default] - One of default, combined, or stacked.
+ * @property {string} [region=default] - One of default, split, or stacked.
+ * @property {Array.<"organization" | "phoneNumber">} show - Show extra fields listed.
+ * @property {Array.<"address" | "address2" | "email | "country" | "region" | "postalCode"">} hide - Hide the listed fields.
+ * @property {Array.<"organization" | "address" | "address2" | "email" | "phoneNumber" | "country" | "region" | "postalCode">} require - Require the listed fields.
+ *
  * @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
+ * @property {boolean} [compactExpressInstruments=true] - Show express methods as inline pill buttons, or list of full width button.
+ * @property {PaymentCard} paymentCard - settings for payment card instruments
+ * @property {GooglePay} googlePay - settings for google pay instruments
+ * @property {ApplePay} applePay - settings for apple pay instruments
+ * @property {Address} address - customization for address components for all payment instruments.
+ *
+ * @typedef {object} Features
+ * @property {boolean} [autoConfirmation=true] - Will mount the confirmation screen after `instrument-ready` event is triggered.
+ * @property {boolean} [autoResult=true] - Show results of transaction after `purchase-completed` event is triggered
  */
 
 /**
  * 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.
+ * @param {object} options - The options object
+ * @param {object} options.state - Global state
+ * @param {string | HTMLElement} options.form - The CSS class or HTML element were the form will be mounted.
+ * @param {string | HTMLElement} options.summary - The CSS class or HTML element were the summary will be mounted.
+ * @param {Item[]} options.items - Which plans the customer is purchasing.
+ * @param {string} options.invoiceId - The Rebilly id of the invoice used for purchasing.
+ * @param {string} options.customerJwt - The customer token to access the invoice.
+ * @param {string} [options.countryCode=USD] - The country code for the transaction
+ * @param {PaymentInstruments} options.paymentInstruments - settings for various payment instruments
+ * @param {Features} options.features - flags to enable and disable different features
+ * @param {string} options.locale - default: auto. Language to render component text
  */
-async function Mount({
-  form = '.rebilly-instruments',
-  summary = '.rebilly-instruments-summary',
-  options = {},
-  _dev = null
+async function mount({
+  state,
+  ...options
 } = {}) {
-  var _this$configs, _this$configs3;
-
-  this.form = form;
-  this.summary = summary;
-  this.mainStyle = null;
-  this._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'
-        }
-      },
-      paymentCard: {
-        popup: false
-      }
-    },
-    features: {
-      autoConfirmation: true,
-      autoResult: true
-    }
-  };
-  const combinedOptions = { ...options,
-    _computed
-  };
-
-  if (_dev) {
-    combinedOptions._dev = _dev;
-  }
-
-  this.options = (0, _lodash.default)(OPTIONS_DEFAULTS, combinedOptions);
-  this.form = (0, _utils.processPropertyAsDOMElement)({
-    prop: this.form,
-    propName: 'form'
-  });
-  this.summary = (0, _utils.processPropertyAsDOMElement)({
-    prop: this.summary,
-    propName: 'summary',
-    isRequired: false
-  }); // Setup loader
-
-  this.loader.addDOMElement({
-    el: this.form
-  });
-  this.loader.addDOMElement({
-    section: 'summary',
-    el: this.summary
-  }); // Adds base stylesheet
+  try {
+    var _state$data$transacti;
 
-  this.mainStyle = await (0, _style.mainStyle)(((_this$configs = this.configs) === null || _this$configs === void 0 ? void 0 : _this$configs.theme) || {});
-  (0, _utils.addDOMElement)({
-    element: 'style',
-    attributes: {
-      type: 'text/css'
-    },
-    content: this.mainStyle,
-    target: 'head'
-  }); // Adds configs CSS to override any styles
+    state.data = {};
+    state.options = {}; // Setup DOM
 
-  if (this.configs.css) {
-    (0, _utils.addDOMElement)({
-      element: 'style',
-      attributes: {
-        type: 'text/css'
-      },
-      content: this.configs.css,
-      target: 'head'
+    state.form = (0, _setupElement.default)({
+      element: 'form',
+      options
     });
-  } // Adds FramePay
-
+    state.summary = (0, _setupElement.default)({
+      element: 'summary',
+      options
+    }); // Setup loader
 
-  if (!document.querySelectorAll('[framepay*="script"]').length) {
-    (0, _utils.addDOMElement)({
-      element: 'script',
-      attributes: {
-        'framepay': 'script',
-        src: framePayUrls.script
-      },
-      target: 'head'
+    state.loader.addDOMElement({
+      el: state.form
     });
-  }
-
-  if (!document.querySelectorAll('[framepay*="stylesheet"]').length) {
-    (0, _utils.addDOMElement)({
-      element: 'link',
-      attributes: {
-        'framepay': 'stylesheet',
-        href: framePayUrls.style,
-        rel: 'stylesheet'
-      },
-      target: 'head'
+    state.loader.addDOMElement({
+      section: 'summary',
+      el: state.summary
     });
-  }
-
-  try {
-    var _riskMetadata$browser, _this$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) {
-      const {
-        browserData: {
-          language
-        }
-      } = riskMetadata;
-      this.options.locale = language;
-    }
+    }); // Setup state
 
-    const i18n = ((_this$configs2 = this.configs) === null || _this$configs2 === void 0 ? void 0 : _this$configs2.i18n) || {};
-    this.translate.init(this.options.locale, i18n);
-    const {
-      readyToPay,
-      summary: summaryData,
-      plans,
-      products
-    } = await _fetchSummaryData.FetchSummaryData.call(this, {
-      riskMetadata
+    state.storefront = (0, _setupStorefront.default)({
+      options
+    });
+    state.options = (0, _setupOptions.default)({
+      options
+    });
+    state.mainStyle = await (0, _setupStyles.default)({
+      options
+    });
+    state.data = await (0, _fetchData.fetchData)({
+      state
+    });
+    state.options.themeFramepay = await (0, _setupFramepayTheme.default)({
+      state,
+      options
+    });
+    const i18n = (0, _setupI18n.default)({
+      state
+    });
+    (0, _setupFramepay.default)({
+      state
     });
-    this.hasMounted = true;
 
-    if (this.form) {
-      this.formOptions = {
-        summary: summaryData,
-        mainStyle: this.mainStyle,
-        readyToPay,
-        plans,
-        products
-      };
+    if (state.data.transaction && ((_state$data$transacti = state.data.transaction) === null || _state$data$transacti === void 0 ? void 0 : _state$data$transacti.type) === 'setup') {
+      state.options.transactionType = 'setup';
+    } // Mount content
 
-      this._mountMethodSelector(this.formOptions);
-    }
 
-    if (this.summary) {
-      this.summaryOptions = {
-        summary: summaryData,
-        readyToPay,
-        plans,
-        products
-      };
+    if (state.form) {
+      (0, _methodSelector.mountMethodSelector)({
+        state
+      });
+    }
 
-      this._mountSummary(this.summaryOptions);
+    if (state.summary) {
+      (0, _summary.mountSummary)({
+        state
+      });
     }
+
+    i18n({
+      state
+    });
+    state.hasMounted = true;
   } 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,
-        mainStyle: this.mainStyle
-      });
+  if (state.options.features.autoConfirmation) {
+    (0, _on.on)({
+      eventName: 'instrument-ready',
+      callback: payload => {
+        (0, _show.show)({
+          componentName: 'confirmation',
+          payload,
+          state
+        });
+      }
     });
   }
 
-  if (this.options.features.autoResult) {
-    this.on('purchase-completed', purchase => {
-      this.show('result', {
-        purchase,
-        mainStyle: this.mainStyle
+  if (state.options.features.autoResult) {
+    if (state.options.transactionType === 'setup') {
+      (0, _on.on)({
+        eventName: 'setup-completed',
+        callback: payload => {
+          (0, _show.show)({
+            componentName: 'result',
+            payload,
+            state
+          });
+        }
       });
-    });
+    } else {
+      (0, _on.on)({
+        eventName: 'purchase-completed',
+        callback: payload => {
+          (0, _show.show)({
+            componentName: 'result',
+            payload,
+            state
+          });
+        }
+      });
+    }
   }
-}
-
-;
+}