@rebilly/instruments 3.36.1 → 3.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.36.1",
+  "version": "3.37.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/data/options-schema/schemas/options-schema.js

@@ -78,7 +78,9 @@ export default {
     money: {
       type: 'object',
       properties: {
-        amount: {type: 'number'},
+        amount: {
+          type: 'number'
+        },
         currency: {
           type: 'string',
           minLength: 3,
@@ -105,7 +107,9 @@ export default {
               minLength: 3,
               maxLength: 3,
             },
-            amount: {type: 'number'},
+            amount: {
+              type: 'number'
+            },
             buttons: {
               type: 'array',
               items: {
@@ -118,7 +122,7 @@ export default {
               properties: {
                 minimum: {type: 'number'},
                 maximum: {type: 'number'},
-                increment: {type: 'number'}
+                multipleOf: {type: 'number'}
               },
             }
           },

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

@@ -8,6 +8,8 @@ import { fetchInvoiceAndProducts as FetchInvoiceAndProducts } from '../../storef
 import { fetchTransaction as FetchTransaction } from '../../storefront/transactions';
 import { fetchAccountAndWebsite as FetchAccountAndWebsite } from '../../storefront/account-and-website';
 import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/payment-instruments';
+import { fetchDepositRequest as FetchDepositRequest } from '../../storefront/deposit-requests';
+import DepositRequestModel from '../../storefront/models/deposit-request-model';
 
 export class DataInstance {
   constructor({
@@ -126,11 +128,22 @@ export async function fetchData({
   fetchInvoiceAndProducts = FetchInvoiceAndProducts,
   fetchTransaction = FetchTransaction,
   fetchAccountAndWebsite = FetchAccountAndWebsite,
-  fetchInstruments = FetchInstruments
+  fetchInstruments = FetchInstruments,
+  fetchDepositRequest = FetchDepositRequest,
 } = {}) {
   try {
     state.data = new DataInstance();
 
+    if (state.options?.deposit) {
+      if (state.options.deposit.depositRequestId) {
+        state.data.deposit = await fetchDepositRequest({data: {
+          id: state.options.deposit.depositRequestId,
+        }});
+      } else {
+        state.data.deposit = new DepositRequestModel(state.options.deposit);
+      }
+    }
+
     let readyToPayPromise = Promise.resolve(null);
 
     let availableInstrumentsPromise = null;
@@ -149,8 +162,7 @@ export async function fetchData({
       state.data.transaction = await fetchTransaction({
         data: {
           id: state.options.transactionId
-        }, state
-      });
+        }});
     }
 
     let productsPromise;

package/src/functions/mount/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import state from '../../state';
 import { mountSummary } from '../../views/summary';
-import { mountMethodSelector } from '../../views/method-selector';
+import { mountForm, determineFirstView } from '../../views/form';
 import { fetchData } from './fetch-data';
 import Events from '../../events';
 import setupElement from './setup-element';
@@ -14,74 +14,7 @@ import setupFramepayTheme from './setup-framepay-theme';
 import setupUserFlow from './setup-user-flow';
 import { showError } from '../../views/errors';
 
-/**
- * @typedef {object} ItemQuantity - Item quantity
- * @property {number} default - The initial quantity value
- * @property {number} [minimum=1] - minimum allowed quantity. if minimum, maximum or multipleOf are present, quantity will be "variable"
- * @property {number} [maximum=Number.MAX_SAFE_INTEGER] - maximum allowed quantity
- * @property {number} [multipleOf=1] 
- * 
- * @typedef {object} Item
- * @property {string} planId - The Rebilly id of the plan.
- * @property {number | ItemQuantity} quantity - The number of the plans to be purchased.
- * @property {string} thumbnail - The source img for the product. Recommend 100px by 100px.
- *
- * @typedef {object} GooglePayDisplayOptions
- * @property {"back" | "white"} [buttonColor=black] - Color of google pay button
- * @property {"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "short" | "long"} [buttonType=plain] - The length of the button
- * @property {string} [buttonHeight=48px] - 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=48px] - 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
- * @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
- * @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 {object} options - The options object
- * @param {function} options.setupFramepayInstance - Helper for adding FramePay scripts to the DOM
- * @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.jwt - 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
- */
+/** See src/data/options-schema for options structure */
 export async function mount({
   setupFramepay = setupFramepayInstance,
   ...options
@@ -133,7 +66,8 @@ export async function mount({
 
     // Mount content
     if (state.form) {
-      mountMethodSelector();
+      mountForm()
+        .then(() => determineFirstView());
     }
     if (state.summary) {
       mountSummary();

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

@@ -35,7 +35,12 @@ 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" src="https://forms.test.rebilly.dev/summary"></iframe>');
+    const iframe = summarySelector.querySelector('iframe');
+    expect(iframe.getAttribute('name')).toEqual('rebilly-instruments-summary');
+    expect(iframe.getAttribute('class')).toEqual('rebilly-instruments-iframe');
+    expect(iframe.getAttribute('loading')).toEqual('lazy');
+    expect(iframe.getAttribute('allow')).toEqual('payment');
+    expect(iframe.getAttribute('src')).toEqual('https://forms.test.rebilly.dev?name=rebilly-instruments-summary');
 
     // Theme config overrides initial styles
     const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];

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

@@ -4,10 +4,9 @@ import { parseQuantity } from '../../utils/quantity';
 import { validateOptions } from '../../data/options-schema';
 
 export function handleComputedProperty(options) {
-  const _computed = {
+  options._computed = {
     paymentMethodsUrl: options._dev?.paymentMethodsUrl ?? 'https://forms.secure-payments.app'
   };
-  options._computed = _computed;
   return options 
 }
 
@@ -25,8 +24,16 @@ export function handleNestedPropertiesDefaultValues(options) {
       buttons: [],
       customAmount: {
         minimum: 1,
-        maximum: Number.MAX_SAFE_INTEGER,
-        increment: 1,
+        maximum: 1000000000000,
+        multipleOf: 1,
+      }
+    }, (options.deposit || {}));
+  } else if (options.deposit?.depositRequestId) {
+    options.deposit = merge({
+      customAmount: {
+        minimum: 1,
+        maximum: 1000000000000,
+        multipleOf: 1,
       }
     }, (options.deposit || {}));
   }
@@ -49,6 +56,7 @@ export function handleJwtDestructuring(options) {
         transactionId,
         invoiceId,
         websiteId,
+        cashierRequestId
       }
     } = decodeJwt(options.jwt);
     Object.entries({
@@ -61,6 +69,10 @@ export function handleJwtDestructuring(options) {
         options[key] = value;
       }
     });
+    if (cashierRequestId && !options.deposit) {
+      options.deposit = {};
+      options.deposit.depositRequestId = cashierRequestId;
+    }
   }
 
   return options;
@@ -71,9 +83,10 @@ export default ({
 } = {}) => {
   let validOptions = validateOptions(options);
   if (validOptions) {
-    validOptions = handleComputedProperty(validOptions);
-    validOptions = handleNestedPropertiesDefaultValues(validOptions);
     validOptions = handleJwtDestructuring(validOptions);
+    validOptions = handleNestedPropertiesDefaultValues(validOptions);
+    validOptions = handleComputedProperty(validOptions);
   }
+
   return validOptions;
 }

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

@@ -217,7 +217,7 @@ describe('Setup options handleNestedPropertiesDefaultValues function', () => {
         buttons: [],
         customAmount: {
           minimum: 1,
-          maximum: Number.MAX_SAFE_INTEGER,
+          maximum: 1000000000000,
           increment: 1,
         },
         currency: 'USD'
@@ -253,9 +253,9 @@ describe('Setup options handleNestedPropertiesDefaultValues function', () => {
       items: [{
         planId: 'plan_TEST',
         quantity: {
-          minimum: 1,
+          minimum: 0.1,
           maximum: Number.MAX_SAFE_INTEGER,
-          multipleOf: 1
+          multipleOf: 0.1
         }
       }]
     });

package/src/functions/purchase.js

@@ -27,21 +27,27 @@ export async function makePayment({ payload }) {
     data.token = id;
   }
 
-  if (state.options.invoiceId) {
+  if (state.options?.invoiceId) {
     data.invoiceId = state.options.invoiceId;
   }
 
-  if (state.options.transactionId) {
+  if (state.options?.transactionId) {
     data.transactionId = state.options.transactionId;
   }
 
-  if (state.options.money) {
+  if (state.options?.money) {
     data.websiteId = state.options.websiteId;
     data.amount = state.options.money.amount;
     data.currency = state.options.money.currency;
   }
+  
+  if (state.options?.deposit) {
+    data.websiteId = state.options.websiteId;
+    data.amount = state.data.amountAndCurrency.amount;
+    data.currency = state.data.amountAndCurrency.currency;
+  }
 
-  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
+  if (state.data?.couponIds && Array.isArray(state.data.couponIds)) {
     data.couponIds = state.data.couponIds
   }
 

package/src/functions/show.js

@@ -1,6 +1,7 @@
 import iframes from '../state/iframes';
 import { mountConfirmation } from '../views/confirmation';
 import { mountResult } from '../views/result';
+import { hideExtraUI as hideMethodSelectorUI} from '../views/method-selector'
 
 /**
  @typedef ShowParams
@@ -17,13 +18,11 @@ import { mountResult } from '../views/result';
 export async function show({ componentName, payload }) {
   switch (componentName) {
     case 'result':
-      if (iframes.hasFrame('form')) {
-        iframes.form.destroy();
-        iframes.form = null;
-      }
+      hideMethodSelectorUI();
       mountResult({ payload });
       break;
     case 'confirmation':
+      hideMethodSelectorUI();
       mountConfirmation({ payload });
       break;
     default:

package/src/functions/show.spec.js

@@ -12,7 +12,6 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    iframes.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -24,7 +23,6 @@ describe('RebillyInstruments show', () => {
     expect(mountResult).toBeCalledWith(
       expect.objectContaining({ payload })
     );
-    expect(iframes.form).toEqual(null);
   });
 
   it('should show confirmation component', async () => {

package/src/i18n/en.json

@@ -7,6 +7,9 @@
       "shipping": "Shipping",
       "total": "Total"
     },
+    "deposit": {
+      "goBack": "Choose another amount"
+    },
     "form": {
       "expressCheckout": "Express checkout",
       "or": "Or",

package/src/i18n/es.json

@@ -7,6 +7,9 @@
       "shipping": "Envío",
       "total": "Total"
     },
+    "deposit": {
+      "goBack": "Elija otro monto a depositar"
+    },
     "form": {
       "expressCheckout": "Chequeo rápido",
       "or": "O pague con",

package/src/storefront/deposit-requests.js

@@ -0,0 +1,12 @@
+import { Endpoint } from './index';
+import state from '../state';
+import DepositRequestModel from './models/deposit-request-model';
+
+export async function fetchDepositRequest({data = null}) {
+  return Endpoint(async () => {
+    state.storefront.setSessionToken(state.options.jwt);
+    const {fields} = await state.storefront.cashierRequests.get(data);
+
+    return new DepositRequestModel(fields);
+  });
+}

package/src/storefront/models/deposit-request-model.js

@@ -0,0 +1,15 @@
+import BaseModel from './base-model';
+import merge from 'lodash.merge';
+export default class DepositRequestModel extends BaseModel {
+  constructor(fields) {
+    super(fields);
+    this.amount = Array.isArray(fields.amount) ? fields.amount[0] : fields.amount;
+    this.buttons = fields.buttons ?? [...fields.amounts];
+    this.editable = typeof fields.editable === "boolean" ? fields.editable : Boolean(fields.customAmount);
+    this.customAmount = merge({
+      minimum: 1,
+      maximum: 1000000000000,
+      multipleOf: 1,
+    }, (fields.customAmount || {}));
+  }
+}

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

@@ -85,6 +85,11 @@ export async function fetchReadyToPay({
       data.billingAddress = state.data.account.address;
     }
 
+    if (state.data?.deposit) {
+      data.amount = state.data.deposit.amount;
+      data.currency = state.data.deposit.currency;
+    }
+
     const { fields: readyToPayFields } = await state.storefront.purchase.readyToPay({ data });
     const readyToPay = Object.values(readyToPayFields);
     

package/src/storefront/summary.js

@@ -16,7 +16,6 @@ export async function fetchSummary({ data = null } = {}) {
       }
     };
 
-
     const isBumpOfferSummary = () => state.data.summaryLineItems.every(
       item => bumpOfferProductsIds.includes(item.planId)
     );
@@ -50,6 +49,7 @@ export async function fetchSummary({ data = null } = {}) {
     if (data?.billingAddress) {
       payload.data.billingAddress = data.billingAddress;
     }
+
     if (data?.deliveryAddress) {
       payload.data.deliveryAddress = data.deliveryAddress;
     }

package/src/style/base/__snapshots__/theme.spec.js.snap

@@ -8,7 +8,7 @@ Object {
   --rebilly-colorMutedText: rgba(13, 43, 62, 0.5);
   --rebilly-colorMutedBorder: #DCE3EA;
   --rebilly-colorDanger: #CD5C5C;
-  --rebilly-fontFamily: Avenir, Helvetica, Arial, sans-serif;
+  --rebilly-fontFamily: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif;
   --rebilly-fontSizeBase: 16px;
   --rebilly-fontWeightBase: 500;
   --rebilly-fontLineHeightBase: calc(16px * 1.5);

package/src/style/base/default-theme.js

@@ -49,7 +49,7 @@ const properties = {
   fontFamily: {
     fallback: {
       type: 'static',
-      value: 'Avenir, Helvetica, Arial, sans-serif',
+      value: "-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif",
     }
   },
   fontSizeBase: {

package/src/views/amount-selector.js

@@ -0,0 +1,47 @@
+import state from '../state';
+import iframes from '../state/iframes';
+import { mountMethodSelector } from './method-selector';
+import { fetchReadyToPay } from '../storefront/ready-to-pay';
+
+export async function mountAmountSelector() {
+  if (state.data.money) {
+    state.data.money.amount = null;
+    state.data.money.currency = null;
+    state.updateModel();
+  }
+
+  const iframe = iframes.form;
+  if (!iframe) {
+    await mountForm();
+  }
+
+  const modelSafeState = state.toModel();
+  const model = {
+    options: modelSafeState.options,
+    data: modelSafeState.data,
+    mainStyleVars: modelSafeState.mainStyleVars,
+  };
+
+  iframe.component?.call('route', {
+    name: 'amount-selector'
+  });
+
+  iframe.component?.call('update', model);
+
+  iframe?.component?.on('confirm-amount', async (data) => {
+    const { amount, currency } = data;
+    state.data.money = {
+      amount,
+      currency,
+    };
+
+    const readyToPayUpdated = await fetchReadyToPay({
+      riskMetadata: state.data.riskMetadata
+    });
+
+    state.data.readyToPay = readyToPayUpdated;
+
+    state.updateModel();
+    mountMethodSelector();
+  });
+}

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

@@ -6,7 +6,8 @@ export default class BaseIframe {
     url = '',
     model = {},
     container = null,
-    classListArray = []
+    classListArray = [],
+    route = null,
   } = {}) {
     classListArray = Array.isArray(classListArray) ? classListArray : [];
     if (!classListArray.includes('rebilly-instruments-iframe')) {
@@ -22,6 +23,11 @@ export default class BaseIframe {
 
     return (async () => {
       this.component = await this.createComponent();
+
+      if (route) {
+        this.component.call('route', route);
+      }
+
       return this;
     })();
   }

package/src/views/confirmation.js

@@ -1,9 +1,9 @@
 import state from '../state';
 import iframes from '../state/iframes';
+import { mountForm } from './form';
 import { updateSummary } from './summary';
-
-export const baseConfirmationHTML =
-  '<div class="rebilly-instruments-confirmation"></div>';
+import { purchase} from '../functions/purchase';
+import { setup } from '../functions/setup';
 
 export async function mountConfirmation({ payload: instrument }) {
   if (
@@ -14,7 +14,10 @@ export async function mountConfirmation({ payload: instrument }) {
   }
 
   const iframe = iframes.form;
-
+  if (!iframe) {
+    await mountForm();
+  }
+ 
   const modelSafeState = state.toModel();
   const model = {
     options: modelSafeState.options,
@@ -29,15 +32,11 @@ export async function mountConfirmation({ payload: instrument }) {
 
   iframe?.component?.call('update', model);
 
-  document.querySelectorAll('[data-rebilly-instruments="express-method"]')
-    .forEach(el => {
-      el.style.overflow = 'hidden';
-      el.style.height = '0px';
-    });
-  document.querySelectorAll('[data-rebilly-instruments="bump-offer"]')
-    .forEach(el => {
-      el.style.overflow = 'hidden';
-      el.style.height = '0px';
-      el.style.marginBottom = '0px';
-    })
+  iframe?.component?.on(`${iframe.name}-confirm-purchase`, (confirmedInstrument) => {
+    purchase({ payload: confirmedInstrument });
+  });
+
+  iframe?.component?.on(`${iframe.name}-confirm-setup`, (confirmedInstrument) => {
+    setup({ payload: confirmedInstrument });
+  });
 }

package/src/views/form.js

@@ -0,0 +1,52 @@
+import state from '../state';
+import iframes from '../state/iframes';
+import { ViewIframe } from './common/iframe';
+import { mountMethodSelector } from './method-selector';
+import { mountAmountSelector } from './amount-selector';
+
+export const baseMethodSelectorHTML = () => `
+<div data-rebilly-instruments="content" class="rebilly-instruments-content">
+  <div data-rebilly-instruments="content-error" id="rebilly-instruments-error"></div>
+  <div data-rebilly-instruments="form"></div>
+</div>
+`;
+
+export async function mountForm() {
+  state.form.innerHTML += baseMethodSelectorHTML();
+  const container = document.querySelector('[data-rebilly-instruments="form"]');
+  const { paymentMethodsUrl: url } = state.options?._computed;
+  const name = 'rebilly-instruments-form';
+
+  const modelSafeState = state.toModel();
+  const model = {
+    options: modelSafeState.options,
+    data: modelSafeState.data,
+    mainStyleVars: modelSafeState.mainStyleVars,
+  };
+
+  const args = {
+    name,
+    url: `${url}?name=${name}`,
+    container,
+    model,
+  };
+
+  const iframe = await new ViewIframe(args);
+  iframe.bindEventListeners({loader: state.loader});
+
+  iframes.form = iframe;
+
+  state.loader.stopLoading({id: 'rebilly-instruments-form'});
+
+  return {
+    then: (callback) => callback()
+  }
+}
+
+export function determineFirstView() {
+  if (state.options?.deposit) {
+    mountAmountSelector();
+  } else {
+    mountMethodSelector();
+  }
+}