Fix code smells, minor refactoring

frontend/src/common/components/form/subFormComponents/NumberInput.tsx

@@ -10,7 +10,7 @@ import {
 import "./NumberInput.scss";
 import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../helpers/util";
 import { convertToNumberIfValid } from "../../../helpers/numeric/convertToNumberIfValid";
-import { isUndefined, RequiredOrNull } from "../../../types/common";
+import { isNull, RequiredOrNull } from "../../../types/common";
 
 type NumberInputClassKey =
   "root" | "label";
@@ -57,10 +57,10 @@ export const NumberInput = (props: NumberInputProps) => {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const updatedVal = e.target.value;
-    const numericVal = convertToNumberIfValid(updatedVal, undefined);
+    const numericVal = convertToNumberIfValid(updatedVal, null);
 
     // If an invalid numeric string was inputted, do nothing
-    if (isUndefined(numericVal)) return;
+    if (isNull(numericVal)) return;
 
     // Otherwise display it without formatting it immediately (as that affects user's ability to input)
     setValueDisplay(updatedVal);
@@ -70,8 +70,8 @@ export const NumberInput = (props: NumberInputProps) => {
   // The user is free to enter numbers into the input field,
   // but as they leave the input will be formatted if a maskFn is available
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    const num = convertToNumberIfValid(valueDisplay, undefined);
-    if (maskFn && !isUndefined(num)) {
+    const num = convertToNumberIfValid(valueDisplay, null);
+    if (maskFn && !isNull(num)) {
       setValueDisplay(maskFn(num));
     }
     onBlur?.(e);

frontend/src/common/helpers/numeric/convertToNumberIfValid.ts

@@ -20,5 +20,5 @@ export const convertToNumberIfValid = <T extends Nullable<number | string>>(
     || isNumberButInvalid
     || isStringButInvalid;
 
-  return !isInvalid ? Number(numericVal) : fallbackWhenInvalid;
+  return !isInvalid ? Number(numericVal) : fallbackWhenInvalid as T;
 };

frontend/src/features/manageProfile/pages/DisplayCompanyInfo.tsx

@@ -12,6 +12,7 @@ import { getDefaultRequiredVal } from "../../../common/helpers/util";
 import { CompanyProfile } from "../types/manageProfile";
 import { getProvinceFullName } from "../../../common/helpers/countries/getProvinceFullName";
 import { getCountryFullName } from "../../../common/helpers/countries/getCountryFullName";
+import { Nullable } from "../../../common/types/common";
 
 export const DisplayInfo = memo(
   ({
@@ -34,6 +35,12 @@ export const DisplayInfo = memo(
       companyInfo?.primaryContact?.provinceCode,
     );
 
+    const phoneDisplay = (phone: string, ext?: Nullable<string>) => {
+      return `${formatPhoneNumber(
+        phone,
+      )} ${ext ? `Ext: ${ext}` : ""}`;
+    };
+
     return companyInfo ? (
       <div className="display-company-info">
         <Box>
@@ -48,11 +55,9 @@ export const DisplayInfo = memo(
 
           <Typography>{companyInfo.mailingAddress.addressLine1}</Typography>
 
-          {mailingCountry ? (
-            <Typography>
-              {mailingCountry}
-            </Typography>
-          ) : null}
+          <Typography>
+            {mailingCountry}
+          </Typography>
 
           {mailingProvince ? (
             <Typography>
@@ -71,9 +76,7 @@ export const DisplayInfo = memo(
           </Typography>
 
           <Typography>
-            {`Phone: ${formatPhoneNumber(companyInfo.phone)} ${
-              companyInfo.extension ? `Ext: ${companyInfo.extension}` : ""
-            }`}
+            {`Phone: ${phoneDisplay(companyInfo.phone, companyInfo.extension)}`}
           </Typography>
 
           {companyInfo?.fax ? (
@@ -93,20 +96,15 @@ export const DisplayInfo = memo(
           </Typography>
 
           <Typography>
-            {`Primary Phone: ${formatPhoneNumber(
+            {`Primary Phone: ${phoneDisplay(
               companyInfo.primaryContact.phone1,
-            )} ${
-              companyInfo.primaryContact.phone1Extension
-                ? `Ext: ${companyInfo.primaryContact.phone1Extension}`
-                : ""
-            }`}
+              companyInfo.primaryContact.phone1Extension,
+            )}`}
           </Typography>
 
-          {primaryContactCountry ? (
-            <Typography>
-              {primaryContactCountry}
-            </Typography>
-          ) : null}
+          <Typography>
+            {primaryContactCountry}
+          </Typography>
 
           {primaryContactProvince ? (
             <Typography>

frontend/src/features/permits/hooks/form/useApplicationFormContext.ts

@@ -6,7 +6,7 @@ import { usePermitDateSelection } from "../usePermitDateSelection";
 import { usePermitConditions } from "../usePermitConditions";
 import { getStartOfDate } from "../../../../common/helpers/formatDate";
 import { usePermitVehicles } from "../usePermitVehicles";
-import { arePermitLOADetailsEqual, PermitLOA } from "../../types/PermitLOA";
+import { arePermitLOADetailsEqual } from "../../types/PermitLOA";
 import { useMemoizedArray } from "../../../../common/hooks/useMemoizedArray";
 import { getDefaultRequiredVal } from "../../../../common/helpers/util";
 import { arePermitConditionEqual } from "../../types/PermitCondition";
@@ -118,7 +118,7 @@ export const useApplicationFormContext = () => {
     permitType,
     startDate,
     durationOptions,
-    currentSelectedLOAs as PermitLOA[],
+    currentSelectedLOAs,
     permitDuration,
     onSetDuration,
     onSetExpiryDate,
@@ -151,18 +151,18 @@ export const useApplicationFormContext = () => {
     filteredVehicleOptions,
     subtypeOptions,
     isSelectedLOAVehicle,
-  } = usePermitVehicles(
+  } = usePermitVehicles({
     policyEngine,
     permitType,
     isLcvDesignated,
     vehicleFormData,
     allVehiclesFromInventory,
-    currentSelectedLOAs as PermitLOA[],
+    selectedLOAs: currentSelectedLOAs,
     powerUnitSubtypeNamesMap,
     trailerSubtypeNamesMap,
-    () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)),
-    permittedCommodity?.commodityType,
-  );
+    onClearVehicle: () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)),
+    selectedCommodity: permittedCommodity?.commodityType,
+  });
 
   const selectedVehicleConfigSubtypes = useMemoizedArray(
     getDefaultRequiredVal(

frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts

@@ -28,15 +28,28 @@ import { getEligibleVehicleSubtypes } from "../../helpers/vehicles/subtypes/getE
  * @returns Current application form data, methods to manage the form, and selectable input options
  */
 export const useInitApplicationFormData = (
-  permitType: PermitType,
-  isLcvDesignated: boolean,
-  companyLOAs: LOADetail[],
-  inventoryVehicles: (PowerUnit | Trailer)[],
-  companyInfo: Nullable<CompanyProfile>,
-  applicationData?: Nullable<Application>,
-  userDetails?: BCeIDUserDetailContext,
-  policyEngine?: Nullable<Policy>,
+  data: {
+    permitType: PermitType;
+    isLcvDesignated: boolean;
+    companyLOAs: LOADetail[];
+    inventoryVehicles: (PowerUnit | Trailer)[];
+    companyInfo: Nullable<CompanyProfile>;
+    applicationData?: Nullable<Application>;
+    userDetails?: BCeIDUserDetailContext;
+    policyEngine?: Nullable<Policy>;
+  },
 ) => {
+  const {
+    permitType,
+    isLcvDesignated,
+    companyLOAs,
+    inventoryVehicles,
+    companyInfo,
+    applicationData,
+    userDetails,
+    policyEngine,
+  } = data;
+
   // Used to populate/initialize the form with
   // This will be updated whenever new application, company, and user data is fetched
   const initialFormData = useMemo(() => {

frontend/src/features/permits/hooks/usePermitVehicles.ts

@@ -16,17 +16,32 @@ import {
 } from "../../manageVehicles/types/Vehicle";
 
 export const usePermitVehicles = (
-  policyEngine: Policy,
-  permitType: PermitType,
-  isLcvDesignated: boolean,
-  vehicleFormData: PermitVehicleDetails,
-  allVehiclesFromInventory: (PowerUnit | Trailer)[],
-  selectedLOAs: PermitLOA[],
-  powerUnitSubtypeNamesMap: Map<string, string>,
-  trailerSubtypeNamesMap: Map<string, string>,
-  onClearVehicle: () => void,
-  selectedCommodity?: Nullable<string>,
+  data: {
+    policyEngine: Policy;
+    permitType: PermitType;
+    isLcvDesignated: boolean;
+    vehicleFormData: PermitVehicleDetails;
+    allVehiclesFromInventory: (PowerUnit | Trailer)[];
+    selectedLOAs: PermitLOA[];
+    powerUnitSubtypeNamesMap: Map<string, string>;
+    trailerSubtypeNamesMap: Map<string, string>;
+    onClearVehicle: () => void;
+    selectedCommodity?: Nullable<string>;
+  },
 ) => {
+  const {
+    policyEngine,
+    permitType,
+    isLcvDesignated,
+    vehicleFormData,
+    allVehiclesFromInventory,
+    selectedLOAs,
+    powerUnitSubtypeNamesMap,
+    trailerSubtypeNamesMap,
+    onClearVehicle,
+    selectedCommodity,
+  } = data;
+
   const eligibleVehicleSubtypes = useMemo(() => {
     return getEligibleVehicleSubtypes(
       permitType,

frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx

@@ -83,16 +83,16 @@ export const AmendPermitForm = () => {
     initialFormData,
     formData,
     formMethods,
-  } = useAmendPermitForm(
-    currentStepIndex === 0,
+  } = useAmendPermitForm({
+    repopulateFormData: currentStepIndex === 0,
     isLcvDesignated,
     companyLOAs,
-    allVehiclesFromInventory,
+    inventoryVehicles: allVehiclesFromInventory,
     companyInfo,
     permit,
     amendmentApplication,
     policyEngine,
-  );
+  });
 
   const { createdDateTime, updatedDateTime } = getDatetimes(
     amendmentApplication,

frontend/src/features/permits/pages/Amend/hooks/useAmendPermitForm.ts

@@ -19,15 +19,28 @@ import {
 } from "../types/AmendPermitFormData";
 
 export const useAmendPermitForm = (
-  repopulateFormData: boolean,
-  isLcvDesignated: boolean,
-  companyLOAs: LOADetail[],
-  inventoryVehicles: (PowerUnit | Trailer)[],
-  companyInfo: Nullable<CompanyProfile>,
-  permit?: Nullable<Permit>,
-  amendmentApplication?: Nullable<Application>,
-  policyEngine?: Nullable<Policy>,
+  data: {
+    repopulateFormData: boolean;
+    isLcvDesignated: boolean;
+    companyLOAs: LOADetail[];
+    inventoryVehicles: (PowerUnit | Trailer)[];
+    companyInfo: Nullable<CompanyProfile>;
+    permit?: Nullable<Permit>;
+    amendmentApplication?: Nullable<Application>;
+    policyEngine?: Nullable<Policy>;
+  },
 ) => {
+  const {
+    repopulateFormData,
+    isLcvDesignated,
+    companyLOAs,
+    inventoryVehicles,
+    companyInfo,
+    permit,
+    amendmentApplication,
+    policyEngine,
+  } = data;
+
   // Default form data values to populate the amend form with
   const defaultFormData = useMemo(() => {
     if (amendmentApplication) {

frontend/src/features/permits/pages/Application/ApplicationForm.tsx

@@ -98,16 +98,16 @@ export const ApplicationForm = ({
     initialFormData,
     currentFormData,
     formMethods,
-  } = useInitApplicationFormData(
+  } = useInitApplicationFormData({
     permitType,
     isLcvDesignated,
     companyLOAs,
-    allVehiclesFromInventory,
+    inventoryVehicles: allVehiclesFromInventory,
     companyInfo,
-    applicationContext?.applicationData,
+    applicationData: applicationContext?.applicationData,
     userDetails,
     policyEngine,
-  );
+  });
 
   // Applicable LOAs must be:
   // 1. Applicable for the current permit type

frontend/src/features/permits/pages/Application/ApplicationReview.tsx

@@ -149,12 +149,14 @@ export const ApplicationReview = ({
     }
   };
 
+  const setShowSnackbar = () => true;
+
   const handleAddToCart = async () => {
     await handleSaveApplication(async (companyId, permitId, applicationNumber) => {
       await proceedWithAddToCart(companyId, [permitId], () => {
         setSnackBar({
           showSnackbar: true,
-          setShowSnackbar: () => true,
+          setShowSnackbar,
           message: `Application ${applicationNumber} added to cart`,
           alertType: "success",
         });
@@ -179,7 +181,7 @@ export const ApplicationReview = ({
         onSuccess: () => {
           setSnackBar({
             showSnackbar: true,
-            setShowSnackbar: () => true,
+            setShowSnackbar,
             message: `Application ${applicationNumber} submitted for review`,
             alertType: "success",
           });

frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss

@@ -1,8 +1,8 @@
-@import "../../../../../../../themes/orbcStyles";
+@use "../../../../../../../themes/orbcStyles";
 
 .highway-sequences {
   & &__info {
-    color: $bc-black;
+    color: orbcStyles.$bc-black;
     margin: 1.5rem 0;
 
     .highway-sequences-info {
@@ -44,31 +44,31 @@
 
       &__error {
         margin-top: 0.5rem;
-        color: $bc-red;
+        color: orbcStyles.$bc-red;
       }
 
       .highway-number-form-control {
         &__label {
           font-size: 1rem;
           font-weight: bold;
-          color: $bc-black;
+          color: orbcStyles.$bc-black;
           margin-bottom: 0.5rem;
         }
 
         &__input {
           fieldset {
-            border: 2px solid $bc-text-box-border-grey;
+            border: 2px solid orbcStyles.$bc-text-box-border-grey;
           }
 
           &--focus {
             fieldset {
-              border: 2px solid $focus-blue;
+              border: 2px solid orbcStyles.$focus-blue;
             }
           }
 
           &--error {
             fieldset {
-              border: 2px solid $bc-red;
+              border: 2px solid orbcStyles.$bc-red;
             }
           }
         }