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

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

@@ -3,8 +3,8 @@ import { fetchPlans } from '../../storefront/plans';
 import { fetchProducts } from '../../storefront/products';
 import { fetchReadyToPay } from '../../storefront/ready-to-pay';
 import { fetchSummary } from '../../storefront/summary';
-import { fetchInvoice } from '../../storefront/invoices';
-import { fetchTransaction } from '../../storefront/transactions';
+import { fetchInvoice as FetchInvoice } from '../../storefront/invoices';
+import { fetchTransaction as FetchTransaction } from '../../storefront/transactions';
 
 export class DataInstance {
   constructor({
@@ -81,58 +81,72 @@ export class DataInstance {
 
     return lineItems;
   }
+
+  get isShippingRequired() {
+    return this.products.some(product => product.requiresShipping);
+  }
 }
 
 export async function fetchData({
   state = null,
   riskMetadata = null,
-  summaryPayload = null
+  summaryPayload = null,
+
+  // Dependancy injectable functions
+  fetchInvoice = FetchInvoice,
+  fetchTransaction = FetchTransaction
 }) {
-  let transaction = null;
-  if (state.options?.transactionId) {
-    transaction = await fetchTransaction({data: {
-      id: state.options.transactionId
-    }, state});
-    state.data.transaction = transaction;
-  }
+  try {
+    let transaction = null;
+    if (state.options?.transactionId) {
+      transaction = await fetchTransaction({data: {
+        id: state.options.transactionId
+      }, state});
+      state.data.transaction = transaction;
+    }
 
-  let invoice = null;
-  if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
-    invoice = await fetchInvoice({data: {
-      id: state.options.invoiceId
-    }, state});
-    state.data.invoice = invoice;
-  }
+    let invoice = null;
+    if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
+      invoice = await fetchInvoice({data: {
+        id: state.options?.invoiceId || state.data?.transaction?.invoiceId
+      }, state});
+      state.data.invoice = invoice;
+    }
+
+    if (!riskMetadata) {
+      const { riskMetadata: data } = await collectData();
+      riskMetadata = data;
+    }
 
-  if (!riskMetadata) {
-    const { riskMetadata: data } = await collectData();
-    riskMetadata = data;
+    state.data = new DataInstance({
+      state,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+
+    const [readyToPay, previewPurchase] = await Promise.all([
+      state.data?.readyToPay || fetchReadyToPay({ riskMetadata, state }),
+      state.options.items ? fetchSummary({ data: summaryPayload, state }) : null
+    ]);
+
+    const plans = await fetchPlans({ state });
+    state.data.plans = plans;
+    const products = await 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.data?.readyToPay || fetchReadyToPay({ riskMetadata, state }),
-    state.options.items ? fetchSummary({ data: summaryPayload, state }) : null
-  ]);
-
-  const plans = await fetchPlans({ state });
-  state.data.plans = plans;
-  const products = await fetchProducts({ state });
-
-  return new DataInstance({
-    state,
-    readyToPay,
-    previewPurchase,
-    plans,
-    products,
-    invoice,
-    transaction,
-    riskMetadata
-  });
+  return new DataInstance({});
 }

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

@@ -1,46 +1,80 @@
 import { fetchData, DataInstance } from './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();
+import TransactionModel from '../../storefront/models/transaction-model';
+
+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
+      }
     }
-  }
-
-  it('should fetch all the data', async () => {
-    const instance = new TestInstance();
-    await fetchData({ riskMetadata: {}, state: instance });
-    expect(fetchReadyToPay).toBeCalledTimes(1);
-    expect(instance._fetchSummary).toBeCalledTimes(1);
-    expect(instance._fetchPlans).toBeCalledTimes(1);
-    expect(instance._fetchProducts).toBeCalledTimes(1);
+
+    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();
+  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({
+          invoiceIds: [invoiceId]
+        }),
+      }
+    }
 
-    await fetchData({ riskMetadata: testRiskMetadata, state: instance });
+    fetchData({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(
+      expect.objectContaining({
+        data:{
+          id: invoiceId
+        }
+      })
+    );
+  });
 
-    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
+  it('Should not fetch invoice for transaction with no invoice Ids', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new TransactionModel({
+          invoiceIds: []
+        }),
+      }
+    }
 
-    expect(async () => {
-      await fetchData({ state: instance });
-    }).rejects.toEqual(
-      new Error('riskMetadata is required for FetchSummaryData')
-    );
+    fetchData({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    
+    expect(mockFetchInvoice).toBeCalledTimes(0);
+ 
   });
 });
 
 describe('DataInstance', () => {
-
   it ('Should correctly determine amountAndCurrency', () => {
     const expectedAmountAndCurrency = {
       amount: 10,
@@ -199,6 +233,6 @@ describe('DataInstance', () => {
       }
     });
     expect(fetchedData.summaryLineItems).toEqual(expectedSummaryLineItems);
-  })
+  });
 });
 

package/src/functions/mount/index.js

@@ -10,6 +10,7 @@ import setupOptions from './setup-options';
 import setupFramepay from './setup-framepay';
 import setupStyles from './setup-styles';
 import setupI18n from './setup-i18n';
+import setupFramepayTheme from './setup-framepay-theme';
 
 /**
  * @typedef {object} Item
@@ -95,6 +96,7 @@ export async function mount({
     state.options = setupOptions({ options });
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
+    state.options.themeFramepay = await setupFramepayTheme({ state, options });
     const i18n = setupI18n({ state });
     setupFramepay({ state });
 

package/src/functions/mount/mount.spec.js

@@ -23,9 +23,7 @@ describe('RebillyInstruments instance', () => {
         }
       ],
       theme: {
-        color: {
-          background: '#000'
-        }
+        colorBackground: '#000'
       },
       css: `
       .rebilly-instruments-summary-line-item-synopsis-title {
@@ -47,8 +45,8 @@ describe('RebillyInstruments instance', () => {
     const SUMMARY_CONTAINER = summarySelector.querySelector(
       '.rebilly-instruments-content'
     );
-    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual(
-      'rgb(0, 0, 0)'
+    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual(
+      '#000'
     );
 
     // CSS config property overrides initial styles

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

@@ -0,0 +1,82 @@
+import css from 'css';
+import postcss from 'postcss';
+import postcssCustomProperties from 'postcss-custom-properties';
+import camelCase from 'lodash.camelcase';
+
+const resolveCssVars = async (rawCss) => postcss([
+    postcssCustomProperties({ 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 = camelCase(decl.property);
+        if(typeof output[propName] !== 'undefined') {
+          output[propName] = decl.value;
+        }
+      })
+    }
+  }
+  return output;
+}
+
+export default async ({
+  state,
+  options = {}
+}) => {
+  const fullCss = `
+    ${state.mainStyle}
+    ${options.css || ''}
+  `;
+
+  const resolvedCss = await resolveCssVars(fullCss);
+  const cssAst = css.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;
+}

package/src/functions/mount/setup-options.js

@@ -3,6 +3,9 @@ import merge from 'lodash.merge';
 export const defaults = {
   countryCode: 'US',
   locale: 'auto',
+  theme: {
+    labels: 'floating'
+  },
   paymentInstruments: {
     address: {
       name: 'default',

package/src/i18n/en.json

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

package/src/i18n/index.js

@@ -12,7 +12,7 @@ export class Translate {
   init(locale, messages) {
     this.items = document.querySelectorAll('[data-rebilly-i18n]');
     this.locale = this.getLocale(locale);
-    this.languages = merge({ ...en, ...es }, messages);
+    this.languages = merge({}, { ...en, ...es }, messages);
   }
 
   translateItems() {