CEC-3912 VIN input (#293)

* CEC-3912 VIN input

* Revert

src/components/Cars/Add/index.jsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
 import {
   Button,
   Checkbox,
@@ -10,15 +8,18 @@ import {
   RadioGroup,
   TextField
 } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
 
-import useStyles from "../../useStyles";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
+import { logger } from "../../../services/monitoring";
+import { getVINOnChangeHandler } from "../../../utils/vinValidation";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../Contexts/VehicleContext";
+import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const { addVehicle, busy } = useVehicleContext();
@@ -31,7 +32,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
 
-  const vinEl = useRef(null);
+  const [vin, setVIN] = useState("");
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -77,7 +78,7 @@ const MainForm = () => {
       event.preventDefault();
 
       const formData = {
-        vin: vinEl.current.value,
+        vin,
         log_level: selectedLogLevel,
         canbus: {
           enabled: canbusEnabled,
@@ -115,7 +116,8 @@ const MainForm = () => {
           }}
           required
           fullWidth
-          inputRef={vinEl}
+          value={vin}
+          onChange={getVINOnChangeHandler(setVIN)}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup

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

src/utils/strings.js

@@ -10,4 +10,4 @@ export function trimIfMoreThan(maybeString, maxLength = 20, sfx = "") {
   }
 
   return ""
-}
+}

src/utils/vinValidation.js

@@ -0,0 +1,9 @@
+export const regExVIN = /^[A-HJ-NPR-Z0-9]{0,17}$/;
+
+export const getVINOnChangeHandler = (setFn) => {
+  return (e) => {
+    const value = e?.target?.value.toUpperCase() ?? "";
+    if (!value.match(regExVIN)) return;
+    setFn(value.toUpperCase());
+  }
+}