umwd-components 0.1.793 → 0.1.794

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

@@ -1,84 +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 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/src/components/e-commerce/opo/OpoDisplay.js

@@ -1,21 +0,0 @@
-/*
- * 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';
-
-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(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(Typography, { variant: "body1", sx: { mt: 2 }, children: "Contents of the order:" }), jsx(OpoSummary, { opo: opo })] }));
-}
-
-export { OpoDisplay as default };

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

@@ -1,18 +0,0 @@
-/*
- * 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/src/components/e-commerce/opo/OpoItemUpdater.js

@@ -1,61 +0,0 @@
-/*
- * 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: [
-                                    {
-                                        documentId: item.documentId,
-                                        __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/src/components/e-commerce/opo/OpoStatusIndicator.js

@@ -1,55 +0,0 @@
-"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/src/components/e-commerce/opo/OpoSummary.js

@@ -1,30 +0,0 @@
-/*
- * 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/src/components/e-commerce/opo/OpoSummaryRow.js

@@ -1,18 +0,0 @@
-/*
- * 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/src/components/e-commerce/opo/PaymentStatusIndicator.js

@@ -1,27 +0,0 @@
-/*
- * 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/src/components/e-commerce/opo/TextualManageOpoForm.js

@@ -1,195 +0,0 @@
-/*
- * 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';
-
-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, }) {
-    const updateOpoWithIdAction = updateOpoAction.bind(null, opo.documentId);
-    const [formState, formAction] = useActionState(updateOpoWithIdAction, INITIAL_STATE);
-    const { handleAddMessage } = useSnackbar();
-    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"]);
-    // Message handling
-    useEffect(() => {
-        if (formState?.message) {
-            handleAddMessage({
-                message: formState.message,
-                severity: formState.severity || "info",
-            });
-            if (formState.severity === "success") {
-                revalidateCallback?.();
-                handleClose?.();
-            }
-        }
-    }, [formState?.message]);
-    // Error handling
-    useEffect(() => {
-        if (formState?.strapiErrors) {
-            handleAddMessage({
-                message: formState.strapiErrors.message || "Error updating OPO",
-                severity: "error",
-            });
-        }
-    }, [formState?.strapiErrors]);
-    // Items state update
-    useEffect(() => {
-        if (opo.opo_items) {
-            setItems(opo.opo_items ? opo.opo_items : []);
-        }
-    }, [opo]);
-    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 {
-                        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) => "documentId" in report);
-        const preReports = reportsOnItem.filter((report) => !("documentId" in report));
-        preReports.splice(index, 1);
-        const newReports = [...dbReports, ...preReports];
-        newItems[itemIndex].reports = newReports;
-        setItems(newItems);
-    };
-    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 Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage picking, packing and shipping of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [
-                                            { id: opo.documentId, __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(Typography, { variant: "body1", fontWeight: "medium", 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, children: [jsx(Typography, { variant: "body1", children: "Show:" }), options.map((option) => (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: showing.includes(option), onChange: (e) => {
-                                                if (e.target.checked) {
-                                                    setShowing([...showing, option]);
-                                                }
-                                                else {
-                                                    setShowing(showing.filter((item) => item !== option));
-                                                }
-                                            } }), label: option.charAt(0).toUpperCase() + option.slice(1) }, 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/src/components/e-commerce/opo/TextualOpoItemUpdater.js

@@ -1,55 +0,0 @@
-/*
- * 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
-    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 + packed_quantity, maxnewvalue: ordered_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 };