@rebilly/instruments 3.37.0 → 3.37.1

package/package.json

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

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

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

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

@@ -8,8 +8,6 @@ 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({
@@ -128,22 +126,11 @@ export async function fetchData({
   fetchInvoiceAndProducts = FetchInvoiceAndProducts,
   fetchTransaction = FetchTransaction,
   fetchAccountAndWebsite = FetchAccountAndWebsite,
-  fetchInstruments = FetchInstruments,
-  fetchDepositRequest = FetchDepositRequest,
+  fetchInstruments = FetchInstruments
 } = {}) {
   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;
@@ -162,7 +149,8 @@ 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 { mountForm, determineFirstView } from '../../views/form';
+import { mountMethodSelector } from '../../views/method-selector';
 import { fetchData } from './fetch-data';
 import Events from '../../events';
 import setupElement from './setup-element';
@@ -14,7 +14,74 @@ import setupFramepayTheme from './setup-framepay-theme';
 import setupUserFlow from './setup-user-flow';
 import { showError } from '../../views/errors';
 
-/** See src/data/options-schema for options structure */
+/**
+ * @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
+ */
 export async function mount({
   setupFramepay = setupFramepayInstance,
   ...options
@@ -66,8 +133,7 @@ export async function mount({
 
     // Mount content
     if (state.form) {
-      mountForm()
-        .then(() => determineFirstView());
+      mountMethodSelector();
     }
     if (state.summary) {
       mountSummary();

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

@@ -35,12 +35,7 @@ describe('RebillyInstruments instance', () => {
 
     // Mounts form and summary
     const summarySelector = document.querySelector('.summary-selector');
-    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');
+    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>');
 
     // Theme config overrides initial styles
     const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];

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

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

package/src/functions/purchase.js

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

package/src/functions/show.spec.js

@@ -12,6 +12,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
+    iframes.form = iframeMock;
 
     const payload = {
       test: 'value'
@@ -23,6 +24,7 @@ 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,9 +7,6 @@
       "shipping": "Shipping",
       "total": "Total"
     },
-    "deposit": {
-      "goBack": "Choose another amount"
-    },
     "form": {
       "expressCheckout": "Express checkout",
       "or": "Or",

package/src/i18n/es.json

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

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

@@ -85,11 +85,6 @@ 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,6 +16,7 @@ export async function fetchSummary({ data = null } = {}) {
       }
     };
 
+
     const isBumpOfferSummary = () => state.data.summaryLineItems.every(
       item => bumpOfferProductsIds.includes(item.planId)
     );
@@ -49,7 +50,6 @@ 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: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif;
+  --rebilly-fontFamily: Avenir, Helvetica, 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: "-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif",
+      value: 'Avenir, Helvetica, Arial, sans-serif',
     }
   },
   fontSizeBase: {

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

@@ -6,8 +6,7 @@ export default class BaseIframe {
     url = '',
     model = {},
     container = null,
-    classListArray = [],
-    route = null,
+    classListArray = []
   } = {}) {
     classListArray = Array.isArray(classListArray) ? classListArray : [];
     if (!classListArray.includes('rebilly-instruments-iframe')) {
@@ -23,11 +22,6 @@ 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';
-import { purchase} from '../functions/purchase';
-import { setup } from '../functions/setup';
+
+export const baseConfirmationHTML =
+  '<div class="rebilly-instruments-confirmation"></div>';
 
 export async function mountConfirmation({ payload: instrument }) {
   if (
@@ -14,10 +14,7 @@ export async function mountConfirmation({ payload: instrument }) {
   }
 
   const iframe = iframes.form;
-  if (!iframe) {
-    await mountForm();
-  }
- 
+
   const modelSafeState = state.toModel();
   const model = {
     options: modelSafeState.options,
@@ -32,11 +29,15 @@ export async function mountConfirmation({ payload: instrument }) {
 
   iframe?.component?.call('update', model);
 
-  iframe?.component?.on(`${iframe.name}-confirm-purchase`, (confirmedInstrument) => {
-    purchase({ payload: confirmedInstrument });
-  });
-
-  iframe?.component?.on(`${iframe.name}-confirm-setup`, (confirmedInstrument) => {
-    setup({ payload: confirmedInstrument });
-  });
+  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';
+    })
 }

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

@@ -105,28 +105,77 @@ exports[`Methods Selector Component should inject the proper HTML for express me
 
   <div
     class="rebilly-instruments-content"
-    data-rebilly-instruments="content"
   >
     
   
     <div
-      data-rebilly-instruments="content-error"
       id="rebilly-instruments-error"
     />
     
   
+  
     <div
-      data-rebilly-instruments="form"
+      class="rebilly-instruments-method-selector "
+      data-rebilly-instruments="express-method"
     >
-      <iframe
-        allow="payment"
-        class="rebilly-instruments-iframe"
-        loading="lazy"
-        name="rebilly-instruments-form"
-        src="https://forms.test.rebilly.dev?name=rebilly-instruments-form"
-      />
+      
+    
+      <div
+        class="rebilly-instruments-express-methods "
+      >
+        
+      
+        <span
+          class="rebilly-instruments-express-methods-label"
+          data-rebilly-i18n="form.expressCheckout"
+        >
+          Express checkout
+        </span>
+        
+      
+        <div
+          class="rebilly-instruments-express-methods-container"
+        >
+          
+      
+          <div
+            class="rebilly-instruments-google-pay-method"
+          />
+          
+    
+        </div>
+        
+    
+      </div>
+      
+    
+      <div
+        class="rebilly-instruments-divider"
+        data-rebilly-instruments="divider"
+        style="display: none;"
+      >
+        
+      
+        <span
+          class="rebilly-instruments-divider-label"
+          data-rebilly-i18n="form.or"
+        >
+          Or
+        </span>
+        
+    
+      </div>
+      
+  
     </div>
     
+  
+    <div
+      class="rebilly-instruments-methods"
+      data-rebilly-instruments="methods"
+      style="display: none;"
+    />
+    
 
   </div>
   

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

@@ -1,7 +1,7 @@
 import state from '../../state';
 import { getMethodData } from './get-method-data';
 
-export function generateDigitalWallet({ expressMethods = [] }) {
+export function generateDigitalWallet({ EXPRESS_METHODS }) {
   const output = {};
 
   const { paymentInstruments } = state.options;
@@ -20,7 +20,7 @@ export function generateDigitalWallet({ expressMethods = [] }) {
     transactionData.currency =  currency;
   }
 
-  expressMethods.forEach(method => {
+  EXPRESS_METHODS.forEach(method => {
     const { METHOD_TYPE } = getMethodData(method);
 
     if (method.feature?.name === 'Google Pay') {

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

@@ -38,6 +38,11 @@ describe('generateDigitalWallet', () => {
     });
   }
 
+  const summary = new SummaryModel({
+    currency: 'USD',
+    total: 1,
+  });
+
   it('should generate the correct digital wallet config for Google pay', () => {
     const expressMethods = [
       new ReadyToPayModel({
@@ -52,7 +57,10 @@ describe('generateDigitalWallet', () => {
     ];
     setupState();
 
-    const output = generateDigitalWallet({expressMethods});
+    const output = generateDigitalWallet({
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
 
     const expectedOutput ={
       googlePay: {
@@ -92,7 +100,10 @@ describe('generateDigitalWallet', () => {
     ];
     setupState();
 
-    const output = generateDigitalWallet({expressMethods});
+    const output = generateDigitalWallet({
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
 
     const expectedOutput = {
       applePay: {

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

@@ -2,20 +2,20 @@ import state from '../../state';
 
 export function getPaymentMethods() {
   const result = {
-    expressMethods: [],
-    methods: []
+    EXPRESS_METHODS: [],
+    METHODS: []
   };
 
   state.data.readyToPay?.forEach((method) => {
     if (method.metadata.isExpressMethod) {
-      result.expressMethods.push(method);
+      result.EXPRESS_METHODS.push(method);
     } else {
-      result.methods.push(method);
+      result.METHODS.push(method);
     }
   });
 
   if (!window.ApplePaySession) {
-    result.expressMethods = result.expressMethods.filter(method => method?.feature?.name !== 'Apple Pay');
+    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => method?.feature?.name !== 'Apple Pay');
     state.loader.stopLoading({ id: 'applePay-express' });
   }