umwd-components 0.1.793 → 0.1.794

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

@@ -1,171 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useActionState, 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 { 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] = useActionState(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, { size: 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, { size: 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, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Invoice Items" }), jsx(InvoiceItemFields, { onChangeCallback: onChangeItems })] }), jsxs(Grid, { size: 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, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Preview the Invoice" }), invoice !== null && jsx(InvoicePDFViewer, { invoice: invoice })] }), " ", 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 Invoice", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
-}
-
-export { CreateInvoiceForm };

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

@@ -1,103 +0,0 @@
-/*
- * 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 };

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

@@ -1,139 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1 } from 'react';
-import IconButton from '@mui/material/IconButton';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-
-// Dynamic imports to prevent ESM issues during build
-let PDFRenderer = null;
-const loadPDFRenderer = async () => {
-    if (typeof window !== "undefined" && !PDFRenderer) {
-        PDFRenderer = await import('@react-pdf/renderer');
-    }
-    return PDFRenderer;
-};
-// TODO Think of a proper solution for theming this file for multiple clients
-// Font.register({
-//   family: "Roboto",
-//   fonts: [
-//     { src: roboto }, // font-style: normal, font-weight: normal
-//     { src: robotoBold, fontWeight: "bold" },
-//     { src: robotoItalic, fontStyle: "italic" },
-//   ],
-// });
-// Styles will be created when PDF renderer is loaded
-const createStyles = (StyleSheet) => StyleSheet.create({
-    page: {
-        flexDirection: "column",
-        backgroundColor: "#E4E4E4",
-        // fontFamily: "Roboto",
-    },
-    header: {
-        padding: 10,
-        // backgroundColor: lightThemeOptions.palette.primary.main,
-        // color: lightThemeOptions.palette.primary.contrastText,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    logo: {
-        width: 24,
-        height: 24,
-        marginRight: 10,
-    },
-    section: {
-        margin: 10,
-        padding: 10,
-        fontSize: 12,
-    },
-    row: {
-        flexDirection: "row",
-    },
-    rowSection: {
-        flex: 1,
-    },
-    productRowSection: {
-        flex: 1,
-        width: 1 / 6,
-    },
-    h1: { fontSize: 28 },
-    h2: { fontSize: 24, fontWeight: "bold" },
-    h3: { fontSize: 16, fontWeight: "bold" },
-});
-// Create Document Component
-const InvoicePDF = ({ props }) => {
-    const { invoice } = props;
-    const [pdfComponents, setPdfComponents] = useState(null);
-    const [styles, setStyles] = useState(null);
-    useEffect(() => {
-        const initializePDF = async () => {
-            const renderer = await loadPDFRenderer();
-            if (renderer) {
-                setPdfComponents(renderer);
-                setStyles(createStyles(renderer.StyleSheet));
-            }
-        };
-        initializePDF();
-    }, []);
-    if (!pdfComponents || !styles) {
-        return jsx(CircularProgress, {});
-    }
-    const { Document, Page, View, Text } = pdfComponents;
-    const { seller_business_credentials, seller_company_address, buyer_company_address, buyer_business_credentials, type, invoice_number, } = invoice;
-    console.log("type", type);
-    const renderCreditNote = () => (jsx(Document, { title: `credit_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "CREDIT NOTE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
-    if (type === "credit") {
-        return renderCreditNote();
-    }
-    if (type === "proforma") {
-        return (jsx(Document, { title: `proforma_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h2, children: "PROFORMA INVOICE" }), jsx(Text, { style: { fontSize: 10, marginTop: 5 }, children: "This is not a final invoice and cannot be used for tax purposes" })] }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
-    }
-    // Default invoice
-    return (jsx(Document, { title: `invoice_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "INVOICE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
-};
-function InvoiceDownloadLink({ invoice }) {
-    const [pdfComponents, setPdfComponents] = useState(null);
-    useEffect(() => {
-        const initializePDF = async () => {
-            const renderer = await loadPDFRenderer();
-            setPdfComponents(renderer);
-        };
-        initializePDF();
-    }, []);
-    if (!pdfComponents) {
-        return (jsx(IconButton, { disabled: true, children: jsx(CircularProgress, { size: 20 }) }));
-    }
-    const { PDFDownloadLink } = pdfComponents;
-    return (jsx(PDFDownloadLink, { document: jsx(InvoicePDF, { props: { invoice: invoice } }), fileName: `invoice_${invoice?.invoice_number}`, children: jsx(IconButton, { children: jsx(PictureAsPdfIcon, {}) }) }));
-}
-function InvoicePDFViewer({ invoice }) {
-    const [open, setOpen] = useState(false);
-    const [pdfComponents, setPdfComponents] = useState(null);
-    useEffect(() => {
-        const initializePDF = async () => {
-            const renderer = await loadPDFRenderer();
-            setPdfComponents(renderer);
-        };
-        initializePDF();
-    }, []);
-    if (!pdfComponents) {
-        return (jsx(IconButton, { disabled: true, children: jsx(CircularProgress, { size: 20 }) }));
-    }
-    const { PDFViewer } = pdfComponents;
-    return (jsxs(Fragment, { children: [jsx(IconButton, { onClick: () => setOpen(true), children: jsx(PictureAsPdfIcon, {}) }), jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogContent, { children: jsx(PDFViewer, { style: {
-                                width: "100%",
-                                minHeight: "70vh",
-                            }, children: jsx(InvoicePDF, { props: { invoice: invoice } }) }) }), jsx(DialogActions, { children: jsx(Button, { variant: "contained", onClick: () => setOpen(false), children: "Close" }) })] })] }));
-}
-
-export { InvoiceDownloadLink, InvoicePDFViewer, InvoicePDF as default };

package/dist/esm/src/components/e-commerce/iro/CreateIROForm.js

@@ -1,58 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useActionState, useEffect } from 'react';
-import { useSnackbar } from '../../../context/common/SnackbarContext.js';
-import { createIroAction } from '../../../data/actions/e-commerce/iro/createIroAction.js';
-import { SubmitButton } from '../../SubmitButton.js';
-import { CustomerSelector } from '../customer/CustomerSelector.js';
-import { IROItemFields } from './IROItemFields.js';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Checkbox from '@mui/material/Checkbox';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const INITIAL_STATE = {
-    zodErrors: null,
-    strapiErrors: null,
-    data: null,
-    message: null,
-    severity: null,
-};
-/* INFO For use by admin only */
-function CreateIroForm({ sx, revalidateCallback, handleClose, customerLabels, productLabels, }) {
-    const [returnConfirmed, setReturnConfirmed] = useState(false);
-    const [formState, formAction] = useActionState(createIroAction, 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 creating return order",
-                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: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new return order" }) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(Typography, { variant: "body2", children: "Select the customer for which you want to create a return order" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products that should be in this return order" }), jsx(IROItemFields, { productsArr: productLabels })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this return? Confirming this order means you are sure the customer wants to return the products and you are ready to process the return." }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: returnConfirmed, checked: returnConfirmed, onChange: () => setReturnConfirmed(!returnConfirmed) }), returnConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this return order" }))] }), jsx("input", { name: "status", type: "hidden", value: returnConfirmed ? "returning" : "requested" })] }), " ", 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: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
-}
-
-export { CreateIroForm as default };

package/dist/esm/src/components/e-commerce/iro/IROItemFields.js

@@ -1,109 +0,0 @@
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } 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 ProductSelector from '../products/ProductSelector.js';
-import '../../../../node_modules/dayjs/dayjs.min.js';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { useTheme } from '@mui/material/styles';
-
-function IROItemFields({ productsArr }) {
-    const [items, setItems] = useState([]);
-    const [nextProductName, setNextProductName] = useState(null);
-    const [nextAmount, setNextAmount] = useState(0);
-    const [nextReason, setNextReason] = useState("damaged");
-    const [nextOtherReason, setNextOtherReason] = useState("");
-    const [selectedProduct, setSelectedProduct] = useState([]);
-    const [showCustomReason, setShowCustomReason] = useState(false);
-    const handleAddItem = () => {
-        if (nextAmount === null) {
-            console.log("nextProductName or nextAmount is null");
-            return;
-        }
-        const newItem = {
-            product: nextProductName,
-            returned_quantity: nextAmount,
-            reason: nextReason,
-            other_reason: nextOtherReason,
-        };
-        setItems([...items, newItem]);
-        // reset the fields
-        setNextProductName(null);
-        setNextAmount(0);
-        setNextReason("damaged");
-        setNextOtherReason("");
-        setSelectedProduct([]);
-    };
-    const handleDeleteItem = (index) => {
-        const newItems = items.filter((_, i) => i !== index);
-        setItems(newItems);
-    };
-    useTheme();
-    const parseItems = (items) => {
-        return items.map((item, index) => {
-            return {
-                line_item_number: `${index + 1}.0.0`,
-                product: item.product?.documentId || "",
-                returned_quantity: item.returned_quantity,
-                reason: nextReason,
-                other_reason: nextOtherReason,
-            };
-        });
-    };
-    const [parsedItems, setParsedItems] = useState([]);
-    useEffect(() => {
-        setParsedItems(parseItems(items));
-    }, [items]);
-    return (jsxs(Stack, { spacing: 2, children: [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: "Product Number" }), jsx(TableCell, { sx: [{ width: "15%" }], children: "Amount" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Reason" }), jsx(TableCell, { sx: [] })] }) }), jsx(TableBody, { children: items.map((item, index) => {
-                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [{ width: "15%" }], children: [index + 1, ".0.0"] }), jsxs(TableCell, { sx: [{ width: "35%" }], children: [typeof item.product === "object"
-                                                ? item.product?.product_number
-                                                : item.product, " ", "|", " ", typeof item.product === "object" ? item.product?.title : ""] }), jsx(TableCell, { sx: { width: "15%" }, children: item.returned_quantity }), jsx(TableCell, { sx: { width: "35%" }, children: item.reason === "other" ? item.other_reason : item.reason }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { onClick: () => handleDeleteItem(index), children: jsx(DeleteIcon, {}) }) })] }, index));
-                        }) })] }), jsx("input", { type: "hidden", name: "iro_items", value: JSON.stringify(parsedItems) }), 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"] }), productsArr && (jsx(ProductSelector, { productNames: productsArr, currentValue: selectedProduct, sx: { width: "70%" }, multiple: false, onChangeCallback: (ids) => {
-                            const product = productsArr.find((p) => p.documentId === ids[0]);
-                            setNextProductName(product || null);
-                            setSelectedProduct(ids);
-                        } })), jsx(TextField, { id: "amount", name: "amount", 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.amount != undefined ? true : false}
-                              helperText={formErrors.amount} */
-                        sx: { width: "15%" } }), jsxs(TextField, { value: nextReason, select: true, SelectProps: {
-                            native: true,
-                        }, variant: "outlined", fullWidth: !(nextReason === "other"), sx: { minWidth: "25%" }, onChange: (e) => {
-                            const reason = e.target.value;
-                            if (reason === "other") {
-                                setShowCustomReason(true);
-                            }
-                            else {
-                                setShowCustomReason(false);
-                            }
-                            setNextReason(e.target.value);
-                        }, children: [jsx("option", { value: "damaged", children: "Damaged" }), jsx("option", { value: "not_as_described", children: "Not as described" }), jsx("option", { value: "wrong_item", children: "Wrong item" }), jsx("option", { value: "other", children: "Other" })] }), showCustomReason && (jsx(TextField, { value: nextOtherReason, label: "Custom reason", variant: "outlined", fullWidth: true, onChange: (e) => {
-                            const customReason = e.target.value;
-                            setNextOtherReason(customReason);
-                        } })), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
-}
-
-export { IROItemFields };