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

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

@@ -1,189 +0,0 @@
-"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

@@ -1,218 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mount = mount;
-
-var _summary = require("../../views/summary");
-
-var _methodSelector = require("../../views/method-selector");
-
-var _fetchData = require("./fetch-data");
-
-var _show = require("../show");
-
-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 }; }
-
-/* 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} 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
- * @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
- * @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 {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({
-  state,
-  ...options
-} = {}) {
-  try {
-    var _state$data$transacti;
-
-    state.data = {};
-    state.options = {}; // Setup DOM
-
-    state.form = (0, _setupElement.default)({
-      element: 'form',
-      options
-    });
-    state.summary = (0, _setupElement.default)({
-      element: 'summary',
-      options
-    }); // Setup loader
-
-    state.loader.addDOMElement({
-      el: state.form
-    });
-    state.loader.addDOMElement({
-      section: 'summary',
-      el: state.summary
-    });
-    state.loader.startLoading({
-      section: 'summary',
-      id: 'initSummary'
-    });
-    state.loader.startLoading({
-      id: 'initForm'
-    }); // Setup state
-
-    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
-    });
-
-    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
-
-
-    if (state.form) {
-      (0, _methodSelector.mountMethodSelector)({
-        state
-      });
-    }
-
-    if (state.summary) {
-      (0, _summary.mountSummary)({
-        state
-      });
-    }
-
-    i18n({
-      state
-    });
-    state.hasMounted = true;
-  } catch (error) {
-    throw error;
-  }
-
-  if (state.options.features.autoConfirmation) {
-    (0, _on.on)({
-      eventName: 'instrument-ready',
-      callback: payload => {
-        (0, _show.show)({
-          componentName: 'confirmation',
-          payload,
-          state
-        });
-      }
-    });
-  }
-
-  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
-          });
-        }
-      });
-    }
-  }
-}

package/dist/functions/mount/mount.spec.js

@@ -1,64 +0,0 @@
-"use strict";
-
-var _rebillyInstrumentsMock = require("../../../tests/mocks/rebilly-instruments-mock");
-
-var _instruments = require("@rebilly/instruments");
-
-var _mswWhenThen = require("msw-when-then");
-
-var _server = require("../../../tests/msw/server");
-
-var _storefrontApiMock = require("../../../tests/mocks/storefront-api-mock");
-
-var _planModel = _interopRequireDefault(require("../../storefront/models/plan-model"));
-
-var _productModel = _interopRequireDefault(require("../../storefront/models/product-model"));
-
-var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('RebillyInstruments instance', () => {
-  it("should inject HTML to the merchant's website", async () => {
-    const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
-    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      locale: 'auto',
-      items: [{
-        planId: 'test-plan-id-1',
-        quantity: 1
-      }],
-      theme: {
-        colorBackground: '#000'
-      },
-      css: `
-      .rebilly-instruments-summary-line-item-synopsis-title {
-        color: rgb(0, 68, 212);
-      }
-      `,
-      _dev: {
-        framePayStyleLink: framePayStyleUrl
-      }
-    };
-    await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)(options); // Mounts form and summary
-
-    const summarySelector = document.querySelector('.summary-selector');
-    expect(summarySelector.innerHTML).toMatch('My Product'); // Theme config overrides initial styles
-
-    const SUMMARY_CONTAINER = summarySelector.querySelector('.rebilly-instruments-content');
-    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual('#000'); // CSS config property overrides initial styles
-
-    const LINE_ITEM_TITLE = document.querySelector('.rebilly-instruments-summary-line-item-synopsis-title');
-    expect(getComputedStyle(LINE_ITEM_TITLE).color).toEqual('rgb(0, 68, 212)'); // Mounts default FramePay script
-
-    const SCRIPTS = [...document.querySelectorAll('head script')];
-    const FRAMEPAY_SCRIPT = SCRIPTS.find(script => script.src === framePayScriptUrl);
-    expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl); // Mounts _dev FramePay style
-
-    const STYLE_LINKS = [...document.querySelectorAll('head link')];
-    const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
-    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
-  });
-});

package/dist/functions/mount/setup-element.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _utils = require("../../utils");
-
-var _default = ({
-  element = '',
-  options = {}
-}) => {
-  if (element !== 'form' && element !== 'summary') {
-    throw new Error('element must be "form" or "summary"');
-  }
-
-  const getProp = () => {
-    if (options[element]) {
-      return options[element];
-    }
-
-    switch (element) {
-      case 'summary':
-        return '.rebilly-instruments-summary';
-
-      case 'form':
-      default:
-        return '.rebilly-instruments';
-    }
-  };
-
-  return (0, _utils.processPropertyAsDOMElement)({
-    prop: getProp(),
-    propName: element,
-    isRequired: ['form'].includes(element)
-  });
-};
-
-exports.default = _default;

package/dist/functions/mount/setup-framepay-theme.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _css = _interopRequireDefault(require("css"));
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-var _postcssCustomProperties = _interopRequireDefault(require("postcss-custom-properties"));
-
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const resolveCssVars = async rawCss => (0, _postcss.default)([(0, _postcssCustomProperties.default)({
-  preserve: false
-})]).process(rawCss, {
-  from: undefined
-}).then(output => output.css);
-
-const getStyleProps = (ast, selector) => {
-  const {
-    rules
-  } = ast.stylesheet;
-  const output = {
-    color: null,
-    fontFamily: null,
-    fontSize: null,
-    lineHeight: null,
-    fontWeight: null,
-    background: null
-  };
-
-  for (let i = 0; i < rules.length; i += 1) {
-    const rule = rules[i];
-
-    if (rule.type === 'rule' && rule.selectors.includes(selector)) {
-      rule.declarations.forEach(decl => {
-        const propName = (0, _lodash.default)(decl.property);
-
-        if (typeof output[propName] !== 'undefined') {
-          output[propName] = decl.value;
-        }
-      });
-    }
-  }
-
-  return output;
-};
-
-var _default = async ({
-  state,
-  options = {}
-}) => {
-  const fullCss = `
-    ${state.mainStyle}
-    ${options.css || ''}
-  `;
-  const resolvedCss = await resolveCssVars(fullCss);
-
-  const cssAst = _css.default.parse(resolvedCss);
-
-  const cssSelectors = {
-    base: '.rebilly-instruments-form-field-input',
-    baseHover: '.rebilly-instruments-form-field-input:hover',
-    baseFocus: '.rebilly-instruments-form-field-input:focus',
-    basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
-    baseSelection: '.rebilly-instruments-form-field-input::selection',
-    invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
-    invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
-    invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
-    invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
-    invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
-  };
-  const framepayStyle = {
-    base: { ...getStyleProps(cssAst, cssSelectors.base),
-      ':hover': getStyleProps(cssAst, cssSelectors.baseHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.baseFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.basePlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.baseSelection)
-    },
-    invalid: { ...getStyleProps(cssAst, cssSelectors.invalid),
-      ':hover': getStyleProps(cssAst, cssSelectors.invalidHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.invalidFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.invalidPlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.invalidSelection)
-    }
-  };
-  return framepayStyle;
-};
-
-exports.default = _default;

package/dist/functions/mount/setup-framepay.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _utils = require("../../utils");
-
-var _default = ({
-  state: {
-    options: {
-      _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'
-  };
-
-  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'
-    });
-  }
-};
-
-exports.default = _default;

package/dist/functions/mount/setup-i18n.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const triggerTranslations = ({
-  state
-}) => {
-  state.translate.init(state.options.locale, state.options.i18n);
-  state.translate.translateItems();
-};
-
-var _default = ({
-  state = {}
-}) => {
-  var _state$data$riskMetad, _state$data$riskMetad2;
-
-  if (state.options.locale === 'auto' && (_state$data$riskMetad = state.data.riskMetadata) !== null && _state$data$riskMetad !== void 0 && (_state$data$riskMetad2 = _state$data$riskMetad.browserData) !== null && _state$data$riskMetad2 !== void 0 && _state$data$riskMetad2.language) {
-    const {
-      browserData: {
-        language
-      }
-    } = state.data.riskMetadata;
-    state.options.locale = language;
-  }
-
-  state.translate.init(state.options.locale, state.options.i18n);
-  return triggerTranslations;
-};
-
-exports.default = _default;