@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

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

@@ -0,0 +1,29 @@
+import { fetchPlans } from '../../storefront/plans';
+import { fetchProducts } from '../../storefront/products';
+import { fetchReadyToPay } from '../../storefront/ready-to-pay';
+import { fetchSummary } from '../../storefront/summary';
+
+export async function fetchSummaryData({
+  state = null,
+  riskMetadata = null,
+  summaryPayload = null
+}) {
+  if (!riskMetadata) {
+    throw new Error('riskMetadata is required for FetchSummaryData');
+  }
+
+  const [readyToPay, summary] = await Promise.all([
+    fetchReadyToPay({ riskMetadata, state }),
+    fetchSummary({ data: summaryPayload, state })
+  ]);
+
+  const plans = await fetchPlans({ data: summary, state });
+  const products = await fetchProducts({ data: plans, state });
+
+  return {
+    readyToPay,
+    summary,
+    plans,
+    products
+  };
+}

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

@@ -0,0 +1,41 @@
+import { fetchSummaryData } from './fetch-summary-data';
+
+describe.skip('Fetch Summary Data function helper', () => {
+  class TestInstance {
+    constructor() {
+      this.storefront = jest.fn();
+      this.configs = jest.fn();
+      this.options = jest.fn();
+
+      this._fetchSummary = jest.fn(() => {
+        return new Promise((resolve) => resolve({}));
+      });
+
+      this._fetchProducts = jest.fn();
+    }
+  }
+
+  it.skip('should fetch all the data', async () => {
+    const instance = new TestInstance();
+    await fetchSummaryData({ riskMetadata: {}, state: instance });
+    expect(fetchReadyToPay).toBeCalledTimes(1);
+    expect(instance._fetchSummary).toBeCalledTimes(1);
+    expect(instance._fetchPlans).toBeCalledTimes(1);
+    expect(instance._fetchProducts).toBeCalledTimes(1);
+  });
+
+  it('should pass riskMetadata to ready to pay', async () => {
+    const testRiskMetadata = {};
+    const instance = new TestInstance();
+
+    await fetchSummaryData({ riskMetadata: testRiskMetadata, state: instance });
+
+    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
+
+    expect(async () => {
+      await fetchSummaryData({ state: instance });
+    }).rejects.toEqual(
+      new Error('riskMetadata is required for FetchSummaryData')
+    );
+  });
+});

package/src/functions/mount/index.js

@@ -0,0 +1,312 @@
+/* eslint-disable max-len */
+import { collectData } from '@rebilly/risk-data-collector';
+import merge from 'lodash.merge';
+import { mountSummary } from '../../views/summary';
+import { mountMethodSelector } from '../../views/method-selector';
+import { mainStyle } from '../../style';
+import { addDOMElement, processPropertyAsDOMElement } from '../../utils';
+import { fetchSummaryData } from './fetch-summary-data';
+import { show } from '../show';
+import { on } from '../on';
+
+/**
+ * @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} GooglePay
+ * @param {GooglePayDisplayOptions} displayOptions - display options for google 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.
+ */
+
+/**
+ * @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.
+ */
+
+/**
+ * @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.
+ */
+
+/**
+ * @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.
+ */
+
+/**
+ * Mount library with configurations.
+ * @param {MountParams} params
+ */
+export async function mount({
+  state,
+  form = '.rebilly-instruments',
+  summary = '.rebilly-instruments-summary',
+  options = {},
+  _dev = null
+}) {
+  state.form = form;
+  state.summary = summary;
+  state.mainStyle = null;
+  state._dev = _dev;
+
+  const framePayUrls = {
+    script: _dev
+      ? _dev.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js'
+      : 'https://framepay.rebilly.com/rebilly.js',
+    style: _dev
+      ? _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css'
+      : 'https://framepay.rebilly.com/rebilly.css'
+  };
+  const _computed = {
+    paymentMethodsUrl: _dev
+      ? _dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
+      : 'https://forms.secure-payments.app'
+  };
+
+  const OPTIONS_DEFAULTS = {
+    intent: {
+      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 = { ...options, _computed };
+  if (_dev) {
+    combinedOptions._dev = _dev;
+  }
+
+  state.options = merge(OPTIONS_DEFAULTS, combinedOptions);
+  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 });
+
+  // Adds base stylesheet
+  state.mainStyle = await mainStyle(state.configs?.theme || {});
+  addDOMElement({
+    element: 'style',
+    attributes: { type: 'text/css' },
+    content: state.mainStyle,
+    target: 'head'
+  });
+
+  // Adds configs CSS to override any styles
+  if (state.configs.css) {
+    addDOMElement({
+      element: 'style',
+      attributes: { type: 'text/css' },
+      content: state.configs.css,
+      target: 'head'
+    });
+  }
+
+  // Adds FramePay
+  if (!document.querySelectorAll('[framepay*="script"]').length) {
+    addDOMElement({
+      element: 'script',
+      attributes: {
+        framepay: 'script',
+        src: framePayUrls.script
+      },
+      target: 'head'
+    });
+  }
+
+  if (!document.querySelectorAll('[framepay*="stylesheet"]').length) {
+    addDOMElement({
+      element: 'link',
+      attributes: {
+        framepay: 'stylesheet',
+        href: framePayUrls.style,
+        rel: 'stylesheet'
+      },
+      target: 'head'
+    });
+  }
+
+  try {
+    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;
+    }
+
+    const i18n = state.configs?.i18n || {};
+    state.translate.init(state.options.locale, i18n);
+
+    const {
+      readyToPay,
+      summary: summaryData,
+      plans,
+      products
+    } = await fetchSummaryData({ riskMetadata, state });
+
+    state.hasMounted = true;
+
+    if (state.form) {
+      const formOptions = {
+        summary: summaryData,
+        mainStyle: state.mainStyle,
+        readyToPay,
+        plans,
+        products
+      };
+      mountMethodSelector({ state, formOptions });
+    }
+
+    if (state.summary) {
+      const summaryOptions = {
+        summary: summaryData,
+        readyToPay,
+        plans,
+        products
+      };
+      mountSummary({ state, summaryOptions });
+    }
+  } catch (error) {
+    throw error;
+  }
+
+  const i18n = state.configs?.i18n || {};
+  state.translate.init(state.options.locale, i18n);
+  state.translate.translateItems();
+
+  if (state.options.features.autoConfirmation) {
+    on({
+      eventName: 'instrument-ready',
+      callback: (instrument) => {
+        show({
+          componentName: 'confirmation',
+          payload: {
+            instrument,
+            mainStyle: state.mainStyle
+          },
+          state
+        });
+      }
+    });
+  }
+
+  if (state.options.features.autoResult) {
+    on({
+      eventName: 'purchase-completed',
+      callback: (purchase) => {
+        show({
+          componentName: 'result',
+          payload: {
+            purchase,
+            mainStyle: state.mainStyle
+          },
+          state
+        });
+      }
+    });
+  }
+}

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

@@ -0,0 +1,171 @@
+import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { get, ok, post } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+import PlanModel from '@/storefront/models/plan-model';
+import ProductModel from '@/storefront/models/product-model';
+import SummaryModel from '@/storefront/models/summary-model';
+
+describe('RebillyInstruments instance', () => {
+  it('should throw error when there is no DOM element to mount the form', () => {
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+
+    const rebillyInstruments = MockRebillyInstruments();
+    expect(async () => {
+      await rebillyInstruments.mount({});
+    }).rejects.toEqual(
+      new Error(
+        'Could not find DOM element with CSS class or id ".rebilly-instruments" to mount form'
+      )
+    );
+  });
+
+  it('should throw error when providing the wrong type for the form property', () => {
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+
+    const options = {
+      form: []
+    };
+
+    const rebillyInstruments = MockRebillyInstruments();
+    expect(async () => {
+      await rebillyInstruments.mount(options);
+    }).rejects.toEqual(
+      new Error(
+        'Please provide a valid CSS class, id or DOM element for "form" property'
+      )
+    );
+  });
+
+  it.only("should inject HTML to the merchant's website", async () => {
+    const testPlan = new PlanModel({ name: 'Test Plan', id: 'test-plan-id-1' });
+    const testProduct = new ProductModel({
+      description: 'My Awesome Product',
+      id: 'test-product-1'
+    });
+    const testSummary = new SummaryModel({
+      currency: 'USD',
+      lineItems: [
+        {
+          description: 'test-plan-id-1',
+          planId: 'test-plan-id-1',
+          productId: 'test-product-1',
+          quantity: 1
+        }
+      ]
+    });
+    const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
+    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
+
+    when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
+      (() => {
+        return ok([
+          {
+            method: 'payment-card',
+            feature: {
+              name: 'Google Pay',
+              merchantName: 'google-pay-merchant-name',
+              merchantOrigin: 'google-pay-merchant-origin'
+            },
+            brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
+            filters: []
+          }
+        ]);
+      })()
+    );
+
+    when(post(`${storefrontURL}/preview-purchase`)).thenReturn(
+      (() => {
+        return ok(testSummary);
+      })()
+    );
+
+    when(get(`${storefrontURL}/plans`)).thenReturn(
+      (() => {
+        return ok([testPlan]);
+      })()
+    );
+
+    when(get(`${storefrontURL}/products`)).thenReturn(
+      (() => {
+        return ok([testProduct]);
+      })()
+    );
+
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+
+    const options = {
+      form: '.form-selector',
+      summary: '.summary-selector',
+      _dev: {
+        framePayStyleLink: framePayStyleUrl
+      },
+      options: {
+        locale: 'auto',
+        intent: {
+          items: [
+            {
+              planId: 'test-plan-id-1',
+              quantity: 1
+            }
+          ]
+        }
+      }
+    };
+
+    const rebillyInstruments = MockRebillyInstruments({
+      theme: {
+        color: {
+          background: '#000'
+        }
+      },
+      css: `
+        .rebilly-instruments-summary-line-item-synopsis-title {
+          color: rgb(0, 68, 212);
+        }
+      `
+    });
+    await rebillyInstruments.mount(options);
+
+    // Mounts form and summary
+    const summarySelector = document.querySelector('.summary-selector');
+    expect(summarySelector.innerHTML).toMatch(testPlan.name);
+
+    // 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
+    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
+    const SCRIPTS = [...document.querySelectorAll('head script')];
+    const FRAMEPAY_SCRIPT = SCRIPTS.find(
+      (script) => script.src === framePayScriptUrl
+    );
+    expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl);
+
+    // Mounts _dev FramePay style
+    const STYLE_LINKS = [...document.querySelectorAll('head link')];
+    const FRAMEPAY_STYLE = STYLE_LINKS.find(
+      (script) => script.href === framePayStyleUrl
+    );
+    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
+  });
+});

package/src/functions/on.js

@@ -1,19 +1,22 @@
-import Events from '../events';
+import camelCase from 'lodash.camelcase';
+import Events, { publicEventNames } from '../events';
+
+/**
+ @typedef OnParams
+ @type {Object}
+ @property {string} eventName - The name of the event
+ @property {function} callback - The function that is triggered by the event.
+ */
 
 /**
  * Register events that will be triggered
- * @param {string} eventName - The name of the event
- * @param {function} callback - The function that is triggered by the event.
+ * @param {OnParams} params
  */
-export function On (eventName, callback) {
-  switch(eventName) {
-    case 'instrument-ready':
-      Events.instrumentReady.addEventListener(callback);
-      break;
-    case 'purchase-complete':
-      Events.purchaseComplete.addEventListener(callback);
-      break;
-    default:
-      throw new Error(`${eventName} not a suported event`);
+export function on({ eventName, callback }) {
+  if (!publicEventNames.includes(eventName)) {
+    throw new Error(`${eventName} is not a supported event`);
   }
-}
+
+  const internalEventName = camelCase(eventName);
+  Events[internalEventName].addEventListener(callback);
+}

package/src/functions/on.spec.js

@@ -1,42 +1,52 @@
-import Events from '../events';
+import camelCase from 'lodash.camelcase';
 import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import Events from '../events';
 
 describe('RebillyInstruments on', () => {
-  it('should be able to register event listeners', () => {
-    const events = [
-      {
-        name: 'instrument-ready',
-        dispatch: Events.instrumentReady.dispatch
-      },{
-        name: 'purchase-complete',
-        dispatch: Events.purchaseComplete.dispatch
-      }
-    ];
+  it('should register event listeners', async () => {
     const rebillyInstruments = MockRebillyInstruments();
+    const publicEventNames = ['instrument-ready', 'purchase-completed'];
+
+    await Promise.all(
+      publicEventNames.map(async (eventName) => {
+        const callback = jest.fn();
+        rebillyInstruments.on(eventName, callback);
+
+        const details = {
+          test: 'data'
+        };
+        Events[camelCase(eventName)].dispatch(details);
+
+        expect(callback).toBeCalledTimes(1);
+        expect(callback).toBeCalledWith(details);
+      })
+    );
+  });
 
+  it('should throw error for internal namespaced events', async () => {
+    const callback = jest.fn();
+    const rebillyInstruments = MockRebillyInstruments();
 
-    events.forEach(async event => {
-      const callback = jest.fn();
-      rebillyInstruments.on(event.name, callback);
-
-      const details = {
-        test: 'data'
-      };
-      await event.dispatch(details);
-
-      expect(callback).toBeCalledTimes(1);
-      expect(callback).toBeCalledWith(details);
-    });
-
-    
+    let error;
+    try {
+      // rebilly-instruments-purchase-completed will be used internally but not available externally
+      await rebillyInstruments.on('rebilly-instruments-purchase-completed', callback);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toEqual(new Error('rebilly-instruments-purchase-completed is not a supported event'));
   });
 
-  it('should throw error for a non defined event', () => {
+  it('should throw error for a non defined event', async () => {
     const callback = jest.fn();
     const rebillyInstruments = MockRebillyInstruments();
 
-    expect(async () => {
-      rebillyInstruments.on('not-an-event', callback);
-    }).rejects.toEqual(new Error(`not-an-event not a suported event`));
+    let error;
+    try {
+      await rebillyInstruments.on('not-an-event', callback);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toEqual(new Error('not-an-event is not a supported event'));
   });
 });