@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

package/src/functions/mount/index.js

@@ -1,196 +1,129 @@
 /* eslint-disable max-len */
-import { collectData } from '@rebilly/risk-data-collector';
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
-import { processPropertyAsDOMElement } from '../../utils';
-import { fetchSummaryData } from './fetch-summary-data';
+import { fetchData } from './fetch-data';
 import { show } from '../show';
 import { on } from '../on';
+import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 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
  * @property {string} planId - The Rebilly id of the plan.
  * @property {number} quantity - The number of the plans to be purchased.
  * @property {string} thumbnail - The source img for the product. Recommend 100px by 100px.
- */
-
-/**
- * @typedef {object} Intent
- * @property {"purchase" | "vault"} mode - Which mode the mount is usings. Default "purchase".
- * @property {Array.<Item>} items - Which plans the customer is purchasing.
- * @property {string} customerId - Which customer is associated with the instrument.
- * @property {string} countryCode - The country code for the transaction
- */
-
-/**
- * @typedef {GooglePayDisplayOptions} GooglePay
- * @param {"back" | "white"} buttonColor - default "black". Color of google pay button
- * @param {"short" | "long"} buttonType - default "short". The length of the button
- * @param {string} buttonHeight - The value and units of the button to match other payment buttons
- * <br>example: "44px", "1rem" etc.
- */
-
-/**
+ *
+ * @typedef {object} GooglePayDisplayOptions
+ * @property {"back" | "white"} [buttonColor=black] - Color of google pay button
+ * @property {"short" | "long"} [buttonType=short] - The length of the button
+ * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ *
+ * @typedef {object} ApplePayDisplayOptions
+ * @property {"back" | "white"} [buttonColor=black] - Color of apple pay button
+ * @property {"short" | "long"} [buttonType=short] - The length of the button
+ * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ *
+ * @typedef {object} ApplePayMerchantOptions
+ * @property {string} merchantName - The name of the merchant store.
+ *
  * @typedef {object} GooglePay
- * @param {GooglePayDisplayOptions} displayOptions - display options for google pay instrument
- */
-
-/**
+ * @property {GooglePayDisplayOptions} displayOptions - display options for google pay instrument
+ *
+ * @typedef {object} ApplePay
+ * @property {ApplePayDisplayOptions} displayOptions - display options for apple pay instrument
+ * @property {ApplePayMerchantOptions} merchantOptions - merchant options for apple pay instrument
+ *
  * @typedef {object} PaymentCard
- * @param {boolean} popup - default: false. Show method as a button with a form popup
- * <br>Otherwise the form will be mounted inline.
- */
-
-/**
+ * @property {boolean} [popup=true] - Show method as a button with a form popup. Otherwise the form will be mounted inline.
+ *
  * @typedef {object} Address
- * @param {string} name - default: default. One of default, combined, or stacked.
- * @param {string} region - default: default. One of default, split, or stacked.
- * @param {Array.<"organization" | "phoneNumber">} show. Show extra fields listed.
- * @param {Array.<"address" | "address2" | "email | "country" | "region" | "postalCode"">} hide. Hide the listed fields.
- * @param {Array.<"organization" | "address" | "address2" | "email" | "phoneNumber" | "country" | "region" | "postalCode">} require.
- * <br>If the field name is included, enforce the data for those inputs to be included.
- * <br>First name and last name are always required. Country is always required if the products require shipping.
- */
-
-/**
+ * @property {string} [name=default] - One of default, combined, or stacked.
+ * @property {string} [region=default] - One of default, split, or stacked.
+ * @property {Array.<"organization" | "phoneNumber">} show - Show extra fields listed.
+ * @property {Array.<"address" | "address2" | "email | "country" | "region" | "postalCode"">} hide - Hide the listed fields.
+ * @property {Array.<"organization" | "address" | "address2" | "email" | "phoneNumber" | "country" | "region" | "postalCode">} require - Require the listed fields.
+ *
  * @typedef {object} PaymentInstruments
- * @param {boolean} compactExpressInstruments - default: true. Show express methods as
- * <br>inline pill buttons, or list of full width button.
- * @param {PaymentCard} paymentCard - settings for payment card instruments
- * @param {GooglePay} googlePay - settings for google pay instruments
- * @param {Address} address - customization for address components for all payment instruments.
- */
-
-/**
+ * @property {boolean} [compactExpressInstruments=true] - Show express methods as inline pill buttons, or list of full width button.
+ * @property {PaymentCard} paymentCard - settings for payment card instruments
+ * @property {GooglePay} googlePay - settings for google pay instruments
+ * @property {ApplePay} applePay - settings for apple pay instruments
+ * @property {Address} address - customization for address components for all payment instruments.
+ *
  * @typedef {object} Features
- * @param {boolean} autoConfirmation - default: true. Will mount the confirmation screen after `instrument-ready`
- * <br>event is triggered. Will need to trigger purchase manually if set to false.
- * <br>Can use RebillyInstruments.show('confirmation', options) to mount defautl component
- * @param {boolean} autoResult - default: true. Show results of transaction after `purchase-completed` event is triggered
- * <br>Will need to handle purchase result manually if set to false.
- * <br>Can use RebillyInstruments.show('result', options) to display default component
- */
-
-/**
- * @typedef {object} Options
- * @property {Intent} intent - The information required for purchaseing or vaulting an instrument
- * @property {PaymentInstruments} paymentInstruments - settings for various payment instruments
- * @property {Features} features - flags to enable and disable different features
- * @property {string} locale - default: auto. Language to render component text
- */
-
-/**
- * Mount library with configurations.
- * @typedef {object} MountParams
- * @property {Object} state - Global state
- * @property {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
- * @property {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
- * @property {string | HTMLElement} summary - The CSS class or HTML element were the summary will be mounted.
- * @property {Options} options - The configurations that are to be passed to the library for use.
+ * @property {boolean} [autoConfirmation=true] - Will mount the confirmation screen after `instrument-ready` event is triggered.
+ * @property {boolean} [autoResult=true] - Show results of transaction after `purchase-completed` event is triggered
  */
 
 /**
  * Mount library with configurations.
- * @param {MountParams} params
+ * @param {object} options - The options object
+ * @param {object} options.state - Global state
+ * @param {string | HTMLElement} options.form - The CSS class or HTML element were the form will be mounted.
+ * @param {string | HTMLElement} options.summary - The CSS class or HTML element were the summary will be mounted.
+ * @param {Item[]} options.items - Which plans the customer is purchasing.
+ * @param {string} options.invoiceId - The Rebilly id of the invoice used for purchasing.
+ * @param {string} options.customerJwt - The customer token to access the invoice.
+ * @param {string} [options.countryCode=USD] - The country code for the transaction
+ * @param {PaymentInstruments} options.paymentInstruments - settings for various payment instruments
+ * @param {Features} options.features - flags to enable and disable different features
+ * @param {string} options.locale - default: auto. Language to render component text
  */
 export async function mount({
   state,
-  form = '.rebilly-instruments',
-  summary = '.rebilly-instruments-summary',
   ...options
 } = {}) {
-
-  state.form = form;
-  state.summary = summary;
-  state.storefront = setupStorefront(options);
-  state.options = setupOptions(options);
-  state.mainStyle = await setupStyles(options);
-  state._dev = options._dev;
-  
-  setupFramepay(options);
-  
-  state.form = processPropertyAsDOMElement({
-    prop: state.form,
-    propName: 'form'
-  });
-  state.summary = processPropertyAsDOMElement({
-    prop: state.summary,
-    propName: 'summary',
-    isRequired: false
-  });
-
-  // Setup loader
-  state.loader.addDOMElement({ el: state.form });
-  state.loader.addDOMElement({ section: 'summary', el: state.summary });
-
   try {
+    state.data = {};
+    state.options = {};
+    // Setup DOM
+    state.form = setupElement({ element: 'form', options });
+    state.summary = setupElement({ element: 'summary', options });
+
+    // Setup loader
+    state.loader.addDOMElement({ el: state.form });
+    state.loader.addDOMElement({ section: 'summary', el: state.summary });
     state.loader.startLoading({ section: 'summary', id: 'initSummary' });
     state.loader.startLoading({ id: 'initForm' });
 
-    const { riskMetadata } = await collectData();
-
-    if (
-      state.options.locale === 'auto' &&
-      riskMetadata?.browserData?.language
-    ) {
-      const {
-        browserData: { language }
-      } = riskMetadata;
-      state.options.locale = language;
+    // Setup state
+    state.storefront = setupStorefront({ options });
+    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 });
+
+    if (state.data.transaction && state.data.transaction?.type === 'setup') {
+      state.options.transactionType = 'setup';
     }
 
-    state.translate.init(state.options.locale, state.options.i18n);
-
-    const {
-      readyToPay,
-      summary: summaryData,
-      plans,
-      products
-    } = await fetchSummaryData({ riskMetadata, state });
-
-    state.hasMounted = true;
-
+    // Mount content
     if (state.form) {
-      const formOptions = {
-        summary: summaryData,
-        mainStyle: state.mainStyle,
-        readyToPay,
-        plans,
-        products
-      };
-      mountMethodSelector({ state, formOptions });
+      mountMethodSelector({ state });
     }
-
     if (state.summary) {
-      const summaryOptions = {
-        summary: summaryData,
-        readyToPay,
-        plans,
-        products
-      };
-      mountSummary({ state, summaryOptions });
+      mountSummary({ state });
     }
+    i18n({state});
+    state.hasMounted = true;
   } catch (error) {
     throw error;
   }
 
-  state.translate.init(state.options.locale, state.options.i18n);
-  state.translate.translateItems();
-
   if (state.options.features.autoConfirmation) {
     on({
       eventName: 'instrument-ready',
-      callback: (instrument) => {
+      callback: (payload) => {
         show({
           componentName: 'confirmation',
-          payload: {
-            instrument,
-            mainStyle: state.mainStyle
-          },
+          payload,
           state
         });
       }
@@ -198,18 +131,28 @@ export async function mount({
   }
 
   if (state.options.features.autoResult) {
-    on({
-      eventName: 'purchase-completed',
-      callback: (purchase) => {
-        show({
-          componentName: 'result',
-          payload: {
-            purchase,
-            mainStyle: state.mainStyle
-          },
-          state
-        });
-      }
-    });
+    if (state.options.transactionType === 'setup') {
+      on({
+        eventName: 'setup-completed',
+        callback: (payload) => {
+          show({
+            componentName: 'result',
+            payload,
+            state
+          });
+        }
+      });
+    } else {
+      on({
+        eventName: 'purchase-completed',
+        callback: (payload) => {
+          show({
+            componentName: 'result',
+            payload,
+            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-element.js

@@ -0,0 +1,26 @@
+import { processPropertyAsDOMElement } from '../../utils';
+
+export default ({element = '', options = {}}) => {
+  if (element !== 'form' && element !== 'summary') {
+    throw new Error('element must be "form" or "summary"');
+  }
+
+  const getProp = () => {
+    if (options[element]) {
+      return options[element]
+    }
+    switch(element) {
+      case 'summary':
+        return '.rebilly-instruments-summary'
+      case 'form':
+      default:
+          return '.rebilly-instruments'
+    }
+  }
+
+  return processPropertyAsDOMElement({
+    prop: getProp(),
+    propName: element,
+    isRequired: ['form'].includes(element)
+  });
+}

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-framepay.js

@@ -1,7 +1,11 @@
 import { addDOMElement } from '../../utils';
 
 export default ({
-  _dev
+  state: {
+      options: {
+      _dev
+    }
+  }
 } = {}) => {
   const framePayUrls = {
     script: _dev

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

@@ -0,0 +1,19 @@
+const triggerTranslations = ({state}) => {
+  state.translate.init(state.options.locale, state.options.i18n);
+  state.translate.translateItems();
+}
+
+export default ({state = {}}) => {
+  if (
+    state.options.locale === 'auto' &&
+    state.data.riskMetadata?.browserData?.language
+  ) {
+    const {
+      browserData: { language }
+    } = state.data.riskMetadata;
+    state.options.locale = language;
+  }
+  state.translate.init(state.options.locale, state.options.i18n);
+
+  return triggerTranslations;
+}

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

@@ -1,55 +1,75 @@
 import merge from 'lodash.merge';
 
-export default (options = {}) => {
-  const {
-    _dev
-  }  =  options;
+export const defaults = {
+  countryCode: 'US',
+  locale: 'auto',
+  theme: {
+    labels: 'floating'
+  },
+  paymentInstruments: {
+    address: {
+      name: 'default',
+      region: 'default',
+      hide: [],
+      show: [],
+      require: []
+    },
+    compactExpressInstruments: true,
+    googlePay: {
+      displayOptions: {
+        buttonColor: 'black',
+        buttonType: 'short',
+        buttonHeight: '44px'
+      }
+    },
+    applePay: {
+      displayOptions: {
+        buttonColor: 'black',
+        buttonType: 'plain',
+        buttonHeight: '44px'
+      }
+    },
+    paymentCard: {
+      popup: false
+    }
+  },
+  transactionType: 'purchase',
+  features: {
+    autoConfirmation: true,
+    autoResult: true
+  }
+};
+
+export function validateOptions(options) {
+  // TODO: validate more options
+  const purchaseData = [
+    options.items,
+    options.invoiceId,
+    options.money,
+    options.transactionId,
+  ].filter(v => v);
+
+  if (purchaseData.length === 0) {
+    throw new Error('Must provide purchase data');
+  }
 
-  // TODO: validate options
+  if (purchaseData.length > 1) {
+    throw new Error('Must provide only one purchase data type');
+  }
+}
+
+export default ({
+  options = {}
+} = {}) => {
+  validateOptions(options);
 
   const _computed = {
-    paymentMethodsUrl: _dev
-      ? _dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
+    paymentMethodsUrl: options._dev
+      ? options._dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
       : 'https://forms.secure-payments.app'
   };
 
-  const defaults = {
-    countryCode: 'US',
-    locale: 'auto',
-    paymentInstruments: {
-      address: {
-        name: 'default',
-        region: 'default',
-        hide: [],
-        show: [],
-        require: []
-      },
-      compactExpressInstruments: true,
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'short',
-          buttonHeight: '44px'
-        }
-      },
-      applePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'plain',
-          buttonHeight: '44px'
-        }
-      },
-      paymentCard: {
-        popup: false
-      }
-    },
-    features: {
-      autoConfirmation: true,
-      autoResult: true
-    }
-  };
-
-  const combinedOptions = merge(defaults, {
+  const combinedOptions = merge({...defaults}, {
     organizationId: options.organizationId,
     publishableKey: options.publishableKey,
     websiteId: options.websiteId,
@@ -57,17 +77,27 @@ export default (options = {}) => {
     i18n: options.i18n,
     theme: options.theme,
     css: options.css,
-    items: options.items,
     locale: options.locale,
     countryCode: options.countryCode,
     features: options.features,
     paymentInstruments: options.paymentInstruments,
+    transactionType: options.transactionType,
     _computed
   });
 
-  if (_dev) {
-    combinedOptions._dev = _dev;
-  }
+  // Add optional key's
+  [
+    'items',
+    'money',
+    'invoiceId',
+    'transactionId',
+    'customerJwt',
+    '_dev'
+  ].forEach(key => {
+    if (options[key]) {
+      combinedOptions[key] = options[key];
+    }
+  });
 
   return combinedOptions;
 }