@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

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;

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

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validateOptions = validateOptions;
-exports.default = exports.defaults = void 0;
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const defaults = {
-  countryCode: 'US',
-  locale: 'auto',
-  theme: {
-    labels: 'floating'
-  },
-  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
-    }
-  },
-  transactionType: 'purchase',
-  features: {
-    autoConfirmation: true,
-    autoResult: true
-  }
-};
-exports.defaults = defaults;
-
-function validateOptions(options) {
-  // TODO: validate more options
-  const purchaseData = [options.items, options.invoiceId, options.money, options.transactionId].filter(v => v);
-
-  if (purchaseData.length === 0) {
-    throw new Error('Must provide purchase data');
-  }
-
-  if (purchaseData.length > 1) {
-    throw new Error('Must provide only one purchase data type');
-  }
-}
-
-var _default = ({
-  options = {}
-} = {}) => {
-  validateOptions(options);
-  const _computed = {
-    paymentMethodsUrl: options._dev ? options._dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000' : 'https://forms.secure-payments.app'
-  };
-  const combinedOptions = (0, _lodash.default)({ ...defaults
-  }, {
-    organizationId: options.organizationId,
-    publishableKey: options.publishableKey,
-    websiteId: options.websiteId,
-    apiMode: options.apiMode,
-    i18n: options.i18n,
-    theme: options.theme,
-    css: options.css,
-    locale: options.locale,
-    countryCode: options.countryCode,
-    features: options.features,
-    paymentInstruments: options.paymentInstruments,
-    transactionType: options.transactionType,
-    _computed
-  }); // Add optional key's
-
-  ['items', 'money', 'invoiceId', 'transactionId', 'customerJwt', '_dev'].forEach(key => {
-    if (options[key]) {
-      combinedOptions[key] = options[key];
-    }
-  });
-  return combinedOptions;
-};
-
-exports.default = _default;

package/dist/functions/mount/setup-options.spec.js

@@ -1,66 +0,0 @@
-"use strict";
-
-var _rebillyInstrumentsMock = require("../../../tests/mocks/rebilly-instruments-mock");
-
-var _setupOptions = _interopRequireWildcard(require("./setup-options"));
-
-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('Setup mount options', () => {
-  it("should fill with default options", () => {
-    const options = (0, _setupOptions.default)({
-      options: {
-        items: [{
-          planId: "test-plan-id",
-          quantity: 1
-        }]
-      }
-    });
-    expect(options).toMatchObject(_setupOptions.defaults);
-  });
-  it("should setup options from mount", async () => {
-    const options = {
-      publishableKey: 'test-publishable-key',
-      organizationId: 'test-organization-id',
-      websiteId: 'test-website-id',
-      invoiceId: 'test-invoice-id',
-      customerJwt: 'test-customer-jwt'
-    };
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)(options);
-    expect(rebillyInstruments.state.options).toMatchObject(options);
-  });
-});
-describe('Validate mount options', () => {
-  it("should throw an error with no purchase data", async () => {
-    let error = null;
-
-    try {
-      const options = {};
-      (0, _setupOptions.validateOptions)(options);
-    } catch (e) {
-      error = e;
-    }
-
-    expect(error.message).toBe('Must provide purchase data');
-  });
-  it("should throw error if there are more than one purchase property", () => {
-    let error = null;
-
-    try {
-      const options = {
-        invoiceId: "test-invoice-id",
-        items: [{
-          planId: "test-plan-id",
-          quantity: 1
-        }]
-      };
-      (0, _setupOptions.validateOptions)(options);
-    } catch (e) {
-      error = e;
-    }
-
-    expect(error.message).toBe('Must provide only one purchase data type');
-  });
-});

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

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _storefront = _interopRequireDefault(require("../../storefront"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = ({
-  options: {
-    publishableKey,
-    orgnizationId,
-    apiMode,
-    _dev
-  }
-}) => {
-  const storefront = {
-    publishableKey,
-    orgnizationId,
-    mode: apiMode || 'live'
-  };
-
-  if (_dev) {
-    storefront.liveUrl = _dev.liveUrl || 'https://api.rebilly.com';
-    storefront.sandboxUrl = _dev.sandboxUrl || 'https://api-sandbox.rebilly.com';
-  }
-
-  return (0, _storefront.default)(storefront);
-};
-
-exports.default = _default;

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

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _style = require("../../style");
-
-var _utils = require("../../utils");
-
-var _default = async ({
-  options: {
-    theme = {},
-    css
-  }
-} = {}) => {
-  // Adds base stylesheet
-  const style = await (0, _style.mainStyle)(theme || {});
-  (0, _utils.addDOMElement)({
-    element: 'style',
-    attributes: {
-      type: 'text/css'
-    },
-    content: style,
-    target: 'head'
-  }); // Adds options CSS to override any styles
-
-  if (css) {
-    (0, _utils.addDOMElement)({
-      element: 'style',
-      attributes: {
-        type: 'text/css'
-      },
-      content: css,
-      target: 'head'
-    });
-  }
-
-  return style;
-};
-
-exports.default = _default;

package/dist/functions/on.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.on = on;
-
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-var _events = _interopRequireWildcard(require("../events"));
-
-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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- @typedef OnParams
- @type {Object}
- @property {string} eventName - The name of the event
- @property {function} callback - The function that is triggered by the event.
- */
-
-/**
- * Register events that will be triggered
- * @param {OnParams} params
- */
-function on({
-  eventName,
-  callback
-}) {
-  if (!_events.publicEventNames.includes(eventName)) {
-    throw new Error(`${eventName} is not a supported event`);
-  }
-
-  const internalEventName = (0, _lodash.default)(eventName);
-
-  _events.default[internalEventName].addEventListener(callback);
-}

package/dist/functions/on.spec.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
-
-var _events = _interopRequireDefault(require("../events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('RebillyInstruments on', () => {
-  it('should register event listeners', async () => {
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    const publicEventNames = ['instrument-ready', 'purchase-completed'];
-    await Promise.all(publicEventNames.map(async eventName => {
-      const callback = jest.fn();
-      rebillyInstruments.on(eventName, callback);
-      const details = {
-        test: 'data'
-      };
-
-      _events.default[(0, _lodash.default)(eventName)].dispatch(details);
-
-      expect(callback).toBeCalledTimes(1);
-      expect(callback).toBeCalledWith(details);
-    }));
-  });
-  it('should throw error for internal namespaced events', async () => {
-    const callback = jest.fn();
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    let error;
-
-    try {
-      // rebilly-instruments-purchase-completed will be used internally but not available externally
-      await rebillyInstruments.on('rebilly-instruments-purchase-completed', callback);
-    } catch (e) {
-      error = e;
-    }
-
-    expect(error).toEqual(new Error('rebilly-instruments-purchase-completed is not a supported event'));
-  });
-  it('should throw error for a non defined event', async () => {
-    const callback = jest.fn();
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    let error;
-
-    try {
-      await rebillyInstruments.on('not-an-event', callback);
-    } catch (e) {
-      error = e;
-    }
-
-    expect(error).toEqual(new Error('not-an-event is not a supported event'));
-  });
-});