CEC-2281 Update certificate form (#190)

2022-08-23 08:51:05 -07:00
parent 59a8c934d6
commit f0b2a4f217
3 changed files with 75 additions and 13 deletions
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/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"
-                  id="vin-label"
+                  for="common_name"
+                  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"
--- a/src/components/Certificates/Add/CreateForm.jsx
+++ b/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"
--- a/src/components/Contexts/CertificateContext.jsx
+++ b/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 }) => {