+
{
},
label: "Phone Number",
- width: PHONE_WIDTH,
}}
/>
{
},
},
label: "Ext",
- width: EXT_WIDTH,
}}
/>
-
+
{
},
},
label: "Alternate Number",
- width: PHONE_WIDTH,
}}
/>
{
},
},
label: "Ext",
- width: EXT_WIDTH,
}}
/>
-
+
{
/>
{
/>
;
durationOptions: {
value: number;
label: string;
}[];
- vehicleOptions: (PowerUnit | Trailer)[];
- powerUnitSubtypes: VehicleSubType[];
- trailerSubtypes: VehicleSubType[];
+ allVehiclesFromInventory: (PowerUnit | Trailer)[];
+ powerUnitSubtypeNamesMap: Map;
+ trailerSubtypeNamesMap: Map;
isLcvDesignated: boolean;
feature: string;
companyInfo?: Nullable;
@@ -40,26 +39,23 @@ interface ApplicationFormContextType {
revisionDateTime: string;
comment: string;
}[];
+ policyViolations: Record;
+ clearViolation: (fieldReference: string) => void;
+ triggerPolicyValidation: () => Promise>;
onLeave?: () => void;
onSave?: () => Promise;
onCancel?: () => void;
onContinue: () => Promise;
- onSetDuration: (duration: number) => void;
- onSetExpiryDate: (expiry: Dayjs) => void;
- onSetConditions: (conditions: PermitCondition[]) => void;
- onToggleSaveVehicle: (saveVehicle: boolean) => void;
- onSetVehicle: (vehicleDetails: PermitVehicleDetails) => void;
- onClearVehicle: (saveVehicle: boolean) => void;
- onUpdateLOAs: (updatedLOAs: PermitLOA[]) => void;
}
export const ApplicationFormContext = createContext({
initialFormData: getDefaultValues(DEFAULT_PERMIT_TYPE, undefined),
formData: getDefaultValues(DEFAULT_PERMIT_TYPE, undefined),
+ policyEngine: undefined,
durationOptions: [],
- vehicleOptions: [],
- powerUnitSubtypes: [],
- trailerSubtypes: [],
+ allVehiclesFromInventory: [],
+ powerUnitSubtypeNamesMap: new Map(),
+ trailerSubtypeNamesMap: new Map(),
isLcvDesignated: false,
feature: "",
companyInfo: undefined,
@@ -69,15 +65,11 @@ export const ApplicationFormContext = createContext(
pastStartDateStatus: PAST_START_DATE_STATUSES.ALLOWED,
companyLOAs: [],
revisionHistory: [],
+ policyViolations: {},
+ clearViolation: () => undefined,
+ triggerPolicyValidation: async () => ({}),
onLeave: undefined,
onSave: undefined,
onCancel: undefined,
onContinue: async () => undefined,
- onSetDuration: () => undefined,
- onSetExpiryDate: () => undefined,
- onSetConditions: () => undefined,
- onToggleSaveVehicle: () => undefined,
- onSetVehicle: () => undefined,
- onClearVehicle: () => undefined,
- onUpdateLOAs: () => undefined,
});
diff --git a/frontend/src/features/permits/helpers/conditions.ts b/frontend/src/features/permits/helpers/conditions.ts
index 681c5d263..581a30769 100644
--- a/frontend/src/features/permits/helpers/conditions.ts
+++ b/frontend/src/features/permits/helpers/conditions.ts
@@ -1,5 +1,6 @@
import { isVehicleSubtypeLCV } from "../../manageVehicles/helpers/vehicleSubtypes";
import { LCV_CONDITION } from "../constants/constants";
+import { MANDATORY_STOS_CONDITIONS, STOS_CONDITIONS } from "../constants/stos";
import { MANDATORY_TROS_CONDITIONS, TROS_CONDITIONS } from "../constants/tros";
import { MANDATORY_TROW_CONDITIONS, TROW_CONDITIONS } from "../constants/trow";
import { PermitCondition } from "../types/PermitCondition";
@@ -17,6 +18,8 @@ export const getMandatoryConditions = (
) => {
const additionalConditions = includeLcvCondition ? [LCV_CONDITION] : [];
switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return MANDATORY_STOS_CONDITIONS.concat(additionalConditions);
case PERMIT_TYPES.TROW:
return MANDATORY_TROW_CONDITIONS.concat(additionalConditions);
case PERMIT_TYPES.TROS:
@@ -32,6 +35,8 @@ const getConditionsByPermitType = (
) => {
const additionalConditions = includeLcvCondition ? [LCV_CONDITION] : [];
switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return STOS_CONDITIONS.concat(additionalConditions);
case PERMIT_TYPES.TROW:
return TROW_CONDITIONS.concat(additionalConditions);
case PERMIT_TYPES.TROS:
diff --git a/frontend/src/features/permits/helpers/dateSelection.ts b/frontend/src/features/permits/helpers/dateSelection.ts
index 0664b8671..5c2dafb8e 100644
--- a/frontend/src/features/permits/helpers/dateSelection.ts
+++ b/frontend/src/features/permits/helpers/dateSelection.ts
@@ -22,15 +22,29 @@ import {
TROW_DURATION_OPTIONS,
} from "../constants/trow";
+import {
+ MAX_STOS_DURATION,
+ MIN_STOS_DURATION,
+ STOS_DURATION_INTERVAL_DAYS,
+ STOS_DURATION_OPTIONS,
+} from "../constants/stos";
+
/**
* Get list of selectable duration options for a given permit type.
* @param permitType Permit type to get duration options for
* @returns List of selectable duration options for the given permit type
*/
export const durationOptionsForPermitType = (permitType: PermitType) => {
- if (permitType === PERMIT_TYPES.TROS) return TROS_DURATION_OPTIONS;
- if (permitType === PERMIT_TYPES.TROW) return TROW_DURATION_OPTIONS;
- return [];
+ switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return STOS_DURATION_OPTIONS;
+ case PERMIT_TYPES.TROW:
+ return TROW_DURATION_OPTIONS;
+ case PERMIT_TYPES.TROS:
+ return TROS_DURATION_OPTIONS;
+ default:
+ return [];
+ }
};
/**
@@ -39,9 +53,16 @@ export const durationOptionsForPermitType = (permitType: PermitType) => {
* @returns Mininum allowable duration for the permit type
*/
export const minDurationForPermitType = (permitType: PermitType) => {
- if (permitType === PERMIT_TYPES.TROS) return MIN_TROS_DURATION;
- if (permitType === PERMIT_TYPES.TROW) return MIN_TROW_DURATION;
- return 0;
+ switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return MIN_STOS_DURATION;
+ case PERMIT_TYPES.TROW:
+ return MIN_TROW_DURATION;
+ case PERMIT_TYPES.TROS:
+ return MIN_TROS_DURATION;
+ default:
+ return 0;
+ }
};
/**
@@ -50,9 +71,16 @@ export const minDurationForPermitType = (permitType: PermitType) => {
* @returns Maxinum allowable duration for the permit type
*/
export const maxDurationForPermitType = (permitType: PermitType) => {
- if (permitType === PERMIT_TYPES.TROS) return MAX_TROS_DURATION;
- if (permitType === PERMIT_TYPES.TROW) return MAX_TROW_DURATION;
- return BASE_DAYS_IN_YEAR;
+ switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return MAX_STOS_DURATION;
+ case PERMIT_TYPES.TROW:
+ return MAX_TROW_DURATION;
+ case PERMIT_TYPES.TROS:
+ return MAX_TROS_DURATION;
+ default:
+ return BASE_DAYS_IN_YEAR;
+ }
};
/**
@@ -62,6 +90,8 @@ export const maxDurationForPermitType = (permitType: PermitType) => {
*/
export const getDurationIntervalDays = (permitType: PermitType) => {
switch (permitType) {
+ case PERMIT_TYPES.STOS:
+ return STOS_DURATION_INTERVAL_DAYS;
case PERMIT_TYPES.TROW:
return TROW_DURATION_INTERVAL_DAYS;
case PERMIT_TYPES.TROS:
diff --git a/frontend/src/features/permits/helpers/equality.ts b/frontend/src/features/permits/helpers/equality.ts
index 1987ec74a..ada7f2b4a 100644
--- a/frontend/src/features/permits/helpers/equality.ts
+++ b/frontend/src/features/permits/helpers/equality.ts
@@ -6,11 +6,11 @@ import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
import { PermitData } from "../types/PermitData";
import { PermitCondition } from "../types/PermitCondition";
import { arePermitLOADetailsEqual, PermitLOA } from "../types/PermitLOA";
-import { doUniqueArraysHaveSameObjects } from "../../../common/helpers/equality";
-import {
- DATE_FORMATS,
- dayjsToLocalStr,
-} from "../../../common/helpers/formatDate";
+import { areOrderedSequencesEqual, doUniqueArraysHaveSameObjects } from "../../../common/helpers/equality";
+import { ReplaceDayjsWithString } from "../types/utility";
+import { PermittedCommodity } from "../types/PermittedCommodity";
+import { PermittedRoute } from "../types/PermittedRoute";
+import { PermitVehicleConfiguration } from "../types/PermitVehicleConfiguration";
/**
* Compare whether or not two mailing addresses are equal.
@@ -141,26 +141,112 @@ export const arePermitLOAsEqual = (
};
/**
- * Compare whether or not two application data info are equal.
- * @param data1 first application data info
- * @param data2 second application data info
- * @returns true when application data are equivalent, false otherwise
+ * Compare whether or not the permitted commodities for two permits are equal.
+ * @param permittedCommodity1 Permitted commodity belonging to the first permit
+ * @param permittedCommodity2 Permitted commodity belonging to the second permit
+ * @returns true when the two permitted commodities are equivalent, false otherwise
*/
-export const areApplicationDataEqual = (
- data1: PermitData,
- data2: PermitData,
+export const arePermittedCommoditiesEqual = (
+ permittedCommodity1?: Nullable,
+ permittedCommodity2?: Nullable,
+) => {
+ return (
+ getDefaultRequiredVal("", permittedCommodity1?.commodityType)
+ === getDefaultRequiredVal("", permittedCommodity2?.commodityType)
+ ) && (
+ getDefaultRequiredVal("", permittedCommodity1?.loadDescription)
+ === getDefaultRequiredVal("", permittedCommodity2?.loadDescription)
+ );
+};
+
+/**
+ * Compare whether or not the permitted route details for two permits are equal.
+ * @param permittedRoute1 Permitted route details belonging to the first permit
+ * @param permittedRoute2 Permitted route details belonging to the second permit
+ * @returns true when the permitted route details are considered equivalent, false otherwise
+ */
+export const areVehicleConfigurationsEqual = (
+ vehicleConfig1?: Nullable,
+ vehicleConfig2?: Nullable,
+) => {
+ return (
+ getDefaultRequiredVal(0, vehicleConfig1?.overallWidth)
+ === getDefaultRequiredVal(0, vehicleConfig2?.overallWidth)
+ ) && (
+ getDefaultRequiredVal(0, vehicleConfig1?.overallHeight)
+ === getDefaultRequiredVal(0, vehicleConfig2?.overallHeight)
+ ) && (
+ getDefaultRequiredVal(0, vehicleConfig1?.overallLength)
+ === getDefaultRequiredVal(0, vehicleConfig2?.overallLength)
+ ) && (
+ getDefaultRequiredVal(0, vehicleConfig1?.frontProjection)
+ === getDefaultRequiredVal(0, vehicleConfig2?.frontProjection)
+ ) && (
+ getDefaultRequiredVal(0, vehicleConfig1?.rearProjection)
+ === getDefaultRequiredVal(0, vehicleConfig2?.rearProjection)
+ ) && areOrderedSequencesEqual(
+ vehicleConfig1?.trailers,
+ vehicleConfig2?.trailers,
+ (trailer1, trailer2) => trailer1.vehicleSubType === trailer2.vehicleSubType,
+ );
+};
+
+/**
+ * Compare whether or not the permitted route details for two permits are equal.
+ * @param permittedRoute1 Permitted route details belonging to the first permit
+ * @param permittedRoute2 Permitted route details belonging to the second permit
+ * @returns true when the permitted route details are considered equivalent, false otherwise
+ */
+export const arePermittedRoutesEqual = (
+ permittedRoute1?: Nullable,
+ permittedRoute2?: Nullable,
+) => {
+ return (
+ getDefaultRequiredVal("", permittedRoute1?.manualRoute?.origin)
+ === getDefaultRequiredVal("", permittedRoute2?.manualRoute?.origin)
+ ) && (
+ getDefaultRequiredVal("", permittedRoute1?.manualRoute?.destination)
+ === getDefaultRequiredVal("", permittedRoute2?.manualRoute?.destination)
+ ) && (
+ getDefaultRequiredVal("", permittedRoute1?.manualRoute?.exitPoint)
+ === getDefaultRequiredVal("", permittedRoute2?.manualRoute?.exitPoint)
+ ) && (
+ getDefaultRequiredVal(0, permittedRoute1?.manualRoute?.totalDistance)
+ === getDefaultRequiredVal(0, permittedRoute2?.manualRoute?.totalDistance)
+ ) && (
+ getDefaultRequiredVal("", permittedRoute1?.routeDetails)
+ === getDefaultRequiredVal("", permittedRoute2?.routeDetails)
+ ) && areOrderedSequencesEqual(
+ permittedRoute1?.manualRoute?.highwaySequence,
+ permittedRoute2?.manualRoute?.highwaySequence,
+ (seqNumber1, seqNumber2) => seqNumber1 === seqNumber2,
+ );
+};
+
+/**
+ * Compare whether or not the permit data belonging to two applications are equal.
+ * @param data1 Permit data belonging to first application
+ * @param data2 Permit data belonging to second application
+ * @returns true when permit data are equivalent, false otherwise
+ */
+export const areApplicationPermitDataEqual = (
+ data1: ReplaceDayjsWithString,
+ data2: ReplaceDayjsWithString,
) => {
return (
data1.permitDuration === data2.permitDuration &&
- dayjsToLocalStr(data1.startDate, DATE_FORMATS.DATEONLY) ===
- dayjsToLocalStr(data2.startDate, DATE_FORMATS.DATEONLY) &&
- dayjsToLocalStr(data1.expiryDate, DATE_FORMATS.DATEONLY) ===
- dayjsToLocalStr(data2.expiryDate, DATE_FORMATS.DATEONLY) &&
+ data1.startDate === data2.startDate &&
+ data1.expiryDate === data2.expiryDate &&
areContactDetailsEqual(data1.contactDetails, data2.contactDetails) &&
areVehicleDetailsEqual(data1.vehicleDetails, data2.vehicleDetails) &&
areConditionsEqual(data1.commodities, data2.commodities) &&
areMailingAddressesEqual(data1.mailingAddress, data2.mailingAddress) &&
arePermitLOAsEqual(data1.loas, data2.loas) &&
+ arePermittedCommoditiesEqual(data1.permittedCommodity, data2.permittedCommodity) &&
+ areVehicleConfigurationsEqual(data1.vehicleConfiguration, data2.vehicleConfiguration) &&
+ arePermittedRoutesEqual(data1.permittedRoute, data2.permittedRoute) &&
+ (getDefaultRequiredVal("", data1.applicationNotes)
+ === getDefaultRequiredVal("", data2.applicationNotes)) &&
((!data1.companyName && !data2.companyName) ||
data1.companyName === data2.companyName) &&
((!data1.doingBusinessAs && !data2.doingBusinessAs) ||
diff --git a/frontend/src/features/permits/helpers/feeSummary.ts b/frontend/src/features/permits/helpers/feeSummary.ts
index 560f96c85..943da6b06 100644
--- a/frontend/src/features/permits/helpers/feeSummary.ts
+++ b/frontend/src/features/permits/helpers/feeSummary.ts
@@ -30,14 +30,19 @@ export const calculateFeeByDuration = (permitType: PermitType, duration: number)
const intervalPeriodsToPay = safeDuration > 360
? Math.ceil(360 / intervalDays) : Math.ceil(safeDuration / intervalDays);
- if (permitType === PERMIT_TYPES.TROW) {
- // Only for TROW, $100 per interval (30 days)
- return intervalPeriodsToPay * 100;
+ switch (permitType) {
+ // Add more conditions for other permit types if needed
+ case PERMIT_TYPES.STOS:
+ // STOS have constant fee of $15 (regardless of duration)
+ return 15;
+ case PERMIT_TYPES.TROW:
+ // Only for TROW, $100 per interval (30 days)
+ return intervalPeriodsToPay * 100;
+ case PERMIT_TYPES.TROS:
+ default:
+ // For TROS, $30 per interval (30 days)
+ return intervalPeriodsToPay * 30;
}
- // Add more conditions for other permit types if needed
-
- // For TROS, $30 per interval (30 days)
- return intervalPeriodsToPay * 30;
};
/**
diff --git a/frontend/src/features/permits/helpers/getDefaultApplicationFormData.ts b/frontend/src/features/permits/helpers/getDefaultApplicationFormData.ts
index e08a2a6ce..6d79cd660 100644
--- a/frontend/src/features/permits/helpers/getDefaultApplicationFormData.ts
+++ b/frontend/src/features/permits/helpers/getDefaultApplicationFormData.ts
@@ -5,13 +5,19 @@ import { getMandatoryConditions } from "./conditions";
import { Nullable } from "../../../common/types/common";
import { PERMIT_STATUSES } from "../types/PermitStatus";
import { calculateFeeByDuration } from "./feeSummary";
-import { PermitType } from "../types/PermitType";
+import { PERMIT_TYPES, PermitType } from "../types/PermitType";
import { getExpiryDate } from "./permitState";
import { PermitMailingAddress } from "../types/PermitMailingAddress";
import { PermitContactDetails } from "../types/PermitContactDetails";
import { Application, ApplicationFormData } from "../types/application";
import { minDurationForPermitType } from "./dateSelection";
-import { getDefaultVehicleDetails } from "./permitVehicles";
+import { getDefaultVehicleDetails } from "./vehicles/getDefaultVehicleDetails";
+import { getDefaultPermittedRoute } from "./permittedRoute";
+import { getDefaultPermittedCommodity } from "./permittedCommodity";
+import {
+ getDefaultVehicleConfiguration
+} from "./vehicles/configuration/getDefaultVehicleConfiguration";
+
import {
getEndOfDate,
getStartOfDate,
@@ -133,11 +139,11 @@ export const getExpiryDateOrDefault = (
/**
* Gets default values for the application data, or populate with values from existing application and relevant data.
- * @param permitType permit type for the application
- * @param companyInfo data from company profile information (can be undefined, but must be passed as param)
- * @param applicationData existing application data, if any
- * @param userDetails user details of current user, if any
- * @returns default values for the application data
+ * @param permitType Permit type for the application
+ * @param companyInfo Company profile information (can be undefined, but must be passed as param)
+ * @param applicationData Existing application data, if already exists
+ * @param userDetails User details of current user, if any
+ * @returns Default values for the application data
*/
export const getDefaultValues = (
permitType: PermitType,
@@ -166,16 +172,18 @@ export const getDefaultValues = (
applicationData?.permitType,
);
+ const defaultApplicationNumber = getDefaultRequiredVal(
+ "",
+ applicationData?.applicationNumber,
+ );
+
return {
originalPermitId: getDefaultRequiredVal(
"",
applicationData?.originalPermitId,
),
comment: getDefaultRequiredVal("", applicationData?.comment),
- applicationNumber: getDefaultRequiredVal(
- "",
- applicationData?.applicationNumber,
- ),
+ applicationNumber: defaultApplicationNumber,
permitId: getDefaultRequiredVal("", applicationData?.permitId),
permitNumber: getDefaultRequiredVal("", applicationData?.permitNumber),
permitType: defaultPermitType,
@@ -209,8 +217,7 @@ export const getDefaultValues = (
),
),
contactDetails: getDefaultContactDetails(
- getDefaultRequiredVal("", applicationData?.applicationNumber).trim() ===
- "",
+ defaultApplicationNumber.trim() === "",
applicationData?.permitData?.contactDetails,
userDetails,
companyInfo?.email,
@@ -225,6 +232,17 @@ export const getDefaultValues = (
),
feeSummary: `${calculateFeeByDuration(defaultPermitType, durationOrDefault)}`,
loas: getDefaultRequiredVal([], applicationData?.permitData?.loas),
+ permittedRoute: getDefaultPermittedRoute(permitType, applicationData?.permitData?.permittedRoute),
+ applicationNotes: permitType !== PERMIT_TYPES.STOS
+ ? null : getDefaultRequiredVal("", applicationData?.permitData?.applicationNotes),
+ permittedCommodity: getDefaultPermittedCommodity(
+ permitType,
+ applicationData?.permitData?.permittedCommodity,
+ ),
+ vehicleConfiguration: getDefaultVehicleConfiguration(
+ permitType,
+ applicationData?.permitData?.vehicleConfiguration,
+ ),
},
};
};
diff --git a/frontend/src/features/permits/helpers/mappers.ts b/frontend/src/features/permits/helpers/mappers.ts
index e60bc999b..3f82f0587 100644
--- a/frontend/src/features/permits/helpers/mappers.ts
+++ b/frontend/src/features/permits/helpers/mappers.ts
@@ -1,16 +1,17 @@
-import { Permit, PermitsActionResponse } from "../types/permit";
+import { PermitsActionResponse } from "../types/permit";
import { Nullable, Optional } from "../../../common/types/common";
import { getDefaultRequiredVal } from "../../../common/helpers/util";
import {
PERMIT_APPLICATION_ORIGINS,
PermitApplicationOrigin,
} from "../types/PermitApplicationOrigin";
+
import {
IDIR_USER_ROLE,
UserRoleType,
} from "../../../common/authentication/types";
+
import {
- VehicleSubType,
Vehicle,
VehicleType,
VEHICLE_TYPES,
@@ -19,61 +20,50 @@ import {
} from "../../manageVehicles/types/Vehicle";
/**
- * This helper function is used to get the vehicle object that matches the vehicleType and id.
- * @param vehicles List of existing vehicles
- * @param vehicleType Type of vehicle
- * @param id string used as a key to find the existing vehicle
- * @returns The found Vehicle object in the provided list, or undefined if not found
+ * Find a vehicle from a list of existing vehicles that matches the vehicle type and id.
+ * @param existingVehicles List of existing vehicles
+ * @param vehicleType Vehicle type
+ * @param vehicleId Vehicle id
+ * @returns The vehicle found in the provided list, or undefined if not found
*/
-export const mapToVehicleObjectById = (
- vehicles: Optional,
+export const findFromExistingVehicles = (
+ existingVehicles: Vehicle[],
vehicleType: VehicleType,
- id: Nullable,
+ vehicleId?: Nullable,
): Optional => {
- if (!vehicles) return undefined;
-
- return vehicles.find((item) => {
- return vehicleType === VEHICLE_TYPES.POWER_UNIT
- ? item.vehicleType === VEHICLE_TYPES.POWER_UNIT &&
- (item as PowerUnit).powerUnitId === id
- : item.vehicleType === VEHICLE_TYPES.TRAILER &&
- (item as Trailer).trailerId === id;
+ return existingVehicles.find((existingVehicle) => {
+ if (existingVehicle.vehicleType !== vehicleType) return false;
+ return vehicleType === VEHICLE_TYPES.TRAILER
+ ? (existingVehicle as Trailer).trailerId === vehicleId
+ : (existingVehicle as PowerUnit).powerUnitId === vehicleId;
});
};
/**
- * Maps the typeCode (Example: GRADERS) to the corresponding Trailer or PowerUnit subtype object, then return that object
- * @param typeCode
- * @param vehicleType
- * @param powerUnitSubTypes
- * @param trailerSubTypes
- * @returns A Vehicle Sub type object
+ * Get full vehicle subtype name by type code.
+ * @param powerUnitSubtypeNamesMap Map of power unit subtypes (typeCode to subtype name)
+ * @param trailerSubtypeNamesMap Map of trailer subtypes (typeCode to subtype name)
+ * @param vehicleType Vehicle type
+ * @param typeCode Type code for a subtype
+ * @returns The found vehicle subtype name, or undefined if not found
*/
-export const mapTypeCodeToObject = (
- typeCode: string,
+export const getSubtypeNameByCode = (
+ powerUnitSubtypeNamesMap: Map,
+ trailerSubtypeNamesMap: Map,
vehicleType: string,
- powerUnitSubTypes: Nullable,
- trailerSubTypes: Nullable,
+ typeCode: string,
) => {
- let typeObject = undefined;
-
- if (powerUnitSubTypes && vehicleType === VEHICLE_TYPES.POWER_UNIT) {
- typeObject = powerUnitSubTypes.find((v) => {
- return v.typeCode == typeCode;
- });
- } else if (trailerSubTypes && vehicleType === VEHICLE_TYPES.TRAILER) {
- typeObject = trailerSubTypes.find((v) => {
- return v.typeCode == typeCode;
- });
+ if (vehicleType === VEHICLE_TYPES.TRAILER) {
+ return trailerSubtypeNamesMap.get(typeCode);
}
-
- return typeObject;
+
+ return powerUnitSubtypeNamesMap.get(typeCode);
};
/**
* Gets display text for vehicle type.
- * @param vehicleType Vehicle type (powerUnit or trailer)
- * @returns display text for the vehicle type
+ * @param vehicleType Vehicle type (power unit or trailer)
+ * @returns Display text for the vehicle type
*/
export const vehicleTypeDisplayText = (vehicleType: VehicleType) => {
if (vehicleType === VEHICLE_TYPES.TRAILER) {
@@ -82,31 +72,6 @@ export const vehicleTypeDisplayText = (vehicleType: VehicleType) => {
return "Power Unit";
};
-/**
- * Get a cloned permit.
- * @param permit Permit to clone
- * @returns Cloned permit with same fields and nested fields as old permit, but different reference
- */
-export const clonePermit = (permit: Permit): Permit => {
- return {
- ...permit,
- permitData: {
- ...permit.permitData,
- contactDetails: {
- ...permit.permitData.contactDetails,
- },
- vehicleDetails: {
- ...permit.permitData.vehicleDetails,
- },
- commodities: [...permit.permitData.commodities],
- loas: [...getDefaultRequiredVal([], permit.permitData.loas)],
- mailingAddress: {
- ...permit.permitData.mailingAddress,
- },
- },
- };
-};
-
/**
* Remove empty values from permits action response
* @param res Permits action response received from backend
diff --git a/frontend/src/features/permits/helpers/permitLCV.ts b/frontend/src/features/permits/helpers/permitLCV.ts
index 60237460e..f35a5b3f2 100644
--- a/frontend/src/features/permits/helpers/permitLCV.ts
+++ b/frontend/src/features/permits/helpers/permitLCV.ts
@@ -3,7 +3,7 @@ import { isVehicleSubtypeLCV } from "../../manageVehicles/helpers/vehicleSubtype
import { Application, ApplicationFormData } from "../types/application";
import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
import { getPermitConditionSelectionState } from "./conditions";
-import { getDefaultVehicleDetails } from "./permitVehicles";
+import { getDefaultVehicleDetails } from "./vehicles/getDefaultVehicleDetails";
/**
* Get updated vehicle details based on LCV designation.
diff --git a/frontend/src/features/permits/helpers/permitLOA.ts b/frontend/src/features/permits/helpers/permitLOA.ts
index c24c11568..97049954d 100644
--- a/frontend/src/features/permits/helpers/permitLOA.ts
+++ b/frontend/src/features/permits/helpers/permitLOA.ts
@@ -6,10 +6,12 @@ import { getEndOfDate, toLocalDayjs } from "../../../common/helpers/formatDate";
import { Nullable } from "../../../common/types/common";
import { Application, ApplicationFormData } from "../types/application";
import { getDefaultRequiredVal } from "../../../common/helpers/util";
-import { PowerUnit, Trailer, VEHICLE_TYPES } from "../../manageVehicles/types/Vehicle";
+import { PowerUnit, Trailer, Vehicle, VEHICLE_TYPES } from "../../manageVehicles/types/Vehicle";
import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
-import { filterVehicles, getDefaultVehicleDetails } from "./permitVehicles";
+import { getAllowedVehicles } from "./vehicles/getAllowedVehicles";
+import { getDefaultVehicleDetails } from "./vehicles/getDefaultVehicleDetails";
import { PermitLOA } from "../types/PermitLOA";
+import { isPermitVehicleWithinGvwLimit } from "./vehicles/rules/gvw";
import {
durationOptionsForPermitType,
getAvailableDurationOptions,
@@ -118,22 +120,22 @@ export const getUpdatedLOASelection = (
* @param selectedLOAs LOAs that are selected for the permit
* @param vehicleOptions Provided vehicle options for selection
* @param prevSelectedVehicle Previously selected vehicle details in the permit form
- * @param ineligiblePowerUnitSubtypes Ineligible power unit subtypes
- * @param ineligibleTrailerSubtypes Ineligible trailer subtypes
+ * @param eligibleSubtypes Set of eligible vehicle subtypes
+ * @param vehicleRestrictions Restriction rules that each vehicle must meet
* @returns Updated vehicle details and filtered vehicle options
*/
export const getUpdatedVehicleDetailsForLOAs = (
selectedLOAs: PermitLOA[],
vehicleOptions: (PowerUnit | Trailer)[],
prevSelectedVehicle: PermitVehicleDetails,
- ineligiblePowerUnitSubtypes: string[],
- ineligibleTrailerSubtypes: string[],
+ eligibleSubtypes: Set,
+ vehicleRestrictions: ((vehicle: Vehicle) => boolean)[],
) => {
- const filteredVehicles = filterVehicles(
+ const filteredVehicles = getAllowedVehicles(
vehicleOptions,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
+ eligibleSubtypes,
selectedLOAs,
+ vehicleRestrictions,
);
const filteredVehicleIds = filteredVehicles.map(filteredVehicle => ({
@@ -167,16 +169,14 @@ export const getUpdatedVehicleDetailsForLOAs = (
* @param applicationData Existing application data
* @param upToDateLOAs Most recent up-to-date company LOAs
* @param inventoryVehicles Vehicle options from the inventory
- * @param ineligiblePowerUnitSubtypes Ineligible power unit subtypes that cannot be used for vehicles
- * @param ineligibleTrailerSubtypes Ineligible trailer subtypes that cannot be used for vehicles
+ * @param eligibleVehicleSubtypes Set of eligible vehicle subtypes that can be used for vehicles
* @returns Application data after applying the up-to-date LOAs
*/
export const applyUpToDateLOAsToApplication = >(
applicationData: T,
upToDateLOAs: LOADetail[],
inventoryVehicles: (PowerUnit | Trailer)[],
- ineligiblePowerUnitSubtypes: string[],
- ineligibleTrailerSubtypes: string[],
+ eligibleVehicleSubtypes: Set,
): T => {
// If application doesn't exist, no need to apply LOAs to it at all
if (!applicationData) return applicationData;
@@ -225,8 +225,15 @@ export const applyUpToDateLOAsToApplication = v.vehicleType !== VEHICLE_TYPES.POWER_UNIT
+ || isPermitVehicleWithinGvwLimit(
+ applicationData.permitType,
+ VEHICLE_TYPES.POWER_UNIT,
+ (v as PowerUnit).licensedGvw,
+ ),
+ ],
);
return {
diff --git a/frontend/src/features/permits/helpers/permitVehicles.ts b/frontend/src/features/permits/helpers/permitVehicles.ts
deleted file mode 100644
index e250c87e0..000000000
--- a/frontend/src/features/permits/helpers/permitVehicles.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { PERMIT_TYPES, PermitType } from "../types/PermitType";
-import { TROW_INELIGIBLE_POWERUNITS, TROW_INELIGIBLE_TRAILERS } from "../constants/trow";
-import { TROS_INELIGIBLE_POWERUNITS, TROS_INELIGIBLE_TRAILERS } from "../constants/tros";
-import { PermitLOA } from "../types/PermitLOA";
-import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../common/helpers/util";
-import { Nullable } from "../../../common/types/common";
-import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
-import { EMPTY_VEHICLE_SUBTYPE, isVehicleSubtypeLCV } from "../../manageVehicles/helpers/vehicleSubtypes";
-import {
- PowerUnit,
- Trailer,
- VehicleSubType,
- VehicleType,
- VEHICLE_TYPES,
- Vehicle,
-} from "../../manageVehicles/types/Vehicle";
-import { sortVehicleSubTypes } from "./sorter";
-
-export const getIneligiblePowerUnitSubtypes = (permitType: PermitType) => {
- switch (permitType) {
- case PERMIT_TYPES.TROW:
- return TROW_INELIGIBLE_POWERUNITS;
- case PERMIT_TYPES.TROS:
- return TROS_INELIGIBLE_POWERUNITS;
- default:
- return [];
- }
-};
-
-export const getIneligibleTrailerSubtypes = (permitType: PermitType) => {
- switch (permitType) {
- case PERMIT_TYPES.TROW:
- return TROW_INELIGIBLE_TRAILERS;
- case PERMIT_TYPES.TROS:
- return TROS_INELIGIBLE_TRAILERS;
- default:
- return [];
- }
-};
-
-/**
- * Get all ineligible power unit and trailer subtypes based on LCV designation and permit type.
- * @param permitType Permit type
- * @param isLcvDesignated Whether or not the LCV designation is used
- * @returns All ineligible power unit and trailer subtypes
- */
-export const getIneligibleSubtypes = (
- permitType: PermitType,
- isLcvDesignated: boolean,
-) => {
- return {
- ineligibleTrailerSubtypes: getIneligibleTrailerSubtypes(permitType),
- ineligiblePowerUnitSubtypes: getIneligiblePowerUnitSubtypes(permitType)
- .filter(subtype => !isLcvDesignated || !isVehicleSubtypeLCV(subtype.typeCode)),
- };
-};
-
-/**
- * Gets default values for vehicle details, or populate with values from existing vehicle details.
- * @param vehicleDetails existing vehicle details, if any
- * @returns default values for vehicle details
- */
-export const getDefaultVehicleDetails = (
- vehicleDetails?: Nullable,
-) => ({
- vehicleId: getDefaultRequiredVal("", vehicleDetails?.vehicleId),
- unitNumber: getDefaultRequiredVal("", vehicleDetails?.unitNumber),
- vin: getDefaultRequiredVal("", vehicleDetails?.vin),
- plate: getDefaultRequiredVal("", vehicleDetails?.plate),
- make: getDefaultRequiredVal("", vehicleDetails?.make),
- year: applyWhenNotNullable((year) => year, vehicleDetails?.year, null),
- countryCode: getDefaultRequiredVal("", vehicleDetails?.countryCode),
- provinceCode: getDefaultRequiredVal("", vehicleDetails?.provinceCode),
- vehicleType: getDefaultRequiredVal("", vehicleDetails?.vehicleType),
- vehicleSubType: getDefaultRequiredVal("", vehicleDetails?.vehicleSubType),
- saveVehicle: false,
-});
-
-/**
- * A helper method that filters eligible power unit or trailer subtypes for dropdown lists.
- * @param allVehicleSubtypes List of both eligible and ineligible vehicle subtypes
- * @param vehicleType Type of vehicle
- * @param ineligiblePowerUnitSubtypes List of provided ineligible power unit subtypes
- * @param ineligibleTrailerSubtypes List of provided ineligible trailer subtypes
- * @param allowedPowerUnitSubtypes List of provided allowed power unit subtypes
- * @param allowedTrailerSubtypes List of provided allowed trailer subtypes
- * @returns List of only eligible power unit or trailer subtypes
- */
-export const filterVehicleSubtypes = (
- allVehicleSubtypes: VehicleSubType[],
- vehicleType: VehicleType,
- ineligiblePowerUnitSubtypes: VehicleSubType[],
- ineligibleTrailerSubtypes: VehicleSubType[],
- allowedPowerUnitSubtypes: string[],
- allowedTrailerSubtypes: string[],
-) => {
- const ineligibleSubtypes = vehicleType === VEHICLE_TYPES.TRAILER
- ? ineligibleTrailerSubtypes : ineligiblePowerUnitSubtypes;
-
- const allowedSubtypes = vehicleType === VEHICLE_TYPES.TRAILER
- ? allowedTrailerSubtypes : allowedPowerUnitSubtypes;
-
- return allVehicleSubtypes.filter((vehicleSubtype) => {
- return allowedSubtypes.some(
- allowedSubtype => vehicleSubtype.typeCode === allowedSubtype
- ) || !ineligibleSubtypes.some(
- (ineligibleSubtype) => vehicleSubtype.typeCode === ineligibleSubtype.typeCode,
- );
- });
-};
-
-/**
- * A helper method that filters power unit or trailer vehicles from dropdown lists.
- * @param vehicles List of both eligible and ineligible vehicles
- * @param ineligiblePowerUnitSubtypes List of ineligible power unit subtypes
- * @param ineligibleTrailerSubtypes List of ineligible trailer subtypes
- * @param loas LOAs that potentially bypass ineligible vehicle restrictions
- * @returns List of only eligible vehicles
- */
-export const filterVehicles = (
- vehicles: Vehicle[],
- ineligiblePowerUnitSubtypes: string[],
- ineligibleTrailerSubtypes: string[],
- loas: PermitLOA[],
-) => {
- const permittedPowerUnitIds = new Set([
- ...loas.map(loa => loa.powerUnits)
- .reduce((prevPowerUnits, currPowerUnits) => [
- ...prevPowerUnits,
- ...currPowerUnits,
- ], []),
- ]);
-
- const permittedTrailerIds = new Set([
- ...loas.map(loa => loa.trailers)
- .reduce((prevTrailers, currTrailers) => [
- ...prevTrailers,
- ...currTrailers,
- ], []),
- ]);
-
- return vehicles.filter((vehicle) => {
- if (vehicle.vehicleType === VEHICLE_TYPES.TRAILER) {
- const trailer = vehicle as Trailer;
- return permittedTrailerIds.has(trailer.trailerId as string)
- || !ineligibleTrailerSubtypes.some((ineligibleSubtype) => {
- return trailer.trailerTypeCode === ineligibleSubtype;
- });
- }
-
- const powerUnit = vehicle as PowerUnit;
- return permittedPowerUnitIds.has(powerUnit.powerUnitId as string)
- || !ineligiblePowerUnitSubtypes.some((ineligibleSubtype) => {
- return powerUnit.powerUnitTypeCode === ineligibleSubtype;
- });
- });
-};
-
-/**
- * Get vehicle subtype options for given vehicle type.
- * @param vehicleType Vehicle type
- * @param powerUnitSubtypes Vehicle subtypes for power units
- * @param trailerSubtypes Vehicle subtypes for trailers
- * @returns Correct vehicle subtype options for vehicle type
- */
-export const getSubtypeOptions = (
- vehicleType: string,
- powerUnitSubtypes: VehicleSubType[],
- trailerSubtypes: VehicleSubType[],
-) => {
- if (vehicleType === VEHICLE_TYPES.POWER_UNIT) {
- return [...powerUnitSubtypes];
- }
- if (vehicleType === VEHICLE_TYPES.TRAILER) {
- return [...trailerSubtypes];
- }
- return [EMPTY_VEHICLE_SUBTYPE];
-};
-
-/**
- * Get eligible subset of vehicle subtype options given lists of available subtypes and criteria.
- * @param powerUnitSubtypes All available power unit subtypes
- * @param trailerSubtypes All available trailer subtypes
- * @param ineligiblePowerUnitSubtypes List of ineligible power unit subtypes
- * @param ineligibleTrailerSubtypes List of ineligible trailer subtypes
- * @param allowedLOAPowerUnitSubtypes List of power unit subtypes allowed by LOAs
- * @param allowedLOATrailerSubtypes List of trailer subtypes allowed by LOAs
- * @param vehicleType Vehicle type
- * @returns Eligible subset of vehicle subtype options
- */
-export const getEligibleSubtypeOptions = (
- powerUnitSubtypes: VehicleSubType[],
- trailerSubtypes: VehicleSubType[],
- ineligiblePowerUnitSubtypes: VehicleSubType[],
- ineligibleTrailerSubtypes: VehicleSubType[],
- allowedLOAPowerUnitSubtypes: string[],
- allowedLOATrailerSubtypes: string[],
- vehicleType?: string,
-) => {
- if (
- vehicleType !== VEHICLE_TYPES.POWER_UNIT &&
- vehicleType !== VEHICLE_TYPES.TRAILER
- ) {
- return [EMPTY_VEHICLE_SUBTYPE];
- }
-
- // Sort vehicle subtypes alphabetically
- const sortedVehicleSubtypes = sortVehicleSubTypes(
- vehicleType,
- getSubtypeOptions(vehicleType, powerUnitSubtypes, trailerSubtypes),
- );
-
- return filterVehicleSubtypes(
- sortedVehicleSubtypes,
- vehicleType,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- allowedLOAPowerUnitSubtypes,
- allowedLOATrailerSubtypes,
- );
-};
diff --git a/frontend/src/features/permits/helpers/permittedCommodity.ts b/frontend/src/features/permits/helpers/permittedCommodity.ts
new file mode 100644
index 000000000..f945e2abf
--- /dev/null
+++ b/frontend/src/features/permits/helpers/permittedCommodity.ts
@@ -0,0 +1,58 @@
+import { Policy } from "onroute-policy-engine";
+
+import { getDefaultRequiredVal } from "../../../common/helpers/util";
+import { Nullable, RequiredOrNull } from "../../../common/types/common";
+import { PermittedCommodity } from "../types/PermittedCommodity";
+import { PERMIT_TYPES, PermitType } from "../types/PermitType";
+import {
+ DEFAULT_COMMODITY_SELECT_OPTION,
+ DEFAULT_COMMODITY_SELECT_VALUE,
+} from "../constants/constants";
+
+/**
+ * Get default permitted commodity data for an application/permit, or null if not applicable.
+ * @param permitType Permit type
+ * @param permittedCommodity Permitted commodity data if it already exists
+ * @returns Default permitted commodity data, or null
+ */
+export const getDefaultPermittedCommodity = (
+ permitType: PermitType,
+ permittedCommodity?: Nullable,
+): RequiredOrNull => {
+ if (permitType !== PERMIT_TYPES.STOS) return null;
+
+ return {
+ commodityType: getDefaultRequiredVal(
+ DEFAULT_COMMODITY_SELECT_VALUE,
+ permittedCommodity?.commodityType,
+ ),
+ loadDescription: getDefaultRequiredVal(
+ "",
+ permittedCommodity?.loadDescription,
+ ),
+ };
+};
+
+/**
+ * Get list of permitted commodity options for a given permit type.
+ * @param permitType Permit type
+ * @param policyEngine Instance of the policy engine, if it exists
+ * @returns List of permitted commodity options
+ */
+export const getPermittedCommodityOptions = (
+ permitType: PermitType,
+ policyEngine?: Nullable,
+) => {
+ const commodities = getDefaultRequiredVal(
+ new Map(),
+ policyEngine?.getCommodities(permitType),
+ );
+
+ return [DEFAULT_COMMODITY_SELECT_OPTION].concat(
+ [...commodities.entries()]
+ .map(([commodityType, commodityDescription]) => ({
+ value: commodityType,
+ label: commodityDescription,
+ })),
+ );
+};
diff --git a/frontend/src/features/permits/helpers/permittedRoute.ts b/frontend/src/features/permits/helpers/permittedRoute.ts
new file mode 100644
index 000000000..2033de2f8
--- /dev/null
+++ b/frontend/src/features/permits/helpers/permittedRoute.ts
@@ -0,0 +1,26 @@
+import { getDefaultRequiredVal } from "../../../common/helpers/util";
+import { Nullable, RequiredOrNull } from "../../../common/types/common";
+import { PermittedRoute } from "../types/PermittedRoute";
+import { PERMIT_TYPES, PermitType } from "../types/PermitType";
+
+export const getDefaultPermittedRoute = (
+ permitType: PermitType,
+ permittedRoute?: Nullable,
+): RequiredOrNull => {
+ if (permitType !== PERMIT_TYPES.STOS) return null;
+
+ return {
+ manualRoute: {
+ origin: getDefaultRequiredVal("", permittedRoute?.manualRoute?.origin),
+ destination: getDefaultRequiredVal("", permittedRoute?.manualRoute?.destination),
+ highwaySequence: getDefaultRequiredVal(
+ [],
+ permittedRoute?.manualRoute?.highwaySequence)
+ .filter(highwayNumber => Boolean(highwayNumber.trim()),
+ ),
+ exitPoint: getDefaultRequiredVal(null, permittedRoute?.manualRoute?.exitPoint),
+ totalDistance: getDefaultRequiredVal(null, permittedRoute?.manualRoute?.totalDistance),
+ },
+ routeDetails: getDefaultRequiredVal("", permittedRoute?.routeDetails),
+ };
+};
diff --git a/frontend/src/features/permits/helpers/deserializeApplication.ts b/frontend/src/features/permits/helpers/serialize/deserializeApplication.ts
similarity index 80%
rename from frontend/src/features/permits/helpers/deserializeApplication.ts
rename to frontend/src/features/permits/helpers/serialize/deserializeApplication.ts
index 08f9f9e0d..f68797767 100644
--- a/frontend/src/features/permits/helpers/deserializeApplication.ts
+++ b/frontend/src/features/permits/helpers/serialize/deserializeApplication.ts
@@ -1,17 +1,17 @@
import { Dayjs } from "dayjs";
-import { applyWhenNotNullable } from "../../../common/helpers/util";
-import { Application, ApplicationResponseData } from "../types/application";
+import { applyWhenNotNullable } from "../../../../common/helpers/util";
+import { Application, ApplicationResponseData } from "../../types/application";
+import { getDurationOrDefault } from "../getDefaultApplicationFormData";
+import { getExpiryDate } from "../permitState";
+import { minDurationForPermitType } from "../dateSelection";
import {
getEndOfDate,
getStartOfDate,
now,
toLocalDayjs,
utcToLocalDayjs,
-} from "../../../common/helpers/formatDate";
-import { getDurationOrDefault } from "./getDefaultApplicationFormData";
-import { getExpiryDate } from "./permitState";
-import { minDurationForPermitType } from "./dateSelection";
+} from "../../../../common/helpers/formatDate";
/**
* Deserializes an ApplicationResponseData object (received from backend) to an Application object
diff --git a/frontend/src/features/permits/helpers/deserializePermit.ts b/frontend/src/features/permits/helpers/serialize/deserializePermit.ts
similarity index 87%
rename from frontend/src/features/permits/helpers/deserializePermit.ts
rename to frontend/src/features/permits/helpers/serialize/deserializePermit.ts
index 18aa84cd8..8ae487da9 100644
--- a/frontend/src/features/permits/helpers/deserializePermit.ts
+++ b/frontend/src/features/permits/helpers/serialize/deserializePermit.ts
@@ -1,4 +1,4 @@
-import { Permit, PermitResponseData } from "../types/permit";
+import { Permit, PermitResponseData } from "../../types/permit";
/**
* Deserialize a PermitResponseData object (received from backend) to a Permit object.
diff --git a/frontend/src/features/permits/helpers/serializeApplication.ts b/frontend/src/features/permits/helpers/serialize/serializeApplication.ts
similarity index 54%
rename from frontend/src/features/permits/helpers/serializeApplication.ts
rename to frontend/src/features/permits/helpers/serialize/serializeApplication.ts
index c43e2ea38..b70dc65c5 100644
--- a/frontend/src/features/permits/helpers/serializeApplication.ts
+++ b/frontend/src/features/permits/helpers/serialize/serializeApplication.ts
@@ -1,12 +1,13 @@
-import { DATE_FORMATS, dayjsToLocalStr } from "../../../common/helpers/formatDate";
+import { serializePermitData } from "./serializePermitData";
import {
ApplicationFormData,
CreateApplicationRequestData,
UpdateApplicationRequestData,
-} from "../types/application";
+} from "../../types/application";
/**
- * Serializes Application form data to CreateApplicationRequestData so it can be used as payload for create application requests.
+ * Serializes Application form data to CreateApplicationRequestData.
+ * The result can be used as payload for create application requests.
* @param application Application form data
* @returns CreateApplicationRequestData object used for payload data to request to backend
*/
@@ -18,11 +19,7 @@ export const serializeForCreateApplication = (
originalPermitId,
applicationNumber,
permitType,
- permitData: {
- startDate,
- expiryDate,
- ...restOfPermitData
- },
+ permitData,
comment,
} = application;
@@ -32,22 +29,13 @@ export const serializeForCreateApplication = (
applicationNumber,
permitType,
comment,
- permitData: {
- ...restOfPermitData,
- startDate: dayjsToLocalStr(
- startDate,
- DATE_FORMATS.DATEONLY,
- ),
- expiryDate: dayjsToLocalStr(
- expiryDate,
- DATE_FORMATS.DATEONLY,
- ),
- },
+ permitData: serializePermitData(permitData),
};
};
/**
- * Serializes Application form data to UpdateApplicationRequestData so it can be used as payload for update application requests
+ * Serializes Application form data to UpdateApplicationRequestData.
+ * The result can be used as payload for update application requests.
* @param application Application form data
* @returns UpdateApplicationRequestData object used for payload to request to backend
*/
@@ -57,26 +45,12 @@ export const serializeForUpdateApplication = (
const {
permitType,
comment,
- permitData: {
- startDate,
- expiryDate,
- ...restOfPermitData
- },
+ permitData,
} = application;
return {
permitType,
comment,
- permitData: {
- ...restOfPermitData,
- startDate: dayjsToLocalStr(
- startDate,
- DATE_FORMATS.DATEONLY,
- ),
- expiryDate: dayjsToLocalStr(
- expiryDate,
- DATE_FORMATS.DATEONLY,
- ),
- },
+ permitData: serializePermitData(permitData),
};
};
diff --git a/frontend/src/features/permits/helpers/serialize/serializePermitData.ts b/frontend/src/features/permits/helpers/serialize/serializePermitData.ts
new file mode 100644
index 000000000..8cf1a8d89
--- /dev/null
+++ b/frontend/src/features/permits/helpers/serialize/serializePermitData.ts
@@ -0,0 +1,46 @@
+import { DATE_FORMATS, dayjsToLocalStr } from "../../../../common/helpers/formatDate";
+import { PermitData } from "../../types/PermitData";
+import { ReplaceDayjsWithString } from "../../types/utility";
+import { serializePermitVehicleConfiguration } from "./serializePermitVehicleConfiguration";
+import { serializePermitVehicleDetails } from "./serializePermitVehicleDetails";
+
+export const serializePermitData = (
+ permitData: PermitData,
+): ReplaceDayjsWithString => {
+ const {
+ startDate,
+ expiryDate,
+ vehicleDetails,
+ vehicleConfiguration,
+ permittedRoute,
+ ...restOfPermitData
+ } = permitData;
+
+ const serializedPermittedRoute = permittedRoute
+ ? {
+ manualRoute: permittedRoute.manualRoute
+ ? {
+ ...permittedRoute.manualRoute,
+ highwaySequence: permittedRoute.manualRoute.highwaySequence
+ .filter(highwayNumber => Boolean(highwayNumber.trim())),
+ }
+ : null,
+ routeDetails: permittedRoute.routeDetails,
+ }
+ : null;
+
+ return {
+ ...restOfPermitData,
+ startDate: dayjsToLocalStr(
+ startDate,
+ DATE_FORMATS.DATEONLY,
+ ),
+ expiryDate: dayjsToLocalStr(
+ expiryDate,
+ DATE_FORMATS.DATEONLY,
+ ),
+ vehicleDetails: serializePermitVehicleDetails(vehicleDetails),
+ vehicleConfiguration: serializePermitVehicleConfiguration(vehicleConfiguration),
+ permittedRoute: serializedPermittedRoute,
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/features/permits/helpers/serialize/serializePermitVehicleConfiguration.ts b/frontend/src/features/permits/helpers/serialize/serializePermitVehicleConfiguration.ts
new file mode 100644
index 000000000..1ee1f8efb
--- /dev/null
+++ b/frontend/src/features/permits/helpers/serialize/serializePermitVehicleConfiguration.ts
@@ -0,0 +1,36 @@
+import { convertToNumberIfValid } from "../../../../common/helpers/numeric/convertToNumberIfValid";
+import { Nullable, RequiredOrNull } from "../../../../common/types/common";
+import { PermitVehicleConfiguration } from "../../types/PermitVehicleConfiguration";
+
+/**
+ * Serialize permit vehicle configuration values as request payload.
+ * @param vehicleConfiguration Permit vehicle configuration
+ * @returns Serialized permit vehicle configuration values
+ */
+export const serializePermitVehicleConfiguration = (
+ vehicleConfiguration?: Nullable,
+): RequiredOrNull => {
+ return vehicleConfiguration ? {
+ trailers: vehicleConfiguration.trailers,
+ frontProjection: convertToNumberIfValid(
+ vehicleConfiguration.frontProjection,
+ null,
+ ),
+ rearProjection: convertToNumberIfValid(
+ vehicleConfiguration.rearProjection,
+ null,
+ ),
+ overallWidth: convertToNumberIfValid(
+ vehicleConfiguration.overallWidth,
+ null,
+ ),
+ overallHeight: convertToNumberIfValid(
+ vehicleConfiguration.overallHeight,
+ null,
+ ),
+ overallLength: convertToNumberIfValid(
+ vehicleConfiguration.overallLength,
+ null,
+ ),
+ } : null;
+};
diff --git a/frontend/src/features/permits/helpers/serialize/serializePermitVehicleDetails.ts b/frontend/src/features/permits/helpers/serialize/serializePermitVehicleDetails.ts
new file mode 100644
index 000000000..425cb340e
--- /dev/null
+++ b/frontend/src/features/permits/helpers/serialize/serializePermitVehicleDetails.ts
@@ -0,0 +1,32 @@
+import { PermitVehicleDetails } from "../../types/PermitVehicleDetails";
+import { convertToNumberIfValid } from "../../../../common/helpers/numeric/convertToNumberIfValid";
+
+/**
+ * Serialize permit vehicles details data to be used as request payload.
+ * @param vehicleDetails Permit vehicle details info
+ * @param defaultVehicleYear Default vehicle year to fallback to if vehicle details year is invalid
+ * @returns Serialized permit vehicles details data to be used as request payload
+ */
+export const serializePermitVehicleDetails = (
+ vehicleDetails: PermitVehicleDetails,
+): PermitVehicleDetails => {
+ return {
+ vin: vehicleDetails.vin,
+ plate: vehicleDetails.plate,
+ make: vehicleDetails.make,
+ // Convert year to number here, as React doesn't accept valueAsNumber prop for input component
+ year: convertToNumberIfValid(vehicleDetails.year, null),
+ countryCode: vehicleDetails.countryCode,
+ provinceCode: vehicleDetails.provinceCode,
+ vehicleType: vehicleDetails.vehicleType,
+ vehicleSubType: vehicleDetails.vehicleSubType,
+ saveVehicle: vehicleDetails.saveVehicle,
+ unitNumber: vehicleDetails.unitNumber,
+ // Either powerUnitId or trailerId, depending on vehicleType
+ vehicleId: vehicleDetails.vehicleId,
+ licensedGVW: convertToNumberIfValid(
+ vehicleDetails.licensedGVW,
+ null,
+ ),
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/features/permits/helpers/sorter.ts b/frontend/src/features/permits/helpers/sorter.ts
deleted file mode 100644
index 4ce07bc8c..000000000
--- a/frontend/src/features/permits/helpers/sorter.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Optional } from "../../../common/types/common";
-import {
- VehicleSubType,
- BaseVehicle,
- Vehicle,
-} from "../../manageVehicles/types/Vehicle";
-
-/**
- * Sort Power Unit or Trailer Types alphabetically and immutably
- * @param vehicleType string, either powerUnit or trailer
- * @param options array of Vehicle Types
- * @returns an array of sorted vehicle types alphabetically
- */
-export const sortVehicleSubTypes = (
- vehicleType: string,
- options: Optional,
-) => {
- if (!vehicleType || !options) return [];
- const sorted = [...options]; // make copy of original array (original shouldn't be changed)
- sorted.sort((a, b) => {
- if (a.type?.toLowerCase() === b.type?.toLowerCase()) {
- return a.typeCode > b.typeCode ? 1 : -1;
- }
- if (a.type && b.type) return a.type > b.type ? 1 : -1;
- return 0;
- });
- return sorted;
-};
-
-/**
- * @param a Vehicle a
- * @param b Vehicle b
- * @returns 1 or -1 depending on whether a's plate > b's plate
- */
-const sortByPlate = (a: BaseVehicle, b: BaseVehicle) => {
- return a.plate > b.plate ? 1 : -1;
-};
-
-/**
- * @param a Vehicle a
- * @param b Vehicle b
- * @returns 1 or -1 depending on whether a's unitNumber > b's unitNumber
- */
-const sortByUnitNumber = (a: BaseVehicle, b: BaseVehicle) => {
- return (a.unitNumber || -1) > (b.unitNumber || -1) ? 1 : -1;
-};
-
-/**
- * @param a Vehicle a
- * @param b Vehicle b
- * @returns 1 or -1 depending on whether a's vehicleType > b's vehicleType
- */
-const sortByVehicleType = (a: BaseVehicle, b: BaseVehicle) => {
- if (a.vehicleType && b.vehicleType) {
- return a.vehicleType > b.vehicleType ? 1 : -1;
- }
- return 0;
-};
-
-/**
- * Sort Vehicles by Plates and Unit Number alphabetically and immutably
- * @param vehicleType string, either plate or unitNumber
- * @param options array of Vehicles (Power Units and Trailers)
- * @returns an array of sorted vehicles alphabetically
- */
-export const sortVehicles = (
- chooseFrom: string,
- options: Optional,
-) => {
- if (!chooseFrom || !options) return [];
-
- // We shouldn't change original array, but make an copy and sort on that instead
- const sortedVehicles = [...options];
- sortedVehicles.sort((a, b) => {
- // If the vehicle types (powerUnit | trailer) are the same, sort by plate or unitnumber
- if (a.vehicleType?.toLowerCase() === b.vehicleType?.toLowerCase()) {
- if (chooseFrom === "plate") {
- return sortByPlate(a, b);
- }
- return sortByUnitNumber(a, b);
- }
- // else sort by vehicle type
- return sortByVehicleType(a, b);
- });
-
- return sortedVehicles;
-};
diff --git a/frontend/src/features/permits/helpers/vehicles/configuration/getDefaultVehicleConfiguration.ts b/frontend/src/features/permits/helpers/vehicles/configuration/getDefaultVehicleConfiguration.ts
new file mode 100644
index 000000000..59796eb32
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/configuration/getDefaultVehicleConfiguration.ts
@@ -0,0 +1,20 @@
+import { getDefaultRequiredVal } from "../../../../../common/helpers/util";
+import { Nullable } from "../../../../../common/types/common";
+import { PERMIT_TYPES, PermitType } from "../../../types/PermitType";
+import { PermitVehicleConfiguration } from "../../../types/PermitVehicleConfiguration";
+
+export const getDefaultVehicleConfiguration = (
+ permitType: PermitType,
+ vehicleConfiguration?: Nullable,
+) => {
+ if (permitType !== PERMIT_TYPES.STOS) return null;
+
+ return {
+ frontProjection: getDefaultRequiredVal(null, vehicleConfiguration?.frontProjection),
+ rearProjection: getDefaultRequiredVal(null, vehicleConfiguration?.rearProjection),
+ overallWidth: getDefaultRequiredVal(null, vehicleConfiguration?.overallWidth),
+ overallHeight: getDefaultRequiredVal(null, vehicleConfiguration?.overallHeight),
+ overallLength: getDefaultRequiredVal(null, vehicleConfiguration?.overallLength),
+ trailers: getDefaultRequiredVal([], vehicleConfiguration?.trailers),
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/features/permits/helpers/vehicles/getAllowedVehicles.ts b/frontend/src/features/permits/helpers/vehicles/getAllowedVehicles.ts
new file mode 100644
index 000000000..f74a9f9cf
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/getAllowedVehicles.ts
@@ -0,0 +1,56 @@
+import { PermitLOA } from "../../types/PermitLOA";
+import {
+ PowerUnit,
+ Trailer,
+ VEHICLE_TYPES,
+ Vehicle,
+} from "../../../manageVehicles/types/Vehicle";
+
+/**
+ * A helper method that filters only allowed vehicles from dropdown lists.
+ * @param vehicles List of all vehicles (both eligible and ineligible)
+ * @param eligibleSubtypes Set of eligible vehicle subtypes
+ * @param loas LOAs that potentially allow certain non-allowed vehicles to be used
+ * @param restrictions Restriction rules that each vehicle must meet
+ * @returns List of only allowed vehicles
+ */
+export const getAllowedVehicles = (
+ vehicles: Vehicle[],
+ eligibleSubtypes: Set,
+ loas: PermitLOA[],
+ restrictions: ((vehicle: Vehicle) => boolean)[],
+) => {
+ const allowedLOAPowerUnitIds = new Set([
+ ...loas.map(loa => loa.powerUnits)
+ .reduce((prevPowerUnits, currPowerUnits) => [
+ ...prevPowerUnits,
+ ...currPowerUnits,
+ ], []),
+ ]);
+
+ const allowedLOATrailerIds = new Set([
+ ...loas.map(loa => loa.trailers)
+ .reduce((prevTrailers, currTrailers) => [
+ ...prevTrailers,
+ ...currTrailers,
+ ], []),
+ ]);
+
+ return vehicles.filter((vehicle) => {
+ if (vehicle.vehicleType === VEHICLE_TYPES.TRAILER) {
+ const trailer = vehicle as Trailer;
+ return allowedLOATrailerIds.has(trailer.trailerId as string)
+ || (
+ eligibleSubtypes.has(trailer.trailerTypeCode)
+ && restrictions.every(restriction => restriction(trailer))
+ );
+ }
+
+ const powerUnit = vehicle as PowerUnit;
+ return allowedLOAPowerUnitIds.has(powerUnit.powerUnitId as string)
+ || (
+ eligibleSubtypes.has(powerUnit.powerUnitTypeCode)
+ && restrictions.every(restriction => restriction(powerUnit))
+ );
+ });
+};
diff --git a/frontend/src/features/permits/helpers/vehicles/getDefaultVehicleDetails.ts b/frontend/src/features/permits/helpers/vehicles/getDefaultVehicleDetails.ts
new file mode 100644
index 000000000..e60fb75a2
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/getDefaultVehicleDetails.ts
@@ -0,0 +1,25 @@
+import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../../common/helpers/util";
+import { Nullable } from "../../../../common/types/common";
+import { DEFAULT_VEHICLE_TYPE, PermitVehicleDetails } from "../../types/PermitVehicleDetails";
+
+/**
+ * Gets default values for vehicle details, or populate with values from existing vehicle details.
+ * @param vehicleDetails existing vehicle details, if any
+ * @returns default values for vehicle details
+ */
+export const getDefaultVehicleDetails = (
+ vehicleDetails?: Nullable,
+) => ({
+ vehicleId: getDefaultRequiredVal("", vehicleDetails?.vehicleId),
+ unitNumber: getDefaultRequiredVal("", vehicleDetails?.unitNumber),
+ vin: getDefaultRequiredVal("", vehicleDetails?.vin),
+ plate: getDefaultRequiredVal("", vehicleDetails?.plate),
+ make: getDefaultRequiredVal("", vehicleDetails?.make),
+ year: applyWhenNotNullable((year) => year, vehicleDetails?.year, null),
+ countryCode: getDefaultRequiredVal("", vehicleDetails?.countryCode),
+ provinceCode: getDefaultRequiredVal("", vehicleDetails?.provinceCode),
+ vehicleType: getDefaultRequiredVal(DEFAULT_VEHICLE_TYPE, vehicleDetails?.vehicleType),
+ vehicleSubType: getDefaultRequiredVal("", vehicleDetails?.vehicleSubType),
+ licensedGVW: getDefaultRequiredVal(null, vehicleDetails?.licensedGVW),
+ saveVehicle: false,
+});
diff --git a/frontend/src/features/permits/helpers/vehicles/rules/gvw.ts b/frontend/src/features/permits/helpers/vehicles/rules/gvw.ts
new file mode 100644
index 000000000..e5a5dfa33
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/rules/gvw.ts
@@ -0,0 +1,37 @@
+import { VEHICLE_TYPES, VehicleType } from "../../../../manageVehicles/types/Vehicle";
+import { PERMIT_TYPES, PermitType } from "../../../types/PermitType";
+import {
+ isNull,
+ isUndefined,
+ Nullable,
+ Optional,
+} from "../../../../../common/types/common";
+
+export const gvwLimit = (permitType: PermitType) => {
+ if (permitType === PERMIT_TYPES.STOS) {
+ return 63500;
+ }
+
+ // For term permits the gvw limit is 64000 kg, but this is not yet implemented
+ // In the future, this may change
+ return undefined;
+};
+
+export const isWithinGvwLimit = (
+ gvw?: Nullable,
+ limit?: Optional,
+) => {
+ if (isUndefined(gvw) || isNull(gvw) || isUndefined(limit)) return true;
+ return gvw <= limit;
+};
+
+export const isPermitVehicleWithinGvwLimit = (
+ permitType: PermitType,
+ vehicleType: VehicleType,
+ gvw?: Nullable,
+) => {
+ if (vehicleType !== VEHICLE_TYPES.POWER_UNIT) return true;
+
+ const limit = gvwLimit(permitType);
+ return isWithinGvwLimit(gvw, limit);
+};
diff --git a/frontend/src/features/permits/helpers/vehicles/sortVehicles.ts b/frontend/src/features/permits/helpers/vehicles/sortVehicles.ts
new file mode 100644
index 000000000..0b10f83c6
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/sortVehicles.ts
@@ -0,0 +1,73 @@
+import { VEHICLE_CHOOSE_FROM, VehicleChooseFrom } from "../../constants/constants";
+import {
+ BaseVehicle,
+ Vehicle,
+ VEHICLE_TYPES,
+} from "../../../manageVehicles/types/Vehicle";
+
+/**
+ * Compare two vehicles by plate.
+ * @param vehicle1 First vehicle
+ * @param vehicle2 Second vehicle
+ * @returns Result of the compare operation between the two vehicles' plates
+ */
+const compareVehiclesByPlate = (vehicle1: BaseVehicle, vehicle2: BaseVehicle) => {
+ return vehicle1.plate.localeCompare(vehicle2.plate);
+};
+
+/**
+ * Compare two vehicles by unit number.
+ * @param vehicle1 First vehicle
+ * @param vehicle2 Second vehicle
+ * @returns Result of the compare operation between the two vehicles' unit numbers
+ */
+const compareVehiclesByUnitNumber = (vehicle1: BaseVehicle, vehicle2: BaseVehicle) => {
+ if (!vehicle1.unitNumber && !vehicle2.unitNumber)
+ return 0;
+
+ if (!vehicle1.unitNumber) return 1;
+ if (!vehicle2.unitNumber) return -1;
+ return vehicle1.unitNumber.localeCompare(vehicle2.unitNumber);
+};
+
+/**
+ * Compare two vehicles by vehicle type.
+ * @param vehicle1 First vehicle
+ * @param vehicle2 Second vehicle
+ * @returns Result of the compare operation between the two vehicles' types
+ */
+const compareVehiclesByVehicleType = (vehicle1: BaseVehicle, vehicle2: BaseVehicle) => {
+ if (!vehicle1.vehicleType && !vehicle2.vehicleType)
+ return 0;
+
+ if (!vehicle1.vehicleType) return 1;
+ if (!vehicle2.vehicleType) return -1;
+ if (vehicle1.vehicleType === vehicle2.vehicleType) return 0;
+
+ return vehicle1.vehicleType === VEHICLE_TYPES.POWER_UNIT ? -1 : 1;
+};
+
+/**
+ * Sort vehicles (by plate or unit number) alphabetically.
+ * @param vehicles Vehicles to sort
+ * @param sortBy Sort key (by plate or unit number)
+ * @returns Sorted vehicles
+ */
+export const sortVehicles = (
+ vehicles: Vehicle[],
+ sortBy: VehicleChooseFrom,
+) => {
+ // We shouldn't change original array, but make an copy and sort on that instead
+ const sortedVehicles = [...vehicles];
+ sortedVehicles.sort((vehicle1, vehicle2) => {
+ const compareByVehicleTypeResult = compareVehiclesByVehicleType(vehicle1, vehicle2);
+ if (compareByVehicleTypeResult !== 0) return compareByVehicleTypeResult;
+
+ if (sortBy === VEHICLE_CHOOSE_FROM.PLATE) {
+ return compareVehiclesByPlate(vehicle1, vehicle2);
+ }
+ return compareVehiclesByUnitNumber(vehicle1, vehicle2);
+ });
+
+ return sortedVehicles;
+};
diff --git a/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleSubtypeOptions.ts b/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleSubtypeOptions.ts
new file mode 100644
index 000000000..efccda390
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleSubtypeOptions.ts
@@ -0,0 +1,72 @@
+import { EMPTY_VEHICLE_SUBTYPE } from "../../../../manageVehicles/helpers/vehicleSubtypes";
+import { VEHICLE_TYPES, VehicleSubType } from "../../../../manageVehicles/types/Vehicle";
+import { sortVehicleSubtypes } from "./sortVehicleSubtypes";
+
+/**
+ * A helper method that filters allowed vehicle subtypes for dropdown lists.
+ * @param allVehicleSubtypes List of all vehicle subtypes
+ * @param allowedSubtypeCodes Set of allowed vehicle subtype codes
+ * @returns List of only allowed vehicle subtypes
+ */
+const getAllowedVehicleSubtypes = (
+ allVehicleSubtypes: VehicleSubType[],
+ allowedSubtypeCodes: Set,
+) => {
+ return allVehicleSubtypes.filter(({ typeCode }) => allowedSubtypeCodes.has(typeCode));
+};
+
+/**
+ * Get vehicle subtype options for given vehicle type.
+ * @param vehicleType Vehicle type
+ * @param powerUnitSubtypes Vehicle subtypes for power units
+ * @param trailerSubtypes Vehicle subtypes for trailers
+ * @returns Correct vehicle subtype options for vehicle type
+ */
+const getSubtypeOptions = (
+ vehicleType: string,
+ powerUnitSubtypes: VehicleSubType[],
+ trailerSubtypes: VehicleSubType[],
+) => {
+ if (vehicleType === VEHICLE_TYPES.POWER_UNIT) {
+ return [...powerUnitSubtypes];
+ }
+ if (vehicleType === VEHICLE_TYPES.TRAILER) {
+ return [...trailerSubtypes];
+ }
+ return [EMPTY_VEHICLE_SUBTYPE];
+};
+
+/**
+ * Get eligible subset of vehicle subtype options given lists of available subtypes and criteria.
+ * @param powerUnitSubtypes All available power unit subtypes
+ * @param trailerSubtypes All available trailer subtypes
+ * @param eligibleSubtypeCodes Set of eligible vehicle subtype codes by default
+ * @param allowedLOASubtypeCodes Set of vehicle subtypes allowed by selected LOAs
+ * @param vehicleType Vehicle type
+ * @returns Eligible subset of vehicle subtype options
+ */
+export const getEligibleSubtypeOptions = (
+ powerUnitSubtypes: VehicleSubType[],
+ trailerSubtypes: VehicleSubType[],
+ eligibleSubtypesCodes: Set,
+ allowedLOASubtypeCodes: Set,
+ vehicleType?: string,
+) => {
+ if (
+ vehicleType !== VEHICLE_TYPES.POWER_UNIT &&
+ vehicleType !== VEHICLE_TYPES.TRAILER
+ ) {
+ return [EMPTY_VEHICLE_SUBTYPE];
+ }
+
+ // Sort vehicle subtypes alphabetically
+ const sortedVehicleSubtypes = sortVehicleSubtypes(
+ vehicleType,
+ getSubtypeOptions(vehicleType, powerUnitSubtypes, trailerSubtypes),
+ );
+
+ return getAllowedVehicleSubtypes(
+ sortedVehicleSubtypes,
+ new Set([...eligibleSubtypesCodes, ...allowedLOASubtypeCodes]),
+ );
+};
diff --git a/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleVehicleSubtypes.ts b/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleVehicleSubtypes.ts
new file mode 100644
index 000000000..5ffb1dbc2
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/subtypes/getEligibleVehicleSubtypes.ts
@@ -0,0 +1,60 @@
+import { Policy } from "onroute-policy-engine";
+
+import { Nullable } from "../../../../../common/types/common";
+import { PERMIT_TYPES, PermitType } from "../../../types/PermitType";
+import { getDefaultRequiredVal } from "../../../../../common/helpers/util";
+import { TROW_ELIGIBLE_VEHICLE_SUBTYPES } from "../../../constants/trow";
+import { TROS_ELIGIBLE_VEHICLE_SUBTYPES } from "../../../constants/tros";
+import {
+ DEFAULT_COMMODITY_SELECT_VALUE,
+ LCV_VEHICLE_SUBTYPES,
+} from "../../../constants/constants";
+
+/**
+ * Get eligible vehicle subtypes based on given criteria.
+ * @param permitType Permit type
+ * @param isLcvDesignated Whether or not LCV flag is designated
+ * @param selectedCommodity The selected commodity, if applicable for this permit type
+ * @param policyEngine The policy engine used to find vehicle subtypes
+ * @returns List of eligible vehicle subtypes that can be used
+ */
+export const getEligibleVehicleSubtypes = (
+ permitType: PermitType,
+ isLcvDesignated: boolean,
+ selectedCommodity?: Nullable,
+ policyEngine?: Nullable,
+) => {
+ const lcvSubtypes = LCV_VEHICLE_SUBTYPES.map(({ typeCode }) => typeCode);
+ switch (permitType) {
+ case PERMIT_TYPES.STOS: {
+ if (!selectedCommodity || !policyEngine || (selectedCommodity === DEFAULT_COMMODITY_SELECT_VALUE))
+ return new Set();
+
+ const subtypesMap = policyEngine.getPermittableVehicleTypes(permitType, selectedCommodity);
+ return new Set(
+ [
+ ...getDefaultRequiredVal(
+ new Map(),
+ subtypesMap.get("powerUnits"),
+ ).keys(),
+ ...getDefaultRequiredVal(
+ new Map(),
+ subtypesMap.get("trailers"),
+ ).keys(),
+ ].concat(isLcvDesignated ? lcvSubtypes : []),
+ );
+ }
+ // Policy engine currently doesn't return vehicle subtypes unless a commodity is provided
+ // which TROW and TROS doesn't have, thus here the hardcoded subtypes are being used
+ case PERMIT_TYPES.TROW:
+ return new Set(
+ TROW_ELIGIBLE_VEHICLE_SUBTYPES.concat(isLcvDesignated ? lcvSubtypes : []),
+ );
+ case PERMIT_TYPES.TROS:
+ return new Set(
+ TROS_ELIGIBLE_VEHICLE_SUBTYPES.concat(isLcvDesignated ? lcvSubtypes : []),
+ );
+ default:
+ return new Set();
+ }
+};
diff --git a/frontend/src/features/permits/helpers/vehicles/subtypes/sortVehicleSubtypes.ts b/frontend/src/features/permits/helpers/vehicles/subtypes/sortVehicleSubtypes.ts
new file mode 100644
index 000000000..6d4501b63
--- /dev/null
+++ b/frontend/src/features/permits/helpers/vehicles/subtypes/sortVehicleSubtypes.ts
@@ -0,0 +1,20 @@
+import { VehicleSubType } from "../../../../manageVehicles/types/Vehicle";
+
+/**
+ * Sort vehicle subtypes alphabetically.
+ * @param vehicleType Vehicle type
+ * @param subtypeOptions Vehicle subtype options
+ * @returns Sorted list of vehicle subtypes
+ */
+export const sortVehicleSubtypes = (
+ vehicleType: string,
+ subtypeOptions: VehicleSubType[],
+) => {
+ if (!vehicleType) return [];
+
+ // Make copy of original array (original shouldn't be changed)
+ const sorted = [...subtypeOptions];
+ sorted.sort((subtype1, subtype2) => subtype1.type.localeCompare(subtype2.type));
+
+ return sorted;
+};
diff --git a/frontend/src/features/permits/hooks/useApplicationFormContext.ts b/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts
similarity index 52%
rename from frontend/src/features/permits/hooks/useApplicationFormContext.ts
rename to frontend/src/features/permits/hooks/form/useApplicationFormContext.ts
index 6d3ec01a0..9fb0070fa 100644
--- a/frontend/src/features/permits/hooks/useApplicationFormContext.ts
+++ b/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts
@@ -1,25 +1,30 @@
import { useContext } from "react";
+import { Policy } from "onroute-policy-engine";
-import { ApplicationFormContext } from "../context/ApplicationFormContext";
-import { usePermitDateSelection } from "./usePermitDateSelection";
-import { usePermitConditions } from "./usePermitConditions";
-import { getStartOfDate } from "../../../common/helpers/formatDate";
-import { getIneligibleSubtypes } from "../helpers/permitVehicles";
-import { usePermitVehicleForLOAs } from "./usePermitVehicleForLOAs";
-import { arePermitLOADetailsEqual, PermitLOA } from "../types/PermitLOA";
-import { useMemoizedArray } from "../../../common/hooks/useMemoizedArray";
-import { getDefaultRequiredVal } from "../../../common/helpers/util";
-import { arePermitConditionEqual } from "../types/PermitCondition";
-import { useMemoizedObject } from "../../../common/hooks/useMemoizedObject";
+import { ApplicationFormContext } from "../../context/ApplicationFormContext";
+import { usePermitDateSelection } from "../usePermitDateSelection";
+import { usePermitConditions } from "../usePermitConditions";
+import { getStartOfDate } from "../../../../common/helpers/formatDate";
+import { usePermitVehicles } from "../usePermitVehicles";
+import { arePermitLOADetailsEqual } from "../../types/PermitLOA";
+import { useMemoizedArray } from "../../../../common/hooks/useMemoizedArray";
+import { getDefaultRequiredVal } from "../../../../common/helpers/util";
+import { arePermitConditionEqual } from "../../types/PermitCondition";
+import { useMemoizedObject } from "../../../../common/hooks/useMemoizedObject";
+import { useVehicleConfiguration } from "../useVehicleConfiguration";
+import { useApplicationFormUpdateMethods } from "./useApplicationFormUpdateMethods";
+import { usePermittedCommodity } from "../usePermittedCommodity";
+import { DEFAULT_COMMODITY_SELECT_VALUE } from "../../constants/constants";
export const useApplicationFormContext = () => {
+ const applicationFormContextData = useContext(ApplicationFormContext);
const {
initialFormData,
formData,
durationOptions,
- vehicleOptions,
- powerUnitSubtypes,
- trailerSubtypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
isLcvDesignated,
feature,
companyInfo,
@@ -33,6 +38,13 @@ export const useApplicationFormContext = () => {
onSave,
onCancel,
onContinue,
+ } = applicationFormContextData;
+
+ // This assignment is type-safe since the parent component ensured that
+ // the loading page or error page is rendered when policy engine is null/undefined
+ const policyEngine = applicationFormContextData.policyEngine as Policy;
+
+ const {
onSetDuration,
onSetExpiryDate,
onSetConditions,
@@ -40,7 +52,12 @@ export const useApplicationFormContext = () => {
onSetVehicle,
onClearVehicle,
onUpdateLOAs,
- } = useContext(ApplicationFormContext);
+ onUpdateHighwaySequence,
+ onUpdateVehicleConfigTrailers,
+ onSetCommodityType,
+ onUpdateVehicleConfig,
+ onClearVehicleConfig,
+ } = useApplicationFormUpdateMethods();
const {
permitType,
@@ -55,6 +72,9 @@ export const useApplicationFormContext = () => {
startDate: permitStartDate,
commodities,
vehicleDetails: vehicleFormData,
+ permittedRoute,
+ permittedCommodity,
+ vehicleConfiguration,
} = formData.permitData;
const createdAt = useMemoizedObject(
@@ -98,7 +118,7 @@ export const useApplicationFormContext = () => {
permitType,
startDate,
durationOptions,
- currentSelectedLOAs as PermitLOA[],
+ currentSelectedLOAs,
permitDuration,
onSetDuration,
onSetExpiryDate,
@@ -113,18 +133,16 @@ export const useApplicationFormContext = () => {
onSetConditions,
);
- // Get ineligible vehicle subtypes
- const ineligibleSubtypes = getIneligibleSubtypes(permitType, isLcvDesignated);
- const ineligiblePowerUnitSubtypes = useMemoizedArray(
- ineligibleSubtypes.ineligiblePowerUnitSubtypes,
- (subtype) => subtype.typeCode,
- (subtype1, subtype2) => subtype1.typeCode === subtype2.typeCode,
- );
-
- const ineligibleTrailerSubtypes = useMemoizedArray(
- ineligibleSubtypes.ineligibleTrailerSubtypes,
- (subtype) => subtype.typeCode,
- (subtype1, subtype2) => subtype1.typeCode === subtype2.typeCode,
+ const {
+ commodityOptions,
+ onChangeCommodityType,
+ } = usePermittedCommodity(
+ policyEngine,
+ permitType,
+ onSetCommodityType,
+ () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)),
+ onClearVehicleConfig,
+ permittedCommodity?.commodityType,
);
// Check to see if vehicle details is still valid after LOA has been deselected
@@ -133,15 +151,38 @@ export const useApplicationFormContext = () => {
filteredVehicleOptions,
subtypeOptions,
isSelectedLOAVehicle,
- } = usePermitVehicleForLOAs(
+ } = usePermitVehicles({
+ policyEngine,
+ permitType,
+ isLcvDesignated,
vehicleFormData,
- vehicleOptions,
- currentSelectedLOAs as PermitLOA[],
- powerUnitSubtypes,
- trailerSubtypes,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)),
+ allVehiclesFromInventory,
+ selectedLOAs: currentSelectedLOAs,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ onClearVehicle: () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)),
+ selectedCommodity: permittedCommodity?.commodityType,
+ });
+
+ const selectedVehicleConfigSubtypes = useMemoizedArray(
+ getDefaultRequiredVal(
+ [],
+ vehicleConfiguration?.trailers?.map(({ vehicleSubType }) => vehicleSubType),
+ ),
+ (subtype) => subtype,
+ (subtype1, subtype2) => subtype1 === subtype2,
+ );
+
+ const { nextAllowedSubtypes } = useVehicleConfiguration(
+ policyEngine,
+ permitType,
+ getDefaultRequiredVal(
+ DEFAULT_COMMODITY_SELECT_VALUE,
+ permittedCommodity?.commodityType,
+ ),
+ selectedVehicleConfigSubtypes,
+ vehicleFormData.vehicleSubType,
+ onUpdateVehicleConfigTrailers,
);
const memoizedCompanyLOAs = useMemoizedArray(
@@ -160,6 +201,13 @@ export const useApplicationFormContext = () => {
&& historyItem1.comment === historyItem2.comment,
);
+ const highwaySequence = useMemoizedObject(
+ getDefaultRequiredVal([], permittedRoute?.manualRoute?.highwaySequence),
+ (seq1, seq2) =>
+ seq1.length === seq2.length
+ && seq1.every((num, index) => num === seq2[index]),
+ );
+
return {
initialFormData,
permitType,
@@ -182,6 +230,13 @@ export const useApplicationFormContext = () => {
pastStartDateStatus,
companyLOAs: memoizedCompanyLOAs,
revisionHistory: memoizedRevisionHistory,
+ commodityOptions,
+ highwaySequence,
+ nextAllowedSubtypes,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ selectedVehicleConfigSubtypes,
+ vehicleConfiguration,
onLeave,
onSave,
onCancel,
@@ -193,5 +248,10 @@ export const useApplicationFormContext = () => {
onSetVehicle,
onClearVehicle,
onUpdateLOAs,
+ onUpdateHighwaySequence,
+ onUpdateVehicleConfigTrailers,
+ commodityType: permittedCommodity?.commodityType,
+ onChangeCommodityType,
+ onUpdateVehicleConfig,
};
};
\ No newline at end of file
diff --git a/frontend/src/features/permits/hooks/form/useApplicationFormUpdateMethods.ts b/frontend/src/features/permits/hooks/form/useApplicationFormUpdateMethods.ts
new file mode 100644
index 000000000..6485e7725
--- /dev/null
+++ b/frontend/src/features/permits/hooks/form/useApplicationFormUpdateMethods.ts
@@ -0,0 +1,113 @@
+import dayjs, { Dayjs } from "dayjs";
+import { useCallback } from "react";
+import { useFormContext } from "react-hook-form";
+
+import { PermitCondition } from "../../types/PermitCondition";
+import { PermitLOA } from "../../types/PermitLOA";
+import { PermitVehicleConfiguration, VehicleInConfiguration } from "../../types/PermitVehicleConfiguration";
+import { EMPTY_VEHICLE_DETAILS, PermitVehicleDetails } from "../../types/PermitVehicleDetails";
+import { ApplicationFormData } from "../../types/application";
+import { getDefaultVehicleConfiguration } from "../../helpers/vehicles/configuration/getDefaultVehicleConfiguration";
+import { PermitType } from "../../types/PermitType";
+import { RequiredOrNull } from "../../../../common/types/common";
+
+/**
+ * Hook that returns custom methods that update specific values in the application form.
+ * This allows a degree of control over encapsulation of the form methods (eg. without leaking/allowing form methods
+ * like setValue to be called directly everywhere throughout the child components).
+ *
+ * NOTE: This hook must be used inside a component/hook that is a child of an application FormProvider.
+ * @returns Custom methods to update specific values in the application form
+ */
+export const useApplicationFormUpdateMethods = () => {
+ const { setValue } = useFormContext();
+
+ const onSetDuration = useCallback((duration: number) => {
+ setValue("permitData.permitDuration", duration);
+ }, [setValue]);
+
+ const onSetExpiryDate = useCallback((expiry: Dayjs) => {
+ setValue("permitData.expiryDate", dayjs(expiry));
+ }, [setValue]);
+
+ const onSetConditions = useCallback((conditions: PermitCondition[]) => {
+ setValue("permitData.commodities", [...conditions]);
+ }, [setValue]);
+
+ const onToggleSaveVehicle = useCallback((saveVehicle: boolean) => {
+ setValue("permitData.vehicleDetails.saveVehicle", saveVehicle);
+ }, [setValue]);
+
+ const onSetVehicle = useCallback((vehicleDetails: PermitVehicleDetails) => {
+ setValue("permitData.vehicleDetails", {
+ ...vehicleDetails,
+ });
+ }, [setValue]);
+
+ const onClearVehicle = useCallback((saveVehicle: boolean) => {
+ setValue("permitData.vehicleDetails", {
+ ...EMPTY_VEHICLE_DETAILS,
+ saveVehicle,
+ });
+ }, [setValue]);
+
+ const onSetCommodityType = useCallback((commodityType: string) => {
+ setValue("permitData.permittedCommodity.commodityType", commodityType);
+ }, [setValue]);
+
+ const onUpdateLOAs = useCallback((updatedLOAs: PermitLOA[]) => {
+ setValue("permitData.loas", updatedLOAs);
+ }, [setValue]);
+
+ const onUpdateHighwaySequence = useCallback((updatedHighwaySequence: string[]) => {
+ setValue(
+ "permitData.permittedRoute.manualRoute.highwaySequence",
+ updatedHighwaySequence,
+ );
+ }, [setValue]);
+
+ const onUpdateVehicleConfigTrailers = useCallback(
+ (updatedTrailerSubtypes: VehicleInConfiguration[]) => {
+ setValue(
+ "permitData.vehicleConfiguration.trailers",
+ updatedTrailerSubtypes,
+ );
+ },
+ [setValue],
+ );
+
+ const onUpdateVehicleConfig = useCallback(
+ (updatedVehicleConfig: RequiredOrNull) => {
+ setValue(
+ "permitData.vehicleConfiguration",
+ updatedVehicleConfig,
+ );
+ },
+ [setValue],
+ );
+
+ const onClearVehicleConfig = useCallback(
+ (permitType: PermitType) => {
+ setValue(
+ "permitData.vehicleConfiguration",
+ getDefaultVehicleConfiguration(permitType),
+ );
+ },
+ [setValue],
+ );
+
+ return {
+ onSetDuration,
+ onSetExpiryDate,
+ onSetConditions,
+ onToggleSaveVehicle,
+ onSetVehicle,
+ onClearVehicle,
+ onUpdateLOAs,
+ onUpdateHighwaySequence,
+ onUpdateVehicleConfigTrailers,
+ onSetCommodityType,
+ onUpdateVehicleConfig,
+ onClearVehicleConfig,
+ };
+};
diff --git a/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts b/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts
new file mode 100644
index 000000000..01a3b08de
--- /dev/null
+++ b/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts
@@ -0,0 +1,107 @@
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { Policy } from "onroute-policy-engine";
+
+import { Application, ApplicationFormData } from "../../types/application";
+import { BCeIDUserDetailContext } from "../../../../common/authentication/OnRouteBCContext";
+import { CompanyProfile } from "../../../manageProfile/types/manageProfile";
+import { Nullable } from "../../../../common/types/common";
+import { PermitType } from "../../types/PermitType";
+import { LOADetail } from "../../../settings/types/LOADetail";
+import { applyUpToDateLOAsToApplication } from "../../helpers/permitLOA";
+import { getDefaultValues } from "../../helpers/getDefaultApplicationFormData";
+import { applyLCVToApplicationData } from "../../helpers/permitLCV";
+import { PowerUnit, Trailer } from "../../../manageVehicles/types/Vehicle";
+import { getEligibleVehicleSubtypes } from "../../helpers/vehicles/subtypes/getEligibleVehicleSubtypes";
+
+/**
+ * Custom hook for populating the form using fetched application data, as well as current company id and user details.
+ * This also involves resetting certain form values whenever new/updated application data is fetched.
+ * @param permitType Permit type for the application
+ * @param isLcvDesignated Whether or not the company is designated to use LCV for permits
+ * @param companyLOAs Most up-to-date LOAs belonging to the company
+ * @param inventoryVehicles Vehicles in the inventory for the company
+ * @param companyInfo Company information for filling out the form
+ * @param applicationData Application data received to fill out the form, preferrably from ApplicationContext/backend
+ * @param userDetails User details for filling out the form
+ * @param policyEngine Instance of the policy engine, if it's available
+ * @returns Current application form data, methods to manage the form, and selectable input options
+ */
+export const useInitApplicationFormData = (
+ data: {
+ permitType: PermitType;
+ isLcvDesignated: boolean;
+ companyLOAs: LOADetail[];
+ inventoryVehicles: (PowerUnit | Trailer)[];
+ companyInfo: Nullable;
+ applicationData?: Nullable;
+ userDetails?: BCeIDUserDetailContext;
+ policyEngine?: Nullable;
+ },
+) => {
+ 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(() => {
+ const eligibleVehicleSubtypes = getEligibleVehicleSubtypes(
+ permitType,
+ isLcvDesignated,
+ applicationData?.permitData?.permittedCommodity?.commodityType,
+ policyEngine,
+ );
+
+ return applyUpToDateLOAsToApplication(
+ applyLCVToApplicationData(
+ getDefaultValues(
+ permitType,
+ companyInfo,
+ applicationData,
+ userDetails,
+ ),
+ isLcvDesignated,
+ ),
+ companyLOAs,
+ inventoryVehicles,
+ eligibleVehicleSubtypes,
+ );
+ }, [
+ permitType,
+ companyInfo,
+ applicationData,
+ userDetails,
+ isLcvDesignated,
+ companyLOAs,
+ inventoryVehicles,
+ policyEngine,
+ ]);
+
+ // Register default values with react-hook-form
+ const formMethods = useForm({
+ defaultValues: initialFormData,
+ reValidateMode: "onChange",
+ });
+
+ const { watch, reset } = formMethods;
+ const currentFormData = watch();
+
+ // Reset the form with updated default form data whenever fetched data changes
+ useEffect(() => {
+ reset(initialFormData);
+ }, [initialFormData]);
+
+ return {
+ initialFormData,
+ currentFormData,
+ formMethods,
+ };
+};
diff --git a/frontend/src/features/permits/hooks/hooks.ts b/frontend/src/features/permits/hooks/hooks.ts
index 541d1a037..8719b8a84 100644
--- a/frontend/src/features/permits/hooks/hooks.ts
+++ b/frontend/src/features/permits/hooks/hooks.ts
@@ -1,6 +1,7 @@
import { useState, useEffect } from "react";
import { AxiosError } from "axios";
import { MRT_PaginationState } from "material-react-table";
+import { useNavigate } from "react-router-dom";
import {
useQueryClient,
useMutation,
@@ -8,21 +9,27 @@ import {
keepPreviousData,
} from "@tanstack/react-query";
-import { Application, ApplicationFormData } from "../types/application";
import { IssuePermitsResponse } from "../types/permit";
import { StartTransactionResponseData } from "../types/payment";
-import {
- APPLICATION_STEPS,
- ApplicationStep,
- ERROR_ROUTES,
-} from "../../../routes/constants";
import { isPermitTypeValid } from "../types/PermitType";
import { isPermitIdNumeric } from "../helpers/permitState";
-import { deserializeApplicationResponse } from "../helpers/deserializeApplication";
-import { deserializePermitResponse } from "../helpers/deserializePermit";
+import { deserializeApplicationResponse } from "../helpers/serialize/deserializeApplication";
+import { deserializePermitResponse } from "../helpers/serialize/deserializePermit";
import { AmendPermitFormData } from "../pages/Amend/types/AmendPermitFormData";
import { Nullable, Optional } from "../../../common/types/common";
import { useTableControls } from "./useTableControls";
+import { getDefaultRequiredVal } from "../../../common/helpers/util";
+import {
+ Application,
+ ApplicationFormData,
+} from "../types/application";
+
+import {
+ APPLICATION_STEPS,
+ ApplicationStep,
+ ERROR_ROUTES,
+} from "../../../routes/constants";
+
import {
getApplication,
getPermit,
@@ -39,8 +46,6 @@ import {
resendPermit,
getPendingPermits,
} from "../apiManager/permitsAPI";
-import { getDefaultRequiredVal } from "../../../common/helpers/util";
-import { useNavigate } from "react-router-dom";
const QUERY_KEYS = {
PERMIT_DETAIL: (
@@ -63,7 +68,7 @@ const QUERY_KEYS = {
*/
export const useSaveApplicationMutation = () => {
const queryClient = useQueryClient();
- const navigate = useNavigate();
+
return useMutation({
mutationFn: async ({
data,
@@ -72,34 +77,17 @@ export const useSaveApplicationMutation = () => {
data: ApplicationFormData;
companyId: number;
}) => {
- const res = data.permitId
+ return data.permitId
? await updateApplication(data, data.permitId, companyId)
- : await createApplication(data, companyId);
-
+ : await createApplication(data, companyId);
+ },
+ onSuccess: (res) => {
if (res.status === 200 || res.status === 201) {
queryClient.invalidateQueries({
queryKey: ["application"],
});
-
- return {
- application: deserializeApplicationResponse(res.data),
- status: res.status,
- };
- } else {
- return {
- application: null,
- status: res.status,
- };
}
},
- onError: (error: AxiosError) => {
- console.error(error);
- navigate(ERROR_ROUTES.UNEXPECTED, {
- state: {
- correlationId: error?.response?.headers["x-correlation-id"],
- },
- });
- },
});
};
diff --git a/frontend/src/features/permits/hooks/useCommodityOptions.ts b/frontend/src/features/permits/hooks/useCommodityOptions.ts
new file mode 100644
index 000000000..c843d364a
--- /dev/null
+++ b/frontend/src/features/permits/hooks/useCommodityOptions.ts
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { Policy } from "onroute-policy-engine";
+
+import { getPermittedCommodityOptions } from "../helpers/permittedCommodity";
+import { Nullable } from "../../../common/types/common";
+import { PermitType } from "../types/PermitType";
+
+export const useCommodityOptions = (
+ policyEngine: Nullable,
+ permitType: PermitType,
+) => {
+ const commodityOptions = useMemo(() => {
+ return getPermittedCommodityOptions(permitType, policyEngine);
+ }, [policyEngine, permitType]);
+
+ return {
+ commodityOptions,
+ };
+};
diff --git a/frontend/src/features/permits/hooks/useInitApplicationFormData.ts b/frontend/src/features/permits/hooks/useInitApplicationFormData.ts
deleted file mode 100644
index 1b410ff0b..000000000
--- a/frontend/src/features/permits/hooks/useInitApplicationFormData.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { useForm } from "react-hook-form";
-import dayjs, { Dayjs } from "dayjs";
-
-import { Application, ApplicationFormData } from "../types/application";
-import { BCeIDUserDetailContext } from "../../../common/authentication/OnRouteBCContext";
-import { CompanyProfile } from "../../manageProfile/types/manageProfile";
-import { Nullable } from "../../../common/types/common";
-import { PermitType } from "../types/PermitType";
-import { LOADetail } from "../../settings/types/LOADetail";
-import { applyUpToDateLOAsToApplication } from "../helpers/permitLOA";
-import { getDefaultValues } from "../helpers/getDefaultApplicationFormData";
-import { applyLCVToApplicationData } from "../helpers/permitLCV";
-import { PowerUnit, Trailer } from "../../manageVehicles/types/Vehicle";
-import { getIneligibleSubtypes } from "../helpers/permitVehicles";
-import { PermitCondition } from "../types/PermitCondition";
-import { EMPTY_VEHICLE_DETAILS, PermitVehicleDetails } from "../types/PermitVehicleDetails";
-import { PermitLOA } from "../types/PermitLOA";
-
-/**
- * Custom hook for populating the form using fetched application data, as well as current company id and user details.
- * This also involves resetting certain form values whenever new/updated application data is fetched.
- * @param permitType Permit type for the application
- * @param isLcvDesignated Whether or not the company is designated to use LCV for permits
- * @param loas Most up-to-date LOAs belonging to the company
- * @param companyInfo Company information for filling out the form
- * @param applicationData Application data received to fill out the form, preferrably from ApplicationContext/backend
- * @param userDetails User details for filling out the form
- * @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,
- applicationData?: Nullable,
- userDetails?: BCeIDUserDetailContext,
-) => {
- // Used to populate/initialize the form with
- // This will be updated whenever new application, company, and user data is fetched
- const initialFormData = useMemo(() => {
- const ineligibleSubtypes = getIneligibleSubtypes(permitType, isLcvDesignated);
- const ineligiblePowerUnitSubtypes= ineligibleSubtypes.ineligiblePowerUnitSubtypes
- .map(({ typeCode }) => typeCode);
-
- const ineligibleTrailerSubtypes = ineligibleSubtypes.ineligibleTrailerSubtypes
- .map(({ typeCode }) => typeCode);
-
- return applyUpToDateLOAsToApplication(
- applyLCVToApplicationData(
- getDefaultValues(
- permitType,
- companyInfo,
- applicationData,
- userDetails,
- ),
- isLcvDesignated,
- ),
- companyLOAs,
- inventoryVehicles,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- );
- }, [
- permitType,
- companyInfo,
- applicationData,
- userDetails,
- isLcvDesignated,
- companyLOAs,
- inventoryVehicles,
- ]);
-
- // Register default values with react-hook-form
- const formMethods = useForm({
- defaultValues: initialFormData,
- reValidateMode: "onBlur",
- });
-
- const { watch, reset, setValue } = formMethods;
- const currentFormData = watch();
-
- // Reset the form with updated default form data whenever fetched data changes
- useEffect(() => {
- reset(initialFormData);
- }, [initialFormData]);
-
- const onSetDuration = useCallback((duration: number) => {
- setValue("permitData.permitDuration", duration);
- }, [setValue]);
-
- const onSetExpiryDate = useCallback((expiry: Dayjs) => {
- setValue("permitData.expiryDate", dayjs(expiry));
- }, [setValue]);
-
- const onSetConditions = useCallback((conditions: PermitCondition[]) => {
- setValue("permitData.commodities", [...conditions]);
- }, [setValue]);
-
- const onToggleSaveVehicle = useCallback((saveVehicle: boolean) => {
- setValue("permitData.vehicleDetails.saveVehicle", saveVehicle);
- }, [setValue]);
-
- const onSetVehicle = useCallback((vehicleDetails: PermitVehicleDetails) => {
- setValue("permitData.vehicleDetails", {
- ...vehicleDetails,
- });
- }, [setValue]);
-
- const onClearVehicle = useCallback((saveVehicle: boolean) => {
- setValue("permitData.vehicleDetails", {
- ...EMPTY_VEHICLE_DETAILS,
- saveVehicle,
- });
- }, [setValue]);
-
- const onUpdateLOAs = useCallback((updatedLOAs: PermitLOA[]) => {
- setValue("permitData.loas", updatedLOAs);
- }, [setValue]);
-
- return {
- initialFormData,
- currentFormData,
- formMethods,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
- };
-};
diff --git a/frontend/src/features/permits/hooks/usePermitVehicleForLOAs.ts b/frontend/src/features/permits/hooks/usePermitVehicleForLOAs.ts
deleted file mode 100644
index a6ac81b82..000000000
--- a/frontend/src/features/permits/hooks/usePermitVehicleForLOAs.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { useEffect, useMemo } from "react";
-
-import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
-import { getUpdatedVehicleDetailsForLOAs } from "../helpers/permitLOA";
-import { PermitLOA } from "../types/PermitLOA";
-import { getEligibleSubtypeOptions } from "../helpers/permitVehicles";
-import {
- PowerUnit,
- Trailer,
- VEHICLE_TYPES,
- VehicleSubType,
-} from "../../manageVehicles/types/Vehicle";
-
-export const usePermitVehicleForLOAs = (
- vehicleFormData: PermitVehicleDetails,
- vehicleOptions: (PowerUnit | Trailer)[],
- selectedLOAs: PermitLOA[],
- powerUnitSubtypes: VehicleSubType[],
- trailerSubtypes: VehicleSubType[],
- ineligiblePowerUnitSubtypes: VehicleSubType[],
- ineligibleTrailerSubtypes: VehicleSubType[],
- onClearVehicle: () => void,
-) => {
- // Check to see if vehicle details is still valid after LOA has been deselected
- const {
- updatedVehicle,
- filteredVehicleOptions,
- } = useMemo(() => {
- return getUpdatedVehicleDetailsForLOAs(
- selectedLOAs,
- vehicleOptions,
- vehicleFormData,
- ineligiblePowerUnitSubtypes.map(({ typeCode }) => typeCode),
- ineligibleTrailerSubtypes.map(({ typeCode }) => typeCode),
- );
- }, [
- selectedLOAs,
- vehicleOptions,
- vehicleFormData,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- ]);
-
- const vehicleIdInForm = vehicleFormData.vehicleId;
- const updatedVehicleId = updatedVehicle.vehicleId;
- useEffect(() => {
- // If vehicle originally selected exists but the updated vehicle is cleared, clear the vehicle
- if (vehicleIdInForm && !updatedVehicleId) {
- onClearVehicle();
- }
- }, [
- vehicleIdInForm,
- updatedVehicleId,
- ]);
-
- // Get vehicle subtypes that are allowed by LOAs
- const vehicleType = vehicleFormData.vehicleType;
- const {
- subtypeOptions,
- isSelectedLOAVehicle,
- } = useMemo(() => {
- const permittedLOAPowerUnitIds = new Set([
- ...selectedLOAs.map(loa => loa.powerUnits)
- .reduce((prevPowerUnits, currPowerUnits) => [
- ...prevPowerUnits,
- ...currPowerUnits,
- ], []),
- ]);
-
- const permittedLOATrailerIds = new Set([
- ...selectedLOAs.map(loa => loa.trailers)
- .reduce((prevTrailers, currTrailers) => [
- ...prevTrailers,
- ...currTrailers,
- ], []),
- ]);
-
- // Try to find all of the unfiltered vehicles in the inventory, and get a list of their subtypes
- // as some of these unfiltered subtypes can potentially be used by a selected LOA
- const powerUnitsInInventory = vehicleOptions
- .filter(vehicle => vehicle.vehicleType === VEHICLE_TYPES.POWER_UNIT) as PowerUnit[];
-
- const trailersInInventory = vehicleOptions
- .filter(vehicle => vehicle.vehicleType === VEHICLE_TYPES.TRAILER) as Trailer[];
-
- const permittedLOAPowerUnitSubtypes = powerUnitsInInventory
- .filter(powerUnit => permittedLOAPowerUnitIds.has(powerUnit.powerUnitId as string))
- .map(powerUnit => powerUnit.powerUnitTypeCode);
-
- const permittedLOATrailerSubtypes = trailersInInventory
- .filter(trailer => permittedLOATrailerIds.has(trailer.trailerId as string))
- .map(trailer => trailer.trailerTypeCode);
-
- // Check if selected vehicle is an LOA vehicle
- const isSelectedLOAVehicle = Boolean(vehicleIdInForm)
- && (
- permittedLOAPowerUnitIds.has(vehicleIdInForm as string)
- || permittedLOATrailerIds.has(vehicleIdInForm as string)
- )
- && (
- powerUnitsInInventory.map(powerUnit => powerUnit.powerUnitId)
- .includes(vehicleIdInForm as string)
- || trailersInInventory.map(trailer => trailer.trailerId)
- .includes(vehicleIdInForm as string)
- );
-
- const subtypeOptions = getEligibleSubtypeOptions(
- powerUnitSubtypes,
- trailerSubtypes,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- permittedLOAPowerUnitSubtypes,
- permittedLOATrailerSubtypes,
- vehicleType,
- );
-
- return {
- subtypeOptions,
- isSelectedLOAVehicle,
- };
- }, [
- selectedLOAs,
- vehicleOptions,
- vehicleType,
- vehicleIdInForm,
- powerUnitSubtypes,
- trailerSubtypes,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
- ]);
-
- return {
- filteredVehicleOptions,
- subtypeOptions,
- isSelectedLOAVehicle,
- };
-};
diff --git a/frontend/src/features/permits/hooks/usePermitVehicleManagement.ts b/frontend/src/features/permits/hooks/usePermitVehicleManagement.ts
index 2eb6c3262..ca5cc14de 100644
--- a/frontend/src/features/permits/hooks/usePermitVehicleManagement.ts
+++ b/frontend/src/features/permits/hooks/usePermitVehicleManagement.ts
@@ -1,9 +1,9 @@
import { useCallback, useMemo } from "react";
import { getDefaultRequiredVal } from "../../../common/helpers/util";
-import { mapToVehicleObjectById } from "../helpers/mappers";
+import { findFromExistingVehicles } from "../helpers/mappers";
import { Nullable } from "../../../common/types/common";
-import { getDefaultVehicleDetails } from "../helpers/permitVehicles";
+import { getDefaultVehicleDetails } from "../helpers/vehicles/getDefaultVehicleDetails";
import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
import {
usePowerUnitSubTypesQuery,
@@ -41,6 +41,7 @@ const transformByVehicleType = (
countryCode: vehicleFormData.countryCode,
provinceCode: vehicleFormData.provinceCode,
powerUnitTypeCode: vehicleFormData.vehicleSubType,
+ licensedGvw: vehicleFormData.licensedGVW,
};
const defaultTrailer: Trailer = {
@@ -102,7 +103,7 @@ export const usePermitVehicleManagement = (companyId: number) => {
const { data: powerUnitSubtypesData } = usePowerUnitSubTypesQuery();
const { data: trailerSubtypesData } = useTrailerSubTypesQuery();
- const fetchedVehicles = useMemo(() => [
+ const allVehiclesFromInventory = useMemo(() => [
...getDefaultRequiredVal(
[],
powerUnitsData,
@@ -119,8 +120,15 @@ export const usePermitVehicleManagement = (companyId: number) => {
})),
], [powerUnitsData, trailersData]);
- const powerUnitSubTypes = getDefaultRequiredVal([], powerUnitSubtypesData);
- const trailerSubTypes = getDefaultRequiredVal([], trailerSubtypesData);
+ const powerUnitSubtypeNamesMap = useMemo(() => new Map(
+ getDefaultRequiredVal([], powerUnitSubtypesData)
+ .map(({ typeCode, type }) => [typeCode, type]),
+ ), [powerUnitSubtypesData]);
+
+ const trailerSubtypeNamesMap = useMemo(() => new Map(
+ getDefaultRequiredVal([], trailerSubtypesData)
+ .map(({ typeCode, type }) => [typeCode, type]),
+ ), [trailerSubtypesData]);
const handleSaveVehicle = useCallback(async (
vehicleData?: Nullable,
@@ -134,8 +142,8 @@ export const usePermitVehicleManagement = (companyId: number) => {
// Check if the vehicle that is to be saved was created from an existing vehicle
const vehicleId = vehicle.vehicleId;
- const existingVehicle = mapToVehicleObjectById(
- fetchedVehicles,
+ const existingVehicle = findFromExistingVehicles(
+ allVehiclesFromInventory,
vehicle.vehicleType as VehicleType,
vehicleId,
);
@@ -164,12 +172,13 @@ export const usePermitVehicleManagement = (companyId: number) => {
if (!modifyVehicleSuccess(res.status)) return null;
- const { powerUnitId, powerUnitTypeCode, ...restOfPowerUnit } = res.data;
+ const { powerUnitId, powerUnitTypeCode, licensedGvw, ...restOfPowerUnit } = res.data;
return getDefaultVehicleDetails({
...restOfPowerUnit,
vehicleId: powerUnitId,
vehicleSubType: powerUnitTypeCode,
vehicleType: VEHICLE_TYPES.POWER_UNIT,
+ licensedGVW: licensedGvw,
});
}
@@ -197,7 +206,7 @@ export const usePermitVehicleManagement = (companyId: number) => {
if (!modifyVehicleSuccess(res.status)) return null;
const { trailerId, trailerTypeCode, ...restOfTrailer } = res.data;
- return getDefaultRequiredVal({
+ return getDefaultVehicleDetails({
...restOfTrailer,
vehicleId: trailerId,
vehicleSubType: trailerTypeCode,
@@ -206,12 +215,12 @@ export const usePermitVehicleManagement = (companyId: number) => {
}
return undefined;
- }, [fetchedVehicles]);
+ }, [allVehiclesFromInventory]);
return {
handleSaveVehicle,
- powerUnitSubTypes,
- trailerSubTypes,
- vehicleOptions: fetchedVehicles,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ allVehiclesFromInventory,
};
};
diff --git a/frontend/src/features/permits/hooks/usePermitVehicles.ts b/frontend/src/features/permits/hooks/usePermitVehicles.ts
new file mode 100644
index 000000000..151c26836
--- /dev/null
+++ b/frontend/src/features/permits/hooks/usePermitVehicles.ts
@@ -0,0 +1,185 @@
+import { useEffect, useMemo } from "react";
+import { Policy } from "onroute-policy-engine";
+
+import { PermitType } from "../types/PermitType";
+import { PermitVehicleDetails } from "../types/PermitVehicleDetails";
+import { getUpdatedVehicleDetailsForLOAs } from "../helpers/permitLOA";
+import { PermitLOA } from "../types/PermitLOA";
+import { getEligibleSubtypeOptions } from "../helpers/vehicles/subtypes/getEligibleSubtypeOptions";
+import { Nullable } from "../../../common/types/common";
+import { getEligibleVehicleSubtypes } from "../helpers/vehicles/subtypes/getEligibleVehicleSubtypes";
+import { isPermitVehicleWithinGvwLimit } from "../helpers/vehicles/rules/gvw";
+import {
+ PowerUnit,
+ Trailer,
+ VEHICLE_TYPES,
+} from "../../manageVehicles/types/Vehicle";
+
+export const usePermitVehicles = (
+ data: {
+ policyEngine: Policy;
+ permitType: PermitType;
+ isLcvDesignated: boolean;
+ vehicleFormData: PermitVehicleDetails;
+ allVehiclesFromInventory: (PowerUnit | Trailer)[];
+ selectedLOAs: PermitLOA[];
+ powerUnitSubtypeNamesMap: Map;
+ trailerSubtypeNamesMap: Map;
+ onClearVehicle: () => void;
+ selectedCommodity?: Nullable;
+ },
+) => {
+ const {
+ policyEngine,
+ permitType,
+ isLcvDesignated,
+ vehicleFormData,
+ allVehiclesFromInventory,
+ selectedLOAs,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ onClearVehicle,
+ selectedCommodity,
+ } = data;
+
+ const eligibleVehicleSubtypes = useMemo(() => {
+ return getEligibleVehicleSubtypes(
+ permitType,
+ isLcvDesignated,
+ selectedCommodity,
+ policyEngine,
+ );
+ }, [
+ policyEngine,
+ permitType,
+ isLcvDesignated,
+ selectedCommodity,
+ ]);
+
+ // Check to see if vehicle details is still valid after LOA has been deselected
+ const {
+ updatedVehicle,
+ filteredVehicleOptions,
+ } = useMemo(() => {
+ return getUpdatedVehicleDetailsForLOAs(
+ selectedLOAs,
+ allVehiclesFromInventory,
+ vehicleFormData,
+ eligibleVehicleSubtypes,
+ [
+ (v) => v.vehicleType !== VEHICLE_TYPES.POWER_UNIT
+ || isPermitVehicleWithinGvwLimit(
+ permitType,
+ VEHICLE_TYPES.POWER_UNIT,
+ (v as PowerUnit).licensedGvw,
+ ),
+ ],
+ );
+ }, [
+ selectedLOAs,
+ allVehiclesFromInventory,
+ vehicleFormData,
+ eligibleVehicleSubtypes,
+ permitType,
+ ]);
+
+ const vehicleIdInForm = vehicleFormData.vehicleId;
+ const updatedVehicleId = updatedVehicle.vehicleId;
+ useEffect(() => {
+ // If vehicle originally selected exists but the updated vehicle is cleared, clear the vehicle
+ if (vehicleIdInForm && !updatedVehicleId) {
+ onClearVehicle();
+ }
+ }, [
+ vehicleIdInForm,
+ updatedVehicleId,
+ ]);
+
+ // Get vehicle subtypes that are allowed by LOAs
+ const vehicleType = vehicleFormData.vehicleType;
+ const {
+ subtypeOptions,
+ isSelectedLOAVehicle,
+ } = useMemo(() => {
+ const allowedLOAPowerUnitIds = new Set([
+ ...selectedLOAs.map(loa => loa.powerUnits)
+ .reduce((prevPowerUnits, currPowerUnits) => [
+ ...prevPowerUnits,
+ ...currPowerUnits,
+ ], []),
+ ]);
+
+ const allowedLOATrailerIds = new Set([
+ ...selectedLOAs.map(loa => loa.trailers)
+ .reduce((prevTrailers, currTrailers) => [
+ ...prevTrailers,
+ ...currTrailers,
+ ], []),
+ ]);
+
+ // Try to find all of the unfiltered vehicles in the inventory, and get a list of their subtypes
+ // as some of these unfiltered subtypes can potentially be used by a selected LOA
+ const powerUnitsInInventory = allVehiclesFromInventory
+ .filter(vehicle => vehicle.vehicleType === VEHICLE_TYPES.POWER_UNIT) as PowerUnit[];
+
+ const trailersInInventory = allVehiclesFromInventory
+ .filter(vehicle => vehicle.vehicleType === VEHICLE_TYPES.TRAILER) as Trailer[];
+
+ const allowedLOASubtypes = new Set([
+ ...powerUnitsInInventory
+ .filter(powerUnit => allowedLOAPowerUnitIds.has(powerUnit.powerUnitId as string))
+ .map(powerUnit => powerUnit.powerUnitTypeCode),
+ ...trailersInInventory
+ .filter(trailer => allowedLOATrailerIds.has(trailer.trailerId as string))
+ .map(trailer => trailer.trailerTypeCode),
+ ]);
+
+ // Check if selected vehicle is an LOA vehicle
+ const isSelectedLOAVehicle = Boolean(vehicleIdInForm)
+ && (
+ allowedLOAPowerUnitIds.has(vehicleIdInForm as string)
+ || allowedLOATrailerIds.has(vehicleIdInForm as string)
+ )
+ && (
+ powerUnitsInInventory.map(powerUnit => powerUnit.powerUnitId)
+ .includes(vehicleIdInForm as string)
+ || trailersInInventory.map(trailer => trailer.trailerId)
+ .includes(vehicleIdInForm as string)
+ );
+
+ const subtypeOptions = getEligibleSubtypeOptions(
+ [...powerUnitSubtypeNamesMap.entries()].map(([typeCode, type]) => ({
+ type,
+ typeCode,
+ description: "",
+ })),
+ [...trailerSubtypeNamesMap.entries()].map(([typeCode, type]) => ({
+ type,
+ typeCode,
+ description: "",
+ })),
+ eligibleVehicleSubtypes,
+ allowedLOASubtypes,
+ vehicleType,
+ );
+
+ return {
+ subtypeOptions,
+ isSelectedLOAVehicle,
+ };
+ }, [
+ selectedLOAs,
+ allVehiclesFromInventory,
+ vehicleType,
+ vehicleIdInForm,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ eligibleVehicleSubtypes,
+ ]);
+
+ return {
+ filteredVehicleOptions,
+ subtypeOptions,
+ isSelectedLOAVehicle,
+ };
+};
diff --git a/frontend/src/features/permits/hooks/usePermittedCommodity.ts b/frontend/src/features/permits/hooks/usePermittedCommodity.ts
new file mode 100644
index 000000000..a749bb6a7
--- /dev/null
+++ b/frontend/src/features/permits/hooks/usePermittedCommodity.ts
@@ -0,0 +1,35 @@
+import { useCallback } from "react";
+import { Policy } from "onroute-policy-engine";
+
+import { PermitType } from "../types/PermitType";
+import { Nullable } from "../../../common/types/common";
+import { useCommodityOptions } from "./useCommodityOptions";
+
+export const usePermittedCommodity = (
+ policyEngine: Policy,
+ permitType: PermitType,
+ onSetCommodityType: (commodityType: string) => void,
+ onClearVehicle: () => void,
+ onClearVehicleConfig: (permitType: PermitType) => void,
+ selectedCommodityType?: Nullable,
+) => {
+ const { commodityOptions } = useCommodityOptions(policyEngine, permitType);
+
+ const onChangeCommodityType = useCallback((commodityType: string) => {
+ if (selectedCommodityType !== commodityType) {
+ onSetCommodityType(commodityType);
+ onClearVehicle();
+ onClearVehicleConfig(permitType);
+ }
+ }, [
+ onSetCommodityType,
+ onClearVehicleConfig,
+ selectedCommodityType,
+ permitType,
+ ]);
+
+ return {
+ commodityOptions,
+ onChangeCommodityType,
+ };
+};
diff --git a/frontend/src/features/permits/hooks/useVehicleConfiguration.ts b/frontend/src/features/permits/hooks/useVehicleConfiguration.ts
new file mode 100644
index 000000000..74e2dd903
--- /dev/null
+++ b/frontend/src/features/permits/hooks/useVehicleConfiguration.ts
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { Policy } from "onroute-policy-engine";
+
+import { PERMIT_TYPES, PermitType } from "../types/PermitType";
+import { VehicleInConfiguration } from "../types/PermitVehicleConfiguration";
+import { DEFAULT_COMMODITY_SELECT_VALUE } from "../constants/constants";
+
+export const useVehicleConfiguration = (
+ policyEngine: Policy,
+ permitType: PermitType,
+ selectedCommodity: string,
+ selectedSubtypes: string[],
+ selectedPowerUnitSubtype: string,
+ onUpdateVehicleConfigTrailers:
+ (updatedTrailerSubtypes: VehicleInConfiguration[]) => void,
+) => {
+ const getNextAllowedVehicleSubtypes = useCallback(
+ (selectedCommodity: string, selectedSubtypes: string[]) => {
+ const nextAllowedSubtypes = policyEngine.getNextPermittableVehicles(
+ permitType,
+ selectedCommodity,
+ selectedSubtypes,
+ );
+
+ return [...nextAllowedSubtypes.entries()]
+ .map(([subtypeCode, subtypeFullName]) => ({
+ value: subtypeCode,
+ label: subtypeFullName,
+ }));
+ },
+ [policyEngine, permitType],
+ );
+
+ useEffect(() => {
+ if (permitType === PERMIT_TYPES.STOS && selectedSubtypes.length > 0) {
+ if ((selectedCommodity === DEFAULT_COMMODITY_SELECT_VALUE) || !policyEngine.isConfigurationValid(
+ permitType,
+ selectedCommodity,
+ [selectedPowerUnitSubtype, ...selectedSubtypes],
+ true,
+ )) {
+ onUpdateVehicleConfigTrailers([]);
+ }
+ }
+ }, [
+ permitType,
+ policyEngine,
+ selectedCommodity,
+ selectedPowerUnitSubtype,
+ selectedSubtypes,
+ onUpdateVehicleConfigTrailers,
+ ]);
+
+ const nextAllowedSubtypes = useMemo(() => {
+ if ((permitType !== PERMIT_TYPES.STOS)
+ || !selectedCommodity
+ || !selectedPowerUnitSubtype
+ || (selectedCommodity === DEFAULT_COMMODITY_SELECT_VALUE)
+ ) {
+ return [];
+ }
+
+ const nextAllowed = getNextAllowedVehicleSubtypes(
+ selectedCommodity,
+ [selectedPowerUnitSubtype, ...selectedSubtypes],
+ ).filter(({ value }) => !selectedSubtypes.includes(value));
+
+ // Sort next allowed subtypes so that if the option "None" is present, it appears at the very beginning
+ const hasNoneOption = nextAllowed.find(subtypeOption => subtypeOption.value === "NONEXXX");
+ return hasNoneOption ? [
+ hasNoneOption,
+ ...nextAllowed.filter(({ value }) => value !== hasNoneOption.value),
+ ] : nextAllowed;
+ }, [
+ selectedCommodity,
+ selectedSubtypes,
+ selectedPowerUnitSubtype,
+ getNextAllowedVehicleSubtypes,
+ ]);
+
+ return {
+ nextAllowedSubtypes,
+ };
+};
diff --git a/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx b/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx
index 326c1e1d0..52677ecb1 100644
--- a/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx
+++ b/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx
@@ -1,6 +1,6 @@
-import { useContext, useMemo } from "react";
+import { useContext, useMemo, useState } from "react";
import { FieldValues, FormProvider } from "react-hook-form";
-import { useNavigate, useParams } from "react-router-dom";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
import "./AmendPermitForm.scss";
import { usePermitVehicleManagement } from "../../../hooks/usePermitVehicleManagement";
@@ -12,16 +12,21 @@ import { Application } from "../../../types/application";
import { useCompanyInfoDetailsQuery } from "../../../../manageProfile/apiManager/hooks";
import { Breadcrumb } from "../../../../../common/components/breadcrumb/Breadcrumb";
import { ApplicationFormContext } from "../../../context/ApplicationFormContext";
-import { Nullable } from "../../../../../common/types/common";
+import { isNull, isUndefined, Nullable } from "../../../../../common/types/common";
import { ERROR_ROUTES } from "../../../../../routes/constants";
import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../../../common/helpers/util";
import { PermitVehicleDetails } from "../../../types/PermitVehicleDetails";
-import { AmendPermitFormData } from "../types/AmendPermitFormData";
import { getDatetimes } from "./helpers/getDatetimes";
import { PAST_START_DATE_STATUSES } from "../../../../../common/components/form/subFormComponents/CustomDatePicker";
import { useFetchLOAs } from "../../../../settings/hooks/LOA";
import { useFetchSpecialAuthorizations } from "../../../../settings/hooks/specialAuthorizations";
import { filterLOAsForPermitType, filterNonExpiredLOAs } from "../../../helpers/permitLOA";
+import { usePolicyEngine } from "../../../../policy/hooks/usePolicyEngine";
+import { Loading } from "../../../../../common/pages/Loading";
+import { serializePermitVehicleDetails } from "../../../helpers/serialize/serializePermitVehicleDetails";
+import { serializeForUpdateApplication } from "../../../helpers/serialize/serializeApplication";
+import { requiredPowerUnit } from "../../../../../common/helpers/validationMessages";
+import { PERMIT_TYPES } from "../../../types/PermitType";
import {
dayjsToUtcStr,
now,
@@ -67,31 +72,27 @@ export const AmendPermitForm = () => {
const {
handleSaveVehicle,
- vehicleOptions,
- powerUnitSubTypes,
- trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
} = usePermitVehicleManagement(companyId);
+ const policyEngine = usePolicyEngine();
+
const {
initialFormData,
formData,
formMethods,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
- } = useAmendPermitForm(
- currentStepIndex === 0,
+ } = useAmendPermitForm({
+ repopulateFormData: currentStepIndex === 0,
isLcvDesignated,
companyLOAs,
- vehicleOptions,
+ inventoryVehicles: allVehiclesFromInventory,
companyInfo,
permit,
amendmentApplication,
- );
+ policyEngine,
+ });
const { createdDateTime, updatedDateTime } = getDatetimes(
amendmentApplication,
@@ -109,33 +110,56 @@ export const AmendPermitForm = () => {
formData.permitData.startDate,
);
- const amendPermitMutation = useAmendPermit(companyId);
- const modifyAmendmentMutation = useModifyAmendmentApplication();
+ const { mutateAsync: createAmendment } = useAmendPermit(companyId);
+ const { mutateAsync: modifyAmendment } = useModifyAmendmentApplication();
const snackBar = useContext(SnackBarContext);
const { handleSubmit } = formMethods;
- // Helper method to return form field values as an Permit object
- const transformPermitFormData = (data: FieldValues) => {
- return {
- ...data,
- permitData: {
- ...data.permitData,
- vehicleDetails: {
- ...data.permitData.vehicleDetails,
- // Convert year to number here, as React doesn't accept valueAsNumber prop for input component
- year: !isNaN(Number(data.permitData.vehicleDetails.year))
- ? Number(data.permitData.vehicleDetails.year)
- : data.permitData.vehicleDetails.year,
- },
- },
- } as AmendPermitFormData;
+ const [policyViolations, setPolicyViolations] = useState>({});
+
+ const clearViolation = (fieldReference: string) => {
+ if (fieldReference in policyViolations) {
+ const otherViolations = Object.entries(policyViolations)
+ .filter(([fieldRef]) => fieldRef !== fieldReference);
+
+ setPolicyViolations(Object.fromEntries(otherViolations));
+ }
+ };
+
+ const triggerPolicyValidation = async () => {
+ const validationResults = await policyEngine?.validate(
+ serializeForUpdateApplication(formData),
+ );
+
+ const violations = getDefaultRequiredVal(
+ [],
+ validationResults?.violations
+ .filter(({ fieldReference }) => Boolean(fieldReference))
+ .map(violation => ({
+ fieldReference: violation.fieldReference as string,
+ message: violation.message,
+ })),
+ ).concat(formData.permitType === PERMIT_TYPES.STOS && !formData.permitData.vehicleDetails.vin ? [
+ { fieldReference: "permitData.vehicleDetails", message: requiredPowerUnit() },
+ ] : []);
+
+ const updatedViolations = Object.fromEntries(
+ violations.map(({ fieldReference, message }) => [fieldReference, message]),
+ );
+
+ setPolicyViolations(updatedViolations);
+ return updatedViolations;
};
// When "Continue" button is clicked
const onContinue = async (data: FieldValues) => {
- const permitToBeAmended = transformPermitFormData(data);
- const vehicleData = permitToBeAmended.permitData.vehicleDetails;
+ const updatedViolations = await triggerPolicyValidation();
+ if (Object.keys(updatedViolations).length > 0) {
+ return;
+ }
+
+ const vehicleData = serializePermitVehicleDetails(data.permitData.vehicleDetails);
const savedVehicle = await handleSaveVehicle(vehicleData);
// Save application before continuing
@@ -161,34 +185,28 @@ export const AmendPermitForm = () => {
additionalSuccessAction?: () => void,
savedVehicleInventoryDetails?: Nullable,
) => {
- if (
- !savedVehicleInventoryDetails &&
- typeof savedVehicleInventoryDetails !== "undefined"
- ) {
- // save vehicle to inventory failed (result is null), go to unexpected error page
+ if (isNull(savedVehicleInventoryDetails)) {
return onSaveFailure();
}
- const permitToBeAmended = transformPermitFormData(
- !savedVehicleInventoryDetails
- ? formData
- : {
- ...formData,
- permitData: {
- ...formData.permitData,
- vehicleDetails: {
- ...savedVehicleInventoryDetails,
- saveVehicle: true,
- },
+ const permitToBeAmended = !savedVehicleInventoryDetails
+ ? formData
+ : {
+ ...formData,
+ permitData: {
+ ...formData.permitData,
+ vehicleDetails: {
+ ...savedVehicleInventoryDetails,
+ saveVehicle: true,
},
},
- );
+ };
const shouldUpdateApplication =
permitToBeAmended.permitId !== permit?.permitId;
const response = shouldUpdateApplication
- ? await modifyAmendmentMutation.mutateAsync({
+ ? await modifyAmendment({
applicationId: getDefaultRequiredVal(
"",
permitToBeAmended.permitId,
@@ -196,7 +214,7 @@ export const AmendPermitForm = () => {
application: permitToBeAmended,
companyId,
})
- : await amendPermitMutation.mutateAsync(permitToBeAmended);
+ : await createAmendment(permitToBeAmended);
if (response.application) {
onSaveSuccess(response.application);
@@ -230,10 +248,11 @@ export const AmendPermitForm = () => {
const applicationFormContextData = useMemo(() => ({
initialFormData,
formData,
+ policyEngine,
durationOptions,
- vehicleOptions,
- powerUnitSubtypes: powerUnitSubTypes,
- trailerSubtypes: trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
isLcvDesignated,
feature: FEATURE,
companyInfo,
@@ -243,41 +262,37 @@ export const AmendPermitForm = () => {
pastStartDateStatus: PAST_START_DATE_STATUSES.WARNING,
companyLOAs: applicableLOAs,
revisionHistory,
+ policyViolations,
onLeave: undefined,
onSave: undefined,
onCancel: goHome,
onContinue: handleSubmit(onContinue),
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
+ triggerPolicyValidation,
+ clearViolation,
}), [
initialFormData,
formData,
+ policyEngine,
durationOptions,
- vehicleOptions,
- powerUnitSubTypes,
- trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
isLcvDesignated,
companyInfo,
createdDateTime,
updatedDateTime,
applicableLOAs,
revisionHistory,
+ policyViolations,
goHome,
onContinue,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
+ triggerPolicyValidation,
+ clearViolation,
]);
+ if (isUndefined(policyEngine)) return
diff --git a/frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx b/frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx
index 91a08b3b3..4ec5c4dad 100644
--- a/frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx
+++ b/frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx
@@ -17,6 +17,8 @@ import { DEFAULT_PERMIT_TYPE } from "../../../types/PermitType";
import { usePowerUnitSubTypesQuery } from "../../../../manageVehicles/hooks/powerUnits";
import { useTrailerSubTypesQuery } from "../../../../manageVehicles/hooks/trailers";
import { PERMIT_REVIEW_CONTEXTS } from "../../../types/PermitReviewContext";
+import { usePolicyEngine } from "../../../../policy/hooks/usePolicyEngine";
+import { useCommodityOptions } from "../../../hooks/useCommodityOptions";
import {
applyWhenNotNullable,
getDefaultRequiredVal,
@@ -52,6 +54,14 @@ export const AmendPermitReview = () => {
const { data: companyInfo } = useCompanyInfoDetailsQuery(companyId);
const doingBusinessAs = companyInfo?.alternateName;
+ const permitType = getDefaultRequiredVal(
+ DEFAULT_PERMIT_TYPE,
+ amendmentApplication?.permitType,
+ permit?.permitType,
+ );
+
+ const policyEngine = usePolicyEngine();
+ const { commodityOptions } = useCommodityOptions(policyEngine, permitType);
const powerUnitSubTypesQuery = usePowerUnitSubTypesQuery();
const trailerSubTypesQuery = useTrailerSubTypesQuery();
@@ -105,11 +115,7 @@ export const AmendPermitReview = () => {
0,
amendmentApplication?.permitData?.permitDuration,
),
- getDefaultRequiredVal(
- DEFAULT_PERMIT_TYPE,
- amendmentApplication?.permitType,
- permit?.permitType,
- ),
+ permitType,
);
return (
@@ -118,7 +124,7 @@ export const AmendPermitReview = () => {
{
permitDuration={amendmentApplication?.permitData?.permitDuration}
permitExpiryDate={amendmentApplication?.permitData?.expiryDate}
permitConditions={amendmentApplication?.permitData?.commodities}
+ permittedCommodity={amendmentApplication?.permitData?.permittedCommodity}
+ commodityOptions={commodityOptions}
createdDateTime={createdDateTime}
updatedDateTime={updatedDateTime}
companyInfo={companyInfo}
@@ -142,6 +150,9 @@ export const AmendPermitReview = () => {
vehicleWasSaved={
amendmentApplication?.permitData?.vehicleDetails?.saveVehicle
}
+ vehicleConfiguration={amendmentApplication?.permitData?.vehicleConfiguration}
+ route={amendmentApplication?.permitData?.permittedRoute}
+ applicationNotes={amendmentApplication?.permitData?.applicationNotes}
showChangedFields={true}
oldFields={{
...oldFields,
@@ -161,6 +172,7 @@ export const AmendPermitReview = () => {
calculatedFee={`${amountToRefund}`}
doingBusinessAs={doingBusinessAs}
loas={amendmentApplication?.permitData?.loas}
+ isStaffUser={true}
>
{amendmentApplication?.comment ? (
,
- permit?: Nullable,
- amendmentApplication?: Nullable,
+ data: {
+ repopulateFormData: boolean;
+ isLcvDesignated: boolean;
+ companyLOAs: LOADetail[];
+ inventoryVehicles: (PowerUnit | Trailer)[];
+ companyInfo: Nullable;
+ permit?: Nullable;
+ amendmentApplication?: Nullable;
+ policyEngine?: Nullable;
+ },
) => {
+ 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) {
- const ineligibleSubtypes = getIneligibleSubtypes(
+ const eligibleSubtypes = getEligibleVehicleSubtypes(
amendmentApplication.permitType,
isLcvDesignated,
+ amendmentApplication.permitData.permittedCommodity?.commodityType,
+ policyEngine,
);
- const ineligiblePowerUnitSubtypes= ineligibleSubtypes.ineligiblePowerUnitSubtypes
- .map(({ typeCode }) => typeCode);
-
- const ineligibleTrailerSubtypes = ineligibleSubtypes.ineligibleTrailerSubtypes
- .map(({ typeCode }) => typeCode);
-
return applyUpToDateLOAsToApplication(
applyLCVToApplicationData(
getDefaultFormDataFromApplication(
@@ -54,8 +61,7 @@ export const useAmendPermitForm = (
),
companyLOAs,
inventoryVehicles,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
+ eligibleSubtypes,
);
}
@@ -72,16 +78,12 @@ export const useAmendPermitForm = (
),
);
- const ineligibleSubtypes = getIneligibleSubtypes(
+ const eligibleSubtypes = getEligibleVehicleSubtypes(
defaultPermitFormData.permitType,
isLcvDesignated,
+ defaultPermitFormData.permitData.permittedCommodity?.commodityType,
+ policyEngine,
);
-
- const ineligiblePowerUnitSubtypes= ineligibleSubtypes.ineligiblePowerUnitSubtypes
- .map(({ typeCode }) => typeCode);
-
- const ineligibleTrailerSubtypes = ineligibleSubtypes.ineligibleTrailerSubtypes
- .map(({ typeCode }) => typeCode);
return applyUpToDateLOAsToApplication(
applyLCVToApplicationData(
@@ -90,8 +92,7 @@ export const useAmendPermitForm = (
),
companyLOAs,
inventoryVehicles,
- ineligiblePowerUnitSubtypes,
- ineligibleTrailerSubtypes,
+ eligibleSubtypes,
);
}, [
amendmentApplication,
@@ -101,64 +102,25 @@ export const useAmendPermitForm = (
isLcvDesignated,
companyLOAs,
inventoryVehicles,
+ policyEngine,
]);
// Register default values with react-hook-form
const formMethods = useForm({
defaultValues: defaultFormData,
- reValidateMode: "onBlur",
+ reValidateMode: "onChange",
});
- const { reset, watch, setValue } = formMethods;
+ const { reset, watch } = formMethods;
const formData = watch();
useEffect(() => {
reset(defaultFormData);
}, [defaultFormData]);
- const onSetDuration = useCallback((duration: number) => {
- setValue("permitData.permitDuration", duration);
- }, [setValue]);
-
- const onSetExpiryDate = useCallback((expiry: Dayjs) => {
- setValue("permitData.expiryDate", dayjs(expiry));
- }, [setValue]);
-
- const onSetConditions = useCallback((conditions: PermitCondition[]) => {
- setValue("permitData.commodities", [...conditions]);
- }, [setValue]);
-
- const onToggleSaveVehicle = useCallback((saveVehicle: boolean) => {
- setValue("permitData.vehicleDetails.saveVehicle", saveVehicle);
- }, [setValue]);
-
- const onSetVehicle = useCallback((vehicleDetails: PermitVehicleDetails) => {
- setValue("permitData.vehicleDetails", {
- ...vehicleDetails,
- });
- }, [setValue]);
-
- const onClearVehicle = useCallback((saveVehicle: boolean) => {
- setValue("permitData.vehicleDetails", {
- ...EMPTY_VEHICLE_DETAILS,
- saveVehicle,
- });
- }, [setValue]);
-
- const onUpdateLOAs = useCallback((updatedLOAs: PermitLOA[]) => {
- setValue("permitData.loas", updatedLOAs);
- }, [setValue]);
-
return {
initialFormData: defaultFormData,
formData,
formMethods,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
};
};
diff --git a/frontend/src/features/permits/pages/Application/ApplicationForm.tsx b/frontend/src/features/permits/pages/Application/ApplicationForm.tsx
index 4e91f7dad..57f994343 100644
--- a/frontend/src/features/permits/pages/Application/ApplicationForm.tsx
+++ b/frontend/src/features/permits/pages/Application/ApplicationForm.tsx
@@ -1,7 +1,8 @@
-import { FieldValues, FormProvider } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { FormProvider } from "react-hook-form";
+import { Navigate, useNavigate } from "react-router-dom";
import { useContext, useMemo, useState } from "react";
import dayjs from "dayjs";
+import { isAxiosError } from "axios";
import "./ApplicationForm.scss";
import { Application, ApplicationFormData } from "../../types/application";
@@ -10,22 +11,31 @@ import { ApplicationBreadcrumb } from "../../components/application-breadcrumb/A
import { useSaveApplicationMutation } from "../../hooks/hooks";
import { SnackBarContext } from "../../../../App";
import { LeaveApplicationDialog } from "../../components/dialog/LeaveApplicationDialog";
-import { areApplicationDataEqual } from "../../helpers/equality";
-import { useInitApplicationFormData } from "../../hooks/useInitApplicationFormData";
+import { areApplicationPermitDataEqual } from "../../helpers/equality";
+import { useInitApplicationFormData } from "../../hooks/form/useInitApplicationFormData";
import OnRouteBCContext from "../../../../common/authentication/OnRouteBCContext";
import { PermitForm } from "./components/form/PermitForm";
import { usePermitVehicleManagement } from "../../hooks/usePermitVehicleManagement";
-import { useCompanyInfoQuery } from "../../../manageProfile/apiManager/hooks";
-import { Nullable } from "../../../../common/types/common";
+import { useCompanyInfoDetailsQuery } from "../../../manageProfile/apiManager/hooks";
+import { isNull, isUndefined, Nullable } from "../../../../common/types/common";
import { PermitType } from "../../types/PermitType";
import { PermitVehicleDetails } from "../../types/PermitVehicleDetails";
import { durationOptionsForPermitType } from "../../helpers/dateSelection";
-import { getCompanyIdFromSession } from "../../../../common/apiManager/httpRequestHandler";
import { PAST_START_DATE_STATUSES } from "../../../../common/components/form/subFormComponents/CustomDatePicker";
import { useFetchLOAs } from "../../../settings/hooks/LOA";
import { useFetchSpecialAuthorizations } from "../../../settings/hooks/specialAuthorizations";
import { ApplicationFormContext } from "../../context/ApplicationFormContext";
import { filterLOAsForPermitType, filterNonExpiredLOAs } from "../../helpers/permitLOA";
+import { usePolicyEngine } from "../../../policy/hooks/usePolicyEngine";
+import { Loading } from "../../../../common/pages/Loading";
+import { serializePermitVehicleDetails } from "../../helpers/serialize/serializePermitVehicleDetails";
+import { serializePermitData } from "../../helpers/serialize/serializePermitData";
+import { deserializeApplicationResponse } from "../../helpers/serialize/deserializeApplication";
+import {
+ serializeForCreateApplication,
+ serializeForUpdateApplication,
+} from "../../helpers/serialize/serializeApplication";
+
import {
applyWhenNotNullable,
getDefaultRequiredVal,
@@ -43,29 +53,23 @@ const FEATURE = "application";
* The first step in creating or saving an Application.
* @returns A form component for users to save an Application
*/
-export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
+export const ApplicationForm = ({
+ permitType,
+ companyId,
+}: {
+ permitType: PermitType;
+ companyId: number;
+}) => {
// Context to hold all of the application data related to the application
const applicationContext = useContext(ApplicationContext);
const {
- companyId: companyIdFromContext,
- companyLegalName,
userDetails,
- onRouteBCClientNumber,
idirUserDetails,
} = useContext(OnRouteBCContext);
const isStaffUser = Boolean(idirUserDetails?.userRole);
- const companyInfoQuery = useCompanyInfoQuery();
- const companyInfo = companyInfoQuery.data;
-
- // Company id should be set by context, otherwise default to companyId in session and then the fetched companyId
- const companyId: number = getDefaultRequiredVal(
- 0,
- companyIdFromContext,
- applyWhenNotNullable(id => Number(id), getCompanyIdFromSession()),
- companyInfo?.companyId,
- );
+ const { data: companyInfo } = useCompanyInfoDetailsQuery(companyId);
const { data: activeLOAs } = useFetchLOAs(companyId, false);
const companyLOAs = useMemo(() => getDefaultRequiredVal(
@@ -78,11 +82,13 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
const {
handleSaveVehicle,
- vehicleOptions,
- powerUnitSubTypes,
- trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
} = usePermitVehicleManagement(companyId);
+ const policyEngine = usePolicyEngine();
+
// Use a custom hook that performs the following whenever page is rendered (or when application context is updated/changed):
// 1. Get all data needed to initialize the application form (from application context, company, user details)
// 2. Generate those default values and register them to the form
@@ -92,22 +98,16 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
initialFormData,
currentFormData,
formMethods,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
- } = useInitApplicationFormData(
+ } = useInitApplicationFormData({
permitType,
isLcvDesignated,
companyLOAs,
- vehicleOptions,
+ inventoryVehicles: allVehiclesFromInventory,
companyInfo,
- applicationContext?.applicationData,
+ applicationData: applicationContext?.applicationData,
userDetails,
- );
+ policyEngine,
+ });
// Applicable LOAs must be:
// 1. Applicable for the current permit type
@@ -130,7 +130,7 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
applicationContext?.applicationData?.updatedDateTime,
);
- const saveApplicationMutation = useSaveApplicationMutation();
+ const { mutateAsync: saveApplication } = useSaveApplicationMutation();
const snackBar = useContext(SnackBarContext);
// Show leave application dialog
@@ -141,42 +141,59 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
const navigate = useNavigate();
- // Helper method to format form values to Application objects before saving them
- const formattedFormData = (data: FieldValues) => {
- return {
- ...data,
- applicationNumber: applicationContext.applicationData?.applicationNumber,
- permitData: {
- ...data.permitData,
- companyName: companyLegalName,
- clientNumber: onRouteBCClientNumber,
- vehicleDetails: {
- ...data.permitData.vehicleDetails,
- // Convert year to number here, as React doesn't accept valueAsNumber prop for input component
- year: !isNaN(Number(data.permitData.vehicleDetails.year))
- ? Number(data.permitData.vehicleDetails.year)
- : data.permitData.vehicleDetails.year,
- },
- },
- } as ApplicationFormData;
+ const [policyViolations, setPolicyViolations] = useState>({});
+
+ const clearViolation = (fieldReference: string) => {
+ if (fieldReference in policyViolations) {
+ const otherViolations = Object.entries(policyViolations)
+ .filter(([fieldRef]) => fieldRef !== fieldReference);
+
+ setPolicyViolations(Object.fromEntries(otherViolations));
+ }
+ };
+
+ const triggerPolicyValidation = async () => {
+ const validationResults = await policyEngine?.validate(
+ currentFormData.permitId
+ ? serializeForUpdateApplication(currentFormData)
+ : serializeForCreateApplication(currentFormData),
+ );
+
+ const violations = getDefaultRequiredVal(
+ [],
+ validationResults?.violations
+ .filter(({ fieldReference }) => Boolean(fieldReference))
+ .map(violation => ({
+ fieldReference: violation.fieldReference as string,
+ message: violation.message,
+ })),
+ );
+
+ const updatedViolations = Object.fromEntries(
+ violations.map(({ fieldReference, message }) => [fieldReference, message]),
+ );
+
+ setPolicyViolations(updatedViolations);
+ return updatedViolations;
};
// Check to see if all application values were already saved
const isApplicationSaved = () => {
- const currentFormattedFormData = formattedFormData(currentFormData);
- const savedData = formattedFormData(initialFormData);
-
// Check if all current form field values match field values already saved in application context
- return areApplicationDataEqual(
- currentFormattedFormData.permitData,
- savedData.permitData,
+ return areApplicationPermitDataEqual(
+ serializePermitData(currentFormData.permitData),
+ serializePermitData(initialFormData.permitData),
);
};
// When "Continue" button is clicked
- const onContinue = async (data: FieldValues) => {
- const applicationToBeSaved = formattedFormData(data);
- const vehicleData = applicationToBeSaved.permitData.vehicleDetails;
+ const onContinue = async (data: ApplicationFormData) => {
+ const updatedViolations = await triggerPolicyValidation();
+ if (Object.keys(updatedViolations).length > 0) {
+ return;
+ }
+
+ const vehicleData = serializePermitVehicleDetails(data.permitData.vehicleDetails);
const savedVehicleDetails = await handleSaveVehicle(vehicleData);
// Save application before continuing
@@ -200,50 +217,50 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
return getDefaultRequiredVal("", savedApplication.permitId);
};
- const onSaveFailure = () => {
- navigate(ERROR_ROUTES.UNEXPECTED);
- };
-
// Whenever application is to be saved (either through "Save" or "Continue")
const onSaveApplication = async (
additionalSuccessAction?: (permitId: string) => void,
savedVehicleInventoryDetails?: Nullable,
) => {
- if (
- !savedVehicleInventoryDetails &&
- typeof savedVehicleInventoryDetails !== "undefined"
- ) {
- // save vehicle to inventory failed (result is null), go to unexpected error page
- return onSaveFailure();
+ if (isNull(savedVehicleInventoryDetails)) {
+ return navigate(ERROR_ROUTES.UNEXPECTED);
}
- const applicationToBeSaved = formattedFormData(
- !savedVehicleInventoryDetails
- ? currentFormData
- : {
- ...currentFormData,
- permitData: {
- ...currentFormData.permitData,
- vehicleDetails: {
- ...savedVehicleInventoryDetails,
- saveVehicle: true,
- },
+ const applicationToBeSaved = !savedVehicleInventoryDetails
+ ? currentFormData
+ : {
+ ...currentFormData,
+ permitData: {
+ ...currentFormData.permitData,
+ vehicleDetails: {
+ ...savedVehicleInventoryDetails,
+ saveVehicle: true,
},
},
- );
-
- const { application: savedApplication, status } =
- await saveApplicationMutation.mutateAsync({
- data: applicationToBeSaved,
- companyId,
- });
-
- if (savedApplication) {
- const savedPermitId = onSaveSuccess(savedApplication, status);
- additionalSuccessAction?.(savedPermitId);
- } else {
- onSaveFailure();
- }
+ };
+
+ await saveApplication({
+ data: applicationToBeSaved,
+ companyId,
+ }, {
+ onSuccess: ({ data, status }) => {
+ const savedApplication = deserializeApplicationResponse(data);
+ const savedPermitId = onSaveSuccess(savedApplication, status);
+ additionalSuccessAction?.(savedPermitId);
+ },
+ onError: (e) => {
+ console.error(e);
+ if (isAxiosError(e)) {
+ navigate(ERROR_ROUTES.UNEXPECTED, {
+ state: {
+ correlationId: e?.response?.headers["x-correlation-id"],
+ },
+ });
+ } else {
+ navigate(ERROR_ROUTES.UNEXPECTED);
+ }
+ },
+ });
};
const onSave = async () => {
@@ -277,10 +294,11 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
const applicationFormContextData = useMemo(() => ({
initialFormData,
formData: currentFormData,
+ policyEngine,
durationOptions,
- vehicleOptions,
- powerUnitSubtypes: powerUnitSubTypes,
- trailerSubtypes: trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
isLcvDesignated,
feature: FEATURE,
companyInfo,
@@ -290,42 +308,38 @@ export const ApplicationForm = ({ permitType }: { permitType: PermitType }) => {
pastStartDateStatus,
companyLOAs: applicableLOAs,
revisionHistory: [],
+ policyViolations,
+ clearViolation,
+ triggerPolicyValidation,
onLeave: handleLeaveApplication,
onSave,
onCancel: undefined,
onContinue: handleSubmit(onContinue),
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
}), [
initialFormData,
currentFormData,
+ policyEngine,
durationOptions,
- vehicleOptions,
- powerUnitSubTypes,
- trailerSubTypes,
+ allVehiclesFromInventory,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
isLcvDesignated,
companyInfo,
createdDateTime,
updatedDateTime,
pastStartDateStatus,
applicableLOAs,
+ policyViolations,
+ clearViolation,
+ triggerPolicyValidation,
handleLeaveApplication,
onSave,
onContinue,
- onSetDuration,
- onSetExpiryDate,
- onSetConditions,
- onToggleSaveVehicle,
- onSetVehicle,
- onClearVehicle,
- onUpdateLOAs,
]);
+ if (isUndefined(policyEngine)) return
diff --git a/frontend/src/features/permits/pages/Application/ApplicationReview.tsx b/frontend/src/features/permits/pages/Application/ApplicationReview.tsx
index 1c7f78249..715c490ee 100644
--- a/frontend/src/features/permits/pages/Application/ApplicationReview.tsx
+++ b/frontend/src/features/permits/pages/Application/ApplicationReview.tsx
@@ -1,13 +1,14 @@
import { useContext, useEffect, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useNavigate, useParams } from "react-router-dom";
+import { isAxiosError } from "axios";
import "./ApplicationReview.scss";
import { ApplicationContext } from "../../context/ApplicationContext";
import { Application } from "../../types/application";
import { useSaveApplicationMutation } from "../../hooks/hooks";
import { ApplicationBreadcrumb } from "../../components/application-breadcrumb/ApplicationBreadcrumb";
-import { useCompanyInfoQuery } from "../../../manageProfile/apiManager/hooks";
+import { useCompanyInfoDetailsQuery } from "../../../manageProfile/apiManager/hooks";
import { PermitReview } from "./components/review/PermitReview";
import { getDefaultRequiredVal } from "../../../../common/helpers/util";
import { SnackBarContext } from "../../../../App";
@@ -18,30 +19,41 @@ import { usePowerUnitSubTypesQuery } from "../../../manageVehicles/hooks/powerUn
import { useTrailerSubTypesQuery } from "../../../manageVehicles/hooks/trailers";
import { useFetchSpecialAuthorizations } from "../../../settings/hooks/specialAuthorizations";
import { calculateFeeByDuration } from "../../helpers/feeSummary";
-import { DEFAULT_PERMIT_TYPE } from "../../types/PermitType";
+import { DEFAULT_PERMIT_TYPE, PERMIT_TYPES } from "../../types/PermitType";
import { PERMIT_REVIEW_CONTEXTS } from "../../types/PermitReviewContext";
+import { usePolicyEngine } from "../../../policy/hooks/usePolicyEngine";
+import { useCommodityOptions } from "../../hooks/useCommodityOptions";
+import { useSubmitApplicationForReview } from "../../../queue/hooks/hooks";
+import { deserializeApplicationResponse } from "../../helpers/serialize/deserializeApplication";
+import OnRouteBCContext from "../../../../common/authentication/OnRouteBCContext";
import {
APPLICATIONS_ROUTES,
APPLICATION_STEPS,
ERROR_ROUTES,
} from "../../../../routes/constants";
-export const ApplicationReview = () => {
+export const ApplicationReview = ({
+ companyId,
+}: {
+ companyId: number;
+}) => {
const { applicationData, setApplicationData: setApplicationContextData } =
useContext(ApplicationContext);
- const companyId = getDefaultRequiredVal(0, applicationData?.companyId);
+ const { idirUserDetails } = useContext(OnRouteBCContext);
+ const isStaffUser = Boolean(idirUserDetails?.userRole);
const { data: specialAuth } = useFetchSpecialAuthorizations(companyId);
const isNoFeePermitType = Boolean(specialAuth?.noFeeType);
- const { data: companyInfo } = useCompanyInfoQuery();
+ const { data: companyInfo } = useCompanyInfoDetailsQuery(companyId);
const doingBusinessAs = companyInfo?.alternateName;
+ const permitType = getDefaultRequiredVal(DEFAULT_PERMIT_TYPE, applicationData?.permitType);
const fee = isNoFeePermitType
? "0"
: `${calculateFeeByDuration(
- getDefaultRequiredVal(DEFAULT_PERMIT_TYPE, applicationData?.permitType),
+ permitType,
getDefaultRequiredVal(0, applicationData?.permitData?.permitDuration),
)}`;
@@ -53,6 +65,8 @@ export const ApplicationReview = () => {
const navigate = useNavigate();
+ const policyEngine = usePolicyEngine();
+ const { commodityOptions } = useCommodityOptions(policyEngine, permitType);
const powerUnitSubTypesQuery = usePowerUnitSubTypesQuery();
const trailerSubTypesQuery = useTrailerSubTypesQuery();
const methods = useForm
();
@@ -61,14 +75,67 @@ export const ApplicationReview = () => {
const [allConfirmed, setAllConfirmed] = useState(false);
const [hasAttemptedSubmission, setHasAttemptedSubmission] = useState(false);
- // Send data to the backend API
- const saveApplicationMutation = useSaveApplicationMutation();
+ const { mutateAsync: saveApplication } = useSaveApplicationMutation();
const addToCartMutation = useAddToCart();
+ // Submit for review (if applicable)
+ const {
+ mutateAsync: submitForReview,
+ } = useSubmitApplicationForReview();
+
const back = () => {
navigate(APPLICATIONS_ROUTES.DETAILS(permitId), { replace: true });
};
+ const handleSaveApplication = async (
+ followUpAction: (
+ companyId: number,
+ permitId: string,
+ applicationNumber: string,
+ ) => Promise,
+ ) => {
+ setHasAttemptedSubmission(true);
+
+ if (!allConfirmed) return;
+
+ const companyId = applicationData?.companyId;
+ const permitId = applicationData?.permitId;
+ const applicationNumber = applicationData?.applicationNumber;
+ if (!companyId || !permitId || !applicationNumber) {
+ return navigate(ERROR_ROUTES.UNEXPECTED);
+ }
+
+ await saveApplication({
+ data: {
+ ...applicationData,
+ permitData: {
+ ...applicationData.permitData,
+ doingBusinessAs, // always set most recent DBA from company info
+ },
+ },
+ companyId,
+ }, {
+ onSuccess: ({ data: savedApplication }) => {
+ setApplicationContextData(
+ deserializeApplicationResponse(savedApplication),
+ );
+ followUpAction(companyId, permitId, applicationNumber);
+ },
+ onError: (e) => {
+ console.error(e);
+ if (isAxiosError(e)) {
+ navigate(ERROR_ROUTES.UNEXPECTED, {
+ state: {
+ correlationId: e?.response?.headers["x-correlation-id"],
+ },
+ });
+ } else {
+ navigate(ERROR_ROUTES.UNEXPECTED);
+ }
+ },
+ });
+ };
+
const proceedWithAddToCart = async (
companyId: number,
applicationIds: string[],
@@ -86,37 +153,14 @@ export const ApplicationReview = () => {
}
};
- const handleAddToCart = async () => {
- setHasAttemptedSubmission(true);
-
- if (!allConfirmed) return;
-
- const companyId = applicationData?.companyId;
- const permitId = applicationData?.permitId;
- const applicationNumber = applicationData?.applicationNumber;
- if (!companyId || !permitId || !applicationNumber) {
- return navigate(ERROR_ROUTES.UNEXPECTED);
- }
-
- const { application: savedApplication } =
- await saveApplicationMutation.mutateAsync({
- data: {
- ...applicationData,
- permitData: {
- ...applicationData.permitData,
- doingBusinessAs, // always set most recent DBA from company info
- },
- },
- companyId,
- });
-
- if (savedApplication) {
- setApplicationContextData(savedApplication);
+ 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",
});
@@ -124,9 +168,36 @@ export const ApplicationReview = () => {
refetchCartCount();
navigate(APPLICATIONS_ROUTES.BASE);
});
- } else {
- navigate(ERROR_ROUTES.UNEXPECTED);
- }
+ });
+ };
+
+ const continueBtnText = permitType === PERMIT_TYPES.STOS && !isStaffUser
+ ? "Submit for Review" : undefined;
+
+ const handleSubmitForReview = async () => {
+ if (permitType !== PERMIT_TYPES.STOS) return;
+ if (isStaffUser) return;
+
+ await handleSaveApplication(async (companyId, permitId, applicationNumber) => {
+ await submitForReview({
+ companyId,
+ applicationId: permitId,
+ }, {
+ onSuccess: () => {
+ setSnackBar({
+ showSnackbar: true,
+ setShowSnackbar,
+ message: `Application ${applicationNumber} submitted for review`,
+ alertType: "success",
+ });
+
+ navigate(APPLICATIONS_ROUTES.BASE);
+ },
+ onError: () => {
+ navigate(ERROR_ROUTES.UNEXPECTED);
+ },
+ });
+ });
};
useEffect(() => {
@@ -143,7 +214,7 @@ export const ApplicationReview = () => {
{
permitDuration={applicationData?.permitData?.permitDuration}
permitExpiryDate={applicationData?.permitData?.expiryDate}
permitConditions={applicationData?.permitData?.commodities}
+ permittedCommodity={applicationData?.permitData?.permittedCommodity}
+ commodityOptions={commodityOptions}
createdDateTime={applicationData?.createdDateTime}
updatedDateTime={applicationData?.updatedDateTime}
companyInfo={companyInfo}
contactDetails={applicationData?.permitData?.contactDetails}
onEdit={back}
+ continueBtnText={continueBtnText}
+ onContinue={handleSubmitForReview}
onAddToCart={handleAddToCart}
allConfirmed={allConfirmed}
setAllConfirmed={setAllConfirmed}
@@ -166,10 +241,14 @@ export const ApplicationReview = () => {
vehicleWasSaved={
applicationData?.permitData?.vehicleDetails?.saveVehicle
}
+ vehicleConfiguration={applicationData?.permitData?.vehicleConfiguration}
+ route={applicationData?.permitData?.permittedRoute}
+ applicationNotes={applicationData?.permitData?.applicationNotes}
doingBusinessAs={doingBusinessAs}
calculatedFee={fee}
loas={applicationData?.permitData?.loas}
applicationRejectionHistory={applicationData?.rejectionHistory}
+ isStaffUser={isStaffUser}
/>
diff --git a/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.scss b/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.scss
new file mode 100644
index 000000000..67da064fc
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.scss
@@ -0,0 +1,25 @@
+@use "../../../../../../themes/orbcStyles";
+
+.power-unit-info-display {
+ display: grid;
+ grid-template-columns: repeat(4, [col] 1fr);
+ row-gap: 1rem;
+
+ & &__data {
+ max-width: 15.75rem;
+ margin-left: 1.5rem;
+
+ &--unit, &--year {
+ margin-left: 0;
+ }
+ }
+
+ & &__label {
+ font-weight: bold;
+ color: orbcStyles.$bc-black;
+ }
+
+ & &__value {
+ color: orbcStyles.$bc-black;
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.tsx b/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.tsx
new file mode 100644
index 000000000..7d71ff553
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/common/PowerUnitInfoDisplay.tsx
@@ -0,0 +1,102 @@
+import "./PowerUnitInfoDisplay.scss";
+import { countrySupportsProvinces } from "../../../../../../common/helpers/countries/countrySupportsProvinces";
+import { getCountryFullName } from "../../../../../../common/helpers/countries/getCountryFullName";
+import { getProvinceFullName } from "../../../../../../common/helpers/countries/getProvinceFullName";
+import { getDefaultRequiredVal } from "../../../../../../common/helpers/util";
+import { PermitVehicleDetails } from "../../../../types/PermitVehicleDetails";
+
+export const PowerUnitInfoDisplay = ({
+ powerUnitInfo,
+ powerUnitSubtypeNamesMap,
+}: {
+ powerUnitInfo: PermitVehicleDetails;
+ powerUnitSubtypeNamesMap: Map;
+}) => {
+ const provinceDisplay = countrySupportsProvinces(powerUnitInfo.countryCode)
+ ? getProvinceFullName(powerUnitInfo.countryCode, powerUnitInfo.provinceCode)
+ : getCountryFullName(powerUnitInfo.countryCode);
+
+ return (
+
+
+
+ Unit #
+
+
+
+ {powerUnitInfo.unitNumber ? powerUnitInfo.unitNumber : "-"}
+
+
+
+
+
+ VIN (last 6 digits)
+
+
+
+ {powerUnitInfo.vin}
+
+
+
+
+
+ Plate
+
+
+
+ {powerUnitInfo.plate}
+
+
+
+
+
+ Make
+
+
+
+ {powerUnitInfo.make}
+
+
+
+
+
+ Year
+
+
+
+ {powerUnitInfo.year}
+
+
+
+
+
+ Province / State
+
+
+
+ {provinceDisplay}
+
+
+
+
+
+ Vehicle Sub-type
+
+
+
+ {powerUnitSubtypeNamesMap.get(powerUnitInfo.vehicleSubType)}
+
+
+
+
+
+ Licensed GVW (kg)
+
+
+
+ {getDefaultRequiredVal(0, powerUnitInfo.licensedGVW).toLocaleString()}
+
+
+
+
+
+
+
+ Vehicle Sub-type
+
+
+
+
+
+ {selectedSubtypesDisplay.map((subtype) => (
+
+
+ {subtype}
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.tsx b/frontend/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.tsx
index c5de21fe7..3b6c68749 100644
--- a/frontend/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.tsx
+++ b/frontend/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.tsx
@@ -2,19 +2,23 @@ import { Box, Button, FormLabel, Menu, MenuItem, Tooltip } from "@mui/material";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { NestedMenuItem } from "mui-nested-menu";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+
+import "./StartApplicationAction.scss";
+import { useFeatureFlagsQuery } from "../../../../../../common/hooks/hooks";
import { APPLICATIONS_ROUTES } from "../../../../../../routes/constants";
+import { PERMIT_CATEGORIES } from "../../../../types/PermitCategory";
import {
ALL_PERMIT_TYPE_CHOOSE_FROM_OPTIONS,
PermitTypeChooseFromItem,
} from "../../../../constants/constants";
+
import {
EMPTY_PERMIT_TYPE_SELECT,
PermitType,
getFormattedPermitTypeName,
} from "../../../../types/PermitType";
-import "./StartApplicationAction.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
export const StartApplicationAction = () => {
const navigate = useNavigate();
@@ -24,6 +28,9 @@ export const StartApplicationAction = () => {
const [isError, setIsError] = useState(false);
+ const { data: featureFlags } = useFeatureFlagsQuery();
+ const enableSTOS = featureFlags?.["STOS"] === "ENABLED";
+
const handleChooseFrom = (
_event: React.MouseEvent,
item: PermitTypeChooseFromItem,
@@ -42,19 +49,21 @@ export const StartApplicationAction = () => {
};
// Update the structure of menuItems to ensure the callback is applied correctly
- const menuItems = ALL_PERMIT_TYPE_CHOOSE_FROM_OPTIONS.map(
- (item: PermitTypeChooseFromItem) => ({
- ...item,
- callback: (event: React.MouseEvent) =>
- handleChooseFrom(event, item),
- // Correctly set the nested item's callback
- items: item?.items?.map((nestedItem) => ({
- ...nestedItem,
+ const menuItems = ALL_PERMIT_TYPE_CHOOSE_FROM_OPTIONS
+ .filter(option => enableSTOS ? true : option.value !== PERMIT_CATEGORIES.SINGLE_TRIP)
+ .map(
+ (item: PermitTypeChooseFromItem) => ({
+ ...item,
callback: (event: React.MouseEvent) =>
- handleChooseFrom(event, nestedItem),
- })),
- }),
- );
+ handleChooseFrom(event, item),
+ // Correctly set the nested item's callback
+ items: item?.items?.map((nestedItem) => ({
+ ...nestedItem,
+ callback: (event: React.MouseEvent) =>
+ handleChooseFrom(event, nestedItem),
+ })),
+ }),
+ );
const [anchorEl, setAnchorEl] = useState();
const open = Boolean(anchorEl);
diff --git a/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.scss b/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.scss
new file mode 100644
index 000000000..5ccccf078
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.scss
@@ -0,0 +1,31 @@
+@use "../../../../../../themes/orbcStyles";
+
+@include orbcStyles.permit-main-box-style(".application-notes-section");
+@include orbcStyles.permit-left-box-style(".application-notes-section__header");
+@include orbcStyles.permit-right-box-style(".application-notes-section__body");
+
+.application-notes-section {
+ & &__input {
+ max-width: 43.125rem;
+
+ .custom-form-control {
+ margin: 1.5rem 0 0 0;
+ }
+ }
+
+ & &__info {
+ color: orbcStyles.$bc-black;
+
+ .application-notes-info {
+ &__details {
+ font-weight: normal;
+ font-size: 1rem;
+ margin: 0;
+
+ &--info {
+ margin-top: 0.5rem;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.tsx b/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.tsx
new file mode 100644
index 000000000..03bc32b59
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/ApplicationNotesSection.tsx
@@ -0,0 +1,57 @@
+import { Box } from "@mui/material"
+
+import "./ApplicationNotesSection.scss";
+import { CustomFormComponent } from "../../../../../../common/components/form/CustomFormComponents";
+import { PERMIT_TYPES, PermitType } from "../../../../types/PermitType";
+import { InfoBcGovBanner } from "../../../../../../common/components/banners/InfoBcGovBanner";
+import { BANNER_MESSAGES } from "../../../../../../common/constants/bannerMessages";
+
+export const ApplicationNotesSection = ({
+ feature,
+ permitType,
+}: {
+ feature: string;
+ permitType: PermitType;
+}) => {
+ return permitType === PERMIT_TYPES.STOS ? (
+
+
+
+ Application Notes
+
+
+
+
+
+
+ {BANNER_MESSAGES.APPLICATION_NOTES_EXAMPLE}
+
+
+
+ {BANNER_MESSAGES.APPLICATION_NOTES_INFO}
+
+
+ }
+ />
+
+
+
+
+
+
+
+ Change Commodity Type
+
+
+
+
+
+ Changing your commodity will require you to re-enter your vehicle information.
+
+
+
+
+
+ Cancel
+
+
+ onConfirm(newCommodityType as string)}
+ >
+ Continue
+
+
+
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.scss b/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.scss
new file mode 100644
index 000000000..35404ae36
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.scss
@@ -0,0 +1,20 @@
+@use "../../../../../../../themes/orbcStyles";
+
+@include orbcStyles.permit-main-box-style(".commodity-details-section");
+@include orbcStyles.permit-left-box-style(".commodity-details-section__header");
+@include orbcStyles.permit-right-box-style(".commodity-details-section__body");
+
+.commodity-details-section {
+ & &__input {
+ max-width: 30.625rem;
+
+ .custom-form-control {
+ margin: 1.5rem 0 0 0;
+ }
+
+ &--commodity-type {
+ margin: 0;
+ width: 100%;
+ }
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.tsx b/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.tsx
new file mode 100644
index 000000000..2ed069ce3
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/CommodityDetailsSection/CommodityDetailsSection.tsx
@@ -0,0 +1,135 @@
+import { Box, MenuItem } from "@mui/material"
+import { useCallback, useMemo, useState } from "react";
+
+import "./CommodityDetailsSection.scss";
+import { CustomFormComponent } from "../../../../../../../common/components/form/CustomFormComponents";
+import { requiredMessage } from "../../../../../../../common/helpers/validationMessages";
+import { PERMIT_TYPES, PermitType } from "../../../../../types/PermitType";
+import { Autocomplete } from "../../../../../../../common/components/form/subFormComponents/Autocomplete";
+import { Controller, useFormContext } from "react-hook-form";
+import { Nullable } from "../../../../../../../common/types/common";
+import { DEFAULT_COMMODITY_SELECT_OPTION, DEFAULT_COMMODITY_SELECT_VALUE } from "../../../../../constants/constants";
+import { getDefaultRequiredVal } from "../../../../../../../common/helpers/util";
+import { ApplicationFormData } from "../../../../../types/application";
+import { ChangeCommodityTypeDialog } from "./ChangeCommodityTypeDialog";
+
+export const CommodityDetailsSection = ({
+ feature,
+ permitType,
+ commodityOptions,
+ selectedCommodityType,
+ onChangeCommodityType,
+}: {
+ feature: string;
+ permitType: PermitType;
+ commodityOptions: {
+ value: string;
+ label: string;
+ }[];
+ selectedCommodityType?: Nullable;
+ onChangeCommodityType: (commodityType: string) => void;
+}) => {
+ const [newCommodityType, setNewCommodityType] = useState();
+
+ const selectedCommodityOption = useMemo(() => {
+ return getDefaultRequiredVal(
+ DEFAULT_COMMODITY_SELECT_OPTION,
+ commodityOptions.find(({ value }) => value === selectedCommodityType),
+ );
+ }, [selectedCommodityType, commodityOptions]);
+
+ const { trigger } = useFormContext();
+
+ const handleCloseDialog = () => {
+ setNewCommodityType(undefined);
+ };
+
+ const handleConfirmChangeCommodityType = (updatedCommodityType: string) => {
+ onChangeCommodityType(updatedCommodityType);
+ setNewCommodityType(undefined);
+ trigger("permitData.permittedCommodity.commodityType");
+ };
+
+ const handleCommodityTypeChange = useCallback((updatedCommodityType: string) => {
+ if (selectedCommodityType === updatedCommodityType) return;
+
+ if (selectedCommodityType !== DEFAULT_COMMODITY_SELECT_VALUE) {
+ setNewCommodityType(updatedCommodityType);
+ return;
+ }
+
+ handleConfirmChangeCommodityType(updatedCommodityType);
+ }, [selectedCommodityType]);
+
+ return permitType === PERMIT_TYPES.STOS ? (
+
+
+ Commodity Details
+
+
+
+ value !== DEFAULT_COMMODITY_SELECT_VALUE || requiredMessage(),
+ },
+ }}
+ render={({ fieldState: {error} }) => (
+ {
+ if (!value) {
+ handleCommodityTypeChange(DEFAULT_COMMODITY_SELECT_VALUE);
+ } else {
+ handleCommodityTypeChange(value.value);
+ }
+ },
+ renderOption: (props, option) => (
+
+ {option.label}
+
+ ),
+ isOptionEqualToValue: (option, value) => option.value === value.value && option.label === value.label,
+ }}
+ helperText={error?.message ? {
+ errors: [error.message],
+ } : undefined}
+ />
+ )}
+ />
+
+
+
+ {newCommodityType ? (
+
+ ) : null;
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.scss b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.scss
new file mode 100644
index 000000000..8dea11ad2
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.scss
@@ -0,0 +1,25 @@
+@use "../../../../../../../themes/orbcStyles";
+
+@include orbcStyles.permit-main-box-style(".loaded-dimensions-section");
+@include orbcStyles.permit-left-box-style(".loaded-dimensions-section__header");
+@include orbcStyles.permit-right-box-style(".loaded-dimensions-section__body");
+
+.loaded-dimensions-section {
+ & &__input-row {
+ display: flex;
+ margin-top: 1.5rem;
+
+ &--first {
+ margin-top: 0;
+ }
+ }
+
+ & &__input {
+ max-width: 14.0625rem;
+ margin: 0 0 0 2.5rem;
+
+ &--first {
+ margin: 0;
+ }
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.tsx b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.tsx
new file mode 100644
index 000000000..bf8104b34
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/LoadedDimensionsSection.tsx
@@ -0,0 +1,106 @@
+import { Box } from "@mui/material";
+
+import "./LoadedDimensionsSection.scss";
+import { PERMIT_TYPES, PermitType } from "../../../../../types/PermitType";
+import { Nullable, RequiredOrNull } from "../../../../../../../common/types/common";
+import { PermitVehicleConfiguration } from "../../../../../types/PermitVehicleConfiguration";
+import { LoadedDimensionInput } from "./components/LoadedDimensionInput";
+
+export const LoadedDimensionsSection = ({
+ permitType,
+ feature,
+ vehicleConfiguration,
+ onUpdateVehicleConfiguration,
+}: {
+ permitType: PermitType;
+ feature: string;
+ vehicleConfiguration?: Nullable;
+ onUpdateVehicleConfiguration:
+ (updatedVehicleConfig: RequiredOrNull) => void;
+}) => {
+ return permitType === PERMIT_TYPES.STOS ? (
+
+
+
+ Loaded Dimensions (Metres)
+
+
+
+
+
+ onUpdateVehicleConfiguration({
+ ...vehicleConfiguration,
+ overallWidth: updatedValue,
+ })}
+ />
+
+ onUpdateVehicleConfiguration({
+ ...vehicleConfiguration,
+ overallHeight: updatedValue,
+ })}
+ />
+
+ onUpdateVehicleConfiguration({
+ ...vehicleConfiguration,
+ overallLength: updatedValue,
+ })}
+ />
+
+
+
+ onUpdateVehicleConfiguration({
+ ...vehicleConfiguration,
+ frontProjection: updatedValue,
+ })}
+ />
+
+ onUpdateVehicleConfiguration({
+ ...vehicleConfiguration,
+ rearProjection: updatedValue,
+ })}
+ />
+
+
+
+ ) : null;
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/components/LoadedDimensionInput.tsx b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/components/LoadedDimensionInput.tsx
new file mode 100644
index 000000000..391484781
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/LoadedDimensionsSection/components/LoadedDimensionInput.tsx
@@ -0,0 +1,66 @@
+import { Controller } from "react-hook-form";
+
+import { NumberInput } from "../../../../../../../../common/components/form/subFormComponents/NumberInput";
+import { getDefaultRequiredVal } from "../../../../../../../../common/helpers/util";
+import { convertToNumberIfValid } from "../../../../../../../../common/helpers/numeric/convertToNumberIfValid";
+import { Nullable, RequiredOrNull } from "../../../../../../../../common/types/common";
+import {
+ mustBeGreaterThanOrEqualTo,
+ requiredMessage,
+} from "../../../../../../../../common/helpers/validationMessages";
+
+export const LoadedDimensionInput = ({
+ name,
+ label,
+ className,
+ value,
+ onUpdateValue,
+}: {
+ name: string;
+ label: {
+ id: string;
+ component: React.ReactNode;
+ };
+ className: string;
+ value?: Nullable;
+ onUpdateValue: (updateValue: RequiredOrNull) => void;
+}) => {
+ return (
+ (
+ numericVal.toFixed(2),
+ onBlur: (e) => {
+ onUpdateValue(
+ getDefaultRequiredVal(
+ null,
+ convertToNumberIfValid(e.target.value, null),
+ ),
+ );
+ },
+ slotProps: {
+ input: {
+ min: 0,
+ step: 0.01,
+ },
+ },
+ }}
+ helperText={error?.message ? {
+ errors: [error.message],
+ } : undefined}
+ />
+ )}
+ />
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/PermitDetails.scss b/frontend/src/features/permits/pages/Application/components/form/PermitDetails.scss
index f287ec271..2b416d786 100644
--- a/frontend/src/features/permits/pages/Application/components/form/PermitDetails.scss
+++ b/frontend/src/features/permits/pages/Application/components/form/PermitDetails.scss
@@ -5,15 +5,33 @@
@include orbcStyles.permit-right-box-style(".permit-details__body");
.permit-details {
- & &__input-section {
+ & &__date-selection {
display: flex;
- gap: 2.5rem;
+ flex-direction: row;
+ justify-content: space-between;
+ max-width: 30.625rem;
+
+ .custom-form-control, .custom-date-picker__form-control {
+ margin: 0;
+ width: 100%;
+ }
+ }
+
+ & &__input {
+ &--start-date {
+ max-width: 16.125rem;
+ }
- .custom-date-picker {
- width: 344px;
+ &--duration {
+ max-width: 12rem;
+ width: 100%;
}
}
+ .permit-expiry-date-banner {
+ margin-top: 1.5rem;
+ }
+
& &__conditions {
margin-top: 1.5rem;
diff --git a/frontend/src/features/permits/pages/Application/components/form/PermitDetails.tsx b/frontend/src/features/permits/pages/Application/components/form/PermitDetails.tsx
index b161b6b8c..1a37f9329 100644
--- a/frontend/src/features/permits/pages/Application/components/form/PermitDetails.tsx
+++ b/frontend/src/features/permits/pages/Application/components/form/PermitDetails.tsx
@@ -1,11 +1,10 @@
-import { Box, MenuItem, Typography } from "@mui/material";
+import { Box, MenuItem } from "@mui/material";
import dayjs, { Dayjs } from "dayjs";
import "./PermitDetails.scss";
import { InfoBcGovBanner } from "../../../../../../common/components/banners/InfoBcGovBanner";
import { PermitExpiryDateBanner } from "../../../../../../common/components/banners/PermitExpiryDateBanner";
import { CustomFormComponent } from "../../../../../../common/components/form/CustomFormComponents";
-import { PHONE_WIDTH } from "../../../../../../themes/bcGovStyles";
import { ConditionsTable } from "./ConditionsTable";
import { requiredMessage } from "../../../../../../common/helpers/validationMessages";
import { ONROUTE_WEBPAGE_LINKS } from "../../../../../../routes/constants";
@@ -48,12 +47,13 @@ export const PermitDetails = ({
return (
- Permit Details
+ Permit Details
-
+
(
@@ -88,9 +88,9 @@ export const PermitDetails = ({
-
- Select the commodities below and their respective CVSE forms.
-
+
+ The following CVSE forms will be included in your permit
+
{
const {
@@ -33,6 +37,14 @@ export const PermitForm = () => {
pastStartDateStatus,
companyLOAs,
revisionHistory,
+ commodityOptions,
+ highwaySequence,
+ nextAllowedSubtypes,
+ powerUnitSubtypeNamesMap,
+ trailerSubtypeNamesMap,
+ selectedVehicleConfigSubtypes,
+ commodityType,
+ vehicleConfiguration,
onLeave,
onSave,
onCancel,
@@ -42,6 +54,10 @@ export const PermitForm = () => {
onSetVehicle,
onClearVehicle,
onUpdateLOAs,
+ onUpdateHighwaySequence,
+ onUpdateVehicleConfigTrailers,
+ onChangeCommodityType,
+ onUpdateVehicleConfig,
} = useApplicationFormContext();
return (
@@ -79,16 +95,49 @@ export const PermitForm = () => {
pastStartDateStatus={pastStartDateStatus}
onSetConditions={onSetConditions}
/>
+
+
-
+
Letter of Authorization (LOA)
-
+
- Select the relevant LOA(s)
+
Select the relevant LOA(s)
(optional)
@@ -101,5 +101,5 @@ export const PermitLOASection = ({
/>
- );
+ ) : null;
};
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss
new file mode 100644
index 000000000..7a1c58dcd
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss
@@ -0,0 +1,88 @@
+@use "../../../../../../../themes/orbcStyles";
+
+.highway-sequences {
+ & &__info {
+ color: orbcStyles.$bc-black;
+ margin: 1.5rem 0;
+
+ .highway-sequences-info {
+ &__example {
+ font-weight: normal;
+ font-size: 1rem;
+ margin: 0;
+ }
+
+ &__links {
+ font-weight: normal;
+ font-size: 1rem;
+ margin: 0.5rem 0 0 0;
+
+ .highways-link {
+ margin: 0 0.25rem;
+ }
+ }
+ }
+ }
+
+ & &__inputs {
+ .highway-sequence-rows {
+ &__row {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1.5rem;
+
+ &--first {
+ margin-top: 0rem;
+ }
+ }
+
+ &__cell {
+ max-width: 6.25rem;
+ margin: 0;
+ }
+
+ &__error {
+ margin-top: 0.5rem;
+ color: orbcStyles.$bc-red;
+ }
+
+ .highway-number-form-control {
+ &__label {
+ font-size: 1rem;
+ font-weight: bold;
+ color: orbcStyles.$bc-black;
+ margin-bottom: 0.5rem;
+ }
+
+ &__input {
+ fieldset {
+ border: 2px solid orbcStyles.$bc-text-box-border-grey;
+ }
+
+ &--focus {
+ fieldset {
+ border: 2px solid orbcStyles.$focus-blue;
+ }
+ }
+
+ &--error {
+ fieldset {
+ border: 2px solid orbcStyles.$bc-red;
+ }
+ }
+ }
+ }
+ }
+
+ .add-highways-row-btn {
+ display: flex;
+ align-items: center;
+ margin-top: 1.5rem;
+
+ &__icon {
+ margin-right: 0.5rem;
+ }
+ }
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.tsx b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.tsx
new file mode 100644
index 000000000..62235ca65
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.tsx
@@ -0,0 +1,196 @@
+import { useMemo } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Button, FormControl, FormLabel } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+import "./HighwaySequences.scss";
+import { InfoBcGovBanner } from "../../../../../../../common/components/banners/InfoBcGovBanner";
+import { CustomExternalLink } from "../../../../../../../common/components/links/CustomExternalLink";
+import { BANNER_MESSAGES } from "../../../../../../../common/constants/bannerMessages";
+import { ONROUTE_WEBPAGE_LINKS } from "../../../../../../../routes/constants";
+import { requiredHighway } from "../../../../../../../common/helpers/validationMessages";
+import { ApplicationFormData } from "../../../../../types/application";
+import { HighwayNumberInput } from "./components/HighwayNumberInput";
+
+const toHighwayRows = (highwaySequence: string[]) => {
+ return [
+ highwaySequence.slice(0, 8),
+ highwaySequence.slice(8, 16),
+ highwaySequence.slice(16, 24),
+ highwaySequence.slice(24, 32),
+ ].filter((row, index) => index === 0 || row.length > 0)
+ .map(row => {
+ if (row.length === 8) return row;
+
+ // The row has less than 8 highway numbers, pad the rest with empty strings
+ return [...row, ...(new Array(8 - row.length).fill(""))];
+ });
+};
+
+const highwaySequenceRules = {
+ validate: {
+ requiredHighwaySequence: (
+ value: string[],
+ ) => {
+ return (
+ (
+ value.length > 0 &&
+ value.some(highwayNumber => Boolean(highwayNumber.trim()))
+ ) ||
+ requiredHighway()
+ )
+ },
+ },
+};
+
+export const HighwaySequences = ({
+ highwaySequence,
+ onUpdateHighwaySequence,
+}: {
+ highwaySequence: string[];
+ onUpdateHighwaySequence: (highwaySequence: string[]) => void;
+}) => {
+ const highwayRows = useMemo(() => toHighwayRows(highwaySequence), [
+ highwaySequence,
+ ]);
+
+ const maxHighwayRowsReached = highwayRows.length === 4;
+
+ const handleAddHighwayRow = () => {
+ if (maxHighwayRowsReached) return;
+
+ onUpdateHighwaySequence([
+ ...highwayRows.flat(),
+ ...(new Array(8).fill("")),
+ ]);
+ };
+
+ const {
+ control,
+ formState: { errors },
+ trigger,
+ } = useFormContext();
+
+ const handleHighwayInput = (
+ updatedHighwayNumber: string,
+ rowIndex: number,
+ colIndex: number,
+ ) => {
+ const indexToUpdate = rowIndex * 8 + colIndex;
+ onUpdateHighwaySequence(
+ highwayRows.flat().map((highwayNumber, index) =>
+ indexToUpdate === index ? updatedHighwayNumber : highwayNumber)
+ );
+ trigger("permitData.permittedRoute.manualRoute.highwaySequence");
+ };
+
+ return (
+
+
+ Sequence of highways to be travelled
+
+
+
+
+ {BANNER_MESSAGES.HIGHWAY_SEQUENCES.EXAMPLE}
+
+
+
+ Please refer to the
+
+
+ List of Highways in British Columbia
+
+
+ and the
+
+
+ Height Clearance Tool
+
+
+ to build your sequence.
+
+
+
(
+
+ {highwayRows.map((highwayRow, rowIndex) => (
+
+ {highwayRow.map((highwayNumber, colIndex) => (
+
+
+ {rowIndex * 8 + colIndex + 1}
+
+
+
+ ))}
+
+ ))}
+
+ {errors.permitData?.permittedRoute?.manualRoute?.highwaySequence ? (
+
+ {errors.permitData.permittedRoute.manualRoute.highwaySequence.message}
+
+ ) : null}
+
+
+ ) : null}
+
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.scss b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.scss
new file mode 100644
index 000000000..263f6badc
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.scss
@@ -0,0 +1,16 @@
+@import "../../../../../../../themes/orbcStyles";
+
+.specific-route-details {
+ & &__input {
+ max-width: 43.125rem;
+
+ .custom-form-control {
+ margin: 0;
+ }
+ }
+
+ & &__helper-text {
+ color: $bc-black;
+ margin: 0.25rem 0 0 0;
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.tsx b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.tsx
new file mode 100644
index 000000000..41a46a3fb
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/SpecificRouteDetails.tsx
@@ -0,0 +1,30 @@
+import "./SpecificRouteDetails.scss";
+import { CustomFormComponent } from "../../../../../../../common/components/form/CustomFormComponents";
+import { requiredMessage } from "../../../../../../../common/helpers/validationMessages";
+
+export const SpecificRouteDetails = ({
+ feature,
+}: {
+ feature: string;
+}) => {
+ return (
+
+
+
+
+ e.g. From the Alberta/BC border to 10 km north on Highway 23 near Revelstoke.
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.scss b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.scss
new file mode 100644
index 000000000..e57460c33
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.scss
@@ -0,0 +1,21 @@
+@use "../../../../../../../themes/orbcStyles";
+
+@include orbcStyles.permit-main-box-style(".trip-details-section");
+@include orbcStyles.permit-left-box-style(".trip-details-section__header");
+@include orbcStyles.permit-right-box-style(".trip-details-section__body");
+
+.trip-details-section {
+ .trip-origin-destination {
+ padding-bottom: 1.5rem;
+ }
+
+ .highway-sequences {
+ border-top: 1px solid orbcStyles.$bc-text-box-border-grey;
+ padding: 1.5rem 0;
+ }
+
+ .specific-route-details {
+ border-top: 1px solid orbcStyles.$bc-text-box-border-grey;
+ padding-top: 1.5rem;
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.tsx b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.tsx
new file mode 100644
index 000000000..90b002b34
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripDetailsSection.tsx
@@ -0,0 +1,40 @@
+import { Box } from "@mui/material";
+
+import "./TripDetailsSection.scss";
+import { PERMIT_TYPES, PermitType } from "../../../../../types/PermitType";
+import { TripOriginDestination } from "./TripOriginDestination";
+import { SpecificRouteDetails } from "./SpecificRouteDetails";
+import { HighwaySequences } from "./HighwaySequences";
+
+export const TripDetailsSection = ({
+ feature,
+ permitType,
+ highwaySequence,
+ onUpdateHighwaySequence,
+}: {
+ feature: string;
+ permitType: PermitType;
+ highwaySequence: string[];
+ onUpdateHighwaySequence: (updatedHighwaySequence: string[]) => void;
+}) => {
+ return permitType === PERMIT_TYPES.STOS ? (
+
+
+
+ Trip Details
+
+
+
+
+
+
+ ) : null;
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.scss b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.scss
new file mode 100644
index 000000000..f597cbe7d
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.scss
@@ -0,0 +1,15 @@
+.trip-origin-destination {
+ & &__input {
+ max-width: 30.625rem;
+
+ .custom-form-control {
+ margin: 1.5rem 0 0 0;
+ }
+
+ &--origin {
+ .custom-form-control {
+ margin: 0;
+ }
+ }
+ }
+}
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.tsx b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.tsx
new file mode 100644
index 000000000..d04a029aa
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/TripOriginDestination.tsx
@@ -0,0 +1,39 @@
+import "./TripOriginDestination.scss";
+import { CustomFormComponent } from "../../../../../../../common/components/form/CustomFormComponents";
+import { invalidAddress } from "../../../../../../../common/helpers/validationMessages";
+
+export const TripOriginDestination = ({
+ feature,
+}: {
+ feature: string;
+}) => {
+ return (
+
+
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/components/HighwayNumberInput.tsx b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/components/HighwayNumberInput.tsx
new file mode 100644
index 000000000..7ce072b15
--- /dev/null
+++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/components/HighwayNumberInput.tsx
@@ -0,0 +1,32 @@
+import { OutlinedInput } from "@mui/material";
+
+export const HighwayNumberInput = ({
+ className,
+ highwayNumber,
+ onHighwayInputChange,
+ rowIndex,
+ colIndex,
+}: {
+ className: string;
+ highwayNumber: string;
+ onHighwayInputChange: (
+ updatedHighwayNumber: string,
+ rowIndex: number,
+ colIndex: number,
+ ) => void;
+ rowIndex: number;
+ colIndex: number;
+}) => {
+ return (
+
onHighwayInputChange(e.target.value, rowIndex, colIndex)}
+ />
+ );
+};
diff --git a/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.scss b/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.scss
deleted file mode 100644
index c12eeb801..000000000
--- a/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "../../../../../../../themes/orbcStyles";
-
-@include orbcStyles.permit-main-box-style(".vehicle-details");
-@include orbcStyles.permit-left-box-style(".vehicle-details__header");
-@include orbcStyles.permit-right-box-style(".vehicle-details__body");
-
-.vehicle-details {
- border-bottom: none;
-
- & &__info {
- display: flex;
- flex-direction: row-reverse;
- margin-top: 1.5rem;
-
- .bc-gov-alertbanner {
- margin-left: 2.5rem;
- height: fit-content;
- height: -moz-fit-content; /* For Firefox, Firefox Android */
-
- .vehicle-inventory-info {
- font-weight: normal;
- }
- }
- }
-
- & &__input-section {
- display: flex;
- flex-direction: column;
-
- .vehicle-selection {
- display: flex;
- gap: 2.5rem;
-
- .select-unit-or-plate {
- &__select {
- width: 180px;
- }
- }
-
- .select-vehicle-dropdown {
- &__autocomplete {
- width: 268px;
- }
- }
- }
- }
-}
-
-@media (width < 1370px) {
- .vehicle-details {
- & &__info {
- flex-direction: column;
-
- .bc-gov-alertbanner {
- margin-left: 0;
- }
- }
- }
-}
diff --git a/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.tsx b/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.tsx
deleted file mode 100644
index c97489dbb..000000000
--- a/frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-import { useEffect, useState } from "react";
-import {
- Box,
- FormControl,
- FormControlLabel,
- FormLabel,
- MenuItem,
- Radio,
- RadioGroup,
- SelectChangeEvent,
- Typography,
-} from "@mui/material";
-
-import "./VehicleDetails.scss";
-import { CountryAndProvince } from "../../../../../../../common/components/form/CountryAndProvince";
-import { CustomFormComponent } from "../../../../../../../common/components/form/CustomFormComponents";
-import { InfoBcGovBanner } from "../../../../../../../common/components/banners/InfoBcGovBanner";
-import { mapToVehicleObjectById } from "../../../../../helpers/mappers";
-import { getDefaultRequiredVal } from "../../../../../../../common/helpers/util";
-import { CustomInputHTMLAttributes } from "../../../../../../../common/types/formElements";
-import { SelectUnitOrPlate } from "./customFields/SelectUnitOrPlate";
-import { SelectVehicleDropdown } from "./customFields/SelectVehicleDropdown";
-import { BANNER_MESSAGES } from "../../../../../../../common/constants/bannerMessages";
-import { PermitVehicleDetails } from "../../../../../types/PermitVehicleDetails";
-import { selectedVehicleSubtype } from "../../../../../../manageVehicles/helpers/vehicleSubtypes";
-import { disableMouseWheelInputOnNumberField } from "../../../../../../../common/helpers/disableMouseWheelInputOnNumberField";
-import {
- PowerUnit,
- Trailer,
- VehicleSubType,
- VEHICLE_TYPES,
- Vehicle,
- VehicleType,
-} from "../../../../../../manageVehicles/types/Vehicle";
-
-import {
- CHOOSE_FROM_OPTIONS,
- VEHICLE_CHOOSE_FROM,
- VEHICLE_TYPE_OPTIONS,
- VehicleChooseFrom,
-} from "../../../../../constants/constants";
-
-import {
- invalidNumber,
- invalidPlateLength,
- invalidVINLength,
- invalidYearMin,
- requiredMessage,
-} from "../../../../../../../common/helpers/validationMessages";
-
-export const VehicleDetails = ({
- feature,
- vehicleFormData,
- vehicleOptions,
- subtypeOptions,
- isSelectedLOAVehicle,
- onSetSaveVehicle,
- onSetVehicle,
- onClearVehicle,
-}: {
- feature: string;
- vehicleFormData: PermitVehicleDetails;
- vehicleOptions: Vehicle[];
- subtypeOptions: VehicleSubType[];
- isSelectedLOAVehicle: boolean;
- onSetSaveVehicle: (saveVehicle: boolean) => void;
- onSetVehicle: (vehicleDetails: PermitVehicleDetails) => void;
- onClearVehicle: (saveVehicle: boolean) => void;
-}) => {
- const formFieldStyle = {
- fontWeight: "bold",
- width: "490px",
- marginLeft: "8px",
- };
-
- const vehicleType = vehicleFormData.vehicleType;
-
- // Choose vehicle based on either Unit Number or Plate
- const [chooseFrom, setChooseFrom] = useState(
- VEHICLE_CHOOSE_FROM.UNIT_NUMBER,
- );
-
- // Radio button value to decide if the user wants to save the vehicle in inventory
- // Reset to false every reload
- const [saveVehicle, setSaveVehicle] = useState(false);
-
- // Disable vehicle type selection when a vehicle has been selected from dropdown
- // Enable only when user chooses to manually enter new vehicle info by clearing the vehicle details
- const shouldDisableVehicleTypeSelect = () => {
- const existingVehicle = vehicleType
- ? mapToVehicleObjectById(
- vehicleOptions,
- vehicleType as VehicleType,
- vehicleFormData.vehicleId,
- )
- : undefined;
-
- return Boolean(existingVehicle);
- };
-
- const disableVehicleTypeSelect = shouldDisableVehicleTypeSelect();
-
- // Set the "Save to Inventory" radio button to false on render
- useEffect(() => {
- onSetSaveVehicle(saveVehicle);
- }, [saveVehicle]);
-
- // Whenever a new vehicle is selected
- const onSelectVehicle = (selectedVehicle: Vehicle) => {
- const vehicleType =
- selectedVehicle.vehicleType === VEHICLE_TYPES.TRAILER
- ? VEHICLE_TYPES.TRAILER
- : VEHICLE_TYPES.POWER_UNIT;
-
- const vehicleId =
- vehicleType === VEHICLE_TYPES.POWER_UNIT
- ? (selectedVehicle as PowerUnit).powerUnitId
- : (selectedVehicle as Trailer).trailerId;
-
- const vehicle = mapToVehicleObjectById(
- vehicleOptions,
- vehicleType,
- vehicleId,
- );
-
- if (!vehicle) {
- // vehicle selection is invalid
- onClearVehicle(saveVehicle);
- return;
- }
-
- // Prepare form fields with values from selected vehicle
- const vehicleDetails = {
- vehicleId:
- vehicle.vehicleType === VEHICLE_TYPES.POWER_UNIT
- ? (vehicle as PowerUnit).powerUnitId
- : (vehicle as Trailer).trailerId,
- unitNumber: vehicle.unitNumber,
- vin: vehicle.vin,
- plate: vehicle.plate,
- make: vehicle.make,
- year: vehicle.year,
- countryCode: vehicle.countryCode,
- provinceCode: vehicle.provinceCode,
- vehicleType: getDefaultRequiredVal("", vehicle.vehicleType),
- vehicleSubType: selectedVehicleSubtype(vehicle),
- };
-
- onSetVehicle({
- ...vehicleDetails,
- saveVehicle,
- });
- };
-
- const handleChooseFrom = (event: SelectChangeEvent) => {
- setChooseFrom(event.target.value as VehicleChooseFrom);
- };
-
- const handleSaveVehicleRadioBtns = (saveToInventory: string) => {
- setSaveVehicle(saveToInventory === "true");
- };
-
- // Reset the vehicle subtype field whenever a different vehicle type is selected
- const handleChangeVehicleType = (event: SelectChangeEvent) => {
- const updatedVehicleType = event.target.value;
- if (updatedVehicleType !== vehicleType) {
- onSetVehicle({
- ...vehicleFormData,
- vehicleType: updatedVehicleType,
- vehicleSubType: "",
- saveVehicle,
- });
- }
- };
-
- // If the selected vehicle is an LOA vehicle, it should not be edited/saved to inventory
- useEffect(() => {
- if (isSelectedLOAVehicle) {
- setSaveVehicle(false);
- }
- }, [isSelectedLOAVehicle]);
-
- return (
-
-
- Vehicle Details
-
-
-
-
- Choose a saved vehicle from your inventory or enter new vehicle
- information below.
-
-
-
-
- Your vehicle may not be available in a permit application
- because it cannot be used for the type of permit you are
- applying for.
-
- (
-
- {data.label}
-
- ))}
- />
-
- onClearVehicle(saveVehicle)}
- handleSelectVehicle={onSelectVehicle}
- />
-
-
- !isNaN(v) || invalidNumber(),
- lessThan1950: (v) =>
- parseInt(v) > 1950 || invalidYearMin(1950),
- },
- },
- inputType: "number",
- label: "Year",
- width: formFieldStyle.width,
- }}
- readOnly={isSelectedLOAVehicle}
- disabled={isSelectedLOAVehicle}
- />
-
- (
-
- {data.label}
-
- ))}
- />
-
- (
-
- {subtype.type}
-
- ))}
- readOnly={isSelectedLOAVehicle}
- disabled={isSelectedLOAVehicle}
- />
-
-
-
- Would you like to add/update this vehicle to your Vehicle
- Inventory?
-
-
- handleSaveVehicleRadioBtns(e.target.value)}
- >
-
-
-
-
-
-