@rebilly/instruments 3.22.0-beta.0 → 3.23.0-beta.0

package/src/views/method-selector/generate-framepay-config.spec.js

@@ -1,20 +1,17 @@
 import {generateFramepayConfig} from './generate-framepay-config';
+import state from '../../state';
 
 describe('Generate FramePay Config', () => {
-  let state;
-
   beforeEach(() => {
-    state = {
-      options: {
-        themeFramepay: {},
-        locale: 'en-CA',
-        organizationId: 'test-organization-id',
-        websiteId: 'test-website-id'
-      },
-      data: {
-        readyToPay: []
-      }
+    state.options = {
+      themeFramepay: {},
+      locale: 'en-CA',
+      organizationId: 'test-organization-id',
+      websiteId: 'test-website-id'
     };
+    state.data = {
+      readyToPay: []
+    }
   });
 
   it('should generate default config', () => {

package/src/views/method-selector/get-payment-methods.js

@@ -1,3 +1,5 @@
+import state from '../../state';
+
 // TODO: Express methods should be filtered from RTP some how
 export const SUPPORTED_EXPRESS_METHODS = [
   'Google Pay',
@@ -21,7 +23,7 @@ const isExpressMethod = ({ method, feature }) => (
 
 const isSupportedMethod = ({ method }) => SUPPORTED_METHODS.includes(method);
 
-export function getPaymentMethods({ state }) {
+export function getPaymentMethods() {
   const result = {
     EXPRESS_METHODS: [],
     METHODS: []

package/src/views/method-selector/get-payment-methods.spec.js

@@ -1,42 +1,33 @@
 import { getPaymentMethods } from './get-payment-methods';
 import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
-
-class TestInstance {
-  constructor() {
-    this.loader = {
-      startLoading: jest.fn(),
-      stopLoading: jest.fn()
-    };
-    this.data = {
-      readyToPay: [
-        new ReadyToPayModel({
-          method: 'payment-card',
-          feature: {
-            name: 'Google Pay',
-            merchantName: 'google-pay-merchant-name',
-            merchantOrigin: 'google-pay-merchant-origin'
-          },
-          brands: ['Visa'],
-          filters: []
-        }),
-        new ReadyToPayModel({
-          method: 'fake-method',
-          filters: []
-        }),
-        new ReadyToPayModel({
-          method: 'payment-card',
-          brands: ['Visa'],
-          filters: []
-        })
-      ]
-    }
-  }
-}
+import state from 'src/state';
 
 it('should only return the allowed methods', () => {
-  const instance = new TestInstance();
+  state.data = {
+    readyToPay: [
+      new ReadyToPayModel({
+        method: 'payment-card',
+        feature: {
+          name: 'Google Pay',
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        brands: ['Visa'],
+        filters: []
+      }),
+      new ReadyToPayModel({
+        method: 'fake-method',
+        filters: []
+      }),
+      new ReadyToPayModel({
+        method: 'payment-card',
+        brands: ['Visa'],
+        filters: []
+      })
+    ]
+  }
 
-  const results = getPaymentMethods({ state: instance });
+  const results = getPaymentMethods();
   expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);
   expect(results['EXPRESS_METHODS'].length).toEqual(1);
   expect(results['METHODS'].length).toEqual(1);

package/src/views/method-selector/index.js

@@ -1,17 +1,21 @@
 /* eslint-disable no-undef */
 import { collectData } from '@rebilly/risk-data-collector';
+import state from '../../state';
+import iframes from '../../state/iframes';
 import { getPaymentMethods } from './get-payment-methods';
 import { fetchData } from '../../functions/mount/fetch-data';
 import { ViewIframe } from '../common/iframe';
 import { purchase } from '../../functions/purchase';
 import { setup } from '../../functions/setup';
 import { mountExpressMethods } from './mount-express-methods';
+import { mountBumpOffer } from './mount-bump-offer';
 import { generateDigitalWallet } from './generate-digital-wallet';
 import { updateSummary } from '../summary';
 
-export const baseMethodSelectorHTML = (compactExpressInstruments) => `
+export const baseMethodSelectorHTML = ({compactExpressInstruments, bumpOffer}) => `
 <div class="rebilly-instruments-content">
   <div id="rebilly-instruments-error"></div>
+  ${bumpOffer.length ? '<div data-rebilly-instruments="bump-offer" class="rebilly-instruments-bump-offers"></div>' : ''}
   <div data-rebilly-instruments="express-method" class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
     <div class="rebilly-instruments-express-methods ${
       compactExpressInstruments ? 'is-compact' : ''
@@ -23,31 +27,32 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
       <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
     </div>
   </div>
-  <div class="rebilly-instruments-methods"></div>
+  <div data-rebilly-instruments="methods" class="rebilly-instruments-methods"></div>
 </div>
 `;
 
-export async function mountMethodSelector({ state }) {
-  const { EXPRESS_METHODS, METHODS } = getPaymentMethods({ state });
+export async function mountMethodSelector() {
+  const { EXPRESS_METHODS, METHODS } = getPaymentMethods();
 
   const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
   if (methodSelectorElement) {
     methodSelectorElement.style.visibility = 'visible';
     methodSelectorElement.style.height = 'auto';
   } else {
-    state.form.innerHTML += baseMethodSelectorHTML(
-      state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
-    );
+    state.form.innerHTML += baseMethodSelectorHTML({
+      compactExpressInstruments: state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length,
+      bumpOffer: state.options.bumpOffer
+    });
   }
 
-  const METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
+  const BUMPOFFER_CONTAINER = document.querySelector('[data-rebilly-instruments="bump-offer"]');
+  const METHODS_CONTAINER = document.querySelector('[data-rebilly-instruments="methods"]');
   const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods-container');
 
   if(EXPRESS_METHODS.length) {
     if (!methodSelectorElement) {
-      state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
+      state.options.digitalWallet = generateDigitalWallet({ EXPRESS_METHODS });
       mountExpressMethods({
-        state,
         methods: EXPRESS_METHODS,
         container: EXPRESS_METHODS_CONTAINER,
       });
@@ -59,16 +64,16 @@ export async function mountMethodSelector({ state }) {
   }
 
   if (METHODS.length) {
+    const modelSafeState = state.toModel();
     const model = {
-      options: state.options,
-      data: state.data.toPostmatesModel(),
-      mainStyleVars: state.mainStyleVars,
+      options: modelSafeState.options,
+      data: modelSafeState.data,
+      mainStyleVars: modelSafeState.mainStyleVars,
     };
-    const { paymentMethodsUrl } = state.options._computed;
+    const { paymentMethodsUrl } = state.options?._computed;
 
     const name = 'rebilly-instruments-form';
     const iframe = await new ViewIframe({
-      state,
       name,
       url: `${paymentMethodsUrl}`,
       container: METHODS_CONTAINER,
@@ -89,35 +94,49 @@ export async function mountMethodSelector({ state }) {
         .forEach(el => {
           el.style.height = 'auto';
         });
+      document.querySelectorAll('[data-rebilly-instruments="bump-offer"]')
+        .forEach(el => {
+          el.style.height = 'auto';
+          el.style.marginBottom = 'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
+        });
 
       iframe.component.call('route', {
         name: 'method-switch'
       });
       
       if (state.data.isPurchase) {
-        updateSummary({ state });
+        updateSummary();
       }
 
       iframe.component.call('update', model);
     });
 
-    state.iframeComponents.form = iframe;
+    iframes.form = iframe;
   } else {
     METHODS_CONTAINER.style.display = 'none';
     document.querySelectorAll('[data-rebilly-instruments="divider"]')
       .forEach(el => { el.style.display = 'none' });
   }
+
+  if (state.options.bumpOffer.length) {
+    mountBumpOffer({
+      container: BUMPOFFER_CONTAINER,
+    });
+  } else if (BUMPOFFER_CONTAINER?.style) {
+    BUMPOFFER_CONTAINER.style.display = 'none';
+  }
 }
 
-export async function updateMethodSelector({ state }) {
+export async function updateMethodSelector() {
   state.loader.startLoading({ id: 'rebilly-instruments-methods' });
 
   const { riskMetadata } = await collectData();
-  state.data = await fetchData({ state, riskMetadata });
+  state.data = await fetchData({ riskMetadata });
+  state.updateModel();
 
   if (state.data.transaction && state.data.transaction?.type === 'setup') {
     state.options.transactionType = 'setup';
   }
 
-  mountMethodSelector({ state });
+  mountMethodSelector();
 }

package/src/views/method-selector/method-selector.spec.js

@@ -1,120 +1,20 @@
-import SummaryModel from '@/storefront/models/summary-model';
-import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
-import { Loader } from '../../loader';
-import { Translate } from '../../i18n';
-import { mountMethodSelector, updateMethodSelector } from './index';
-import { avoidUnhandledPromises } from 'tests/async-utilities';
-import { MockStorefront } from 'tests/mocks/storefront-mock';
-import { DataInstance } from '../../functions/mount/fetch-data';
-import setupOptions from '../../functions/mount/setup-options';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { updateMethodSelector } from './index';
 
-describe('Summary component', () => {
-  let formElement;
-  beforeEach(() => {
-    formElement = document.createElement('div');
-    document.body.append(formElement);
-  });
-
-  class TestMountMethodSelectorInstance {
-    constructor({
-      options = {},
-      form = formElement,
-      loader = new Loader(),
-      translate = new Translate()
-    } = {}) {
-      this.options = setupOptions({options});
-      this.form = form;
-      this.loader = loader;
-      this.translate = translate;
-      this.storefront = MockStorefront();
-      this.data = new DataInstance({
-        state: {options},
-        previewPurchase: new SummaryModel({
-          currency: 'USD',
-          lineItems: [
-            {
-              type: 'debit',
-              description: 'My Awesome Product',
-              unitPrice: 30,
-              quantity: 1,
-              price: 30,
-              productId: 'my-awesome-product',
-              planId: 'my-awesome-product'
-            },
-            {
-              type: 'debit',
-              description: 'Awesome T-Shirt',
-              unitPrice: 20,
-              quantity: 2,
-              price: 40,
-              productId: 'my-app',
-              planId: 'awesome-t-shirt'
-            }
-          ],
-          subtotalAmount: 70,
-          taxAmount: 0,
-          shippingAmount: 0,
-          discountsAmount: 0,
-          total: 70
-        }),
-        readyToPay: [
-          new ReadyToPayModel({
-            method: 'payment-card',
-            feature: {
-              name: 'Google Pay',
-              merchantName: 'google-pay-merchant-name',
-              merchantOrigin: 'google-pay-merchant-origin'
-            },
-            brands: ['Visa'],
-            filters: []
-          }),
-        ]
-      });
-    }
-  }
-
-  const options = {
-    websiteId: 'test-website-id',
-    countryCode: 'US',
-    items: [
-      {
-        planId: 'my-awesome-product',
-        quantity: 1
-      },
-      {
-        planId: 'awesome-t-shirt',
-        quantity: 2
-      }
-    ],
-    _computed: {
-      paymentMethodsUrl: ''
-    }
-  };
-
-  it('should inject the proper HTML for express methods', async () => {
-    const mountSummaryInstance = new TestMountMethodSelectorInstance({
-      options
+describe('Methods Selector Component', () => {
+  it ('should inject the proper HTML for express methods', async () => {
+    await RenderMockRebillyInstruments({
+      form: '.rebilly-instruments-form'
     });
 
-    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
-
-    mountMethodSelector({ state: mountSummaryInstance });
-
     const form = document.querySelector('.rebilly-instruments-form');
     expect(form).toMatchSnapshot();
-    await avoidUnhandledPromises();
   });
 
-  it('should allow updating method selector', async () => {
-    const state = new TestMountMethodSelectorInstance({
-      options
-    });
-
-    state.loader.DOM.form = state.form;
-
+  it.only ('should allow updating method selector', async () => {
+    await RenderMockRebillyInstruments();
     await updateMethodSelector({
-      state,
       mainStyleVars: 'any main style'
     });
   });
-});
+});

package/src/views/method-selector/mount-bump-offer.js

@@ -0,0 +1,99 @@
+import state from '../../state';
+import formatCurrency from '../../utils/format-currency';
+import {fetchSummary} from '../../storefront/summary'
+
+function lineItem({offer}) {
+  const plan = state.data.plans.find(item => item.id === offer.planId);
+  const product = state.data.products.find(item => item.id === plan.productId);
+
+  const rif = (condition, template) => condition ? template : '';
+
+  function unitPrice() {
+    const planPricing = plan.pricing.isBracket
+      ? plan.pricing.brackets[0].price
+      : plan.pricing.price;
+
+    const basePrice = formatCurrency(planPricing, plan.currency);
+    return plan.pricing.isBracket ? `Starting at ${basePrice}` : basePrice;
+  }
+
+  const thumbnail = (item) => rif(item.thumbnail, `
+    <figure class="rebilly-instruments-bump-offer-line-item-figure">
+      <img src="${item.thumbnail}" :alt="${item.name}"/>
+    </figure>
+  `);
+
+  const synopsis = (item) => `
+    <div class="rebilly-instruments-bump-offer-line-item-synopsis">
+      <p class="rebilly-instruments-bump-offer-line-item-synopsis-title">
+        ${item.name}
+      </p>
+      ${rif(item.description, `
+        <p class="rebilly-instruments-bump-offer-line-item-synopsis-description">
+          ${item.description}
+        </p>
+      `)}
+    </div>
+  `;
+
+  const breakdown = (item) => `
+    <div class="rebilly-instruments-bump-offer-line-item-price-breakdown">
+      ${rif(item.quantity, `
+        <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-quantity">
+          ${item.quantity}
+        </p>
+        <svg class="rebilly-instruments-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z" fill-rule="nonzero"/>
+        </svg>
+      `)}
+      <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-unit-price">
+        ${item.unitPrice}
+      </p>
+    <div>
+  `;
+
+  const line = {
+    ...offer,
+    quantity: plan.pricing.isBracket ? null : offer.quantity,
+    name: product.name,
+    description: plan.name,
+    unitPrice: unitPrice(),
+  }
+
+  return `
+    <div class="rebilly-instruments-bump-offer-line-item">
+      ${thumbnail(line)}
+      ${synopsis(line)}
+      ${breakdown(line)}
+    </div>
+  `
+}
+
+export function mountBumpOffer ({container}) {
+  container.insertAdjacentHTML('beforeEnd', `
+    <label for="rebilly-instruments-bump-offer" class="rebilly-instruments-form-field-checkbox">
+      <div class="rebilly-instruments-bump-offer-label">Yes, I want to upgrade!</div>
+      <input
+        type="checkbox"
+        id="rebilly-instruments-bump-offer"
+      />
+      <span></span>
+    </label>
+  `);
+
+  const checkbox = document.getElementById('rebilly-instruments-bump-offer')
+  checkbox.addEventListener('click', async () => {
+    state.data.acceptBumpOffer = checkbox.checked;
+    await fetchSummary();
+    state.updateModel();
+  });
+
+  checkbox.checked = state.data.acceptBumpOffer;
+
+  state.options.bumpOffer.forEach(offer => {
+    const node = document.createElement('div');
+    node.classList.add('rebilly-instruments-bump-offer');
+    node.insertAdjacentHTML('beforeEnd', lineItem({offer}));
+    container.appendChild(node);
+  });
+}

package/src/views/method-selector/mount-express-methods.js

@@ -2,11 +2,11 @@ import mountExpressMethod from './express-methods';
 import {generateFramepayConfig} from './generate-framepay-config'
 import { getMethodData } from './get-method-data';
 import Events from '../../events';
+import state from '../../state';
 
 const browserIsSafari = () => window.ApplePaySession;
 
 export async function mountExpressMethods({
-  state,
   methods,
   container
 }) {
@@ -19,7 +19,6 @@ export async function mountExpressMethods({
   if(!Rebilly?.initialized) {
     await Rebilly?.initialize(
       generateFramepayConfig({
-        state,
         methodIds
       })
     );

package/src/views/modal.js

@@ -1,3 +1,4 @@
+import state from '../state';
 import { ModalIframe } from './common/iframe';
 
 const modalTemplate = (isRedirect, method) => `
@@ -21,7 +22,6 @@ export async function mountModal({
   model = {},
   classListArray = [],
   close = () => {},
-  state = null
 } = {}) {
   const method = model?.method?.method;
   const isRedirect = name === 'rebilly-instruments-approval-url';
@@ -48,13 +48,13 @@ export async function mountModal({
   state.loader.addDOMElement({ section: 'modal', el: modalContent });
   state.loader.startLoading({ section: 'modal', id: name });
 
+  const modelSafeState = state.toModel();
   const injectedModel = {
-    options: state.options,
+    options: modelSafeState.options,
     ...model
   };
 
   const iframe = await new ModalIframe({
-    state,
     name,
     url,
     model: injectedModel,

package/src/views/result.js

@@ -1,7 +1,9 @@
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
+import state from '../state';
+import iframes from '../state/iframes';
 
-export async function mountResult({ payload, state }) {
+export async function mountResult({ payload }) {
   const resultContainerClassName = 'rebilly-instruments-result';
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
@@ -11,14 +13,14 @@ export async function mountResult({ payload, state }) {
   const container = document.querySelector(`.${resultContainerClassName}`);
   const { paymentMethodsUrl } = state.options._computed;
 
+  const modelSafeState = state.toModel();
   const model = {
-    options: state.options,
-    mainStyleVars: state.mainStyleVars,
+    options: modelSafeState.options,
+    mainStyleVars: modelSafeState.mainStyleVars,
     [state.options.transactionType]: payload
   };
 
   const iframe = await new ViewIframe({
-    state,
     name: 'rebilly-instruments-result',
     url: `${paymentMethodsUrl}/result`,
     container,
@@ -28,5 +30,5 @@ export async function mountResult({ payload, state }) {
     loader: state.loader
   });
 
-  state.iframeComponents.form = iframe;
+  iframes.form = iframe;
 }

package/src/views/summary.js

@@ -1,33 +1,29 @@
+import state from '../state';
+import iframes from '../state/iframes';
 import { ViewIframe } from './common/iframe';
 import { fetchSummary } from '../storefront/summary';
 
-export async function mountSummary({ state }) {
+export async function mountSummary() {
+  const modelSafeState = state.toModel();
   const model = {
-    options: state.options,
-    data: state.data.toPostmatesModel(),
-    mainStyleVars: state.mainStyleVars,
+    options: modelSafeState.options,
+    data: modelSafeState.data,
+    mainStyleVars: modelSafeState.mainStyleVars,
   };
-  const { paymentMethodsUrl } = state.options._computed;
+  const { paymentMethodsUrl } = state.options?._computed;
 
   const iframe = await new ViewIframe({
-    state,
     name: 'rebilly-instruments-summary',
     url: `${paymentMethodsUrl}/summary`,
     container: state.summary,
     model
   });
   iframe.bindEventListeners({loader: state.loader});
-  state.iframeComponents.summary = iframe;
+  iframes.summary = iframe;
 }
 
-export async function updateSummary({ state, instrument }) {
-  await fetchSummary({data: instrument, state});
-  const updateModel = {
-    data: state.data.toPostmatesModel(),
-    options: state.options
-  }
-
-  state.iframeComponents.summary.component.call('update', updateModel);
-  state.iframeComponents.form.component.call('update', updateModel);
+export async function updateSummary({ instrument } = {}) {
+  await fetchSummary({ data: instrument });
+  state.updateModel();
 }
 

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,4 +1,4 @@
-import RebillyInstrumentsInstance from '@rebilly/instruments';
+import RebillyInstruments from 'src/index';
 import { createFramepayMock } from 'tests/mocks/framepay-mock';
 import { get, ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
@@ -42,7 +42,6 @@ export async function RenderMockRebillyInstruments(options = {}) {
       }
     ]
   });
-  const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
 
   when(get(`${storefrontURL}/invoices/*`)).thenReturn(
     (() => ok(testInvoice))()
@@ -80,7 +79,8 @@ export async function RenderMockRebillyInstruments(options = {}) {
     summary: '.summary-selector',
     locale: 'auto',
     _dev: {
-      framePayStyleLink: framePayStyleUrl
+      paymentMethodsUrl: 'https://forms.test.rebilly.dev',
+      framePayStyleLink: 'https://dev.framepay.rebilly.com/rebilly.css'
     },
   };
 
@@ -105,26 +105,24 @@ export async function RenderMockRebillyInstruments(options = {}) {
   const framepayMock = createFramepayMock();
   global.Rebilly = framepayMock;
 
-  const rebillyInstruments = RebillyInstrumentsInstance;
+  const form = document.createElement('div');
+  form.classList.add(`${mergedOptions.form.replace('.', '')}`);
+  document.body.appendChild(form);
 
-  document.body.innerHTML = `
-    <div class="${mergedOptions.form.replace('.', '')}"></div>
-    <div class="${mergedOptions.summary.replace('.', '')}"></div>
-  `;
+  const summary = document.createElement('div');
+  summary.classList.add(`${mergedOptions.summary.replace('.', '')}`);
+  document.body.appendChild(summary);
 
-  await rebillyInstruments.mount({
-        setupFramepay: setupFramepayMock,
-        ...mergedOptions,
-    });
+  await RebillyInstruments.mount({
+    setupFramepay: setupFramepayMock,
+    ...mergedOptions,
+  });
 
-  rebillyInstruments.mock = {
+  RebillyInstruments.mock = {
     data: (data) => {
-      rebillyInstruments.state.data = new DataInstance({
-        state: rebillyInstruments.state,
-        ...data
-      });
+      RebillyInstruments.state.data = new DataInstance(data);
     }
   };
 
-  return rebillyInstruments;
-}
+  return RebillyInstruments;
+}