@rebilly/instruments 1.0.2-beta.1 → 1.0.2-beta.10

package/dist/storefront/products.spec.js

@@ -1,17 +1,19 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-mock");
 
 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 _products = require("./products");
 
 var _productModel = _interopRequireDefault(require("./models/product-model"));
 
+var _asyncUtilities = require("../../tests/async-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Storefront API Plan', () => {
@@ -25,10 +27,6 @@ describe('Storefront API Plan', () => {
       this.storefront = (0, _storefrontMock.MockStorefront)();
     }
 
-    FetchProducts(...args) {
-      return _products.FetchProducts.apply(this, args);
-    }
-
   }
 
   it('can fetch products', async () => {
@@ -39,7 +37,9 @@ describe('Storefront API Plan', () => {
     (0, _server.when)((0, _mswWhenThen.get)(`${_storefrontApiMock.storefrontURL}/products`)).thenReturn((0, _mswWhenThen.ok)([testProduct]));
     const instance = new TestProductsInstance();
     jest.spyOn(instance.storefront.products, 'getAll');
-    const response = await instance.FetchProducts({});
+    const response = await (0, _products.fetchProducts)({
+      state: instance
+    });
     expect(instance.storefront.products.getAll).toBeCalledTimes(1);
     expect(instance.storefront.products.getAll).toBeCalledWith({
       filter: ''
@@ -51,7 +51,8 @@ describe('Storefront API Plan', () => {
   it('can fetch products with filter', async () => {
     const instance = new TestProductsInstance();
     jest.spyOn(instance.storefront.products, 'getAll');
-    await instance.FetchProducts({
+    await (0, _products.fetchProducts)({
+      state: instance,
       data: [{
         productId: 'test-product-1'
       }, {
@@ -62,28 +63,27 @@ describe('Storefront API Plan', () => {
       filter: 'id:test-product-1,test-product-2'
     });
   });
-  it('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
     const noConfigOrOptionsInstance = new TestProductsInstance({
       configs: null,
       options: null
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _products.fetchProducts)({
+      state: noConfigOrOptionsInstance
+    }));
     const noConfigInstance = new TestProductsInstance({
       configs: null,
       options: {}
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _products.fetchProducts)({
+      state: noConfigInstance
+    }));
     const noOptionsInstance = new TestProductsInstance({
       configs: {},
       options: null
     });
-    expect(async () => {
-      await noConfigOrOptionsInstance.FetchProducts();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noConfigInstance.FetchProducts();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noOptionsInstance.FetchProducts();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await (0, _asyncUtilities.expectConfigurationError)((0, _products.fetchProducts)({
+      state: noOptionsInstance
+    }));
   });
 });

package/dist/storefront/purchase.js

@@ -3,14 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PostPurchase = PostPurchase;
+exports.postPurchase = postPurchase;
 
-async function PostPurchase(data) {
-  if (!this.storefront) {
+async function postPurchase({
+  data,
+  state
+}) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
+  if (!state.configs || !state.options) {
     throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
   }
 
@@ -19,13 +22,11 @@ async function PostPurchase(data) {
       delete data._raw;
     }
 
-    const resp = await this.storefront.purchase.purchase({
+    const resp = await state.storefront.purchase.purchase({
       data
     });
     return resp;
   } catch (error) {
     throw error;
   }
-}
-
-;
+}

package/dist/storefront/purchase.spec.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-mock");
 
 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 _purchase = require("./purchase");
 
@@ -22,7 +22,10 @@ describe('Storefront API Purchase', () => {
     }
 
     postPurchase(...args) {
-      return _purchase.PostPurchase.apply(this, args);
+      return (0, _purchase.postPurchase)({
+        state: this,
+        data: args
+      });
     }
 
   }

package/dist/storefront/ready-to-pay.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchReadyToPay = FetchReadyToPay;
+exports.fetchReadyToPay = fetchReadyToPay;
 
 var _riskDataCollector = require("@rebilly/risk-data-collector");
 
@@ -11,17 +11,20 @@ var _readyToPayModel = _interopRequireDefault(require("./models/ready-to-pay-mod
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-async function FetchReadyToPay(riskMetadata = null) {
-  if (!this.storefront) {
+async function fetchReadyToPay({
+  state,
+  riskMetadata = null
+}) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
+  if (!state.configs || !state.options) {
     throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
   }
 
   try {
-    var _this$configs, _this$options, _this$options$intent;
+    var _state$configs, _state$options, _state$options$intent;
 
     if (!riskMetadata) {
       const {
@@ -30,8 +33,8 @@ async function FetchReadyToPay(riskMetadata = null) {
       riskMetadata = data;
     }
 
-    const websiteId = ((_this$configs = this.configs) === null || _this$configs === void 0 ? void 0 : _this$configs.websiteId) || null;
-    const items = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$intent = _this$options.intent) === null || _this$options$intent === void 0 ? void 0 : _this$options$intent.items) || [];
+    const websiteId = ((_state$configs = state.configs) === null || _state$configs === void 0 ? void 0 : _state$configs.websiteId) || null;
+    const items = ((_state$options = state.options) === null || _state$options === void 0 ? void 0 : (_state$options$intent = _state$options.intent) === null || _state$options$intent === void 0 ? void 0 : _state$options$intent.items) || [];
     const data = {
       items,
       websiteId,
@@ -39,7 +42,7 @@ async function FetchReadyToPay(riskMetadata = null) {
     };
     const {
       fields: readyToPayFields
-    } = await this.storefront.purchase.readyToPay({
+    } = await state.storefront.purchase.readyToPay({
       data
     });
     return Object.values(readyToPayFields).map((fields, index) => new _readyToPayModel.default({
@@ -49,6 +52,4 @@ async function FetchReadyToPay(riskMetadata = null) {
   } catch (error) {
     throw error;
   }
-}
-
-;
+}

package/dist/storefront/ready-to-pay.spec.js

@@ -1,17 +1,19 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-mock");
 
 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 _readyToPay = require("./ready-to-pay");
 
 var _readyToPayModel = _interopRequireDefault(require("./models/ready-to-pay-model"));
 
+var _asyncUtilities = require("../../tests/async-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Storefront API Ready to Pay', () => {
@@ -25,10 +27,6 @@ describe('Storefront API Ready to Pay', () => {
       this.storefront = (0, _storefrontMock.MockStorefront)();
     }
 
-    fetchReadyToPay(...args) {
-      return _readyToPay.FetchReadyToPay.apply(this, args);
-    }
-
   }
 
   it('can fetch ready to pay', async () => {
@@ -55,7 +53,11 @@ describe('Storefront API Ready to Pay', () => {
       options
     });
     jest.spyOn(instance.storefront.purchase, 'readyToPay');
-    const response = await instance.fetchReadyToPay();
+    const riskMetadata = null;
+    const response = await (0, _readyToPay.fetchReadyToPay)({
+      state: instance,
+      riskMetadata
+    });
     expect(instance.storefront.purchase.readyToPay).toBeCalledTimes(1);
     expect(instance.storefront.purchase.readyToPay).toBeCalledWith({
       data: {
@@ -71,28 +73,31 @@ describe('Storefront API Ready to Pay', () => {
       ...readyToPayPayload[0]
     })]);
   });
-  it('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
+    const riskMetadata = null;
     const noConfigOrOptionsInstance = new TestReadyToPayInstance({
       configs: null,
       options: null
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _readyToPay.fetchReadyToPay)({
+      riskMetadata,
+      state: noConfigOrOptionsInstance
+    }));
     const noConfigInstance = new TestReadyToPayInstance({
       configs: null,
       options: {}
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _readyToPay.fetchReadyToPay)({
+      riskMetadata,
+      state: noConfigInstance
+    }));
     const noOptionsInstance = new TestReadyToPayInstance({
       configs: {},
       options: null
     });
-    expect(async () => {
-      await noConfigOrOptionsInstance.fetchReadyToPay();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noConfigInstance.fetchReadyToPay();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noOptionsInstance.fetchReadyToPay();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await (0, _asyncUtilities.expectConfigurationError)((0, _readyToPay.fetchReadyToPay)({
+      riskMetadata,
+      state: noOptionsInstance
+    }));
   });
 });

package/dist/storefront/storefront.spec.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-mock");
 
 describe('Storefront application programming interface', () => {
   it('can create rebilly-js-sdk instance', () => {

package/dist/storefront/summary.js

@@ -3,28 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchSummary = FetchSummary;
+exports.fetchSummary = fetchSummary;
 
 var _summaryModel = _interopRequireDefault(require("./models/summary-model"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-async function FetchSummary({
-  data = null
+async function fetchSummary({
+  data = null,
+  state = null
 } = {}) {
-  if (!this.storefront) {
+  if (!state.storefront) {
     throw new Error('Could not access rebilly-js-sdk instance');
   }
 
-  if (!this.configs || !this.options) {
+  if (!state.configs || !state.options) {
     throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
   }
 
   try {
-    var _this$configs, _this$options, _this$options$intent;
+    var _state$configs, _state$options, _state$options$intent;
 
-    const websiteId = ((_this$configs = this.configs) === null || _this$configs === void 0 ? void 0 : _this$configs.websiteId) || null;
-    const items = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$intent = _this$options.intent) === null || _this$options$intent === void 0 ? void 0 : _this$options$intent.items) || [];
+    const websiteId = ((_state$configs = state.configs) === null || _state$configs === void 0 ? void 0 : _state$configs.websiteId) || null;
+    const items = ((_state$options = state.options) === null || _state$options === void 0 ? void 0 : (_state$options$intent = _state$options.intent) === null || _state$options$intent === void 0 ? void 0 : _state$options$intent.items) || [];
     const payload = {
       data: {
         websiteId,
@@ -42,11 +43,9 @@ async function FetchSummary({
 
     const {
       fields: summaryFields
-    } = await this.storefront.purchase.preview(payload);
+    } = await state.storefront.purchase.preview(payload);
     return new _summaryModel.default(summaryFields);
   } catch (error) {
     throw error;
   }
-}
-
-;
+}

package/dist/storefront/summary.spec.js

@@ -1,16 +1,18 @@
 "use strict";
 
-var _storefrontMock = require("tests/mocks/storefront-mock");
+var _storefrontMock = require("../../tests/mocks/storefront-mock");
 
 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 _summary = require("./summary");
 
-var _summaryModel = _interopRequireDefault(require("@/storefront/models/summary-model"));
+var _summaryModel = _interopRequireDefault(require("./models/summary-model"));
+
+var _asyncUtilities = require("../../tests/async-utilities");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,10 +28,6 @@ describe('Storefront API Summary', () => {
       this.storefront = storefront === null ? (0, _storefrontMock.MockStorefront)() : storefront;
     }
 
-    fetchSummary(...args) {
-      return _summary.FetchSummary.apply(this, args);
-    }
-
   }
 
   it('can fetch preview', async () => {
@@ -58,7 +56,9 @@ describe('Storefront API Summary', () => {
       options
     });
     jest.spyOn(instance.storefront.purchase, 'preview');
-    const response = await instance.fetchSummary();
+    const response = await (0, _summary.fetchSummary)({
+      state: instance
+    });
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
       data: {
@@ -90,10 +90,11 @@ describe('Storefront API Summary', () => {
       options
     });
     jest.spyOn(instance.storefront.purchase, 'preview');
-    await instance.fetchSummary({
+    await (0, _summary.fetchSummary)({
       data: {
         billingAddress
-      }
+      },
+      state: instance
     });
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
@@ -125,10 +126,11 @@ describe('Storefront API Summary', () => {
       options
     });
     jest.spyOn(instance.storefront.purchase, 'preview');
-    await instance.fetchSummary({
+    await (0, _summary.fetchSummary)({
       data: {
         deliveryAddress
-      }
+      },
+      state: instance
     });
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
@@ -139,28 +141,27 @@ describe('Storefront API Summary', () => {
       }
     });
   });
-  it('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
     const noConfigOrOptionsInstance = new TestSummaryInstance({
       configs: null,
       options: null
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _summary.fetchSummary)({
+      state: noConfigOrOptionsInstance
+    }));
     const noConfigInstance = new TestSummaryInstance({
       configs: null,
       options: {}
     });
+    await (0, _asyncUtilities.expectConfigurationError)((0, _summary.fetchSummary)({
+      state: noConfigInstance
+    }));
     const noOptionsInstance = new TestSummaryInstance({
       configs: {},
       options: null
     });
-    expect(async () => {
-      await noConfigOrOptionsInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noConfigInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-    expect(async () => {
-      await noOptionsInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await (0, _asyncUtilities.expectConfigurationError)((0, _summary.fetchSummary)({
+      state: noOptionsInstance
+    }));
   });
 });

package/dist/style/base/__snapshots__/theme.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RebillyInstruments theme builds the theme object 1`] = `
+Object {
+  "borderRadius": "4px",
+  "color": Object {
+    "background": "#ffffff",
+    "buttonText": "#ffffff",
+    "errorText": "#cd5c5c",
+    "primary": "#0044d4",
+    "text": "#0D2B3E",
+  },
+  "getComputed": Object {
+    "color": Object {
+      "mutedBorder": "rgba(13, 43, 62, 0.25)",
+      "mutedText": "rgba(13, 43, 62, 0.6)",
+      "primaryValues": Values {
+        "alpha": 1,
+        "rgb": Array [
+          0,
+          68,
+          212,
+        ],
+        "type": "base",
+        "weight": 0,
+      },
+    },
+  },
+  "space": Object {
+    "form": Object {
+      "horizontalPadding": "16px",
+      "minHeight": "44px",
+      "padding": "8px 16px",
+      "verticalPadding": "8px",
+    },
+    "l": "48px",
+    "m": "24px",
+    "s": "12px",
+    "xl": "96px",
+    "xs": "6px",
+    "xxl": "112px",
+    "xxs": "4px",
+  },
+  "typography": Object {
+    "captionFontSize": "12px",
+    "captionLineHeight": "12px",
+    "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
+    "fontSize": "16px",
+    "lineHeight": "24px",
+  },
+}
+`;

package/dist/style/base/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+
+const base = theme => `
+  /* Base, Typography
+  ------------------------------------------------------------ */
+  /* Base setup for top level elements */
+  .rebilly-instruments-content,
+  .rebilly-instruments-method-content,
+  .rebilly-instruments-confirmation,
+  .rebilly-instruments-results {
+    color: ${theme.color.text};
+    background: ${theme.color.background};
+    font-size: ${theme.typography.fontSize};
+    line-height: ${theme.typography.lineHeight};
+    font-family: ${theme.typography.fontFamily};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-link {
+    color: ${theme.color.primary};
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-link:hover {
+    text-decoration: none;
+  }
+
+  .rebilly-instruments-link .rebilly-instruments-icon {
+    fill: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-link.has-icon-left,
+  .rebilly-instruments-link.has-icon-right {
+    display: inline-flex;
+  }
+
+  .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
+    margin-right: ${theme.space.xs};
+  }
+
+  .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
+    margin-left: ${theme.space.xs};
+  }
+
+  /* Typography */
+  .rebilly-instruments-h1,
+  .rebilly-instruments-h2 {
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-h1 {
+    font-size: calc(${theme.typography.fontSize} * 1.5);
+    line-height: calc(${theme.typography.lineHeight} * 1.5);
+    margin: 0 0 calc(${theme.space.m} * 1.5) 0;
+  }
+
+  .rebilly-instruments-h2 {
+    font-size: calc(${theme.typography.fontSize} * 1.12);
+    line-height: ${theme.typography.lineHeight};
+    margin: 0 0 ${theme.space.m} 0;
+  }
+`;
+
+exports.base = base;

package/dist/style/base/theme.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Theme = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+
+var _colorValues = require("../utils/color-values");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class Theme {
+  constructor(overrides = {}) {
+    this.overrides = overrides;
+    this.theme = {
+      color: {
+        primary: '#0044d4',
+        errorText: '#cd5c5c',
+        text: '#0D2B3E',
+        buttonText: '#ffffff',
+        background: '#ffffff'
+      },
+      typography: {
+        fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
+        fontSize: '16px',
+        lineHeight: '24px',
+        captionFontSize: '12px',
+        captionLineHeight: '12px'
+      },
+      space: {
+        xxs: '4px',
+        xs: '6px',
+        s: '12px',
+        m: '24px',
+        l: '48px',
+        xl: '96px',
+        xxl: '112px',
+        form: {
+          padding: '8px 16px',
+          verticalPadding: '8px',
+          horizontalPadding: '16px',
+          minHeight: '44px'
+        }
+      },
+      borderRadius: '4px'
+    };
+  }
+
+  get getComputed() {
+    return this.computed();
+  }
+
+  computed() {
+    return {
+      color: {
+        primaryValues: (0, _colorValues.colorValues)(this.theme.color.primary),
+        mutedText: (0, _colorValues.alphaColor)(this.theme.color.text, 0.6),
+        mutedBorder: (0, _colorValues.alphaColor)(this.theme.color.text, 0.25)
+      }
+    };
+  }
+
+  build() {
+    return { ...(0, _lodash.default)(this.theme, this.overrides),
+      getComputed: this.getComputed
+    };
+  }
+
+}
+
+exports.Theme = Theme;