@marvalt/madapter 2.3.2 → 2.3.4

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, createContext, useMemo, useContext } from 'react';
+import React, { useRef, useEffect, useState, useMemo, useCallback, createContext, useContext } from 'react';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 
 /**
@@ -102,11 +102,14 @@ class MauticClient {
         if (submission.formName) {
             formParams.append('mauticform[formName]', submission.formName);
         }
+        // Merge custom headers (e.g., Turnstile token) with default headers
+        const headers = {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            ...(submission.headers || {}),
+        };
         return this.makeRequest(endpoint, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded'
-            },
+            headers,
             body: formParams.toString(),
         });
     }
@@ -2168,8 +2171,8 @@ const MauticForm = ({ formId, title, description, className = '', form, onSubmit
     const [showSuccessMessage, setShowSuccessMessage] = useState(false);
     const [turnstileToken, setTurnstileToken] = useState(null);
     const submitMutation = useMauticFormSubmission();
-    // Get Turnstile site key from environment
-    const getTurnstilesiteKey = () => {
+    // Get Turnstile site key from environment - memoized to prevent re-renders
+    const turnstilesiteKey = useMemo(() => {
         try {
             // @ts-ignore - import.meta is a Vite-specific global
             if (typeof import.meta !== 'undefined' && import.meta.env) {
@@ -2183,8 +2186,27 @@ const MauticForm = ({ formId, title, description, className = '', form, onSubmit
             // import.meta not available
         }
         return undefined;
-    };
-    const turnstilesiteKey = getTurnstilesiteKey();
+    }, []); // Empty deps - site key doesn't change during runtime
+    // Memoize Turnstile callbacks to prevent widget re-renders
+    const handleTurnstileSuccess = useCallback((token) => {
+        setTurnstileToken(token);
+        // Clear any turnstile error
+        setErrors(prev => {
+            if (!prev._turnstile)
+                return prev;
+            const next = { ...prev };
+            delete next._turnstile;
+            return next;
+        });
+    }, []);
+    const handleTurnstileError = useCallback(() => {
+        setTurnstileToken(null);
+        setErrors(prev => ({ ...prev, _turnstile: 'Verification failed. Please try again.' }));
+    }, []);
+    const handleTurnstileExpire = useCallback(() => {
+        setTurnstileToken(null);
+        setErrors(prev => ({ ...prev, _turnstile: 'Verification expired. Please verify again.' }));
+    }, []);
     useEffect(() => {
         if (!form) {
             console.warn(`Form ${formId} not found`);
@@ -2357,23 +2379,7 @@ const MauticForm = ({ formId, title, description, className = '', form, onSubmit
     return (jsxRuntimeExports.jsxs("form", { className: `mautic-form ${className}`, onSubmit: handleSubmit, children: [(title || form.name) && (jsxRuntimeExports.jsxs("div", { className: "form-header", children: [jsxRuntimeExports.jsx("h3", { children: title || form.name }), (description || form.description) && (jsxRuntimeExports.jsx("p", { className: "form-description", children: description || form.description }))] })), jsxRuntimeExports.jsx("div", { className: "form-fields", children: form.fields
                     // Filter out button/submit from field group; render them in actions
                     .filter((field) => field.type !== 'button' && field.alias !== 'submit')
-                    .map((field) => (jsxRuntimeExports.jsxs("div", { className: `form-field form-field-${field.type}`, children: [field.showLabel !== false && (jsxRuntimeExports.jsxs("label", { htmlFor: field.alias, className: "field-label", children: [field.label, field.isRequired && jsxRuntimeExports.jsx("span", { className: "required", children: "*" })] })), renderField(field), field.properties?.helpText && (jsxRuntimeExports.jsx("p", { className: "field-help", children: field.properties.helpText })), errors[field.alias] && (jsxRuntimeExports.jsx("p", { className: "field-error", children: errors[field.alias] }))] }, field.id))) }), turnstilesiteKey && (jsxRuntimeExports.jsxs("div", { className: "form-turnstile", children: [jsxRuntimeExports.jsx(TurnstileWidget, { siteKey: turnstilesiteKey, onSuccess: (token) => {
-                            setTurnstileToken(token);
-                            // Clear any turnstile error
-                            if (errors._turnstile) {
-                                setErrors(prev => {
-                                    const next = { ...prev };
-                                    delete next._turnstile;
-                                    return next;
-                                });
-                            }
-                        }, onError: () => {
-                            setTurnstileToken(null);
-                            setErrors(prev => ({ ...prev, _turnstile: 'Verification failed. Please try again.' }));
-                        }, onExpire: () => {
-                            setTurnstileToken(null);
-                            setErrors(prev => ({ ...prev, _turnstile: 'Verification expired. Please verify again.' }));
-                        }, theme: "auto", size: "normal" }), errors._turnstile && (jsxRuntimeExports.jsx("p", { className: "field-error turnstile-error", children: errors._turnstile }))] })), jsxRuntimeExports.jsx("div", { className: "form-actions", children: jsxRuntimeExports.jsx("button", { type: "submit", disabled: isSubmitting || (!!turnstilesiteKey && !turnstileToken), className: "submit-button", children: isSubmitting ? 'Submitting...' : 'Submit' }) }), submitMutation.error && (jsxRuntimeExports.jsx("div", { className: "form-error", children: jsxRuntimeExports.jsx("p", { children: "There was an error submitting the form. Please try again." }) }))] }));
+                    .map((field) => (jsxRuntimeExports.jsxs("div", { className: `form-field form-field-${field.type}`, children: [field.showLabel !== false && (jsxRuntimeExports.jsxs("label", { htmlFor: field.alias, className: "field-label", children: [field.label, field.isRequired && jsxRuntimeExports.jsx("span", { className: "required", children: "*" })] })), renderField(field), field.properties?.helpText && (jsxRuntimeExports.jsx("p", { className: "field-help", children: field.properties.helpText })), errors[field.alias] && (jsxRuntimeExports.jsx("p", { className: "field-error", children: errors[field.alias] }))] }, field.id))) }), turnstilesiteKey && (jsxRuntimeExports.jsxs("div", { className: "form-turnstile", children: [jsxRuntimeExports.jsx(TurnstileWidget, { siteKey: turnstilesiteKey, onSuccess: handleTurnstileSuccess, onError: handleTurnstileError, onExpire: handleTurnstileExpire, theme: "auto", size: "normal" }), errors._turnstile && (jsxRuntimeExports.jsx("p", { className: "field-error turnstile-error", children: errors._turnstile }))] })), jsxRuntimeExports.jsx("div", { className: "form-actions", children: jsxRuntimeExports.jsx("button", { type: "submit", disabled: isSubmitting || (!!turnstilesiteKey && !turnstileToken), className: "submit-button", children: isSubmitting ? 'Submitting...' : 'Submit' }) }), submitMutation.error && (jsxRuntimeExports.jsx("div", { className: "form-error", children: jsxRuntimeExports.jsx("p", { children: "There was an error submitting the form. Please try again." }) }))] }));
 };
 
 const MauticTracking = ({ enabled, mauticUrl, proxyUrl, children }) => {