@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

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

@@ -1,126 +1,53 @@
 "use strict";
 
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
+var _rebillyInstrumentsMock = require("../../../tests/mocks/rebilly-instruments-mock");
 
-var _framepayMock = require("tests/mocks/framepay-mock");
+var _instruments = require("@rebilly/instruments");
 
 var _mswWhenThen = require("msw-when-then");
 
-var _server = require("tests/msw/server");
+var _server = require("../../../tests/msw/server");
 
-var _storefrontApiMock = require("tests/mocks/storefront-api-mock");
+var _storefrontApiMock = require("../../../tests/mocks/storefront-api-mock");
 
-var _planModel = _interopRequireDefault(require("@/storefront/models/plan-model"));
+var _planModel = _interopRequireDefault(require("../../storefront/models/plan-model"));
 
-var _productModel = _interopRequireDefault(require("@/storefront/models/product-model"));
+var _productModel = _interopRequireDefault(require("../../storefront/models/product-model"));
 
-var _summaryModel = _interopRequireDefault(require("@/storefront/models/summary-model"));
+var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('RebillyInstruments instance', () => {
-  it('should throw error when there is no DOM element to mount the form', () => {
-    document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect(async () => {
-      await rebillyInstruments.mount({});
-    }).rejects.toEqual(new Error('Could not find DOM element with CSS class or id ".rebilly-instruments" to mount form'));
-  });
-  it('should throw error when providing the wrong type for the form property', () => {
-    document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-    const options = {
-      form: []
-    };
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect(async () => {
-      await rebillyInstruments.mount(options);
-    }).rejects.toEqual(new Error('Please provide a valid CSS class, id or DOM element for "form" property'));
-  });
-  it('should inject HTML to the merchant\'s website', async () => {
-    const testPlan = new _planModel.default({
-      name: 'Test Plan',
-      id: 'test-plan-id-1'
-    });
-    const testProduct = new _productModel.default({
-      description: 'My Awesome Product',
-      id: 'test-product-1'
-    });
-    const testSummary = new _summaryModel.default({
-      currency: 'USD',
-      lineItems: [{
-        description: 'test-plan-id-1',
-        planId: 'test-plan-id-1',
-        productId: 'test-product-1',
-        quantity: 1
-      }]
-    });
+  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';
-    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/ready-to-pay`)).thenReturn((() => {
-      return (0, _mswWhenThen.ok)([{
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay',
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
-        filters: []
-      }]);
-    })());
-    (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/preview-purchase`)).thenReturn((() => {
-      return (0, _mswWhenThen.ok)(testSummary);
-    })());
-    (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/plans`)).thenReturn((() => {
-      return (0, _mswWhenThen.ok)([testPlan]);
-    })());
-    (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/products`)).thenReturn((() => {
-      return (0, _mswWhenThen.ok)([testProduct]);
-    })());
-    document.body.innerHTML = `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
     const options = {
       form: '.form-selector',
       summary: '.summary-selector',
-      _dev: {
-        framePayStyleLink: framePayStyleUrl
-      },
-      options: {
-        locale: 'auto',
-        intent: {
-          items: [{
-            planId: 'test-plan-id-1',
-            quantity: 1
-          }]
-        }
-      }
-    };
-    const framepayMock = (0, _framepayMock.createFramepayMock)();
-    global.Rebilly = framepayMock;
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)({
+      locale: 'auto',
+      items: [{
+        planId: 'test-plan-id-1',
+        quantity: 1
+      }],
       theme: {
         color: {
           background: '#000'
         }
       },
       css: `
-        .rebilly-instruments-summary-line-item-synopsis-title {
-          color: rgb(0, 68, 212);
-        }
-      `
-    });
-    await rebillyInstruments.mount(options); // Mounts form and summary
+      .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(testPlan.name); // Theme config overrides initial styles
+    expect(summarySelector.innerHTML).toMatch('My Product'); // Theme config overrides initial styles
 
     const SUMMARY_CONTAINER = summarySelector.querySelector('.rebilly-instruments-content');
     expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual('rgb(0, 0, 0)'); // CSS config property overrides initial styles
@@ -134,30 +61,6 @@ describe('RebillyInstruments instance', () => {
 
     const STYLE_LINKS = [...document.querySelectorAll('head link')];
     const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
-    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl); // objectContaining allows matching a subset (this could be done with sinon + mocha too) 
-
-    expect(framepayMock.initialize).toHaveBeenCalledWith(expect.objectContaining({
-      digitalWallet: {
-        googlePayDisplayOptions: {
-          buttonColor: 'black',
-          buttonHeight: '44px',
-          buttonType: 'short'
-        },
-        merchantConfig: {
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        transactionData: {
-          amount: 0,
-          countryCode: 'US',
-          currency: 'USD',
-          label: 'test-website-id'
-        }
-      },
-      organizationId: 'test-organization-id',
-      publishableKey: 'test-api-key'
-    })); //Simulate that framepay is ready
-
-    framepayMock.simulateEvent('ready');
+    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
   });
 });

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

@@ -0,0 +1,40 @@
+"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.js

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.On = On;
+exports.on = on;
 
 var _lodash = _interopRequireDefault(require("lodash.camelcase"));
 
@@ -15,12 +15,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 {string} eventName - The name of the event
- * @param {function} callback - The function that is triggered by the event.
+ * @param {OnParams} params
  */
-function On(eventName, callback) {
+function on({
+  eventName,
+  callback
+}) {
   if (!_events.publicEventNames.includes(eventName)) {
     throw new Error(`${eventName} is not a supported event`);
   }

package/dist/functions/on.spec.js

@@ -2,15 +2,15 @@
 
 var _lodash = _interopRequireDefault(require("lodash.camelcase"));
 
-var _events = _interopRequireDefault(require("../events"));
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
-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 = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
     const publicEventNames = ['instrument-ready', 'purchase-completed'];
     await Promise.all(publicEventNames.map(async eventName => {
       const callback = jest.fn();
@@ -25,9 +25,23 @@ describe('RebillyInstruments on', () => {
       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 = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
+    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
     let error;
 
     try {
@@ -36,6 +50,6 @@ describe('RebillyInstruments on', () => {
       error = e;
     }
 
-    expect(error).toEqual(new Error(`not-an-event is not a supported event`));
+    expect(error).toEqual(new Error('not-an-event is not a supported event'));
   });
 });