316 lines
11 KiB
JavaScript
316 lines
11 KiB
JavaScript
import { WarningFilled } from "@ant-design/icons";
|
|
import { Form, Input, InputNumber, Space } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import { DateFormatter } from "../../utils/DateFormatter";
|
|
import dayjs from "../../utils/day";
|
|
//import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
|
|
import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
|
|
import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
|
|
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
|
|
import {
|
|
default as DateTimePicker,
|
|
default as FormDateTimePicker
|
|
} from "../form-date-time-picker/form-date-time-picker.component";
|
|
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
|
|
import InputPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
|
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
|
import ContractFormJobPrefill from "./contract-form-job-prefill.component";
|
|
|
|
export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
{!create && <FormFieldsChanged form={form} />}
|
|
<LayoutFormRow>
|
|
{!create && (
|
|
<Form.Item
|
|
label={t("contracts.fields.status")}
|
|
name="status"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<ContractStatusSelector />
|
|
</Form.Item>
|
|
)}
|
|
<Form.Item
|
|
label={t("contracts.fields.start")}
|
|
name="start"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<FormDateTimePicker />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.scheduledreturn")} name="scheduledreturn">
|
|
<FormDateTimePicker />
|
|
</Form.Item>
|
|
{!create && (
|
|
<Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
|
|
<FormDateTimePicker />
|
|
</Form.Item>
|
|
)}
|
|
{create && (
|
|
<Form.Item shouldUpdate={(p, c) => p.scheduledreturn !== c.scheduledreturn}>
|
|
{() => {
|
|
const insuranceOver =
|
|
selectedCar &&
|
|
selectedCar.insuranceexpires &&
|
|
dayjs(selectedCar.insuranceexpires)
|
|
.endOf("day")
|
|
.isBefore(dayjs(form.getFieldValue("scheduledreturn")));
|
|
if (insuranceOver)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.insuranceexpired")}
|
|
</span>
|
|
</Space>
|
|
);
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
)}
|
|
</LayoutFormRow>
|
|
<LayoutFormRow grow>
|
|
<Form.Item
|
|
label={t("contracts.fields.kmstart")}
|
|
name="kmstart"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<InputNumber />
|
|
</Form.Item>
|
|
{create && (
|
|
<Form.Item shouldUpdate={(p, c) => p.kmstart !== c.kmstart || p.scheduledreturn !== c.scheduledreturn}>
|
|
{() => {
|
|
const mileageOver =
|
|
selectedCar && selectedCar.nextservicekm
|
|
? selectedCar.nextservicekm <= form.getFieldValue("kmstart")
|
|
: false;
|
|
const dueForService =
|
|
selectedCar &&
|
|
selectedCar.nextservicedate &&
|
|
dayjs(selectedCar.nextservicedate)
|
|
.endOf("day")
|
|
.isSameOrBefore(dayjs(form.getFieldValue("scheduledreturn")));
|
|
if (mileageOver || dueForService)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.cardueforservice")}
|
|
</span>
|
|
<span>{`${selectedCar && selectedCar.nextservicekm} km`}</span>
|
|
<span>
|
|
<DateFormatter>{selectedCar && selectedCar.nextservicedate}</DateFormatter>
|
|
</span>
|
|
</Space>
|
|
);
|
|
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
)}
|
|
{!create && (
|
|
<Form.Item label={t("contracts.fields.kmend")} name="kmend">
|
|
<InputNumber />
|
|
</Form.Item>
|
|
)}
|
|
<Form.Item label={t("contracts.fields.damage")} name="damage">
|
|
<Input.TextArea />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
<LayoutFormRow grow>
|
|
<Form.Item
|
|
label={t("contracts.fields.fuelout")}
|
|
name="fuelout"
|
|
span={8}
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<CourtesyCarFuelSlider />
|
|
</Form.Item>
|
|
{!create && (
|
|
<Form.Item label={t("contracts.fields.fuelin")} name="fuelin" span={8}>
|
|
<CourtesyCarFuelSlider />
|
|
</Form.Item>
|
|
)}
|
|
</LayoutFormRow>
|
|
<LayoutFormRow header={t("contracts.labels.driverinformation")}>
|
|
<Space wrap>
|
|
{create && selectedJobState && (
|
|
<ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
|
|
)}
|
|
{/* {<ContractLicenseDecodeButton form={form} />} */}
|
|
</Space>
|
|
</LayoutFormRow>
|
|
<LayoutFormRow noDivider={true}>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_dlnumber")}
|
|
name="driver_dlnumber"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
shouldUpdate={(p, c) => p.driver_dlexpiry !== c.driver_dlexpiry || p.scheduledreturn !== c.scheduledreturn}
|
|
>
|
|
{() => {
|
|
const dlExpiresBeforeReturn = dayjs(form.getFieldValue("driver_dlexpiry")).isBefore(
|
|
dayjs(form.getFieldValue("scheduledreturn"))
|
|
);
|
|
return (
|
|
<>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_dlexpiry")}
|
|
name="driver_dlexpiry"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<DateTimePicker isDateOnly />
|
|
</Form.Item>
|
|
{dlExpiresBeforeReturn && (
|
|
<Space style={{ color: "tomato" }}>
|
|
<WarningFilled />
|
|
<span>{t("contracts.labels.dlexpirebeforereturn")}</span>
|
|
</Space>
|
|
)}
|
|
</>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_dlst")} name="driver_dlst">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_fn")}
|
|
name="driver_fn"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_ln")}
|
|
name="driver_ln"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_addr1")}
|
|
name="driver_addr1"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_addr2")} name="driver_addr2">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_city")} name="driver_city">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_state")} name="driver_state">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_zip")} name="driver_zip">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("contracts.fields.driver_ph1")}
|
|
name="driver_ph1"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
},
|
|
({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "driver_ph1")
|
|
]}
|
|
>
|
|
<InputPhone />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.driver_dob")} name="driver_dob">
|
|
<DateTimePicker isDateOnly />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
<ContractsRatesChangeButton form={form} />
|
|
<LayoutFormRow header={t("contracts.labels.rates")}>
|
|
<Form.Item label={t("contracts.fields.dailyrate")} name="dailyrate">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.actax")} name="actax">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.dailyfreekm")} name="dailyfreekm">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.refuelcharge")} name="refuelcharge">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.excesskmrate")} name="excesskmrate">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.cleanupcharge")} name="cleanupcharge">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
<LayoutFormRow>
|
|
<Form.Item label={t("contracts.fields.damagewaiver")} name="damagewaiver">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.federaltax")} name="federaltax">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.statetax")} name="statetax">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.localtax")} name="localtax">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t("contracts.fields.coverage")} name="coverage">
|
|
<InputNumber precision={2} />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
</>
|
|
);
|
|
}
|