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

package/tests/async-utilities.js

@@ -0,0 +1,22 @@
+import { sleep } from '@/utils'
+
+export async function avoidUnhandledPromises() {
+  // We need this sleep to avoid unhandled promises.
+  // This hack will be removed if we refactor the current design.
+  await sleep(100)
+}
+
+/**
+ * @param {Promise} promise
+ */
+export async function expectConfigurationError(promise) {
+  const NoConfigOrOptionsError =
+    'Could not use Rebilly Instruments mount options to fetch Rebilly data'
+  let error = null
+  try {
+    await promise
+  } catch (e) {
+    error = e
+  }
+  expect(error.message).toBe(NoConfigOrOptionsError)
+}

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,4 +1,4 @@
-import RebillyInstruments from '@rebilly/instruments';
+import { RebillyInstrumentsInstance } from '@rebilly/instruments';
 import { createFramepayMock } from 'tests/mocks/framepay-mock';
 import { get, ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
@@ -6,29 +6,43 @@ import { storefrontURL } from 'tests/mocks/storefront-api-mock';
 import PlanModel from '@/storefront/models/plan-model';
 import ProductModel from '@/storefront/models/product-model';
 import SummaryModel from '@/storefront/models/summary-model';
+import InvoiceModel from '@/storefront/models/invoice-model';
 import merge from 'lodash.merge';
+import { DataInstance } from '../../src/functions/mount/fetch-data';
 
-export async function RenderMockRebillyInstruments(configs = {}, options = {}) {
-  const testPlan = new PlanModel({name: 'Test Plan', id: 'test-plan-id-1'});
-    const testProduct = new ProductModel({description: 'My Awesome Product', id: 'test-product-1'});
-    const testSummary = new SummaryModel(
+export async function RenderMockRebillyInstruments(options = {}) {
+  const testInvoice = new InvoiceModel({
+    id: 'test-invoice-id'
+  });
+  const testPlan = new PlanModel({ name: 'Test Plan', id: 'test-plan-id-1' });
+  const testProduct = new ProductModel({
+    description: 'My Awesome Product',
+    id: 'test-product-1',
+    name: 'My Product'
+  });
+  const testSummary = new SummaryModel({
+    currency: 'USD',
+    lineItems: [
       {
-        currency: 'USD',
-        lineItems: [
-          {
-            description: 'test-plan-id-1',
-            planId: 'test-plan-id-1',
-            productId: 'test-product-1',
-            quantity: 1,
-          }
-        ]
+        description: 'test-plan-id-1',
+        planId: 'test-plan-id-1',
+        productId: 'test-product-1',
+        quantity: 1
       }
-    );
-    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
+    ]
+  });
+  const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
 
-    when(post(`${storefrontURL}/ready-to-pay`)).thenReturn((() => {
-      return ok(
-        [{
+  when(get(`${storefrontURL}/invoices/*`)).thenReturn(
+    (() => {
+      return ok(testInvoice);
+    })()
+  );
+
+  when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
+    (() => {
+      return ok([
+        {
           method: 'payment-card',
           feature: {
             name: 'Google Pay',
@@ -37,77 +51,75 @@ export async function RenderMockRebillyInstruments(configs = {}, options = {}) {
           },
           brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
           filters: []
-        }]
-      );
-    })());
+        }
+      ]);
+    })()
+  );
 
-    when(post(`${storefrontURL}/preview-purchase`)).thenReturn((() => {
+  when(post(`${storefrontURL}/preview-purchase`)).thenReturn(
+    (() => {
       return ok(testSummary);
-    })());
+    })()
+  );
 
-    when(get(`${storefrontURL}/plans`)).thenReturn((() => {
+  when(get(`${storefrontURL}/plans`)).thenReturn(
+    (() => {
       return ok([testPlan]);
-    })());
+    })()
+  );
 
-    when(get(`${storefrontURL}/products`)).thenReturn((() => {
+  when(get(`${storefrontURL}/products`)).thenReturn(
+    (() => {
       return ok([testProduct]);
-    })());
-
-    document.body.innerHTML =
-    `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
+    })()
+  );
 
-    const defaultConfigs = {};
+  const defaultOptions = {
+    form: '.form-selector',
+    summary: '.summary-selector',
+    locale: 'auto',
+    _dev: {
+      framePayStyleLink: framePayStyleUrl
+    },
+  };
 
-    const defaultOptions = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      _dev: {
-        framePayStyleLink: framePayStyleUrl
-      },
-      options: {
-        locale: 'auto',
-        intent: {
-          items: [
-            {
-              planId: 'test-plan-id-1',
-              quantity: 1
-            }
-          ]
-        }
+  const hasPurchaseData = [
+    'items',
+    'invoiceId',
+    'transactionId',
+    'money'
+  ].some(key => Object.keys(options).includes(key))
+  if(!hasPurchaseData) {
+    defaultOptions.items = [
+      {
+        planId: 'test-plan-id-1',
+        quantity: 1
       }
-    };
-    
+    ];
+  }
 
-    const framepayMock = createFramepayMock();
-    global.Rebilly = framepayMock;
+  const mergedOptions = merge({...defaultOptions}, options);
 
-    const rebillyInstruments = MockRebillyInstruments(merge(defaultConfigs, configs));
-    await rebillyInstruments.mount(merge(defaultOptions, options));
-    return rebillyInstruments;
-}
+  const framepayMock = createFramepayMock();
+  global.Rebilly = framepayMock;
 
-export function MockRebillyInstruments(config = {}, mount = null) {
-  const initializeConfig = {
-    organizationId: 'test-organization-id',
-    publishableKey: 'test-api-key',
-    websiteId: 'test-website-id',
-    apiMode: 'live',
-    ...config
-  }
+  const rebillyInstruments = new RebillyInstrumentsInstance();
 
-  RebillyInstruments.initialize(initializeConfig);
+  document.body.innerHTML = `
+    <div class="${mergedOptions.form.replace('.', '')}"></div>
+    <div class="${mergedOptions.summary.replace('.', '')}"></div>
+  `;
 
-  if (mount !== null) {
-    document.body.innerHTML =
-    `
-      <div class="${mount.form || 'rebilly-instruments'}"></div>
-      <div class="${mount.summary || 'rebilly-instruments-summary'}"></div>
-    `;
-    RebillyInstruments.mount(mount);
-  }
+  await rebillyInstruments.mount(mergedOptions);
+
+  rebillyInstruments.mock = {
+    data: (data) => {
+      rebillyInstruments.state.data = new DataInstance({
+        state: rebillyInstruments.state,
+        ...data
+      });
+    }
+  };
 
-  return RebillyInstruments;
+  return rebillyInstruments;
 }

package/tests/mocks/storefront-api-mock.js

@@ -18,4 +18,12 @@ export const initStoreFrontApiMocks = (when) => {
   when(get(`${storefrontURL}/products`)).thenReturn((() => {
     return ok([])
   })());
+
+  when(post(`${storefrontURL}/payment-instruments`)).thenReturn((() => {
+    return ok([])
+  })());
+  
+  when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn((() => {
+    return ok([])
+  })());
 };

package/tests/mocks/storefront-mock.js

@@ -1,5 +1,22 @@
 import Storefront from '@/storefront';
+import { DataInstance } from '@/functions/mount/fetch-data';
 
 export function MockStorefront(config = {}) {
   return Storefront(config);
+}
+
+export function StorefontTestingInstance({
+  MockStorefrontConfig = {},
+  options = {},
+  data = {}
+} = {}) {
+  class TestInstance {
+    constructor() {
+      this.options = options;
+      this.storefront = MockStorefront(MockStorefrontConfig);
+      this.data = new DataInstance({state: {options}, ...data});
+    }
+  }
+
+  return new TestInstance();
 }

package/dist/events/purchase-completed.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PurchaseCompletedEventName = void 0;
-
-var _baseEvent = _interopRequireDefault(require("./base-event"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const PurchaseCompletedEventName = 'rebilly-instruments-purchase-complete';
-exports.PurchaseCompletedEventName = PurchaseCompletedEventName;
-
-class PurchaseCompletedEvent extends _baseEvent.default {
-  constructor({
-    name = PurchaseCompletedEventName
-  } = {}) {
-    super(name);
-  }
-
-}
-
-exports.default = PurchaseCompletedEvent;

package/dist/functions/initialize.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Initialize = Initialize;
-
-var _storefront = _interopRequireDefault(require("../storefront"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * @typedef {Object} Typeography
- * @param {string} fontFamily - Same as CSS property "font-family". Will be used thoughout the library ui
- */
-
-/**
- * @typedef {Object} Color
- * @param {string} primary - CSS hexcode or color name, used to draw user attention
- * @param {string} errorText - CSS hexcode or color name, used to display error messages
- * @param {string} text - CSS hexcode or color name, used to display font color
- * @param {string} buttonText - CSS hexcode or color name, used for buttons text, primary will be it's background
- * @param {string} background - CSS hexcode or color name, the color used for the background of the forms
- */
-
-/**
- * @typedef {Object} Theme
- * @param {Color} color - object with color properties
- * @param {Typeography} typography - object with typography options
- */
-
-/**
- * @typedef {object} Configs
- * @property {string} organizationId - The Rebilly organization id that all api requests will be associated with.
- * @property {string} publishableKey - The Rebilly publishable api key used to access the storefront api's.
- * @property {string} websiteId - The Rebilly website api.
- * @property {"live" | "sandbox"} apiMode - default "live". The mode for the Rebilly api. default "live".
- * @property {string} css - CSS string that overrides any styles.
- * @property {Theme} theme - CSS string that overrides any styles.
- * @property {object} i18n - object containing the language defintions. (or overrides for existing languages)
- */
-
-/**
- * Initialize library with configurations.
- * @param {Configs} configs - The configurations that are to be passed to the library for use.
- */
-function Initialize(configs = {}) {
-  const {
-    organizationId,
-    publishableKey,
-    websiteId,
-    apiMode = 'live',
-    i18n,
-    theme,
-    css,
-    _dev = null
-  } = configs;
-  this.configs = {
-    organizationId,
-    publishableKey,
-    websiteId,
-    apiMode,
-    i18n,
-    theme,
-    css
-  };
-  const storefront = {
-    publishableKey: this.configs.publishableKey,
-    orgnizationId: this.configs.orgnizationId,
-    mode: this.configs.apiMode || 'live'
-  };
-
-  if (_dev) {
-    this.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);
-}
-
-;

package/dist/functions/initialize.spec.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
-
-describe('RebillyInstruments instance', () => {
-  it('should should set configs', () => {
-    const testConfigs = {
-      apiMode: 'live',
-      organizationId: 'test-organization-id',
-      publishableKey: 'test-publishable-key',
-      websiteId: 'test-website-id',
-      _dev: {
-        liveUrl: null,
-        sandboxUrl: null
-      }
-    };
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(testConfigs);
-    expect(rebillyInstruments.configs).toEqual(testConfigs);
-  });
-  it('should setup api instance', () => {
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)();
-    expect(rebillyInstruments.storefront).toHaveProperty('setPublishableKey');
-  });
-  it('should have the right developer settings', () => {
-    const devOptions = {
-      _dev: {
-        liveUrl: 'https://api.rebilly.com',
-        sandboxUrl: 'https://api-sandbox.rebilly.com'
-      }
-    };
-    const rebillyInstruments = (0, _rebillyInstrumentsMock.MockRebillyInstruments)(devOptions);
-    expect(rebillyInstruments.configs._dev).toEqual(devOptions._dev);
-  });
-});

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

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FetchSummaryData = FetchSummaryData;
-
-async function FetchSummaryData({
-  riskMetadata,
-  summaryPayload = null
-} = {}) {
-  if (!riskMetadata) {
-    throw new Error('riskMetadata is required for FetchSummaryData');
-  }
-
-  const [readyToPay, summary] = await Promise.all([this._fetchReadyToPay(riskMetadata), this._fetchSummary({
-    data: summaryPayload
-  })]);
-  const plans = await this._fetchPlans({
-    data: summary
-  });
-  const products = await this._fetchProducts({
-    data: plans
-  });
-  return {
-    readyToPay,
-    summary,
-    plans,
-    products
-  };
-}

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

@@ -1,45 +0,0 @@
-"use strict";
-
-var _fetchSummaryData = require("./fetch-summary-data");
-
-describe('Fetch Summary Data function helper', () => {
-  class TestInstance {
-    constructor() {
-      this._fetchReadyToPay = 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 () => {
-    const instance = new TestInstance();
-    await instance._FetchSummaryData({
-      riskMetadata: {}
-    });
-    expect(instance._fetchReadyToPay).toBeCalledTimes(1);
-    expect(instance._fetchSummary).toBeCalledTimes(1);
-    expect(instance._fetchPlans).toBeCalledTimes(1);
-    expect(instance._fetchProducts).toBeCalledTimes(1);
-  });
-  it('should pass riskMetadata to ready to pay', async () => {
-    const testRiskMetadata = {};
-    const instance = new TestInstance();
-    await instance._FetchSummaryData({
-      riskMetadata: testRiskMetadata
-    });
-    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
-    expect(async () => {
-      await instance._FetchSummaryData();
-    }).rejects.toEqual(new Error('riskMetadata is required for FetchSummaryData'));
-  });
-});

package/dist/views/method-selector/process-digital-wallet-options.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.processDigitalWalletOptions = processDigitalWalletOptions;
-
-function processDigitalWalletOptions(options, methods) {
-  const {
-    paymentInstruments
-  } = options;
-  const digitalWalletOptions = {};
-  const googlePayMethod = methods.find(method => {
-    var _method$feature;
-
-    return ((_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) === 'Google Pay';
-  });
-
-  if (paymentInstruments !== null && paymentInstruments !== void 0 && paymentInstruments.googlePay && googlePayMethod) {
-    const {
-      googlePay
-    } = paymentInstruments;
-    const {
-      merchantName,
-      merchantOrigin
-    } = googlePayMethod.feature;
-    digitalWalletOptions.merchantConfig = {
-      merchantName,
-      merchantOrigin
-    };
-    digitalWalletOptions.googlePayDisplayOptions = googlePay.displayOptions;
-  }
-
-  return digitalWalletOptions;
-}

package/dist/views/method-selector/process-digital-wallet-options.spec.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _processDigitalWalletOptions = require("./process-digital-wallet-options");
-
-var _readyToPayModel = _interopRequireDefault(require("@/storefront/models/ready-to-pay-model"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('processDigitalWalletOptions', () => {
-  describe('Google Pay', () => {
-    it('should return the correct google pay configs when google pay is configured and the payment method is found', () => {
-      const options = {
-        paymentInstruments: {
-          googlePay: {
-            displayOptions: {
-              buttonColor: 'black',
-              buttonType: 'short',
-              buttonHeight: '44px'
-            }
-          }
-        }
-      };
-      const availablePaymentMethods = [new _readyToPayModel.default({
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay',
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        brands: ['Visa']
-      })];
-      expect((0, _processDigitalWalletOptions.processDigitalWalletOptions)(options, availablePaymentMethods)).toMatchInlineSnapshot(`
-        Object {
-          "googlePayDisplayOptions": Object {
-            "buttonColor": "black",
-            "buttonHeight": "44px",
-            "buttonType": "short",
-          },
-          "merchantConfig": Object {
-            "merchantName": "google-pay-merchant-name",
-            "merchantOrigin": "google-pay-merchant-origin",
-          },
-        }
-      `);
-    });
-    it('should not return any google pay options if google pay is not found in the ready to pay results', () => {
-      const options = {
-        paymentInstruments: {
-          googlePay: {
-            displayOptions: {
-              buttonColor: 'black',
-              buttonType: 'short',
-              buttonHeight: '44px'
-            }
-          }
-        }
-      };
-      const availablePaymentMethods = [new _readyToPayModel.default({
-        method: 'payment-card',
-        brands: ['Visa']
-      })];
-      expect((0, _processDigitalWalletOptions.processDigitalWalletOptions)(options, availablePaymentMethods)).toEqual({});
-    });
-    it('should not return any google pay options if google pay is not configured in options', () => {
-      const options = {
-        paymentInstruments: {}
-      };
-      const availablePaymentMethods = [new _readyToPayModel.default({
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay',
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        brands: ['Visa']
-      })];
-      expect((0, _processDigitalWalletOptions.processDigitalWalletOptions)(options, availablePaymentMethods)).toEqual({});
-    });
-  });
-});

package/src/events/purchase-completed.js

@@ -1,11 +0,0 @@
-import BaseEvent from './base-event';
-
-export const PurchaseCompletedEventName = 'rebilly-instruments-purchase-complete';
-
-export default class PurchaseCompletedEvent extends BaseEvent {
-  constructor({
-    name = PurchaseCompletedEventName
-  } = {}) {
-    super(name);
-  }
-}

package/src/functions/initialize.js

@@ -1,74 +0,0 @@
-import Storefront from '../storefront';
-
-/**
- * @typedef {Object} Typeography
- * @param {string} fontFamily - Same as CSS property "font-family". Will be used thoughout the library ui
- */
-
-/**
- * @typedef {Object} Color
- * @param {string} primary - CSS hexcode or color name, used to draw user attention
- * @param {string} errorText - CSS hexcode or color name, used to display error messages
- * @param {string} text - CSS hexcode or color name, used to display font color
- * @param {string} buttonText - CSS hexcode or color name, used for buttons text, primary will be it's background
- * @param {string} background - CSS hexcode or color name, the color used for the background of the forms
- */
-
-/**
- * @typedef {Object} Theme
- * @param {Color} color - object with color properties
- * @param {Typeography} typography - object with typography options
- */
-
-/**
- * @typedef {object} Configs
- * @property {string} organizationId - The Rebilly organization id that all api requests will be associated with.
- * @property {string} publishableKey - The Rebilly publishable api key used to access the storefront api's.
- * @property {string} websiteId - The Rebilly website api.
- * @property {"live" | "sandbox"} apiMode - default "live". The mode for the Rebilly api. default "live".
- * @property {string} css - CSS string that overrides any styles.
- * @property {Theme} theme - CSS string that overrides any styles.
- * @property {object} i18n - object containing the language defintions. (or overrides for existing languages)
- */
-
-/**
- * Initialize library with configurations.
- * @param {Configs} configs - The configurations that are to be passed to the library for use.
- */
-export function Initialize (configs = {}) {
-  const {
-    organizationId,
-    publishableKey,
-    websiteId,
-    apiMode = 'live',
-    i18n,
-    theme,
-    css,
-    _dev = null,
-  } = configs;
-
-  this.configs = {
-    organizationId,
-    publishableKey,
-    websiteId,
-    apiMode,
-    i18n,
-    theme,
-    css,
-  };
-
-  const storefront = {
-    publishableKey: this.configs.publishableKey,
-    orgnizationId: this.configs.orgnizationId,
-    mode: this.configs.apiMode || 'live'
-  }
-
-  if (_dev) {
-    this.configs._dev = _dev;
-
-    storefront.liveUrl = _dev.liveUrl || 'https://api.local.rebilly.dev';
-    storefront.sandboxUrl = _dev.sandboxUrl || 'https://api-sandbox.local.rebilly.dev';
-  }
-
-  this.storefront = Storefront(storefront);
-};