Files
bodyshop/client/src/components/parts-receive-modal/parts-receive-modal.container.jsx
Dave Richer 6e6addd62f feature/IO-3228-Notifications-1.6-and-Deprecations
- See Ticket for full details (Notifications restrictions, AntD deprecations)
2025-05-09 10:38:19 -04:00

105 lines
3.3 KiB
JavaScript

import { useMutation } from "@apollo/client";
import { Form, Modal } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { RECEIVE_PARTS_LINE } from "../../graphql/jobs-lines.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPartsReceive } from "../../redux/modals/modals.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import PartsReceiveModalComponent from "./parts-receive-modal.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop,
partsReceiveModal: selectPartsReceive
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("partsReceive"))
});
export function PartsReceiveModalContainer({ partsReceiveModal, toggleModalVisible, currentUser, bodyshop }) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const notification = useNotification();
const { open, context, actions } = partsReceiveModal;
const { partsorderlines } = context;
const { refetch } = actions;
const [form] = Form.useForm();
const [receivePartsLine] = useMutation(RECEIVE_PARTS_LINE);
const handleFinish = async (values) => {
logImEXEvent("parts_order_receive");
setLoading(true);
const result = await Promise.all(
values.partsorderlines.map((li) => {
return receivePartsLine({
variables: {
lineId: li.joblineid,
line: {
location: li.location,
status: bodyshop.md_order_statuses.default_received || "Received*"
},
orderLineId: li.id,
orderLine: {
status: bodyshop.md_order_statuses.default_received || "Received*"
}
}
});
})
);
result.forEach((jobLinesResult) => {
if (jobLinesResult.errors) {
notification["error"]({
message: t("parts_orders.errors.creating"),
description: JSON.stringify(jobLinesResult.errors)
});
}
});
notification["success"]({
message: t("parts_orders.successes.received")
});
setLoading(false);
if (refetch) refetch();
toggleModalVisible();
};
const initialValues = {
partsorderlines: partsorderlines
};
useEffect(() => {
if (open && !!partsorderlines) {
form.resetFields();
}
}, [open, partsorderlines, form]);
return (
<Modal
open={open}
title={t("parts_orders.labels.receive")}
onCancel={() => toggleModalVisible()}
onOk={() => form.submit()}
okButtonProps={{ loading: loading }}
destroyOnHidden
forceRender
width="50%"
>
<Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish} initialValues={initialValues}>
<PartsReceiveModalComponent form={form} />
</Form>
</Modal>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(PartsReceiveModalContainer);