ORV2-433 Company Profile Form (#169)

bcgov · Feb 2, 2023 · 210b9cd · 210b9cd
1 parent 13068fa
commit 210b9cd
Show file tree

Hide file tree

Showing 34 changed files with 1,180 additions and 535 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,10 @@
     "@bcgov/bc-sans": "^1.0.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.10.16",
     "@mui/material": "^5.11.6",
     "@tanstack/react-query": "^4.22.0",

diff --git a/frontend/public/config.js b/frontend/public/config.js
@@ -11,12 +11,13 @@
  * https://javaadpatel.com/building-and-deploying-react-containers/
  *
  * TODO: How to make env variable work in docker compose
- * Currently, the default values shown below are used 
+ * Currently, the default values shown below are used
  * in the docker compose environment
  */
 const envConfig = (() => {
   return {
     VITE_DEPLOY_ENVIRONMENT: "docker",
     VITE_API_VEHICLE_URL: "http://localhost:5000",
+    VITE_API_MANAGE_PROFILE_URL: "http://localhost:5000",
   };
 })();
diff --git a/frontend/src/common/components/alertBanners/AlertBanners.scss b/frontend/src/common/components/alertBanners/AlertBanners.scss
@@ -9,6 +9,7 @@
 
 .bc-gov-alertbanner:before {
   float: left;
+  font-family: "Font Awesome 5 Free", sans-serif;
   font-size: larger;
   font-style: normal;
   line-height: 1;

diff --git a/frontend/src/common/components/dashboard/TabLayout.scss b/frontend/src/common/components/dashboard/TabLayout.scss
@@ -2,7 +2,8 @@
   padding: 0px 60px;
   overflow: hidden;
   background-color: white;
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
 }
 
 .layout-banner {

diff --git a/frontend/src/common/components/dashboard/TabLayout.tsx b/frontend/src/common/components/dashboard/TabLayout.tsx
@@ -66,7 +66,7 @@ const DisplayTabs = ({
           key={label}
           label={label}
           {...TabProps(index)}
-          sx={{ px: 0, marginRight: "40px", fontWeight: 700 }}
+          //sx={{ px: 0, marginRight: "40px", fontWeight: 700 }}
         />
       );
     })}

diff --git a/...s/form/subsections/CountryAndProvince.tsx → ...on/components/form/CountryAndProvince.tsx b/...s/form/subsections/CountryAndProvince.tsx → ...on/components/form/CountryAndProvince.tsx
@@ -1,15 +1,15 @@
-import { useFormContext, Controller } from "react-hook-form";
+import { useFormContext, Controller, RegisterOptions } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import ".././VehicleForm.scss";
 import FormHelperText from "@mui/material/FormHelperText";
 import { useCallback, useState } from "react";
 import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
-import { COUNTRIES_THAT_SUPPORT_PROVINCE } from "../../../../../constants/countries";
+import { COUNTRIES_THAT_SUPPORT_PROVINCE } from "../../../constants/countries";
 
-import CountriesAndStates from "../../../../../constants/countries_and_states.json";
+import CountriesAndStates from "../../../constants/countries_and_states.json";
+import { Box } from "@mui/material";
 
 /**
  * The props that can be passed to the country and provinces subsection of a form.
@@ -26,6 +26,15 @@ interface CountryAndProvinceProps {
    * Default value is ''
    */
   province?: string | null;
+
+  /**
+   * The value for the width of the select box
+   */
+  width?: string | null;
+  rules?: RegisterOptions;
+  countryField?: string;
+  provinceField?: string;
+  feature?: string;
 }
 
 /**
@@ -38,15 +47,14 @@ interface CountryAndProvinceProps {
 export const CountryAndProvince = ({
   country,
   province,
+  width = "",
+  rules = { required: true },
+  countryField = "country",
+  provinceField = "province",
+  feature = "power-unit",
 }: CountryAndProvinceProps) => {
-  const {
-    register,
-    resetField,
-    watch,
-    setValue,
-    getValues,
-    control,
-  } = useFormContext();
+  const { register, resetField, watch, setValue, getValues, control } =
+    useFormContext();
 
   /**
    * State for displaying selected province
@@ -57,19 +65,17 @@ export const CountryAndProvince = ({
   const [shouldDisplayProvince, setShouldDisplayProvince] =
     useState<boolean>(true);
 
-  const countrySelected = watch("country");
+  const countrySelected = watch(countryField);
   /**
    * Custom css overrides for the form fields
    */
   const formFieldStyle = {
     fontWeight: "bold",
-    width: "490px",
-    marginLeft: "8px",
   };
 
   const inputHeight = {
     height: "48px",
-  }
+  };
 
   /**
    * Function to handle changes on selecting a country.
@@ -79,7 +85,7 @@ export const CountryAndProvince = ({
    */
   const onChangeCountry = useCallback(function (event: SelectChangeEvent) {
     const country: string = event.target.value as string;
-    resetField("province", { defaultValue: "" });
+    resetField(provinceField, { defaultValue: "" });
     setSelectedProvince(() => "");
     if (
       !COUNTRIES_THAT_SUPPORT_PROVINCE.find(
@@ -89,7 +95,7 @@ export const CountryAndProvince = ({
       // If country does not support province, as per API spec, set country to province too
       // even though the field is hidden.
       setShouldDisplayProvince(() => false);
-      setValue("province", country);
+      setValue(provinceField, country);
       setValue("provinceId", country + "-" + country);
     } else {
       setShouldDisplayProvince(() => true);
@@ -105,7 +111,7 @@ export const CountryAndProvince = ({
     const provinceSelected: string = event.target.value;
     setSelectedProvince(() => event.target.value as string);
 
-    setValue("provinceId", getValues("country") + "-" + provinceSelected);
+    setValue("provinceId", getValues(countryField) + "-" + provinceSelected);
   }, []);
 
   /**
@@ -120,26 +126,33 @@ export const CountryAndProvince = ({
 
   const { t } = useTranslation();
   return (
-    <div>
+    <Box sx={{ width: width }}>
       <div>
         <Controller
-          key="controller-powerunit-country"
-          name="country"
+          key={`controller-${feature}-country`}
+          name={countryField}
           control={control}
-          rules={{ required: true }}
+          rules={rules}
           defaultValue={country || ""}
           render={({ fieldState: { invalid } }) => (
             <>
-              <FormControl margin="normal" error={invalid}>
-                <FormLabel id="power-unit-country-label" sx={formFieldStyle}>
+              <FormControl
+                margin="normal"
+                error={invalid}
+                sx={{ width: "100%" }}
+              >
+                <FormLabel id={`${feature}-country-label`} sx={formFieldStyle}>
                   {t("vehicle.power-unit.country")}
+                  {!rules.required && (
+                    <span style={{ fontWeight: "normal" }}> (optional)</span>
+                  )}
                 </FormLabel>
                 <Select
-                  aria-labelledby="power-unit-country-label"
+                  aria-labelledby={`${feature}-country-label`}
                   defaultValue={country || ""}
                   sx={inputHeight}
-                  {...register("country", {
-                    required: true,
+                  {...register(countryField, {
+                    required: rules.required,
                     onChange: onChangeCountry,
                   })}
                 >
@@ -165,25 +178,32 @@ export const CountryAndProvince = ({
       {shouldDisplayProvince && (
         <div>
           <Controller
-            key="controller-powerunit-province"
-            name="province"
-            rules={{ required: shouldDisplayProvince }}
+            key={`controller-${feature}-province`}
+            name={provinceField}
+            rules={{ required: shouldDisplayProvince && rules.required }}
             defaultValue={province || ""}
             render={({ fieldState: { invalid } }) => (
               <>
                 <FormControl
                   margin="normal"
                   error={invalid}
+                  sx={{ width: "100%" }}
                 >
-                  <FormLabel id="power-unit-province-label" sx={formFieldStyle}>
+                  <FormLabel
+                    id={`${feature}-province-label`}
+                    sx={formFieldStyle}
+                  >
                     {t("vehicle.power-unit.province")}
+                    {!rules.required && (
+                      <span style={{ fontWeight: "normal" }}> (optional)</span>
+                    )}
                   </FormLabel>
                   <Select
-                    aria-labelledby="power-unit-province-label"
+                    aria-labelledby={`${feature}-province-label`}
                     defaultValue={province || ""}
                     sx={inputHeight}
-                    {...register("province", {
-                      required: shouldDisplayProvince,
+                    {...register(provinceField, {
+                      required: shouldDisplayProvince && rules.required,
                       onChange: onChangeProvince,
                     })}
                     value={selectedProvince}
@@ -203,7 +223,7 @@ export const CountryAndProvince = ({
                         fieldName: "Province / State",
                         interpolation: {
                           escapeValue: false,
-                        }
+                        },
                       })}
                     </FormHelperText>
                   )}
@@ -213,6 +233,6 @@ export const CountryAndProvince = ({
           />
         </div>
       )}
-    </div>
+    </Box>
   );
 };