@adelant/react-mautic-forms
Version:
React components for Mautic form integration
302 lines (299 loc) • 9.48 kB
JavaScript
"use client"
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
if (typeof require !== "undefined")
return require.apply(this, arguments);
throw Error('Dynamic require of "' + x + '" is not supported');
});
// src/hooks/useMauticForm.ts
import { useState } from "react";
var useMauticForm = ({
formId,
formName,
action,
successCallback,
errorCallback
}) => {
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
const form = e.target;
const formData = new FormData(form);
try {
const response = await fetch(`${action}?formId=${formId}`, {
method: "POST",
body: formData,
headers: {
Accept: "application/json",
"X-Requested-With": "XMLHttpRequest"
},
credentials: "include"
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
successCallback?.(formData);
form.reset();
} catch (err) {
const errorObj = err instanceof Error ? err : new Error("Unknown error occurred");
setError(errorObj);
errorCallback?.(errorObj, formData);
} finally {
setIsSubmitting(false);
}
};
return {
handleSubmit,
isSubmitting,
error
};
};
// src/components/MauticForm.tsx
import { jsxDEV } from "react/jsx-dev-runtime";
var MauticForm = ({
formId,
formName,
action,
children,
successCallback,
errorCallback,
className
}) => {
const { handleSubmit, isSubmitting, error } = useMauticForm({
formId,
formName,
action,
successCallback,
errorCallback
});
return /* @__PURE__ */ jsxDEV("div", {
id: `mauticform_wrapper_${formName}`,
className: `mauticform_wrapper ${className || ""}`,
children: /* @__PURE__ */ jsxDEV("form", {
autoComplete: "true",
method: "post",
onSubmit: handleSubmit,
id: `mauticform_${formName}`,
"data-mautic-form": formName,
encType: "multipart/form-data",
"aria-busy": isSubmitting,
children: [
/* @__PURE__ */ jsxDEV("div", {
className: "mauticform-innerform",
children: /* @__PURE__ */ jsxDEV("div", {
className: "mauticform-page-wrapper mauticform-page-1",
"data-mautic-form-page": "1",
children
}, undefined, false, undefined, this)
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV("div", {
className: "mauticform-error",
id: `mauticform_${formName}_error`,
children: error && error.message
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV("div", {
className: "mauticform-message",
id: `mauticform_${formName}_message`
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV("input", {
type: "hidden",
name: "mauticform[formId]",
id: `mauticform_${formName}_id`,
value: formId
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV("input", {
type: "hidden",
name: "mauticform[return]",
id: `mauticform_${formName}_return`,
value: ""
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV("input", {
type: "hidden",
name: "mauticform[formName]",
id: `mauticform_${formName}_name`,
value: formName
}, undefined, false, undefined, this)
]
}, undefined, true, undefined, this)
}, undefined, false, undefined, this);
};
// src/components/MauticFormScript.tsx
import { useEffect, useState as useState2 } from "react";
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
var MauticFormScript = ({
mauticDomain,
mauticFormURL
}) => {
const [NextScript, setNextScript] = useState2(null);
useEffect(() => {
import("next/script").then((mod) => {
setNextScript(() => mod.default || mod);
}).catch(() => {
setNextScript(null);
});
if (typeof window !== "undefined") {
window.MauticSDKLoaded = false;
window.MauticLang = {
submittingMessage: "Loading..."
};
const initMautic = () => {
if (window.MauticSDK !== undefined) {
window.MauticSDK.onLoad();
}
};
initMautic();
}
return () => {
if (typeof window !== "undefined") {
delete window.MauticSDKLoaded;
delete window.MauticLang;
}
};
}, []);
const fullMauticFormURL = mauticFormURL || `${mauticDomain}/media/js/mautic-form.js`;
const handleScriptLoad = () => {
if (typeof window !== "undefined" && !window.MauticSDKLoaded) {
window.MauticSDKLoaded = true;
window.MauticDomain = mauticDomain;
if (window.MauticSDK !== undefined) {
window.MauticSDK.onLoad();
}
}
};
if (NextScript) {
return /* @__PURE__ */ jsxDEV2(NextScript, {
id: "mautic-form-script",
src: fullMauticFormURL,
strategy: "afterInteractive",
onLoad: handleScriptLoad,
async: true
}, undefined, false, undefined, this);
}
return /* @__PURE__ */ jsxDEV2("script", {
id: "mautic-form-script",
src: fullMauticFormURL,
async: true,
onLoad: handleScriptLoad
}, undefined, false, undefined, this);
};
// src/components/MauticInput.tsx
import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
var MauticInput = ({
formName,
name,
label,
type = "text",
required = false,
validate,
validationType,
className = "",
errorMessage = "Required",
placeholder = "",
autocomplete = "off",
component,
...props
}) => {
const fieldId = `mauticform_${formName}_${name}`;
const inputId = `mauticform_input_${formName}_${name}`;
const shouldRenderTextarea = component === "textarea" || type === "textarea";
return /* @__PURE__ */ jsxDEV3("div", {
id: fieldId,
className: `mauticform-row mauticform-${type} ${required ? "mauticform-required" : ""} ${className}`,
"data-validate": validate,
"data-validation-type": validationType,
children: [
label && /* @__PURE__ */ jsxDEV3("label", {
id: `mauticform_label_${formName}_${name}`,
htmlFor: inputId,
className: "mauticform-label mb-2 block text-sm font-medium",
children: label
}, undefined, false, undefined, this),
shouldRenderTextarea ? /* @__PURE__ */ jsxDEV3("textarea", {
id: inputId,
name: `mauticform[${name}]`,
className: `mauticform-input w-full rounded-md border px-3 py-2 ${className}`,
placeholder,
required,
"aria-required": required,
...props
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("input", {
id: inputId,
name: `mauticform[${name}]`,
type,
className: `mauticform-input w-full rounded-md border px-3 py-2 ${className}`,
placeholder,
autoComplete: autocomplete,
required,
"aria-required": required,
...props
}, undefined, false, undefined, this),
/* @__PURE__ */ jsxDEV3("span", {
className: "mauticform-errormsg mt-1 text-sm text-red-500",
style: { display: "none" },
children: errorMessage
}, undefined, false, undefined, this)
]
}, undefined, true, undefined, this);
};
// src/components/MauticSubmitButton.tsx
import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
var MauticSubmitButton = ({
className = "",
children = "Submit",
formName,
...props
}) => /* @__PURE__ */ jsxDEV4("button", {
id: `mauticform_${formName}_submit`,
className: `${className}`,
name: "mauticform[submit]",
type: "submit",
value: "1",
...props,
children
}, undefined, false, undefined, this);
// src/components/MauticTracking.tsx
import { useEffect as useEffect2, useState as useState3 } from "react";
import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
var MauticTracking = ({
mauticURL,
tags,
enabled
}) => {
const [NextScript, setNextScript] = useState3(null);
useEffect2(() => {
import("next/script").then((mod) => setNextScript(() => mod.default || mod)).catch(() => setNextScript(null));
}, []);
const shouldTrack = enabled !== undefined ? enabled : false;
if (!shouldTrack)
return null;
const scriptContent = `
(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','${mauticURL}','mt');
mt('send', 'pageview', { "tags": "${tags}" });
`;
if (NextScript) {
return /* @__PURE__ */ jsxDEV5(NextScript, {
id: "mautic-tracking",
strategy: "afterInteractive",
dangerouslySetInnerHTML: { __html: scriptContent }
}, undefined, false, undefined, this);
}
return /* @__PURE__ */ jsxDEV5("script", {
id: "mautic-tracking",
dangerouslySetInnerHTML: { __html: scriptContent }
}, undefined, false, undefined, this);
};
export {
useMauticForm,
MauticTracking,
MauticSubmitButton,
MauticInput,
MauticFormScript,
MauticForm
};