match filename convention

Author: MichaelT372

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 "./stripeFinancialConnections";
+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 "./stripeFinancialConnections";
+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/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/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 "./stripeFinancialConnections";
+export * from "./stripe-financial-connections";
 export * from "./give-by-select";
 export * from "./url-params-to-body-attrs";
 export * from "./exit-intent-lightbox";