umwd-components 0.1.840 → 0.1.841

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

@@ -0,0 +1,60 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState } from 'react';
+import { updateIroAction } from '../../../data/actions/e-commerce/iro/updateIroAction.js';
+import NotesDisplay from '../../logistics/note/NotesDisplay.js';
+import NoteTakingComponent from '../../logistics/note/NoteTakingComponent.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Alert from '@mui/material/Alert';
+import '@mui/material/Dialog';
+import '@mui/material/DialogActions';
+import '@mui/material/DialogContent';
+import '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import '@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 'next/headers';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function ManageIROForm({ data, sx, revalidateCallback, handleClose, role, }) {
+    // Bind documentId to the action
+    const boundUpdateIroAction = (prevState, formData) => updateIroAction(data.documentId, prevState, formData);
+    const [formState, formAction] = useActionState(boundUpdateIroAction, INITIAL_STATE);
+    const [items, setItems] = useState(data.iro_items ? data.iro_items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                id: item.documentId,
+                received_quantity: item.received_quantity,
+                registered_quantity: item.registered_quantity,
+                released_quantity: item.released_quantity,
+            };
+        });
+    };
+    return (jsx(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(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 Inbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and recieval of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: data.id, __type: "api::logistics.ipo" }], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: data.return_number })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: data.return_date })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Supplier" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: data.internal_status })] })] }) }), 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: role === "enduser" && (jsx(Fragment, {})) }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsx(Divider, {}), jsxs("form", { action: formAction, children: [data?.iro_items &&
+                                        data.iro_items.map((item, index) => {
+                                            console.log("item", item);
+                                            return (jsx(Paper, { sx: { p: 2, mb: 2 } }, index));
+                                        }), jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: [jsx(SubmitButton, { text: "Update items", loadingText: "Loading..." }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] }) }), jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) })] })] }) })] }) }));
+}
+
+export { ManageIROForm as default };

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

@@ -0,0 +1,164 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect, Suspense, Fragment, useTransition } from 'react';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { requestRmaAction } from '../../../data/actions/e-commerce/iro/requestRmaAction.js';
+import { SubmitButton } from '../../SubmitButton.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 Button from '@mui/material/Button';
+import Alert from '@mui/material/Alert';
+import Stack from '@mui/material/Stack';
+import { Divider, List, ListItem } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import NumberInput from '../../common/NumberInput.js';
+import 'next/headers';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+const ItemLines = ({ items, itemsToReturn, setItemsToReturn, selectedItems, setSelectedItems, }) => {
+    const [showCustomReason, setShowCustomReason] = useState(false);
+    const updateItemsToReturn = (index, name, newValue) => {
+        setItemsToReturn(itemsToReturn.map((item, i) => {
+            if (i === index) {
+                return { ...item, [name]: newValue };
+            }
+            return item;
+        }));
+    };
+    useEffect(() => {
+        if (items) {
+            setItemsToReturn(items.map((item) => {
+                return {
+                    line_item_number: item.line_item_number || "", // Handle undefined
+                    product: item.product?.documentId || "", // Extract string ID from Product object
+                    ordered_quantity: item.ordered_quantity,
+                    returned_quantity: 0,
+                    reason: "damaged",
+                    other_reason: "",
+                };
+            }));
+        }
+    }, [items]);
+    const [parsedItems, setParsedItems] = useState([]);
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: `${index + 1}.0.0`,
+                product: item.product,
+                returned_quantity: item.returned_quantity,
+                reason: item.reason,
+                other_reason: item.other_reason || "",
+            };
+        });
+    };
+    useEffect(() => {
+        if (itemsToReturn) {
+            setParsedItems(parseItems(itemsToReturn));
+        }
+    }, [itemsToReturn]);
+    return (jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Items" }), jsx(Typography, { variant: "body1", children: "from the items in the original order please select the items you'd like to return" }), jsx("input", { type: "hidden", name: "iro_items", value: JSON.stringify(parsedItems) }), jsx(Stack, { spacing: 1, children: items.map((item, index) => (jsxs(Fragment, { children: [jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", children: [jsx(Checkbox, { checked: selectedItems.includes(index), onChange: (e) => {
+                                            if (e.target.checked) {
+                                                setSelectedItems([...selectedItems, index]);
+                                            }
+                                            else {
+                                                setSelectedItems(selectedItems.filter((i) => i !== index));
+                                            }
+                                        } }), jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", item.line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", item.product?.product_number] }), jsxs(Typography, { variant: "body1", children: ["Quantity Ordered: ", item.ordered_quantity] })] }), selectedItems.includes(index) && (jsxs(Fragment$1, { children: [jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(NumberInput, { label: "Quantity to return", minnewvalue: 0, maxnewvalue: item.ordered_quantity, setValueCallback: (newValue) => {
+                                                    updateItemsToReturn(index, "returned_quantity", newValue);
+                                                }, sx: { width: "12rem" } }), jsx(Divider, { orientation: "vertical", flexItem: true }), jsx(Typography, { variant: "body1", sx: { width: "12rem" }, children: "Reason for return:" }), jsxs(TextField, { value: itemsToReturn[index]?.reason, select: true, SelectProps: {
+                                                    native: true,
+                                                }, variant: "outlined", fullWidth: true, onChange: (e) => {
+                                                    const reason = e.target.value;
+                                                    if (reason === "other") {
+                                                        setShowCustomReason(true);
+                                                    }
+                                                    else {
+                                                        setShowCustomReason(false);
+                                                    }
+                                                    updateItemsToReturn(index, "reason", reason);
+                                                }, children: [jsx("option", { value: "damaged", children: "Damaged on arrival" }), 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: itemsToReturn[index].other_reason, label: "Custom reason", variant: "outlined", fullWidth: true, onChange: (e) => {
+                                            const customReason = e.target.value;
+                                            updateItemsToReturn(index, "other_reason", customReason);
+                                        } }))] })), jsx(Divider, {})] }, index))) })] }) }));
+};
+const ConfirmRMADialog = ({ open, onClose, items, formState, submitCallback, }) => {
+    const [missingConfirmations, setMissingConfirmations] = useState(true);
+    const [isPending, startTransition] = useTransition();
+    const handleSubmit = () => {
+        if (submitCallback) {
+            startTransition(() => {
+                submitCallback();
+                onClose(); // Close the dialog after the transition
+            });
+        }
+    };
+    return (jsxs(Dialog, { open: open, onClose: onClose, children: [jsx(DialogTitle, { children: "Confirm RMA" }), jsxs(DialogContent, { children: [jsx(DialogContentText, { children: "Summary of items to be returned:" }), jsx(List, { children: items.map((item, index) => (jsx(ListItem, { children: `Product with ID ${item.product} - Quantity: ${item.returned_quantity}` }, index))) }), jsx(DialogContentText, { children: "Are you sure you want to request a return merchandise authorization for these items?" }), jsx(Checkbox, { onChange: (e) => setMissingConfirmations(!e.target.checked) }), jsx(Typography, { variant: "body1", children: "I confirm that the information I have provided is accurate and truthful. I understand that providing false or misleading information about the reason for returning goods may result in additional costs being charged to me. By checking this box, I acknowledge my legal responsibility for the accuracy of my declaration." })] }), jsxs(DialogActions, { children: [jsx(SubmitButton, { text: "Yes", loadingText: "Loading...", disabled: missingConfirmations, onClick: handleSubmit, loading: isPending }), jsx(Button, { onClick: onClose, children: "No" })] })] }));
+};
+/* INFO Request RMA Return Merchandise Authorization for customers*/
+function RmaForm({ opo, sx, revalidateCallback, handleClose, }) {
+    const [formState, formAction] = useActionState(requestRmaAction, INITIAL_STATE);
+    /*   const handleDeleteItem = (index: number) => {
+      const newItems = items.filter((_, i) => i !== index);
+      setItems(newItems);
+  }; */
+    const { handleAddMessage } = useSnackbar();
+    const [open, setOpen] = useState(false);
+    const [itemsToReturn, setItemsToReturn] = useState([]);
+    const [selectedItems, setSelectedItems] = useState([]);
+    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 requesting RMA",
+                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(Typography, { variant: "h6", children: "RMA Form" }) }), jsx("input", { type: "hidden", name: "opos", value: opo.documentId }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body1", children: "Please fill out the form below to request a return merchandise authorization. Due to the sensitive nature of the products, only unopened packages can be returned." }), jsx(Alert, { severity: "warning", children: "We urge you to carefully photograph the items you are returning. These pictures can be requested at a later time by our team to verify the condition of the items." })] }) }), jsx(Grid, { size: 12, children: opo.opo_items ? (jsx(Stack, { spacing: 1, children: opo.opo_items && (jsx(ItemLines, { items: opo.opo_items, itemsToReturn: itemsToReturn, setItemsToReturn: setItemsToReturn, selectedItems: selectedItems, setSelectedItems: setSelectedItems }, opo.documentId)) })) : (jsx(Typography, { variant: "body1", children: "No items" })) }), jsx(ConfirmRMADialog, { formState: formState, open: open, items: itemsToReturn.filter((item) => item.returned_quantity > 0), onClose: () => setOpen(!open), submitCallback: () => {
+                            console.log("submit callback");
+                            const formElement = document.querySelector("form");
+                            if (formElement) {
+                                formAction(new FormData(formElement));
+                            }
+                            else {
+                                formAction(new FormData());
+                            }
+                            setOpen(!open);
+                        } }), jsx(Grid, { size: 12, children: jsx(Button, { onClick: () => {
+                                console.log(formState);
+                                setOpen(!open);
+                            }, disabled: selectedItems.length === 0 ||
+                                selectedItems.reduce((acc, index) => acc + itemsToReturn[index].returned_quantity, 0) === 0, children: "Request RMA" }) })] }) }) }));
+}
+
+export { RmaForm as default };

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

@@ -0,0 +1,58 @@
+/*
+ * 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 TextualIroItemUpdater({ item, index, handleAddReport, handleUpdateQuantity, image, handleRemoveReportAtIndex, showing, }) {
+    console.log("TextualIROItemUpdater", item);
+    const { line_item_number, product, returned_quantity, received_quantity, registered_quantity, released_quantity, reports, reason, other_reason, } = item;
+    const [open, setOpen] = useState(false);
+    // these values where wrapped with useMemo before but that did not work well while updating values
+    reports != null && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "received")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const registered_reports_quantity = reports != null && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "registered")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    reports != null && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "released")
+            .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: item.product?.title }) }))] }), jsxs(Typography, { variant: "body1", children: ["Reason: ", reason, reason === "other" &&
+                            other_reason !== undefined &&
+                            `, ${other_reason}`] }), jsx(Divider, { sx: { mb: 1 } }), showing && showing.includes("received") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Received" }), jsx(TextualAmountUpdater, { label: "Received", currentValue: received_quantity, totalValue: returned_quantity, minnewvalue: 0, maxnewvalue: returned_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "received_quantity");
+                                    } })] }), jsx(Divider, { sx: { mb: 2 } })] })), showing && showing.includes("registered") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Registered" }), jsx(TextualAmountUpdater, { label: "Registered", currentValue: registered_quantity, totalValue: returned_quantity + registered_reports_quantity, minnewvalue: 0 + released_quantity, maxnewvalue: received_quantity + registered_reports_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "registered_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: "registered", minValue: -(received_quantity -
+                                            registered_quantity +
+                                            registered_reports_quantity), handleAddReport: handleAddReport })] }) })] })), showing && showing.includes("released") && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Released" }), jsx(TextualAmountUpdater, { label: "Released", currentValue: released_quantity, totalValue: returned_quantity + registered_reports_quantity, minnewvalue: 0, maxnewvalue: registered_quantity, color: "info", handleChange: (newValue) => {
+                                handleUpdateQuantity(newValue, item.documentId, "released_quantity");
+                            } })] }))] })) }, index));
+}
+
+export { TextualIroItemUpdater as default };