ORV2-2557: Fix permit start date validation bug (#1528)

bcgov · Aug 7, 2024 · 9bdecd4 · 9bdecd4
1 parent b54ec99
commit 9bdecd4
Show file tree

Hide file tree

Showing 12 changed files with 290 additions and 141 deletions.
diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx
@@ -6,8 +6,8 @@ import {
   RegisterOptions,
   useFormContext,
 } from "react-hook-form";
+
 import { ORBC_FormTypes } from "../../types/common";
-import { CustomDatePicker } from "./subFormComponents/CustomDatePicker";
 import { CustomOutlinedInput } from "./subFormComponents/CustomOutlinedInput";
 import { CustomSelect } from "./subFormComponents/CustomSelect";
 import { PhoneNumberInput } from "./subFormComponents/PhoneNumberInput";
@@ -17,7 +17,7 @@ import { CustomTextArea } from "./subFormComponents/CustomTextArea";
  * Properties of onRouteBC custom form components
  */
 export interface CustomFormComponentProps<T extends FieldValues> {
-  type: "input" | "select" | "phone" | "datePicker" | "textarea";
+  type: "input" | "select" | "phone" | "textarea";
   feature: string;
   options: CustomFormOptionsProps<T>;
   menuOptions?: JSX.Element[];
@@ -73,7 +73,7 @@ export const getErrorMessage = (errors: any, fieldPath: string): string => {
  * @param customHelperText Non-bold text to appear in parenthesis beside the label
  * @param menuOptions Menu items array for MUI Select component
  *
- * @returns An onRouteBc customized react form component
+ * @returns An onRouteBC customized react form component
  */
 export const CustomFormComponent = <T extends ORBC_FormTypes>({
   type,
@@ -139,15 +139,6 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
             readOnly={readOnly}
           />
         );
-      case "datePicker":
-        return (
-          <CustomDatePicker
-            feature={feature}
-            name={name}
-            disabled={disabled}
-            readOnly={readOnly}
-          />
-        );
       case "textarea":
         return (
           <CustomTextArea
@@ -164,6 +155,7 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
         return null;
     }
   };
+
   return (
     <Box sx={className ? null : { width }} className={className}>
       <Controller

diff --git a/frontend/src/common/components/form/subFormComponents/CustomDatePicker.scss b/frontend/src/common/components/form/subFormComponents/CustomDatePicker.scss
@@ -1,3 +1,68 @@
-@use "../CustomFormComponents";
+@import "../../../../themes/orbcStyles";
 
-@include CustomFormComponents.custom-form-component(".custom-date-picker");
+.custom-date-picker {
+  & &__form-control {
+    width: 100%;
+  }
+
+  & &__label {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  & &__input-container {
+    z-index: 1;
+    color: $bc-black;
+    -webkit-text-fill-color: $bc-black;
+  }
+
+  &__picker {
+    &--disabled {
+      .custom-date-picker {
+        &__input-container {
+          z-index: 1;
+          color: $bc-black;
+          -webkit-text-fill-color: $bc-black;
+        }
+      }
+
+      svg {
+        z-index: 1;
+      }
+
+      fieldset {
+        background-color: $bc-background-light-grey;
+        border: 2px solid $bc-text-box-border-grey;
+      }
+    }
+
+    &.Mui-focused, & .Mui-focused {
+      fieldset {
+        border: 2px solid $focus-blue;
+      }
+    }
+
+    &--invalid.Mui-focused,
+    &--invalid .Mui-focused,
+    &--invalid,
+    .Mui-error {
+      fieldset {
+        border: 2px solid $bc-red;
+      }
+    }
+
+    fieldset {
+      border: 2px solid $bc-text-box-border-grey;   
+    }
+  }
+
+  &__helper-text {
+    .custom-date-picker &#{&}--warning {
+      color: $bc-black;
+    }
+
+    .custom-date-picker &#{&}--error {
+      color: $bc-red;
+    }
+  }
+}