ICBC DL lookup, VI incident details page, Remove Autocomplete on inpu…

…t fields (#188)

docker-compose.yml

@@ -107,7 +107,7 @@ services:
       - .env
     environment:
       FLASK_SECRET_KEY: "${FLASK_SECRET_KEY}"
-      ICBC_API_ROOT: "http://icbc_mock_svc:5000/vips/icbc"
+      ICBC_API_ROOT: "${ICBC_API_ROOT}"
       ICBC_LOGIN_USER_ID: "${ICBC_LOGIN_USER_ID}"
       ICBC_API_USERNAME: "${ICBC_API_USERNAME}"
       ICBC_API_PASSWORD: "${ICBC_API_PASSWORD}"

python/prohibition_web_svc/blueprints/events.py

@@ -51,7 +51,6 @@ def create():
     """
     # logging.debug("new event post: {}".format(request.data))
     if request.method == 'POST':
-        logging.debug("-------------Made it here---------------")
         kwargs = middle_logic(
             get_authorized_keycloak_user() + [
                 {"try": event_middleware.request_contains_a_payload, "fail": [

python/prohibition_web_svc/middleware/icbc_middleware.py

@@ -24,7 +24,11 @@ def get_icbc_driver(**kwargs) -> tuple:
     url = "{}/drivers/{}".format(Config.ICBC_API_ROOT, kwargs.get('dl_number'))
     try:
         icbc_response = requests.get(url, headers=kwargs.get('icbc_header'))
-        kwargs['response'] = make_response(icbc_response.json(), icbc_response.status_code)
+        logging.debug(icbc_response.status_code)
+        if icbc_response.status_code == 400:
+            kwargs['response'] = make_response({}, 200)
+        else:
+            kwargs['response'] = make_response(icbc_response.json(), icbc_response.status_code)
     except Exception as e:
         return False, kwargs
     return True, kwargs
@@ -40,6 +44,9 @@ def get_icbc_vehicle(**kwargs) -> tuple:
     try:
         icbc_response = requests.get(url, headers=kwargs.get('icbc_header'), params=url_parameters)
         logging.warning("icbc url:" + icbc_response.url)
+        logging.debug("---------------------------Made it here---------------------------")
+        logging.debug(icbc_response.json())
+        logging.debug("------------------------------------------------------------------")
         kwargs['response'] = make_response(icbc_response.json(), icbc_response.status_code)
     except Exception as e:
         return False, kwargs

roadside-forms-frontend/frontend_web_app/package.json

@@ -16,6 +16,7 @@
     "formik": "^2.2.9",
     "html-to-image": "^1.11.11",
     "keycloak-js": "^21.0.1",
+    "lodash": "^4.17.21",
     "moment-timezone": "^0.5.34",
     "nth-check": "^2.0.1",
     "postcss": "^8.2.4",

roadside-forms-frontend/frontend_web_app/src/api/icbcDriverDataAPI.js

@@ -0,0 +1,17 @@
+import { api } from "./config/axiosConfig";
+import { createRequestHeader } from "../utils/requestHeaders";
+
+export const ICBCDriverDataApi = {
+  get: async function (driver_licence_no) {
+    const headers = {
+      ...createRequestHeader(),
+    };
+    const response = await api.request({
+      url: `/api/v1/icbc/drivers/${driver_licence_no}`,
+      method: "GET",
+      headers: { ...headers },
+    });
+    console.log(response);
+    return response;
+  },
+};

roadside-forms-frontend/frontend_web_app/src/api/icbcVehicleDataApi.js

@@ -0,0 +1,17 @@
+import { api } from "./config/axiosConfig";
+import { createRequestHeader } from "../utils/requestHeaders";
+
+export const ICBCVehicleDataApi = {
+  get: async function (licencePlate) {
+    const headers = {
+      ...createRequestHeader(),
+    };
+    const response = await api.request({
+      url: `/api/v1/icbc/vehicles/${licencePlate}`,
+      method: "GET",
+      headers: { ...headers },
+    });
+    console.log(response);
+    return response.data;
+  },
+};

roadside-forms-frontend/frontend_web_app/src/components/CommonForm/driverInfo.js

@@ -2,6 +2,7 @@ import { Input } from "../common/Input/Input";
 import React, { useState, useEffect } from "react";
 import { SearchableSelect } from "../common/Select/SearchableSelect";
 import PropTypes from "prop-types";
+import _ from "lodash";
 import Button from "react-bootstrap/Button";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -12,10 +13,11 @@ import { useFormikContext } from "formik";
 import "./commonForm.scss";
 import Modal from "react-bootstrap/Modal";
 import { dlScanner } from "../../utils/dlScanner";
+import { ICBCDriverDataApi } from "../../api/icbcDriverDataAPI";
 
 export const DriverInfo = (props) => {
   const { jurisdictions, provinces } = props;
-  const { values } = useFormikContext();
+  const { values, setFieldValue } = useFormikContext();
   const [disableBtn, setdisableBtn] = useState(true);
   const [modalShow, setModalShow] = useState(false);
   const [scannerOpened, setScannerOpened] = useState(false);
@@ -81,6 +83,23 @@ export const DriverInfo = (props) => {
       });
   };
 
+  const fetchICBCDriverInfo = () => {
+    if (values["driver_licence_no"]) {
+      ICBCDriverDataApi.get(values["driver_licence_no"]).then((resp) => {
+        if (!_.isEmpty(resp.data)) {
+          const party = resp.data.party;
+          const address = party.addresses[0];
+          setFieldValue("driver_last_name", party.lastName);
+          setFieldValue("driver_given_name", party.firstName);
+          setFieldValue("driver_dob", new Date(party.birthDate));
+          setFieldValue("driver_address", address.addressLine1);
+          setFieldValue("driver_city", address.city);
+          setFieldValue("driver_postal", address.postalCode);
+        }
+      });
+    }
+  };
+
   // Create conditional check for 12h
   return (
     <>
@@ -123,6 +142,7 @@ export const DriverInfo = (props) => {
                 className="slim-button"
                 variant="primary"
                 disabled={disableBtn}
+                onClick={() => fetchICBCDriverInfo()}
               >
                 ICBC Prefill
               </Button>
@@ -250,6 +270,7 @@ export const DriverInfo = (props) => {
     </>
   );
 };
+
 DriverInfo.propTypes = {
   jurisdictions: PropTypes.array.isRequired,
   provinces: PropTypes.array.isRequired,

roadside-forms-frontend/frontend_web_app/src/components/CommonForm/vehicleInfo.js

@@ -1,11 +1,13 @@
 import "./commonForm.scss";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
+import _ from "lodash";
 import { Input } from "../common/Input/Input";
 import { SearchableSelect } from "../common/Select/SearchableSelect";
 import { useFormikContext } from "formik";
 import Button from "react-bootstrap/Button";
 import { MultiSelectField } from "../common/Select/MultiSelectField";
+import { ICBCVehicleDataApi } from "../../api/icbcVehicleDataApi";
 
 export const VehicleInfo = (props) => {
   const {
@@ -16,7 +18,7 @@ export const VehicleInfo = (props) => {
     jurisdictions,
     provinces,
   } = props;
-  const { values } = useFormikContext();
+  const { values, setFieldValue } = useFormikContext();
   const [disableBtn, setdisableBtn] = useState(true);
   const driversLicenceJurisdiction = values["vehicle_jurisdiction"];
 
@@ -31,6 +33,21 @@ export const VehicleInfo = (props) => {
     }
   }, [driversLicenceJurisdiction]);
 
+  const fetchICBCVehicleInfo = () => {
+    // if (values["vehicle_plate_no"]) {
+    //   ICBCVehicleDataApi.get(values["vehicle_plate_no"]).then((resp) => {
+    //     if (!_.isEmpty(resp.data)) {
+    //       setFieldValue("driver_last_name", party.lastName);
+    //       setFieldValue("driver_given_name", party.firstName);
+    //       setFieldValue("driver_dob", new Date(party.birthDate));
+    //       setFieldValue("driver_address", address.addressLine1);
+    //       setFieldValue("driver_city", address.city);
+    //       setFieldValue("driver_postal", address.postalCode);
+    //     }
+    //   });
+    // }
+  };
+
   return (
     <div className="vehicle-info border-design-form left">
       <h3>Vehicle Information</h3>
@@ -57,6 +74,7 @@ export const VehicleInfo = (props) => {
               className="slim-button"
               variant="primary"
               disabled={disableBtn}
+              onClick={() => fetchICBCVehicleInfo()}
             >
               ICBC Prefill
             </Button>

roadside-forms-frontend/frontend_web_app/src/components/Dashboard/Dashboard.js

@@ -12,7 +12,6 @@ import {
   eventObjectFlatener,
   eventDataFormatter,
 } from "../../utils/helpers";
-import { eventDataUpsert } from "../../utils/dbHelpers";
 import { convertToPST } from "../../utils/dateTime";
 import { StaticDataApi } from "../../api/staticDataApi";
 import { Button } from "../common/Button/Button";

roadside-forms-frontend/frontend_web_app/src/components/Event/createEvent.js

@@ -291,6 +291,9 @@ export const CreateEvent = () => {
           if (form === "ILO" && values["vehicle_impounded"] === "NO") {
             break;
           }
+          if (form === "DETAILS" && !values["incident_details_extra_page"]) {
+            break;
+          }
 
           components.push(
             <SVGprint
@@ -498,6 +501,7 @@ export const CreateEvent = () => {
                         console.log(errors);
                         onSubmit(values);
                       }}
+                      disabled={isSubmitting}
                     >
                       Submit
                     </Button>

roadside-forms-frontend/frontend_web_app/src/components/Forms/Print/print_layout.json

@@ -1844,14 +1844,14 @@
       "INCIDENT_DETAILS_ATTACHED": {
         "field_type": "checkbox",
         "field_name": "incident_details_extra_page",
-        "field_val": "",
+        "field_val": "true",
         "classNames": "fontSmall",
         "start": {
           "x": 98.5,
           "y": 139
         }
       },
-      "INCIDENT_DETAILS": {
+      "REPORT_INCIDENT_DETAILS": {
         "field_type": "textArea",
         "field_name": "incident_details",
         "classNames": "fontXXSmall textArea",
@@ -1860,6 +1860,15 @@
           "y": 144
         }
       },
+      "DETAILS_INCIDENT_DETAILS": {
+        "field_type": "textArea",
+        "field_name": "incident_details",
+        "classNames": "fontXXSmall textArea",
+        "start": {
+          "x": 52.75,
+          "y": 30
+        }
+      },
       "REPORT_OFFICER_LAST_NAME": {
         "field_type": "text",
         "field_name": "officer-lastname",
@@ -1904,6 +1913,51 @@
           "x": 130,
           "y": 178.5
         }
+      },
+      "DETAILS_OFFICER_LAST_NAME": {
+        "field_type": "text",
+        "field_name": "officer-lastname",
+        "classNames": "fontXSmall",
+        "start": {
+          "x": 52.75,
+          "y": 173.75
+        }
+      },
+      "DETAILS_OFFICER_SIGNATURE": {
+        "field_type": "text",
+        "field_name": "officer-lastname",
+        "classNames": "fontXSmall",
+        "start": {
+          "x": 96,
+          "y": 173.75
+        }
+      },
+      "DETAILS_OFFICER_BADGE_NUMBER": {
+        "field_type": "text",
+        "field_name": "officer-prime-id",
+        "classNames": "fontXSmall",
+        "start": {
+          "x": 143,
+          "y": 173.75
+        }
+      },
+      "DETAILS_AGENCY_NAME": {
+        "field_type": "text",
+        "field_name": "officer-agency",
+        "classNames": "fontXSmall",
+        "start": {
+          "x": 52.75,
+          "y": 178.5
+        }
+      },
+      "DETAILS_AGENCY_FILE_NUMBER": {
+        "field_type": "text",
+        "field_name": "agency_file_no",
+        "classNames": "fontXSmall",
+        "start": {
+          "x": 130,
+          "y": 178.5
+        }
       }
     },
     "DRIVER": [
@@ -2116,10 +2170,18 @@
       "REPORT_AGENCY_FILE_NUMBER",
       "INCIDENT_DETAILS_EXPLAINED_BELOW",
       "INCIDENT_DETAILS_ATTACHED",
-      "INCIDENT_DETAILS",
+      "REPORT_INCIDENT_DETAILS",
       "UL_OUT_OF_PROVINCE",
       "SUSPECTED_BC_RESIDENT"
     ],
+    "DETAILS": [
+      "DETAILS_INCIDENT_DETAILS",
+      "DETAILS_OFFICER_LAST_NAME",
+      "DETAILS_OFFICER_SIGNATURE",
+      "DETAILS_OFFICER_BADGE_NUMBER",
+      "DETAILS_AGENCY_NAME",
+      "DETAILS_AGENCY_FILE_NUMBER"
+    ],
     "viewbox": "0 0 210 210"
   },
   "TwelveHour": {

roadside-forms-frontend/frontend_web_app/src/components/common/Input/Input.js

@@ -18,9 +18,18 @@ export const Input = ({ label, required, onChange, ...props }) => {
       <label htmlFor={props.id || props.name}>
         {label}
         {required && <span className="required-asterisk"> *</span>}
-        </label>
-      <input id={field.name} {...field} {...props} className='form-control' onChange={handleInputChange} />
-      {meta.touched && meta.error ? <div className="error-message">{meta.error}</div> : null}
+      </label>
+      <input
+        id={field.name}
+        {...field}
+        {...props}
+        className="form-control"
+        onChange={handleInputChange}
+        autoComplete="off"
+      />
+      {meta.touched && meta.error ? (
+        <div className="error-message">{meta.error}</div>
+      ) : null}
     </div>
   );
-}
+};

roadside-forms-frontend/frontend_web_app/src/components/common/Input/NumericInput.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useField } from 'formik';
+import React from "react";
+import { useField } from "formik";
 
 export const NumericInput = ({ required, label, name, ...props }) => {
   const [field, meta] = useField(name);
@@ -8,23 +8,27 @@ export const NumericInput = ({ required, label, name, ...props }) => {
     const { value } = e.target;
 
     // Limit the input value to 999
-    const sanitizedValue = value.replace(/[^0-9]/g, '').slice(0, 3);
+    const sanitizedValue = value.replace(/[^0-9]/g, "").slice(0, 3);
 
     // Update the field value
     field.onChange({ target: { name, value: sanitizedValue } });
   };
 
   return (
     <div>
-      <label htmlFor={name}>{label}{required && <span className="required-asterisk"> *</span>}</label>
+      <label htmlFor={name}>
+        {label}
+        {required && <span className="required-asterisk"> *</span>}
+      </label>
       <input
         type="text"
         id={name}
         {...field}
         {...props}
         onChange={handleChange}
         required={required}
-        className={`form-control ${meta.touched && meta.error && 'is-invalid'}`}
+        className={`form-control ${meta.touched && meta.error && "is-invalid"}`}
+        autoComplete="off"
       />
       {meta.touched && meta.error && (
         <div className="invalid-feedback">{meta.error}</div>