@rebilly/instruments 2.1.0-beta.0 → 3.1.0-beta.0

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

@@ -98,6 +98,10 @@ class DataInstance {
     return lineItems;
   }
 
+  get isShippingRequired() {
+    return this.products.some(product => product.requiresShipping);
+  }
+
 }
 
 exports.DataInstance = DataInstance;
@@ -105,69 +109,79 @@ exports.DataInstance = DataInstance;
 async function fetchData({
   state = null,
   riskMetadata = null,
-  summaryPayload = null
+  summaryPayload = null,
+  // Dependancy injectable functions
+  fetchInvoice = _invoices.fetchInvoice,
+  fetchTransaction = _transactions.fetchTransaction
 }) {
-  var _state$options2, _state$options3, _state$data, _state$data$transacti, _state$data2;
+  try {
+    var _state$options2, _state$options3, _state$data, _state$data$transacti, _state$data3;
+
+    let transaction = null;
+
+    if ((_state$options2 = state.options) !== null && _state$options2 !== void 0 && _state$options2.transactionId) {
+      transaction = await fetchTransaction({
+        data: {
+          id: state.options.transactionId
+        },
+        state
+      });
+      state.data.transaction = transaction;
+    }
 
-  let transaction = null;
+    let invoice = null;
 
-  if ((_state$options2 = state.options) !== null && _state$options2 !== void 0 && _state$options2.transactionId) {
-    transaction = await (0, _transactions.fetchTransaction)({
-      data: {
-        id: state.options.transactionId
-      },
-      state
-    });
-    state.data.transaction = transaction;
-  }
+    if ((_state$options3 = state.options) !== null && _state$options3 !== void 0 && _state$options3.invoiceId || (_state$data = state.data) !== null && _state$data !== void 0 && (_state$data$transacti = _state$data.transaction) !== null && _state$data$transacti !== void 0 && _state$data$transacti.hasInvoice) {
+      var _state$options4, _state$data2, _state$data2$transact;
+
+      invoice = await fetchInvoice({
+        data: {
+          id: ((_state$options4 = state.options) === null || _state$options4 === void 0 ? void 0 : _state$options4.invoiceId) || ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : (_state$data2$transact = _state$data2.transaction) === null || _state$data2$transact === void 0 ? void 0 : _state$data2$transact.invoiceId)
+        },
+        state
+      });
+      state.data.invoice = invoice;
+    }
 
-  let invoice = null;
+    if (!riskMetadata) {
+      const {
+        riskMetadata: data
+      } = await (0, _riskDataCollector.collectData)();
+      riskMetadata = data;
+    }
 
-  if ((_state$options3 = state.options) !== null && _state$options3 !== void 0 && _state$options3.invoiceId || (_state$data = state.data) !== null && _state$data !== void 0 && (_state$data$transacti = _state$data.transaction) !== null && _state$data$transacti !== void 0 && _state$data$transacti.hasInvoice) {
-    invoice = await (0, _invoices.fetchInvoice)({
-      data: {
-        id: state.options.invoiceId
-      },
+    state.data = new DataInstance({
+      state,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+    const [readyToPay, previewPurchase] = await Promise.all([((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.readyToPay) || (0, _readyToPay.fetchReadyToPay)({
+      riskMetadata,
+      state
+    }), state.options.items ? (0, _summary.fetchSummary)({
+      data: summaryPayload,
+      state
+    }) : null]);
+    const plans = await (0, _plans.fetchPlans)({
       state
     });
-    state.data.invoice = invoice;
-  }
-
-  if (!riskMetadata) {
-    const {
-      riskMetadata: data
-    } = await (0, _riskDataCollector.collectData)();
-    riskMetadata = data;
+    state.data.plans = plans;
+    const products = await (0, _products.fetchProducts)({
+      state
+    });
+    return new DataInstance({
+      state,
+      readyToPay,
+      previewPurchase,
+      plans,
+      products,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+  } catch (error) {// console.log(error);
   }
 
-  state.data = new DataInstance({
-    state,
-    invoice,
-    transaction,
-    riskMetadata
-  });
-  const [readyToPay, previewPurchase] = await Promise.all([((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.readyToPay) || (0, _readyToPay.fetchReadyToPay)({
-    riskMetadata,
-    state
-  }), state.options.items ? (0, _summary.fetchSummary)({
-    data: summaryPayload,
-    state
-  }) : null]);
-  const plans = await (0, _plans.fetchPlans)({
-    state
-  });
-  state.data.plans = plans;
-  const products = await (0, _products.fetchProducts)({
-    state
-  });
-  return new DataInstance({
-    state,
-    readyToPay,
-    previewPurchase,
-    plans,
-    products,
-    invoice,
-    transaction,
-    riskMetadata
-  });
+  return new DataInstance({});
 }

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

@@ -2,43 +2,67 @@
 
 var _fetchData = require("./fetch-data");
 
-describe.skip('Fetch Summary Data function helper', () => {
-  class TestInstance {
-    constructor() {
-      this.storefront = jest.fn();
-      this.options = jest.fn();
-      this._fetchSummary = jest.fn(() => {
-        return new Promise(resolve => resolve({}));
-      });
-      this._fetchProducts = jest.fn();
-    }
+var _transactionModel = _interopRequireDefault(require("../../storefront/models/transaction-model"));
 
-  }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  it('should fetch all the data', async () => {
-    const instance = new TestInstance();
-    await (0, _fetchData.fetchData)({
-      riskMetadata: {},
-      state: instance
-    });
-    expect(fetchReadyToPay).toBeCalledTimes(1);
-    expect(instance._fetchSummary).toBeCalledTimes(1);
-    expect(instance._fetchPlans).toBeCalledTimes(1);
-    expect(instance._fetchProducts).toBeCalledTimes(1);
+describe('fetchData function', () => {
+  it('Should use correct invoice id for invoiceId', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {
+        invoiceId
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(expect.objectContaining({
+      data: {
+        id: invoiceId
+      }
+    }));
+  });
+  it('Should use correct invoice id for transaction with invoiceIds', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new _transactionModel.default({
+          invoiceIds: [invoiceId]
+        })
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(expect.objectContaining({
+      data: {
+        id: invoiceId
+      }
+    }));
   });
-  it('should pass riskMetadata to ready to pay', async () => {
-    const testRiskMetadata = {};
-    const instance = new TestInstance();
-    await (0, _fetchData.fetchData)({
-      riskMetadata: testRiskMetadata,
-      state: instance
-    });
-    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
-    expect(async () => {
-      await (0, _fetchData.fetchData)({
-        state: instance
-      });
-    }).rejects.toEqual(new Error('riskMetadata is required for FetchSummaryData'));
+  it('Should not fetch invoice for transaction with no invoice Ids', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new _transactionModel.default({
+          invoiceIds: []
+        })
+      }
+    };
+    (0, _fetchData.fetchData)({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    expect(mockFetchInvoice).toBeCalledTimes(0);
   });
 });
 describe('DataInstance', () => {

package/dist/functions/mount/index.js

@@ -27,6 +27,8 @@ var _setupStyles = _interopRequireDefault(require("./setup-styles"));
 
 var _setupI18n = _interopRequireDefault(require("./setup-i18n"));
 
+var _setupFramepayTheme = _interopRequireDefault(require("./setup-framepay-theme"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable max-len */
@@ -139,6 +141,10 @@ async function mount({
     state.data = await (0, _fetchData.fetchData)({
       state
     });
+    state.options.themeFramepay = await (0, _setupFramepayTheme.default)({
+      state,
+      options
+    });
     const i18n = (0, _setupI18n.default)({
       state
     });

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

@@ -31,9 +31,7 @@ describe('RebillyInstruments instance', () => {
         quantity: 1
       }],
       theme: {
-        color: {
-          background: '#000'
-        }
+        colorBackground: '#000'
       },
       css: `
       .rebilly-instruments-summary-line-item-synopsis-title {
@@ -50,7 +48,7 @@ describe('RebillyInstruments instance', () => {
     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
+    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

package/dist/functions/mount/setup-framepay-theme.js

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

@@ -13,6 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaults = {
   countryCode: 'US',
   locale: 'auto',
+  theme: {
+    labels: 'floating'
+  },
   paymentInstruments: {
     address: {
       name: 'default',

package/dist/i18n/en.json

@@ -2,7 +2,7 @@
   "en": {
     "summary": {
       "subTotal": "Sub Total",
-      "discounts": "Discouts",
+      "discounts": "Discounts",
       "taxes": "Taxes",
       "shipping": "Shipping",
       "total": "Total"

package/dist/i18n/index.js

@@ -23,7 +23,7 @@ class Translate {
   init(locale, messages) {
     this.items = document.querySelectorAll('[data-rebilly-i18n]');
     this.locale = this.getLocale(locale);
-    this.languages = (0, _lodash.default)({ ..._en.default,
+    this.languages = (0, _lodash.default)({}, { ..._en.default,
       ..._es.default
     }, messages);
   }