umwd-components 0.1.840 → 0.1.841

package/dist/esm/umwd-components/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.documentId))) }), 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/umwd-components/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 { documentId, 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: { documentId: documentId } });
+    };
+    // 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, { 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, {}) }) })] }, documentId));
+}
+
+export { CartSummaryRow as default };

package/dist/esm/umwd-components/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, children: jsx(Button, { size: small ? `small` : `large`, variant: "outlined", onClick: () => {
+                                        handleClose();
+                                    }, children: jsx(ShoppingCartIcon, {}) }) }), jsx(Link, { href: checkoutUrl, 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, children: jsx(Button, { size: small ? `small` : `large`, variant: "outlined", onClick: () => {
+                                                    handleClose();
+                                                }, children: jsx(ShoppingCartIcon, {}) }) }), jsx(Link, { href: checkoutUrl, children: jsx(Button, { size: small ? `small` : `large`, variant: "contained", onClick: () => {
+                                                    handleClose();
+                                                }, children: "Check Out" }) })] })] }) })] })] }));
+}
+
+export { CartWidget as default };

package/dist/esm/umwd-components/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/umwd-components/src/components/e-commerce/categories/AddCategoryForm.js

@@ -0,0 +1,55 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState, 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 { 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] = useActionState(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, { size: 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, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title" }), jsx(MarkdownEditor, { name: "description", label: "Description" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [] })] }), jsx(Grid, { size: 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/umwd-components/src/components/e-commerce/categories/CategorySelectorV2.js

@@ -0,0 +1,65 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+const CategorySelector = ({ name = "categories", categories, currentValue, // Should be an array of document IDs
+sx, multiple = true, onChangeCallback, }) => {
+    const [selectedValues, setSelectedValues] = useState(currentValue || []);
+    const handleCategoryChange = (event, value) => {
+        // null check for value
+        if (!value) {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+            return;
+        }
+        if (Array.isArray(value)) {
+            if (multiple === true) {
+                // If multiple is true, we take all selected categories' documentIds
+                const ids = value.map((category) => category.documentId);
+                setSelectedValues(ids);
+                if (onChangeCallback)
+                    onChangeCallback(ids);
+                return;
+            }
+            else {
+                // If multiple is false, we take the first selected category's documentId
+                const firstId = value[0].documentId;
+                setSelectedValues([firstId]);
+                if (onChangeCallback)
+                    onChangeCallback([firstId]);
+                return;
+            }
+        }
+        else if (!Array.isArray(value) && value.documentId) {
+            // If value is a single ProductName object, we take its documentId
+            setSelectedValues([value.documentId]);
+            if (onChangeCallback)
+                onChangeCallback([value.documentId]);
+            return;
+        }
+        // If value is empty or not an array or object, reset selected values
+        setSelectedValues([]);
+        if (onChangeCallback)
+            onChangeCallback([]);
+    };
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(Autocomplete, { multiple: multiple, options: categories, getOptionLabel: (option) => {
+                    return option?.title || "";
+                }, filterSelectedOptions: true, onChange: handleCategoryChange, renderInput: (params) => jsx(TextField, { ...params, label: "Category" }), value: multiple
+                    ? categories.filter((category) => selectedValues.includes(category.documentId))
+                    : // If not multiple, we return the first matching category
+                        categories.filter((category) => selectedValues.includes(category.documentId))[0] || "" }), jsx("input", { type: "hidden", name: name, value: JSON.stringify(selectedValues) || "" })] }));
+};
+
+export { CategorySelector as default };

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

@@ -0,0 +1,57 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { SubmitButton } from '../../SubmitButton.js';
+import { useActionState, useEffect } from 'react';
+import { updateCategoryAction } from '../../../data/actions/e-commerce/categories/updateCategoryAction.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';
+import { Button } from '@mui/material';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function EditCategoryForm({ data, revalidateCallback, handleClose, productNamesArray, sx, }) {
+    const { documentId, title, description, slug, is_archive, products } = data;
+    const initialProducts = products || [];
+    const [formState, formAction] = useActionState(updateCategoryAction.bind(null, documentId), INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating 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, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Category" }), jsx(Typography, { variant: "body2", children: "Edit the category for your products. You can add products to this category later." })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [...initialProducts.map((prod) => prod.documentId)] })] }), jsx(Grid, { size: 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: "Update category", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { EditCategoryForm };

package/dist/esm/umwd-components/src/components/e-commerce/checkout/CheckoutForm.js

@@ -0,0 +1,159 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import MobileStepper from '@mui/material/MobileStepper';
+import Alert from '@mui/material/Alert';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import { useState, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import Step1 from './Step1.js';
+import Step2 from './Step2.js';
+import Step3 from './Step3.js';
+import Step4 from './Step4.js';
+import Step5 from './Step5.js';
+import { useCheckout } from '../../../context/e-commerce/checkout/CheckoutContext.js';
+import { useCart } from '../../../context/e-commerce/cart/CartContext.js';
+import isCustomerProfileCompleteEnough from '../../../lib/isCustomerProfileCompleteEnough.js';
+
+function CheckoutForm({ shopUrl = "/shop" }) {
+    const theme = useTheme();
+    const small = useMediaQuery(theme.breakpoints.down("sm"));
+    const { state, runAllChecks, togglePrefersBillingAddress, togglePrefersDeliveryAddress, setCustomerInternalReference, } = useCheckout();
+    const { dispatch } = useCart();
+    const { loading, error, user, login, logout } = useSession();
+    const [activeStep, setActiveStep] = useState(0);
+    const [orderUuid, setOrderUuid] = useState(null);
+    const [alert, setAlert] = useState(null);
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+    const searchParams = useSearchParams();
+    useEffect(() => {
+        if (searchParams !== null) {
+            const orderUuid = searchParams.get("order");
+            if (orderUuid) {
+                setOrderUuid(orderUuid);
+            }
+            const message = searchParams.get("message");
+            const severity = searchParams.get("severity");
+            if (message && severity) {
+                setAlert({
+                    message,
+                    severity: severity,
+                });
+            }
+        }
+    }, [searchParams]);
+    useEffect(() => {
+        if (orderUuid) {
+            setActiveStep(4);
+            // important, on production the cookies are not properly handled by the context
+            localStorage.removeItem("cart");
+            dispatch({ type: "SET_ITEMS", payload: [] });
+        }
+    }, [orderUuid]);
+    useEffect(() => {
+        if (user) {
+            console.log("checkout change in user");
+            runAllChecks();
+        }
+    }, [user]);
+    const cartIsEmpty = !state.confirmations.itemsInCart;
+    // const customerProfileIsIncomplete =
+    //   !state.confirmations.customerProfileComplete;
+    const completeEnough = useMemo(() => {
+        return user?.customer_profile !== null
+            ? isCustomerProfileCompleteEnough(user?.customer_profile)
+            : false;
+    }, [user?.customer_profile]);
+    // const maxSteps = 5; // ??
+    const steps = useMemo(() => [
+        /* step 1 */
+        {
+            label: "Login or register",
+            children: jsx(Step1, { user: user, logout: logout }),
+            backButton: (jsxs(Button, { variant: small ? "text" : "outlined", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1 }, children: ["Back", small && jsx(KeyboardArrowLeft, {})] })),
+            nextButton: (jsxs(Button, { variant: small ? "text" : "contained", onClick: handleNext, sx: { ml: 1 }, disabled: (!user || cartIsEmpty) && process.env.NODE_ENV === "production", size: small ? "small" : "large", children: ["Next", small && jsx(KeyboardArrowRight, {})] })),
+        },
+        /* step 2 */
+        {
+            label: "Provide us with your address",
+            children: jsx(Step2, {}),
+            backButton: (jsxs(Button, { size: small ? "small" : "large", onClick: handleBack, disabled: activeStep === 0, variant: small ? "text" : "outlined", children: ["Back", small && jsx(KeyboardArrowLeft, {})] })),
+            nextButton: (jsxs(Button, { size: small ? "small" : "large", variant: small ? "text" : "contained", onClick: () => {
+                    handleNext();
+                }, disabled: (!user ||
+                    cartIsEmpty ||
+                    !completeEnough) /* customerProfileIsIncomplete */ &&
+                    process.env.NODE_ENV === "production", children: ["Next", small && jsx(KeyboardArrowRight, {})] })),
+        },
+        /* step 3 */
+        {
+            // TODO
+            label: "Set up mailing options",
+            children: (jsx(Step3, { user: user, prefersBillingAddress: state.prefersBillingAddress, prefersDeliveryAddress: state.prefersDeliveryAddress, delivery_options: state.delivery_options, payment_options: state.payment_options, togglePrefersBillingAddress: togglePrefersBillingAddress, togglePrefersDeliveryAddress: togglePrefersDeliveryAddress, setCustomerInternalReference: setCustomerInternalReference })),
+            backButton: (jsxs(Button, { size: small ? "small" : "large", variant: small ? "text" : "outlined", onClick: handleBack, disabled: activeStep === 0, children: ["Back", small && jsx(KeyboardArrowLeft, {})] })),
+            nextButton: (jsxs(Button, { size: small ? "small" : "large", variant: small ? "text" : "contained", onClick: () => {
+                    handleNext();
+                }, disabled: (!user ||
+                    cartIsEmpty ||
+                    !completeEnough) /* customerProfileIsIncomplete */ &&
+                    process.env.NODE_ENV === "production", children: ["Next", small && jsx(KeyboardArrowRight, {})] })),
+        },
+        /* step 4 */
+        {
+            label: "Confirm and make a payment",
+            children: jsx(Step4, { customer_reference: state.customer_reference }),
+            nextButton: (jsx(Fragment, { children: jsxs(Button, { size: small ? "small" : "large", variant: small ? "text" : "contained", onClick: () => {
+                        handleNext();
+                    }, disabled: true, children: ["Next", small && jsx(KeyboardArrowRight, {})] }) })),
+            backButton: (jsxs(Button, { size: small ? "small" : "large", variant: small ? "text" : "outlined", onClick: handleBack, disabled: activeStep === 0, children: ["Back", small && jsx(KeyboardArrowLeft, {})] })),
+        },
+        /* step 5 */
+        {
+            label: "Done!",
+            children: jsx(Step5, {}),
+        },
+    ], [
+        user,
+        cartIsEmpty,
+        /* customerProfileIsIncomplete */ completeEnough,
+        state,
+        small,
+        activeStep,
+    ]);
+    return (jsx(Container, { sx: { py: 2, minHeight: "100vh" }, children: jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h4", align: "center", children: "Check Out" }) }), cartIsEmpty && activeStep != 4 && (jsx(Grid, { size: 12, children: jsxs(Alert, { severity: "error", children: [jsx(Typography, { variant: "h5", children: "No products in cart" }), jsx(Typography, { variant: "body1", children: "There are no products selected to order, please visit the shop befor continuing" })] }) })), alert != null && (jsx(Grid, { size: 12, children: jsx(Alert, { severity: alert.severity, children: jsx(Typography, { variant: "body1", children: alert.message }) }) })), jsx(Grid, { size: 12, children: jsxs(Box, { width: "100%", children: [jsx(Paper, { sx: {
+                                    p: 2,
+                                    mb: 2,
+                                    display: { xs: "block", sm: "none" },
+                                }, children: jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Typography, { variant: "body2", children: `${activeStep + 1} / ${steps.length}` }), jsx(Typography, { children: `${steps[activeStep].label}` })] }) }), jsx(Paper, { sx: { px: 2, pt: 2, mb: 2, display: { xs: "none", sm: "block" } }, children: jsx(Stepper, { activeStep: activeStep, children: steps.map((step, index) => {
+                                        const stepProps = {};
+                                        const labelProps = {};
+                                        return (jsx(Step, { ...stepProps, sx: { pb: "20px" }, children: jsx(StepLabel, { ...labelProps, children: step.label }) }, index));
+                                    }) }) }), !loading && (jsxs(Fragment, { children: [steps[activeStep].children, jsx(Paper, { sx: { p: 2, mt: 2, display: { xs: "none", sm: "block" } }, children: jsxs(Stack, { direction: "row", spacing: 2, children: [steps[activeStep].backButton, jsx(Button, { variant: "outlined", sx: { ml: 1 }, children: jsx(Link, { href: shopUrl, children: "continue shopping" }) }), jsx(Box, { sx: { flex: "1 1 auto" } }), steps[activeStep].nextButton] }) })] }))] }) }), jsx(Grid, { size: 12, children: jsx(MobileStepper, { sx: { display: { xs: "flex", sm: "none" } }, variant: "text", steps: steps.length, position: "static", activeStep: activeStep, nextButton: steps[activeStep].nextButton, backButton: steps[activeStep].backButton }) })] }) }));
+}
+
+export { CheckoutForm as default };

package/dist/esm/umwd-components/src/components/e-commerce/checkout/Step1.js

@@ -0,0 +1,33 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import DenseSigninForm from '../../auth/DenseSigninForm.js';
+import DenseRegisterForm from '../../auth/DenseRegisterForm.js';
+
+// Step 1, Login or register
+/**
+ * TODO
+ * an implementation for forget password functionality
+ * reimplementing cookiebanner
+ */
+function Step1({ user, logout }) {
+    const customer_profile = user?.customer_profile
+        ? user.customer_profile
+        : null;
+    const [registerOpen, setRegisterOpen] = React.useState(false);
+    return (jsx(Paper, { sx: { p: 2 }, children: user ? (jsx(Fragment, { children: !customer_profile ? (jsxs(Fragment, { children: [jsxs(Typography, { variant: "h6", children: ["Dearest ", user.username, ", ", user.email, ", are you ready to checkout?"] }), jsxs(Stack, { spacing: 2, direction: "row", alignItems: "center", children: [jsxs(Typography, { variant: "body1", children: ["Not", " ", user.username && user.email
+                                        ? `${user.username} ${user.email}`
+                                        : `${user.username}`, "?"] }), jsx(Button, { variant: "outlined", onClick: () => logout(), children: "sign in as somebody else" })] })] })) : (jsxs(Fragment, { children: [jsxs(Typography, { variant: "h6", children: ["Dearest ", customer_profile.first_name, " ", customer_profile.last_name, ", are you ready to checkout?"] }), jsxs(Stack, { spacing: 2, direction: "row", alignItems: "center", children: [jsxs(Typography, { variant: "body1", children: ["Not ", customer_profile.first_name, " ", customer_profile.last_name, "?"] }), jsx(Button, { variant: "outlined", onClick: () => logout(), children: "sign in as somebody else" })] })] })) })) : (jsx(Fragment, { children: !registerOpen ? (jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Sign in to continue" }), jsx(Typography, { variant: "body1", children: "Enter your details to sign in to your account" }), jsx(DenseSigninForm, { data: { redirect_url: "/shop/check-out" } }), jsx(Button, { variant: "outlined", onClick: () => setRegisterOpen(true), children: "Register" })] })) : (jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Register to continue" }), jsx(Typography, { variant: "body1", children: "Enter your details to register an account" }), jsx(DenseRegisterForm, { data: { redirect_url: "/shop/check-out" } }), jsx(Button, { variant: "outlined", onClick: () => setRegisterOpen(false), children: "Sign in" })] })) })) }));
+}
+
+export { Step1 as default };

package/dist/esm/umwd-components/src/components/e-commerce/checkout/Step2.js

@@ -0,0 +1,49 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import CustomerProfileDisplay from '../customer/DenseCustomerProfileDisplay.js';
+import CustomerProfileEditForm from '../customer/CustomerProfileEditForm.js';
+import isCustomerProfileCompleteEnough from '../../../lib/isCustomerProfileCompleteEnough.js';
+
+function Step2() {
+    const { user, loading, error } = useSession();
+    const [customerProfile, setCustomerProfile] = useState(user?.customer_profile ? user.customer_profile : null);
+    const completeEnough = isCustomerProfileCompleteEnough(customerProfile);
+    const [userUpdateFormOpen, setUserUpdateFormOpen] = useState(!(customerProfile && completeEnough));
+    if (loading || !user) {
+        return (jsx(Box, { sx: {
+                display: { xs: "none", md: "flex" },
+                flexGrow: 0,
+                position: "relative",
+                width: "40px",
+                height: "40px",
+            }, children: jsx(CircularProgress, {}) }));
+    }
+    if (error) {
+        return jsxs("p", { children: ["Error: ", error] });
+    }
+    useEffect(() => {
+        setCustomerProfile(user?.customer_profile ? user.customer_profile : null);
+    }, [user]);
+    return (jsx(Paper, { sx: { p: 2 }, children: userUpdateFormOpen ? (jsxs(Stack, { spacing: 2, children: [jsx(CustomerProfileEditForm, { data: customerProfile }), jsx(Button, { variant: "contained", onClick: () => {
+                        setUserUpdateFormOpen(false);
+                    }, 
+                    //disabled={!isCustomerProfileComplete(customerProfile)}
+                    disabled: !completeEnough, children: "cancel" })] })) : (jsxs(Stack, { spacing: 2, children: [jsx(CustomerProfileDisplay, { data: customerProfile }), jsx(Button, { variant: "contained", onClick: () => {
+                        setUserUpdateFormOpen(true);
+                    }, children: "Change address" })] })) }));
+}
+
+export { Step2 as default };

package/dist/esm/umwd-components/src/components/e-commerce/checkout/Step3.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Autocomplete from '@mui/material/Autocomplete';
+import Grid from '@mui/material/Grid';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import Address from '../../common/Address.js';
+
+function Step3({ user, prefersBillingAddress = true, prefersDeliveryAddress = true, delivery_options, payment_options, togglePrefersBillingAddress, togglePrefersDeliveryAddress, setCustomerInternalReference, }) {
+    return (jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 2, children: user !== null && (jsx("form", { children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: {
+                                xs: 12,
+                                md: 6
+                            }, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Delivery Options" }), jsx(Typography, { variant: "body1", children: "Your order will be delivered at this address" }), prefersDeliveryAddress &&
+                                        user.customer_profile.delivery_address ? (jsx(Address, { data: user.customer_profile.delivery_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.delivery_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersDeliveryAddress, onChange: togglePrefersDeliveryAddress }), jsx(Typography, { children: "Use company address instead" })] })), delivery_options && delivery_options.length > 0 && (jsx(Autocomplete, { options: delivery_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Delivery Options" })) }))] }) }), jsx(Grid, { size: {
+                                xs: 12,
+                                md: 6
+                            }, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Payment Options" }), jsx(Typography, { variant: "body1", children: "Your invoice will be shipped to this address" }), prefersBillingAddress &&
+                                        user.customer_profile.billing_address ? (jsx(Address, { data: user.customer_profile.billing_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.billing_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersBillingAddress, onChange: togglePrefersBillingAddress }), jsx(Typography, { children: "Use company address instead" })] })), payment_options && payment_options.length > 0 && (jsx(Autocomplete, { options: payment_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Payment Options" })) }))] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Internal Reference" }), jsx(Typography, { variant: "body1", children: "Optionaly attach an internal reference to this order" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", label: "Internal Reference", onChange: (e) => setCustomerInternalReference(e.target.value) })] }) })] }) })) }) }));
+}
+
+export { Step3 as default };