bananas-commerce-admin
Version:
What's this, an admin for apes?
179 lines • 8.02 kB
JavaScript
import React, { useEffect, useState } from "react";
import { LoadingButton } from "@mui/lab";
import { Box } from "@mui/material";
import CircularProgress from "@mui/material/CircularProgress";
import Grid from "@mui/material/Grid2";
import { useSnackbar } from "notistack";
import Card from "../../../../components/Card";
import CardActions from "../../../../components/Card/CardActions";
import CardCancelButton from "../../../../components/Card/CardCancelButton";
import { CardContent } from "../../../../components/Card/CardContent";
import CardHeader from "../../../../components/Card/CardHeader";
import CardSaveButton from "../../../../components/Card/CardSaveButton";
import Chip from "../../../../components/Chip";
import { useApi } from "../../../../contexts/ApiContext";
import { useCardContext } from "../../../../contexts/CardContext";
import { useDialog } from "../../../../contexts/DialogContext";
import { useUser } from "../../../../contexts/UserContext";
import { hasPermission } from "../../../../util/has_permission";
import RecipientCard from "../RecipientCard";
import ShipmentCard from "../ShipmentCard";
import CancelOrderButton from "./CancelOrderButton";
import OrderDestinationCard from "./OrderDestinationCard";
import OrderItemsTable from "./OrderItemsTable";
import OrderStateChip from "./OrderStateChip";
const OrderDetail = ({ order }) => {
const api = useApi();
const { enqueueSnackbar } = useSnackbar();
const [details, setDetails] = useState(null);
const [buttonsLoading, setButtonsLoading] = useState(false);
const [selected, setSelected] = useState([]);
const { user } = useUser();
const loadDetails = () => {
setDetails(null);
api.operations["fulfillment.order:detail"]
.call({
params: {
reference: order.reference,
},
})
.then(async (response) => setDetails(await response.json()));
};
useEffect(() => {
if (details == null)
loadDetails();
});
const openDialog = useDialog();
const markAsArrived = async () => {
if (!(await openDialog("Are you sure?", "This will notify the customer that the order is ready for pick up"))) {
return;
}
setButtonsLoading(true);
api.operations["fulfillment.order:ready-for-pickup"]
.call({
params: { reference: order.reference },
body: selected,
})
.then((response) => {
if (response.ok) {
enqueueSnackbar("Order is now ready for pickup", {
variant: "success",
});
}
else {
enqueueSnackbar("Failed to mark order as ready for pickup", {
variant: "error",
});
throw response;
}
})
.finally(() => {
setButtonsLoading(false);
loadDetails();
});
};
const markAsDelivered = async () => {
if (!(await openDialog("Are you sure?", "This will mark the order as delivered"))) {
return;
}
setButtonsLoading(true);
api.operations["fulfillment.order:delivered"]
.call({
params: { reference: order.reference },
})
.then((response) => {
if (response.ok) {
enqueueSnackbar("Successfully marked order as delivered", {
variant: "success",
});
}
else {
enqueueSnackbar("Failed to mark order as delivered", {
variant: "error",
});
throw response;
}
})
.finally(() => {
setButtonsLoading(false);
loadDetails();
});
};
const doCancel = async () => {
if (!(await openDialog("Are you sure?", "This will fully cancel the order and release the authorized payment back to the customer"))) {
return;
}
api.operations["fulfillment.order:cancel"]
.call({
params: { reference: order.reference },
})
.then((response) => {
if (response.ok) {
enqueueSnackbar("Order cancelled", {
variant: "success",
});
}
else {
enqueueSnackbar("Failed to cancel order", {
variant: "error",
});
throw response;
}
})
.finally(() => {
setButtonsLoading(false);
loadDetails();
});
};
const StatusButton = () => {
const { isEditing } = useCardContext();
if (details == null)
return null;
const props = {
variant: "contained",
color: "secondary",
loading: buttonsLoading,
disabled: buttonsLoading,
};
if (["DELIVERED", "CANCELLED"].includes(details.state)) {
return null;
}
if (isEditing) {
props.disabled ||= selected.length === 0;
return (React.createElement(LoadingButton, { ...props, onClick: markAsArrived }, "Ready for pickup"));
}
if (isEditing && ["IN_TRANSIT", "READY_FOR_PICKUP", "SENT"].includes(details.state)) {
return (React.createElement(LoadingButton, { ...props, onClick: markAsDelivered }, "Delivered"));
}
return null;
};
return details != null ? (React.createElement(Grid, { container: true, spacing: 2 },
React.createElement(Grid, { size: { xs: 12 } },
React.createElement(Card, { isEditable: details.destination_type === "STORE" && details.state === "PENDING" },
React.createElement(CardHeader, { action: React.createElement(Grid, { container: true, spacing: 2 },
React.createElement(Grid, { sx: { mt: 0.5 } },
details.channel ? React.createElement(Chip, { label: details.channel, sx: { mr: 1 } }) : null,
React.createElement(OrderStateChip, { element: details, sx: { mr: 1 } }))), sx: {
borderBottomWidth: 1,
borderBottomStyle: "solid",
borderBottomColor: "divider",
}, title: "Order" },
details.channel ? React.createElement(Chip, { label: details.channel, sx: { mr: 1 } }) : null,
React.createElement(OrderStateChip, { element: details, sx: { mr: 1 } })),
React.createElement(CardContent, { sx: { padding: 0 } },
React.createElement(OrderItemsTable, { isPending: details.state === "PENDING", items: details.items, onSelect: setSelected })),
hasPermission(user, "fulfillment.change_order") && (React.createElement(CardActions, null,
React.createElement(Box, { sx: { width: "100%" } },
React.createElement(CancelOrderButton, { isPending: details.state === "PENDING", onClick: doCancel })),
React.createElement(CardCancelButton, null),
React.createElement(CardSaveButton, null),
React.createElement(StatusButton, null))))),
React.createElement(Grid, { size: { xs: 4 } },
React.createElement(OrderDestinationCard, { order: details })),
details.shipment ? (React.createElement(Grid, { size: { xs: 4 } },
React.createElement(ShipmentCard, { shipment: details.shipment }))) : null,
details.recipient ? (React.createElement(Grid, { size: { xs: 4 } },
React.createElement(RecipientCard, { email: details.email, phone: details.phone, recipient: details.recipient }))) : null)) : (React.createElement(CircularProgress, { color: "secondary" }));
};
export default OrderDetail;
//# sourceMappingURL=OrderDetail.js.map