@rebilly/instruments 3.15.6-beta.0 → 3.16.2-beta.0

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

@@ -21,6 +21,7 @@ export class DataInstance {
     });
 
     this.money = state.options?.money || null;
+    this.couponIds = [];
   }
 
   get amountAndCurrency() {
@@ -139,11 +140,6 @@ export async function fetchData({
       availableInstrumentsPromise = fetchInstruments({state});
     }
 
-    const paymentMethodsMetadataPromise = 
-      state.storefront.rebilly.paymentMethods.getAll().then(
-        ({ items }) => items.map(({fields}) => fields)
-      );
-
     if (state.options?.transactionId) {
       state.data.transaction = await fetchTransaction({data: {
         id: state.options.transactionId
@@ -162,9 +158,7 @@ export async function fetchData({
     }
 
     const readyToPayPromise = state.data?.readyToPay ??
-        accountPromise.then(() => fetchReadyToPay({
-          riskMetadata, state, paymentMethodsMetadataPromise
-      }));
+        accountPromise.then(() => fetchReadyToPay({riskMetadata, state}));
 
     const previewPurchasePromise = state.options.items ?
       fetchSummary({ state }) : null;

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

@@ -37,7 +37,7 @@ describe('RebillyInstruments instance', () => {
 
     // Mounts form and summary
     const summarySelector = document.querySelector('.summary-selector');
-    expect(summarySelector.innerHTML).toContain('<iframe name="rebilly-instruments-summary" class="rebilly-instruments-iframe" loading="lazy" allow="payment" scrolling="no" src="https://forms.local.rebilly.dev:3000/summary"></iframe>');
+    expect(summarySelector.innerHTML).toContain('<iframe name="rebilly-instruments-summary" class="rebilly-instruments-iframe" loading="lazy" allow="payment" src="https://forms.local.rebilly.dev:3000/summary"></iframe>');
 
     // Theme config overrides initial styles
     const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];

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

@@ -40,10 +40,20 @@ export const defaults = {
   transactionType: 'purchase',
   features: {
     autoConfirmation: true,
-    autoResult: true
+    autoResult: true,
+    showCoupons: null,
   }
 };
 
+export function sanitizeOptions(options) {
+  // TODO: Additional sanitization
+
+  // cast options to be only json object
+  return JSON.parse(
+    JSON.stringify(options)
+  )
+}
+
 export function validateOptions(options) {
   // TODO: validate more options
   const purchaseData = [
@@ -71,37 +81,39 @@ export default ({
   options = {}
 } = {}) => {
 
-  validateOptions(options);
+  const sanitizedOptions = sanitizeOptions(options)
+
+  validateOptions(sanitizedOptions);
 
   const _computed = {
-    paymentMethodsUrl: options._dev
-      ? options._dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
+    paymentMethodsUrl: sanitizedOptions._dev
+      ? sanitizedOptions._dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
       : 'https://forms.secure-payments.app'
   };
 
   const combinedOptions = merge({...defaults}, {
-    apiMode: options.apiMode,
-    i18n: options.i18n,
-    theme: options.theme,
-    css: options.css,
-    locale: options.locale,
-    countryCode: options.countryCode,
-    features: options.features,
-    paymentInstruments: options.paymentInstruments,
-    transactionType: options.transactionType,
+    apiMode: sanitizedOptions.apiMode,
+    i18n: sanitizedOptions.i18n,
+    theme: sanitizedOptions.theme,
+    css: sanitizedOptions.css,
+    locale: sanitizedOptions.locale,
+    countryCode: sanitizedOptions.countryCode,
+    features: sanitizedOptions.features,
+    paymentInstruments: sanitizedOptions.paymentInstruments,
+    transactionType: sanitizedOptions.transactionType,
     _computed
   });
 
-  if (options.publishableKey) {
+  if (sanitizedOptions.publishableKey) {
     Object.entries({
-      organizationId: options.organizationId,
-      publishableKey: options.publishableKey,
-      websiteId: options.websiteId,
+      organizationId: sanitizedOptions.organizationId,
+      publishableKey: sanitizedOptions.publishableKey,
+      websiteId: sanitizedOptions.websiteId,
     }).forEach(([key, value]) => {
       combinedOptions[key] = value;
     });
-  } else if (options.jwt) {
-    combinedOptions.jwt = options.jwt;
+  } else if (sanitizedOptions.jwt) {
+    combinedOptions.jwt = sanitizedOptions.jwt;
     const {
       merchant: organizationId,
       claims: {

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

@@ -1,5 +1,5 @@
 import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import setupOptions, {validateOptions, defaults} from './setup-options';
+import setupOptions, {validateOptions, defaults, sanitizeOptions} from './setup-options';
 
 describe('Setup mount options', () => {
   it("should fill with default options", () => {
@@ -56,4 +56,69 @@ describe('Validate mount options', () => {
     }
     expect(error.message).toBe('Must provide only one purchase data type');
   });
+});
+
+describe('sanitize mount options', () => {
+  it('should make into object', () => {
+    class options {
+      constructor() {
+        this.items = [
+          {
+            planId: "test-plan-id",
+            quantity: 1
+          }
+        ];
+      }
+    }
+
+    expect(setupOptions({
+      options: new options()
+    })).toMatchObject(defaults);
+  });
+
+  it('should merge class and default object', () => {
+    class options {
+      constructor() {
+        this.items = [
+          {
+            planId: "test-plan-id",
+            quantity: 1
+          }
+        ];
+
+        this.features = {
+          showCoupons: ['summary'],
+          other: 'key'
+        }
+      }
+    }
+
+    expect(setupOptions({
+      options: new options()
+    })).toMatchObject(
+      expect.objectContaining({
+        features: expect.objectContaining({
+          ...defaults.features,
+          showCoupons: ['summary'],
+          other: 'key'
+        })
+      })
+    );
+  });
+
+  it ('should sanitize class to object', () => {
+    class OptionsClass {
+      constructor() {
+        this.key = "value"
+      }
+    }
+
+    const newOptions = new OptionsClass();
+
+    expect(sanitizeOptions(newOptions)).toMatchObject({
+      key: 'value'
+    });
+    expect(sanitizeOptions(newOptions)).toBeInstanceOf(Object);
+    expect(sanitizeOptions(newOptions)).not.toBeInstanceOf(OptionsClass);
+  })
 });

package/src/functions/purchase.js

@@ -39,6 +39,10 @@ export async function makePayment({ state, payload }) {
     data.currency = state.options.money.currency;
   }
 
+  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
+    data.couponIds = state.data.couponIds
+  }
+
   let { fields } = await postPayment({
     state,
     data
@@ -57,16 +61,22 @@ export async function makePayment({ state, payload }) {
 }
 
 export async function makePurchase({ state, payload }) {
+  const data = {
+    websiteId: state.options.websiteId,
+    items: state.options.items,
+    paymentInstruction: {
+      token: payload._raw.id
+    },
+    ...payload
+  };
+
+  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
+    data.couponIds = state.data.couponIds
+  }
+
   const { fields } = await postPurchase({
     state,
-    data: {
-      websiteId: state.options.websiteId,
-      items: state.options.items,
-      paymentInstruction: {
-        token: payload._raw.id
-      },
-      ...payload
-    }
+    data
   });
   return fields;
 }

package/src/functions/purchase.spec.js

@@ -52,6 +52,7 @@ describe('RebillyInstruments purchase', () => {
       items: rebillyInstruments.state.options.items,
       billingAddress,
       deliveryAddress,
+      couponIds: [],
       paymentInstruction: {
         token: token.id
       }
@@ -60,7 +61,9 @@ describe('RebillyInstruments purchase', () => {
     await rebillyInstruments.purchase(purchasePayload);
 
     expect(spyStorefrontPurchase).toBeCalledTimes(1);
-    expect(spyStorefrontPurchase).toBeCalledWith(expect.objectContaining({ data: purchasePayloadParsed }));
+    expect(spyStorefrontPurchase).toBeCalledWith({
+      data: expect.objectContaining(purchasePayloadParsed)
+    });
 
     expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
 

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

@@ -1,11 +1,11 @@
 import { collectData } from '@rebilly/risk-data-collector';
+import paymentMethodsFile from '../data/payment-methods.json';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { Endpoint } from './index';
 
 export async function fetchReadyToPay({
   state,
   riskMetadata = null,
-  paymentMethodsMetadataPromise = Promise.resolve([])
 }) {
   return Endpoint({state}, async () => {
     if (!riskMetadata) {
@@ -42,7 +42,7 @@ export async function fetchReadyToPay({
     }
 
     const { fields: readyToPayFields } = await state.storefront.purchase.readyToPay({ data });
-    const paymentMethodsMetadata = await paymentMethodsMetadataPromise;
+    const paymentMethodsMetadata = [...paymentMethodsFile];
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method

package/src/storefront/ready-to-pay.spec.js

@@ -5,6 +5,8 @@ import { storefrontURL } from 'tests/mocks/storefront-api-mock';
 import { fetchReadyToPay } from './ready-to-pay';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { expectConfigurationError } from 'tests/async-utilities';
+import PaymentMetadataModel from './models/payment-metadata';
+import paymentMethodsFile from '@/data/payment-methods.json';
 
 describe('Storefront API Ready to Pay', () => {
   it('can fetch ready to pay', async () => {
@@ -26,6 +28,8 @@ describe('Storefront API Ready to Pay', () => {
       ]
     };
 
+    const paymentCardMetadata = [...paymentMethodsFile].find(method => method.apiName === 'payment-card');
+
     when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
       ok(readyToPayPayload)
     );
@@ -52,7 +56,8 @@ describe('Storefront API Ready to Pay', () => {
     expect(response).toEqual([
       new ReadyToPayModel({
         index: 0,
-        ...readyToPayPayload[0]
+        ...readyToPayPayload[0],
+        metadata: new PaymentMetadataModel(paymentCardMetadata),
       })
     ]);
   });

package/src/storefront/summary.js

@@ -13,6 +13,11 @@ export async function fetchSummary({ data = null, state = null } = {}) {
 
     if (state.options?.items) {
       payload.data.items = state.options.items;
+    } else {
+      payload.data.items = state.data.summaryLineItems.map(item => ({
+        planId: item.planId,
+        quantity: item.quantity,
+      }));
     }
 
     if (state.data?.amountAndCurrency) {
@@ -29,6 +34,10 @@ export async function fetchSummary({ data = null, state = null } = {}) {
       payload.data.deliveryAddress = data.deliveryAddress;
     }
 
+    if(state.data?.couponIds) {
+      payload.data.couponIds = state.data.couponIds;
+    }
+
     const { fields: summaryFields } = await state.storefront.purchase.preview(
       payload
     );

package/src/storefront/summary.spec.js

@@ -40,10 +40,10 @@ describe('Storefront API Summary', () => {
 
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
-      data: {
+      data: expect.objectContaining({
         items: options.items,
         websiteId: options.websiteId
-      }
+      })
     });
     expect(response).toBeInstanceOf(SummaryModel);
     expect(response).toEqual(new SummaryModel(testSummary));
@@ -78,11 +78,11 @@ describe('Storefront API Summary', () => {
 
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
-      data: {
+      data: expect.objectContaining({
         items: options.items,
         websiteId: options.websiteId,
         billingAddress
-      }
+      })
     });
   });
 
@@ -115,11 +115,11 @@ describe('Storefront API Summary', () => {
 
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
-      data: {
+      data: expect.objectContaining({
         items: options.items,
         websiteId: options.websiteId,
         deliveryAddress
-      }
+      })
     });
   });
 

package/src/views/common/iframe/base-iframe.js

@@ -45,7 +45,6 @@ export default class BaseIframe {
       appendChild: (iframe) => {
         iframe.setAttribute('loading', 'lazy');
         iframe.setAttribute('allow', 'payment');
-        iframe.setAttribute('scrolling', 'no');
         iframe.allowPaymentRequest = true;
         this.container.appendChild(iframe);
       },

package/src/views/common/iframe/events/change-iframe-src-handler.js

@@ -0,0 +1,6 @@
+export function changeIframeSrcHandler(iframe) {
+  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
+    iframe.component.frame.src = url;
+    iframe.component.frame.style.height = '75vh';
+  });
+}

package/src/views/common/iframe/events/dispatch-event-handler.js

@@ -0,0 +1,8 @@
+import camelCase from 'lodash.camelcase';
+import Events from '../../../../events';
+
+export function dispatchEventHandler(iframe) {
+  iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
+    Events[camelCase(event).replace(/-/, '')].dispatch(detail);
+  });
+}

package/src/views/common/iframe/events/resize-component-handler.js

@@ -0,0 +1,9 @@
+export function resizeComponentHandler(iframe) {
+  let prevHeight = '';
+  iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
+    if (height !== prevHeight) {
+      prevHeight = height;
+      iframe.component.frame.style.height = height;
+    }
+  });
+}

package/src/views/common/iframe/events/show-error-handler.js

@@ -0,0 +1,5 @@
+import { showError } from '../../../errors';
+
+export function showErrorHandler(iframe) {
+  iframe.component.on(`${iframe.name}-show-error`, showError);
+}

package/src/views/common/iframe/events/stop-loader-handler.js

@@ -0,0 +1,9 @@
+export function stopLoaderHandler(iframe, data) {
+  iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
+    let {section} = data;
+    if (!section) {
+      section = id.includes('summary') ? 'summary' : 'form';
+    }
+    data.loader?.stopLoading({ section, id });
+  });
+}

package/src/views/common/iframe/events/update-coupons-handler.js

@@ -0,0 +1,18 @@
+export function updateCouponsHandler(iframe) {
+  iframe.component.on(`${iframe.name}-update-coupon`, async ({
+    couponIds,
+    previewPurchase
+  } = {}) => {
+    iframe.state.data.couponIds = couponIds;
+    iframe.state.data.previewPurchase = previewPurchase;
+
+    const updateModel = {
+      data: iframe.state.data.toPostmatesModel(),
+      options: iframe.state.options
+    }
+    if (iframe.state.iframeComponents.summary) {
+      iframe.state.iframeComponents.summary.component.call('update', updateModel);
+    }
+    iframe.state.iframeComponents.form.component.call('update', updateModel);
+  });
+}

package/src/views/common/iframe/modal-iframe.js

@@ -1,11 +1,10 @@
 import BaseIframe from './base-iframe';
-import {
-  dispatchRebillyInsturmentEventHandler,
-  resizeComponentHandler,
-  changeIframeSrcHandler,
-  stopLoaderHandler,
-  showErrorHandler
-} from './event-listeners';
+
+import { changeIframeSrcHandler } from './events/change-iframe-src-handler';
+import { resizeComponentHandler } from './events/resize-component-handler';
+import { dispatchEventHandler } from './events/dispatch-event-handler';
+import { showErrorHandler } from './events/show-error-handler';
+import { stopLoaderHandler } from './events/stop-loader-handler';
 
 export class ModalIframe extends BaseIframe {
   constructor(args = {}) {
@@ -13,7 +12,7 @@ export class ModalIframe extends BaseIframe {
   }
 
   bindEventListeners({ close = () => {}, loader } = {}) {
-    dispatchRebillyInsturmentEventHandler(this);
+    dispatchEventHandler(this);
     resizeComponentHandler(this);
     changeIframeSrcHandler(this);
     stopLoaderHandler(this, {
@@ -28,7 +27,7 @@ export class ModalIframe extends BaseIframe {
       close(...args);
     });
 
-    // Close modal via postMessage (specifically during approal url flow)
+    // Close modal via postMessage (specifically during approval url flow)
     window.addEventListener('message', async (event) => {
       if(event.data === 'rebilly-instruments-approval-url-close') {
         if (this.state.options.transactionType === 'purchase') {

package/src/views/common/iframe/view-iframe.js

@@ -1,10 +1,10 @@
 import BaseIframe from './base-iframe';
-import {
-  dispatchRebillyInsturmentEventHandler,
-  resizeComponentHandler,
-  stopLoaderHandler,
-  showErrorHandler,
-} from './event-listeners';
+
+import { resizeComponentHandler } from './events/resize-component-handler';
+import { dispatchEventHandler } from './events/dispatch-event-handler';
+import { updateCouponsHandler } from './events/update-coupons-handler';
+import { showErrorHandler } from './events/show-error-handler';
+import { stopLoaderHandler } from './events/stop-loader-handler';
 
 export class ViewIframe extends BaseIframe {
   constructor(args = {}) {
@@ -12,9 +12,10 @@ export class ViewIframe extends BaseIframe {
   }
 
   bindEventListeners({ loader } = {}) {
-    dispatchRebillyInsturmentEventHandler(this);
+    dispatchEventHandler(this);
     resizeComponentHandler(this);
     stopLoaderHandler(this, { loader });
     showErrorHandler(this);
+    updateCouponsHandler(this);
   }
 }

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

@@ -1,6 +1,6 @@
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-export const SUPPORTED_METHODS = ['payment-card', 'ach'];
+export const SUPPORTED_METHODS = ['payment-card', 'ach', 'cryptocurrency'];
 
 const isExpressMethod = ({ method, feature }) => (
     SUPPORTED_EXPRESS_METHODS.includes(method) ||

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

@@ -68,6 +68,7 @@ export async function mountMethodSelector({ state }) {
 
     const name = 'rebilly-instruments-form';
     const iframe = await new ViewIframe({
+      state,
       name,
       url: `${paymentMethodsUrl}`,
       container: METHODS_CONTAINER,

package/src/views/result.js

@@ -18,6 +18,7 @@ export async function mountResult({ payload, state }) {
   };
 
   const iframe = await new ViewIframe({
+    state,
     name: 'rebilly-instruments-result',
     url: `${paymentMethodsUrl}/result`,
     container,

package/src/views/summary.js

@@ -10,6 +10,7 @@ export async function mountSummary({ state }) {
   const { paymentMethodsUrl } = state.options._computed;
 
   const iframe = await new ViewIframe({
+    state,
     name: 'rebilly-instruments-summary',
     url: `${paymentMethodsUrl}/summary`,
     container: state.summary,

package/src/views/common/iframe/event-listeners.js

@@ -1,50 +0,0 @@
-import camelCase from 'lodash.camelcase';
-import Events from '../../../events';
-import { showError } from '../../errors';
-
-export function dispatchRebillyInsturmentEventHandler(iframe) {
-  iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
-    Events[camelCase(event).replace(/-/, '')].dispatch(detail);
-  });
-}
-
-export function resizeComponentHandler(iframe) {
-  let prevHeight = '';
-  iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
-    if (height !== prevHeight) {
-      prevHeight = height;
-      iframe.component.frame.style.height = height;
-    }
-  });
-}
-
-export function stopLoaderHandler(iframe, data) {
-  iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
-    let {section} = data;
-    if (!section) {
-      section = id.includes('summary') ? 'summary' : 'form';
-    }
-    data.loader?.stopLoading({ section, id });
-  });
-}
-
-export function changeIframeSrcHandler(iframe) {
-  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
-    iframe.component.frame.src = url;
-    iframe.component.frame.style.height = '75vh';
-  });
-}
-
-export function displayOverlay(iframe) {
-  iframe.component.on(`${iframe.name}-change-overlay`, (showOverlay = true) => {
-    if (showOverlay) {
-      iframe.component.frame.classList.add('rebilly-instruments-iframe-overlay');
-    } else {
-      iframe.component.frame.classList.remove('rebilly-instruments-iframe-overlay');
-    }
-  });
-}
-
-export function showErrorHandler(iframe) {
-  iframe.component.on(`${iframe.name}-show-error`, showError);
-}