umwd-components 0.1.715 → 0.1.717

package/dist/esm/src/components/common/media/MediaItem.js

@@ -0,0 +1,36 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardActionArea from '@mui/material/CardActionArea';
+
+function MediaItem({ mediaItem, onClick, isSelected = false, }) {
+    const mediaLink = () => {
+        if (mediaItem.formats?.small?.url !== undefined) {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.formats?.small?.url}`;
+        }
+        else if (mediaItem.formats?.thumbnail?.url !== undefined) {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.formats?.thumbnail?.url}`;
+        }
+        else {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.url}`;
+        }
+    };
+    return (jsx(Card, { sx: [
+            { maxWidth: 345, height: "100%" },
+            isSelected && { outline: "2px solid blue" },
+        ], children: jsx(CardActionArea, { sx: {
+                backgroundColor: "#ddd",
+                opacity: 0.8,
+                backgroundImage: " repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, #ddd 25%, #ddd 75%, #000 75%, #000)",
+                backgroundPosition: "0 0, 10px 10px",
+                backgroundSize: "20px 20px",
+            }, onClick: onClick, children: jsx(CardMedia, { sx: { height: 140 }, image: mediaLink(), title: mediaItem.name }) }) }));
+}
+
+export { MediaItem };

package/dist/esm/src/components/common/media/MediaLibraryDialog.js

@@ -0,0 +1,40 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { MediaGrid } from './MediaGrid.js';
+import { UploadMediaForm } from './UploadMediaForm.js';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import { DialogTitle, DialogContent, Typography, DialogActions } from '@mui/material';
+import { getAllMedia } from '../../../data/loaders/common/media/getAllMedia.js';
+
+function MediaLibraryDialog({ 
+// mediaArray,
+open, handleClose, handleCancel, selected, handleSelect, }) {
+    const [media, setMedia] = useState();
+    useEffect(() => {
+        async function fetchData() {
+            const mediaArr = await getAllMedia();
+            setMedia(mediaArr);
+        }
+        fetchData();
+    }, []);
+    const handleRevalidate = () => {
+        const fetchData = async () => {
+            const mediaArr = await getAllMedia();
+            setMedia(mediaArr);
+        };
+        fetchData();
+    };
+    return (jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogTitle, { children: "Media Library" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body2", children: "Upload media to use in your content" }), jsx(UploadMediaForm, { revalidateCallback: handleRevalidate }), jsx(Divider, {}), jsx(Typography, { variant: "body2", children: "Select media to use in your content" }), media && (jsx(MediaGrid, { mediaArray: media, selected: selected, handleSelect: handleSelect }))] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "outlined", onClick: handleCancel, children: "Close" }), selected.length > 0 && (jsx(Button, { variant: "contained", onClick: handleClose, children: `Use selected file${selected.length > 1 ? "s" : ""}` }))] })] }));
+}
+
+export { MediaLibraryDialog };

package/dist/esm/src/components/common/media/UploadBase64MediaForm.js

@@ -0,0 +1,71 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { useFormState } from 'react-dom';
+import { uploadBase64MediaAction } from '../../../data/actions/media/uploadBase64MediaAction.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { ZodErrors } from '../../ZodErrors.js';
+import Alert from '@mui/material/Alert';
+import { SubmitButton } from '../../SubmitButton.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function UploadBase64MediaForm({ reference, refID = 0, field, multiple = true, accept = "image/*", path = "api/ipos", componentName = "", componentReference, revalidateCallback, }) {
+    const [filePreviews, setFilePreviews] = useState(null);
+    const [fileList, setFileList] = useState(null);
+    const uploadBase64MediaActionWithParams = uploadBase64MediaAction.bind(null, path, refID, componentName);
+    const [formState, formAction] = useFormState(uploadBase64MediaActionWithParams, INITIAL_STATE);
+    const fileInput = useRef(null);
+    useEffect(() => {
+        if (formState.data && revalidateCallback) {
+            revalidateCallback();
+        }
+    }, [formState.data]);
+    return (jsx("form", { action: formAction, id: field, children: jsx(Box, { sx: [
+                filePreviews &&
+                    filePreviews.length > 0 && { border: "2px solid red", p: 1 },
+            ], children: jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [reference && (jsx("input", { type: "text", name: "ref", value: reference, style: { display: "none" }, readOnly: true })), refID && (jsx("input", { type: "text", name: "refId", value: refID, style: { display: "none" }, readOnly: true })), " ", field && (jsx("input", { type: "text", name: "field", value: field, style: { display: "none" }, readOnly: true })), jsx("input", { id: "component_name", type: "hidden", name: `${componentName}.__component`, value: componentReference }), filePreviews !== null ? (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                            p: 2,
+                            width: "100%",
+                            border: "1px dashed white",
+                            minHeight: "100px",
+                        }, children: accept === undefined || accept === "image/*" ? (jsx(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: filePreviews.map((image, index) => {
+                                return (jsx("img", { src: image.url, alt: image.name, style: { width: "100px" } }, index));
+                            }) })) : (jsx(Stack, { spacing: 1, justifyContent: "flex-end", children: filePreviews.map((file, index) => {
+                                return jsx(Typography, { children: file.name }, index);
+                            }) })) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                            p: 2,
+                            width: "100%",
+                            border: "1px dashed white",
+                            minHeight: "100px",
+                            cursor: "pointer",
+                        }, children: jsxs(Typography, { children: ["No file", `${multiple ? "s" : ""}`, " selected for upload"] }) })), jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", justifyContent: "space-between", children: [jsx(StrapiErrors, { error: formState.strapiErrors }), jsx(ZodErrors, { error: formState.zodErrors?.image }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message })), jsxs(Box, { children: [jsx("label", { htmlFor: "pictureInput", children: jsx("input", { id: "pictureInput", accept: accept, multiple: multiple, type: "file", name: "files", ref: fileInput, onChange: (e) => {
+                                                const selectedFiles = e.target.files;
+                                                if (selectedFiles === null) {
+                                                    return;
+                                                }
+                                                const filePreviews = Object.keys(selectedFiles).map((item, index) => {
+                                                    return {
+                                                        url: URL.createObjectURL(selectedFiles[index]),
+                                                        name: selectedFiles[index].name,
+                                                    };
+                                                });
+                                                setFileList(selectedFiles);
+                                                setFilePreviews(filePreviews);
+                                            }, style: { display: "none" } }) }), fileList !== null && (jsx(SubmitButton, { text: "upload", loadingText: "loading" }))] })] })] }) }) }));
+}
+
+export { UploadBase64MediaForm };

package/dist/esm/src/components/common/media/UploadMediaForm.js

@@ -0,0 +1,68 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useFormState } from 'react-dom';
+import { uploadMediaAction } from '../../../data/actions/media/uploadMediaAction.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { ZodErrors } from '../../ZodErrors.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Alert from '@mui/material/Alert';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function UploadMediaForm({ reference, refID, field, multiple = true, accept = "image/*", revalidateCallback, }) {
+    const [filePreviews, setFilePreviews] = useState(null);
+    const [fileList, setFileList] = useState(null);
+    const [formState, formAction] = useFormState(uploadMediaAction, INITIAL_STATE);
+    const fileInput = useRef(null);
+    useEffect(() => {
+        if (formState.data) {
+            revalidateCallback?.();
+        }
+    }, [formState.data]);
+    return (jsx("form", { action: formAction, children: jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [reference && (jsx("input", { type: "text", name: "ref", value: reference, style: { display: "none" }, readOnly: true })), refID && (jsx("input", { type: "text", name: "refId", value: refID, style: { display: "none" }, readOnly: true })), field && (jsx("input", { type: "text", name: "field", value: field, style: { display: "none" }, readOnly: true })), filePreviews !== null ? (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                        p: 2,
+                        width: "100%",
+                        border: "1px dashed white",
+                        minHeight: "100px",
+                    }, children: accept === undefined || accept === "image/*" ? (jsx(Grid, { container: true, children: filePreviews.map((image, index) => {
+                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 2, children: jsx("img", { src: image.url, alt: image.name, style: { width: "100px" } }, index) }, index));
+                        }) })) : (jsx(Grid, { container: true, children: filePreviews.map((file, index) => {
+                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 2, children: jsx(Typography, { children: file.name }) }, index));
+                        }) })) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                        p: 2,
+                        width: "100%",
+                        border: "1px dashed white",
+                        minHeight: "100px",
+                        cursor: "pointer",
+                    }, children: jsxs(Typography, { children: ["No file", `${multiple ? "s" : ""}`, " selected, click here to start uploading new files"] }) })), jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", justifyContent: "space-between", children: [jsx(StrapiErrors, { error: formState.strapiErrors }), jsx(ZodErrors, { error: formState.zodErrors?.image }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message })), jsxs(Box, { children: [jsx("label", { htmlFor: "pictureInput", children: jsx("input", { id: "pictureInput", accept: accept, multiple: multiple, type: "file", name: "files", ref: fileInput, onChange: (e) => {
+                                            const selectedFiles = e.target.files;
+                                            if (selectedFiles === null) {
+                                                return;
+                                            }
+                                            const filePreviews = Object.keys(selectedFiles).map((item, index) => {
+                                                return {
+                                                    url: URL.createObjectURL(selectedFiles[index]),
+                                                    name: selectedFiles[index].name,
+                                                };
+                                            });
+                                            setFileList(selectedFiles);
+                                            setFilePreviews(filePreviews);
+                                        }, style: { display: "none" } }) }), fileList !== null && (jsx(SubmitButton, { text: "upload", loadingText: "loading" }))] })] })] }) }));
+}
+
+export { UploadMediaForm };

package/dist/esm/src/components/common/snackbar/GlobalSnackbar.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+function GlobalSnackbar() {
+    const { state, dispatch } = useSnackbar();
+    const displayMessages = state.messages.filter((message) => message.open === true);
+    const handleClose = (event, reason, id) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        const newMessages = [...state.messages];
+        const index = newMessages.findIndex((message) => message.id === id);
+        newMessages[index].open = false;
+        dispatch({ type: "ADD_MESSAGE", payload: newMessages });
+    };
+    return (jsx(Box, { children: displayMessages &&
+            displayMessages.length > 0 &&
+            displayMessages.map((message, index) => {
+                return (jsx(Snackbar, { open: message.open, autoHideDuration: 3000, onClose: (event, reason) => handleClose(event, reason, message.id), sx: { translate: `0px -${60 * index}px`, minWidth: "400px" }, children: jsx(Alert, { onClose: (event) => handleClose(event, "clickaway", message.id), severity: message.severity, sx: { width: "100%" }, children: message.message }) }, index));
+            }) }));
+}
+
+export { GlobalSnackbar as default };

package/dist/esm/src/components/common/socials/Socials.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import IconButton from '@mui/material/IconButton';
+import { Delete } from '@mui/icons-material';
+
+function SocialsDisplay({ data, }) {
+    const { id, name, url, icon, onClick } = data;
+    return (jsx(Stack, { children: jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(AccountCircleIcon, {}), jsxs(Stack, { children: [jsx(Typography, { children: name }), jsx(Typography, { children: url }), onClick && (jsx(Button, { onClick: (e) => {
+                                if (id) {
+                                    onClick(e, id);
+                                }
+                            }, children: "Edit" }))] })] }) }));
+}
+function SocialsFields({ data, componentName, componentReference, deleteCallback, }) {
+    const { id, name, url } = data || {};
+    return (jsxs(Stack, { spacing: 1, children: [jsx("input", { id: `${componentName}.__component`, type: "hidden", name: `${componentName}.__component`, value: componentReference }), id && (jsx("input", { id: `${componentName}.id`, type: "hidden", name: `${componentName}.id`, value: id })), jsxs(Stack, { spacing: 1, direction: "row", children: [jsx(TextField, { id: "name", name: `${componentName}.name`, label: "Name of social media", defaultValue: name || "" }), deleteCallback && (jsx(IconButton, { onClick: deleteCallback, children: jsx(Delete, {}) }))] }), jsx(TextField, { id: "url", name: `${componentName}.url`, label: "URL", defaultValue: url || "" })] }));
+}
+
+export { SocialsFields, SocialsDisplay as default };

package/dist/esm/src/components/e-commerce/cart/AddToCartButton.client.js

@@ -0,0 +1,30 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Link from 'next/link';
+import { useCart } from '../../../context/e-commerce/cart/CartContext.js';
+import { useTheme } from '@mui/material/styles';
+import { Typography } from '@mui/material';
+
+const AddToCartButton = ({ product }) => {
+    const { dispatch } = useCart();
+    const addToCart = () => {
+        dispatch({ type: "ADD_ITEM", payload: product });
+    };
+    useTheme();
+    if (product.stock <= 0) {
+        const subject = `quotation request for ${product.product_number} - ${product.title}`;
+        const contactUrl = `/contact?subject=${encodeURIComponent(subject)}`;
+        return (jsxs(Stack, { direction: "column", spacing: 1, children: [jsx(Typography, { variant: "body2", color: "error", align: "right", children: "Out of stock" }), jsx(Link, { href: contactUrl, passHref: true, children: jsx(Button, { size: "small", variant: "contained", color: "warning", children: "Request a Quotation" }) })] }));
+    }
+    return (jsx(Button, { size: "small", variant: "contained", onClick: addToCart, children: "Add to Card" }));
+};
+
+export { AddToCartButton as default };

package/dist/esm/src/components/e-commerce/cart/CartDisplay.js

@@ -0,0 +1,28 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import Link from 'next/link';
+import { useClientSideCart } from './hooks.js';
+import CartSummary from './CartSummary.js';
+
+function CartDisplay({ data }) {
+    const { shopUrl = "/shop", checkoutUrl = "/shop/check-out" } = data;
+    const { state, isClient } = useClientSideCart();
+    if (!isClient) {
+        return jsx(CircularProgress, {});
+    }
+    return (jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h4", align: "center", component: "h1", children: "My cart" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(CartSummary, {}), state.items.length > 0 && (jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total excl. VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalExVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555", fontWeight: 600 }, children: "Total" }), jsxs(Typography, { sx: { width: "30%", color: "#555", fontWeight: 600 }, align: "right", children: ["\u20AC ", state.totalInclVAT.toFixed(2)] })] })] })), jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Link, { href: shopUrl, legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "Continue shopping" }) }), state.items.length > 0 && (jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { variant: "contained", children: "Check Out" }) }))] })] }) }) })] }));
+}
+
+export { CartDisplay as default };

package/dist/esm/src/components/e-commerce/cart/CartSummary.js

@@ -0,0 +1,32 @@
+"client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import TableFooter from '@mui/material/TableFooter';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useTheme } from '@mui/material/styles';
+import CartSummaryRow from './CartSummaryRow.js';
+import { useClientSideCart } from './hooks.js';
+
+const CartSummary = () => {
+    const { state, isClient } = useClientSideCart();
+    const theme = useTheme();
+    const small = useMediaQuery(theme.breakpoints.down("sm"));
+    if (!isClient) {
+        return jsx(CircularProgress, {});
+    }
+    return (jsx(Box, { sx: { p: { xs: 1, md: 2 } }, children: state.items.length > 0 ? (jsxs(Table, { children: [jsx(TableBody, { children: state.items.map((item) => (jsx(CartSummaryRow, { data: item }, item.id))) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [!small && jsx(TableCell, { sx: { p: { xs: 1, sm: 2 } } }), jsx(TableCell, { sx: { p: { xs: 1, sm: 2 } }, colSpan: small ? 2 : 1 }), small ? (jsx(Fragment, { children: jsxs(TableCell, { colSpan: 2, align: "right", sx: { color: "#555", padding: 1 }, children: [jsx(Typography, { sx: { fontSize: 14 }, children: "Total " }), jsxs(Typography, { sx: { fontSize: 14 }, children: ["excl VAT: \u20AC ", state.totalExVAT.toFixed(2)] }), jsxs(Typography, { sx: { fontSize: 14 }, children: ["incl VAT: \u20AC ", state.totalInclVAT.toFixed(2)] })] }) })) : (jsxs(Fragment, { children: [jsxs(TableCell, { colSpan: 1, align: "right", sx: { color: "#555" }, children: ["Total excl VAT: \u20AC ", state.totalExVAT.toFixed(2)] }), jsxs(TableCell, { colSpan: 2, align: "right", sx: { color: "#555", fontSize: 16, fontWeight: 600 }, children: ["Total: \u20AC ", state.totalInclVAT.toFixed(2)] })] }))] }) })] })) : (jsx(Typography, { variant: "body1", children: "No products in cart" })) }));
+};
+
+export { CartSummary as default };

package/dist/esm/src/components/e-commerce/cart/CartSummaryRow.js

@@ -0,0 +1,37 @@
+"client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import Image from 'next/image';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Price from '../products/Price.js';
+import { useCart } from '../../../context/e-commerce/cart/CartContext.js';
+
+function CartSummaryRow({ data }) {
+    const { id, thumb, title, vat_rate, price_excl_vat, price_incl_vat, quantity, } = data;
+    const theme = useTheme();
+    const small = useMediaQuery(theme.breakpoints.down("sm"));
+    const { dispatch } = useCart();
+    const removeProduct = () => {
+        dispatch({ type: "REMOVE_ITEM", payload: { id: id } });
+    };
+    // TODO should render multiple currencies
+    return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: { p: { xs: 1, sm: 2 } }, children: [quantity, " * "] }), jsx(TableCell, { sx: { p: { xs: 1, sm: 2 } }, children: jsx(Price, { id: id, price: price_excl_vat, vat_rate: vat_rate, vat: price_excl_vat * (vat_rate / 100), price_incl_vat: price_incl_vat }) }), jsx(TableCell, { sx: { p: { xs: 1, sm: 2 } }, children: title }), !small && (jsx(TableCell, { sx: { p: { xs: 1, sm: 2 } }, children: jsx("div", { style: {
+                        position: "relative",
+                        width: "40px",
+                        height: "40px",
+                    }, children: thumb !== null && (jsx(Image, { src: thumb, alt: "Thumbnail of product", fill: true, sizes: "5vw", style: {
+                            objectFit: "cover",
+                        } })) }) })), jsx(TableCell, { sx: { p: 0 }, children: jsx(IconButton, { "aria-label": "delete", onClick: removeProduct, sx: { p: 0 }, children: jsx(DeleteIcon, {}) }) })] }, id));
+}
+
+export { CartSummaryRow as default };

package/dist/esm/src/components/e-commerce/cart/CartWidget.js

@@ -0,0 +1,82 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import CircularProgress from '@mui/material/CircularProgress';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import Link from 'next/link';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import CartSummary from './CartSummary.js';
+import Typography from '@mui/material/Typography';
+import { useClientSideCart } from './hooks.js';
+import { Grow } from '@mui/material';
+
+function CartWidget({ data }) {
+    const { cartUrl = "/shop/cart", checkoutUrl = "/shop/check-out" } = data;
+    const { state, isClient } = useClientSideCart();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleToggle = (event) => {
+        if (anchorEl) {
+            handleClose();
+        }
+        else {
+            handleClick(event);
+        }
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? "cart-widget-popover" : undefined;
+    const theme = useTheme();
+    const small = useMediaQuery(theme.breakpoints.down("sm"));
+    if (!isClient) {
+        return jsx(CircularProgress, {});
+    }
+    return (jsxs(Fragment, { children: [jsxs(Stack, { direction: "column", spacing: 2, sx: { display: { xs: "flex", md: "none" }, width: "100%" }, children: [jsx(Typography, { variant: "h6", sx: { textAlign: "center" }, children: "Cart" }), jsx(CartSummary, {}), jsxs(Stack, { direction: "row", spacing: 1, sx: { width: "100%" }, justifyContent: "flex-end", children: [jsx(Link, { href: cartUrl, legacyBehavior: true, children: jsx(Button, { size: small ? `small` : `large`, variant: "outlined", onClick: () => {
+                                        handleClose();
+                                    }, children: jsx(ShoppingCartIcon, {}) }) }), jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { size: small ? `small` : `large`, variant: "contained", onClick: () => {
+                                        handleClose();
+                                    }, children: "Check Out" }) })] })] }), jsxs(Box, { component: "div", sx: {
+                    display: { xs: "none", md: "block" },
+                    position: "relative",
+                    width: "40px",
+                    height: "40px",
+                    mr: "10px",
+                }, onMouseEnter: handleClick, onMouseLeave: handleClose, children: [jsx(Badge, { badgeContent: state.totalAmount, color: "primary", children: jsx(IconButton, { "aria-describedby": id, onClick: handleToggle, sx: {
+                                color: "primary.contrastText",
+                                boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                                "&:hover": {
+                                    backgroundColor: "primary.dark",
+                                },
+                            }, children: jsx(ShoppingCartIcon, { sx: { color: "primary.contrastText" } }) }) }), jsx(Grow, { in: open, ...(!open ? { timeout: 1000 } : {}), children: jsxs(Box, { id: id, sx: [
+                                {
+                                    position: "absolute",
+                                    top: "65px",
+                                    right: 0,
+                                    backgroundColor: "background.paper",
+                                    boxShadow: 2,
+                                    width: "max-content",
+                                },
+                            ], children: [jsx(CartSummary, {}), jsxs(Stack, { spacing: { xs: 1, sm: 2 }, sx: { p: { xs: 1, sm: 2 } }, children: [jsx(Link, { href: cartUrl, legacyBehavior: true, children: jsx(Button, { size: small ? `small` : `large`, variant: "outlined", onClick: () => {
+                                                    handleClose();
+                                                }, children: jsx(ShoppingCartIcon, {}) }) }), jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { size: small ? `small` : `large`, variant: "contained", onClick: () => {
+                                                    handleClose();
+                                                }, children: "Check Out" }) })] })] }) })] })] }));
+}
+
+export { CartWidget as default };

package/dist/esm/src/components/e-commerce/cart/hooks.js

@@ -0,0 +1,19 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { useState, useEffect } from 'react';
+import { useCart } from '../../../context/e-commerce/cart/CartContext.js';
+
+const useClientSideCart = () => {
+    const [isClient, setIsClient] = useState(false);
+    const { state, dispatch } = useCart();
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return { state, dispatch, isClient };
+};
+
+export { useClientSideCart };

package/dist/esm/src/components/e-commerce/categories/AddCategoryForm.js

@@ -0,0 +1,56 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { Button } from '@mui/material';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useFormState } from 'react-dom';
+import { createCategoryAction } from '../../../data/actions/e-commerce/categories/createCategoryAction.js';
+import Grid from '@mui/material/Grid';
+import ProductSelector from '../products/ProductSelector.js';
+import MarkdownEditor from '../../common/markdown/MarkdownEditor.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function AddCategoryForm({ productNamesArray, revalidateCallback, sx, handleClose, }) {
+    const [formState, formAction] = useFormState(createCategoryAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message || "Error creating category",
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error creating category",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Add Category" }), jsx(Typography, { variant: "body2", children: "Create a new category for your products. You can add products to this category later." })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title" }), jsx(MarkdownEditor, { name: "description", label: "Description" })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [] })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create category", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { AddCategoryForm };

package/dist/esm/src/components/e-commerce/categories/CategorySelectorV2.js

@@ -0,0 +1,21 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+const CategorySelector = ({ categories, currentValue, }) => {
+    const [selectedValues, setSelectedValues] = useState(currentValue || []);
+    const handleCategoryChange = (event, value) => {
+        value.map((category) => category.id);
+        setSelectedValues(value.map((category) => category.id));
+    };
+    return (jsxs(Fragment, { children: [jsx(Autocomplete, { multiple: true, options: categories, getOptionLabel: (option) => option.title, filterSelectedOptions: true, onChange: handleCategoryChange, renderInput: (params) => jsx(TextField, { ...params, label: "Category" }), value: categories.filter((category) => selectedValues.includes(category.id)) }), jsx("input", { type: "hidden", name: "categories", value: JSON.stringify(selectedValues) || "" })] }));
+};
+
+export { CategorySelector as default };