ORV2-2755 - STOS application form and review

docker-compose.yml

@@ -202,6 +202,7 @@ services:
       args:
         VITE_DEPLOY_ENVIRONMENT: ${VITE_DEPLOY_ENVIRONMENT}
         VITE_API_VEHICLE_URL: ${VITE_API_VEHICLE_URL}
+        VITE_POLICY_URL: ${VITE_POLICY_URL}
         VITE_KEYCLOAK_ISSUER_URL: ${VITE_KEYCLOAK_ISSUER_URL}
         VITE_KEYCLOAK_AUDIENCE: ${VITE_KEYCLOAK_AUDIENCE}
         VITE_SITEMINDER_LOG_OFF_URL: ${VITE_SITEMINDER_LOG_OFF_URL}

frontend/Dockerfile

@@ -7,12 +7,14 @@ WORKDIR /app
 #ENV NODE_ENV production
 ARG VITE_DEPLOY_ENVIRONMENT
 ARG VITE_API_VEHICLE_URL
+ARG VITE_POLICY_URL
 ARG VITE_KEYCLOAK_ISSUER_URL
 ARG VITE_KEYCLOAK_AUDIENCE
 ARG VITE_SITEMINDER_LOG_OFF_URL
 
 ENV VITE_DEPLOY_ENVIRONMENT $VITE_DEPLOY_ENVIRONMENT
 ENV VITE_API_VEHICLE_URL $VITE_API_VEHICLE_URL
+ENV VITE_POLICY_URL $VITE_POLICY_URL
 ENV VITE_KEYCLOAK_ISSUER_URL $VITE_KEYCLOAK_ISSUER_URL
 ENV VITE_KEYCLOAK_AUDIENCE $VITE_KEYCLOAK_AUDIENCE
 ENV VITE_SITEMINDER_LOG_OFF_URL $VITE_SITEMINDER_LOG_OFF_URL

frontend/README.md

@@ -19,6 +19,7 @@ Create a .env file in the root directory of onRouteBC and add the following vari
 ```conf
 VITE_DEPLOY_ENVIRONMENT=local
 VITE_API_VEHICLE_URL=http://localhost:5000
+VITE_POLICY_URL=http://localhost:5002
 VITE_KEYCLOAK_ISSUER_URL=
 VITE_KEYCLOAK_AUDIENCE=
 VITE_SITEMINDER_LOG_OFF_URL=

frontend/package.json

@@ -21,6 +21,7 @@
     "material-react-table": "^2.13.1",
     "mui-nested-menu": "^3.4.0",
     "oidc-client-ts": "^3.0.1",
+    "onroute-policy-engine": "^0.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",

frontend/src/common/apiManager/endpoints/endpoints.ts

@@ -1,2 +1,5 @@
 export const VEHICLES_URL =
   import.meta.env.VITE_API_VEHICLE_URL || envConfig.VITE_API_VEHICLE_URL;
+
+export const POLICY_URL =
+  import.meta.env.VITE_POLICY_URL || envConfig.VITE_POLICY_URL;

frontend/src/common/components/banners/PermitExpiryDateBanner.scss

@@ -3,10 +3,18 @@
 .permit-expiry-date-banner {
   background-color: $banner-grey;
   color: $bc-primary-blue;
-  margin-top: 1.25rem;
-  padding: 1.5em;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 270px;
+  padding: 1.5rem;
+  width: fit-content;
+  width: -moz-fit-content; /* For Firefox, Firefox Android */
+
+  & &__label {
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  & &__expiry-date {
+    margin: 0.25rem 0 0 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
 }

frontend/src/common/components/banners/PermitExpiryDateBanner.tsx

@@ -1,5 +1,3 @@
-import { Box, Typography } from "@mui/material";
-
 import "./PermitExpiryDateBanner.scss";
 
 export const PermitExpiryDateBanner = ({
@@ -8,13 +6,17 @@ export const PermitExpiryDateBanner = ({
   expiryDate: string;
 }) => {
   return (
-    <Box className="permit-expiry-date-banner">
-      <div>
-        <Typography variant="h5">PERMIT EXPIRY DATE</Typography>
-        <Typography variant="h4" data-testid="permit-expiry-date">
-          {expiryDate}
-        </Typography>
-      </div>
-    </Box>
+    <div className="permit-expiry-date-banner">
+      <p className="permit-expiry-date-banner__label">
+        PERMIT EXPIRY DATE
+      </p>
+
+      <p
+        className="permit-expiry-date-banner__expiry-date"
+        data-testid="permit-expiry-date"
+      >
+        {expiryDate}
+      </p>
+    </div>
   );
 };

frontend/src/common/components/form/CountryAndProvince.tsx

@@ -2,9 +2,9 @@ import { useFormContext, FieldPath } from "react-hook-form";
 import { useCallback, useEffect, useState } from "react";
 import { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
-import { COUNTRIES_THAT_SUPPORT_PROVINCE } from "../../constants/countries";
 
-import CountriesAndStates from "../../constants/countries_and_states.json";
+import { COUNTRIES } from "../../constants/countries";
+import { countrySupportsProvinces } from "../../helpers/countries/countrySupportsProvinces";
 import { DEFAULT_WIDTH } from "../../../themes/bcGovStyles";
 import { CustomFormComponent } from "./CustomFormComponents";
 import { Nullable, ORBC_FormTypes } from "../../types/common";
@@ -14,32 +14,11 @@ import {
   requiredMessage,
 } from "../../helpers/validationMessages";
 
-/**
- * The props that can be passed to the country and provinces subsection of a form.
- */
 interface CountryAndProvinceProps {
-  /**
-   * Name of the feature that the field belongs to.
-   * This name is used for Id's and keys.
-   * Example: feature={"profile"}
-   */
   feature: string;
-
-  /**
-   * The value for the width of the select box
-   */
   width?: string;
-
-  /**
-   * Name used for the API call. Example: countryField="primaryContact.countryCode"
-   */
   countryField: string;
   provinceField: string;
-
-  /**
-   * Boolean for react hook form rules. Example-> rules: { required: isCountryRequired }
-   * Should default to true
-   */
   isCountryRequired?: boolean;
   isProvinceRequired?: boolean;
   countryClassName?: string;
@@ -50,9 +29,6 @@ interface CountryAndProvinceProps {
 
 /**
  * The CountryAndProvince component provides form fields for country and province.
- * This implementation uses {@link  COUNTRIES_THAT_SUPPORT_PROVINCE} to display or hide
- * the province field.
- *
  * @returns A react component with the country and province fields.
  */
 export const CountryAndProvince = <T extends ORBC_FormTypes>({
@@ -68,10 +44,6 @@ export const CountryAndProvince = <T extends ORBC_FormTypes>({
   readOnly,
 }: CountryAndProvinceProps): JSX.Element => {
   const { resetField, watch, setValue } = useFormContext();
-
-  const countrySupportsProvinces = (country: string) =>
-    COUNTRIES_THAT_SUPPORT_PROVINCE.includes(country);
-
   const countrySelected = watch(countryField);
   const provinceSelected = watch(provinceField);
 
@@ -130,7 +102,7 @@ export const CountryAndProvince = <T extends ORBC_FormTypes>({
    * @param selectedCountry string representing the country
    */
   const getProvinces = useCallback(function (selectedCountry: string) {
-    return CountriesAndStates.filter(
+    return COUNTRIES.filter(
       (country) => country.code === selectedCountry,
     ).flatMap((country) => country.states);
   }, []);
@@ -173,7 +145,7 @@ export const CountryAndProvince = <T extends ORBC_FormTypes>({
           label: "Country",
           width: width,
         }}
-        menuOptions={CountriesAndStates.map((country) => (
+        menuOptions={COUNTRIES.map((country) => (
           <MenuItem key={`country-${country.name}`} value={country.code}>
             {country.name}
           </MenuItem>

frontend/src/common/components/form/CustomFormComponents.scss

@@ -1,5 +1,21 @@
 @import "../../../themes/orbcStyles";
 
+.custom-form-control {
+  .custom-form-components & {
+    width: 100%;
+  }
+
+  & &__label {
+    color: $bc-black;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+
+    .custom-form-components &--error {
+      color: $bc-black;
+    }
+  }  
+}
+
 @mixin custom-form-component($component) {
   #{$component} {
     &#{&}--disabled {