WEBDEV-9054: Migrate the donation form elements and controller into elements

package.json

@@ -32,9 +32,11 @@
     "ghpages:build": "wireit"
   },
   "dependencies": {
+    "@internetarchive/analytics-manager": "^0.1.5",
     "@internetarchive/ia-clearable-text-input": "^1.1.1",
     "@internetarchive/ia-dropdown": "^2.2.0",
     "@internetarchive/lazy-loader-service": "^0.2.0",
+    "@internetarchive/modal-manager": "^2.0.6",
     "@internetarchive/promised-singleton": "0.3.0-alpha.1",
     "@lit/localize": "^0.12.2",
     "@types/applepayjs": "^14.0.9",

src/elements/ia-donation-form/analytics.ts

@@ -0,0 +1,11 @@
+/**
+ * The analytics hooks the controller hands down to the flow handlers, so they
+ * can log events in the donation form's category without knowing about the
+ * analytics manager.
+ */
+export interface DonationEventLoggerInterface {
+  /** A sampled event in the form's own category */
+  logEvent(action: string, label?: string): void;
+  /** An unsampled event in the `DonationFlow` category, for the money-moving steps */
+  logDonationFlowEvent(action: string, label?: string): void;
+}

src/elements/ia-donation-form/braintree/payment-providers/paypal/paypal.ts

@@ -64,6 +64,10 @@ export class PayPalHandler implements PayPalHandlerInterface {
       paypalInstance,
     });
 
+    // Venmo has its own button, so keep it out of the PayPal one. The
+    // funding constants come from the PayPal script once it has loaded.
+    const venmoFunding = window.paypal?.FUNDING?.VENMO;
+
     this.paypalButtonGenerator.render(
       {
         env,
@@ -72,9 +76,7 @@ export class PayPalHandler implements PayPalHandlerInterface {
         onAuthorize: dataSource.onAuthorize.bind(dataSource),
         onCancel: dataSource.onCancel.bind(dataSource),
         onError: dataSource.onError.bind(dataSource),
-        funding: {
-          disallowed: [window.paypal.FUNDING.VENMO],
-        },
+        funding: venmoFunding ? { disallowed: [venmoFunding] } : undefined,
       },
       params.selector,
     );

src/elements/ia-donation-form/element-names.test.ts

@@ -2,6 +2,17 @@ import { describe, expect, test } from 'vitest';
 
 import './form-elements/ia-donation-section';
 import './form-elements/ia-donation-edit-donation';
+import './form-elements/ia-donation-badged-input';
+import './form-elements/ia-donation-header';
+import './form-elements/ia-donation-payment-selector';
+import './form-elements/ia-donation-summary';
+import './form-elements/ia-donation-total-amount';
+import './form-elements/contact-form/ia-donation-contact-form';
+import './modals/ia-donation-confirm-modal';
+import './modals/ia-donation-error-modal-content';
+import './modals/ia-donation-upsell-modal-content';
+import './ia-donation-form';
+import './ia-donation-form-controller';
 
 /**
  * Custom elements share one global registry, so the donation form's parts are
@@ -10,11 +21,36 @@ import './form-elements/ia-donation-edit-donation';
  * migration, so none of those names can be claimed here.
  */
 const NAMESPACED_ELEMENTS = [
+  'ia-donation-form',
+  'ia-donation-form-controller',
   'ia-donation-section',
   'ia-donation-edit-donation',
+  'ia-donation-badged-input',
+  'ia-donation-header',
+  'ia-donation-payment-selector',
+  'ia-donation-summary',
+  'ia-donation-total-amount',
+  'ia-donation-contact-form',
+  'ia-donation-confirm-modal',
+  'ia-donation-error-modal-content',
+  'ia-donation-upsell-modal-content',
 ];
 
-const NAMES_TO_AVOID = ['donation-form-section', 'donation-form-edit-donation'];
+const NAMES_TO_AVOID = [
+  'donation-form',
+  'donation-form-controller',
+  'donation-form-section',
+  'donation-form-edit-donation',
+  'badged-input',
+  'donation-form-header',
+  'payment-selector',
+  'donation-summary',
+  'donation-form-total-amount',
+  'contact-form',
+  'confirm-donation-modal',
+  'donation-form-error-modal-content',
+  'upsell-modal-content',
+];
 
 describe('donation form element names', () => {
   test.each(NAMESPACED_ELEMENTS)('registers %s', (tag) => {