umwd-components 0.1.716 → 0.1.717

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 { useFormState } from 'react-dom';
+import { updateCustomerProfileAction } from '../../../data/actions/profile-actions.js';
+import { BusinessCredentialsFields } from './BusinessCredentials.js';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import { useState, useEffect } from 'react';
+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 { id, uuid, customer_number, first_name, last_name, email, phone, company_address, delivery_address, billing_address, business_credentials, } = data;
+    const [formState, formAction] = useFormState(updateCustomerProfileAction, 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, { item: true, xs: 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, { item: true, xs: 12, children: [jsx("input", { type: "hidden", name: "id", value: id }), 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, { item: true, xs: 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, { item: true, xs: 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, { item: true, xs: 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, { item: true, xs: 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, { 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: "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.id);
+            setSelectedValues(ids);
+            if (onChangeCallback) {
+                onChangeCallback(ids);
+            }
+        }
+        else if (value) {
+            setSelectedValues([value.id]);
+            if (onChangeCallback) {
+                onChangeCallback([value.id]);
+            }
+        }
+        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.id }, option.title));
+                }, renderInput: (params) => jsx(TextField, { ...params, label: "Customer" }), value: customerLabels.filter((customer) => selectedValues.includes(customer.id))[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,27 @@
+/*
+ * 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, { item: true, 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, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { item: true, 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,30 @@
+"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, { item: true, 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,62 @@
+"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 { useFormState } from 'react-dom';
+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 { useEffect } from 'react';
+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 { id, first_name, last_name, email, phone } = data;
+    const boundAction = updateEnduserProfileAction.bind(null, parseInt(id));
+    const [formState, formAction] = useFormState(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, { item: true, xs: 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, { item: true, xs: 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, { item: true, xs: 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 };

package/dist/esm/src/components/e-commerce/invoice/CreateInvoiceForm.js

@@ -0,0 +1,172 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useFormState } from 'react-dom';
+import { createInvoiceAction } from '../../../data/actions/e-commerce/invoices/createInvoiceAction.js';
+import Grid from '@mui/material/Grid';
+import { AddressFields } from '../../common/Address.js';
+import Divider from '@mui/material/Divider';
+import { BusinessCredentialsFields } from '../customer/BusinessCredentials.js';
+import { CustomerSelector } from '../customer/CustomerSelector.js';
+import { getSingleCustomer } from '../../../data/loaders/e-commerce/getSingleCustomer.js';
+import Checkbox from '@mui/material/Checkbox';
+import { InvoiceItemFields } from './InvoiceItemFields.js';
+import { InvoicePDFViewer } from './InvoicePDF.js';
+import { getPublicInformation } from '../../../data/loaders/public-information/getPublicInformation.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 CreateInvoiceForm({ customerLabels, revalidateCallback, handleClose, sx, }) {
+    const [formState, formAction] = useFormState(createInvoiceAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [withBillingAddress, setWithBillingAddress] = useState(false);
+    const [withDeliveryAddress, setWithDeliveryAddress] = useState(false);
+    const [customerDefaults, setCustomerDefaults] = useState(null);
+    const [invoice, setInvoice] = useState(null);
+    // Message handling effect
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    // Error handling effect
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error creating invoice",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const onChangeCustomer = async (selectedValues) => {
+        if (selectedValues.length === 0) {
+            setCustomerDefaults(null);
+            return;
+        }
+        // get single customer profile
+        const customer = await getSingleCustomer(selectedValues[0]);
+        setCustomerDefaults(customer);
+    };
+    const onChangeItems = (items) => {
+        setInvoice((prev) => {
+            if (!prev)
+                return null;
+            return {
+                ...prev,
+                items: items.map((item) => ({
+                    ...item,
+                    product: "product" in item ? item.product : undefined,
+                    item_description: "item_description" in item ? item.item_description : undefined,
+                    price_excl_vat: "price_excl_vat" in item ? item.price_excl_vat : 0,
+                    vat_rate: "vat_rate" in item ? item.vat_rate : 0,
+                    vat: "vat" in item ? item.vat : 0,
+                    price_incl_vat: "price_incl_vat" in item ? item.price_incl_vat : 0,
+                })),
+                VAT_total: items.reduce((acc, item) => {
+                    return acc + item.price_excl_vat * (item.vat_rate / 100);
+                }, 0),
+                total_excl_vat: items.reduce((acc, item) => {
+                    return acc + item.price_excl_vat;
+                }, 0),
+                total_incl_vat: items.reduce((acc, item) => {
+                    return (acc +
+                        item.price_excl_vat +
+                        item.price_excl_vat * (item.vat_rate / 100));
+                }, 0),
+            };
+        });
+    };
+    useEffect(() => {
+        async function fetchPublicInformation() {
+            const publicInformation = await getPublicInformation();
+            setInvoice((prev) => {
+                return {
+                    ...prev,
+                    seller_phone: publicInformation?.phone,
+                    seller_email: publicInformation?.email,
+                    seller_company_address: publicInformation?.address,
+                    seller_business_credentials: publicInformation?.business_credentials,
+                };
+            });
+        }
+        fetchPublicInformation();
+    }, []);
+    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: "Create Invoice" }), jsx(Typography, { variant: "body2", children: "Create a new invoice by selecting a customer or filling in the details manually" })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Choose a user" }), jsx(CustomerSelector, { customerLabels: customerLabels, onChangeCallback: onChangeCustomer }), jsx(Typography, { variant: "h6", children: "Set user details manually" }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { name: "buyer_first_name", label: "First Name", value: customerDefaults?.first_name ||
+                                            invoice?.buyer_first_name ||
+                                            "", onChange: (e) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_first_name: e.target.value,
+                                            }));
+                                        }, disabled: customerDefaults !== null ? true : false }), jsx(TextField, { name: "buyer_last_name", label: "Last Name", value: customerDefaults?.last_name || invoice?.buyer_last_name || "", onChange: (e) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_last_name: e.target.value,
+                                            }));
+                                        }, disabled: customerDefaults !== null ? true : false })] }), jsx(Typography, { variant: "body2" }), jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(AddressFields, { data: customerDefaults?.company_address, componentName: "buyer_company_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                    setInvoice((prev) => ({
+                                        ...prev,
+                                        buyer_company_address: data,
+                                    }));
+                                }, disabled: customerDefaults !== null ? true : false }), jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Divider, {}), customerDefaults !== null ? (jsx(Fragment, { children: customerDefaults.delivery_address === null ? (jsx(Typography, { variant: "body2", children: "No delivery address on file" })) : (jsx(AddressFields, { data: customerDefaults?.delivery_address, componentName: "buyer_delivery_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                        setInvoice((prev) => ({
+                                            ...prev,
+                                            buyer_delivery_address: data,
+                                        }));
+                                    }, disabled: customerDefaults !== null ? true : false })) })) : (jsxs(Fragment, { 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: "buyer_delivery_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_delivery_address: data,
+                                            }));
+                                        } }))] })), jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Divider, {}), customerDefaults !== null ? (jsx(Fragment, { children: customerDefaults.billing_address === null ? (jsx(Typography, { variant: "body2", children: "No billing address on file" })) : (jsx(AddressFields, { data: customerDefaults?.billing_address, componentName: "buyer_billing_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                        setInvoice((prev) => ({
+                                            ...prev,
+                                            buyer_billing_address: data,
+                                        }));
+                                    }, disabled: customerDefaults !== null ? true : false })) })) : (jsxs(Fragment, { 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: "buyer_billing_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_billing_address: data,
+                                            }));
+                                        } }))] })), jsx(Typography, { variant: "h6", children: "Bussiness Credentials" }), jsx(Divider, {}), jsx(BusinessCredentialsFields, { data: customerDefaults?.business_credentials, componentName: "buyer_business_credentials", componentReference: "business.credentials", onChangeCallback: (data) => {
+                                    setInvoice((prev) => ({
+                                        ...prev,
+                                        buyer_business_credentials: data,
+                                    }));
+                                }, disabled: customerDefaults !== null ? true : false })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Invoice Items" }), jsx(InvoiceItemFields, { onChangeCallback: onChangeItems })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Add a Comment" }), jsx(MarkdownEditor, { name: "comments", label: "Comments", onChangeCallback: (data) => setInvoice((prev) => {
+                                    if (!prev)
+                                        return null;
+                                    return {
+                                        ...prev,
+                                        comments: data,
+                                    };
+                                }) })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Preview the Invoice" }), invoice !== null && jsx(InvoicePDFViewer, { invoice: invoice })] }), " ", 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 Invoice", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CreateInvoiceForm };

package/dist/esm/src/components/e-commerce/invoice/InvoiceItemFields.js

@@ -0,0 +1,103 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+function InvoiceItemFields({ onChangeCallback, }) {
+    const [items, setItems] = useState([]);
+    const [nextItemDescription, setNextItemDescription] = useState("");
+    const [nextAmount, setNextAmount] = useState(0);
+    const [nextPriceExclVat, setNextPriceExclVat] = useState(0);
+    const [nextVatRate, setNextVatRate] = useState(0);
+    const handleAddItem = () => {
+        if (nextItemDescription === null || nextAmount === null) {
+            console.log("nextItemDescription or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            item_description: nextItemDescription,
+            quantity: nextAmount,
+            price_excl_vat: nextPriceExclVat,
+            vat_rate: nextVatRate,
+            vat: nextPriceExclVat * (nextVatRate / 100),
+            price_incl_vat: nextPriceExclVat * (1 + nextVatRate / 100),
+        };
+        setItems([...items, newItem]);
+        onChangeCallback && onChangeCallback([...items, newItem]);
+        // reset the fields
+        setNextItemDescription("");
+        setNextAmount(0);
+        setNextPriceExclVat(0);
+        setNextVatRate(0);
+    };
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: index + 1 + ".0.0",
+                description: item.item_description,
+                vat_rate: item.vat_rate,
+                price_excl_vat: item.price_excl_vat,
+                quantity: item.quantity,
+            };
+        });
+    };
+    return (jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Adding the items to the invoice" }), jsx(Typography, { variant: "body1" }), jsx(Typography, { variant: "body2" }), jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { id: "line_item_number", sx: [{ width: "15%" }], children: "Line Item Number" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Item Description" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Price excl. VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "VAT Rate" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Price incl. VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Amount" }), jsx(TableCell, {})] }) }), jsx(TableBody, { children: items.map((item, index) => {
+                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [{ width: "15%" }], children: [index + 1, ".0.0"] }), jsx(TableCell, { sx: [{ width: "35%" }], children: item.item_description }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat }), jsx(TableCell, { sx: { width: "10%" }, children: item.vat_rate }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat * (item.vat_rate / 100) }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat * (1 + item.vat_rate / 100) }), jsx(TableCell, { sx: { width: "5%" }, children: item.quantity }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "admin_items", value: JSON.stringify(parseItems(items)) }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { p: 2, width: "100%" }, children: [jsxs(Typography, { variant: "body1", sx: { width: "15%" }, children: [items.length + 1, ".0.0"] }), jsx(TextField, { id: "item_description", name: "item_description", label: "Item Description", sx: { width: "35%" }, value: nextItemDescription, onChange: (e) => setNextItemDescription(e.target.value) }), jsx(TextField, { id: "price_excl_vat", name: "price_excl_vat", type: "number", label: "Price", value: nextPriceExclVat, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextPriceExclVat(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextPriceExclVat(0);
+                                return;
+                            }
+                            setNextPriceExclVat(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "10%" } }), jsx(TextField, { id: "vat_rate", name: "vat_rate", type: "number", label: "VAT Rate", value: nextVatRate, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextVatRate(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextVatRate(0);
+                                return;
+                            }
+                            setNextVatRate(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "30%" } }), jsx(TextField, { id: "quantity", name: "quantity", type: "number", label: "Amount", value: nextAmount, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextAmount(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextAmount(0);
+                                return;
+                            }
+                            setNextAmount(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "5%" } }), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { InvoiceItemFields };