Files
bodyshop/client/src/pages/contract-detail/contract-detail.page.component.jsx
2025-01-21 17:20:46 -08:00

121 lines
4.2 KiB
JavaScript

import { Button, Col, Dropdown, Form, Row, Space, Typography } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
import { setModalContext } from "../../redux/modals/modals.actions";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
const mapDispatchToProps = (dispatch) => ({
setCourtesyCarReturnModalContext: (context) =>
dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" }))
});
export function ContractDetailPage({
contract,
job,
courtesyCar,
setCourtesyCarReturnModalContext,
refetch,
form,
saveLoading
}) {
const { t } = useTranslation();
const notification = useNotification();
return (
<div>
<Row align="middle">
<Typography.Title></Typography.Title>
</Row>
<PageHeader
title={t("contracts.labels.agreement", {
agreement_num: contract && contract.agreementnumber,
status: t(contract && contract.status)
})}
extra={
<Form.Item shouldUpdate>
{() => {
const menu = {
onClick: (e) => {
GenerateDocument(
{
name: TemplateList("courtesycarcontract")[e.key].key,
variables: { id: contract.id }
},
{},
"p",
null,
notification
);
},
items: [
{
key: "courtesy_car_contract",
label: t("contracts.actions.printcontract")
},
{
key: "courtesy_car_terms",
label: t("printcenter.courtesycarcontract.courtesy_car_terms")
},
{
key: "courtesy_car_impound",
label: t("printcenter.courtesycarcontract.courtesy_car_impound")
}
]
};
return (
<Space>
<Button type="primary" htmlType="submit" loading={saveLoading}>
{t("general.actions.save")}
</Button>
<Button
disabled={!!!contract || (contract && contract.status !== "contracts.status.out")}
onClick={() => {
setCourtesyCarReturnModalContext({
actions: { refetch },
context: {
contractId: contract.id,
courtesyCarId: courtesyCar.id
}
});
}}
>
{t("courtesycars.actions.return")}
</Button>
<Dropdown trigger="click" menu={menu}>
<Button>{t("general.labels.print")}</Button>
</Dropdown>
<ContractConvertToRo contract={contract} disabled={form.isFieldsTouched()} />
</Space>
);
}}
</Form.Item>
}
/>
<Row gutter={[16, 16]}>
<Col sm={24} md={12}>
<ContractJobBlock job={job} />
</Col>
<Col sm={24} md={12}>
<ContractCourtesyCarBlock courtesyCar={courtesyCar} />
</Col>
<Col span={24}>
<ContractFormComponent form={form} />
</Col>
</Row>
</div>
);
}
export default connect(null, mapDispatchToProps)(ContractDetailPage);