102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
import { Button, Input, Modal, Typography } from "antd";
|
|
import dayjs from "../../utils/day";
|
|
import { 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: dayjs(`20${decodedBarcode.expiration_date}${dayjs(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: dayjs(decodedBarcode.birthday)
|
|
};
|
|
|
|
form.setFieldsValue(values);
|
|
setModalVisible(false);
|
|
setDecodedBarcode(null);
|
|
};
|
|
const handleClick = () => {
|
|
setModalVisible(true);
|
|
};
|
|
const handleCancel = () => {
|
|
setModalVisible(false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
open={modalVisible}
|
|
okText={t("contracts.actions.senddltoform")}
|
|
onOk={handleInsertForm}
|
|
okButtonProps={{ disabled: !decodedBarcode }}
|
|
onCancel={handleCancel}
|
|
>
|
|
<div>
|
|
<div>
|
|
<Input
|
|
autoFocus
|
|
allowClear
|
|
onChange={() => {
|
|
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")}>
|
|
{dayjs(`20${decodedBarcode.expiration_date}${dayjs(decodedBarcode.birthday).format("DD")}`).format(
|
|
"MM/DD/YYYY"
|
|
)}
|
|
</DataLabel>
|
|
<DataLabel label={t("contracts.fields.driver_dob")}>
|
|
{dayjs(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>
|
|
);
|
|
}
|