@adelant/react-mautic-forms
Version:
React components for Mautic form integration
326 lines (322 loc) • 10.6 kB
JavaScript
"use client"
var __defProp = Object.defineProperty;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __moduleCache = /* @__PURE__ */ new WeakMap;
var __toCommonJS = (from) => {
var entry = __moduleCache.get(from), desc;
if (entry)
return entry;
entry = __defProp({}, "__esModule", { value: true });
if (from && typeof from === "object" || typeof from === "function")
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
}));
__moduleCache.set(from, entry);
return entry;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, {
get: all[name],
enumerable: true,
configurable: true,
set: (newValue) => all[name] = () => newValue
});
};
// src/index.ts
var exports_src = {};
__export(exports_src, {
useMauticForm: () => useMauticForm,
MauticTracking: () => MauticTracking,
MauticSubmitButton: () => MauticSubmitButton,
MauticInput: () => MauticInput,
MauticFormScript: () => MauticFormScript,
MauticForm: () => MauticForm
});
module.exports = __toCommonJS(exports_src);
// src/hooks/useMauticForm.ts
var import_react = require("react");
var useMauticForm = ({
formId,
formName,
action,
successCallback,
errorCallback
}) => {
const [isSubmitting, setIsSubmitting] = import_react.useState(false);
const [error, setError] = import_react.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
var jsx_dev_runtime = require("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__ */ jsx_dev_runtime.jsxDEV("div", {
id: `mauticform_wrapper_${formName}`,
className: `mauticform_wrapper ${className || ""}`,
children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("form", {
autoComplete: "true",
method: "post",
onSubmit: handleSubmit,
id: `mauticform_${formName}`,
"data-mautic-form": formName,
encType: "multipart/form-data",
"aria-busy": isSubmitting,
children: [
/* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
className: "mauticform-innerform",
children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
className: "mauticform-page-wrapper mauticform-page-1",
"data-mautic-form-page": "1",
children
}, undefined, false, undefined, this)
}, undefined, false, undefined, this),
/* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
className: "mauticform-error",
id: `mauticform_${formName}_error`,
children: error && error.message
}, undefined, false, undefined, this),
/* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
className: "mauticform-message",
id: `mauticform_${formName}_message`
}, undefined, false, undefined, this),
/* @__PURE__ */ jsx_dev_runtime.jsxDEV("input", {
type: "hidden",
name: "mauticform[formId]",
id: `mauticform_${formName}_id`,
value: formId
}, undefined, false, undefined, this),
/* @__PURE__ */ jsx_dev_runtime.jsxDEV("input", {
type: "hidden",
name: "mauticform[return]",
id: `mauticform_${formName}_return`,
value: ""
}, undefined, false, undefined, this),
/* @__PURE__ */ jsx_dev_runtime.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
var import_react2 = require("react");
var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
var MauticFormScript = ({
mauticDomain,
mauticFormURL
}) => {
const [NextScript, setNextScript] = import_react2.useState(null);
import_react2.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__ */ jsx_dev_runtime2.jsxDEV(NextScript, {
id: "mautic-form-script",
src: fullMauticFormURL,
strategy: "afterInteractive",
onLoad: handleScriptLoad,
async: true
}, undefined, false, undefined, this);
}
return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("script", {
id: "mautic-form-script",
src: fullMauticFormURL,
async: true,
onLoad: handleScriptLoad
}, undefined, false, undefined, this);
};
// src/components/MauticInput.tsx
var jsx_dev_runtime3 = require("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__ */ jsx_dev_runtime3.jsxDEV("div", {
id: fieldId,
className: `mauticform-row mauticform-${type} ${required ? "mauticform-required" : ""} ${className}`,
"data-validate": validate,
"data-validation-type": validationType,
children: [
label && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("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__ */ jsx_dev_runtime3.jsxDEV("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__ */ jsx_dev_runtime3.jsxDEV("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__ */ jsx_dev_runtime3.jsxDEV("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
var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
var MauticSubmitButton = ({
className = "",
children = "Submit",
formName,
...props
}) => /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("button", {
id: `mauticform_${formName}_submit`,
className: `${className}`,
name: "mauticform[submit]",
type: "submit",
value: "1",
...props,
children
}, undefined, false, undefined, this);
// src/components/MauticTracking.tsx
var import_react3 = require("react");
var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
var MauticTracking = ({
mauticURL,
tags,
enabled
}) => {
const [NextScript, setNextScript] = import_react3.useState(null);
import_react3.useEffect(() => {
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__ */ jsx_dev_runtime5.jsxDEV(NextScript, {
id: "mautic-tracking",
strategy: "afterInteractive",
dangerouslySetInnerHTML: { __html: scriptContent }
}, undefined, false, undefined, this);
}
return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("script", {
id: "mautic-tracking",
dangerouslySetInnerHTML: { __html: scriptContent }
}, undefined, false, undefined, this);
};