import { r as reactExports, j as jsxRuntimeExports } from "./axios-CtZC5suc.js";
import { O as Obituary$1 } from "./Obituary-sbXphF_d.js";
import { P as Page, C as CommercialPageType } from "./Page-DftcByIi.js";
import { T as TextArea } from "./TextArea-BV1QIhcE.js";
import { s as styles } from "./InteractionModal.module-DsDNyime.js";
import { T as TextInput } from "./TextInput-CgdJT7DV.js";
import { W, h as hooks, y as yt } from "./entry-app.js";
import { I as InputError } from "./InputError-DVAEP3LY.js";
import { M as Modal } from "./Modal-lnQ9_4fs.js";
import { T as Tabs, a as Tab, b as TabPanel } from "./Tabs-Wi57Hb99.js";
import { C as Checkbox } from "./Checkbox-Dr2uxckp.js";
import { F as FileInput } from "./FileInput-Bt9C-gxy.js";
import { A as AdvertisementSection } from "./AdvertisementSection-BbCmPQg9.js";
import { r as relativeRoute } from "./relativeRoute-DELxI-d-.js";
import "./Mensenlinq-PPM_B2zm.js";
import "./Button-EYkrjKtF.js";
import "./Characteristics-D_-eIuwm.js";
import "./Interaction-BIxCb3KE.js";
import "./Candle-B-VoKbmg.js";
import "./RoundIcon-BlZ01BG9.js";
import "./Pagination-CkHyVZXm.js";
import "./SharePerson-CTOixd78.js";
import "./useWindowSize-BkBocFCU.js";
import "./Photos-BBRQ-Y4B.js";
import "./Head-CUAMdgRx.js";
import "./Modal.module-DGyFH04d.js";
const image_0 = "/build/assets/0-Era8tnJc.jpg";
const image_1 = "/build/assets/1-D7RpfduH.jpg";
const image_2 = "/build/assets/2-C-kjmyq5.jpg";
const image_3 = "/build/assets/3-BsNuzaed.jpg";
const image_4 = "/build/assets/4-3f_2B3zq.jpg";
const image_5 = "/build/assets/5-DSwBFxYd.jpg";
const image_6 = "/build/assets/6-Dt8b5hJ9.jpg";
const image_7 = "/build/assets/7-yP06TcLf.jpg";
const image_8 = "/build/assets/8-CAJ4UNwM.jpg";
const image_9 = "/build/assets/9-DcDZJ8Lo.jpg";
const defaultImageSet = [
{ url: image_0 },
{ url: image_1 },
{ url: image_2 },
{ url: image_3 },
{ url: image_4 },
{ url: image_5 },
{ url: image_6 },
{ url: image_7 },
{ url: image_8 },
{ url: image_9 }
];
const Image = ({ src, alt, ...props }) => {
const ref = reactExports.useRef(null);
reactExports.useEffect(() => {
var _a;
if (src instanceof File) {
const reader = new FileReader();
reader.onload = function(e) {
var _a2;
(_a2 = ref.current) == null ? void 0 : _a2.setAttribute("src", reader.result);
};
reader.readAsDataURL(src);
return;
}
(_a = ref.current) == null ? void 0 : _a.setAttribute("src", src);
}, [src]);
if (!(src instanceof File)) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { ref, ...props, src, alt });
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { ref, ...props, alt });
};
var ActionType = /* @__PURE__ */ ((ActionType2) => {
ActionType2["None"] = "none";
ActionType2["Condolence"] = "condolence";
ActionType2["CondolenceReply"] = "reply";
ActionType2["Flower"] = "flower";
ActionType2["Candle"] = "candle";
return ActionType2;
})(ActionType || {});
function InteractionModal({
onSubmit,
onCancel,
action,
isLoading,
isObituary,
defaultValues,
inputErrors
}) {
var _a;
({
url: defaultImageSet[0].url,
fileName: "Dummy photo",
id: 1,
type: "default"
});
const { data, setData, processing, errors, setError, clearErrors, reset } = W({
text: "",
is_private: false,
action: "",
name: "",
email: "",
youtube_url: "",
files: []
// file: '',
});
const [showLibrary, setLibrary] = reactExports.useState(false);
const handleSubmit = (e) => {
e.preventDefault();
clearErrors();
onSubmit && onSubmit(data);
};
const handleSelectDefault = (index) => {
const defaultImage = defaultImageSet.at(index);
if (!defaultImage) {
return;
}
addPhoto(defaultImage.url, "Foto uit bibliotheek", "default", index);
setLibrary(false);
};
reactExports.useEffect(() => {
const isOpen = action !== "none";
if (isOpen && defaultValues) {
let dataCpy = { text: data.text, action: data.action };
dataCpy = { ...dataCpy, ...defaultValues, action: (action == null ? void 0 : action.toString()) || "none" };
setData(dataCpy);
}
if (!isOpen) {
clearErrors();
}
}, [action]);
reactExports.useEffect(() => {
setError(inputErrors);
}, [inputErrors]);
const changeActionByTab = (tab) => {
switch (tab) {
case 0:
setData(
"action",
"condolence"
/* Condolence */
);
break;
case 1:
setData(
"action",
"candle"
/* Candle */
);
break;
case 2:
setData(
"action",
"flower"
/* Flower */
);
break;
}
};
if (action === "none") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
}
let currentTab = 0;
switch (data.action) {
case "condolence":
case "reply":
currentTab = 0;
break;
case "candle":
currentTab = 1;
break;
case "flower":
currentTab = 2;
break;
}
const addPhoto = (url, fileName, type, id) => {
const newFiles = data.files ? [...data.files] : [];
newFiles.push({ url, fileName, type, id });
setData("files", newFiles);
};
const removePhoto = (index) => {
const newFiles = data.files ? [...data.files] : [];
newFiles.splice(index, 1);
setData("files", newFiles);
};
const handlePhoto = (e) => {
const file = e.target.files ? e.target.files[0] : null;
const newFiles = data.files ? [...data.files] : [];
newFiles.push({ url: file, fileName: file.name, type: "upload" });
setData("files", newFiles);
e.target.value = null;
};
if (showLibrary) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { title: "Kies een foto uit onze bibliotheek", onCancel: () => setLibrary(false), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.thumbnails, children: defaultImageSet.map((img, index) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: `Foto ${index}`, src: img.url, onClick: () => handleSelectDefault(index) }, index);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("footer", { className: "flex", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "bg-beige beigedarker", onClick: () => setLibrary(false), children: "Ga terug" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "grow justify-center", children: "Foto gebruiken" })
] })
] });
}
const title = action === "reply" ? "Reageer op bericht" : "Condoleren";
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { title, onCancel, children: [
action !== "reply" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Tabs,
{
className: styles.tabs,
onChange: (i) => changeActionByTab(i),
value: currentTab,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { children: "Condoleren" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { children: "Kaars branden" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { children: "Bloem plaatsen" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, className: styles.form, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("fieldset", { disabled: isLoading, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabPanel, { value: currentTab, index: 0, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Uw rouwbetuiging" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TextArea,
{
value: data.text || "",
onChange: (e) => setData("text", e.target.value)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(InputError, { message: errors.text })
] }),
isObituary && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "form__item checkbox", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Checkbox,
{
name: "is_private",
id: "is_private",
className: styles.checkbox,
checked: data.is_private,
onChange: (e) => setData("is_private", e.target.checked)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "is_private", children: "Condoleance alleen zichtbaar maken voor nabestaanden" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Uw naam" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TextInput,
{
value: data.name || "",
onChange: (e) => setData("name", e.target.value)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(InputError, { message: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "my-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Uw e-mailadres" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TextInput,
{
value: data.email || "",
onChange: (e) => setData("email", e.target.value)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(InputError, { message: errors.email })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabPanel, { value: currentTab, index: 0, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "my-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "YouTube URL" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TextInput,
{
value: data.youtube_url || "",
onChange: (e) => setData("youtube_url", e.target.value),
placeholder: "https://www.youtube.com/watch?v=abc123"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(InputError, { message: errors.youtube_url })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "my-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
FileInput,
{
onChange: handlePhoto,
label: "Klik hier om foto's toe te voegen",
className: styles.uploadButton,
showName: false
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.images, children: (_a = data.files) == null ? void 0 : _a.map((image, index) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Image, { src: image.url, alt: "", className: styles.image }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.fileName, children: image.fileName }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.bin, onClick: () => removePhoto(index), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fa-regular fa-trash-can" }) })
] }, index);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
"Geen eigen foto?",
/* @__PURE__ */ jsxRuntimeExports.jsxs("a", { href: "#", onClick: (e) => {
e.preventDefault();
setLibrary(true);
}, children: [
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Kies" }),
" "
] }),
"een foto uit onze bibliotheek"
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("footer", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "submit", children: [
isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fa-solid fa-spinner fa-spin me-3" }),
"Condoleren"
] }) })
] }) })
] });
}
function Obituary({ person, stats, interactions, claimed, background, ...props }) {
const [actionType, setActionType] = reactExports.useState(ActionType.None);
const [isSavingCondolence, setIsSavingCondolence] = reactExports.useState(false);
const [errors, setErrors] = reactExports.useState();
const [closeModalHandler, setCloseModalHandler] = reactExports.useState();
const [mobileState, setMobileState] = reactExports.useState(false);
const [modalPayload, setModalPayload] = reactExports.useState();
const handleAddReply = (interactionId, message) => new Promise((resolve) => {
setModalPayload({
text: message,
parent_interaction_id: interactionId
// if user is logged in, add the data in here
});
setActionType(ActionType.CondolenceReply);
setCloseModalHandler(() => resolve);
});
const handleSubmitCondolence = (payload) => {
var _a;
const meta = [];
const files = [];
(_a = payload.files) == null ? void 0 : _a.forEach((file, index) => {
if (file.url instanceof File) {
const fileIndex = files.push(file.url) - 1;
meta.push({ index, fileIndex, type: "file" });
} else {
meta.push({ index, ...file });
}
});
const formattedPayload = { ...payload, files, meta };
setIsSavingCondolence(true);
yt.post(
relativeRoute("obituary.add-interaction", { person: person.slug }),
formattedPayload,
{
preserveScroll: true,
headers: {
"Content-Type": "multipart/form-data"
},
onSuccess: () => {
setIsSavingCondolence(false);
closeModalHandler && closeModalHandler(true);
setActionType(ActionType.None);
},
onError: (errors2) => {
setIsSavingCondolence(false);
setErrors(errors2);
}
}
);
};
const handleAddHeart = (interactionId) => new Promise((resolve, reject) => {
yt.post(
relativeRoute("obituary.heart", { person: person.slug, interaction: interactionId }),
{},
{
preserveScroll: true,
onSuccess: () => {
resolve(true);
},
onError: (errors2) => {
reject(errors2);
}
}
);
});
const handleCancelCondolence = () => {
closeModalHandler && closeModalHandler(true);
setActionType(ActionType.None);
};
const functions = {
OnAddCondolence: () => {
setModalPayload({
text: ""
// if user is logged in, add the data in here
});
setActionType(ActionType.Condolence);
},
OnAddFlower: () => {
setModalPayload({
text: ""
// if user is logged in, add the data in here
});
setActionType(ActionType.Flower);
},
OnAddCandle: () => {
setModalPayload({
text: ""
// if user is logged in, add the data in here
});
setActionType(ActionType.Candle);
},
OnSendCard: () => {
window.open("https://mensenlinq-478c.instantdesigntool.com/create/cards-double-folded-a5-portrait?forceNew=true");
},
OnSendBouquet: () => {
window.open("https://www.regiobloemist.nl/boeketten/rouwboeket/condoleances?partner=mensenlinq");
},
OnSetMobileState: (state) => {
setMobileState(state);
}
};
const metaTags = [
// OpenGraph
{
name: "og:title",
content: person.name + " - Mensenlinq"
},
{
name: "og:type",
content: "website"
},
{
name: "og:description",
content: person.name + " - Mensenlinq"
},
{
name: "og:image",
content: location.href + "/card.jpg"
},
{
name: "og:url",
content: location.href
},
// Twitter
{
name: "twitter:card",
content: "summary_large_image"
},
{
name: "twitter:title",
content: person.name + " - Mensenlinq"
},
{
name: "twitter:description",
content: person.name + " - Mensenlinq"
},
{
name: "twitter:url",
content: location.href
},
{
name: "twitter:image",
content: location.href + "/card.jpg"
}
];
const deceasedDateString = person.deceased_date ? "✝ " + hooks(person.deceased_date).format("LL") : "";
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
Page,
{
title: `${person.name} ${deceasedDateString} • overlijdensbericht en condoleances`,
pageType: CommercialPageType.ObituaryDetail,
adUnit: "obituary",
metaTags,
harvestId: `person-${person.id}`,
mobileScaling: 1,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Obituary$1,
{
person,
stats,
interactions,
onAddReply: handleAddReply,
onAddHeart: handleAddHeart,
claimed,
background,
mobileMenuIsOpen: mobileState,
functions
}
),
person.obituary_type === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(AdvertisementSection, { className: "bg-beige" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
InteractionModal,
{
action: actionType,
isLoading: isSavingCondolence,
isObituary: claimed,
onSubmit: handleSubmitCondolence,
onCancel: handleCancelCondolence,
defaultValues: modalPayload,
inputErrors: errors
}
)
]
}
);
}
export {
Obituary as default
};
//# sourceMappingURL=Obituary-CVw8siXO.js.map
