@internetarchive/donation-form 0.5.20 → 0.5.21-a2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "0.5.20",
+  "version": "0.5.21-a2",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -15,7 +15,7 @@
   "scripts": {
     "prepare": "yarn run build",
     "build": "tsc -p tsconfig.build.json",
-    "start": "concurrently --kill-others --names tsc,es-dev-server \"yarn run tsc:watch\" \"es-dev-server --app-index demo/index.html --node-resolve --open --watch --preserve-symlinks\"",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds --app-index demo/index.html --node-resolve --open --watch --preserve-symlinks\"",
     "tsc:watch": "tsc --watch",
     "lint:eslint": "eslint --ext .ts,.html . --ignore-path .gitignore",
     "format:eslint": "eslint --ext .ts,.html . --fix --ignore-path .gitignore",
@@ -24,8 +24,8 @@
     "lint": "yarn run lint:eslint && yarn run lint:prettier",
     "format": "yarn run format:eslint && yarn run format:prettier",
     "circular": "madge --circular --extensions ts .",
-    "test": "tsc && yarn run lint && yarn run circular && karma start --coverage",
-    "test:watch": "concurrently --kill-others --names tsc,karma \"yarn run tsc:watch\" \"karma start --auto-watch=true --single-run=false\""
+    "test": "tsc && yarn run lint && yarn run circular && wtr dist/test/tests/**/*.test.js --node-resolve --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr test/tests/**/*.test.ts --node-resolve --watch\""
   },
   "dependencies": {
     "@internetarchive/analytics-manager": "^0.1.2",
@@ -47,35 +47,41 @@
     "@internetarchive/modal-manager": "^0.2.8",
     "@internetarchive/promised-singleton": "^0.2.1",
     "currency.js": "^2.0.2",
-    "lit": "^2.6.1",
+    "lit": "^2.8.0",
     "nanoevents": "^5.1.8"
   },
   "devDependencies": {
-    "@open-wc/eslint-config": "^1.0.0",
-    "@open-wc/prettier-config": "^0.1.10",
-    "@open-wc/testing": "^2.0.0",
-    "@open-wc/testing-karma": "^3.0.0",
-    "@open-wc/testing-karma-bs": "^1.0.0",
+    "@babel/core": "^7.23.3",
+    "@open-wc/eslint-config": "^12.0.2",
+    "@open-wc/prettier-config": "^1.1.0",
+    "@open-wc/testing": "^3.1.6",
     "@types/applepayjs": "^3.0.0",
-    "@types/form-data": "^2.5.0",
     "@types/googlepay": "^0.4.1",
     "@types/grecaptcha": "^2.0.36",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "concurrently": "^4.1.2",
-    "es-dev-server": "^1.56.0",
-    "eslint": "^6.8.0",
+    "@types/mocha": "^10.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@web/dev-server": "^0.3.0",
+    "@web/test-runner": "^0.17.0",
+    "concurrently": "^8.0.0",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-lit": "^1.7.2",
+    "eslint-plugin-lit-a11y": "^4.1.1",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-wc": "^2.0.4",
     "form-data": "^3.0.0",
-    "gulp": "^4.0.2",
-    "husky": "^1.0.0",
-    "karma-coverage": "^2.0.1",
+    "husky": "^8.0.3",
+    "karma": "^6.4.2",
     "lint-staged": "^8.0.0",
-    "lit-html": "^2.0.2",
-    "madge": "^4.0.1",
-    "polymer-cli": "^1.9.11",
-    "sinon": "^12.0.1",
-    "typescript": "^3.9.5",
-    "webpack-merge": "^4.1.5"
+    "madge": "^6.0.0",
+    "prettier": "^3.1.0",
+    "sinon": "^16.0.0",
+    "ts-lit-plugin": "^1.2.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4"
   },
   "eslintConfig": {
     "extends": [

package/src/braintree-manager/braintree-manager.ts

@@ -99,9 +99,7 @@ export class BraintreeManager implements BraintreeManagerInterface {
     binName?: string; // credit card bank name
   }): Promise<DonationResponse> {
     const customFields = new DonationRequestCustomFields();
-    // eslint-disable-next-line @typescript-eslint/camelcase
     customFields.fee_amount_covered = options.donationInfo.feeAmountCovered;
-    // eslint-disable-next-line @typescript-eslint/camelcase
     customFields.logged_in_user = this.loggedInUser;
     customFields.referrer = this.referrer;
     customFields.origin = this.origin;

package/src/braintree-manager/payment-clients.ts

@@ -106,8 +106,7 @@ export class PaymentClients implements PaymentClientsInterface {
         };
 
         this.lazyLoader.loadScript({
-          src:
-            'https://www.google.com/recaptcha/api.js?onload=donationFormGrecaptchaLoadedCallback&render=explicit',
+          src: 'https://www.google.com/recaptcha/api.js?onload=donationFormGrecaptchaLoadedCallback&render=explicit',
         });
       }),
   });

package/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.ts

@@ -112,7 +112,7 @@ export interface PayPalButtonDataSourceDelegate {
    * @returns {Promise<void>}
    * @memberof PayPalButtonDataSourceDelegate
    */
-   payPalPaymentConfirmed(
+  payPalPaymentConfirmed(
     dataSource: PayPalButtonDataSourceInterface,
     payload: paypal.TokenizePayload,
   ): Promise<void>;

package/src/braintree-manager/payment-providers/paypal/paypal.ts

@@ -44,9 +44,9 @@ export class PayPalHandler implements PayPalHandlerInterface {
     style: paypal.ButtonStyle;
     donationInfo: DonationPaymentInfo;
   }): Promise<PayPalButtonDataSourceInterface | undefined> {
-    const env: paypal.Environment = (this.hostingEnvironment === HostingEnvironment.Development
-      ? 'sandbox'
-      : 'production') as paypal.Environment;
+    const env: paypal.Environment = (
+      this.hostingEnvironment === HostingEnvironment.Development ? 'sandbox' : 'production'
+    ) as paypal.Environment;
 
     const paypalInstance = await this.instance.get();
     if (!paypalInstance) {

package/src/donation-form-controller.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { LitElement, html, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
@@ -32,9 +33,9 @@ import './form-elements/badged-input';
 import { ContactForm } from './form-elements/contact-form/contact-form';
 import './form-elements/contact-form/contact-form';
 
-import creditCardImg from '@internetarchive/icon-credit-card';
-import calendarImg from '@internetarchive/icon-calendar';
-import lockImg from '@internetarchive/icon-lock';
+import creditCardImg from '@internetarchive/icon-credit-card/index.js';
+import calendarImg from '@internetarchive/icon-calendar/index.js';
+import lockImg from '@internetarchive/icon-lock/index.js';
 import { DonationControllerEventLoggerInterface } from './@types/analytics-handler';
 import { AnalyticsManagerInterface, AnalyticsEvent } from '@internetarchive/analytics-manager';
 import {
@@ -331,7 +332,7 @@ export class DonationFormController extends LitElement {
           logEvent: this.logEvent.bind(this),
           logDonationFlowEvent: this.logDonationFlowEvent.bind(this),
         } as DonationControllerEventLoggerInterface,
-      }
+      },
     });
 
     this.donationForm.braintreeManager = this.braintreeManager;
@@ -536,10 +537,10 @@ export class DonationFormController extends LitElement {
    * @param {string} action Name of event
    * @param {string} label Event label, optional
    */
-    private logDonationFlowEvent(action: string, label?: string): void {
-      const analyticEvent = { action, label, category: 'DonationFlow' } as AnalyticsEvent;
-      this.analyticsHandler?.sendEventNoSampling(analyticEvent);
-    }
+  private logDonationFlowEvent(action: string, label?: string): void {
+    const analyticEvent = { action, label, category: 'DonationFlow' } as AnalyticsEvent;
+    this.analyticsHandler?.sendEventNoSampling(analyticEvent);
+  }
 
   /**
    * This is not the normal LitElement styles block.
@@ -610,7 +611,7 @@ export class DonationFormController extends LitElement {
           margin-bottom: 0.6rem;
         }
 
-        .donation-form-controller-container div[slot="braintree-hosted-fields"] {
+        .donation-form-controller-container div[slot='braintree-hosted-fields'] {
           background-color: white;
         }
       </style>

package/src/donation-form.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
-import lockImg from '@internetarchive/icon-lock';
+import lockImg from '@internetarchive/icon-lock/index.js';
 
 // we have to import the registered component independently from the definition below
 // because inside each of these files, we're registering the custom element inside
@@ -121,15 +122,15 @@ export class DonationForm extends LitElement {
     `;
   }
 
-    async showConfirmationModalDev(options: {
-      donationType: DonationType;
-      amount: number;
-      currencyType: string;
-      cancelDonationCB: Function;
-      confirmDonationCB: Function;
-    }): Promise<void> {
-      this.paymentFlowHandlers?.showConfirmationStepModal(options);
-    }
+  async showConfirmationModalDev(options: {
+    donationType: DonationType;
+    amount: number;
+    currencyType: string;
+    cancelDonationCB: Function;
+    confirmDonationCB: Function;
+  }): Promise<void> {
+    this.paymentFlowHandlers?.showConfirmationStepModal(options);
+  }
 
   /**
    * This is a developer convenience method that allows us to show the upsell modal without going
@@ -193,13 +194,9 @@ export class DonationForm extends LitElement {
 
       <donation-form-section .sectionBadge=${this.paymentSelectorNumberingStart + 2}>
         <slot name="recaptcha"></slot>
-        <button id="donate-button" @click=${this.donateClicked}>
-          Donate
-        </button>
+        <button id="donate-button" @click=${this.donateClicked}>Donate</button>
 
-        <div class="secure-process-note">
-          ${lockImg} Your payment will be securely processed
-        </div>
+        <div class="secure-process-note">${lockImg} Your payment will be securely processed</div>
       </donation-form-section>
     `;
   }

package/src/form-elements/badged-input.ts

@@ -38,11 +38,7 @@ export class BadgedInput extends LitElement {
       <div class="input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}">
         <div class="icon-container">${this.icon}</div>
         <div class="required-indicator ${this.requiredIndicatorSpaceOption}">
-          ${this.required
-            ? html`
-                *
-              `
-            : nothing}
+          ${this.required ? html` * ` : nothing}
         </div>
 
         <slot></slot>

package/src/form-elements/contact-form/contact-form.ts

@@ -12,9 +12,9 @@ import { SpacerOption } from '../badged-input';
 import { BadgedInput } from '../badged-input';
 import '../badged-input';
 
-import emailImg from '@internetarchive/icon-email';
-import localePinImg from '@internetarchive/icon-locale-pin';
-import userIcon from '@internetarchive/icon-user';
+import emailImg from '@internetarchive/icon-email/index.js';
+import localePinImg from '@internetarchive/icon-locale-pin/index.js';
+import userIcon from '@internetarchive/icon-user/index.js';
 
 import { countries } from './countries';
 
@@ -179,9 +179,7 @@ export class ContactForm extends LitElement {
               iconSpaceOption: SpacerOption.CompressSpace,
             })}
           </div>
-          <div class="row">
-            ${this.countrySelectorTemplate}
-          </div>
+          <div class="row">${this.countrySelectorTemplate}</div>
         </fieldset>
       </form>
       ${this.getStyles}
@@ -191,23 +189,27 @@ export class ContactForm extends LitElement {
   private get countrySelectorTemplate(): TemplateResult {
     return html`
       <badged-input>
-        <select id="donation-contact-form-countryCodeAlpha2"
-        @change=${(e: Event) => {
-          const currCountry = this.selectedCountry;
-          this.selectedCountry = (e.target as HTMLInputElement)?.value ? (e.target as HTMLInputElement)?.value as string : currCountry;
-          // update required visual cue on region/state/province & postal code fields
-          if (this.selectedCountry === 'US') {
-            this.postalBadgedInput?.setAttribute('required', '');
-            this.postalCodeField?.setAttribute('required', '');
-            this.regionBadgedInput?.setAttribute('required', '');
-            this.regionField?.setAttribute('required', '');
-          } else {
-            this.postalBadgedInput?.removeAttribute('required');
-            this.postalCodeField?.removeAttribute('required');
-            this.regionBadgedInput?.removeAttribute('required');
-            this.regionField?.removeAttribute('required');
-          }
-        }}>
+        <select
+          id="donation-contact-form-countryCodeAlpha2"
+          @change=${(e: Event) => {
+            const currCountry = this.selectedCountry;
+            this.selectedCountry = (e.target as HTMLInputElement)?.value
+              ? ((e.target as HTMLInputElement)?.value as string)
+              : currCountry;
+            // update required visual cue on region/state/province & postal code fields
+            if (this.selectedCountry === 'US') {
+              this.postalBadgedInput?.setAttribute('required', '');
+              this.postalCodeField?.setAttribute('required', '');
+              this.regionBadgedInput?.setAttribute('required', '');
+              this.regionField?.setAttribute('required', '');
+            } else {
+              this.postalBadgedInput?.removeAttribute('required');
+              this.postalCodeField?.removeAttribute('required');
+              this.regionBadgedInput?.removeAttribute('required');
+              this.regionField?.removeAttribute('required');
+            }
+          }}
+        >
           ${Object.keys(countries).map(key => {
             const name = countries[key];
             return html`

package/src/form-elements/header/donation-form-header.ts

@@ -36,9 +36,7 @@ export class DonationFormHeader extends LitElement {
 
   /** @inheritdoc */
   render(): TemplateResult {
-    return html`
-      ${this.currentTemplate}
-    `;
+    return html` ${this.currentTemplate} `;
   }
 
   private get currentTemplate(): TemplateResult {

package/src/form-elements/payment-selector.ts

@@ -1,10 +1,10 @@
 import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import applePayButtonImage from '@internetarchive/icon-applepay';
-import googlePayButtonImage from '@internetarchive/icon-googlepay';
-import paypalButtonImage from '@internetarchive/icon-paypal';
-import venmoButtonImage from '@internetarchive/icon-venmo';
+import applePayButtonImage from '@internetarchive/icon-applepay/index.js';
+import googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';
+import paypalButtonImage from '@internetarchive/icon-paypal/index.js';
+import venmoButtonImage from '@internetarchive/icon-venmo/index.js';
 import { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';
 
 enum PaymentButtonMode {

package/src/modals/confirm-donation-modal-content.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/ban-types */
 import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { DonationType } from '@internetarchive/donation-form-data-models';
@@ -24,18 +25,25 @@ export class ConfirmDonationContent extends LitElement {
 
   @property({ type: Function }) confirmDonation: Function = (): void => {};
 
-  @property({ type: Function }) cancelDonation: Function= (): void => {};
+  @property({ type: Function }) cancelDonation: Function = (): void => {};
 
   get confirmationText(): TemplateResult {
     const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
     return html`
-    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>
+      <p>
+        You are about to make a <b>${this.donationType}</b> donation of
+        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
+      </p>
     `;
   }
 
   get confirmUpsellText(): TemplateResult {
     const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-    return html`<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring contribution will be next month.)</p>`;
+    return html`<p>
+      You are about to begin making <b>monthly</b> donations of
+      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
+      contribution will be next month.)
+    </p>`;
   }
 
   confirm(): void {
@@ -47,7 +55,9 @@ export class ConfirmDonationContent extends LitElement {
   }
 
   get confirmCTA(): string {
-    return this.donationType === DonationType.Upsell ? 'Start monthly donation' : 'Complete donation';
+    return this.donationType === DonationType.Upsell
+      ? 'Start monthly donation'
+      : 'Complete donation';
   }
 
   /** @inheritdoc */
@@ -107,8 +117,8 @@ export class ConfirmDonationContent extends LitElement {
   /**
    * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
    */
-   get currencySymbol(): string {
-    switch(this.currencyType) {
+  get currencySymbol(): string {
+    switch (this.currencyType) {
       case 'AUD':
         return 'AU$';
       case 'BRL':

package/src/modals/upsell-modal-content.ts

@@ -33,14 +33,10 @@ export class UpsellModalContent extends LitElement {
   render(): TemplateResult {
     return html`
       <h3>Thank you for donating!</h3>
-      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">
-        Continue
-      </button>
+      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">Continue</button>
       <p class="or_separator"><span>or</span></p>
       <h3>Consider donating monthly</h3>
-      <p class="appeal">
-        Monthly support helps us reliably plan for the future.
-      </p>
+      <p class="appeal">Monthly support helps us reliably plan for the future.</p>
       <div class="monthly-amount">
         <h1>Enter your monthly amount</h1>
         <div class="amount-input">
@@ -79,9 +75,7 @@ export class UpsellModalContent extends LitElement {
         return html`
           <div class="paypal-upsell-slot-container">
             <div class="paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}"></div>
-            <button class="cta-button" id="paypal-cover-button">
-              YES, I'll donate monthly
-            </button>
+            <button class="cta-button" id="paypal-cover-button">YES, I'll donate monthly</button>
             <slot class="paypal-upsell-slot"></slot>
           </div>
         `;
@@ -100,9 +94,7 @@ export class UpsellModalContent extends LitElement {
   private handleCustomAmountInput(value: string): void {
     const amount = parseFloat(value);
     if (isNaN(amount)) {
-      this.error = html`
-        Please enter a valid amount.
-      `;
+      this.error = html` Please enter a valid amount. `;
     } else {
       this.processAmount(amount);
     }
@@ -119,9 +111,7 @@ export class UpsellModalContent extends LitElement {
 
     if (amount < 1) {
       if (this.amountInput && this.amountInput.value.length > 0) {
-        this.error = html`
-          The minimum donation amount is $1.
-        `;
+        this.error = html` The minimum donation amount is $1. `;
       }
       return;
     }

package/src/payment-flow-handlers/donation-flow-modal-manager.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { html } from 'lit';
 import { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';
 import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
@@ -175,9 +176,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
       closeOnBackdropClick: false,
       showCloseButton: false,
       processingImageMode: 'processing',
-      title: html`
-        Processing...
-      `,
+      title: html` Processing... `,
     });
     this.modalManager.showModal({ config: modalConfig });
   }
@@ -191,9 +190,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
       showProcessingIndicator: true,
       processingImageMode: 'complete',
       headerColor: ModalHeaderColor.Green,
-      title: html`
-        Thank You!
-      `,
+      title: html` Thank You! `,
     });
     this.modalManager.showModal({
       config: modalConfig,
@@ -216,15 +213,9 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
   showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {
     const modalConfig = new ModalConfig({
       headerColor: ModalHeaderColor.Red,
-      title: html`
-        Processing error
-      `,
-      headline: html`
-        There's been a problem completing your donation.
-      `,
-      message: html`
-        ${options?.message}
-      `,
+      title: html` Processing error `,
+      headline: html` There's been a problem completing your donation. `,
+      message: html` ${options?.message} `,
     });
 
     this.modalManager.showModal({
@@ -249,9 +240,10 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     const cancelDonation = (): void => {
       options?.cancelDonationCB();
     };
-    const modalTitle = options.donationType === DonationType.Upsell
-      ? 'Confirm monthly donation'
-      : 'Complete donation';
+    const modalTitle =
+      options.donationType === DonationType.Upsell
+        ? 'Confirm monthly donation'
+        : 'Complete donation';
 
     const modalConfig = new ModalConfig({
       closeOnBackdropClick: false,
@@ -269,7 +261,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     });
     return this.modalManager.showModal({
       config: modalConfig,
-      userClosedModalCallback: cancelDonation
+      userClosedModalCallback: cancelDonation,
     });
   }
 
@@ -284,9 +276,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
   }): Promise<void> {
     const modalConfig = new ModalConfig({
       headerColor: ModalHeaderColor.Green,
-      title: html`
-        Donation received
-      `,
+      title: html` Donation received `,
       processingImageMode: 'complete',
       showProcessingIndicator: true,
     });

package/src/payment-flow-handlers/handlers/applepay-flow-handler.ts

@@ -15,7 +15,8 @@ export interface ApplePayFlowHandlerInterface {
 }
 
 export class ApplePayFlowHandler
-  implements ApplePayFlowHandlerInterface, ApplePaySessionDataSourceDelegate {
+  implements ApplePayFlowHandlerInterface, ApplePaySessionDataSourceDelegate
+{
   private donationFlowModalManager: DonationFlowModalManagerInterface;
 
   private braintreeManager: BraintreeManagerInterface;

package/src/payment-flow-handlers/handlers/creditcard-flow-handler.ts

@@ -11,6 +11,7 @@ import {
 import { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';
 import { HostedFieldName } from '../../braintree-manager/payment-providers/credit-card/hosted-field-container';
 import { BadgedInput } from '../../form-elements/badged-input';
+import { BraintreeError } from '../../@types/braintree-web';
 
 export interface CreditCardFlowHandlerInterface {
   /**
@@ -146,7 +147,7 @@ export class CreditCardFlowHandler implements CreditCardFlowHandlerInterface {
     try {
       hostedFieldsResponse = await handler?.tokenizeHostedFields();
     } catch (error) {
-      this.handleHostedFieldTokenizationError(error);
+      this.handleHostedFieldTokenizationError(error as BraintreeError);
       return;
     }
 

package/src/payment-flow-handlers/handlers/googlepay-flow-handler.ts

@@ -25,9 +25,8 @@ export class GooglePayFlowHandler implements GooglePayFlowHandlerInterface {
 
   private braintreeManager: BraintreeManagerInterface;
 
-  private emitter: Emitter<GooglePayFlowHandlerEvents> = createNanoEvents<
-    GooglePayFlowHandlerEvents
-  >();
+  private emitter: Emitter<GooglePayFlowHandlerEvents> =
+    createNanoEvents<GooglePayFlowHandlerEvents>();
 
   constructor(options: {
     braintreeManager: BraintreeManagerInterface;
@@ -67,9 +66,8 @@ export class GooglePayFlowHandler implements GooglePayFlowHandlerInterface {
 
     try {
       const paymentData = await handler.paymentsClient.loadPaymentData(paymentDataRequest);
-      const result: braintree.GooglePaymentTokenizePayload = await instance.parseResponse(
-        paymentData,
-      );
+      const result: braintree.GooglePaymentTokenizePayload =
+        await instance.parseResponse(paymentData);
 
       const billingInfo = paymentData.paymentMethodData.info?.billingAddress;
       const name = billingInfo?.name;

package/src/payment-flow-handlers/handlers/paypal-flow-handler.ts

@@ -69,7 +69,8 @@ export interface PayPalFlowHandlerEvents {
  * @implements {PayPalButtonDataSourceDelegate}
  */
 export class PayPalFlowHandler
-  implements PayPalFlowHandlerInterface, PayPalButtonDataSourceDelegate {
+  implements PayPalFlowHandlerInterface, PayPalButtonDataSourceDelegate
+{
   private upsellButtonDataSourceContainer?: UpsellDataSourceContainer;
 
   private buttonDataSource?: PayPalButtonDataSourceInterface;
@@ -120,10 +121,10 @@ export class PayPalFlowHandler
    * Once we have the dataSource & payload, we ask patron to confirm donation.
    * Once confirmed, we move forward to: `payPalPaymentConfirmed`
    */
-  async payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface,
-    payload: paypal.TokenizePayload
-    ): Promise<void> {
-
+  async payPalPaymentAuthorized(
+    dataSource: PayPalButtonDataSourceInterface,
+    payload: paypal.TokenizePayload,
+  ): Promise<void> {
     const { donationType, total } = dataSource.donationInfo;
     this.donationFlowModalManager.showConfirmationStepModal({
       donationType,
@@ -135,7 +136,7 @@ export class PayPalFlowHandler
       cancelDonationCB: () => {
         this.donationFlowModalManager.closeModal();
         this.payPalPaymentCancelled(dataSource, {});
-      }
+      },
     });
   }
 

package/src/payment-flow-handlers/handlers/venmo-flow-handler.ts

@@ -9,6 +9,7 @@ import {
   VenmoRestorationStateHandler,
 } from './venmo-restoration-state-handler';
 import { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';
+import { BraintreeError } from '../../@types/braintree-web';
 
 export interface VenmoFlowHandlerInterface {
   startup(): Promise<void>;
@@ -81,7 +82,7 @@ export class VenmoFlowHandler implements VenmoFlowHandlerInterface {
       this.handleTokenizationResult(result, contactInfo, donationInfo);
     } catch (tokenizeError) {
       this.restorationStateHandler.clearState();
-      this.handleTokenizationError(tokenizeError);
+      this.handleTokenizationError(tokenizeError as BraintreeError);
       this.donationFlowModalManager.showErrorModal({
         message: `There was a problem loading your donation information. Please try again.`,
       });