CEC-2281 Update certificate form (#190)

src/components/Certificates/Add/CreateForm.jsx

@@ -11,9 +11,14 @@ import {
 import useStyles from "../../useStyles";
 import { CertTypes } from "../../Contexts/CertificateContext";
 
+const getCertTypeLabel = (certtype) => {
+  if (certtype === CertTypes.Aftersales) return "Service Tool ID";
+  return "VIN";
+};
+
 const CreateForm = ({ onCreate, busy }) => {
   const classes = useStyles();
-  const vinEl = useRef(null);
+  const commonnameEl = useRef(null);
   const [certType, setCertType] = useState(CertTypes.TBOX);
 
   const onSubmit = async (event) => {
@@ -21,7 +26,7 @@ const CreateForm = ({ onCreate, busy }) => {
 
     if (onCreate)
       onCreate({
-        vin: vinEl.current.value,
+        common_name: commonnameEl.current.value,
         type: certType,
       });
   };
@@ -34,9 +39,9 @@ const CreateForm = ({ onCreate, busy }) => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <TextField
-          id="vin"
-          name="vin"
-          label="VIN"
+          id="common_name"
+          name="common_name"
+          label={`Common Name (${getCertTypeLabel(certType)})`}
           variant="outlined"
           margin="normal"
           inputProps={{
@@ -44,7 +49,7 @@ const CreateForm = ({ onCreate, busy }) => {
           }}
           required
           fullWidth
-          inputRef={vinEl}
+          inputRef={commonnameEl}
         />
         <FormLabel id="cert-type-group-label">Type</FormLabel>
         <RadioGroup
@@ -70,6 +75,11 @@ const CreateForm = ({ onCreate, busy }) => {
             control={<Radio />}
             label="Charging"
           />
+          <FormControlLabel
+            value={CertTypes.Aftersales}
+            control={<Radio />}
+            label="Aftersales"
+          />
         </RadioGroup>
         <Button
           type="submit"