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

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

@@ -1,36 +1,22 @@
 "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', () => {
-  class TestReadyToPayInstance {
-    constructor({
-      configs = {},
-      options = {}
-    } = {}) {
-      this.configs = configs;
-      this.options = options;
-      this.storefront = (0, _storefrontMock.MockStorefront)();
-    }
-
-    fetchReadyToPay(...args) {
-      return _readyToPay.FetchReadyToPay.apply(this, args);
-    }
-
-  }
-
   it('can fetch ready to pay', async () => {
     const readyToPayPayload = [{
       method: 'payment-card',
@@ -38,29 +24,28 @@ describe('Storefront API Ready to Pay', () => {
       brands: ['Visa'],
       filters: []
     }];
-    const configs = {
-      websiteId: 'test-website-id'
-    };
     const options = {
-      intent: {
-        items: [{
-          planId: 'test-plan-id',
-          quantity: 1
-        }]
-      }
+      websiteId: 'test-website-id',
+      items: [{
+        planId: 'test-plan-id',
+        quantity: 1
+      }]
     };
     (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/ready-to-pay`)).thenReturn((0, _mswWhenThen.ok)(readyToPayPayload));
-    const instance = new TestReadyToPayInstance({
-      configs,
+    const instance = (0, _storefrontMock.StorefontTestingInstance)({
       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: {
-        items: options.intent.items,
-        websiteId: configs.websiteId,
+        items: options.items,
+        websiteId: options.websiteId,
         riskMetadata: {}
       }
     });
@@ -71,28 +56,14 @@ 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');
-    const noConfigOrOptionsInstance = new TestReadyToPayInstance({
-      configs: null,
-      options: null
-    });
-    const noConfigInstance = new TestReadyToPayInstance({
-      configs: null,
-      options: {}
-    });
-    const noOptionsInstance = new TestReadyToPayInstance({
-      configs: {},
+  it('should throw errors with no options', async () => {
+    const riskMetadata = null;
+    const noConfigOrOptionsInstance = new _storefrontMock.StorefontTestingInstance({
       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: noConfigOrOptionsInstance
+    }));
   });
 });

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,35 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchSummary = FetchSummary;
+exports.fetchSummary = fetchSummary;
 
 var _summaryModel = _interopRequireDefault(require("./models/summary-model"));
 
+var _index = require("./index");
+
 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) {
-    throw new Error('Could not access rebilly-js-sdk instance');
-  }
-
-  if (!this.configs || !this.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;
+  return (0, _index.Endpoint)({
+    state
+  }, async () => {
+    var _state$options, _state$options2, _state$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$options = state.options) === null || _state$options === void 0 ? void 0 : _state$options.websiteId) || null;
     const payload = {
       data: {
-        websiteId,
-        items
+        websiteId
       }
     };
 
+    if ((_state$options2 = state.options) !== null && _state$options2 !== void 0 && _state$options2.items) {
+      payload.data.items = state.options.items;
+    }
+
+    if ((_state$data = state.data) !== null && _state$data !== void 0 && _state$data.amountAndCurrency) {
+      payload.data = { ...payload.data,
+        ...state.data.amountAndCurrency
+      };
+    }
+
     if (data !== null && data !== void 0 && data.billingAddress) {
       payload.data.billingAddress = data.billingAddress;
     }
@@ -42,11 +47,9 @@ async function FetchSummary({
 
     const {
       fields: summaryFields
-    } = await this.storefront.purchase.preview(payload);
-    return new _summaryModel.default(summaryFields);
-  } catch (error) {
-    throw error;
-  }
-}
+    } = await state.storefront.purchase.preview(payload); // In case of preview purchase gets call again for updating the values
 
-;
+    state.data.previewPurchase = summaryFields;
+    return new _summaryModel.default(summaryFields);
+  });
+}

package/dist/storefront/summary.spec.js

@@ -1,48 +1,29 @@
 "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 }; }
 
 describe('Storefront API Summary', () => {
-  class TestSummaryInstance {
-    constructor({
-      configs = {},
-      options = {},
-      storefront = null
-    } = {}) {
-      this.configs = configs;
-      this.options = options;
-      this.storefront = storefront === null ? (0, _storefrontMock.MockStorefront)() : storefront;
-    }
-
-    fetchSummary(...args) {
-      return _summary.FetchSummary.apply(this, args);
-    }
-
-  }
-
   it('can fetch preview', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
     const options = {
-      intent: {
-        items: [{
-          planId: 'test-plan-id',
-          quantity: 1
-        }]
-      }
+      websiteId: 'test-website-id',
+      items: [{
+        planId: 'test-plan-id',
+        quantity: 1
+      }]
     };
     const testSummary = {
       currency: 'USD',
@@ -53,114 +34,91 @@ describe('Storefront API Summary', () => {
       }]
     };
     (0, _server.when)((0, _mswWhenThen.post)(`${_storefrontApiMock.storefrontURL}/preview-purchase`)).thenReturn((0, _mswWhenThen.ok)(testSummary));
-    const instance = new TestSummaryInstance({
-      configs,
+    const instance = (0, _storefrontMock.StorefontTestingInstance)({
       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: {
-        items: options.intent.items,
-        websiteId: configs.websiteId
+        items: options.items,
+        websiteId: options.websiteId
       }
     });
     expect(response).toBeInstanceOf(_summaryModel.default);
     expect(response).toEqual(new _summaryModel.default(testSummary));
   });
   it('Adds billing address to preview payload', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
     const options = {
-      intent: {
-        items: [{
-          planId: 'test-plan-id',
-          quantity: 1
-        }]
-      }
+      websiteId: 'test-website-id',
+      items: [{
+        planId: 'test-plan-id',
+        quantity: 1
+      }]
     };
     const billingAddress = {
       firstName: 'Test',
       lastName: 'Customer'
     };
-    const instance = new TestSummaryInstance({
-      configs,
+    const instance = (0, _storefrontMock.StorefontTestingInstance)({
       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({
       data: {
-        items: options.intent.items,
-        websiteId: configs.websiteId,
+        items: options.items,
+        websiteId: options.websiteId,
         billingAddress
       }
     });
   });
   it('Adds delivery address to preview payload', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
     const options = {
-      intent: {
-        items: [{
-          planId: 'test-plan-id',
-          quantity: 1
-        }]
-      }
+      websiteId: 'test-website-id',
+      items: [{
+        planId: 'test-plan-id',
+        quantity: 1
+      }]
     };
     const deliveryAddress = {
       firstName: 'Test',
       lastName: 'Customer'
     };
-    const instance = new TestSummaryInstance({
-      configs,
+    const instance = (0, _storefrontMock.StorefontTestingInstance)({
       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({
       data: {
-        items: options.intent.items,
-        websiteId: configs.websiteId,
+        items: options.items,
+        websiteId: options.websiteId,
         deliveryAddress
       }
     });
   });
-  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');
-    const noConfigOrOptionsInstance = new TestSummaryInstance({
-      configs: null,
-      options: null
-    });
-    const noConfigInstance = new TestSummaryInstance({
-      configs: null,
-      options: {}
-    });
-    const noOptionsInstance = new TestSummaryInstance({
-      configs: {},
+  it('should throw errors with no options', async () => {
+    const noConfigOrOptionsInstance = (0, _storefrontMock.StorefontTestingInstance)({
       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: noConfigOrOptionsInstance
+    }));
   });
 });

package/dist/storefront/transactions.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fetchTransaction = fetchTransaction;
+
+var _transactionModel = _interopRequireDefault(require("./models/transaction-model"));
+
+var _index = require("./index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function fetchTransaction({
+  data = null,
+  state = null
+}) {
+  return (0, _index.Endpoint)({
+    state
+  }, async () => {
+    state.storefront.setSessionToken(state.options.customerJwt);
+    const {
+      fields
+    } = await state.storefront.transactions.get(data);
+    return new _transactionModel.default(fields);
+  });
+}

package/dist/style/base/theme.js

@@ -63,12 +63,12 @@ class Theme {
   }
 
   build() {
-    return { ...(0, _lodash.default)(this.theme, this.overrides),
+    return { ...(0, _lodash.default)({ ...this.theme
+      }, this.overrides),
       getComputed: this.getComputed
     };
   }
 
 }
 
-exports.Theme = Theme;
-;
+exports.Theme = Theme;

package/dist/style/components/methods.js

@@ -13,73 +13,60 @@ const expressMethods = theme => `
    * Express methods
    */
 
-  .rebilly-instruments-express-methods * + * {
-    margin-top: ${theme.space.s};
-  }
-
-  .rebilly-instruments-express-methods *:nth-child(2) {
-    margin-top: 0;
-  }
-
-  .rebilly-instruments-express-methods.is-compact * + * {
-    margin-top: 0;
+  @keyframes rebillyExpressShine {
+    to {
+      background-position-x: -200%;
+    }
   }
 
   .rebilly-instruments-express-methods.is-compact {
-    display: flex;
-    justify-content: center;
-    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
     border: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
     border-radius: ${theme.borderRadius};
     position: relative;
-    flex-wrap: wrap;
   }
 
-  @keyframes rebillyExpressShine {
-    to {
-      background-position-x: -200%;
-    }
-  }
-
-  .rebilly-instruments-express-methods.is-compact > * {
-    flex: 1 1;
-    margin: ${theme.space.xs} ${theme.space.xs};
-    max-width: 260px;
+  .rebilly-instruments-express-methods .rebilly-instruments-iframe {
+    display: block;
+    margin-bottom: 0;
     height: 44px;
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
-    border-radius: 6px;
-    background-size: 200% 100%;
-    animation: 1.5s rebillyExpressShine linear infinite;
-    position: relative;
   }
 
-  .rebilly-instruments-express-methods > * {
-    margin: ${theme.space.xs} 0;
-    height: 44px;
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
     border-radius: 6px;
+    margin-bottom: ${theme.space.xs};
+    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
     background-size: 200% 100%;
     animation: 1.5s rebillyExpressShine linear infinite;
   }
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
+    margin: 0;
+  }
 
-  .rebilly-instruments-express-methods > *:last-child {
-    margin-bottom: 0;
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container {
+    display: flex;
+    justify-content: center;
   }
 
-  @media (max-width: 600px) {
-    .rebilly-instruments-express-methods.is-compact > * {
-      flex: 1 1 auto;
-      max-width: 100%;
-    }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+    flex: 1 1 0px;
+    max-width: 260px;
+    margin: 0 ${theme.space.xs};
+  }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
+    margin-left: 0;
+  }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+    margin-right: 0;
   }
 
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
     display: none;
   }
-
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
     position: absolute;
-    top: -12px;
+    top: -12px; left: 50%;
+    transform: translateX(-50%);
     color: ${theme.color.text};
     padding: 0 ${theme.space.s};
     line-height: ${theme.typography.lineHeight};
@@ -88,6 +75,20 @@ const expressMethods = theme => `
     font-weight: 500;
     min-height: auto;
     margin: 0;
+    border: 1px soplid red;
+  }
+
+  @media (max-width: 600px) {
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
+      flex-direction: column;
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+      max-width: 100%;
+      margin: 0 0 ${theme.space.xs};
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+      margin: 0;
+    }
   }
 `;
 

package/dist/style/utils/color-values.js

@@ -19,6 +19,4 @@ function alphaColor(color, alphaValue = 1) {
 
   _alphaColor.alpha = alphaValue;
   return _alphaColor.rgbString();
-}
-
-;
+}

package/dist/style/views/confirmation.js

@@ -22,10 +22,6 @@ const confirmation = theme => `
     margin-left: -${theme.space.xs};
   }
 
-  .rebilly-instruments-confirmation .rebilly-instruments-h2 {    
-    margin: 0 0 ${theme.space.s};
-  }
-
   .rebilly-instruments-confirmation-address-title {
     display: flex;
     justify-content: flex-start;

package/dist/style/views/method-selector.js

@@ -12,7 +12,7 @@ const methodSelector = theme => `
   /**
   * Method selector
   */
-  .rebilly-instruments-method-selector {
+  .rebilly-instruments-method-selector.has-express-compact {
     padding-top: ${theme.space.s};
   }
 `;

package/dist/style/views/modal.js

@@ -38,6 +38,7 @@ const modal = theme => `
     transition: all .24s ease-in-out;
     position: relative;
     max-width: 800px;
+    background: ${theme.color.background};
     margin: 50px auto 20px;
     box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
     border-radius: ${theme.borderRadius};
@@ -66,7 +67,8 @@ const modal = theme => `
 
   .rebilly-instruments-modal-content .rebilly-instruments-iframe {
     transition: all .15s;
-    height: 100%;
+    height: auto;
+    min-height: 360px;
   }
 
   .rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {

package/dist/style/views/summary.js

@@ -93,10 +93,14 @@ const summary = theme => `
     font-weight: 500;
   }
 
+  .rebilly-instruments-summary-breakdown table {
+    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding-bottom: ${theme.space.xs};
+  }
+
   .rebilly-instruments-summary-breakdown-total {
     padding-top: ${theme.space.xs};
     display: flex;
-    border-top: 1px solid ${theme.getComputed.color.mutedBorder};
     align-items: center;
   }
 

package/dist/utils/format-currency.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = formatCurrency;
 
-function formatCurrency(number, currency = 'USD') {
+function formatCurrency(number, currency) {
+  const converToNumber = Number(number);
+  if (Number.isNaN(converToNumber) || number === null) return '-';
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
-    currency
+    currency: currency || 'USD'
   }).format(number);
 }

package/dist/utils/has-valid-css-selector.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = hasValidCSSSelector;
 
 function hasValidCSSSelector(selector) {
-  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/ig;
+  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
   return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
 }