@internetarchive/donation-form 0.5.8-alpha.3 → 0.5.9-alpha.1

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

@@ -9,12 +9,13 @@ import { PaymentClientsInterface } from './payment-clients';
 import { GooglePayHandler } from './payment-providers/google-pay';
 import { BraintreeManagerInterface, HostingEnvironment } from './braintree-interfaces';
 import { HostedFieldConfiguration } from './payment-providers/credit-card/hosted-field-configuration';
-import { PaymentProvidersInterface } from './payment-providers-interface';
+import { PaymentProvidersEvents, PaymentProvidersInterface } from './payment-providers-interface';
 import { ApplePayHandlerInterface } from './payment-providers/apple-pay/apple-pay-interface';
 import { CreditCardHandlerInterface } from './payment-providers/credit-card/credit-card-interface';
 import { VenmoHandlerInterface } from './payment-providers/venmo-interface';
 import { PayPalHandlerInterface } from './payment-providers/paypal/paypal-interface';
 import { GooglePayHandlerInterface } from './payment-providers/google-pay-interface';
+import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
 
 /**
  * The PaymentProviders class contains the IA-specific handlers for each of the
@@ -28,14 +29,31 @@ import { GooglePayHandlerInterface } from './payment-providers/google-pay-interf
  * @implements {PaymentProvidersInterface}
  */
 export class PaymentProviders implements PaymentProvidersInterface {
+  on<E extends keyof PaymentProvidersEvents>(
+    event: E,
+    callback: PaymentProvidersEvents[E],
+  ): Unsubscribe {
+    return this.emitter.on(event, callback);
+  }
+
   creditCardHandler = new PromisedSingleton<CreditCardHandlerInterface>({
     generator: async (): Promise<CreditCardHandlerInterface> => {
       const client = await this.paymentClients.hostedFields.get();
-      return new CreditCardHandler({
+      const handler = new CreditCardHandler({
         braintreeManager: this.braintreeManager,
         hostedFieldClient: client,
         hostedFieldConfig: this.hostedFieldConfig,
       });
+
+      handler.on('hostedFieldsRetry', (retryNumber: number) => {
+        this.emitter.emit('hostedFieldsRetry', retryNumber);
+      });
+
+      handler.on('hostedFieldsFailed', (error: unknown) => {
+        this.emitter.emit('hostedFieldsFailed', error);
+      });
+
+      return handler;
     },
   });
 
@@ -109,6 +127,8 @@ export class PaymentProviders implements PaymentProvidersInterface {
 
   private paymentClients: PaymentClientsInterface;
 
+  private emitter = createNanoEvents<PaymentProvidersEvents>();
+
   constructor(options: {
     braintreeManager: BraintreeManagerInterface;
     paymentClients: PaymentClientsInterface;

package/src/donation-form-controller.ts

@@ -109,11 +109,11 @@ export class DonationFormController extends LitElement {
 
   @query('donation-form') private donationForm!: DonationForm;
 
-  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLInputElement;
+  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLDivElement;
 
-  @query('#braintree-cvv') private braintreeCVVInput!: HTMLInputElement;
+  @query('#braintree-cvv') private braintreeCVVInput!: HTMLDivElement;
 
-  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLInputElement;
+  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLDivElement;
 
   @query('#braintree-error-message') private braintreeErrorMessage!: HTMLDivElement;
 
@@ -195,6 +195,20 @@ export class DonationFormController extends LitElement {
         loggedInUser: this.loggedInUser,
         origin: this.origin,
       });
+
+      this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {
+        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {
+          detail: { retryNumber },
+        });
+        this.dispatchEvent(event);
+      });
+
+      this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {
+        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {
+          detail: { error },
+        });
+        this.dispatchEvent(event);
+      });
     }
   }
 

package/src/util/promisedSleep.ts

@@ -0,0 +1,3 @@
+export function promisedSleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}