@rebilly/instruments 3.2.0-beta.0 → 3.3.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.2.0-beta.0",
+  "version": "3.3.2-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",

package/src/functions/mount/index.js

@@ -67,7 +67,7 @@ import setupUserFlow from './setup-user-flow';
  * @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.customerJwt - The customer token to access the invoice.
+ * @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

package/src/functions/mount/setup-framepay-theme.js

@@ -48,33 +48,56 @@ export default async ({
   const cssAst = css.parse(resolvedCss);
 
   const cssSelectors = {
-    base: '.rebilly-instruments-form-field-input',
-    baseHover: '.rebilly-instruments-form-field-input:hover',
-    baseFocus: '.rebilly-instruments-form-field-input:focus',
-    basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
-    baseSelection: '.rebilly-instruments-form-field-input::selection',
-
-    invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
-    invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
-    invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
-    invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
-    invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
+    input: {
+      base: '.rebilly-instruments-form-field-input',
+      baseHover: '.rebilly-instruments-form-field-input:hover',
+      baseFocus: '.rebilly-instruments-form-field-input:focus',
+      basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
+      baseSelection: '.rebilly-instruments-form-field-input::selection',
+  
+      invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
+      invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
+      invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
+      invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
+      invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
+    },
+    button: {
+      base: '.rebilly-instruments-button.rebilly-instruments-button-secondary',
+      baseHover: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover',
+      baseFocus: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active',
+  
+      active: '.rebilly-instruments-button',
+      activeHover: '.rebilly-instruments-button:not([disabled]):hover',
+      activeFocus: '.rebilly-instruments-button:not([disabled]):active',
+    }
   }
 
   const framepayStyle = {
     base: {
-      ...getStyleProps(cssAst, cssSelectors.base),
-      ':hover': getStyleProps(cssAst, cssSelectors.baseHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.baseFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.basePlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.baseSelection),
+      ...getStyleProps(cssAst, cssSelectors.input.base),
+      ':hover': getStyleProps(cssAst, cssSelectors.input.baseHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.input.baseFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.input.basePlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.input.baseSelection),
     },
     invalid: {
-      ...getStyleProps(cssAst, cssSelectors.invalid),
-      ':hover': getStyleProps(cssAst, cssSelectors.invalidHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.invalidFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.invalidPlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.invalidSelection),
+      ...getStyleProps(cssAst, cssSelectors.input.invalid),
+      ':hover': getStyleProps(cssAst, cssSelectors.input.invalidHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.input.invalidFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.input.invalidPlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.input.invalidSelection),
+    },
+    buttons: {
+      base: {
+        ...getStyleProps(cssAst, cssSelectors.button.base),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.baseHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.baseFocus),
+      },
+      active: {
+        ...getStyleProps(cssAst, cssSelectors.button.active),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.activeHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.activeFocus),
+      }
     }
   }
 

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

@@ -59,6 +59,10 @@ export function validateOptions(options) {
   }
 
   if (purchaseData.length > 1) {
+    // JWT can be alone or with specific invoiceId or transactionId
+    if (options.jwt && (options.invoiceId || options.transactionId)) {
+      return
+    }
     throw new Error('Must provide only one purchase data type');
   }
 }
@@ -66,6 +70,7 @@ export function validateOptions(options) {
 export default ({
   options = {}
 } = {}) => {
+
   validateOptions(options);
 
   const _computed = {
@@ -122,7 +127,7 @@ export default ({
     'money',
     'invoiceId',
     'transactionId',
-    'customerJwt',
+    'jwt',
     '_dev'
   ].forEach(key => {
     if (options[key]) {

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

@@ -21,8 +21,7 @@ describe('Setup mount options', () => {
       publishableKey: 'test-publishable-key',
       organizationId: 'test-organization-id',
       websiteId: 'test-website-id',
-      invoiceId: 'test-invoice-id',
-      customerJwt: 'test-customer-jwt'
+      jwt: 'test-jwt'
     }
     const rebillyInstruments = await RenderMockRebillyInstruments(options);
     expect(rebillyInstruments.state.options).toMatchObject(options);

package/src/functions/purchase.js

@@ -36,7 +36,7 @@ export async function makePayment({ state, payload }) {
 
   fields = {
     transaction: fields,
-    token: fields.token || state.options.customerJwt
+    token: fields.token || state.options.jwt
   };
 
   if (state.data.invoice) {

package/src/i18n/en.json

@@ -11,6 +11,7 @@
       "expressCheckout": "Express checkout",
       "or": "Or",
       "popupOverlayText": "Click here to show popup window",
+      "andMore": "and more",
       "error": {
         "noPaymentMethods": "No payment methods available for this transaction, please contact support."
       },
@@ -19,7 +20,8 @@
       }
     },
     "paymentMethods": {
-      "payment-card": "Payment card"
+      "payment-card": "Payment card",
+      "ach": "Bank account"
     }
   }
 }

package/src/i18n/es.json

@@ -10,13 +10,15 @@
     "form": {
       "expressCheckout": "Chequeo rápido",
       "or": "O pague con",
+      "andMore": "y más",
       "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
       "error": {
         "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia."
       }
     },
     "paymentMethods": {
-      "payment-card": "Tarjeta de crédito"
+      "payment-card": "Tarjeta de crédito",
+      "ach": "Cuenta bancaria"
     }
   }
 }

package/src/storefront/index.js

@@ -1,4 +1,4 @@
-import { RebillyStorefrontAPI } from 'rebilly-js-sdk';
+import RebillyApi, {RebillyStorefrontAPI} from 'rebilly-js-sdk';
 
 export function validateStateForStorefront({state}) {
   if (!state.storefront) {
@@ -43,23 +43,25 @@ export class StorefrontInstance {
       sandbox: sandboxUrl || 'https://api-sandbox.rebilly.com'
     };
 
-    const api = RebillyStorefrontAPI({
+    const config = {
       organizationId,
       sandbox: mode === 'sandbox',
       timeout: Number.isNaN(parseInt(timeout, 10))
         ? 10000
         : parseInt(timeout, 10),
       urls
-    });
+    };
 
-    if (publishableKey) {
-      api.setPublishableKey(publishableKey);
-    }
-    if (jwt) {
-      api.setSessionToken(jwt);
-    }
+    const api = RebillyStorefrontAPI(config);
+    // TODO: Check why Rollup is making the default as an named export
+    const rebilly = typeof RebillyApi.default === 'function' ? RebillyApi.default(config) : RebillyApi(config);
+
+    api.setSessionToken(publishableKey || jwt);
+    rebilly.setSessionToken(publishableKey || jwt);
 
     this.api = api;
+    this.api.rebilly = rebilly;
+
     return this.api;
   }
 }

package/src/storefront/invoices.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchInvoice({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt || state.options.jwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.invoices.get(data);
 
     return new InvoiceModel(fields);

package/src/storefront/models/payment-metadata.js

@@ -0,0 +1,7 @@
+import BaseModel from './base-model';
+
+export default class PaymentMetadataModel extends BaseModel {
+  get logo () {
+    return this.landscapeLogo || this.portraitLogo;
+  }
+}

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

@@ -1,3 +1,5 @@
+import PaymentMetadataModel from './payment-metadata';
+
 export class ReadyToPayFeatureModel {
   constructor({
     name = '',
@@ -16,6 +18,7 @@ export class ReadyToPayFeatureModel {
   } = {}) {
     this.name = name;
     this.expirationTime = expirationTime;
+    
 
     this.merchantName = merchantName;
     this.merchantOrigin = merchantOrigin;
@@ -33,12 +36,14 @@ export default class ReadyToPayModel {
     method = '',
     feature = null,
     brands = [],
-    filters = []
+    filters = [],
+    metadata = null
   } = {}) {
     this.index = index;
     this.method = method;
     this.feature = feature ? new ReadyToPayFeatureModel(feature) : null;
     this.brands = brands;
     this.filters = filters;
+    this.metadata = metadata ? new PaymentMetadataModel(metadata) : null;
   }
 }

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

@@ -33,16 +33,30 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       data.currency = money.currency;
     }
 
-    const { fields: readyToPayFields } =
-      await state.storefront.purchase.readyToPay({ data });
+    const [
+      { fields: readyToPayFields },
+      { items: paymentMethodsMetadataItems } 
+    ] = await Promise.all([
+      state.storefront.purchase.readyToPay({ data }),
+      state.storefront.rebilly.paymentMethods.getAll()
+    ]);
+
+    const paymentMethodsMetadata = paymentMethodsMetadataItems.map(({fields}) => fields);
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method
       .filter((fields) => !(fields.method === 'paypal' && !fields.feature))
-      .map((fields, index) => new ReadyToPayModel({
+      // Remove Plaid payment method
+      .filter((fields) => !(fields.method === 'ach' && fields.feature))
+      .map((fields, index) => {
+        const metadata = paymentMethodsMetadata
+          .find(methodMetadata => methodMetadata.apiName === fields.method);
+
+        return new ReadyToPayModel({
           index,
+          metadata,
           ...fields
-        })
-      );
+        });
+      });
   });
 }

package/src/storefront/transactions.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchTransaction({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt || state.options.jwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.transactions.get(data);
 
     return new TransactionModel(fields);

package/src/style/components/accordion.js

@@ -0,0 +1,127 @@
+import { lighten } from '../utils/color-values';
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the accordion component.
+// -----------------------------------------------------------------------------
+
+export const accordion = (theme) => `
+  /* ACCORDION CLOSED */
+  .rebilly-instruments-accordion {
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: 0 var(--rebilly-spacings-s);
+    background: var(--rebilly-colorBackground);
+    transition: border 0.2s ease, box-shadow 0.2s ease;
+    margin: var(--rebilly-spacings-s) 0;
+    border-radius: var(--rebilly-borderRadius);
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-accordion:first-of-type {
+    margin-top: 0;
+  }
+
+  .rebilly-instruments-accordion:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: var(--rebilly-spacings-xs) var(--rebilly-spacings-s);
+    margin: 0px calc(-1 * var(--rebilly-spacings-s));
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    margin-right: var(--rebilly-spacings-s);
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    box-shadow: 0 0 0 0 transparent;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.4);
+    opacity: 0;
+    background: var(--rebilly-colorPrimary);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion:hover .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: ${lighten(theme.colorText, 60)};
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary img {
+    margin-right: var(--rebilly-spacings-s);
+    height: auto;
+    max-width: 40px;
+    width: 100%;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+    margin: 0;
+    font-weight: 500;
+    flex: 2;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure {
+    margin: auto;
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands span {
+    color: var(--rebilly-colorMutedText);
+    margin: 0;
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
+  }
+
+  /* ACCORDION OPENED */
+  .rebilly-instruments-accordion[open] {
+    padding: 0 var(--rebilly-spacings-s) var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    margin-bottom: var(--rebilly-spacings-m);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: var(--rebilly-colorPrimary);
+    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+`;

package/src/style/components/button.js

@@ -50,6 +50,9 @@ export const button = () => `
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
     background: var(--rebilly-colorBackground);
     color: var(--rebilly-buttonColorBackground);
     border-color: var(--rebilly-buttonColorBackground);

package/src/style/components/forms/form.js

@@ -13,7 +13,6 @@ export const form = () => `
   .rebilly-instruments-form select:-webkit-autofill:hover,
   .rebilly-instruments-form select:-webkit-autofill:focus {
     -webkit-text-fill-color: var(--rebilly-colorText);
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
-    transition: background-color 5000s ease-in-out 0s;
+    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
   }
 `;

package/src/style/components/index.js

@@ -12,6 +12,7 @@ import { loader } from './loader';
 import { icons } from './icons';
 import { address } from './address';
 import { overlay } from './overlay';
+import {accordion} from './accordion';
 
 // Order of components matters for style cascade
 export const components = (theme) => `
@@ -32,4 +33,5 @@ export const components = (theme) => `
   ${icons(theme)}
   ${address(theme)}
   ${overlay(theme)}
+  ${accordion(theme)}
 `;

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

@@ -3,7 +3,7 @@ import { getMethodData } from './get-method-data';
 
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-const SUPPORTED_METHODS = ['payment-card'];
+const SUPPORTED_METHODS = ['payment-card', 'ach'];
 
 const isExpressMethod = ({ method, feature }) => {
   return (