umwd-components 0.1.833 → 0.1.835

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

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState, Fragment } from 'react';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { useClientSideCart } from '../cart/hooks.js';
+import CartSummary from '../cart/CartSummary.js';
+import { checkoutAction } from '../../../data/actions/e-commerce/checkout-action.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+
+function Step4({ customer_reference }) {
+    const { state, isClient } = useClientSideCart();
+    const INITIAL_STATE = {
+        zodErrors: null,
+        strapiErrors: null,
+        data: null,
+        message: null,
+    };
+    const [formState, formAction] = useActionState(checkoutAction, INITIAL_STATE);
+    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(CartSummary, {}), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message })), jsxs(Typography, { children: ["Please double check all details prior to payment. ", customer_reference] }), jsx(Typography, { children: "Is this order compleet?" }), jsxs("form", { id: "paymentform", action: formAction, children: [state.items &&
+                            state.items.map((item, index) => {
+                                return (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `opo_items[${index}].product`, value: item.documentId }), jsx("input", { type: "hidden", name: `opo_items[${index}].ordered_quantity`, value: item.quantity })] }, index));
+                            }), jsx("input", { type: "hidden", name: "customer_reference", value: customer_reference }), jsx(Typography, { children: "Please click 'Proceed to payment' to proceed to the secure payment page. After completing the payment, you will automatically return to our shop. For any updates on this order, you can always access the latest information in your personal details." }), jsx(Button, { variant: "contained", form: "paymentform", type: "submit", children: "Proceed to payment" })] })] }) }));
+}
+
+export { Step4 as default };

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

@@ -0,0 +1,47 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { getSingleOrderByUuid } from '../../../data/loaders/e-commerce-loaders.js';
+import { useSearchParams } from 'next/navigation';
+import OpoDisplay from '../opo/OpoDisplay.js';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { useTheme } from '@mui/material/styles';
+
+function Step5() {
+    const searchParams = useSearchParams();
+    const [orderData, setOrderData] = useState(null);
+    const orderUuid = searchParams !== null ? searchParams.get("order") : null;
+    const theme = useTheme();
+    const medium = useMediaQuery(theme.breakpoints.down("md"));
+    useEffect(() => {
+        async function getOrder() {
+            if (orderUuid) {
+                const data = await getSingleOrderByUuid(orderUuid);
+                setOrderData(data.error ? null : data);
+            }
+        }
+        getOrder();
+    }, [orderUuid]);
+    if (!orderUuid || orderData === null) {
+        // redirect to step 4;
+        return jsx("div", { children: "No order to display..." });
+    }
+    if (!orderData) {
+        // Render a loading state or return null if you prefer not to render anything
+        return jsx("div", { children: "Loading..." });
+    }
+    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [orderData && jsx(OpoDisplay, { opo: orderData }), jsx(Typography, { variant: "h6", children: "Thank you for shopping with us!" }), jsx(Typography, { children: "You are always able to access your information and documents in your personal details." }), medium ? (jsxs(Typography, { children: ["Click on the ", jsx(MoreVertIcon, { sx: { verticalAlign: "middle" } }), " icon in the top-right bottom of the screen, then click on", " ", jsx(ListAltIcon, { sx: { verticalAlign: "middle" } }), " Orders"] })) : (jsxs(Typography, { children: ["Hover over the", " ", jsx(AccountCircleIcon, { sx: { verticalAlign: "middle" } }), " icon in the top-right corner of the screen, then click on", " ", jsx(ListAltIcon, { sx: { verticalAlign: "middle" } }), " Orders"] }))] }) }));
+}
+
+export { Step5 as default };

package/dist/esm/src/components/e-commerce/customer/BusinessCredentials.js

@@ -0,0 +1,52 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import BusinessCenterIcon from '@mui/icons-material/BusinessCenter';
+
+// TODO Move this to common
+// TODO Add eori-number to cms
+function BusinessCredentials({ data, }) {
+    const { company_name, business_entity_name, coc_number, vat_number, eori_number, vat_valid, eori_valid, } = data;
+    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(BusinessCenterIcon, {}), jsxs(Box, { children: [jsx(Typography, { variant: "h6", component: "p", children: company_name }), jsx(Typography, { variant: "body2", component: "p", children: business_entity_name }), jsx(Typography, { variant: "body2", component: "p", children: coc_number }), jsxs(Stack, { direction: "row", spacing: 1, children: [jsx(Typography, { variant: "body2", component: "p", children: vat_number }), vat_valid === false && (jsx(Typography, { variant: "body2", component: "p", color: "red", children: "Could not validate VAT number" }))] }), jsxs(Stack, { direction: "row", spacing: 1, children: [jsx(Typography, { variant: "body2", component: "p", children: eori_number }), eori_valid === false && (jsx(Typography, { variant: "body2", component: "p", color: "red", children: "Could not validate EORI number" }))] })] })] }));
+}
+// TODO Move this out of here
+function BusinessCredentialsFields({ data, componentName, componentReference, disabled = false, }) {
+    const [formData, setFormData] = useState({
+        /* [`${componentName}id`]: data?.id || "", */
+        [`${componentName}.company_name`]: data?.company_name || "",
+        [`${componentName}.business_entity_name`]: data?.business_entity_name || "",
+        [`${componentName}.coc_number`]: data?.coc_number || "",
+        [`${componentName}.vat_number`]: data?.vat_number || "",
+        [`${componentName}.eori_number`]: data?.eori_number || "",
+    });
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: value,
+        }));
+    };
+    useEffect(() => {
+        setFormData({
+            /* [`${componentName}.id`]: data?.id || "", */
+            [`${componentName}.company_name`]: data?.company_name || "",
+            [`${componentName}.business_entity_name`]: data?.business_entity_name || "",
+            [`${componentName}.coc_number`]: data?.coc_number || "",
+            [`${componentName}.vat_number`]: data?.vat_number || "",
+            [`${componentName}.eori_number`]: data?.eori_number || "",
+        });
+    }, [data]);
+    return (jsxs(Stack, { spacing: 1, direction: "row", children: [jsx(BusinessCenterIcon, {}), jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [jsx(TextField, { id: "company_name", name: `${componentName}.company_name`, label: "Company Name", value: formData[`${componentName}.company_name`], onChange: handleChange, disabled: disabled }), jsx(TextField, { id: "business_entity_name", name: `${componentName}.business_entity_name`, label: "Business Entity Name", value: formData[`${componentName}.business_entity_name`], onChange: handleChange, disabled: disabled }), jsx(TextField, { id: "coc_number", name: `${componentName}.coc_number`, label: "CoC Number", value: formData[`${componentName}.coc_number`], onChange: handleChange, disabled: disabled }), jsx(TextField, { id: "vat_number", name: `${componentName}.vat_number`, label: "VAT Number", value: formData[`${componentName}.vat_number`], onChange: handleChange, disabled: disabled }), jsx(TextField, { id: "eori_number", name: `${componentName}.eori_number`, label: "EORI Number", value: formData[`${componentName}.eori_number`], onChange: handleChange, disabled: disabled })] })] }));
+}
+
+export { BusinessCredentialsFields, BusinessCredentials as default };

package/dist/esm/src/components/e-commerce/customer/CustomerCompletenessWarning.js

@@ -0,0 +1,25 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { isCustomerProfileCompleteV2 } from '../../../lib/isCustomerProfileCompleteV2.js';
+
+const CustomerCompletenessWarning = ({ customer, }) => {
+    const customerCompleteness = isCustomerProfileCompleteV2(customer);
+    return (jsxs(Fragment, { children: [" ", !Object.values(customerCompleteness).every(Boolean) && (jsx(Tooltip, { title: jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Customer Profile Incomplete" }), jsx(Typography, { variant: "body2", children: "Please be extra careful when processing this order" }), jsx(List, { dense: true, children: Object.entries(customerCompleteness).map(([key, value]) => {
+                                if (!value) {
+                                    return (jsxs(ListItem, { children: [jsx(PriorityHighIcon, { color: "error" }), " ", key] }, key));
+                                }
+                                return null;
+                            }) })] }), children: jsx(PriorityHighIcon, { color: "error" }) }))] }));
+};
+
+export { CustomerCompletenessWarning as default };

package/dist/esm/src/components/e-commerce/customer/CustomerProfileDisplay.js

@@ -0,0 +1,64 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Divider from '@mui/material/Divider';
+import PersonIcon from '@mui/icons-material/Person';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import Address from '../../common/Address.js';
+import BusinessCredentials from './BusinessCredentials.js';
+import { StyledLink } from '../../StyledLink.js';
+import { Alert } from '@mui/material';
+import { usePathname } from 'next/navigation';
+
+/** INFO
+ * CustomerProfileDisplay is a component that displays customer profile information.
+ * This component is used in the frontend to display customer profile information
+ * but is also used to display user information in the admin panel.
+ * Only a logged in frontend customer role can edit their profile.
+ */
+function CustomerProfileDisplay({ data, }) {
+    const { first_name, last_name, email, phone, company_address, billing_address, delivery_address, business_credentials, editProfileUrl = "/user/profile/edit", completeEnough = false, orders, returns, } = data;
+    if (!data) {
+        return (jsx(Stack, { spacing: 2, children: jsx(Typography, { children: "Customer profile not available" }) }));
+    }
+    const pathname = usePathname();
+    const isCustomer = pathname.includes("/user/");
+    return (jsxs(Grid, { container: true, sx: { width: "100%" }, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(Typography, { variant: "h3", component: "h1", children: isCustomer ? "Your Profile" : "Customer Profile" }), !isCustomer && data.customer_number && (jsxs(Typography, { variant: "body1", children: ["Customer Number: ", jsx("strong", { children: data.customer_number })] }))] }), isCustomer && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) }))] }), jsx(Divider, {})] }) }), jsxs(Grid, { size: 12, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, { sx: { pt: 2 } })] }), jsxs(Grid, { size: 12, children: [jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name, " ", !first_name && !last_name && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [email, " ", !email && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [phone, " ", !phone && "N/A"] }) })] }), jsx(Divider, { sx: { pt: 2 } })] }), company_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Company address not available" }) })), delivery_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Billing address not available" }) })), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Orders" }), jsx(Paper, { children: orders && orders.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Order Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Total" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: orders.map((order, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: order.opo_number }), jsx(TableCell, { children: new Date(order.order_date).toLocaleDateString() }), jsx(TableCell, { children: order.internal_status }), jsxs(TableCell, { align: "right", children: [order.total_incl_vat, " ", order.order_currency] }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/orders?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/opos?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no orders." })) : (jsx(Typography, { children: "This user has no orders." })) })) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Returns" }), jsx(Paper, { children: returns && returns.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Return Number" }), jsx(TableCell, { children: "RMA Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: returns.map((iro, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: iro.return_number }), jsx(TableCell, { children: iro.rma_number }), jsx(TableCell, { children: new Date(iro.return_date).toLocaleDateString() }), jsx(TableCell, { children: iro.internal_status }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/returns?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/iros?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no returns." })) : (jsx(Typography, { children: "This user has no returns." })) })) })] })] }));
+}
+
+export { CustomerProfileDisplay as default };

package/dist/esm/src/components/e-commerce/customer/CustomerProfileEditForm.js

@@ -0,0 +1,77 @@
+"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 Grid from '@mui/material/Grid';
+import Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import Button from '@mui/material/Button';
+import { AddressFields } from '../../common/Address.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useActionState, useState, useEffect } from 'react';
+import { updateCustomerProfileAction } from '../../../data/actions/profile-actions.js';
+import { BusinessCredentialsFields } from './BusinessCredentials.js';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+/* interface CustomerProfileProps {
+  id: string;
+  uuid: string;
+  customer_number: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+  company_address: AddressProps;
+  delivery_address: AddressProps;
+  billing_address: AddressProps;
+  business_credentials: BusinessCredentialsProps;
+} */
+function CustomerProfileEditForm({ data, sx, revalidateCallback, handleClose, }) {
+    const { documentId, uuid, customer_number, first_name, last_name, email, phone, company_address, delivery_address, billing_address, business_credentials, } = data;
+    const boundAction = updateCustomerProfileAction.bind(null, documentId);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    const [withDeliveryAddress, setWithDeliveryAddress] = useState(typeof delivery_address !== "undefined" && delivery_address !== null);
+    const [withBillingAddress, setWithBillingAddress] = useState(typeof billing_address !== "undefined" && billing_address !== null);
+    const { refreshSession } = useSession();
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                refreshSession();
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating profile",
+                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 Profile" }), jsx(Typography, { variant: "body2", children: "Update your personal and business information" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Personal Details" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsx(TextField, { id: "first_name", name: "first_name", label: "First Name", defaultValue: first_name }), jsx(TextField, { id: "last_name", name: "last_name", label: "Last Name", defaultValue: last_name }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email, disabled: true }), jsx(TextField, { id: "phone", name: "phone", label: "Phone", defaultValue: phone })] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials }) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(AddressFields, { componentName: "company_address", componentReference: "common.address", data: company_address }) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withDeliveryAddress, checked: withDeliveryAddress, onChange: () => setWithDeliveryAddress(!withDeliveryAddress) }), jsx(Typography, { children: "Use a different address for delivery" })] }), withDeliveryAddress && (jsx(AddressFields, { componentName: "delivery_address", componentReference: "common.address", data: delivery_address }))] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withBillingAddress, checked: withBillingAddress, onChange: () => setWithBillingAddress(!withBillingAddress) }), jsx(Typography, { children: "Use a different address for billing" })] }), withBillingAddress && (jsx(AddressFields, { componentName: "billing_address", componentReference: "common.address", data: billing_address }))] })] }), 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: "Save changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CustomerProfileEditForm as default };

package/dist/esm/src/components/e-commerce/customer/CustomerSelector.js

@@ -0,0 +1,42 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, createElement } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+const CustomerSelector = ({ customerLabels, currentValue, multiple = false, onChangeCallback, }) => {
+    const [selectedValues, setSelectedValues] = useState(currentValue || []);
+    const handleCustomerChange = (event, value, reason, details) => {
+        if (Array.isArray(value)) {
+            const ids = value.map((customer) => customer.documentId);
+            setSelectedValues(ids);
+            if (onChangeCallback) {
+                onChangeCallback(ids);
+            }
+        }
+        else if (value) {
+            setSelectedValues([value.documentId]);
+            if (onChangeCallback) {
+                onChangeCallback([value.documentId]);
+            }
+        }
+        else {
+            setSelectedValues([]);
+            if (onChangeCallback) {
+                onChangeCallback([]);
+            }
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx(Autocomplete, { multiple: multiple, options: customerLabels, getOptionLabel: (option) => option.title, filterSelectedOptions: true, onChange: handleCustomerChange, renderOption: (props, option) => {
+                    return (createElement("li", { ...props, key: option.documentId }, option.title));
+                }, renderInput: (params) => jsx(TextField, { ...params, label: "Customer" }), value: customerLabels.filter((customer) => selectedValues.includes(customer.documentId))[0] || null }), jsx("input", { type: "hidden", name: "customer", value: multiple
+                    ? JSON.stringify(selectedValues) || ""
+                    : selectedValues[0] || "" })] }));
+};
+
+export { CustomerSelector, CustomerSelector as default };

package/dist/esm/src/components/e-commerce/customer/DenseCustomerProfileDisplay.js

@@ -0,0 +1,42 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import PersonIcon from '@mui/icons-material/Person';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import Address from '../../common/Address.js';
+import BusinessCredentials from './BusinessCredentials.js';
+
+function CustomerProfileDisplay({ data, }) {
+    if (!data) {
+        return (jsx(Stack, { spacing: 2, children: jsx(Typography, { children: "Customer profile not available" }) }));
+    }
+    const { first_name = "", last_name, email, phone, company_address, billing_address, delivery_address, business_credentials, } = data;
+    return (jsxs(Stack, { spacing: 2, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, {}), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: email }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: phone }) })] }), jsx(Divider, {}), jsxs(Grid, { container: true, children: [company_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Typography, { children: "Company address not available" })), delivery_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: jsx(Typography, { children: "Billing address not available" }) }))] })] }));
+}
+
+export { CustomerProfileDisplay as default };

package/dist/esm/src/components/e-commerce/enduser/EnduserProfileDisplay.js

@@ -0,0 +1,33 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Alert from '@mui/material/Alert';
+import PersonIcon from '@mui/icons-material/Person';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import { StyledLink } from '../../StyledLink.js';
+import { usePathname } from 'next/navigation';
+
+function EnduserProfileDisplay({ data, }) {
+    const { first_name, last_name, email, phone, editProfileUrl = "/dashboard/admin/user/profile/edit", completeEnough = false, } = data;
+    const pathname = usePathname();
+    // Check if the current path is for an enduser profile
+    const isEnduser = pathname.includes("admin/user/");
+    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [isEnduser && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) })), jsx(Divider, {}), jsx(Grid, { container: true, spacing: 2, sx: { width: "100%" }, children: jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(Typography, { children: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(Typography, { children: phone })] })] })] }) })] }) }));
+}
+
+export { EnduserProfileDisplay as default };

package/dist/esm/src/components/e-commerce/enduser/EnduserProfileEditForm.js

@@ -0,0 +1,61 @@
+"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 Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useActionState, useEffect } from 'react';
+import { updateEnduserProfileAction } from '../../../data/actions/e-commerce/enduser/profile-actions.js';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import PersonIcon from '@mui/icons-material/Person';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function EnduserProfileEditForm({ data, sx, revalidateCallback, handleClose, }) {
+    const { documentId, first_name, last_name, email, phone } = data;
+    const boundAction = updateEnduserProfileAction.bind(null, documentId);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const { refreshSession } = useSession();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                refreshSession();
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error performing action",
+                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 Profile" }), jsx(Typography, { variant: "body1", children: "Update your profile information" })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(TextField, { id: "email", name: "email", label: "Email", type: "email", defaultValue: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(TextField, { id: "phone", name: "phone", label: "Phone", type: "tel", defaultValue: phone })] })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save Changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { EnduserProfileEditForm as default };