From 7afc480199721d1fe3f2959c6b9d4cd77312b162 Mon Sep 17 00:00:00 2001
From: "K. Allagbe" <kotchikpa.allagbe@gmail.com>
Date: Tue, 3 Dec 2024 15:20:07 -0500
Subject: [PATCH] issue #362: improve validation & error handling

---
 src/components/VerifiedFieldComponents.tsx    |  82 ++--
 src/components/VerifiedQuantityMultiInput.tsx | 402 +++++++++---------
 2 files changed, 240 insertions(+), 244 deletions(-)

diff --git a/src/components/VerifiedFieldComponents.tsx b/src/components/VerifiedFieldComponents.tsx
index 1395e578..c13d6c6f 100644
--- a/src/components/VerifiedFieldComponents.tsx
+++ b/src/components/VerifiedFieldComponents.tsx
@@ -42,55 +42,58 @@ const VerifiedFieldWrapper: React.FC<VerifiedFieldWrapperProps> = ({
   });
 
   return (
-    <Box
-      className={`flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
-        isFocused ? "border-fertiscan-blue" : ""
-      } ${verified ? "bg-green-100" : ""} ${className}`}
-      data-testid={`verified-field-${path}`}
-    >
+    <Box>
       <Typography
-        className="px-2 !font-bold select-none"
+        className="px-2 !font-bold select-none text-left"
         data-testid={`field-label-${path}`}
       >
         {label}
       </Typography>
-      {renderField({ setIsFocused, control, valuePath, verified })}
-      <Divider
-        orientation="vertical"
-        flexItem
-        className={isFocused ? "!border-fertiscan-blue" : ""}
-        data-testid={`divider-${path}`}
-      />
-      <Controller
-        name={verifiedPath}
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <Tooltip
-            title={
-              verified
-                ? t("verifiedField.unverify", { label })
-                : t("verifiedField.verify", { label })
-            }
-            enterDelay={1000}
-          >
-            <IconButton
-              onClick={() => onChange(!value)}
-              data-testid={`toggle-verified-btn-${verifiedPath}`}
-              aria-label={
+
+      <Box
+        className={`flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
+          isFocused ? "border-fertiscan-blue" : ""
+        } ${verified ? "border-green-500" : ""} ${className}`}
+        data-testid={`verified-field-${path}`}
+      >
+        {renderField({ setIsFocused, control, valuePath, verified })}
+        <Divider
+          orientation="vertical"
+          flexItem
+          className={isFocused ? "!border-fertiscan-blue" : ""}
+          data-testid={`divider-${path}`}
+        />
+        <Controller
+          name={verifiedPath}
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Tooltip
+              title={
                 verified
                   ? t("verifiedField.unverify", { label })
                   : t("verifiedField.verify", { label })
               }
+              enterDelay={1000}
             >
-              <CheckIcon
-                className={value ? "text-green-500" : ""}
-                data-testid={`verified-icon-${verifiedPath}`}
-                aria-hidden
-              />
-            </IconButton>
-          </Tooltip>
-        )}
-      />
+              <IconButton
+                onClick={() => onChange(!value)}
+                data-testid={`toggle-verified-btn-${verifiedPath}`}
+                aria-label={
+                  verified
+                    ? t("verifiedField.unverify", { label })
+                    : t("verifiedField.verify", { label })
+                }
+              >
+                <CheckIcon
+                  className={value ? "text-green-500" : ""}
+                  data-testid={`verified-icon-${verifiedPath}`}
+                  aria-hidden
+                />
+              </IconButton>
+            </Tooltip>
+          )}
+        />
+      </Box>
     </Box>
   );
 };
@@ -119,6 +122,7 @@ const VerifiedCheckbox: React.FC<VerifiedCheckboxProps> = ({
           render={({ field }) => (
             <Checkbox
               {...field}
+              className="flex-1"
               checked={field.value}
               disabled={verified}
               onFocus={() => setIsFocused(true)}
diff --git a/src/components/VerifiedQuantityMultiInput.tsx b/src/components/VerifiedQuantityMultiInput.tsx
index 6621d05f..76b02546 100644
--- a/src/components/VerifiedQuantityMultiInput.tsx
+++ b/src/components/VerifiedQuantityMultiInput.tsx
@@ -2,14 +2,12 @@ import { DEFAULT_QUANTITY } from "@/types/types";
 import AddIcon from "@mui/icons-material/Add";
 import CheckIcon from "@mui/icons-material/Check";
 import DeleteIcon from "@mui/icons-material/Delete";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import {
   Autocomplete,
   Box,
   Button,
   Divider,
   IconButton,
-  InputBase,
   TextField,
   Tooltip,
   Typography,
@@ -90,227 +88,221 @@ const VerifiedQuantityMultiInput: React.FC<VerifiedQuantityMultiInputProps> = ({
   };
 
   return (
-    <Box
-      className={`w-full flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
-        isFocused ? "border-fertiscan-blue" : ""
-      } ${verified ? "bg-green-100" : ""}  ${className}`}
-      data-testid={`quantity-multi-input-${path}`}
-    >
+    <Box>
       {/* Label Section */}
       <Typography
-        className="select-none px-2 !font-bold"
+        className="select-none px-2 !font-bold text-left"
         data-testid={`quantity-multi-input-label-${path}`}
       >
         {label}
       </Typography>
 
-      {/* Fields */}
       <Box
-        className="flex flex-1 flex-col"
-        data-testid={`fields-container-${path}`}
+        className={`w-full flex items-center p-1 border-2 rounded-tr-md rounded-br-md ${
+          isFocused ? "border-fertiscan-blue" : ""
+        } ${verified ? "border-green-500" : ""}  ${className}`}
+        data-testid={`quantity-multi-input-${path}`}
       >
-        {fields.map((fieldItem, index) => (
-          <Box
-            className="ml-2"
-            key={fieldItem.id}
-            data-testid={`field-row-${quantitiesPath}-${index}`}
-          >
-            <Box className="flex items-center">
-              {/* Value Input Field */}
-              <Controller
-                name={`${quantitiesPath}.${index}.value`}
-                control={control}
-                rules={{
-                  pattern: {
-                    value: /^[0-9]*\.?[0-9]*$/,
-                    message: "errors.numbersOnly",
-                  },
-                  min: {
-                    value: 0,
-                    message: "errors.minValue",
-                  },
-                }}
-                render={({ field, fieldState: { error } }) => (
-                  <>
-                    <InputBase
-                      {...field}
-                      className="flex-1 p-2 !text-[15px]"
-                      placeholder={
-                        placeholder ||
-                        t("verifiedQuantityMultiInput.defaultPlaceholder")
-                      }
-                      disabled={verified}
-                      onFocus={() => setIsFocused(true)}
-                      onBlur={(e) => {
-                        setIsFocused(false);
-                        field.onChange(e.target.value.trim());
-                      }}
-                      aria-label={t(
-                        "verifiedQuantityMultiInput.accessibility.valueInput",
-                      )}
-                      data-testid={`${quantitiesPath}.${index}.value`}
-                      error={!!error}
-                    />
-                    {error && (
-                      <Tooltip title={error.message ? t(error.message) : ""}>
-                        <ErrorOutlineIcon
-                          className="mx-1"
-                          color="error"
-                          fontSize="small"
-                          data-testid={`value-error-icon-${quantitiesPath}-${index}`}
-                        />
-                      </Tooltip>
-                    )}
-                  </>
-                )}
-              />
+        {/* Fields */}
+        <Box
+          className="flex flex-1 flex-col"
+          data-testid={`fields-container-${path}`}
+        >
+          {fields.map((fieldItem, index) => (
+            <Box
+              className="ml-2"
+              key={fieldItem.id}
+              data-testid={`field-row-${quantitiesPath}-${index}`}
+            >
+              <Box className="flex items-center">
+                {/* Value Input Field */}
+                <Controller
+                  name={`${quantitiesPath}.${index}.value`}
+                  control={control}
+                  rules={{
+                    pattern: {
+                      value: /^[0-9]*\.?[0-9]*$/,
+                      message: "errors.numbersOnly",
+                    },
+                    min: {
+                      value: 0,
+                      message: "errors.minValue",
+                    },
+                  }}
+                  render={({ field, fieldState: { error } }) => (
+                    <>
+                      <TextField
+                        {...field}
+                        variant="standard"
+                        slotProps={{
+                          input: {
+                            disableUnderline: true,
+                            className: "flex-1 !text-[15px]",
+                          },
+                        }}
+                        className="flex-1 "
+                        placeholder={
+                          placeholder ||
+                          t("verifiedQuantityMultiInput.defaultPlaceholder")
+                        }
+                        disabled={verified}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={(e) => {
+                          setIsFocused(false);
+                          field.onChange(e.target.value.trim());
+                        }}
+                        aria-label={t(
+                          "verifiedQuantityMultiInput.accessibility.valueInput",
+                        )}
+                        data-testid={`${quantitiesPath}.${index}.value`}
+                        error={!!error}
+                        helperText={error?.message ? t(error.message) : ""}
+                      />
+                    </>
+                  )}
+                />
+
+                {/* Unit Selection Field */}
+                <Controller
+                  name={`${quantitiesPath}.${index}.unit`}
+                  control={control}
+                  rules={{ validate: validateDuplicateUnit }}
+                  render={({ field, fieldState: { error } }) => (
+                    <>
+                      <Autocomplete
+                        {...field}
+                        freeSolo
+                        selectOnFocus
+                        options={unitOptions}
+                        onChange={(event, newValue) => {
+                          field.onChange(newValue);
+                        }}
+                        onInputChange={(event, newInputValue) => {
+                          field.onChange(newInputValue);
+                        }}
+                        value={field.value || ""}
+                        disableClearable
+                        slotProps={{
+                          popper: {
+                            className: "!w-fit",
+                          },
+                        }}
+                        disabled={verified}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            variant="standard"
+                            aria-label={t(
+                              "verifiedQuantityMultiInput.accessibility.unitDropdown",
+                            )}
+                            data-testid={`${quantitiesPath}.${index}.unit`}
+                            placeholder={t(
+                              "verifiedQuantityMultiInput.unitPlaceholder",
+                            )}
+                            slotProps={{
+                              input: {
+                                ...params.InputProps,
+                                disableUnderline: true,
+                                className:
+                                  "px-2 !text-[15px] !w-[10ch] bg-gray-100",
+                              },
+                            }}
+                            onFocus={() => setIsFocused(true)}
+                            onBlur={(e) => {
+                              setIsFocused(false);
+                              field.onChange(e.target.value.trim());
+                            }}
+                            error={!!error}
+                            helperText={error?.message ? t(error.message) : ""}
+                          />
+                        )}
+                      />
+                    </>
+                  )}
+                />
 
-              {/* Unit Selection Field */}
-              <Controller
-                name={`${quantitiesPath}.${index}.unit`}
-                control={control}
-                rules={{ validate: validateDuplicateUnit }}
-                render={({ field, fieldState: { error } }) => (
-                  <>
-                    <Autocomplete
-                      {...field}
-                      className="bg-gray-100"
-                      freeSolo
-                      selectOnFocus
-                      options={unitOptions}
-                      onChange={(event, newValue) => {
-                        field.onChange(newValue);
-                      }}
-                      onInputChange={(event, newInputValue) => {
-                        field.onChange(newInputValue);
-                      }}
-                      value={field.value || ""}
-                      disableClearable
-                      slotProps={{
-                        popper: {
-                          className: "!w-fit",
-                        },
-                      }}
+                {/* Delete Row Button */}
+                <Tooltip
+                  enterDelay={1000}
+                  title={t("verifiedQuantityMultiInput.deleteRow")}
+                  disableHoverListener={verified}
+                >
+                  <span>
+                    <IconButton
+                      size="small"
+                      className="text-white bg-red-500"
+                      onClick={() => remove(index)}
                       disabled={verified}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          variant="standard"
-                          aria-label={t(
-                            "verifiedQuantityMultiInput.accessibility.unitDropdown",
-                          )}
-                          data-testid={`${quantitiesPath}.${index}.unit`}
-                          placeholder={t(
-                            "verifiedQuantityMultiInput.unitPlaceholder",
-                          )}
-                          slotProps={{
-                            input: {
-                              ...params.InputProps,
-                              disableUnderline: true,
-                              className: "px-2 !text-[15px] !w-[10ch]",
-                            },
-                          }}
-                        />
+                      aria-label={t(
+                        "verifiedQuantityMultiInput.accessibility.deleteRowButton",
                       )}
-                    />
-                    {error && (
-                      <Tooltip title={error.message ? t(error.message) : ""}>
-                        <ErrorOutlineIcon
-                          className="ml-1"
-                          color="error"
-                          fontSize="small"
-                          aria-label={t(
-                            "verifiedQuantityMultiInput.accessibility.errorIcon",
-                          )}
-                          data-testid={`unit-error-icon-${quantitiesPath}-${index}`}
-                        />
-                      </Tooltip>
-                    )}
-                  </>
-                )}
+                      data-testid={`delete-button-${quantitiesPath}-${index}`}
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </Box>
+              <Divider
+                className={`!my-1 ${isFocused ? "!border-fertiscan-blue" : ""}`}
+                data-testid={`row-divider-${quantitiesPath}-${index}`}
               />
-
-              {/* Delete Row Button */}
-              <Tooltip
-                enterDelay={1000}
-                title={t("verifiedQuantityMultiInput.deleteRow")}
-                disableHoverListener={verified}
-              >
-                <span>
-                  <IconButton
-                    size="small"
-                    className="text-white bg-red-500"
-                    onClick={() => remove(index)}
-                    disabled={verified}
-                    aria-label={t(
-                      "verifiedQuantityMultiInput.accessibility.deleteRowButton",
-                    )}
-                    data-testid={`delete-button-${quantitiesPath}-${index}`}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </span>
-              </Tooltip>
             </Box>
-            <Divider
-              className={`!mb-1 ${isFocused ? "!border-fertiscan-blue" : ""}`}
-              data-testid={`row-divider-${quantitiesPath}-${index}`}
-            />
-          </Box>
-        ))}
+          ))}
 
-        {/* Add Row Button */}
-        <Button
-          size="small"
-          className="!p-2 text-white bg-green-500"
-          onClick={() => append(DEFAULT_QUANTITY)}
-          startIcon={<AddIcon />}
-          disabled={verified}
-          aria-label={t(
-            "verifiedQuantityMultiInput.accessibility.addRowButton",
-          )}
-          data-testid={`add-button-${path}`}
-        >
-          {t("verifiedQuantityMultiInput.addRow")}
-        </Button>
-      </Box>
+          {/* Add Row Button */}
+          <Button
+            size="small"
+            className="!p-2 text-white bg-green-500"
+            onClick={() => append(DEFAULT_QUANTITY)}
+            startIcon={<AddIcon />}
+            disabled={verified}
+            aria-label={t(
+              "verifiedQuantityMultiInput.accessibility.addRowButton",
+            )}
+            data-testid={`add-button-${path}`}
+          >
+            {t("verifiedQuantityMultiInput.addRow")}
+          </Button>
+        </Box>
 
-      {/* Vertical Divider */}
-      <Divider
-        className={`my-2 ${isFocused ? "!border-fertiscan-blue" : ""}`}
-        data-testid={`vertical-divider-${quantitiesPath}`}
-        flexItem
-        orientation="vertical"
-      />
+        {/* Vertical Divider */}
+        <Divider
+          className={`my-2 ${isFocused ? "!border-fertiscan-blue" : ""}`}
+          data-testid={`vertical-divider-${quantitiesPath}`}
+          flexItem
+          orientation="vertical"
+        />
 
-      {/* Verified Toggle Button */}
-      <Controller
-        name={verifiedPath}
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <Tooltip
-            title={
-              verified
-                ? t("verifiedQuantityMultiInput.unverify")
-                : t("verifiedQuantityMultiInput.verify")
-            }
-            enterDelay={1000}
-          >
-            <IconButton
-              onClick={() => toggleVerified(value, onChange)}
-              aria-label={t(
-                "verifiedQuantityMultiInput.accessibility.verifyToggleButton",
-              )}
-              data-testid={`toggle-verified-btn-${path}`}
+        {/* Verified Toggle Button */}
+        <Controller
+          name={verifiedPath}
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Tooltip
+              title={
+                verified
+                  ? t("verifiedQuantityMultiInput.unverify")
+                  : t("verifiedQuantityMultiInput.verify")
+              }
+              enterDelay={1000}
             >
-              <CheckIcon
-                className={value ? "text-green-500" : ""}
-                data-testid={`verified-icon-${path}`}
-              />
-            </IconButton>
-          </Tooltip>
-        )}
-      />
+              <IconButton
+                onClick={() => toggleVerified(value, onChange)}
+                aria-label={t(
+                  "verifiedQuantityMultiInput.accessibility.verifyToggleButton",
+                )}
+                data-testid={`toggle-verified-btn-${path}`}
+              >
+                <CheckIcon
+                  className={value ? "text-green-500" : ""}
+                  data-testid={`verified-icon-${path}`}
+                />
+              </IconButton>
+            </Tooltip>
+          )}
+        />
+      </Box>
     </Box>
   );
 };