@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

package/src/functions/mount/index.js

@@ -1,271 +1,156 @@
 /* eslint-disable max-len */
-import { collectData } from '@rebilly/risk-data-collector';
-import merge from 'lodash.merge';
-import { mainStyle } from '../../style';
-import { addDOMElement, processPropertyAsDOMElement } from '../../utils';
-import { FetchSummaryData } from './fetch-summary-data';
+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';
 
 /**
  * @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} 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
+ * @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
+ * @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.
- */
-
-/**
-* @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
+ * @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
+ * @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 {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
- * @param {string | HTMLElement} summary - The CSS class or HTML element were the summary will be mounted.
- * @param {Options} options - The configurations that are to be passed to the library for use.
+ * @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 (
-  {
-    form = '.rebilly-instruments',
-    summary = '.rebilly-instruments-summary',
-    options = {},
-    _dev = null,
-  } = {},
-) {
-  this.form = form;
-  this.summary = summary;
-  this.mainStyle = null;
-  this._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'
-        }
-      },
-      paymentCard: {
-        popup: false
-      }
-    },
-    features: {
-      autoConfirmation: true,
-      autoResult: true
-    }
-  };
-
-  const combinedOptions = {...options,  _computed};
-  if (_dev) {
-    combinedOptions._dev = _dev;
-  }
-
-  this.options = merge(OPTIONS_DEFAULTS, combinedOptions);
-  this.form = processPropertyAsDOMElement({prop: this.form, propName: 'form'});
-  this.summary = processPropertyAsDOMElement({prop: this.summary, propName: 'summary', isRequired: false});
-
-  // Setup loader
-  this.loader.addDOMElement({el: this.form});
-  this.loader.addDOMElement({section: 'summary', el: this.summary});
-
-  // Adds base stylesheet
-  this.mainStyle = await mainStyle(this.configs?.theme || {});
-  addDOMElement(
-    {
-      element: 'style',
-      attributes: {type: 'text/css'},
-      content: this.mainStyle,
-      target: 'head'
-    }
-  );
-
-  // Adds configs CSS to override any styles
-  if (this.configs.css) {
-    addDOMElement(
-      {
-        element: 'style',
-        attributes: {type: 'text/css'},
-        content: this.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'
-      }
-    );
-  }
-
+export async function mount({
+  state,
+  ...options
+} = {}) {
   try {
-    this.loader.startLoading({section: 'summary', id: 'initSummary'});
-    this.loader.startLoading({id: 'initForm'});
-    
-    const {riskMetadata} = await collectData();
-
-    if (this.options.locale === 'auto' && riskMetadata?.browserData?.language) {
-      const {browserData: {language}} = riskMetadata;
-      this.options.locale = language;
+    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' });
+
+    // Setup state
+    state.storefront = setupStorefront({ options });
+    state.options = setupOptions({ options });
+    state.mainStyle = await setupStyles({ options });
+    state.data = await fetchData({ state });
+    const i18n = setupI18n({ state });
+    setupFramepay({ state });
+
+    if (state.data.transaction && state.data.transaction?.type === 'setup') {
+      state.options.transactionType = 'setup';
     }
 
-    const i18n = this.configs?.i18n || {};
-    this.translate.init(this.options.locale, i18n);
-
-    const {
-      readyToPay,
-      summary: summaryData,
-      plans,
-      products
-    } = await FetchSummaryData.call(this, { riskMetadata });
-
-    this.hasMounted = true;
-    
-    if (this.form) {
-      this.formOptions = {
-        summary: summaryData,
-        mainStyle: this.mainStyle,
-        readyToPay,
-        plans,
-        products,
-      };
-      this._mountMethodSelector(this.formOptions);
+    // Mount content
+    if (state.form) {
+      mountMethodSelector({ state });
     }
-
-    if (this.summary) {
-      this.summaryOptions = {
-        summary: summaryData,
-        readyToPay,
-        plans,
-        products,
-      };
-      this._mountSummary(this.summaryOptions);
+    if (state.summary) {
+      mountSummary({ state });
     }
-  } catch(error) {
+    i18n({state});
+    state.hasMounted = true;
+  } catch (error) {
     throw error;
   }
 
-  const i18n = this.configs?.i18n || {};
-  this.translate.init(this.options.locale, i18n);
-  this.translate.translateItems();
-
-
-  if (this.options.features.autoConfirmation) {
-    this.on('instrument-ready', (instrument) => {
-      this.show('confirmation', {
-        instrument,
-        mainStyle: this.mainStyle
-      });
+  if (state.options.features.autoConfirmation) {
+    on({
+      eventName: 'instrument-ready',
+      callback: (payload) => {
+        show({
+          componentName: 'confirmation',
+          payload,
+          state
+        });
+      }
     });
   }
 
-  if (this.options.features.autoResult) {
-    this.on('purchase-completed', (purchase) => {
-      this.show('result', {
-        purchase,
-        mainStyle: this.mainStyle
+  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
+          });
+        }
+      });
+    }
   }
-};
+}

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

@@ -1,5 +1,5 @@
-import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { createFramepayMock } from 'tests/mocks/framepay-mock';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { RebillyInstrumentsInstance } from '@rebilly/instruments';
 import { get, ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
 import { storefrontURL } from 'tests/mocks/storefront-api-mock';
@@ -8,171 +8,67 @@ 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('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,
-          }
-        ]
-      }
-    );
+  it("should inject HTML to the merchant's website", async () => {
     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
-            }
-          ]
+      locale: 'auto',
+      items: [
+        {
+          planId: 'test-plan-id-1',
+          quantity: 1
         }
-      }
-    };
-
-    const framepayMock = createFramepayMock();
-    global.Rebilly = framepayMock;
-
-    const rebillyInstruments = MockRebillyInstruments({
+      ],
       theme: {
         color: {
           background: '#000'
         }
       },
       css: `
-        .rebilly-instruments-summary-line-item-synopsis-title {
-          color: rgb(0, 68, 212);
-        }
-      `
-    });
-    await rebillyInstruments.mount(options);
+      .rebilly-instruments-summary-line-item-synopsis-title {
+        color: rgb(0, 68, 212);
+      }
+      `,
+      _dev: {
+        framePayStyleLink: framePayStyleUrl
+      },
+    };
+
+    await RenderMockRebillyInstruments(options);
 
     // Mounts form and summary
     const summarySelector = document.querySelector('.summary-selector');
-    expect(summarySelector.innerHTML).toMatch(testPlan.name);
+    expect(summarySelector.innerHTML).toMatch('My Product');
 
     // Theme config overrides initial styles
-    const SUMMARY_CONTAINER = summarySelector.querySelector('.rebilly-instruments-content');
-    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual('rgb(0, 0, 0)');
+    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');
+    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);
+    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);
+    const FRAMEPAY_STYLE = STYLE_LINKS.find(
+      (script) => script.href === framePayStyleUrl
+    );
     expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
-
-    // objectContaining allows matching a subset (this could be done with sinon + mocha too) 
-    expect(framepayMock.initialize).toHaveBeenCalledWith(expect.objectContaining({
-      digitalWallet: {
-        googlePayDisplayOptions: {
-          buttonColor: 'black',
-          buttonHeight: '44px',
-          buttonType: 'short',
-        },
-        merchantConfig: {
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin',
-        },
-        transactionData: {
-          amount: 0,
-          countryCode: 'US',
-          currency: 'USD',
-          label: 'test-website-id',
-        },
-      },
-      organizationId: 'test-organization-id',
-      publishableKey: 'test-api-key',
-    }));
-
-    //Simulate that framepay is ready
-    framepayMock.simulateEvent('ready');
   });
 });
-

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)
+  });
+}