CEC-3912 VIN input (#293)

* CEC-3912 VIN input

* Revert

src/components/Certificates/Add/CreateForm.jsx

@@ -6,10 +6,11 @@ import {
   RadioGroup,
   TextField
 } from "@material-ui/core";
-import React, { useRef, useState } from "react";
+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";
 
@@ -31,16 +32,21 @@ const getCertsTypes = (providers) => {
 
 const CreateForm = ({ onCreate, busy }) => {
   const classes = useStyles();
-  const commonnameEl = useRef(null);
   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: commonnameEl.current.value,
+        common_name: commonName,
         type: certType,
       });
   };
@@ -63,7 +69,8 @@ const CreateForm = ({ onCreate, busy }) => {
           }}
           required
           fullWidth
-          inputRef={commonnameEl}
+          value={commonName}
+          onChange={certType === CertTypes.Aftersales ? onAftersaleChange : onVINChange}
         />
         <FormLabel id="cert-type-group-label">Type</FormLabel>
         <RadioGroup