Replace Plaid with Stripe Financial Connections component + fix issue with submit button not resetting when user cancels payment

.github/copilot-instructions.md

@@ -26,7 +26,7 @@
 - Tip: when debugging, `?debug=true` sets body `data-engrid-debug`, unlocking debug panels and conditional UI.
 
 ## When in Doubt
-- Search in `packages/scripts/src` before creating new utilities; most EN behaviours already exist (currency, remember-me, plaid, vgs).
+- Search in `packages/scripts/src` before creating new utilities; most EN behaviours already exist (currency, remember-me, stripe financial connections, vgs).
 - Do not hand-edit files under any `dist/` directory—run the relevant build instead.
 - Follow repo Prettier config (`.prettierrc.js`); formatting is enforced even though there are no automated tests.
-- Document new options by updating the interfaces in `packages/scripts/src/interfaces` and exposing them through `OptionsDefaults`.
+- Document new options by updating the interfaces in `packages/scripts/src/interfaces` and exposing them through `OptionsDefaults`.

packages/scripts/dist/app.js

@@ -1,5 +1,5 @@
 import { DonationAmount, DonationFrequency, EnForm, ProcessingFees, Country, } from "./events";
-import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, Plaid, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, FrequencyUpsell, CustomPremium, PreferredPaymentMethod, } from ".";
+import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, StripeFinancialConnections, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, FrequencyUpsell, CustomPremium, PreferredPaymentMethod, } from ".";
 export class App extends ENGrid {
     constructor(options) {
         super();
@@ -262,9 +262,7 @@ export class App extends ENGrid {
         new LiveFrequency();
         // Universal Opt In
         new UniversalOptIn();
-        // Plaid
-        if (this.options.Plaid)
-            new Plaid();
+        new StripeFinancialConnections();
         //Exit Intent Lightbox
         new ExitIntentLightbox();
         new UrlParamsToBodyAttrs();

packages/scripts/dist/index.d.ts

@@ -63,7 +63,7 @@ export * from "./digital-wallets";
 export * from "./mobile-cta";
 export * from "./live-frequency";
 export * from "./universal-opt-in";
-export * from "./plaid";
+export * from "./stripe-financial-connections";
 export * from "./give-by-select";
 export * from "./url-params-to-body-attrs";
 export * from "./exit-intent-lightbox";

packages/scripts/dist/index.js

@@ -63,7 +63,7 @@ export * from "./digital-wallets";
 export * from "./mobile-cta";
 export * from "./live-frequency";
 export * from "./universal-opt-in";
-export * from "./plaid";
+export * from "./stripe-financial-connections";
 export * from "./give-by-select";
 export * from "./url-params-to-body-attrs";
 export * from "./exit-intent-lightbox";

packages/scripts/dist/interfaces/options.d.ts

@@ -82,7 +82,6 @@ export interface Options {
     }[];
     PageLayouts?: string[];
     CountryDisable?: string[];
-    Plaid?: boolean;
     Placeholders?: false | {
         [key: string]: string;
     };

packages/scripts/dist/interfaces/options.js

@@ -31,7 +31,6 @@ export const OptionsDefaults = {
     TidyContact: false,
     RegionLongFormat: "",
     CountryDisable: [],
-    Plaid: false,
     Placeholders: false,
     ENValidators: false,
     MobileCTA: false,

packages/scripts/dist/stripe-financial-connections.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This component improves EN's implementation of Stripe Financial Connections.
+ * Enhancements:
+ *  - When the modal is closed, it re-enables the submit button.
+ */
+export declare class StripeFinancialConnections {
+    private stripeModalOpen;
+    private logger;
+    constructor();
+    isStripeModalNode(node: Node): boolean;
+    isStripeModalNodeWIthIframe(node: Node): boolean;
+    onStripeModalOpen(): void;
+    onStripeModalClose(): void;
+}

packages/scripts/dist/stripe-financial-connections.js

@@ -0,0 +1,48 @@
+/**
+ * This component improves EN's implementation of Stripe Financial Connections.
+ * Enhancements:
+ *  - When the modal is closed, it re-enables the submit button.
+ */
+import { ENGrid, EngridLogger } from ".";
+export class StripeFinancialConnections {
+    constructor() {
+        this.stripeModalOpen = false;
+        this.logger = new EngridLogger("Stripe Financial Connections", "black", "pink", "🏛️");
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (!this.stripeModalOpen && this.isStripeModalNodeWIthIframe(node)) {
+                        this.logger.log("Stripe Financial Connections modal opened.");
+                        this.onStripeModalOpen();
+                    }
+                });
+                mutation.removedNodes.forEach((node) => {
+                    if (this.stripeModalOpen && this.isStripeModalNode(node)) {
+                        this.logger.log("Stripe Financial Connections modal closed.");
+                        this.onStripeModalClose();
+                    }
+                });
+            });
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    isStripeModalNode(node) {
+        return (node instanceof HTMLElement &&
+            node.hasAttribute("data-react-aria-top-layer"));
+    }
+    isStripeModalNodeWIthIframe(node) {
+        return !!(this.isStripeModalNode(node) &&
+            node instanceof HTMLElement &&
+            node.querySelector('iframe[src*="js.stripe.com"]'));
+    }
+    onStripeModalOpen() {
+        this.stripeModalOpen = true;
+    }
+    onStripeModalClose() {
+        this.stripeModalOpen = false;
+        ENGrid.enableSubmit();
+    }
+}

packages/scripts/dist/supporter-hub.js

@@ -34,7 +34,7 @@ export class SupporterHub {
                 }
             });
         });
-        // Start observing the Link ID #plaid-link-button
+        // Start observing the Link ID
         observer.observe(form, {
             childList: true,
             subtree: true,

packages/scripts/src/app.ts

@@ -64,7 +64,7 @@ import {
   MobileCTA,
   LiveFrequency,
   UniversalOptIn,
-  Plaid,
+  StripeFinancialConnections,
   GiveBySelect,
   UrlParamsToBodyAttrs,
   ExitIntentLightbox,
@@ -433,8 +433,7 @@ export class App extends ENGrid {
     // Universal Opt In
     new UniversalOptIn();
 
-    // Plaid
-    if (this.options.Plaid) new Plaid();
+    new StripeFinancialConnections();
 
     //Exit Intent Lightbox
     new ExitIntentLightbox();

packages/scripts/src/index.ts

@@ -79,7 +79,7 @@ export * from "./digital-wallets";
 export * from "./mobile-cta";
 export * from "./live-frequency";
 export * from "./universal-opt-in";
-export * from "./plaid";
+export * from "./stripe-financial-connections";
 export * from "./give-by-select";
 export * from "./url-params-to-body-attrs";
 export * from "./exit-intent-lightbox";

packages/scripts/src/interfaces/options.ts

@@ -85,7 +85,6 @@ export interface Options {
   MobileCTA?: false | { pageType: string; label: string }[];
   PageLayouts?: string[];
   CountryDisable?: string[];
-  Plaid?: boolean;
   Placeholders?: false | { [key: string]: string };
   ENValidators?: boolean;
   // CustomCurrency is either false or an object with the following properties:
@@ -112,9 +111,11 @@ export interface Options {
           };
           ariaLabel?: string;
           placeholder?: string;
-          validCardBrands?: {
-            type: string;
-          }[] | null;
+          validCardBrands?:
+            | {
+                type: string;
+              }[]
+            | null;
         };
         "transaction.ccvv"?: {
           showCardIcon?: boolean | object;
@@ -219,7 +220,6 @@ export const OptionsDefaults: Options = {
   TidyContact: false,
   RegionLongFormat: "",
   CountryDisable: [],
-  Plaid: false,
   Placeholders: false,
   ENValidators: false,
   MobileCTA: false,

packages/scripts/src/stripe-financial-connections.ts

@@ -0,0 +1,66 @@
+/**
+ * This component improves EN's implementation of Stripe Financial Connections.
+ * Enhancements:
+ *  - When the modal is closed, it re-enables the submit button.
+ */
+
+import { ENGrid, EngridLogger } from ".";
+
+export class StripeFinancialConnections {
+  private stripeModalOpen: boolean = false;
+  private logger: EngridLogger = new EngridLogger(
+    "Stripe Financial Connections",
+    "black",
+    "pink",
+    "🏛️"
+  );
+
+  constructor() {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (!this.stripeModalOpen && this.isStripeModalNodeWIthIframe(node)) {
+            this.logger.log("Stripe Financial Connections modal opened.");
+            this.onStripeModalOpen();
+          }
+        });
+
+        mutation.removedNodes.forEach((node) => {
+          if (this.stripeModalOpen && this.isStripeModalNode(node)) {
+            this.logger.log("Stripe Financial Connections modal closed.");
+            this.onStripeModalClose();
+          }
+        });
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  isStripeModalNode(node: Node): boolean {
+    return (
+      node instanceof HTMLElement &&
+      node.hasAttribute("data-react-aria-top-layer")
+    );
+  }
+
+  isStripeModalNodeWIthIframe(node: Node): boolean {
+    return !!(
+      this.isStripeModalNode(node) &&
+      node instanceof HTMLElement &&
+      node.querySelector('iframe[src*="js.stripe.com"]')
+    );
+  }
+
+  onStripeModalOpen() {
+    this.stripeModalOpen = true;
+  }
+
+  onStripeModalClose() {
+    this.stripeModalOpen = false;
+    ENGrid.enableSubmit();
+  }
+}

packages/scripts/src/supporter-hub.ts

@@ -44,7 +44,7 @@ export class SupporterHub {
         }
       });
     });
-    // Start observing the Link ID #plaid-link-button
+    // Start observing the Link ID
     observer.observe(form, {
       childList: true,
       subtree: true,

packages/styles/src/_engrid-components-layout.scss

@@ -145,8 +145,7 @@
   .i8-hide .en__field:nth-of-type(8),
   .i9-hide .en__field:nth-of-type(9),
   .i10-hide .en__field:nth-of-type(10),
-  .i11-hide .en__field:nth-of-type(11),
-  .en__field--plaid {
+  .i11-hide .en__field:nth-of-type(11) {
     background-color: #ff00001a !important;
   }
 
@@ -200,8 +199,7 @@ body:not(#en__pagebuilder):not([data-engrid-debug]) {
   .i8-hide .en__field:not(.en__field--validationFailed):nth-of-type(8),
   .i9-hide .en__field:not(.en__field--validationFailed):nth-of-type(9),
   .i10-hide .en__field:not(.en__field--validationFailed):nth-of-type(10),
-  .i11-hide .en__field:not(.en__field--validationFailed):nth-of-type(11),
-  .en__field--plaid{
+  .i11-hide .en__field:not(.en__field--validationFailed):nth-of-type(11) {
     display: none;
   }