112 lines
3.0 KiB
JavaScript
112 lines
3.0 KiB
JavaScript
import {
|
|
Button,
|
|
FormControlLabel,
|
|
FormLabel,
|
|
Radio,
|
|
RadioGroup,
|
|
TextField
|
|
} from "@material-ui/core";
|
|
import React, { useState } from "react";
|
|
|
|
import { CertTypeData, CertTypes } from "../../../utils/certificates";
|
|
import { Providers } from "../../../utils/roles";
|
|
import { getVINOnChangeHandler } from "../../../utils/vinValidation";
|
|
import { useUserContext } from "../../Contexts/UserContext";
|
|
import useStyles from "../../useStyles";
|
|
|
|
const getCertTypeLabel = (certtype) => {
|
|
const item = CertTypeData.find((item) => certtype === item.value);
|
|
if (item !== null) return item.inputlabel;
|
|
return "ID";
|
|
};
|
|
|
|
const getCertsTypes = (providers) => {
|
|
if (providers.length === 0) return [];
|
|
if ((providers[0] === Providers.MAGNA) || (providers[0] === Providers.FISKER_QA)) {
|
|
return CertTypeData.filter((item) => {
|
|
return (item.label === CertTypes.TBOX);
|
|
})
|
|
}
|
|
return CertTypeData;
|
|
}
|
|
|
|
const CreateForm = ({ onCreate, busy }) => {
|
|
const classes = useStyles();
|
|
const { providers } = useUserContext();
|
|
const [commonName, setCommonName] = useState("");
|
|
const [certType, setCertType] = useState(CertTypes.TBOX);
|
|
const onVINChange = getVINOnChangeHandler(setCommonName);
|
|
const onAftersaleChange = (e) => {
|
|
const value = e.target.value ?? "";
|
|
setCommonName(value);
|
|
}
|
|
|
|
const onSubmit = async (event) => {
|
|
event.preventDefault();
|
|
|
|
if (onCreate)
|
|
onCreate({
|
|
common_name: commonName,
|
|
type: certType,
|
|
});
|
|
};
|
|
|
|
const onCertTypeChange = (event) => {
|
|
setCertType(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<div className={classes.paper}>
|
|
<form className={classes.form} noValidate action="{onSubmit}">
|
|
<TextField
|
|
id="common_name"
|
|
name="common_name"
|
|
label={`Common Name (${getCertTypeLabel(certType)})`}
|
|
variant="outlined"
|
|
margin="normal"
|
|
inputProps={{
|
|
maxLength: "17",
|
|
}}
|
|
required
|
|
fullWidth
|
|
value={commonName}
|
|
onChange={certType === CertTypes.Aftersales ? onAftersaleChange : onVINChange}
|
|
/>
|
|
<FormLabel id="cert-type-group-label">Type</FormLabel>
|
|
<RadioGroup
|
|
row
|
|
aria-labelledby="cert-type-group-label"
|
|
name="cert-type"
|
|
value={certType}
|
|
onChange={onCertTypeChange}
|
|
margin="normal"
|
|
>
|
|
{getCertsTypes(providers).map((item, i) => {
|
|
return (
|
|
<FormControlLabel
|
|
key={i}
|
|
value={item.value}
|
|
label={item.label}
|
|
control={<Radio />}
|
|
/>
|
|
);
|
|
})}
|
|
</RadioGroup>
|
|
<Button
|
|
type="submit"
|
|
disabled={busy}
|
|
fullWidth
|
|
variant="contained"
|
|
color="primary"
|
|
className={classes.submit}
|
|
onClick={onSubmit}
|
|
>
|
|
{busy ? "Submitting..." : "Submit"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreateForm;
|