umwd-components 0.1.840 → 0.1.841

package/dist/esm/umwd-components/src/components/e-commerce/opo/OPOItemFields.js

@@ -0,0 +1,84 @@
+/*
+ * 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 OPOItemFields({ productsArr }) {
+    const [items, setItems] = useState([]);
+    const [nextProductName, setNextProductName] = useState(null);
+    const [nextAmount, setNextAmount] = useState(0);
+    const [selectedProduct, setSelectedProduct] = useState([]);
+    const handleAddItem = () => {
+        if (nextProductName === null || nextAmount === null) {
+            console.log("nextProductName or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            product: nextProductName,
+            amount: nextAmount,
+        };
+        setItems([...items, newItem]);
+        // reset the fields
+        setNextProductName(null);
+        setNextAmount(0);
+        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,
+                ordered_quantity: item.amount,
+            };
+        });
+    };
+    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: "70%" }], children: "Product Number" }), jsx(TableCell, { sx: [{ width: "15%" }], children: "Amount" }), 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: "70%" }], children: [item.product.product_number, " | ", item.product.title] }), jsx(TableCell, { sx: { width: "15%" }, children: item.amount }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { onClick: () => handleDeleteItem(index), children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "opo_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%" } }), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { OPOItemFields };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoDisplay.js

@@ -0,0 +1,22 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import TableBody from '@mui/material/TableBody';
+import { OpoSummary } from './OpoSummary.js';
+import { PaymentStatusIndicator } from './PaymentStatusIndicator.js';
+import { ShippingStatusIndicator } from './ShippingStatusIndicator.js';
+
+function OpoDisplay({ opo }) {
+    return (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Order Details" }), jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Order number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Payment status" }), jsx(TableCell, { children: "Shipping status" })] }) }), jsx(TableBody, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: opo.opo_number }), jsx(TableCell, { children: opo.order_date }), jsx(TableCell, { children: jsx(PaymentStatusIndicator, { payment_status: opo?.payments?.[0]?.payment_status, provider_id: opo?.payments?.[0]?.provider_id }) }), jsx(TableCell, { children: jsx(ShippingStatusIndicator, { shipping_status: opo?.parcel_reference?.parcel_status, provider_id: opo?.parcel_reference?.external_id }) })] }) })] }), jsx(Typography, { variant: "body1", sx: { mt: 2 }, children: "Contents of the order:" }), jsx(OpoSummary, { opo: opo })] }));
+}
+
+export { OpoDisplay as default };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoItemDisplay.js

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function OpoItemDisplay({ item, index, image }) {
+    const { line_item_number, product, ordered_quantity, picked_quantity, packed_quantity, shipped_quantity, reports, } = item;
+    return (jsxs(Stack, { spacing: 1, children: [item && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product?.title }) }))] })), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Ordered" }), jsx(Typography, { variant: "h6", children: ordered_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Received" }), jsx(Typography, { variant: "h6", children: picked_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Registered" }), jsx(Typography, { variant: "h6", children: packed_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Released" }), jsx(Typography, { variant: "h6", children: shipped_quantity })] })] }), reports?.length > 0 && (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "body1", children: "Reports:" }), jsx(ReportsDisplay, { reports: reports.filter((report) => "documentId" in report && !("pre_report" in report)) })] }))] }, index));
+}
+
+export { OpoItemDisplay as default };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoItemUpdater.js

@@ -0,0 +1,61 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Divider from '@mui/material/Divider';
+import Collapse from '@mui/material/Collapse';
+import { AmountUpdater } from '../../common/AmountUpdater.js';
+import ArrowButtonDownIcon from '@mui/icons-material/ArrowDropDown';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportMakingComponent from '../../logistics/report/ReportMakingComponent.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function OpoItemUpdater({ item, index, handleUpdateQuantity, image, 
+// revalidates the selectedOpo
+revalidateCallback, }) {
+    const { line_item_number, product, ordered_quantity, picked_quantity, packed_quantity, shipped_quantity, reports, } = item;
+    const [open, setOpen] = useState(false);
+    React.useMemo(() => {
+        return reports !== undefined && reports.length > 0
+            ? reports
+                .filter((report) => report.type === "picked")
+                .reduce((a, b) => a + b.quantity, 0)
+            : 0;
+    }, [reports]);
+    const packed_reports_quantity = React.useMemo(() => {
+        return reports !== undefined && reports.length > 0
+            ? reports
+                .filter((report) => report.type === "packed")
+                .reduce((a, b) => a + b.quantity, 0)
+            : 0;
+    }, [reports]);
+    React.useMemo(() => {
+        return reports !== undefined && reports.length > 0
+            ? reports
+                .filter((report) => report.type === "shipped")
+                .reduce((a, b) => a + b.quantity, 0)
+            : 0;
+    }, [reports]);
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: product?.title }) }))] }), jsx(Typography, { variant: "body2", children: "Picked" }), jsx(AmountUpdater, { currentValue: picked_quantity, totalValue: ordered_quantity + -packed_reports_quantity, minnewvalue: 0 + packed_quantity + -packed_reports_quantity, maxnewvalue: ordered_quantity + -packed_reports_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "picked_quantity");
+                    } }), jsx(Typography, { variant: "body2", children: "Packed" }), jsx(AmountUpdater, { currentValue: packed_quantity, totalValue: ordered_quantity, minnewvalue: 0 + shipped_quantity, maxnewvalue: picked_quantity + packed_reports_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "packed_quantity");
+                    }, offsetEnd: packed_reports_quantity }), jsx(Divider, { sx: { p: 0 }, children: jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Irregularities / Corrections" }), jsx(IconButton, { onClick: () => setOpen(!open), children: jsx(ArrowButtonDownIcon, {}) })] }) }), jsx(Collapse, { in: open, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body2", children: "Here you can report and correct for damages wrong items etc. Do not forget to click the button!" }), jsx(ReportsDisplay, { reports: reports.filter((report) => "documentId" in report &&
+                                    typeof report.documentId === "string") }), jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "packed", minValue: -(picked_quantity + packed_reports_quantity), maxValue: 0, related: [
+                                    {
+                                        id: item.id,
+                                        __type: "api::e-commerce.opo-item",
+                                    },
+                                ], revalidateCallback: revalidateCallback })] }) }), jsx(Typography, { variant: "body2", children: "Shipped" }), jsx(AmountUpdater, { currentValue: shipped_quantity, totalValue: ordered_quantity, minnewvalue: 0, maxnewvalue: packed_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "shipped_quantity");
+                    } })] })) }, index));
+}
+
+export { OpoItemUpdater as default };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoStatusIndicator.js

@@ -0,0 +1,55 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+const statusColorArray = [
+    { status: "placed", color: "info" },
+    { status: "ordered", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "external_shipping_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const enduserStatusColorArray = [
+    { status: "placed", color: "warning" },
+    { status: "ordered", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "external_shipping_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const dispatcherStatusColorArray = [
+    { status: "placed", color: "info" },
+    { status: "ordered", color: "warning" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "external_shipping_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const OpoStatusIndicator = ({ status, role, }) => {
+    const readableStatus = status
+        ? status
+            .split("_")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ")
+        : "Unknown";
+    return (jsx(Chip, { label: readableStatus, color: role === "enduser"
+            ? enduserStatusColorArray.find((s) => s.status === status)?.color ||
+                "default"
+            : role === "dispatcher"
+                ? dispatcherStatusColorArray.find((s) => s.status === status)
+                    ?.color || "default"
+                : statusColorArray.find((s) => s.status === status)?.color ||
+                    "default" }));
+};
+
+export { OpoStatusIndicator };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoSummary.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableFooter from '@mui/material/TableFooter';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import { OpoSummaryRow } from './OpoSummaryRow.js';
+
+/** TODO: Currently the only accepted currency is EUR / €, in the furture it should be
+ * possible to use multiple currencies and this function should render differently */
+function OpoSummary({ opo }) {
+    const { opo_items } = opo;
+    if (!opo_items) {
+        return jsx(Typography, { children: "Loading..." });
+    }
+    console.log("opo_items", opo_items);
+    return (jsx(Box, { sx: { p: { xs: 1, md: 2 } }, children: opo_items != null ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Amount" }), jsx(TableCell, { children: "Product Title" }), jsx(TableCell, { children: "Price Excl. VAT" }), jsx(TableCell, { children: "Price Incl. VAT" })] }) }), jsx(TableBody, { children: opo_items &&
+                        opo_items.map((item) => (jsx(OpoSummaryRow, { data: item }, item.documentId))) }), jsxs(TableFooter, { children: [jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 3, align: "right", children: "Total excl VAT" }), jsxs(TableCell, { colSpan: 1, align: "left", children: ["\u20AC ", opo.total_excl_vat] })] }), jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 3, align: "right", children: "Total incl VAT" }), jsxs(TableCell, { colSpan: 1, align: "left", children: ["\u20AC ", opo.total_incl_vat] })] })] })] })) : (jsx(Typography, { children: "No products in cart" })) }));
+}
+
+export { OpoSummary };

package/dist/esm/umwd-components/src/components/e-commerce/opo/OpoSummaryRow.js

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+
+function OpoSummaryRow({ data }) {
+    const { documentId, ordered_quantity, product } = data;
+    return (jsxs(TableRow, { children: [jsx(TableCell, { children: ordered_quantity }), jsx(TableCell, { children: product?.title }), jsx(TableCell, { children: product?.price?.price ? `€ ${product.price.price}` : "no information" }), jsx(TableCell, { children: product?.price?.price_incl_vat
+                    ? `€ ${product.price.price_incl_vat}`
+                    : "no information" })] }));
+}
+
+export { OpoSummaryRow };

package/dist/esm/umwd-components/src/components/e-commerce/opo/PaymentStatusIndicator.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+const statusColorArray = [
+    { status: "open", color: "warning" },
+    { status: "pending", color: "warning" },
+    { status: "authorized", color: "info" },
+    { status: "paid", color: "success" },
+    { status: "canceled", color: "error" },
+    { status: "expired", color: "error" },
+    { status: "failed", color: "error" },
+];
+const PaymentStatusIndicator = ({ payment_status, provider_id = "", }) => {
+    const readableStatus = payment_status
+        ? payment_status.charAt(0).toUpperCase() + payment_status.slice(1)
+        : "Unknown";
+    return (jsx(Chip, { label: readableStatus, color: statusColorArray.find((s) => s.status === payment_status)?.color ||
+            "default" }));
+};
+
+export { PaymentStatusIndicator };

package/dist/esm/umwd-components/src/components/e-commerce/opo/ShippingStatusIndicator.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+const statusColorArray = [
+    { status: "open", color: "warning" },
+    { status: "pending", color: "warning" },
+    { status: "authorized", color: "info" },
+    { status: "paid", color: "success" },
+    { status: "canceled", color: "error" },
+    { status: "expired", color: "error" },
+    { status: "failed", color: "error" },
+];
+const ShippingStatusIndicator = ({ shipping_status, provider_id = "" }) => {
+    const readableStatus = shipping_status
+        ? shipping_status.charAt(0).toUpperCase() + shipping_status.slice(1)
+        : "Unknown";
+    return (jsx(Chip, { label: readableStatus, color: statusColorArray.find((s) => s.status === shipping_status)?.color ||
+            "default" }));
+};
+
+export { ShippingStatusIndicator };

package/dist/esm/umwd-components/src/components/e-commerce/opo/TextualManageOpoForm.js

@@ -0,0 +1,201 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import { updateOpoAction } from '../../../data/actions/e-commerce/opo/updateOpoAction.js';
+import { UploadBase64MediaForm } from '../../common/media/UploadBase64MediaForm.js';
+import downloadBase64File from '../../../data/loaders/common/media/downloadBase64File.js';
+import TextualOpoItemUpdater from './TextualOpoItemUpdater.js';
+import OpoItemDisplay from './OpoItemDisplay.js';
+import NotesDisplay from '../../logistics/note/NotesDisplay.js';
+import NoteTakingComponent from '../../logistics/note/NoteTakingComponent.js';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { confirmationService } from '../../../data/services/common/confirmation-service.js';
+import { cancellationService } from '../../../data/services/common/cancellation-service.js';
+import { FormControlLabel, Checkbox, List, ListItem, TextField } from '@mui/material';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import BusinessIcon from '@mui/icons-material/Business';
+import DescriptionIcon from '@mui/icons-material/Description';
+import UpdateIcon from '@mui/icons-material/Update';
+import { OpoStatusIndicator } from './OpoStatusIndicator.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { UploadMinioMediaForm } from '../../common/media/minio/UploadMinioMediaForm.js';
+import { StyledLink } from '../../StyledLink.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+const options = ["picked", "packed", "shipped", "reports"];
+function ConfirmFormDialog({ open, handleClose, orderID, currentStatus, revalidateCallback, }) {
+    return (jsxs(Dialog, { open: open, onClose: handleClose, children: [jsx(DialogTitle, { children: "Confirm Order" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { children: "Are you sure you want to confirm this order?" }), jsxs(Typography, { children: ["Current status: ", currentStatus] })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: (e) => {
+                            confirmationService("opos", [orderID]);
+                            revalidateCallback && revalidateCallback();
+                            handleClose();
+                        }, children: "Yes" }), jsx(Button, { variant: "contained", onClick: handleClose, children: "No" })] })] }));
+}
+function CancelOpoDialog({ open, handleClose, orderID, revalidateCallback, }) {
+    const [reason, setRoason] = useState("");
+    const [reasonError, setReasonError] = useState("");
+    const { handleAddMessage } = useSnackbar();
+    const handleCancel = async () => {
+        if (reason.length < 5) {
+            setReasonError("Please provide a reason for the cancellation (min 5 characters)");
+            return;
+        }
+        setReasonError("");
+        try {
+            await cancellationService("opos", orderID, reason);
+            handleAddMessage({
+                message: "Order cancelled successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to cancel order",
+                severity: "error",
+            });
+        }
+    };
+    return (jsxs(Dialog, { open: open, onClose: handleClose, children: [jsx(DialogTitle, { children: "Cancel Return" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { children: "Are you sure you want to cancel this order?" }), jsxs(List, { children: [jsx(ListItem, { children: "By cancelling this order you will update it's status from ordered to cancelled" }), jsx(ListItem, { children: "Please provide a reason for the cancellation" }), jsx(ListItem, { children: "The customer will be notified about the cancellation and of the reason for the cancellation" })] }), jsx(TextField, { label: "Cancellation reason", name: "reason", multiline: true, rows: 4, fullWidth: true, variant: "outlined", value: reason, onChange: (e) => setRoason(e.target.value), placeholder: "Please provide a reason for the cancellation", error: !!reasonError, helperText: reasonError })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "outlined", onClick: handleClose, children: "Close" }), jsx(Button, { variant: "contained", color: "error", onClick: handleCancel, children: "Confirm Cancellation" })] })] }));
+}
+function TextualManageOPOForm({ opo, sx, revalidateCallback, handleClose, role, }) {
+    // Bind documentId to the action
+    const updateOpoWithIdAction = updateOpoAction.bind(null, opo.documentId);
+    const [formState, formAction] = useActionState(updateOpoWithIdAction, INITIAL_STATE);
+    const [items, setItems] = useState(opo.opo_items ? opo.opo_items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+    const [showing, setShowing] = useState(["picked", "packed", "shipped", "reports"]);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                documentId: item.documentId,
+                ordered_quantity: item.ordered_quantity,
+                picked_quantity: item.picked_quantity,
+                packed_quantity: item.packed_quantity,
+                shipped_quantity: item.shipped_quantity,
+                reports: item.reports?.map((report) => {
+                    return {
+                        id: "id" in report ? report.id : undefined,
+                        documentId: "documentId" in report ? report.documentId : undefined,
+                        quantity: report.quantity,
+                        content: report.content,
+                        type: report.type,
+                    };
+                }) || [],
+            };
+        });
+    };
+    const handleUpdateQuantity = (value, itemID, type) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        newItems[index][type] = value;
+        setItems(newItems);
+    };
+    /** INFO
+     * - merely presetting the report in the items values, this is not a db update
+     * - only used with Textual form */
+    const handleAddReport = (report, itemID) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        const reportsOnItem = newItems[index]?.reports || [];
+        const newReports = [...reportsOnItem, report];
+        if (newItems[index]?.reports == undefined) {
+            newItems[index] = { ...newItems[index], reports: [] };
+        }
+        newItems[index].reports = newReports;
+        setItems(newItems);
+    };
+    const handleRemoveReportAtIndex = (itemID, index) => {
+        const newItems = [...items];
+        const itemIndex = newItems.findIndex((item) => item.documentId === itemID);
+        const reportsOnItem = newItems[itemIndex]?.reports || [];
+        const dbReports = reportsOnItem.filter((report) => "id" in report);
+        const preReports = reportsOnItem.filter((report) => !("id" in report));
+        preReports.splice(index, 1);
+        const newReports = [...dbReports, ...preReports];
+        newItems[itemIndex].reports = newReports;
+        setItems(newItems);
+    };
+    const { handleAddMessage } = useSnackbar();
+    // Message handling
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    // Error handling
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating OPO",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    // Items state update
+    useEffect(() => {
+        if (opo.opo_items) {
+            setItems(opo.opo_items ? opo.opo_items : []);
+        }
+    }, [opo]);
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Outbound Sales Order" }), jsx(Typography, { variant: "body1", children: "Manage picking, packing and shipping of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: opo.id, __type: "api::e-commerce.opo" }], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(NumbersIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: opo.opo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Custom reference" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: opo.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(CalendarTodayIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Order Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: opo.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer" }), jsx(StyledLink, { target: "_self", href: `/dashboard/admin/e-commerce/customers?selectedCustomerId=${opo.customer?.documentId}`, children: opo.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(UpdateIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Order Status" }), jsx(OpoStatusIndicator, { status: opo.internal_status })] })] }) }) }), role === "enduser" && (jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [(opo.internal_status === "placed" ||
+                                    opo.internal_status === "external_shipping_process") && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be available to the dispatcher" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: opo.documentId, currentStatus: opo.internal_status, revalidateCallback: revalidateCallback })] })), (opo.internal_status === "placed" ||
+                                    opo.internal_status === "ordered") && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(CancelOpoDialog, { open: cancelDialogOpen, handleClose: () => setCancelDialogOpen(false), orderID: opo.documentId, revalidateCallback: revalidateCallback })] }))] }) }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: opo.delivery_note ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: opo.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
+                                                    downloadBase64File(`api/opos/${opo.documentId}`, "delivery_note");
+                                                }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the delivery note for this order" }), jsx(Divider, {}), jsx(UploadBase64MediaForm, { reference: "api::e-commerce.opo", refID: opo.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/ipos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) }) })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Minio Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(UploadMinioMediaForm, { reference: "api::e-commerce.opo", refID: opo.documentId, field: "minio", multiple: false, revalidateCallback: revalidateCallback }) })] }) }), opo?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: opo.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 2, component: Paper, p: 1, sx: {
+                                    bgcolor: "background.default",
+                                    border: "1px solid",
+                                    borderColor: "divider",
+                                    boxShadow: "none",
+                                }, children: [jsx(Typography, { variant: "body2", color: "text.secondary", children: "Show:" }), options.map((option) => (jsx(FormControlLabel, { control: jsx(Checkbox, { size: "small", checked: showing.includes(option), onChange: (e) => {
+                                                if (e.target.checked) {
+                                                    setShowing([...showing, option]);
+                                                }
+                                                else {
+                                                    setShowing(showing.filter((item) => item !== option));
+                                                }
+                                            } }), label: jsx(Typography, { variant: "body2", color: "text.secondary", children: option.charAt(0).toUpperCase() + option.slice(1) }), sx: { mr: 0 } }, option)))] }), opo.internal_status === "placed" && (jsx(Alert, { severity: "warning", children: "Before confirmation you cannot update the items" })), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) }), items &&
+                                        items.map((item, index) => {
+                                            return (jsx(Paper, { sx: { p: 2, mb: 2 }, children: opo.internal_status === "placed" ||
+                                                    opo.internal_status === "external_shipping_process" ||
+                                                    opo.internal_status === "done" ||
+                                                    opo.internal_status === "cancelled" ? (jsx(OpoItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(TextualOpoItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, handleAddReport: handleAddReport, image: item?.product?.image, handleRemoveReportAtIndex: handleRemoveReportAtIndex, revalidateCallback: revalidateCallback, showing: showing })) }, index));
+                                        }), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Close" })), opo.internal_status !== "placed" &&
+                                                opo.internal_status !== "external_shipping_process" &&
+                                                opo.internal_status !== "done" &&
+                                                opo.internal_status !== "cancelled" && (jsx(SubmitButton, { text: "Update items", loadingText: "Saving...", variant: "contained" }))] })] })] }) })] }) }));
+}
+
+export { TextualManageOPOForm as default };

package/dist/esm/umwd-components/src/components/e-commerce/opo/TextualOpoItemUpdater.js

@@ -0,0 +1,55 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Divider from '@mui/material/Divider';
+import Collapse from '@mui/material/Collapse';
+import { TextualAmountUpdater } from '../../common/TextualAmountUpdater.js';
+import ArrowButtonDownIcon from '@mui/icons-material/ArrowDropDown';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+import PreReportsDisplay from '../../logistics/report/PreReportsDisplay.js';
+import SimpleReportFields from '../../logistics/report/SimpleReportFields.js';
+import Box from '@mui/material/Box';
+
+function TextualOpoItemUpdater({ item, index, handleAddReport, handleUpdateQuantity, image, handleRemoveReportAtIndex, showing, }) {
+    const { line_item_number, product, ordered_quantity, picked_quantity, packed_quantity, shipped_quantity, reports, } = item;
+    const [open, setOpen] = useState(false);
+    // these values where wrapped with useMemo before but that did not work well while updating values
+    const picked_reports_quantity = Array.isArray(reports) && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "picked")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const packed_reports_quantity = Array.isArray(reports) && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "packed")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    Array.isArray(reports) && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "shipped")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const dbReports = item.reports?.filter((report) => "id" in report) || [];
+    const preReports = item.reports?.filter((report) => Boolean("id" in report) === false) ||
+        [];
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: product?.title }) }))] }), jsx(Divider, { sx: { mb: 1 } }), showing && showing.includes("picked") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Picked" }), jsx(TextualAmountUpdater, { label: "Picked", currentValue: picked_quantity, totalValue: ordered_quantity, minnewvalue: 0, maxnewvalue: ordered_quantity + picked_reports_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "picked_quantity");
+                                    } })] }), jsx(Divider, { sx: { mb: 2 } })] })), showing && showing.includes("packed") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Packed" }), jsx(TextualAmountUpdater, { label: "Packed", currentValue: packed_quantity, totalValue: ordered_quantity + packed_reports_quantity, minnewvalue: 0 + shipped_quantity, maxnewvalue: picked_quantity + packed_reports_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "packed_quantity");
+                                    } })] }), jsx(Divider, { sx: { mb: 2 } })] })), showing && showing.includes("reports") && (jsxs(Box, { sx: { mb: 2 }, children: [jsx(Divider, { sx: { p: 0 }, children: jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Irregularities / Corrections" }), jsx(IconButton, { onClick: () => setOpen(!open), children: jsx(ArrowButtonDownIcon, {}) })] }) }), jsx(Collapse, { in: open, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body2", children: "Here you can report and correct for damages wrong items etc. Do not forget to click the button!" }), jsx(ReportsDisplay, { reports: dbReports }), jsx(PreReportsDisplay, { itemID: item.documentId, reports: preReports, handleRemoveReportAtIndex: handleRemoveReportAtIndex }), jsx(SimpleReportFields, { itemID: item.documentId, content: "", type: "packed", minValue: -(picked_quantity -
+                                            packed_quantity +
+                                            packed_reports_quantity), handleAddReport: handleAddReport })] }) })] })), showing && showing.includes("shipped") && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Shipped" }), jsx(TextualAmountUpdater, { label: "Shipped", currentValue: shipped_quantity, totalValue: ordered_quantity + packed_reports_quantity, minnewvalue: 0, maxnewvalue: packed_quantity, color: "info", handleChange: (newValue) => {
+                                handleUpdateQuantity(newValue, item.documentId, "shipped_quantity");
+                            } })] }))] })) }, index));
+}
+
+export { TextualOpoItemUpdater as default };