diff --git a/frontend/src/common/components/form/subFormComponents/NumberInput.tsx b/frontend/src/common/components/form/subFormComponents/NumberInput.tsx index 8baa021d2..73275e861 100644 --- a/frontend/src/common/components/form/subFormComponents/NumberInput.tsx +++ b/frontend/src/common/components/form/subFormComponents/NumberInput.tsx @@ -10,7 +10,7 @@ import { import "./NumberInput.scss"; import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../helpers/util"; import { convertToNumberIfValid } from "../../../helpers/numeric/convertToNumberIfValid"; -import { isUndefined, RequiredOrNull } from "../../../types/common"; +import { isNull, RequiredOrNull } from "../../../types/common"; type NumberInputClassKey = "root" | "label"; @@ -57,10 +57,10 @@ export const NumberInput = (props: NumberInputProps) => { const handleChange = (e: React.ChangeEvent) => { const updatedVal = e.target.value; - const numericVal = convertToNumberIfValid(updatedVal, undefined); + const numericVal = convertToNumberIfValid(updatedVal, null); // If an invalid numeric string was inputted, do nothing - if (isUndefined(numericVal)) return; + if (isNull(numericVal)) return; // Otherwise display it without formatting it immediately (as that affects user's ability to input) setValueDisplay(updatedVal); @@ -70,8 +70,8 @@ export const NumberInput = (props: NumberInputProps) => { // The user is free to enter numbers into the input field, // but as they leave the input will be formatted if a maskFn is available const handleBlur = (e: React.FocusEvent) => { - const num = convertToNumberIfValid(valueDisplay, undefined); - if (maskFn && !isUndefined(num)) { + const num = convertToNumberIfValid(valueDisplay, null); + if (maskFn && !isNull(num)) { setValueDisplay(maskFn(num)); } onBlur?.(e); diff --git a/frontend/src/common/helpers/numeric/convertToNumberIfValid.ts b/frontend/src/common/helpers/numeric/convertToNumberIfValid.ts index 4252b2328..7cc4ae3fa 100644 --- a/frontend/src/common/helpers/numeric/convertToNumberIfValid.ts +++ b/frontend/src/common/helpers/numeric/convertToNumberIfValid.ts @@ -20,5 +20,5 @@ export const convertToNumberIfValid = >( || isNumberButInvalid || isStringButInvalid; - return !isInvalid ? Number(numericVal) : fallbackWhenInvalid; + return !isInvalid ? Number(numericVal) : fallbackWhenInvalid as T; }; diff --git a/frontend/src/features/manageProfile/pages/DisplayCompanyInfo.tsx b/frontend/src/features/manageProfile/pages/DisplayCompanyInfo.tsx index b42ceb4fb..b8d098030 100644 --- a/frontend/src/features/manageProfile/pages/DisplayCompanyInfo.tsx +++ b/frontend/src/features/manageProfile/pages/DisplayCompanyInfo.tsx @@ -12,6 +12,7 @@ import { getDefaultRequiredVal } from "../../../common/helpers/util"; import { CompanyProfile } from "../types/manageProfile"; import { getProvinceFullName } from "../../../common/helpers/countries/getProvinceFullName"; import { getCountryFullName } from "../../../common/helpers/countries/getCountryFullName"; +import { Nullable } from "../../../common/types/common"; export const DisplayInfo = memo( ({ @@ -34,6 +35,12 @@ export const DisplayInfo = memo( companyInfo?.primaryContact?.provinceCode, ); + const phoneDisplay = (phone: string, ext?: Nullable) => { + return `${formatPhoneNumber( + phone, + )} ${ext ? `Ext: ${ext}` : ""}`; + }; + return companyInfo ? (
@@ -48,11 +55,9 @@ export const DisplayInfo = memo( {companyInfo.mailingAddress.addressLine1} - {mailingCountry ? ( - - {mailingCountry} - - ) : null} + + {mailingCountry} + {mailingProvince ? ( @@ -71,9 +76,7 @@ export const DisplayInfo = memo( - {`Phone: ${formatPhoneNumber(companyInfo.phone)} ${ - companyInfo.extension ? `Ext: ${companyInfo.extension}` : "" - }`} + {`Phone: ${phoneDisplay(companyInfo.phone, companyInfo.extension)}`} {companyInfo?.fax ? ( @@ -93,20 +96,15 @@ export const DisplayInfo = memo( - {`Primary Phone: ${formatPhoneNumber( + {`Primary Phone: ${phoneDisplay( companyInfo.primaryContact.phone1, - )} ${ - companyInfo.primaryContact.phone1Extension - ? `Ext: ${companyInfo.primaryContact.phone1Extension}` - : "" - }`} + companyInfo.primaryContact.phone1Extension, + )}`} - {primaryContactCountry ? ( - - {primaryContactCountry} - - ) : null} + + {primaryContactCountry} + {primaryContactProvince ? ( diff --git a/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts b/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts index ac0170190..9fb0070fa 100644 --- a/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts +++ b/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts @@ -6,7 +6,7 @@ import { usePermitDateSelection } from "../usePermitDateSelection"; import { usePermitConditions } from "../usePermitConditions"; import { getStartOfDate } from "../../../../common/helpers/formatDate"; import { usePermitVehicles } from "../usePermitVehicles"; -import { arePermitLOADetailsEqual, PermitLOA } from "../../types/PermitLOA"; +import { arePermitLOADetailsEqual } from "../../types/PermitLOA"; import { useMemoizedArray } from "../../../../common/hooks/useMemoizedArray"; import { getDefaultRequiredVal } from "../../../../common/helpers/util"; import { arePermitConditionEqual } from "../../types/PermitCondition"; @@ -118,7 +118,7 @@ export const useApplicationFormContext = () => { permitType, startDate, durationOptions, - currentSelectedLOAs as PermitLOA[], + currentSelectedLOAs, permitDuration, onSetDuration, onSetExpiryDate, @@ -151,18 +151,18 @@ export const useApplicationFormContext = () => { filteredVehicleOptions, subtypeOptions, isSelectedLOAVehicle, - } = usePermitVehicles( + } = usePermitVehicles({ policyEngine, permitType, isLcvDesignated, vehicleFormData, allVehiclesFromInventory, - currentSelectedLOAs as PermitLOA[], + selectedLOAs: currentSelectedLOAs, powerUnitSubtypeNamesMap, trailerSubtypeNamesMap, - () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)), - permittedCommodity?.commodityType, - ); + onClearVehicle: () => onClearVehicle(Boolean(vehicleFormData.saveVehicle)), + selectedCommodity: permittedCommodity?.commodityType, + }); const selectedVehicleConfigSubtypes = useMemoizedArray( getDefaultRequiredVal( diff --git a/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts b/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts index f2936742b..01a3b08de 100644 --- a/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts +++ b/frontend/src/features/permits/hooks/form/useInitApplicationFormData.ts @@ -28,15 +28,28 @@ import { getEligibleVehicleSubtypes } from "../../helpers/vehicles/subtypes/getE * @returns Current application form data, methods to manage the form, and selectable input options */ export const useInitApplicationFormData = ( - permitType: PermitType, - isLcvDesignated: boolean, - companyLOAs: LOADetail[], - inventoryVehicles: (PowerUnit | Trailer)[], - companyInfo: Nullable, - applicationData?: Nullable, - userDetails?: BCeIDUserDetailContext, - policyEngine?: Nullable, + 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(() => { diff --git a/frontend/src/features/permits/hooks/usePermitVehicles.ts b/frontend/src/features/permits/hooks/usePermitVehicles.ts index 39f80cd64..151c26836 100644 --- a/frontend/src/features/permits/hooks/usePermitVehicles.ts +++ b/frontend/src/features/permits/hooks/usePermitVehicles.ts @@ -16,17 +16,32 @@ import { } from "../../manageVehicles/types/Vehicle"; export const usePermitVehicles = ( - policyEngine: Policy, - permitType: PermitType, - isLcvDesignated: boolean, - vehicleFormData: PermitVehicleDetails, - allVehiclesFromInventory: (PowerUnit | Trailer)[], - selectedLOAs: PermitLOA[], - powerUnitSubtypeNamesMap: Map, - trailerSubtypeNamesMap: Map, - onClearVehicle: () => void, - selectedCommodity?: Nullable, + 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, diff --git a/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx b/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx index 42eaec4fc..52677ecb1 100644 --- a/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx +++ b/frontend/src/features/permits/pages/Amend/components/AmendPermitForm.tsx @@ -83,16 +83,16 @@ export const AmendPermitForm = () => { initialFormData, formData, formMethods, - } = useAmendPermitForm( - currentStepIndex === 0, + } = useAmendPermitForm({ + repopulateFormData: currentStepIndex === 0, isLcvDesignated, companyLOAs, - allVehiclesFromInventory, + inventoryVehicles: allVehiclesFromInventory, companyInfo, permit, amendmentApplication, policyEngine, - ); + }); const { createdDateTime, updatedDateTime } = getDatetimes( amendmentApplication, diff --git a/frontend/src/features/permits/pages/Amend/hooks/useAmendPermitForm.ts b/frontend/src/features/permits/pages/Amend/hooks/useAmendPermitForm.ts index 408b57912..ed3346e01 100644 --- a/frontend/src/features/permits/pages/Amend/hooks/useAmendPermitForm.ts +++ b/frontend/src/features/permits/pages/Amend/hooks/useAmendPermitForm.ts @@ -19,15 +19,28 @@ import { } from "../types/AmendPermitFormData"; export const useAmendPermitForm = ( - repopulateFormData: boolean, - isLcvDesignated: boolean, - companyLOAs: LOADetail[], - inventoryVehicles: (PowerUnit | Trailer)[], - companyInfo: Nullable, - permit?: Nullable, - amendmentApplication?: Nullable, - policyEngine?: 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) { diff --git a/frontend/src/features/permits/pages/Application/ApplicationForm.tsx b/frontend/src/features/permits/pages/Application/ApplicationForm.tsx index 9e521a742..57f994343 100644 --- a/frontend/src/features/permits/pages/Application/ApplicationForm.tsx +++ b/frontend/src/features/permits/pages/Application/ApplicationForm.tsx @@ -98,16 +98,16 @@ export const ApplicationForm = ({ initialFormData, currentFormData, formMethods, - } = useInitApplicationFormData( + } = useInitApplicationFormData({ permitType, isLcvDesignated, companyLOAs, - allVehiclesFromInventory, + inventoryVehicles: allVehiclesFromInventory, companyInfo, - applicationContext?.applicationData, + applicationData: applicationContext?.applicationData, userDetails, policyEngine, - ); + }); // Applicable LOAs must be: // 1. Applicable for the current permit type diff --git a/frontend/src/features/permits/pages/Application/ApplicationReview.tsx b/frontend/src/features/permits/pages/Application/ApplicationReview.tsx index 5598b3379..baf7f54ca 100644 --- a/frontend/src/features/permits/pages/Application/ApplicationReview.tsx +++ b/frontend/src/features/permits/pages/Application/ApplicationReview.tsx @@ -149,12 +149,14 @@ export const ApplicationReview = ({ } }; + const setShowSnackbar = () => true; + const handleAddToCart = async () => { await handleSaveApplication(async (companyId, permitId, applicationNumber) => { await proceedWithAddToCart(companyId, [permitId], () => { setSnackBar({ showSnackbar: true, - setShowSnackbar: () => true, + setShowSnackbar, message: `Application ${applicationNumber} added to cart`, alertType: "success", }); @@ -179,7 +181,7 @@ export const ApplicationReview = ({ onSuccess: () => { setSnackBar({ showSnackbar: true, - setShowSnackbar: () => true, + setShowSnackbar, message: `Application ${applicationNumber} submitted for review`, alertType: "success", }); 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 index cf2bfa3c9..7a1c58dcd 100644 --- a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss +++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.scss @@ -1,8 +1,8 @@ -@import "../../../../../../../themes/orbcStyles"; +@use "../../../../../../../themes/orbcStyles"; .highway-sequences { & &__info { - color: $bc-black; + color: orbcStyles.$bc-black; margin: 1.5rem 0; .highway-sequences-info { @@ -44,31 +44,31 @@ &__error { margin-top: 0.5rem; - color: $bc-red; + color: orbcStyles.$bc-red; } .highway-number-form-control { &__label { font-size: 1rem; font-weight: bold; - color: $bc-black; + color: orbcStyles.$bc-black; margin-bottom: 0.5rem; } &__input { fieldset { - border: 2px solid $bc-text-box-border-grey; + border: 2px solid orbcStyles.$bc-text-box-border-grey; } &--focus { fieldset { - border: 2px solid $focus-blue; + border: 2px solid orbcStyles.$focus-blue; } } &--error { fieldset { - border: 2px solid $bc-red; + border: 2px solid orbcStyles.$bc-red; } } } 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 index 8bc6ac6bd..62235ca65 100644 --- a/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.tsx +++ b/frontend/src/features/permits/pages/Application/components/form/TripDetailsSection/HighwaySequences.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; import { Controller, useFormContext } from "react-hook-form"; -import { Button, FormControl, FormLabel, OutlinedInput } from "@mui/material"; +import { Button, FormControl, FormLabel } from "@mui/material"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; @@ -11,6 +11,7 @@ import { BANNER_MESSAGES } from "../../../../../../../common/constants/bannerMes 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 [ @@ -139,12 +140,12 @@ export const HighwaySequences = ({
{highwayRows.map((highwayRow, rowIndex) => (
{highwayRow.map((highwayNumber, colIndex) => ( - handleHighwayInput(e.target.value, rowIndex, colIndex)} + highwayNumber={highwayNumber} + onHighwayInputChange={handleHighwayInput} + rowIndex={rowIndex} + colIndex={colIndex} /> ))} 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/VehicleInformationSection/PowerUnitInfo.tsx b/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/PowerUnitInfo.tsx index 45b003d75..7dac3c806 100644 --- a/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/PowerUnitInfo.tsx +++ b/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/PowerUnitInfo.tsx @@ -5,17 +5,15 @@ import { PermitVehicleDetails } from "../../../../../types/PermitVehicleDetails" import { PowerUnitInfoDisplay } from "../../common/PowerUnitInfoDisplay"; export const PowerUnitInfo = ({ - showPowerUnitInfo, powerUnitInfo, powerUnitSubtypeNamesMap, onRemovePowerUnit, }: { - showPowerUnitInfo: boolean; powerUnitInfo: PermitVehicleDetails; powerUnitSubtypeNamesMap: Map; onRemovePowerUnit: () => void, }) => { - return showPowerUnitInfo ? ( + return (

Power Unit

@@ -36,5 +34,5 @@ export const PowerUnitInfo = ({ Remove
- ) : null; + ); }; diff --git a/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/VehicleInformationSection.tsx b/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/VehicleInformationSection.tsx index f2ee36fc3..66f36e616 100644 --- a/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/VehicleInformationSection.tsx +++ b/frontend/src/features/permits/pages/Application/components/form/VehicleInformationSection/VehicleInformationSection.tsx @@ -160,12 +160,13 @@ export const VehicleInformationSection = ({ )}
- + {isPowerUnitSelectedForSingleTrip ? ( + + ) : null} {isPowerUnitSelectedForSingleTrip ? ( { + const measurementUnit = duration !== 1 ? "Days" : "Day"; + return duration === BASE_DAYS_IN_YEAR + ? "1 Year" + : `${duration} ${measurementUnit}`; + }; + return ( @@ -98,10 +105,7 @@ export const ReviewPermitDetails = ({ data-testid="permit-duration" > {applyWhenNotNullable( - (duration) => - duration === BASE_DAYS_IN_YEAR - ? "1 Year" - : `${duration} Day${duration !== 1 ? "s" : ""}`, + displayDuration, permitDuration, "", )} diff --git a/frontend/src/features/permits/pages/Application/components/review/ReviewVehicleInfo.tsx b/frontend/src/features/permits/pages/Application/components/review/ReviewVehicleInfo.tsx index ff4296477..0fdaee09a 100644 --- a/frontend/src/features/permits/pages/Application/components/review/ReviewVehicleInfo.tsx +++ b/frontend/src/features/permits/pages/Application/components/review/ReviewVehicleInfo.tsx @@ -112,6 +112,10 @@ export const ReviewVehicleInfo = ({ (subtype1, subtype2) => subtype1 === subtype2, ); + const showDiffChip = (show: boolean) => { + return show ? : null; + }; + return ( @@ -123,7 +127,7 @@ export const ReviewVehicleInfo = ({ Unit # - {changedFields.unit ? : null} + {showDiffChip(changedFields.unit)} (last 6 digits) - {changedFields.vin ? : null} + {showDiffChip(changedFields.vin)} Plate - {changedFields.plate ? : null} + {showDiffChip(changedFields.plate)} Make - {changedFields.make ? : null} + {showDiffChip(changedFields.make)} Year - {changedFields.year ? : null} + {showDiffChip(changedFields.year)} Country - {changedFields.country ? : null} + {showDiffChip(changedFields.country)} Province / State - {changedFields.province ? : null} + {showDiffChip(changedFields.province)} Vehicle Type - {changedFields.type ? : null} + {showDiffChip(changedFields.type)} Vehicle Sub-type - {changedFields.subtype ? : null} + {showDiffChip(changedFields.subtype)} { + return show ? : null; + }; + return routeDetails ? ( @@ -64,7 +68,7 @@ export const TripDetails = ({ Origin - {changedFields.origin ? : null} + {showDiffChip(changedFields.origin)} Destination - {changedFields.destination ? : null} + {showDiffChip(changedFields.destination)} - {changedFields.highwaySequences ? : null} + {showDiffChip(changedFields.highwaySequences)}
@@ -125,7 +129,7 @@ export const TripDetails = ({ Specific Route Details - {changedFields.routeDetails ? : null} + {showDiffChip(changedFields.routeDetails)}