scrivito-pisasales-questionnaire-builder
Version:
Scrivito widgets for building PisaSales questionnaires
525 lines (524 loc) • 18.8 kB
JavaScript
import { jsxs as h, jsx as t, Fragment as R } from "react/jsx-runtime";
import { useState as B, useRef as K, useEffect as v, useMemo as Z } from "react";
import * as x from "scrivito";
import { isInPlaceEditingActive as N, connect as k, ContentTag as ee, useDataItem as te, isUserLoggedIn as se } from "scrivito";
import { u as C, Q as D, a as H, P as ne, V as ie, c as oe, d as ae, F as re } from "./FormContext-CyyAThXO.js";
import { u as A, b as ce, Q as ue } from "./QuestionnaireWidgetAttributesContext-BG4HHMga.js";
import { af as le, ag as de, ah as me, ai as fe, aj as Te, ak as Ee, al as Se, am as ge, an as he, ao as pe, ap as be, aq as Ie, ar as _e, as as ve, at as $, au as Q, av as V, aw as Ne, ax as Ae, ay as ye, az as Re, aA as Oe, aB as Ce, aC as De, aD as Me, aE as Pe, aF as we, aG as Be, aH as xe, aI as Fe, aJ as Ue, aa as Le, a8 as Ge, a9 as ke, a1 as He, a6 as F, a0 as M, E as P, aK as $e, j as I, aL as Qe, T as O, aM as L, a as w, aN as W, aO as j, X as Ve, R as We, J as je, a2 as Ye, a3 as qe, a4 as Xe, P as U, Z as Je, W as ze, N as Ke, a7 as Y, f as q, O as X, e as Ze, D as J, G as et, aP as tt, z as st, y as nt, aQ as it, aR as ot, Q as at, c as G, M as rt, H as ct, aS as ut, _ as lt, x as dt } from "./scrivitoConfig-WST4rsmc.js";
import { createPortal as mt } from "react-dom";
import { e as z, g as ft } from "./extractQuestionsAndOptions-C6y_aX6L.js";
import { h as Tt, i as Et, P as St } from "./PisaDataClassContext-B5rbhbtF.js";
import { i as gt } from "./isPisaDate-k2iL6dCC.js";
import { s as ht } from "./DocumentDataClass-D1mg6YjJ.js";
import { i as pt } from "./AnswersDataClass-IG1cx70G.js";
const bt = ({
fixedFormHeight: e,
formOverscrollBehavior: s,
formScrollbarWidth: i
}) => {
const n = [];
return e && (n.push("fixed-container-height"), s === "none" && n.push("no-overscroll-y"), i === "thin" ? n.push("thin-scrollbar") : i === "none" && n.push("hidden-scrollbar")), n.join(" ");
}, It = (e) => ({
externalId: e.get(P) || "",
questionnaireId: e.get(F) || "",
steps: e.get(M) || [],
isCreated: !!e.get(F),
formType: e.get(He),
showSubmittedPreview: e.get(ke) || !1,
showSubmittingPreview: e.get(Ge) || !1,
showFailedPreview: e.get(Le) || !1,
showRetryButton: e.get(Ue) || !1,
retryButtonText: e.get(Fe) || "Retry",
retryButtonAlignment: e.get(xe) || "text-center",
fixedFormHeight: e.get(Be) || !1,
formHeight: e.get(we) || 35,
submittingMessageType: e.get(Pe) || "default",
containerClassNames: e.get(Me) || "",
formScrollbarWidth: e.get(De) || "default",
formOverscrollBehavior: e.get(Ce) || "default",
failedMessage: e.get(Oe) || "We are sorry, your request could not be completed. Please try again later.",
submittedMessage: e.get(Re) || "Your message has been successfully sent. Thank you for your request. We will get back to you as soon as possible.",
submittedMessageType: e.get(ye) || "default",
submittingMessage: e.get(Ae) || "Submitting...",
failedMessageType: e.get(Ne) || "default",
failedMessageWidgets: e.get(V),
submittedMessageWidgets: e.get(Q),
submittingMessageWidgets: e.get($),
backwardButtonText: e.get(ve) || "Back",
forwardButtonText: e.get(_e) || "Forward",
submitButtonText: e.get(Ie) || "Submit",
singleSubmitButtonAlignment: e.get(be) || "text-center",
showReview: e.get(pe) || !1,
includeEmptyAnswers: e.get(he) || !1,
showStepsInReview: e.get(ge) || !1,
showReviewHeader: e.get(Se) || !1,
showReviewFooter: e.get(Ee) || !1,
reviewButtonText: e.get(Te) || "Review",
reviewHeaderTitle: e.get(fe) || "Review",
reviewCloseButtonText: e.get(me) || "Close",
buttonsSize: e.get(de) || "btn-md",
buttonsStyle: e.get(le) || "btn-primary"
}), _t = ({
type: e,
widget: s,
fixedFormHeight: i,
onReSubmit: n
}) => {
const { formHeight: o, showRetryButton: r, buttonsStyle: d, retryButtonAlignment: f, retryButtonText: S, failedMessage: E, buttonsSize: T } = A();
return /* @__PURE__ */ h("div", { className: "form-submission-failed", style: i ? { height: `${o}px` } : {}, children: [
e == "default" ? /* @__PURE__ */ h("div", { className: "text-center", children: [
/* @__PURE__ */ t(
"i",
{
className: "bi bi-exclamation-triangle-fill bi-2x",
"aria-hidden": "true"
}
),
" ",
/* @__PURE__ */ t("span", { children: E })
] }) : /* @__PURE__ */ t(
x.ContentTag,
{
content: s,
attribute: V
}
),
r && /* @__PURE__ */ t(
"div",
{
className: `${f === "block" ? "" : f}`,
children: /* @__PURE__ */ t(
"button",
{
className: `btn ${d} retry-button ${T} ${f === "block" ? " btn-block" : ""}`,
onClick: n,
children: S
}
)
}
)
] });
}, vt = ({ submissionSuccessText: e, type: s, widget: i, fixedFormHeight: n, formHeight: o }) => /* @__PURE__ */ t("div", { className: "form-submission-succeeded", style: n ? { height: `${o}px` } : {}, children: s == "default" ? /* @__PURE__ */ h("div", { className: "text-center", children: [
/* @__PURE__ */ t("i", { className: "bi bi-check-lg bi-2x", "aria-hidden": "true" }),
" ",
/* @__PURE__ */ t("span", { children: e })
] }) : /* @__PURE__ */ t(
x.ContentTag,
{
content: i,
attribute: Q
}
) }), Nt = ({
submittingText: e,
type: s,
widget: i,
fixedFormHeight: n,
formHeight: o
}) => /* @__PURE__ */ t("div", { className: "form-submission-submitting", style: n ? { height: `${o}px` } : {}, children: s == "default" ? /* @__PURE__ */ h("div", { className: "text-center", children: [
/* @__PURE__ */ t(
"i",
{
className: "bi bi-arrow-repeat bi-2x rotate-form-submitting-icon",
"aria-hidden": "true"
}
),
" ",
/* @__PURE__ */ t("span", { children: e })
] }) : /* @__PURE__ */ t(
x.ContentTag,
{
content: i,
attribute: $
}
) }), At = ({ widget: e }) => {
const { onSubmit: s, isSubmitting: i, successfullySent: n, submissionFailed: o } = C(), {
fixedFormHeight: r,
formHeight: d,
submittingMessageType: f,
submittedMessage: S,
submittedMessageType: E,
submittingMessage: T,
failedMessageType: u,
showFailedPreview: m,
showSubmittedPreview: a,
showSubmittingPreview: c
} = A(), l = N();
return i ? /* @__PURE__ */ h(R, { children: [
/* @__PURE__ */ t(
Nt,
{
submittingText: T,
type: f,
fixedFormHeight: r,
formHeight: d,
widget: e
}
),
c && l && /* @__PURE__ */ t(D, { status: "submittingPreview" })
] }) : n ? /* @__PURE__ */ h(R, { children: [
/* @__PURE__ */ t(
vt,
{
submissionSuccessText: S,
type: E,
fixedFormHeight: r,
formHeight: d,
widget: e
}
),
a && l && /* @__PURE__ */ t(D, { status: "submittedPreview" })
] }) : o ? /* @__PURE__ */ h(R, { children: [
/* @__PURE__ */ t(
_t,
{
type: u,
fixedFormHeight: r,
onReSubmit: s,
widget: e
}
),
m && l && /* @__PURE__ */ t(D, { status: "failedPreview" })
] }) : null;
}, yt = k(({ submitDisabled: e }) => {
const { onSubmit: s } = C(), { singleSubmitButtonAlignment: i, submitButtonText: n, buttonsSize: o, buttonsStyle: r } = A();
return /* @__PURE__ */ t(
"div",
{
className: `${i === "block" ? "" : i}`,
children: /* @__PURE__ */ t(
"button",
{
className: `btn ${r} ${o} ${i === "block" ? " btn-block" : ""}`,
onClick: s,
disabled: e,
children: n
}
)
}
);
}), Rt = ({
reviewContent: e,
onHide: s
}) => {
const [i, n] = B(!1), o = K(null), { showReviewHeader: r, showStepsInReview: d, showReviewFooter: f, reviewHeaderTitle: S, reviewCloseButtonText: E, buttonsSize: T, buttonsStyle: u } = A();
v(() => (n(!0), o.current = document.body.style.overflow, document.body.style.overflow = "hidden", () => {
document.body.style.overflow = o.current ?? "visible";
}), [e]);
const m = () => {
n(!1), s();
}, a = (c) => {
c.currentTarget == c.target && m();
};
return /* @__PURE__ */ t(
"div",
{
onClick: (c) => a(c),
hidden: !i,
className: "questionnaire-review-form-modal",
children: /* @__PURE__ */ t("div", { className: "review-modal-dialog", children: /* @__PURE__ */ h("div", { className: "review-modal-content", children: [
r && /* @__PURE__ */ t("div", { className: "review-modal-header", children: /* @__PURE__ */ t("h4", { children: S }) }),
/* @__PURE__ */ t("div", { className: "review-modal-body form-review", children: e.map((c, l) => /* @__PURE__ */ h(
"div",
{
className: "step-review-container",
children: [
d && /* @__PURE__ */ h("h4", { className: "step-review", children: [
"Step ",
l
] }),
c.map((g, p) => /* @__PURE__ */ t(Ot, { item: g }, "item-" + p))
]
},
"step-review-container-" + l
)) }),
f && /* @__PURE__ */ t("div", { className: "review-modal-footer", children: /* @__PURE__ */ t("button", { className: `btn ${u} ${T}`, onClick: m, children: E }) })
] }) })
}
);
}, Ot = ({ item: e }) => /* @__PURE__ */ h("div", { children: [
/* @__PURE__ */ t("div", { className: "review-item-title", children: /* @__PURE__ */ t("span", { children: e.title }) }),
/* @__PURE__ */ t("div", { className: "review-item-value", dangerouslySetInnerHTML: { __html: e.value } })
] });
function Ct(e, s, i) {
const n = document.getElementById(
e
), o = new FormData(n), r = new FormData(), d = new Set(
Array.from(n.querySelectorAll("input.show-as-list")).map((u) => u.name)
);
for (const [u] of o)
r.has(u) || (d.has(u) ? r.set(u, JSON.stringify(o.getAll(u))) : r.set(u, o.getAll(u).join(", ")));
const f = s.flatMap((u) => u.widgets()), S = Array.from(
n.querySelectorAll("input, select, textarea")
), E = $e(S.map((u) => u.name)), T = [];
for (const u of E) {
const m = r.get(u);
if (I(m) && !i)
continue;
const a = S.find((l) => l.name == u);
if (u == "fax" || a && a.type == "hidden" && !a.classList.contains("show-in-review"))
continue;
const c = f.find((l) => l.get(P) == u);
if (c) {
const l = s.find(
(y) => y.widgets().find((_) => _.get(P) == u)
), g = l == null ? void 0 : l.get(Qe), p = c.get(O) || c.get(L) || "";
T[g] || (T[g] = []);
const b = d.has(u) ? Mt(m) : Dt(m, c);
T[g].push({
title: p,
value: b
});
}
}
return T;
}
function Dt(e, s) {
const n = s.get(w);
return I(e) ? "-" : n == W ? new Date(e).toLocaleDateString() : n == j ? new Date(e).toLocaleString() : e;
}
function Mt(e) {
try {
const i = JSON.parse(e).filter(Boolean);
return i.length === 0 ? "-" : `<ul class="qst-file-list">${i.map((o) => `<li><i class="bi ${ce(o)}"></i> ${Pt(o)}</li>`).join("")}</ul>`;
} catch {
return e;
}
}
function Pt(e) {
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/\"/g, """).replace(/'/g, "'");
}
const wt = ({
onHide: e
}) => {
const [s, i] = B([]), { externalId: n, includeEmptyAnswers: o, steps: r } = A();
return v(() => {
const d = Ct(n, r, o);
i(d);
}, []), mt(
/* @__PURE__ */ t(Rt, { reviewContent: s, onHide: e }),
document.body
);
}, Bt = k(
({ submitDisabled: e }) => {
const [s, i] = B(!1), { onSubmit: n } = C(), { onPageChange: o, currentStep: r, isLastStep: d, stepsLength: f } = H(), { backwardButtonText: S, forwardButtonText: E, submitButtonText: T, showReview: u, reviewButtonText: m, buttonsSize: a, buttonsStyle: c } = A(), l = (d || N()) && u;
function g(p) {
p(!0);
}
return /* @__PURE__ */ h(R, { children: [
/* @__PURE__ */ h("div", { className: "buttons-container", children: [
/* @__PURE__ */ t(
"button",
{
className: `btn ${c} backward-button ${a}`,
onClick: () => o(!1),
hidden: r == 1 && !N(),
children: S
}
),
/* @__PURE__ */ t("div", { className: "step-counter", children: r + " / " + f }),
l && /* @__PURE__ */ t(
"button",
{
className: `btn ${c} review-button ${a}`,
onClick: () => g(i),
children: m
}
),
/* @__PURE__ */ t(
"button",
{
className: `btn ${c} forward-button ${a} ${N() ? "edit-mode-margin" : ""}`,
onClick: () => o(!0),
hidden: d,
children: E
}
),
/* @__PURE__ */ t(
"button",
{
className: `btn ${c} submit-button ${a}`,
onClick: n,
disabled: e,
hidden: !(d || N()),
children: T
}
)
] }),
l && s && /* @__PURE__ */ t(wt, { onHide: () => i(!1) })
] });
}
), xt = x.connect(({ widget: e, status: s }) => {
const { isSingleStep: i } = H(), n = C(), o = !(s == "void" || s == "publicSiteEditMode") || !!(n != null && n.hasPendingUploads);
return /* @__PURE__ */ h("div", { className: "qst-footer-container", children: [
i ? /* @__PURE__ */ t(
yt,
{
submitDisabled: o
}
) : /* @__PURE__ */ t(
Bt,
{
submitDisabled: o
}
),
/* @__PURE__ */ t(D, { status: s })
] });
}), Ft = ({
widget: e,
status: s
}) => {
const { isSubmitting: i, submissionFailed: n, successfullySent: o } = C();
return i || o || n ? /* @__PURE__ */ t(At, { widget: e }) : /* @__PURE__ */ h(R, { children: [
/* @__PURE__ */ t(
"form",
{
method: "post",
id: e.get(P),
children: /* @__PURE__ */ t(ee, { content: e, attribute: M })
}
),
/* @__PURE__ */ t(
xt,
{
widget: e,
status: s
}
)
] });
}, Ut = (e) => {
const s = e.indexOf("?");
return s === -1 ? e : e.substring(0, s);
}, Lt = (e) => {
if (!e) return "";
const s = e.split("~"), i = (s[1] ?? s[0] ?? "").trim();
return i ? Ut(i) : "";
}, Gt = () => typeof window < "u" && window.location ? Lt(window.location.href) : "", kt = (e) => {
const s = N(), i = e.get(M), n = i.length, { questionWidgets: o } = z(e), r = te(), d = e.get(Ve), f = e.get(We), S = e.get(je), E = e.get(Ye), T = e.get(qe), u = e.get(Xe);
v(() => {
if (!s)
return;
const m = Gt();
m && e.update({ location: m });
}, []), v(() => {
s && o.forEach((m, a) => {
const c = (a + 1) * 10;
m.get(U) !== c && m.update({ position: c });
});
}, [i]), v(() => {
if (!s)
return;
e.get(M).forEach((a, c) => {
a.update({
stepNumber: c + 1,
isSingleStep: n === 1
});
}), e.update({
formType: n > 1 ? "multi-step" : "single-step"
});
}, [i.length]), v(() => {
if (!s)
return;
const m = (a, c, l) => {
if (a === "data-item") {
const g = (r == null ? void 0 : r.get(c)) || "";
e.update({ [l]: g });
}
};
m(d, E, Je), m(f, T, ze), m(S, u, Ke);
}, [r]);
}, Ht = (e) => {
const s = e.get(L), i = e.get(Y);
if (I(s) || I(i) || !Tt(e))
return !1;
const n = ft(e);
if (I(n))
return !1;
for (const o of n) {
if (I(o.get(O)) || I(o.get(w)))
return !1;
if (o.objClass() == q) {
if (o.get(X).some(
(f) => I(f.get(O))
))
return !1;
} else if (o.objClass() == Ze) {
const r = o.get(w), d = o.get(J) || "";
if (I(d.trim()) || r == et || r == tt)
continue;
if ((r == W || r == j) && !(Et(d) || gt(d)) || r == st && !/^-?\d+$/.test(d) || r == nt && !/^-?\d+(\.\d+)?$/.test(d))
return !1;
}
}
return !0;
}, $t = (e) => {
const s = e.get(it), i = e.get(F);
if (I(i) || I(s) || !ot(s))
return !1;
const n = JSON.parse(s), o = e.get(L), r = e.get(Y);
if (o !== n.qstMeta.title || r !== n.qstMeta.inputType)
return !0;
const { questions: d, questionWidgets: f, answerOptions: S, optionWidgets: E } = z(e), T = n.questions, u = n.options;
if (f.length !== Object.keys(T).length)
return !0;
const m = Object.values(u).reduce(
(a, c) => a + Object.keys(c).length,
0
);
if (E.length !== m)
return !0;
for (const a of f) {
const c = a.get(at);
if (!c)
return !0;
const l = T[c];
if (!l || l.text !== a.get(O) || l.identifier !== a.get(G) || l.mandatory !== a.get(rt) || l.help !== a.get(ct) || l.defaultValue !== a.get(J) || l.type !== a.get(w) || l.position !== a.get(U))
return !0;
if (a.objClass() != q)
continue;
const g = a.get(X), p = u[c] || {};
if (g.length !== Object.keys(p).length)
return !0;
for (const b of g) {
const y = b.get(ut);
if (!y)
return !0;
const _ = p[y];
if (!_ || _.identifier !== b.get(G) || _.text !== b.get(O) || _.position !== b.get(U))
return !0;
}
}
return !1;
}, Qt = (e) => !e.obj().isRestricted(), Vt = ({ widget: e }) => {
const {
questionnaireId: s,
fixedFormHeight: i,
formHeight: n,
formOverscrollBehavior: o,
formScrollbarWidth: r,
containerClassNames: d
} = A(), f = Ht(e), S = $t(e), { isOnline: E } = oe(), T = !!s, [u, m] = B("void"), a = N(), c = Qt(e), l = se(), g = dt(), p = pt(), b = Z(() => lt(E) ? "unconfiguredUrl" : E ? f ? T ? S ? "pendingUpdate" : c && a ? "publicSiteEditMode" : c && !a && !l && !g ? "publicSiteNoContext" : c && !a && !l && g && !p ? "invalidToken" : "void" : "creationPending" : "invalid" : "offline", [e, E, f, T, S, c, a, l, g, p]);
v(() => {
u !== b && (ht(b, e), m(b));
}, [b, u, e]);
const y = bt({
fixedFormHeight: i,
formOverscrollBehavior: o,
formScrollbarWidth: r
}), _ = i ? { height: `${n}em` } : {};
return /* @__PURE__ */ t(ae, { qstContainerWidget: e, children: /* @__PURE__ */ t(re, { qstContainerWidget: e, children: /* @__PURE__ */ t(
"div",
{
className: `pisa-questionnaire-widgets questionnaire-container-widget ${d} ${y} ${a ? "edit-mode" : ""}`,
style: _,
children: /* @__PURE__ */ t(Ft, { widget: e, status: u })
}
) }) });
}, ns = ({ widget: e }) => {
const s = It(e);
return kt(e), /* @__PURE__ */ t(St, { children: /* @__PURE__ */ t(ue, { values: s, children: /* @__PURE__ */ t(ne, { children: /* @__PURE__ */ t(ie, { children: /* @__PURE__ */ t(Vt, { widget: e }) }) }) }) });
};
export {
ns as QuestionnaireContainerContent,
ns as default
};
//# sourceMappingURL=QuestionnaireContainerContent-BjUWwbLI.js.map