@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.0.0-beta.0",
+  "version": "3.1.2-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"
   },
@@ -22,16 +23,26 @@
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
-    "postcss": "^8.3.6",
-    "postcss-custom-properties": "^12.0.0",
+    "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

@@ -83,7 +83,19 @@ export class DataInstance {
   }
 
   get isShippingRequired() {
-    return this.products.some(product => product.requiresShipping);
+    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
+    }
   }
 }
 

package/src/functions/mount/index.js

@@ -2,8 +2,6 @@
 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';
@@ -11,6 +9,7 @@ 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
@@ -81,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 });
@@ -97,7 +97,8 @@ export async function mount({
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
     state.options.themeFramepay = await setupFramepayTheme({ state, options });
-    const i18n = setupI18n({ state });
+    state.i18n = setupI18n({ state });
+
     setupFramepay({ state });
 
     if (state.data.transaction && state.data.transaction?.type === 'setup') {
@@ -111,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/setup-framepay-theme.js

@@ -1,10 +1,10 @@
 import css from 'css';
 import postcss from 'postcss';
-import postcssCustomProperties from 'postcss-custom-properties';
+import cssvariables from 'postcss-css-variables';
 import camelCase from 'lodash.camelcase';
 
 const resolveCssVars = async (rawCss) => postcss([
-    postcssCustomProperties({ preserve: false })
+  cssvariables({ preserve: false })
   ])
   .process(rawCss, { from: undefined })
   .then(output => output.css);

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

@@ -31,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

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

package/src/storefront/models/ready-to-pay-model.js

@@ -1,18 +1,29 @@
 export class ReadyToPayFeatureModel {
   constructor({
     name = '',
+    expirationTime = '',
+
     // Google Pay fields
     merchantName = '',
     merchantOrigin = '',
+
+    // Paypal fields
+    paypalMerchantId = '',
+    billingAgreementToken = '',
+
     // Plaid fields
     linkToken = '',
-    expirationTime = ''
   } = {}) {
     this.name = name;
+    this.expirationTime = expirationTime;
+
     this.merchantName = merchantName;
     this.merchantOrigin = merchantOrigin;
+
+    this.paypalMerchantId = paypalMerchantId;
+    this.billingAgreementToken = billingAgreementToken;
+
     this.linkToken = linkToken;
-    this.expirationTime = expirationTime;
   }
 }
 

package/src/storefront/plans.js

@@ -15,9 +15,13 @@ export async function fetchPlans({ state = {}, data = {} }) {
         .join(',')}`;
     }
 
-    const { items: planItems } = await state.storefront.plans.getAll(
-      filterByPlanId
-    );
-    return planItems.map(({ fields }) => new PlanModel(fields));
+    // Only fetch plans if we  hae specific plans to fetch
+    if (filterByPlanId.filter.length) {
+      const { items: planItems } = await state.storefront.plans.getAll(
+        filterByPlanId
+      );
+      return planItems.map(({ fields }) => new PlanModel(fields));
+    }
+    return [];
   });
 }

package/src/storefront/plans.spec.js

@@ -16,11 +16,17 @@ describe('Storefront API Plan', () => {
 
     jest.spyOn(instance.storefront.plans, 'getAll');
 
-    const response = await fetchPlans({ state: instance });
+    const response = await fetchPlans({ state: instance, data: {
+      lineItems: [
+        {
+          planId: 'test-plan-id'
+        }
+      ]
+    } });
 
     expect(instance.storefront.plans.getAll).toBeCalledTimes(1);
     expect(instance.storefront.plans.getAll).toBeCalledWith({
-      filter: ''
+      filter: 'id:test-plan-id'
     });
     expect(response).toBeInstanceOf(Array);
     expect(response[0]).toBeInstanceOf(PlanModel);

package/src/storefront/products.js

@@ -18,9 +18,13 @@ export async function fetchProducts({ state }) {
         .join(',')}`;
     }
 
-    const { items: productItems } = await state.storefront.products.getAll(
-      filterByProductId
-    );
-    return productItems.map(({ fields }) => new ProductModel(fields));
+    // Only fetch products if we  hae specific products to fetch
+    if (filterByProductId.filter.length) {
+      const { items: productItems } = await state.storefront.products.getAll(
+        filterByProductId
+      );
+      return productItems.map(({ fields }) => new ProductModel(fields));
+    }
+    return [];
   });
 }

package/src/storefront/products.spec.js

@@ -12,7 +12,13 @@ describe('Storefront API Plan', () => {
 
     when(get(`${storefrontURL}/products`)).thenReturn(ok([testProduct]));
 
-    const instance = new StorefontTestingInstance();
+    const instance = new StorefontTestingInstance({
+      data: {
+        plans: [{
+          productId: 'test-product-id'
+        }
+      ]}
+    });
 
     jest.spyOn(instance.storefront.products, 'getAll');
 
@@ -20,7 +26,7 @@ describe('Storefront API Plan', () => {
 
     expect(instance.storefront.products.getAll).toBeCalledTimes(1);
     expect(instance.storefront.products.getAll).toBeCalledWith({
-      filter: ''
+      filter: 'id:test-product-id'
     });
     expect(response).toBeInstanceOf(Array);
     expect(response[0]).toBeInstanceOf(ProductModel);