@rebilly/instruments 3.15.4-beta.0 → 3.16.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.15.4-beta.0",
+  "version": "3.16.0-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,6 +33,7 @@
     "@rollup/plugin-replace": "^3.0.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "component-emitter": "^1.3.0",
+    "core-js": "3.23.3",
     "jest": "^27.0.6",
     "msw": "0.38.2",
     "msw-when-then": "^1.5.1",

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

@@ -21,17 +21,20 @@ export class DataInstance {
     });
 
     this.money = state.options?.money || null;
+    this.couponIds = [];
   }
 
   get amountAndCurrency() {
     let currency;
     let amount;
+    let amountDue;
     if (this.previewPurchase) {
       currency = this.previewPurchase.currency;
       amount = this.previewPurchase.total;
     } else if (this.invoice) {
       currency = this.invoice.currency;
       amount = this.invoice.amount;
+      amountDue = this.invoice.amountDue;
     } else if (this.transaction) {
       currency = this.transaction.currency;
       amount = this.transaction.amount;
@@ -39,10 +42,14 @@ export class DataInstance {
       currency = this.money.currency;
       amount = this.money.amount;
     }
-    return {
+    const amountAndCurrency = {
       amount,
       currency
+    };
+    if (amountDue) {
+      amountAndCurrency.amountDue = amountDue;
     }
+    return amountAndCurrency;
   }
 
   get isPayment() {
@@ -53,6 +60,13 @@ export class DataInstance {
     return this.previewPurchase;
   }
 
+  get hasAmountDue() {
+    return !!(
+      this.amountAndCurrency.amountDue &&
+      this.amountAndCurrency.amountDue !== this.amountAndCurrency.amount
+    );
+  }
+
   get summaryItems() {
     const {
       discountsAmount = null,
@@ -94,6 +108,7 @@ export class DataInstance {
       amountAndCurrency: this.amountAndCurrency,
       isPayment: this.isPayment,
       isPurchase: this.isPurchase,
+      hasAmountDue: this.hasAmountDue,
       summaryItems: this.summaryItems,
       summaryLineItems: this.summaryLineItems,
       isShippingRequired: this.isShippingRequired
@@ -186,4 +201,4 @@ export async function fetchData({
   }
 
   return new DataInstance({});
-}
+}

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

@@ -40,7 +40,8 @@ export const defaults = {
   transactionType: 'purchase',
   features: {
     autoConfirmation: true,
-    autoResult: true
+    autoResult: true,
+    showCoupons: null,
   }
 };
 

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