diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index e8977f658..82f805c2e 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -2844,6 +2844,53 @@ contracts + + actions + + + decodelicense + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + senddltoform + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + errors @@ -3400,6 +3447,53 @@ + + labels + + + correctdataonform + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + waitingforscan + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + status diff --git a/client/src/components/contract-cars/contract-cars.component.jsx b/client/src/components/contract-cars/contract-cars.component.jsx index 7b4d01041..b0388db95 100644 --- a/client/src/components/contract-cars/contract-cars.component.jsx +++ b/client/src/components/contract-cars/contract-cars.component.jsx @@ -7,12 +7,12 @@ export default function ContractsCarsComponent({ loading, data, selectedCar, - handleSelect + handleSelect, }) { const [state, setState] = useState({ sortedInfo: {}, filteredInfo: { text: "" }, - search: "" + search: "", }); const { t } = useTranslation(); @@ -24,7 +24,7 @@ export default function ContractsCarsComponent({ key: "fleetnumber", sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber), sortOrder: - state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order + state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order, }, { title: t("courtesycars.fields.status"), @@ -32,21 +32,24 @@ export default function ContractsCarsComponent({ key: "status", sorter: (a, b) => alphaSort(a.status, b.status), sortOrder: - state.sortedInfo.columnKey === "status" && state.sortedInfo.order + state.sortedInfo.columnKey === "status" && state.sortedInfo.order, + render: (text, record) =>
{t(record.status)}
, }, { title: t("courtesycars.fields.year"), dataIndex: "year", key: "year", sorter: (a, b) => alphaSort(a.year, b.year), - sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order + sortOrder: + state.sortedInfo.columnKey === "year" && state.sortedInfo.order, }, { title: t("courtesycars.fields.make"), dataIndex: "make", key: "make", sorter: (a, b) => alphaSort(a.make, b.make), - sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order + sortOrder: + state.sortedInfo.columnKey === "make" && state.sortedInfo.order, }, { title: t("courtesycars.fields.model"), @@ -54,7 +57,7 @@ export default function ContractsCarsComponent({ key: "model", sorter: (a, b) => alphaSort(a.model, b.model), sortOrder: - state.sortedInfo.columnKey === "model" && state.sortedInfo.order + state.sortedInfo.columnKey === "model" && state.sortedInfo.order, }, { title: t("courtesycars.fields.plate"), @@ -62,8 +65,8 @@ export default function ContractsCarsComponent({ key: "plate", sorter: (a, b) => alphaSort(a.plate, b.plate), sortOrder: - state.sortedInfo.columnKey === "plate" && state.sortedInfo.order - } + state.sortedInfo.columnKey === "plate" && state.sortedInfo.order, + }, ]; const handleTableChange = (pagination, filters, sorter) => { @@ -74,7 +77,7 @@ export default function ContractsCarsComponent({ state.search === "" ? data : data.filter( - cc => + (cc) => (cc.fleetnumber || "") .toLowerCase() .includes(state.search.toLowerCase()) || @@ -100,19 +103,19 @@ export default function ContractsCarsComponent({ setState({ ...state, search: e.target.value })} + onChange={(e) => setState({ ...state, search: e.target.value })} /> )} size="small" pagination={{ position: "top" }} - columns={columns.map(item => ({ ...item }))} + columns={columns.map((item) => ({ ...item }))} rowKey="id" dataSource={filteredData} onChange={handleTableChange} rowSelection={{ onSelect: handleSelect, type: "radio", - selectedRowKeys: [selectedCar] + selectedRowKeys: [selectedCar], }} /> ); diff --git a/client/src/components/contract-form/contract-form.component.jsx b/client/src/components/contract-form/contract-form.component.jsx index d7a484f48..0486e74c3 100644 --- a/client/src/components/contract-form/contract-form.component.jsx +++ b/client/src/components/contract-form/contract-form.component.jsx @@ -1,241 +1,255 @@ -import React, { useState } from "react"; +import { DatePicker, Form, Input, InputNumber } from "antd"; +import React from "react"; import { useTranslation } from "react-i18next"; -import { Form, Input, DatePicker, InputNumber, Button } from "antd"; -import aamva from "../../utils/aamva"; -import InputPhone from "../form-items-formatted/phone-form-item.component"; import ContractStatusSelector from "../contract-status-select/contract-status-select.component"; +import InputPhone from "../form-items-formatted/phone-form-item.component"; +import LayoutFormRow from "../layout-form-row/layout-form-row.component"; -export default function ContractFormComponent() { - const [state, setState] = useState(""); +export default function ContractFormComponent({ form }) { const { t } = useTranslation(); return (
-
- TEST AREA - { - console.log("e", e); - setState(e.target.value); - }} - /> - -
+ + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); } diff --git a/client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx b/client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx new file mode 100644 index 000000000..9673c560a --- /dev/null +++ b/client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx @@ -0,0 +1,120 @@ +import { Button, Input, Modal, Typography } from "antd"; +import moment from "moment"; +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import aamva from "../../utils/aamva"; +import aamva_npm from "aamva"; +import DataLabel from "../data-label/data-label.component"; +import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; + +export default function ContractLicenseDecodeButton({ form }) { + const { t } = useTranslation(); + const [modalVisible, setModalVisible] = useState(false); + const [loading, setLoading] = useState(false); + const [decodedBarcode, setDecodedBarcode] = useState(null); + console.log("form", form); + const handleDecode = (e) => { + setLoading(true); + const aamvaParse = aamva.parse(e.currentTarget.value); + console.log("AAMVA", aamvaParse); + setDecodedBarcode(aamvaParse); + setLoading(false); + }; + const handleInsertForm = () => { + const values = { + driver_dlnumber: decodedBarcode.dl, + driver_dlexpiry: moment( + `20${decodedBarcode.expiration_date}${moment( + decodedBarcode.birthday + ).format("DD")}` + ), + driver_dlst: decodedBarcode.state, + driver_fn: decodedBarcode.name.first, + driver_ln: decodedBarcode.name.last, + driver_addr1: decodedBarcode.address, + driver_city: decodedBarcode.city, + driver_state: decodedBarcode.state, + driver_zip: decodedBarcode.postal_code, + driver_dob: moment(decodedBarcode.birthday), + }; + + form.setFieldsValue(values); + setModalVisible(false); + setDecodedBarcode(null); + }; + const handleClick = () => { + setModalVisible(true); + }; + const handleCancel = () => { + setModalVisible(false); + }; + + return ( +
+ +
+
+ { + if (!loading) setLoading(true); + }} + onPressEnter={handleDecode} + /> +
+ + {decodedBarcode ? ( +
+ + {decodedBarcode.state} + + + {decodedBarcode.dl} + + + {decodedBarcode.name.first} + + + {decodedBarcode.name.last} + + + {decodedBarcode.address} + + + {decodedBarcode.address} + + + {moment( + `20${decodedBarcode.expiration_date}${moment( + decodedBarcode.birthday + ).format("DD")}` + ).format("MM/DD/YYYY")} + + + {moment(decodedBarcode.birthday).format("MM/DD/YYYY")} + +
+ + {t("contracts.labels.correctdataonform")} + +
+
+ ) : ( +
{t("contracts.labels.waitingforscan")}
+ )} + +
+ + +
+ ); +} diff --git a/client/src/pages/contract-create/contract-create.page.component.jsx b/client/src/pages/contract-create/contract-create.page.component.jsx index 9f136c19a..3e8a41e35 100644 --- a/client/src/pages/contract-create/contract-create.page.component.jsx +++ b/client/src/pages/contract-create/contract-create.page.component.jsx @@ -1,13 +1,14 @@ -import React from "react"; -import ContractFormComponent from "../../components/contract-form/contract-form.component"; import { Button } from "antd"; +import React from "react"; import { useTranslation } from "react-i18next"; -import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container"; import ContractCarsContainer from "../../components/contract-cars/contract-cars.container"; - +import ContractFormComponent from "../../components/contract-form/contract-form.component"; +import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container"; +import ContractLicenseDecodeButton from "../../components/contract-license-decode-button/contract-license-decode-button.component"; export default function ContractCreatePageComponent({ + form, selectedJobState, - selectedCarState + selectedCarState, }) { const { t } = useTranslation(); return ( @@ -15,7 +16,8 @@ export default function ContractCreatePageComponent({ - + + ); } diff --git a/client/src/pages/contract-create/contract-create.page.container.jsx b/client/src/pages/contract-create/contract-create.page.container.jsx index 20d439f9f..5acd686c7 100644 --- a/client/src/pages/contract-create/contract-create.page.container.jsx +++ b/client/src/pages/contract-create/contract-create.page.container.jsx @@ -29,8 +29,6 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { ); const [insertContract] = useMutation(INSERT_NEW_CONTRACT); - console.log("test"); - const handleFinish = (values) => { if (!!selectedCarState[0] && !!selectedJobState[0]) { insertContract({ @@ -81,8 +79,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { }, [t, setBreadcrumbs]); return ( -
+ diff --git a/client/src/pages/contract-detail/contract-detail.page.component.jsx b/client/src/pages/contract-detail/contract-detail.page.component.jsx index 6e9280a38..7c0350a24 100644 --- a/client/src/pages/contract-detail/contract-detail.page.component.jsx +++ b/client/src/pages/contract-detail/contract-detail.page.component.jsx @@ -7,9 +7,9 @@ import ContractFormComponent from "../../components/contract-form/contract-form. import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component"; import { setModalContext } from "../../redux/modals/modals.actions"; -const mapDispatchToProps = dispatch => ({ - setCourtesyCarReturnModalContext: context => - dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" })) +const mapDispatchToProps = (dispatch) => ({ + setCourtesyCarReturnModalContext: (context) => + dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" })), }); export function ContractDetailPage({ @@ -17,27 +17,30 @@ export function ContractDetailPage({ job, courtesyCar, setCourtesyCarReturnModalContext, - refetch + refetch, }) { const { t } = useTranslation(); return (
- {`Agreement ${(contract && - contract.agreementnumber) || - ""} - ${t((contract && contract.status) || "")}`} + {`Agreement ${ + (contract && contract.agreementnumber) || "" + } - ${t((contract && contract.status) || "")}`}