124 lines
4.1 KiB
JavaScript
124 lines
4.1 KiB
JavaScript
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 DataLabel from "../data-label/data-label.component";
|
|
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
|
|
export default function ContractLicenseDecodeButton({ form }) {
|
|
const { t } = useTranslation();
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [decodedBarcode, setDecodedBarcode] = useState(null);
|
|
|
|
const handleDecode = (e) => {
|
|
logImEXEvent("contract_license_decode");
|
|
setLoading(true);
|
|
const aamvaParse = aamva.parse(e.currentTarget.value);
|
|
setDecodedBarcode(aamvaParse);
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleInsertForm = () => {
|
|
logImEXEvent("contract_license_decode_fill_form");
|
|
|
|
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 (
|
|
<div>
|
|
<Modal
|
|
visible={modalVisible}
|
|
okText={t("contracts.actions.senddltoform")}
|
|
onOk={handleInsertForm}
|
|
okButtonProps={{ disabled: !!!decodedBarcode }}
|
|
onCancel={handleCancel}
|
|
>
|
|
<div>
|
|
<div>
|
|
<Input
|
|
autoFocus
|
|
allowClear
|
|
onChange={(e) => {
|
|
if (!loading) setLoading(true);
|
|
}}
|
|
onPressEnter={handleDecode}
|
|
/>
|
|
</div>
|
|
<LoadingSkeleton loading={loading}>
|
|
{decodedBarcode ? (
|
|
<div>
|
|
<DataLabel label={t("contracts.fields.driver_dlst")}>
|
|
{decodedBarcode.state}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_dlnumber")}>
|
|
{decodedBarcode.dl}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_fn")}>
|
|
{decodedBarcode.name.first}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_ln")}>
|
|
{decodedBarcode.name.last}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_addr1")}>
|
|
{decodedBarcode.address}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_addr2")}>
|
|
{decodedBarcode.address}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_dlexpiry")}>
|
|
{moment(
|
|
`20${decodedBarcode.expiration_date}${moment(
|
|
decodedBarcode.birthday
|
|
).format("DD")}`
|
|
).format("MM/DD/YYYY")}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_dob")}>
|
|
{moment(decodedBarcode.birthday).format("MM/DD/YYYY")}
|
|
</DataLabel>
|
|
<div>
|
|
<Typography.Title level={4}>
|
|
{t("contracts.labels.correctdataonform")}
|
|
</Typography.Title>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>{t("contracts.labels.waitingforscan")}</div>
|
|
)}
|
|
</LoadingSkeleton>
|
|
</div>
|
|
</Modal>
|
|
<Button onClick={handleClick}>
|
|
{t("contracts.actions.decodelicense")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|