umwd-components 0.1.840 → 0.1.841

package/dist/esm/umwd-components/src/components/page-elements/PersonaliaSection.js

@@ -0,0 +1,163 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Dialog from '@mui/material/Dialog';
+import { StrapiImage } from '../StrapiImage.js';
+import EmailIcon from '@mui/icons-material/Email';
+import LinkedIn from '@mui/icons-material/LinkedIn';
+import { StyledLink } from '../StyledLink.js';
+import { useTheme } from '@mui/material/styles';
+
+// function needsShortening(data: BlocksContent, maxLength: number) {
+//   let totalLength = 0;
+//   for (const paragraph of data) {
+//     if (paragraph?.children?.length === 0) continue;
+//     if (paragraph.children[0].type !== "text") continue;
+//     totalLength += paragraph.children[0].text.length;
+//   }
+//   return totalLength > maxLength;
+// }
+//
+// function shortenParagraphs(
+//   data: BlocksContent,
+//   maxLength: number
+// ): BlocksContent {
+//   let totalLength = 0;
+//   const shortenedData: BlocksContent = [];
+//
+//   /* for (const paragraph of data) {
+//     if (paragraph?.children?.length === 0) continue;
+//     if (paragraph.children[0].type !== "text") continue;
+//     const textNode = paragraph.children[0];
+//     const textLength = textNode.text.length;
+//     const remainingLength = maxLength - totalLength;
+//
+//     let shortenedText;
+//     if (textLength <= remainingLength) {
+//       // Add paragraph as is if it fits entirely
+//       shortenedText = textNode.text;
+//     } else if (remainingLength > 0) {
+//       // Only shorten if there's some space left
+//       // Shorten text if it exceeds remaining space
+//       shortenedText = textNode.text.substring(0, remainingLength - 3); // Subtract 3 for "..."
+//       shortenedText += "..."; // Add ellipsis to indicate truncation
+//     } else {
+//       // No remaining space, skip adding this paragraph
+//       break;
+//     }
+//
+//     shortenedData.push({
+//       ...paragraph,
+//       children: [{ ...textNode, text: shortenedText }],
+//     });
+//     totalLength += shortenedText.length;
+//   }*/
+//   return shortenedData;
+// }
+//
+function PartnerDialog({ partner, open, onClose, }) {
+    const theme = useTheme();
+    return (jsx(Dialog, { open: open, onClose: onClose, "aria-labelledby": "dialog-title", children: jsx(Paper, { sx: { p: 2, height: "100%" }, children: jsxs(Grid, { container: true, spacing: 3, children: [jsxs(Grid, { size: {
+                            xs: 12,
+                            sm: 7,
+                        }, children: [jsx(Typography, { variant: "h5", sx: {
+                                    mb: 2,
+                                    display: "flex",
+                                    justifyContent: "flex-start",
+                                    alignItems: "center",
+                                }, children: partner.name }), jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: partner.function })] }), jsx(Grid, { size: {
+                            xs: 12,
+                            sm: 5,
+                        }, children: jsxs(Stack, { spacing: 2, sx: { overflow: "clip" }, justifyContent: "center", alignItems: "stretch", children: [partner.photo?.url && (jsx(StrapiImage, { id: partner.photo.id, url: partner.photo.url, alternativeText: partner.photo.alternativeText, width: 200, height: 200, style: {
+                                        borderRadius: "50%",
+                                        margin: "auto",
+                                        ...partner.photo.style,
+                                    } })), partner.links?.length > 0 &&
+                                    partner.links.map((link, index) => {
+                                        return (jsx(StyledLink, { href: link.url, sx: {
+                                                color: theme.palette.mode === "dark"
+                                                    ? theme.palette.text.secondary
+                                                    : theme.palette.secondary.main,
+                                            }, children: link.text }, `${link.id}-${index}`));
+                                    }), partner.linkedIn && (jsx(Button, { variant: "outlined", startIcon: jsx(LinkedIn, {}), href: partner.linkedIn, target: "_blank", sx: {
+                                        color: theme.palette.mode === "dark"
+                                            ? theme.palette.text.secondary
+                                            : theme.palette.secondary.main,
+                                    }, children: "LinkedIn" })), partner.email && (jsx(Tooltip, { title: `${partner.email}`, children: jsx(Button, { variant: "outlined", startIcon: jsx(EmailIcon, {}), href: `mailto:${partner.email}`, sx: {
+                                            color: theme.palette.mode === "dark"
+                                                ? theme.palette.text.secondary
+                                                : theme.palette.secondary.main,
+                                        }, children: "Email" }) }))] }) })] }) }) }));
+}
+function Partner(partner, index) {
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+    const handleClose = () => {
+        setOpen(false);
+    };
+    /* const shorten = useMemo(
+      () =>
+        partner?.text != null ? needsShortening(partner.text, maxLength) : false,
+      [partner.text, maxLength]
+    ); */
+    return (jsxs(Grid, { size: {
+            xs: 12,
+            md: 6,
+        }, children: [jsx(PartnerDialog, { partner: partner, open: open, onClose: handleClose }), jsx(Paper, { sx: { p: 2, height: "100%" }, children: jsxs(Grid, { container: true, spacing: 3, children: [jsxs(Grid, { size: {
+                                xs: 12,
+                                sm: 7,
+                            }, children: [jsx(Typography, { variant: "h5", sx: {
+                                        mb: 2,
+                                        display: "flex",
+                                        justifyContent: "flex-start",
+                                        alignItems: "center",
+                                    }, children: partner.name }), jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: partner.function })] }), jsx(Grid, { size: {
+                                xs: 12,
+                                sm: 5,
+                            }, children: jsxs(Stack, { spacing: 2, sx: { overflow: "clip" }, justifyContent: "center", alignItems: "stretch", children: [partner.photo?.url && (jsx(StrapiImage, { id: partner.photo.id, url: partner.photo.url, alternativeText: partner.photo.alternativeText, width: partner.photo.width || 200, height: partner.photo.height || 200, style: {
+                                            maxWidth: "100%",
+                                            height: "auto",
+                                            // borderRadius: "50%", TODO this style was removed because it's specific to AMH, should be added to photo.style
+                                            margin: "auto",
+                                            ...partner.photo.style,
+                                        } })), partner.links?.length > 0 &&
+                                        partner.links.map((link, index) => {
+                                            return (jsx(StyledLink, { href: link.url, sx: {
+                                                    color: theme.palette.mode === "dark"
+                                                        ? theme.palette.text.secondary
+                                                        : theme.palette.secondary.main,
+                                                }, children: link.text }, `${link.id}-${index}`));
+                                        }), partner.linkedIn && (jsx(Button, { variant: "outlined", startIcon: jsx(LinkedIn, {}), href: partner.linkedIn, target: "_blank", sx: {
+                                            color: theme.palette.mode === "dark"
+                                                ? theme.palette.text.secondary
+                                                : theme.palette.secondary.main,
+                                        }, children: "LinkedIn" })), partner.email && (jsx(Tooltip, { title: `${partner.email}`, children: jsx(Button, { variant: "outlined", startIcon: jsx(EmailIcon, {}), href: `mailto:${partner.email}`, sx: {
+                                                color: theme.palette.mode === "dark"
+                                                    ? theme.palette.text.secondary
+                                                    : theme.palette.secondary.main,
+                                            }, children: "Email" }) }))] }) })] }) })] }, `${partner.id}-${index}`));
+}
+function PersonaliaSection({ data, }) {
+    const { partner, maxWidth, sx = [] } = data;
+    useTheme();
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(Grid, { container: true, spacing: 2, children: partner && partner.map(Partner) }) }));
+}
+
+export { PersonaliaSection };

package/dist/esm/umwd-components/src/components/page-elements/PictureBarSection.js

@@ -0,0 +1,34 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+function PictureBarSection({ data, }) {
+    const { pictures, maxWidth = "lg", sx = {}, glass = false } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                        p: 2,
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", children: pictures.data &&
+                            pictures.data.map((picture, index) => (jsx(Box, { sx: { flex: "1 1 0" }, children: jsx(StrapiImage, { id: picture.id.toString(), url: picture.url, alternativeText: picture.alternativeText, width: picture.width, height: picture.height, style: {
+                                        ...picture.style,
+                                        width: "100%",
+                                        height: "auto",
+                                    } }) }, `${picture.id}-${index}`))) }) }) }) }) }));
+}
+
+export { PictureBarSection };

package/dist/esm/umwd-components/src/components/page-elements/ProductBlock.js

@@ -0,0 +1,27 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+function ProductBlock({ data }) {
+    const { maxWidth = "lg", sx = {}, glass = false } = data;
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                        p: 2,
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", children: "Product Block" }) }) }) }) }));
+}
+
+export { ProductBlock };

package/dist/esm/umwd-components/src/components/page-elements/TextImageSection.js

@@ -0,0 +1,96 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import { StrapiImage } from '../StrapiImage.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+const MuiMarkdown = React.lazy(() => import(/* webpackChunkName: "mui-markdown" */ 'mui-markdown'));
+function StickyImage({ image }) {
+    const theme = useTheme();
+    const imageSrc = image.url;
+    if (imageSrc === undefined) {
+        return null;
+    }
+    const [offsetY, setOffsetY] = useState(0);
+    const handleScroll = () => {
+        const offset = 160;
+        const imageDivID = `image-container${image.url}`;
+        const imageDiv = document.getElementById(imageDivID);
+        const imageID = `image${image.url}`;
+        const imageElement = document.getElementById(imageID);
+        if (imageDiv === null || imageElement === null) {
+            return;
+        }
+        const imageDivRect = imageDiv.getBoundingClientRect();
+        const imageRect = imageElement.getBoundingClientRect();
+        if (imageRect.height >= imageDivRect.height) {
+            return;
+        }
+        const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+        if (imageDivRect.y <= offset &&
+            -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
+            setOffsetY(-imageDivRect.y + offset);
+        }
+        else if (imageDivRect.y > 0) {
+            setOffsetY(0);
+        }
+        else {
+            setOffsetY(imageAtBottomOffset);
+        }
+    };
+    useEffect(() => {
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []); // Empty dependency array to run effect only once
+    return (jsx(Box, { id: `image-container${image.url}`, sx: {
+            height: "100%",
+            position: "relative",
+        }, children: jsx(StrapiImage, { id: `image${image.url}`, alternativeText: image.alternativeText, height: image.height, width: image.width, url: image.url, style: {
+                width: "100%",
+                height: "auto",
+                display: "block",
+                position: "relative",
+                top: offsetY,
+                borderRadius: 4,
+                border: `1px solid ${theme.palette.secondary.main}`,
+            } }) }));
+}
+function TextImageSection({ data }) {
+    const { title, text, image, reverse = false, maxWidth, sx = {}, glass = false, anchor = "", } = data;
+    /* TODO Text_content should deal with linebreaks,
+    reading up upon mui-markdown docs is advised */
+    /* TODO Replace with blocks */
+    const theme = useTheme();
+    return (jsxs(Container, { maxWidth: maxWidth ? maxWidth : "lg", sx: { my: 1, ...sx }, id: anchor, children: [title && (jsx(Typography, { variant: "h1", textAlign: "center", sx: { pb: 2 }, children: title })), jsxs(Grid, { container: true, spacing: 2, direction: reverse ? "row-reverse" : "row", children: [jsx(Grid, { size: {
+                            xs: 12,
+                            md: image?.url !== undefined ? 8 : 12
+                        }, children: jsx(Paper, { sx: {
+                                p: 2,
+                                backdropFilter: "blur(3px)",
+                                backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                                border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                            }, children: text !== null && text !== undefined && (jsx(Box, { sx: {
+                                    height: "100%",
+                                    overflow: "hidden",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "flex-start",
+                                }, children: jsx(MuiMarkdown, { children: text }) })) }) }), image?.url !== undefined && (jsx(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: jsx(StickyImage, { image: image }) }))] })] }));
+}
+
+export { TextImageSection };

package/dist/esm/umwd-components/src/components/public-information/PublicInformationForm.js

@@ -0,0 +1,127 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import { SubmitButton } from '../SubmitButton.js';
+import React, { useActionState, useState } from 'react';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { BusinessCredentialsFields } from '../e-commerce/customer/BusinessCredentials.js';
+import { AddressFields } from '../common/Address.js';
+import { updatePublicInformationAction } from '../../data/actions/public-information/updatePublicInformationAction.js';
+import SocialsDisplay, { SocialsFields } from '../common/socials/Socials.js';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function PublicInformationForm({ publicInformation, sx, }) {
+    const { documentId, title, description, disclaimer_link, privacypolicy_link, maxWidth, email, phone_number, business_credentials, address, socials, header_logo, footer_logo, } = publicInformation;
+    console.log(socials);
+    const [formState, formAction] = useActionState((prevState, formData) => updatePublicInformationAction(documentId, prevState, formData), INITIAL_STATE);
+    const [open, setOpen] = useState([]);
+    const onClickHandler = (event, name) => {
+        if (open.includes(name)) {
+            setOpen(open.filter((openName) => openName !== name));
+        }
+        else {
+            setOpen([...open, name]);
+        }
+    };
+    const [oldSocials, setOldSocials] = React.useState(socials.reduce((acc, social, index) => {
+        acc.push({
+            data: social,
+            componentName: `socials[${index}]`,
+            componentReference: "common.social",
+        });
+        return acc;
+    }, []));
+    // INFO must utilize the uuid to ensure that the new contacts are unique
+    // this is important to use both the deleteCallbackand still not have problems with the key
+    const [newSocials, setNewSocials] = React.useState([]);
+    return (jsx(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { p: 2 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], component: Paper, children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h5", children: "Edit Public Information" }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title || "" }), jsx(TextField, { id: "description", name: "description", label: "Description", defaultValue: description || "" }), jsx(TextField, { id: "email", name: "email", label: "email", defaultValue: email || "" }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "phone_number", defaultValue: phone_number || "" })] }) }), jsx(Grid, { size: {
+                            xs: 12,
+                            lg: 6,
+                        }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(AddressFields, { componentName: "address", componentReference: "common.address", data: address })] }) }), jsx(Grid, { size: {
+                            xs: 12,
+                            lg: 6,
+                        }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials })] }) }), jsx(Grid, { sx: { mt: 1 }, size: 12, children: jsx(Typography, { variant: "h6", children: "Socials" }) }), oldSocials.map((social, index) => {
+                        if (social.data?.name) {
+                            if (open.includes(social.data.name)) {
+                                return (jsx(Grid, { size: {
+                                        xs: 12,
+                                        md: 6,
+                                        lg: 4,
+                                    }, children: jsx(SocialsFields, { data: social.data, componentName: `socials[${index}]`, componentReference: "common.social", deleteCallback: () => {
+                                            setOldSocials(oldSocials.filter((_, i) => i !== index));
+                                            /* setOpen(
+                                              open.filter((openId) => openId !== social.data?.id)
+                                            ); */
+                                        } }) }, index));
+                            }
+                            else {
+                                return (jsxs(Grid, { size: {
+                                        xs: 12,
+                                        md: 6,
+                                        lg: 4,
+                                    }, children: [jsx("input", { type: "hidden", name: `socials[${index}].documentId`, value: social.data.documentId || "" }), jsx("input", { type: "hidden", name: `socials[${index}].name`, value: social.data.name || "" }), jsx("input", { type: "hidden", name: `socials[${index}].url`, value: social.data.url || "" }), jsx("input", { type: "hidden", name: `socials[${index}].icon`, value: social.data.icon || "" }), jsx(SocialsDisplay, { data: { ...social.data, onClick: onClickHandler } })] }, index));
+                            }
+                        }
+                        return null;
+                    }), newSocials.map((social, index) => {
+                        return (jsx(Grid, { size: {
+                                xs: 12,
+                                md: 6,
+                                lg: 4,
+                            }, children: jsx(SocialsFields, { data: social.data, componentName: social.componentName, componentReference: "common.social", deleteCallback: () => {
+                                    setNewSocials(newSocials
+                                        .filter((_, i) => i !== index)
+                                        .map((_, i) => {
+                                        return {
+                                            ..._,
+                                            componentName: `socials[${i + oldSocials.length}]`,
+                                        };
+                                    }));
+                                } }) }, social.data?.uuid || index));
+                    }), jsx(Grid, { justifyContent: "center", alignItems: "center", size: {
+                            xs: 12,
+                            md: 6,
+                            lg: 4,
+                        }, children: jsx(IconButton, { onClick: () => {
+                                setNewSocials([
+                                    ...newSocials,
+                                    {
+                                        componentName: `socials[${oldSocials.length + newSocials.length}]`,
+                                        componentReference: "logistics-elements.social",
+                                        data: {
+                                            // uuid: Math.random(),
+                                            name: "",
+                                            url: "",
+                                        },
+                                    },
+                                ]);
+                            }, children: jsx(AddIcon, {}) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row-reverse", spacing: 2, alignItems: "center", sx: {
+                                py: 1,
+                            }, children: [jsx(SubmitButton, { text: "save changes", loadingText: "loading" }), formState?.strapiErrors && (jsx(StrapiErrors, { error: formState?.strapiErrors })), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] }) })] }) }) }));
+}
+
+export { PublicInformationForm };

package/dist/esm/umwd-components/src/context/auth/SessionContext.js

@@ -0,0 +1,143 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect } from 'react';
+import { getAuthToken } from '../../data/services/get-token.js';
+import { getUserMeLoader } from '../../data/services/get-user-me-loader.js';
+import { loginUserService } from '../../data/services/auth-service.js';
+import { logoutAction } from '../../data/actions/auth-actions.js';
+import { useSearchParams } from 'next/navigation';
+import { useCookieConsent } from '../../components/common/cookie-consent/CookieConsentContext.js';
+
+const SessionContext = createContext(undefined);
+const SessionProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const searchParams = useSearchParams();
+    let consentGiven = true;
+    try {
+        const cookieConsent = useCookieConsent();
+        consentGiven = cookieConsent?.consentGiven ?? true;
+    }
+    catch {
+        consentGiven = true;
+    }
+    const fetchUser = async () => {
+        setLoading(true);
+        try {
+            const token = await getAuthToken();
+            if (!token) {
+                setLoading(false);
+                return;
+            }
+            const userData = await getUserMeLoader(token);
+            if (userData) {
+                setUser(userData);
+            }
+            else {
+                setError("Failed to fetch user details");
+            }
+        }
+        catch (err) {
+            setError("An error occurred while fetching user details");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchUser();
+    }, []);
+    /**
+     * INFO this makes sure the token refreshes, when a user logs in via a different tab or via email-confirmation
+     * the other pages will be updated. This functionality is near-complete, it doesn't work as expected when logging out.
+     */
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            const token = await getAuthToken();
+            if (!token) {
+                setUser(null);
+                return;
+            }
+            const newUser = await getUserMeLoader(token);
+            if (newUser !== user) {
+                setUser(newUser);
+            }
+        }, 3000);
+        return () => clearInterval(interval);
+    }, []);
+    useEffect(() => {
+        if (searchParams && searchParams.get("login") === "success") {
+            refreshSession();
+        }
+    }, [searchParams]);
+    const login = async (identifier, password) => {
+        setLoading(true);
+        try {
+            const responseData = await loginUserService({ identifier, password });
+            if (responseData && responseData.jwt) {
+                document.cookie = `jwt=${responseData.jwt};path=/;max-age=604800;secure`;
+                setUser(responseData.user);
+            }
+            else {
+                setError("Failed to login");
+            }
+        }
+        catch (err) {
+            setError("An error occurred during login");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const logout = async () => {
+        try {
+            await logoutAction();
+            setUser(null);
+        }
+        catch (err) {
+            setError("An error occurred during logout");
+        }
+    };
+    const refreshSession = async () => {
+        try {
+            await fetchUser();
+        }
+        catch (err) {
+            setError("An error occurred while refreshing session");
+        }
+    };
+    const clearError = () => {
+        setError(null);
+    };
+    // INFO: This is a workaround to make sure the user is logged out when the cookie consent is declined
+    useEffect(() => {
+        if (consentGiven === false) {
+            logout();
+        }
+    }, [consentGiven]);
+    return (jsx(SessionContext.Provider, { value: {
+            user,
+            loading,
+            error,
+            login,
+            logout,
+            refreshSession,
+            clearError,
+        }, children: children }));
+};
+const useSession = () => {
+    const context = useContext(SessionContext);
+    if (!context) {
+        throw new Error("useSession must be used within a SessionProvider");
+    }
+    return context;
+};
+
+export { SessionProvider, useSession };

package/dist/esm/umwd-components/src/context/common/SnackbarContext.js

@@ -0,0 +1,74 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useContext, useReducer } from 'react';
+import { v4 } from 'uuid';
+
+const initialState = {
+    messages: [],
+};
+const SnackbarContext = createContext({
+    state: initialState,
+    dispatch: () => undefined,
+    handleAddMessage: () => undefined,
+    handleAddMessages: () => undefined,
+    handleClose: () => undefined,
+});
+const snackbarReducer = (state, action) => {
+    switch (action.type) {
+        case "SET_STATE":
+            return {
+                ...action.payload,
+            };
+        case "ADD_MESSAGE":
+            return { ...state, messages: [...state.messages, action.payload] };
+        case "UPDATE_MESSAGES":
+            return { ...state, messages: action.payload };
+        default:
+            throw new Error(`No case for type ${action.type}`);
+    }
+};
+const SnackbarProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(snackbarReducer, initialState);
+    const handleClose = (event, reason, id) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        const newMessages = [...state.messages];
+        const index = newMessages.findIndex((message) => message.id === id);
+        if (index !== -1) {
+            newMessages[index].open = false;
+            dispatch({ type: "UPDATE_MESSAGES", payload: newMessages });
+        }
+    };
+    const handleAddMessage = React.useCallback((value) => {
+        const newMessage = { ...value, open: true, id: v4() };
+        dispatch({ type: "ADD_MESSAGE", payload: newMessage });
+    }, [dispatch]);
+    const handleAddMessages = React.useCallback((value) => {
+        const newMessages = value.map((item) => ({
+            ...item,
+            open: true,
+            id: v4(),
+        }));
+        newMessages.forEach((message) => {
+            dispatch({ type: "ADD_MESSAGE", payload: message });
+        });
+    }, [dispatch]);
+    const value = {
+        state,
+        dispatch,
+        handleAddMessage,
+        handleAddMessages,
+        handleClose,
+    };
+    return (jsx(SnackbarContext.Provider, { value: value, children: children }));
+};
+const useSnackbar = () => useContext(SnackbarContext);
+
+export { SnackbarProvider, useSnackbar };