@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

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

@@ -15,13 +15,55 @@ export class ModalIframe extends BaseIframe {
     dispatchRebillyInsturmentEventHandler(this);
     resizeComponentHandler(this);
     changeIframeSrcHandler(this);
-    this.component.on(`${this.name}-close`, (...args) => {
-      close(...args);
-    });
     stopLoaderHandler(this, {
       loader,
       section: 'modal',
       id: 'modal-content'
     });
+
+    // Close modal via postmate
+    this.component.on(`${this.name}-close`, (...args) => {
+      close(...args);
+    });
+
+    // Close modal via postMessage (specifically during approal url flow)
+    window.addEventListener('message', async (event) => {
+      if(event.data === 'rebilly-instruments-approval-url-close') {
+        if (this.state.options.transactionType === 'purchase') {
+          this.state.storefront.setSessionToken(this.state.data.token);
+
+          const [
+            {fields: transaction},
+            {fields: invoice}
+          ] = await Promise.all([
+            this.state.storefront.transactions.get({id: this.state.data.transaction.id}),
+            this.state.data.invoice?.id
+              ? this.state.storefront.invoices.get({id: this.state.data.invoice.id})
+              : {fields: null}
+          ]);
+          
+          const updatedPurchase = {
+            orderId: this.state.data.orderId,
+            token: this.state.data.token,
+            transaction,
+          };
+          if (invoice) {
+            updatedPurchase.invoice = invoice;
+          }
+          close(updatedPurchase);
+        } else if (this.state.options.transactionType === 'setup') {
+          this.state.storefront.setSessionToken(this.state.data.instrument.token);
+          const {
+            fields: transaction
+          } = await this.state.storefront.transactions.get({id: this.state.data.transaction.id});
+          close({
+            transaction,
+            instrument: this.state.data.instrument
+          });
+        } else {
+          close();
+        }
+      }
+    }, false);
   }
 }

package/src/views/confirmation.js

@@ -1,4 +1,5 @@
 import { purchase } from '../functions/purchase';
+import { setup } from '../functions/setup';
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
 import { updateMethodSelector } from './method-selector';
@@ -7,8 +8,11 @@ import { updateSummary } from './summary';
 export const baseConfirmationHTML =
   '<div class="rebilly-instruments-confirmation"></div>';
 
-export async function mountConfirmation({ instrument, mainStyle, state }) {
-  if (instrument.billingAddress && state.summary) {
+export async function mountConfirmation({ payload: instrument, state }) {
+  if (
+    (instrument.billingAddress && state.summary) &&
+    state.data.isPurchase
+  ) {
     updateSummary({ state, instrument });
   }
 
@@ -22,7 +26,7 @@ export async function mountConfirmation({ instrument, mainStyle, state }) {
 
   const model = {
     options: state.options,
-    mainStyle,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -40,6 +44,10 @@ export async function mountConfirmation({ instrument, mainStyle, state }) {
     purchase({ state, payload: confirmedInstrument });
   });
 
+  iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
+    setup({ state, payload: confirmedInstrument });
+  });
+
   iframe.component.on('choose-another-method', () => {
     state.iframeComponents = state.iframeComponents.filter((item) => {
       if (item.name === iframe.name) {
@@ -48,8 +56,10 @@ export async function mountConfirmation({ instrument, mainStyle, state }) {
       }
       return true;
     });
-    updateSummary({ state });
-    updateMethodSelector({ state, mainStyle });
+    if (state.data.isPurchase) {
+      updateSummary({ state });
+    }
+    updateMethodSelector({ state, mainStyle: state.mainStyle });
   });
 
   state.iframeComponents.push(iframe);

package/src/views/method-selector/generate-digital-wallet.js

@@ -1,17 +1,24 @@
 import { getMethodData } from './get-method-data';
 
-export function generateDigitalWallet({ state, summary, EXPRESS_METHODS }) {
+export function generateDigitalWallet({ state, EXPRESS_METHODS }) {
   const output = {};
 
   const { paymentInstruments } = state.options;
 
   const transactionData = {
-    amount: summary.total,
-    currency: summary.currency,
     countryCode: state.options.countryCode,
     label: state.options.websiteId
   }
 
+  if (state.data?.amountAndCurrency) {
+    const {
+      amount,
+      currency
+    } = state.data.amountAndCurrency;
+    transactionData.amount = amount;
+    transactionData.currency =  currency;
+  }
+
   EXPRESS_METHODS.forEach(method => {
     const { METHOD_TYPE } = getMethodData(method);
 

package/src/views/method-selector/generate-digital-wallet.spec.js

@@ -1,11 +1,21 @@
 import { generateDigitalWallet } from './generate-digital-wallet';
 import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
 import SummaryModel from '@/storefront/models/summary-model';
+import { DataInstance } from '../../functions/mount/fetch-data';
 
 describe('generateDigitalWallet', () => {
   class TestInstance {
     constructor({ options = {} } = {}) {
       this.options = options;
+      this.data = new DataInstance({
+        state: {
+          options
+        },
+        previewPurchase: {
+          total: 1,
+          currency: 'USD'
+        }
+      });
     }
   }
 

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

@@ -17,13 +17,13 @@ const isSupportedMethod = ({ method }) => {
 };
 
 // TODO: just loader is used. We could simplify signature
-export function getPaymentMethods({ methods, state }) {
+export function getPaymentMethods({ state }) {
   const result = {
     EXPRESS_METHODS: [],
     METHODS: []
   };
 
-  methods.forEach((method) => {
+  state.data.readyToPay.forEach((method) => {
     if (isExpressMethod(method)) {
       const { METHOD_TYPE } = getMethodData(method);
       // Add loader entry per express method
@@ -36,5 +36,10 @@ export function getPaymentMethods({ methods, state }) {
     }
   });
 
+  if (!window.ApplePaySession) {
+    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => method?.feature?.name !== 'Apple Pay');
+    state.loader.stopLoading({ id: 'applePay-express' });
+  } 
+
   return result;
 }

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

@@ -4,36 +4,39 @@ import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
 class TestInstance {
   constructor() {
     this.loader = {
-      startLoading: jest.fn()
+      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: 'bitcoin',
+          filters: []
+        }),
+        new ReadyToPayModel({
+          method: 'payment-card',
+          brands: ['Visa'],
+          filters: []
+        })
+      ]
+    }
   }
 }
 
 it('should only return the allowed methods', () => {
   const instance = new TestInstance();
-  const methods = [
-    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: 'bitcoin',
-      filters: []
-    }),
-    new ReadyToPayModel({
-      method: 'payment-card',
-      brands: ['Visa'],
-      filters: []
-    })
-  ];
 
-  const results = getPaymentMethods({ methods, state: instance });
+  const results = getPaymentMethods({ state: instance });
   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

@@ -4,7 +4,7 @@ import { getPaymentMethods } from './get-payment-methods';
 import { mountExpressMethods } from './mount-express-methods';
 import { generateDigitalWallet } from './generate-digital-wallet';
 import { MountMethods } from './mount-methods';
-import { fetchSummaryData } from '../../functions/mount/fetch-summary-data';
+import { fetchData } from '../../functions/mount/fetch-data';
 
 export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 <div class="rebilly-instruments-content">
@@ -23,15 +23,11 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 </div>
 `;
 
-export function mountMethodSelector({ state, formOptions }) {
-  const { readyToPay, summary, plans, products, mainStyle } = formOptions;
-  const { EXPRESS_METHODS, METHODS } = getPaymentMethods({
-    methods: readyToPay,
-    state
-  });
+export function mountMethodSelector({ state }) {
+  const { EXPRESS_METHODS, METHODS } = getPaymentMethods({ state });
 
   state.form.innerHTML += baseMethodSelectorHTML(
-    state.options.paymentInstruments.compactExpressInstruments
+    state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
   );
 
   const EXPRESS_METHODS_CONTAINER = document.querySelector(
@@ -46,16 +42,13 @@ export function mountMethodSelector({ state, formOptions }) {
     '.rebilly-instruments-methods'
   );
 
-  state.options.digitalWallet = generateDigitalWallet({state, summary, EXPRESS_METHODS});
+  state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
 
   if (METHODS.length) {
     MountMethods({
       state,
       METHODS_CONTAINER,
-      METHODS,
-      mainStyle,
-      plans,
-      products
+      METHODS
     });
   } else {
     METHODS_CONTAINER.style.display = 'none';
@@ -71,29 +64,29 @@ export function mountMethodSelector({ state, formOptions }) {
     EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
   }
 
+  if (!METHODS.length && !EXPRESS_METHODS.length) {
+    state.form.innerHTML = `
+      <p data-rebilly-i18n="form.error.noPaymentMethods">
+        No payment methods available for this transaction, please contact support.
+      <p>
+    `;
+    state.form.style.minHeight = 'auto';
+  }
+
   state.translate.translateItems();
 
   state.loader.stopLoading({ id: 'initForm' });
 }
 
-export async function updateMethodSelector({ state, mainStyle }) {
+export async function updateMethodSelector({ state }) {
   state.loader.startLoading({ id: 'initForm' });
   const { riskMetadata } = await collectData();
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await fetchSummaryData({ state, riskMetadata });
+  state.data = await fetchData({ state, riskMetadata });
 
-  const formOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products,
-    mainStyle
-  };
+  if (state.data.transaction && state.data.transaction?.type === 'setup') {
+    state.options.transactionType = 'setup';
+  }
 
   state.form
     .querySelectorAll(':not(.rebilly-instruments-confirmation)')
@@ -106,5 +99,5 @@ export async function updateMethodSelector({ state, mainStyle }) {
       }
     });
 
-  mountMethodSelector({ state, formOptions });
+  mountMethodSelector({ state });
 }

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

@@ -5,6 +5,8 @@ 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';
 
 describe('Summary component', () => {
   let formElement;
@@ -20,11 +22,54 @@ describe('Summary component', () => {
       loader = new Loader(),
       translate = new Translate()
     } = {}) {
-      this.options = options;
+      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: []
+          }),
+        ]
+      });
     }
   }
 
@@ -34,72 +79,18 @@ describe('Summary component', () => {
     items: [
       {
         planId: 'my-awesome-product',
-        quantity: 1,
-        thumbnail: ''
+        quantity: 1
       },
       {
         planId: 'awesome-t-shirt',
-        quantity: 2,
-        thumbnail: ''
+        quantity: 2
       }
     ],
-    paymentInstruments: {
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonHeight: '44px',
-          buttonType: 'short'
-        }
-      },
-      compactExpressInstruments: true
-    },
     _computed: {
       paymentMethodsUrl: ''
     }
   };
 
-  const summaryData = 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
-  });
-
-  const readyToPayData = [
-    new ReadyToPayModel({
-      method: 'payment-card',
-      feature: {
-        name: 'Google Pay',
-        merchantName: 'google-pay-merchant-name',
-        merchantOrigin: 'google-pay-merchant-origin'
-      },
-      brands: ['Visa'],
-      filters: []
-    })
-  ];
-
   it('should inject the proper HTML for express methods', async () => {
     const mountSummaryInstance = new TestMountMethodSelectorInstance({
       options
@@ -107,13 +98,7 @@ describe('Summary component', () => {
 
     mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
 
-    mountMethodSelector({
-      state: mountSummaryInstance,
-      formOptions: {
-        summary: summaryData,
-        readyToPay: readyToPayData
-      }
-    });
+    mountMethodSelector({ state: mountSummaryInstance });
 
     const form = document.querySelector('.rebilly-instruments-form');
     expect(form).toMatchSnapshot();

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

@@ -6,10 +6,7 @@ import { getMethodData } from './get-method-data';
 export function MountMethods({
   state,
   METHODS_CONTAINER,
-  METHODS,
-  mainStyle,
-  plans,
-  products
+  METHODS
 }) {
   METHODS.forEach(async (method) => {
     const { METHOD_ID: methodId, METHOD_TYPE: methodType } =
@@ -23,10 +20,10 @@ export function MountMethods({
       !state.options.paymentInstruments[methodType]?.popup;
     const model = {
       options: state.options,
-      mainStyle,
-      method,
-      plans,
-      products
+      mainStyle: state.mainStyle,
+      plans: state.data.plans,
+      products: state.data.products,
+      method
     };
 
     METHODS_CONTAINER.insertAdjacentHTML(

package/src/views/modal.js

@@ -5,9 +5,11 @@ const modalTemplate = (isRedirect, method) => `
     <div class="rebilly-instruments-modal-container ${
       method ? `rebilly-instruments-${method}` : ''
     } ${isRedirect ? 'is-redirect' : ''}">
+      ${isRedirect ? '' : `
       <svg class="rebilly-instruments-modal-close" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
         <path d="m15 13.5858 7.2929-7.293c.3905-.3904 1.0237-.3904 1.4142 0 .3905.3906.3905 1.0238 0 1.4143L16.4142 15l7.293 7.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0L15 16.4142l-7.2929 7.293c-.3905.3904-1.0237.3904-1.4142 0-.3905-.3906-.3905-1.0238 0-1.4143L13.5858 15l-7.293-7.2929c-.3904-.3905-.3904-1.0237 0-1.4142.3906-.3905 1.0238-.3905 1.4143 0L15 13.5858Z" fill-rule="nonzero"/>
       </svg>
+      `}
       <div class="rebilly-instruments-modal-content"></div>
     </div>
   </div>
@@ -52,6 +54,7 @@ export async function mountModal({
   };
 
   const iframe = await new ModalIframe({
+    state,
     name,
     url,
     model: injectedModel,
@@ -76,8 +79,9 @@ export async function mountModal({
     loader: state.loader
   });
 
-  modalOverlay.addEventListener('click', closeModal);
-  closeButton.addEventListener('click', closeModal);
+  if (!isRedirect) {
+    closeButton.addEventListener('click', closeModal);
+  }
 
   return iframe;
 }

package/src/views/result.js

@@ -1,7 +1,7 @@
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
 
-export async function mountResult({ purchase, mainStyle, state }) {
+export async function mountResult({ payload, state }) {
   const resultContainerClassName = 'rebilly-instruments-result';
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
@@ -12,9 +12,10 @@ export async function mountResult({ purchase, mainStyle, state }) {
 
   const model = {
     options: state.options,
-    mainStyle,
-    purchase
+    mainStyle: state.mainStyle,
+    [state.options.transactionType]: payload
   };
+
   const iframe = await new ViewIframe({
     name: 'rebilly-instruments-result',
     url: `${paymentMethodsUrl}/result`,