@rebilly/instruments 2.1.1-beta.0 → 3.1.1-beta.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rebilly/instruments",
-  "version": "2.1.1-beta.0",
+  "version": "3.1.1-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
+  "unpkg": "dist/index.min.js",
   "license": "MIT",
   "scripts": {
-    "build": "yarn babel src --out-dir dist --copy-files",
-    "dev": "yarn babel src --watch --out-dir dist",
+    "build": "yarn rollup -c --environment NODE_ENV:production",
+    "dev": "yarn rollup -c --watch --environment NODE_ENV:development",
     "test": "yarn jest",
     "test:watch": "yarn jest --watchAll"
   },
@@ -16,20 +17,32 @@
     "@babel/preset-env": "^7.14.7",
     "@rebilly/risk-data-collector": "^2.0.1",
     "autoprefixer": "^10.3.4",
+    "css": "^3.0.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
+    "postcss-css-variables": "^0.18.0",
     "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^3.0.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "component-emitter": "^1.3.0",
     "jest": "^27.0.6",
     "msw": "^0.23.0",
-    "msw-when-then": "^1.4.0"
+    "msw-when-then": "^1.4.0",
+    "rollup": "^2.35.1",
+    "rollup-plugin-ignore": "^1.0.10",
+    "rollup-plugin-polyfill-node": "^0.8.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-version-injector": "^1.3.3"
   }
 }

package/rollup.config.js

@@ -0,0 +1,84 @@
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import ignore from 'rollup-plugin-ignore';
+import versionInjector from 'rollup-plugin-version-injector';
+import { builtinModules } from 'module'
+import { terser } from 'rollup-plugin-terser';
+
+const isDevMode = (process.env.NODE_ENV === 'development');
+
+const buildOptions = () => {
+    const options = [
+        // Locates a module in the project's node_modules
+        resolve({ 
+            extensions: [ '.mjs', '.js', '.jsx', '.json' ],
+            preferBuiltins: true,
+            mainFields: ['browser', 'jsnext:main', 'module', 'main']
+        }),
+        // Converts CommonJS to ES6 modules
+        commonjs(),
+        // Fix commonjs issues with virtual node
+        // https://github.com/proteriax/rollup-plugin-ignore/issues/3
+        // https://github.com/rollup/plugins/issues/248
+        // https://github.com/rollup/rollup-plugin-commonjs/issues/315
+        ignore(builtinModules, { commonjsBugFix: true }),
+        // Replace values at bundle time
+        replace({
+            preventAssignment: true,
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+        }),
+        // Allows the use of named imports in addition to the default import on node modules
+        nodePolyfills(),
+        // Babel transpiling
+        babel({
+            exclude: 'node_modules/**',
+            babelHelpers: 'runtime',
+            skipPreflightCheck: true
+        }),
+        // Converts .json files to ES6 modules
+        json(),
+    ]
+    if (!isDevMode) {
+        options.push(
+            // Inject version from package.json (RebillyInstruments.version)
+            versionInjector(),
+            // Minify and reduce bundle file sizes
+            terser())
+    }
+    return options;
+}
+
+const buildOutput = () => {
+    const output = [
+        {
+            file: 'dist/index.js',
+            format: 'es',
+            sourcemap: isDevMode ? 'inline' : false,
+        },
+    ]
+    if (!isDevMode) {
+        output.push(
+            {
+                file: 'dist/index.min.js',
+                format: 'iife',
+                name: 'RebillyInstruments',
+                exports: 'default'
+            },
+        )
+    }
+    return output;
+}
+
+export default {
+    input: 'src/index.js',
+    output: [
+        ...buildOutput(),
+    ],
+    plugins: [
+        ...buildOptions(),
+    ],
+};

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

@@ -81,6 +81,22 @@ export class DataInstance {
 
     return lineItems;
   }
+
+  get isShippingRequired() {
+    return (this.products || []).some(product => product.requiresShipping);
+  }
+
+  toPostmatesModel() {
+    return {
+      ...this,
+      amountAndCurrency: this.amountAndCurrency,
+      isPayment: this.isPayment,
+      isPurchase: this.isPurchase,
+      summaryItems: this.summaryItems,
+      summaryLineItems: this.summaryLineItems,
+      isShippingRequired: this.isShippingRequired
+    }
+  }
 }
 
 export async function fetchData({

package/src/functions/mount/index.js

@@ -2,14 +2,14 @@
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
 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';
+import setupUserFlow from './setup-user-flow';
 
 /**
  * @typedef {object} Item
@@ -80,6 +80,7 @@ export async function mount({
   try {
     state.data = {};
     state.options = {};
+
     // Setup DOM
     state.form = setupElement({ element: 'form', options });
     state.summary = setupElement({ element: 'summary', options });
@@ -95,7 +96,9 @@ export async function mount({
     state.options = setupOptions({ options });
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
-    const i18n = setupI18n({ state });
+    state.options.themeFramepay = await setupFramepayTheme({ state, options });
+    state.i18n = setupI18n({ state });
+
     setupFramepay({ state });
 
     if (state.data.transaction && state.data.transaction?.type === 'setup') {
@@ -109,48 +112,11 @@ export async function mount({
     if (state.summary) {
       mountSummary({ state });
     }
-    i18n({state});
+    state.i18n({state});
     state.hasMounted = true;
   } catch (error) {
     throw error;
   }
 
-  if (state.options.features.autoConfirmation) {
-    on({
-      eventName: 'instrument-ready',
-      callback: (payload) => {
-        show({
-          componentName: 'confirmation',
-          payload,
-          state
-        });
-      }
-    });
-  }
-
-  if (state.options.features.autoResult) {
-    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
-          });
-        }
-      });
-    }
-  }
+  setupUserFlow({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 cssvariables from 'postcss-css-variables';
+import camelCase from 'lodash.camelcase';
+
+const resolveCssVars = async (rawCss) => postcss([
+  cssvariables({ 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',
@@ -28,6 +31,9 @@ export const defaults = {
     },
     paymentCard: {
       popup: false
+    },
+    paypal: {
+      buttonHeight: 44,
     }
   },
   transactionType: 'purchase',

package/src/functions/mount/setup-user-flow.js

@@ -0,0 +1,49 @@
+import { on } from '../on';
+import { show } from '../show';
+import { purchase } from '../purchase';
+import { setup } from '../setup';
+
+function showResult({state, payload}) {
+  show({
+    componentName: 'result',
+    payload,
+    state
+  });
+}
+
+export default ({state = {}}) => {
+  if (state.options.features.autoConfirmation) {
+    on({
+      eventName: 'instrument-ready',
+      callback: (payload) => {
+        // Alternate flow for paypal.
+        if (payload._raw?.method === 'paypal') {
+          if (!state.data.isShippingRequired) {
+            if (state.options.transactionType === 'setup') {
+              setup({state, payload});
+            } else {
+              purchase({state, payload});
+            }
+            state.loader.startLoading({state, id: 'express-purchase', message: 'form.loaderMessages.processingPayment' });
+            return;
+          }
+        }
+        show({
+          componentName: 'confirmation',
+          payload,
+          state
+        });
+      }
+    });
+  }
+
+  if (state.options.features.autoResult) {
+    on({
+      eventName: state.options.transactionType === 'setup' ?
+        'setup-completed' : 'purchase-completed',
+      callback: (payload) => {
+        showResult({state, payload});
+      }
+    });
+  }
+}

package/src/functions/purchase.js

@@ -93,7 +93,7 @@ export async function purchase({ state, payload }) {
       fields = await makePurchase({ state, payload });
     }
 
-    if (fields.transaction?.approvalUrl) {
+    if (fields.transaction?.approvalUrl && fields.transaction?.result === 'unknown') {
       handleApprovalUrl({state, fields});
     } else {
       Events.purchaseCompleted.dispatch(fields);

package/src/functions/setup.js

@@ -16,7 +16,7 @@ export async function setup({ state, payload }) {
 
     state.data = new DataInstance({state, instrument, transaction});
 
-    if (transaction.approvalUrl) {
+    if (transaction.approvalUrl && transaction.result === 'unknown') {
       const { paymentMethodsUrl } = state.options._computed;
       mountModal({
         state,

package/src/functions/show.spec.js

@@ -1,7 +1,7 @@
 import * as result from '@/views/result';
 import * as confirmation from '@/views/confirmation';
 import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { RebillyInstrumentsInstance } from '../index';
+import { RebillyInstrumentsInstance } from '../instance';
 
 const iframeMock = { destroy: jest.fn() };
 

package/src/i18n/en.json

@@ -2,7 +2,7 @@
   "en": {
     "summary": {
       "subTotal": "Sub Total",
-      "discounts": "Discouts",
+      "discounts": "Discounts",
       "taxes": "Taxes",
       "shipping": "Shipping",
       "total": "Total"
@@ -13,6 +13,9 @@
       "popupOverlayText": "Click here to show popup window",
       "error": {
         "noPaymentMethods": "No payment methods available for this transaction, please contact support."
+      },
+      "loaderMessages": {
+        "processingPayment": "Processing payment instrument."
       }
     },
     "paymentMethods": {

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() {

package/src/index.js

@@ -1,63 +1,3 @@
-import { mount } from './functions/mount';
-import { purchase } from './functions/purchase';
-import { setup } from './functions/setup';
-import { on } from './functions/on';
-import { update } from './functions/update';
-import { destroy } from './functions/destroy';
-import { Loader } from './loader';
-import { Translate } from './i18n';
-import { show } from './functions/show';
-
-export class InstrumentsState {
-  constructor() {
-    this.options = null;
-    this.data = {};
-    this.mountingPoints = null;
-    this.storefront = null;
-    this.form = null;
-    this.summary = null;
-    this.loader = new Loader();
-    this.translate = new Translate();
-    this.iframeComponents = [];
-    this.hasMounted = false;
-  }
-}
-
-export class RebillyInstrumentsInstance {
-  constructor() {
-    this.state = new InstrumentsState();
-    // TODO: mountConfirmation, mountResult have different contract shape when they look similar
-    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
-    // when commenting them
-  }
-
-  async mount(options) {
-    await mount({ state: this.state, ...options });
-  }
-
-  async destroy() {
-    await destroy({ state: this.state });
-  }
-
-  async update(newOptions) {
-    await update({state: this.state, newOptions});
-  }
-
-  async purchase(payload) {
-    await purchase({ state: this.state, payload });
-  }
-
-  async setup(payload) {
-    await setup({ state: this.state, payload });
-  }
-
-  async show(componentName, payload) {
-    await show({ state: this.state, componentName, payload });
-  }
-
-  on(eventName, callback) {
-    on({ state: this.state, eventName, callback });
-  }
-}
+import { RebillyInstrumentsInstance } from './instance';
 
 export default new RebillyInstrumentsInstance();

package/src/instance.js

@@ -0,0 +1,65 @@
+import { mount } from './functions/mount';
+import { purchase } from './functions/purchase';
+import { setup } from './functions/setup';
+import { on } from './functions/on';
+import { update } from './functions/update';
+import { destroy } from './functions/destroy';
+import { Loader } from './loader';
+import { Translate } from './i18n';
+import { show } from './functions/show';
+
+export class InstrumentsState {
+  constructor() {
+    this.options = null;
+    this.data = {};
+    this.mountingPoints = null;
+    this.storefront = null;
+    this.form = null;
+    this.summary = null;
+    this.loader = new Loader();
+    this.translate = new Translate();
+    this.iframeComponents = [];
+    this.hasMounted = false;
+  }
+}
+
+export class RebillyInstrumentsInstance {
+  constructor() {
+    this.state = new InstrumentsState();
+    // TODO: mountConfirmation, mountResult have different contract shape when they look similar
+    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
+    // when commenting them
+  }
+
+  async mount(options) {
+    await mount({ state: this.state, ...options });
+  }
+
+  async destroy() {
+    await destroy({ state: this.state });
+  }
+
+  async update(newOptions) {
+    await update({state: this.state, newOptions});
+  }
+
+  async purchase(payload) {
+    await purchase({ state: this.state, payload });
+  }
+
+  async setup(payload) {
+    await setup({ state: this.state, payload });
+  }
+
+  async show(componentName, payload) {
+    await show({ state: this.state, componentName, payload });
+  }
+
+  get version() { 
+    return 'RebillyInstruments Ver.[VI]{version}[/VI]';
+  }
+
+  on(eventName, callback) {
+    on({ state: this.state, eventName, callback });
+  }
+}

package/src/{index.spec.js → instance.spec.js}

@@ -1,4 +1,5 @@
-import RebillyInstruments, { RebillyInstrumentsInstance } from './index';
+import RebillyInstruments from './index';
+import { RebillyInstrumentsInstance } from './instance';
 import { avoidUnhandledPromises } from 'tests/async-utilities';
 
 describe('RebillyInstruments instance', () => {

package/src/loader/index.js

@@ -9,6 +9,7 @@ export class Loader {
       loading: `
                 <div class="rebilly-instruments-loader is-active">
                     <div class="rebilly-instruments-loader-spinner"></div>
+                    <span class="rebilly-instuments-loader-message"><span>
                 </div>
             `
     };
@@ -22,7 +23,7 @@ export class Loader {
     }
   }
 
-  startLoading({ section = 'form', id = '' } = {}) {
+  startLoading({state, section = 'form', id = '', message = null } = {}) {
     const minHeight = '200px';
     this[section].push(id);
 
@@ -36,6 +37,17 @@ export class Loader {
       }
       this.DOM[section].style.minHeight = minHeight; 
     }
+
+    if (message) {
+      const loaderMessage = this.DOM[section].querySelector('.rebilly-instuments-loader-message');
+      if (loaderMessage) {
+        loaderMessage.innerHTML = message;
+        loaderMessage.style.marginTop = '10px';
+        loaderMessage.setAttribute('data-message-id', id);
+        loaderMessage.setAttribute('data-rebilly-i18n', message);
+        state.i18n({state});
+      }
+    }
   }
 
   stopLoading({ section = 'form', id = '' } = {}) {
@@ -54,6 +66,14 @@ export class Loader {
         .classList.remove('is-active');
       this.DOM[section].style.minHeight = '';
     }
+
+    const loaderMessage = this.DOM[section].querySelector(`.rebilly-instuments-loader-message[data-message-id="${id}"]`);
+    if (loaderMessage) {
+      loaderMessage.innerHTML = null;
+      loaderMessage.style.marginTop = '0px';
+      loaderMessage.removeAttribute('data-message-id');
+      loaderMessage.removeAttribute('data-rebilly-i18n');
+    }
   }
 
   clearAll() {