Files
bodyshop/client/src/components/dms-post-form/dms-post-form.component.jsx

450 lines
17 KiB
JavaScript

// DmsPostForm updated
import { DeleteFilled, DownOutlined, ReloadOutlined } from "@ant-design/icons";
import {
Button,
Card,
Divider,
Dropdown,
Form,
Input,
InputNumber,
Select,
Space,
Statistic,
Switch,
Typography
} from "antd";
import Dinero from "dinero.js";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { determineDmsType } from "../../utils/determineDMSType";
import { selectBodyshop } from "../../redux/user/user.selectors";
import i18n from "../../translations/i18n";
import dayjs from "../../utils/day";
import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { useSocket } from "../../contexts/SocketIO/useSocket";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { useEffect, useMemo, useState } from "react";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({});
export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
const {
treatments: { Fortellis }
} = useSplitTreatments({
attributes: {},
names: ["Fortellis"],
splitKey: bodyshop.imexshopid
});
const [form] = Form.useForm();
const { t } = useTranslation();
const { socket: wsssocket } = useSocket();
// Figure out DMS once and reuse
const dms = useMemo(() => determineDmsType(bodyshop), [bodyshop]);
// RR advisors state
const [advisors, setAdvisors] = useState([]);
const [advLoading, setAdvLoading] = useState(false);
// Normalize advisor fields coming from various shapes
const getAdvisorNumber = (a) => a?.advisorId;
const getAdvisorLabel = (a) => `${a?.firstName} ${a?.lastName}`?.trim();
const fetchRrAdvisors = () => {
if (!wsssocket) return;
setAdvLoading(true);
// Listen for the server's broadcast
const onResult = (payload) => {
try {
const list = payload?.result ?? payload ?? [];
setAdvisors(Array.isArray(list) ? list : []);
} finally {
setAdvLoading(false);
wsssocket.off("rr-get-advisors:result", onResult);
}
};
wsssocket.once("rr-get-advisors:result", onResult);
// Emit with the correct event name + parse the ack shape
wsssocket.emit("rr-get-advisors", { departmentType: "B" }, (ack) => {
if (ack?.ok) {
const list = ack.result ?? [];
setAdvisors(Array.isArray(list) ? list : []);
} else if (ack) {
console.error("Something went wrong fetching DMS Advisors");
}
setAdvLoading(false);
wsssocket.off("rr-get-advisors:result", onResult);
});
};
useEffect(() => {
if (dms === "rr") fetchRrAdvisors();
}, [dms, bodyshop?.id]);
const handlePayerSelect = (value, index) => {
form.setFieldsValue({
payers: form.getFieldValue("payers").map((payer, mapIndex) => {
if (index !== mapIndex) return payer;
const cdkPayer =
bodyshop.cdk_configuration.payers && bodyshop.cdk_configuration.payers.find((i) => i.name === value);
if (!cdkPayer) return payer;
return {
...cdkPayer,
dms_acctnumber: cdkPayer.dms_acctnumber,
controlnumber: job?.[cdkPayer.control_type]
};
})
});
};
const handleFinish = (values) => {
// 1) RR takes precedence regardless of Fortellis split
if (dms === "rr") {
// values will now include advisorNo from the RR dropdown
wsssocket.emit("rr-export-job", {
bodyshopId: bodyshop?.id,
jobId: job.id,
job,
txEnvelope: values
});
} else {
// 2) Fallback to existing behavior
if (Fortellis.treatment === "on") {
wsssocket.emit("fortellis-export-job", {
jobid: job.id,
txEnvelope: {
...values,
SubscriptionID: bodyshop.cdk_dealerid
}
});
} else {
// cdk/pbs/etc.
socket.emit(`${dms}-export-job`, {
jobid: job.id,
txEnvelope: values
});
}
}
if (logsRef?.current) {
logsRef.current.scrollIntoView({ behavior: "smooth" });
}
};
return (
<Card title={t("jobs.labels.dms.postingform")}>
<Form
form={form}
layout="vertical"
onFinish={handleFinish}
initialValues={{
story: `${t("jobs.labels.dms.defaultstory", {
ro_number: job.ro_number,
ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`.trim(),
ins_co_nm: job.ins_co_nm || "N/A",
clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${job.po_number || ""}`
}).trim()}.${
job.area_of_damage && job.area_of_damage.impact1
? " " +
t("jobs.labels.dms.damageto", {
area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
})
: ""
}`.slice(0, 239),
inservicedate: dayjs(
`${(job.v_model_yr && (job.v_model_yr < 100 ? (job.v_model_yr >= (dayjs().year() + 1) % 100 ? 1900 + parseInt(job.v_model_yr) : 2000 + parseInt(job.v_model_yr)) : job.v_model_yr)) || 2019}-01-01`
)
}}
>
<LayoutFormRow grow>
{dms !== "rr" && (
<Form.Item
name="journal"
label={t("jobs.fields.dms.journal")}
initialValue={bodyshop.cdk_configuration?.default_journal}
rules={[{ required: true }]}
>
<Input />
</Form.Item>
)}
{/* RR Advisor Number dropdown */}
{dms === "rr" && (
<Form.Item
name="advisorNo"
label={t("jobs.fields.dms.advisor")}
rules={[{ required: true }]}
style={{ minWidth: 260 }}
>
<Select
loading={advLoading}
placeholder={t("general.actions.select", "Select...")}
popupMatchSelectWidth
options={advisors
.map((a) => {
const value = getAdvisorNumber(a);
if (value == null) return null;
return { value: String(value), label: getAdvisorLabel(a) || String(value) };
})
.filter(Boolean)}
notFoundContent={advLoading ? t("general.loading") : t("general.none")}
/>
</Form.Item>
)}
<Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
<InputNumber disabled />
</Form.Item>
<Form.Item name="kmout" label={t("jobs.fields.kmout")} initialValue={job?.kmout} rules={[{ required: true }]}>
<InputNumber disabled />
</Form.Item>
{dms === "rr" && (
<Form.Item label=" " colon={false}>
<Button onClick={fetchRrAdvisors} icon={<ReloadOutlined />} loading={advLoading}>
{t("general.actions.refresh")}
</Button>
</Form.Item>
)}
</LayoutFormRow>
{bodyshop.cdk_dealerid && (
<div>
<LayoutFormRow style={{ justifyContent: "center" }} grow>
<Form.Item name="dms_make" label={t("jobs.fields.dms.dms_make")} rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="dms_model" label={t("jobs.fields.dms.dms_model")} rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
<DateTimePicker isDateOnly />
</Form.Item>
</LayoutFormRow>
<Space>
<DmsCdkMakes form={form} job={job} />
<DmsCdkMakesRefetch />
<Form.Item name="dms_unsold" label={t("jobs.fields.dms.dms_unsold")} initialValue={false}>
<Switch />
</Form.Item>
<Form.Item name="dms_model_override" label={t("jobs.fields.dms.dms_model_override")} initialValue={false}>
<Switch />
</Form.Item>
</Space>
</div>
)}
<Form.Item name="story" label={t("jobs.fields.dms.story")} rules={[{ required: true }]}>
<Input.TextArea maxLength={240} />
</Form.Item>
<Divider />
<Space size="large" wrap align="center">
<Statistic
title={t("jobs.fields.ded_amt")}
value={Dinero(job.job_totals.totals.custPayable.deductible).toFormat()}
/>
<Statistic
title={t("jobs.labels.total_cust_payable")}
value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
/>
<Statistic
title={t("jobs.labels.net_repairs")}
value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
/>
</Space>
{dms !== "rr" && (
<Form.List name={["payers"]}>
{(fields, { add, remove }) => (
<div>
{fields.map((field, index) => (
<Form.Item key={field.key}>
<Space wrap>
<Form.Item
label={t("jobs.fields.dms.payer.name")}
key={`${index}name`}
name={[field.name, "name"]}
rules={[{ required: true }]}
>
<Select style={{ minWidth: "15rem" }} onSelect={(value) => handlePayerSelect(value, index)}>
{bodyshop.cdk_configuration?.payers &&
bodyshop.cdk_configuration.payers.map((payer) => (
<Select.Option key={payer.name}>{payer.name}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("jobs.fields.dms.payer.dms_acctnumber")}
key={`${index}dms_acctnumber`}
name={[field.name, "dms_acctnumber"]}
rules={[{ required: true }]}
>
<Input disabled />
</Form.Item>
<Form.Item
label={t("jobs.fields.dms.payer.amount")}
key={`${index}amount`}
name={[field.name, "amount"]}
rules={[{ required: true }]}
>
<CurrencyInput min={0} />
</Form.Item>
<Form.Item
label={
<div>
{t("jobs.fields.dms.payer.controlnumber")}{" "}
<Dropdown
menu={{
items:
bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
key: idx,
label: key.name,
onClick: () => {
form.setFieldsValue({
payers: form.getFieldValue("payers").map((row, mapIndex) => {
if (index !== mapIndex) return row;
return {
...row,
controlnumber: key.controlnumber
};
})
});
}
})) ?? []
}}
>
<a href=" #" onClick={(e) => e.preventDefault()}>
<DownOutlined />
</a>
</Dropdown>
</div>
}
key={`${index}controlnumber`}
name={[field.name, "controlnumber"]}
rules={[{ required: true }]}
>
<Input />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
const payers = form.getFieldValue("payers");
const row = payers?.[index];
const cdkPayer =
bodyshop.cdk_configuration.payers &&
bodyshop.cdk_configuration.payers.find((i) => i && row && i.name === row.name);
if (i18n.exists(`jobs.fields.${cdkPayer?.control_type}`))
return <div>{cdkPayer && t(`jobs.fields.${cdkPayer?.control_type}`)}</div>;
else if (i18n.exists(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)) {
return <div>{cdkPayer && t(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)}</div>;
} else {
return null;
}
}}
</Form.Item>
<DeleteFilled onClick={() => remove(field.name)} />
</Space>
</Form.Item>
))}
<Form.Item>
<Button
disabled={!(fields.length < 3)}
onClick={() => {
if (fields.length < 3) add();
}}
style={{ width: "100%" }}
>
{t("jobs.actions.dms.addpayer")}
</Button>
</Form.Item>
</div>
)}
</Form.List>
)}
<Form.Item shouldUpdate>
{() => {
// 1) Sum allocated payers
let totalAllocated = Dinero();
const payers = form.getFieldValue("payers") || [];
payers.forEach((payer) => {
totalAllocated = totalAllocated.add(Dinero({ amount: Math.round((payer?.amount || 0) * 100) }));
});
// 2) Subtotal from socket.allocationsSummary (existing behavior)
const totals = socket
? socket.allocationsSummary &&
socket.allocationsSummary.reduce(
(acc, val) => ({
totalSale: acc.totalSale.add(Dinero(val.sale)),
totalCost: acc.totalCost.add(Dinero(val.cost))
}),
{ totalSale: Dinero(), totalCost: Dinero() }
)
: { totalSale: Dinero(), totalCost: Dinero() };
const discrep = totals ? totals.totalSale.subtract(totalAllocated) : Dinero();
// 3) New: validation gates
const advisorOk = dms !== "rr" || !!form.getFieldValue("advisorNo");
// Require at least one complete payer row
const payersOk =
dms === "rr" ||
(payers.length > 0 &&
payers.every((p) => p?.name && p.dms_acctnumber && (p.amount ?? "") !== "" && p.controlnumber));
// 4) Disable rules:
// - For non-RR: keep the original discrepancy rule (must have summary and zero discrepancy)
// - For RR: ignore discrepancy rule, but require advisor + payer rows
const nonRrDiscrepancyGate = dms !== "rr" && (socket.allocationsSummary ? discrep.getAmount() !== 0 : true);
const disablePost = !advisorOk || !payersOk || nonRrDiscrepancyGate;
return (
<Space size="large" wrap align="center">
<Statistic
title={t("jobs.labels.subtotal")}
value={(totals ? totals.totalSale : Dinero()).toFormat()}
/>
<Typography.Title>-</Typography.Title>
<Statistic title={t("jobs.labels.dms.totalallocated")} value={totalAllocated.toFormat()} />
<Typography.Title>=</Typography.Title>
<Statistic
title={t("jobs.labels.dms.notallocated")}
valueStyle={{ color: discrep.getAmount() === 0 ? "green" : "red" }}
value={discrep.toFormat()}
/>
<Button disabled={disablePost} htmlType="submit">
{t("jobs.actions.dms.post")}
</Button>
</Space>
);
}}
</Form.Item>
</Form>
</Card>
);
}