CEC-2281 Update certificate form (#190)

src/components/App/__snapshots__/App.test.js.snap

@@ -5825,10 +5825,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 <label
                   class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
-                  for="vin"
+                  for="common_name"
-                  id="vin-label"
+                  id="common_name-label"
                 >
-                  VIN
+                  Common Name (VIN)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -5843,9 +5843,9 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="vin"
+                    id="common_name"
                     maxlength="17"
-                    name="vin"
+                    name="common_name"
                     required=""
                     type="text"
                     value=""
@@ -5858,7 +5858,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        VIN
+                        Common Name (VIN)
                          *
                       </span>
                     </legend>
@@ -6031,6 +6031,57 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                     Charging
                   </span>
                 </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        name="cert-type"
+                        type="radio"
+                        value="Aftersales"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-0"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Aftersales
+                  </span>
+                </label>
               </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"

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"
+          id="common_name"
-          name="vin"
+          name="common_name"
-          label="VIN"
+          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"

src/components/Contexts/CertificateContext.jsx

@@ -8,11 +8,12 @@ export const CertTypes = {
   TBOX: "TBOX",
   ICC: "ICC",
   Charging: "Charging",
+  Aftersales: "Aftersales",
 };
 
 const validateCreate = (data) => {
   if (!data.type) throw new Error("type is required");
-  if (!data.vin) throw new Error("vin is required");
+  if (!data.common_name) throw new Error("common name is required");
 };
 
 export const CertificateProvider = ({ children }) => {