Merge pull request #1669 from Northeastern-Electric-Racing/#1666-error-message-cost-description

#1666 Added error message for cost and description of products on finance form

Author: RChandler234

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx

@@ -5,7 +5,9 @@
 import {
   Autocomplete,
   Button,
+  FormControl,
   FormLabel,
+  FormHelperText,
   IconButton,
   InputAdornment,
   Table,
@@ -97,41 +99,51 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                     {uniqueWbsElementsWithProducts.get(key)?.map((product, index) => (
                       <ListItem key={product.index}>
                         <Box sx={{ display: 'flex', flexDirection: 'row' }}>
-                          <Controller
-                            name={`reimbursementProducts.${product.index}.name`}
-                            control={control}
-                            render={({ field }) => (
-                              <TextField
-                                {...field}
-                                label={'Description'}
-                                autoComplete="off"
-                                size={'small'}
-                                variant={'outlined'}
-                                sx={{ width: '50%', marginRight: '4px' }}
-                                error={!!errors.reimbursementProducts?.[product.index]?.name}
-                              />
-                            )}
-                          />
-                          <Controller
-                            name={`reimbursementProducts.${product.index}.cost`}
-                            control={control}
-                            render={({ field }) => (
-                              <TextField
-                                {...field}
-                                label={'Cost'}
-                                size={'small'}
-                                variant={'outlined'}
-                                type="number"
-                                autoComplete="off"
-                                InputProps={{
-                                  startAdornment: <InputAdornment position="start">$</InputAdornment>
-                                }}
-                                onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value), product.index)}
-                                sx={{ width: '50%' }}
-                                error={!!errors.reimbursementProducts?.[product.index]?.cost}
-                              />
-                            )}
-                          />
+                          <FormControl sx={{ width: '50%', marginRight: '4px' }}>
+                            <Controller
+                              name={`reimbursementProducts.${product.index}.name`}
+                              control={control}
+                              render={({ field }) => (
+                                <TextField
+                                  {...field}
+                                  label={'Description'}
+                                  autoComplete="off"
+                                  size={'small'}
+                                  variant={'outlined'}
+                                  sx={{ width: '100%' }}
+                                  error={!!errors.reimbursementProducts?.[product.index]?.name}
+                                />
+                              )}
+                            />
+                            <FormHelperText error>
+                              {errors.reimbursementProducts?.[product.index]?.name?.message}
+                            </FormHelperText>
+                          </FormControl>
+                          <FormControl sx={{ width: '50%' }}>
+                            <Controller
+                              name={`reimbursementProducts.${product.index}.cost`}
+                              control={control}
+                              render={({ field }) => (
+                                <TextField
+                                  {...field}
+                                  label={'Cost'}
+                                  size={'small'}
+                                  variant={'outlined'}
+                                  type="number"
+                                  autoComplete="off"
+                                  InputProps={{
+                                    startAdornment: <InputAdornment position="start">$</InputAdornment>
+                                  }}
+                                  onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value), product.index)}
+                                  sx={{ width: '100%' }}
+                                  error={!!errors.reimbursementProducts?.[product.index]?.cost}
+                                />
+                              )}
+                            />
+                            <FormHelperText error>
+                              {errors.reimbursementProducts?.[product.index]?.cost?.message}
+                            </FormHelperText>
+                          </FormControl>
                           <IconButton onClick={() => removeProduct(product.index)}>
                             <Delete />
                           </IconButton>

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx

@@ -47,7 +47,11 @@ const schema = yup.object().shape({
       yup.object().shape({
         wbsNum: yup.object().required('WBS Number is required'),
         name: yup.string().required('Description is required'),
-        cost: yup.number().required('Amount is required').min(0.01, 'Amount must be greater than 0')
+        cost: yup
+          .number()
+          .typeError('Amount is required')
+          .required('Amount is required')
+          .min(0.01, 'Amount must be greater than 0')
       })
     )
     .required('reimbursement products required')