@adelant/react-mautic-forms
Version:
React components for Mautic form integration
277 lines (275 loc) • 8.46 kB
JavaScript
"use client"
var __create = Object.create;
var __getProtoOf = Object.getPrototypeOf;
var __defProp = Object.defineProperty;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __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/components/MauticForm.tsx
import { jsx, jsxs, Fragment } from "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(Fragment, {
children: /* @__PURE__ */ jsx("div", {
id: `mauticform_wrapper_${formName}`,
className: "mauticform_wrapper",
children: /* @__PURE__ */ jsxs("form", {
autoComplete: "true",
role: "form",
method: "post",
onSubmit: handleSubmit,
id: `mauticform_${formName}`,
"data-mautic-form": formName,
encType: "multipart/form-data",
children: [
/* @__PURE__ */ jsx("div", {
className: "mauticform-innerform",
children: /* @__PURE__ */ jsx("div", {
className: "mauticform-page-wrapper mauticform-page-1",
"data-mautic-form-page": "1",
children
})
}),
/* @__PURE__ */ jsx("div", {
className: "mauticform-error",
id: `mauticform_${formName}_error`
}),
/* @__PURE__ */ jsx("div", {
className: "mauticform-message",
id: `mauticform_${formName}_message`
}),
/* @__PURE__ */ jsx("input", {
type: "hidden",
name: "mauticform[formId]",
id: `mauticform_${formName}_id`,
value: formId
}),
/* @__PURE__ */ jsx("input", {
type: "hidden",
name: "mauticform[return]",
id: `mauticform_${formName}_return`,
value: ""
}),
/* @__PURE__ */ jsx("input", {
type: "hidden",
name: "mauticform[formName]",
id: `mauticform_${formName}_name`,
value: formName
})
]
})
})
});
};
// src/components/MauticInput.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2("div", {
id: fieldId,
className: `mauticform-row mauticform-${type} ${required ? "mauticform-required" : ""} ${className}`,
"data-validate": validate,
"data-validation-type": validationType,
children: [
label && /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("span", {
className: "mauticform-errormsg mt-1 text-sm text-red-500",
style: { display: "none" },
children: errorMessage
})
]
});
};
// src/components/MauticSubmitButton.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var MauticSubmitButton = ({
className = "",
children = "Submit",
formName
}) => /* @__PURE__ */ jsx3("button", {
id: `mauticform_${formName}_submit`,
className: `${className}`,
name: "mauticform[submit]",
type: "submit",
value: "1",
children
});
// src/components/MauticTracking.tsx
import { useEffect, useState } from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var MauticTracking = ({
mauticURL,
tags
}) => {
const [NextScript, setNextScript] = useState(null);
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__ */ jsx4(NextScript, {
id: "mautic-tracking",
strategy: "afterInteractive",
dangerouslySetInnerHTML: { __html: scriptContent },
async: true
});
}
return /* @__PURE__ */ jsx4("script", {
id: "mautic-tracking",
dangerouslySetInnerHTML: { __html: scriptContent },
async: true
});
};
// src/components/MauticFormScript.tsx
import { useEffect as useEffect2, useState as useState2 } from "react";
import { jsx as jsx5 } from "react/jsx-runtime";
var MauticFormScript = ({
mauticDomain,
mauticFormURL
}) => {
const [NextScript, setNextScript] = useState2(null);
useEffect2(() => {
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__ */ jsx5(NextScript, {
id: "mautic-form-script",
src: fullMauticFormURL,
strategy: "afterInteractive",
onLoad: handleScriptLoad,
async: true
});
}
return /* @__PURE__ */ jsx5("script", {
id: "mautic-form-script",
src: fullMauticFormURL,
async: true,
onLoad: handleScriptLoad
});
};
export {
MauticTracking,
MauticSubmitButton,
MauticInput,
MauticFormScript,
MauticForm
};