@adelant/react-mautic-forms
Version:
React components for Mautic form integration
298 lines (295 loc) • 9.36 kB
JavaScript
"use client"
var __create = Object.create;
var __getProtoOf = Object.getPrototypeOf;
var __defProp = Object.defineProperty;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __toESM = (mod, isNodeMode, target) => {
target = mod != null ? __create(__getProtoOf(mod)) : {};
const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
for (let key of __getOwnPropNames(mod))
if (!__hasOwnProp.call(to, key))
__defProp(to, key, {
get: () => mod[key],
enumerable: true
});
return to;
};
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, {
MauticTracking: () => MauticTracking,
MauticSubmitButton: () => MauticSubmitButton,
MauticInput: () => MauticInput,
MauticFormScript: () => MauticFormScript,
MauticForm: () => MauticForm
});
module.exports = __toCommonJS(exports_src);
// src/components/MauticForm.tsx
var jsx_runtime = require("react/jsx-runtime");
var MauticForm = ({
formId,
formName,
action,
children,
successCallback,
errorCallback
}) => {
const handleSubmit = async (e) => {
e.preventDefault();
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) {
successCallback?.(formData);
form.reset();
} else {
throw new Error("Form submission failed");
}
} catch (error) {
errorCallback?.(error, formData);
}
};
return /* @__PURE__ */ jsx_runtime.jsx(jsx_runtime.Fragment, {
children: /* @__PURE__ */ jsx_runtime.jsx("div", {
id: `mauticform_wrapper_${formName}`,
className: "mauticform_wrapper",
children: /* @__PURE__ */ jsx_runtime.jsxs("form", {
autoComplete: "true",
role: "form",
method: "post",
onSubmit: handleSubmit,
id: `mauticform_${formName}`,
"data-mautic-form": formName,
encType: "multipart/form-data",
children: [
/* @__PURE__ */ jsx_runtime.jsx("div", {
className: "mauticform-innerform",
children: /* @__PURE__ */ jsx_runtime.jsx("div", {
className: "mauticform-page-wrapper mauticform-page-1",
"data-mautic-form-page": "1",
children
})
}),
/* @__PURE__ */ jsx_runtime.jsx("div", {
className: "mauticform-error",
id: `mauticform_${formName}_error`
}),
/* @__PURE__ */ jsx_runtime.jsx("div", {
className: "mauticform-message",
id: `mauticform_${formName}_message`
}),
/* @__PURE__ */ jsx_runtime.jsx("input", {
type: "hidden",
name: "mauticform[formId]",
id: `mauticform_${formName}_id`,
value: formId
}),
/* @__PURE__ */ jsx_runtime.jsx("input", {
type: "hidden",
name: "mauticform[return]",
id: `mauticform_${formName}_return`,
value: ""
}),
/* @__PURE__ */ jsx_runtime.jsx("input", {
type: "hidden",
name: "mauticform[formName]",
id: `mauticform_${formName}_name`,
value: formName
})
]
})
})
});
};
// src/components/MauticInput.tsx
var jsx_runtime2 = require("react/jsx-runtime");
var MauticInput = ({
formName,
name,
label,
type = "text",
required = false,
validate,
validationType,
className = "",
errorMessage = "Required",
placeholder = "",
autocomplete = "off"
}) => {
const fieldId = `mauticform_${formName}_${name}`;
return /* @__PURE__ */ jsx_runtime2.jsxs("div", {
id: fieldId,
className: `mauticform-row mauticform-${type} ${required ? "mauticform-required" : ""} ${className}`,
"data-validate": validate,
"data-validation-type": validationType,
children: [
label && /* @__PURE__ */ jsx_runtime2.jsx("label", {
id: `mauticform_label_${formName}_${name}`,
htmlFor: `mauticform_input_${formName}_${name}`,
className: "mauticform-label mb-2 block text-sm font-medium",
children: label
}),
type === "textarea" ? /* @__PURE__ */ jsx_runtime2.jsx("textarea", {
id: `mauticform_input_${formName}_${name}`,
name: `mauticform[${name}]`,
className: `mauticform-input w-full rounded-md border px-3 py-2 ${className}`,
placeholder,
rows: 5,
cols: 70
}) : /* @__PURE__ */ jsx_runtime2.jsx("input", {
id: `mauticform_input_${formName}_${name}`,
name: `mauticform[${name}]`,
type,
className: `mauticform-input w-full rounded-md border px-3 py-2 ${className}`,
placeholder,
autoComplete: autocomplete
}),
/* @__PURE__ */ jsx_runtime2.jsx("span", {
className: "mauticform-errormsg mt-1 text-sm text-red-500",
style: { display: "none" },
children: errorMessage
})
]
});
};
// src/components/MauticSubmitButton.tsx
var jsx_runtime3 = require("react/jsx-runtime");
var MauticSubmitButton = ({
className = "",
children = "Submit",
formName
}) => /* @__PURE__ */ jsx_runtime3.jsx("button", {
id: `mauticform_${formName}_submit`,
className: `${className}`,
name: "mauticform[submit]",
type: "submit",
value: "1",
children
});
// src/components/MauticTracking.tsx
var import_react = require("react");
var jsx_runtime4 = require("react/jsx-runtime");
var MauticTracking = ({
mauticURL,
tags
}) => {
const [NextScript, setNextScript] = import_react.useState(null);
import_react.useEffect(() => {
import("next/script").then((mod) => setNextScript(() => mod.default || mod)).catch(() => setNextScript(null));
}, []);
if (false)
;
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_runtime4.jsx(NextScript, {
id: "mautic-tracking",
strategy: "afterInteractive",
dangerouslySetInnerHTML: { __html: scriptContent },
async: true
});
}
return /* @__PURE__ */ jsx_runtime4.jsx("script", {
id: "mautic-tracking",
dangerouslySetInnerHTML: { __html: scriptContent },
async: true
});
};
// src/components/MauticFormScript.tsx
var import_react2 = require("react");
var jsx_runtime5 = require("react/jsx-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_runtime5.jsx(NextScript, {
id: "mautic-form-script",
src: fullMauticFormURL,
strategy: "afterInteractive",
onLoad: handleScriptLoad,
async: true
});
}
return /* @__PURE__ */ jsx_runtime5.jsx("script", {
id: "mautic-form-script",
src: fullMauticFormURL,
async: true,
onLoad: handleScriptLoad
});
};