ORV2-5060: Add return trip to frontend (#2221)

zgong-gov · web-flow · commit 3f70df99b94a · 2026-02-04T16:22:23.000-08:00
diff --git a/frontend/src/features/permits/helpers/equality.ts b/frontend/src/features/permits/helpers/equality.ts
@@ -223,6 +223,9 @@ export const areManualRoutesEqual = (
     manualRoute1?.highwaySequence,
     manualRoute2?.highwaySequence,
     (seqNumber1, seqNumber2) => seqNumber1 === seqNumber2,
+  ) && (
+    getDefaultRequiredVal(false, manualRoute1?.isReturnTrip)
+      === getDefaultRequiredVal(false, manualRoute2?.isReturnTrip)
   );
 };
 
diff --git a/frontend/src/features/permits/helpers/route/getDefaultManualRoute.ts b/frontend/src/features/permits/helpers/route/getDefaultManualRoute.ts
@@ -21,5 +21,12 @@ export const getDefaultManualRoute = (
     totalDistance: permitType === PERMIT_TYPES.MFP
       ? getDefaultRequiredVal(null, manualRoute?.totalDistance)
       : null,
+    isReturnTrip: ([
+      PERMIT_TYPES.STOS,
+      PERMIT_TYPES.STOW,
+      PERMIT_TYPES.STWS,
+    ] as PermitType[]).includes(permitType)
+      ? getDefaultRequiredVal(false, manualRoute?.isReturnTrip)
+      : null,
   };
 };
diff --git a/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts b/frontend/src/features/permits/hooks/form/useApplicationFormContext.ts
@@ -62,6 +62,7 @@ export const useApplicationFormContext = () => {
     onUpdateHighwaySequence,
     onUpdateTripOrigin,
     onUpdateTripDestination,
+    onUpdateIsReturnTrip,
     onUpdateTotalDistance,
     onUpdateVehicleConfigTrailers,
     onSetCommodityType,
@@ -308,6 +309,7 @@ export const useApplicationFormContext = () => {
     highwaySequence,
     tripOrigin: permittedRoute?.manualRoute?.origin,
     tripDestination: permittedRoute?.manualRoute?.destination,
+    isReturnTrip: permittedRoute?.manualRoute?.isReturnTrip,
     totalDistance: permittedRoute?.manualRoute?.totalDistance,
     nextAllowedSubtypes,
     powerUnitSubtypeNamesMap,
@@ -333,6 +335,7 @@ export const useApplicationFormContext = () => {
     onUpdateHighwaySequence,
     onUpdateTripOrigin,
     onUpdateTripDestination,
+    onUpdateIsReturnTrip,
     onUpdateTotalDistance,
     onUpdateVehicleConfigTrailers,
     commodityType: permittedCommodity?.commodityType,
diff --git a/frontend/src/features/permits/hooks/form/useApplicationFormUpdateMethods.ts b/frontend/src/features/permits/hooks/form/useApplicationFormUpdateMethods.ts
@@ -135,6 +135,13 @@ export const useApplicationFormUpdateMethods = () => {
     );
   }, [setValue]);
 
+  const onUpdateIsReturnTrip = useCallback((updatedIsReturnTrip: boolean) => {
+    setValue(
+      "permitData.permittedRoute.manualRoute.isReturnTrip",
+      updatedIsReturnTrip,
+    );
+  }, [setValue]);
+
   const onUpdateTotalDistance = useCallback((updatedTotalDistance?: RequiredOrNull<number>) => {
     setValue(
       "permitData.permittedRoute.manualRoute.totalDistance",
@@ -234,6 +241,7 @@ export const useApplicationFormUpdateMethods = () => {
     onUpdateHighwaySequence,
     onUpdateTripOrigin,
     onUpdateTripDestination,
+    onUpdateIsReturnTrip,
     onUpdateTotalDistance,
     onUpdateVehicleConfigTrailers,
     onSetCommodityType,
diff --git a/frontend/src/features/permits/pages/Application/components/form/PermitForm.tsx b/frontend/src/features/permits/pages/Application/components/form/PermitForm.tsx
@@ -50,6 +50,7 @@ export const PermitForm = () => {
     highwaySequence,
     tripOrigin,
     tripDestination,
+    isReturnTrip,
     totalDistance,
     nextAllowedSubtypes,
     powerUnitSubtypeNamesMap,
@@ -77,6 +78,7 @@ export const PermitForm = () => {
     onUpdateHighwaySequence,
     onUpdateTripOrigin,
     onUpdateTripDestination,
+    onUpdateIsReturnTrip,
     onUpdateTotalDistance,
     onUpdateVehicleConfigTrailers,
     onChangeCommodityType,
@@ -191,10 +193,12 @@ export const PermitForm = () => {
           highwaySequence={highwaySequence}
           tripOrigin={tripOrigin}
           tripDestination={tripDestination}
+          isReturnTrip={isReturnTrip}
           totalDistance={totalDistance}
           onUpdateHighwaySequence={onUpdateHighwaySequence}
           onUpdateTripOrigin={onUpdateTripOrigin}
           onUpdateTripDestination={onUpdateTripDestination}
+          onUpdateIsReturnTrip={onUpdateIsReturnTrip}
           onUpdateTotalDistance={onUpdateTotalDistance}
         />
 
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
@@ -18,23 +18,27 @@ export const TripDetailsSection = ({
   tripOrigin,
   tripDestination,
   totalDistance,
+  isReturnTrip,
   onUpdateHighwaySequence,
   onUpdateTripOrigin,
   onUpdateTripDestination,
   onUpdateTotalDistance,
+  onUpdateIsReturnTrip,
 }: {
   feature: ORBCFormFeatureType;
   permitType: PermitType;
   highwaySequence: string[];
   tripOrigin?: Nullable<string>;
   tripDestination?: Nullable<string>;
   totalDistance?: Nullable<number>;
+  isReturnTrip?: Nullable<boolean>;
   onUpdateHighwaySequence: (updatedHighwaySequence: string[]) => void;
   onUpdateTripOrigin: (updateTripOrigin: string) => void;
   onUpdateTripDestination: (updateTripDestination: string) => void;
   onUpdateTotalDistance: (
     updatedTotalDistance?: RequiredOrNull<number>,
   ) => void;
+  onUpdateIsReturnTrip: (updatedIsReturnTrip: boolean) => void;
 }) => {
   return permitType === PERMIT_TYPES.STOS || permitType === PERMIT_TYPES.MFP ? (
     <Box className="trip-details-section">
@@ -49,9 +53,11 @@ export const TripDetailsSection = ({
           tripOrigin={tripOrigin}
           tripDestination={tripDestination}
           totalDistance={totalDistance}
+          isReturnTrip={isReturnTrip}
           onUpdateTripOrigin={onUpdateTripOrigin}
           onUpdateTripDestination={onUpdateTripDestination}
           onUpdateTotalDistance={onUpdateTotalDistance}
+          onUpdateIsReturnTrip={onUpdateIsReturnTrip}
         />
 
         {permitType === PERMIT_TYPES.STOS ? (
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
@@ -1,3 +1,5 @@
+@use "../../../../../../../themes/orbcStyles";
+
 .trip-origin-destination {
   display: flex;
   flex-direction: column;
@@ -20,6 +22,41 @@
     }
   }
 
+  .return-trip-options {
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.5rem;
+
+    &__label {
+      margin: 0;
+      display: flex;
+      align-items: center;
+
+      &--return-trip {
+        margin-left: 2.5rem;
+      }
+    }
+
+    &__label-text {
+      margin: 0;
+    }
+
+    &__radio {
+      padding: 0;
+      margin-right: 0.5rem;
+
+      &:hover {
+        background-color: orbcStyles.$bc-border-grey;
+      }
+
+      &--checked {
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
   & &__info {
     margin: 1.5rem 0 0 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
@@ -1,4 +1,5 @@
 import { Controller } from "react-hook-form";
+import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 
 import "./TripOriginDestination.scss";
 import { CustomFormComponent } from "../../../../../../../common/components/form/CustomFormComponents";
@@ -25,23 +26,32 @@ export const TripOriginDestination = ({
   tripOrigin,
   tripDestination,
   totalDistance,
+  isReturnTrip,
   onUpdateTripOrigin,
   onUpdateTripDestination,
   onUpdateTotalDistance,
+  onUpdateIsReturnTrip,
 }: {
   feature: ORBCFormFeatureType;
   permitType: PermitType;
   tripOrigin?: Nullable<string>;
   tripDestination?: Nullable<string>;
   totalDistance?: Nullable<number>;
+  isReturnTrip?: Nullable<boolean>;
   onUpdateTripOrigin: (updateTripOrigin: string) => void;
   onUpdateTripDestination: (updateTripDestination: string) => void;
   onUpdateTotalDistance: (
     updatedTotalDistance?: RequiredOrNull<number>,
   ) => void;
+  onUpdateIsReturnTrip: (updatedIsReturnTrip: boolean) => void;
 }) => {
   const showExitPoint = permitType === PERMIT_TYPES.MFP;
   const showTotalDistance = permitType === PERMIT_TYPES.MFP;
+  const showReturnTrip = ([
+    PERMIT_TYPES.STOS,
+    PERMIT_TYPES.STOW,
+    PERMIT_TYPES.STWS,
+  ] as PermitType[]).includes(permitType);
 
   const origin = getDefaultRequiredVal("", tripOrigin);
 
@@ -110,6 +120,51 @@ export const TripOriginDestination = ({
         )}
       />
 
+      {showReturnTrip ? (
+        <RadioGroup
+          className="return-trip-options"
+          defaultValue={Boolean(isReturnTrip)}
+          value={Boolean(isReturnTrip)}
+          onChange={(e) => onUpdateIsReturnTrip(e.target.value === "true")}
+        >
+          <FormControlLabel
+            className="return-trip-options__label return-trip-options__label--one-way"
+            classes={{
+              label: "return-trip-options__label-text",
+            }}
+            label="One Way"
+            value={false}
+            control={
+              <Radio
+                key="one-way"
+                className="return-trip-options__radio"
+                classes={{
+                  checked: "return-trip-options__radio--checked",
+                }}
+              />
+            }
+          />
+
+          <FormControlLabel
+            className="return-trip-options__label return-trip-options__label--return-trip"
+            classes={{
+              label: "return-trip-options__label-text",
+            }}
+            label="Return Trip"
+            value={true}
+            control={
+              <Radio
+                key="return-trip"
+                className="return-trip-options__radio"
+                classes={{
+                  checked: "return-trip-options__radio--checked",
+                }}
+              />
+            }
+          />
+        </RadioGroup>
+      ) : null}
+
       {showExitPoint ? (
         <CustomFormComponent
           className="trip-origin-destination__input"
diff --git a/frontend/src/features/permits/pages/Application/components/review/TripDetails.scss b/frontend/src/features/permits/pages/Application/components/review/TripDetails.scss
@@ -18,6 +18,44 @@
       &__total-distance {
         margin-top: 1.5rem;
       }
+
+      &__is-return-trip {
+        margin-top: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .return-trip-option {
+          margin: 0;
+
+          &__radio {
+            padding: 0;
+            margin-left: -0.125rem;
+            margin-right: 0.5rem;
+            color: orbcStyles.$disabled-colour;
+
+            &--disabled {
+              color: orbcStyles.$disabled-colour;
+            }
+          }
+
+          &--disabled.return-trip-option__label {
+            margin: 0;
+            color: orbcStyles.$bc-black;
+          }
+        }
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: row;
+        margin-top: 0.5rem;
+        align-items: center;
+      }
+
+      &__info-text {
+        color: orbcStyles.$bc-black;
+      }
     }
 
     .review-highway-sequences {
diff --git a/frontend/src/features/permits/pages/Application/components/review/TripDetails.tsx b/frontend/src/features/permits/pages/Application/components/review/TripDetails.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, FormControlLabel, Radio, RadioGroup, Typography } from "@mui/material";
 
 import "./TripDetails.scss";
 import { Nullable } from "../../../../../../common/types/common";
@@ -19,6 +19,7 @@ export const TripDetails = ({
   const origin = getDefaultRequiredVal("", routeDetails?.manualRoute?.origin);
   const destination = getDefaultRequiredVal("", routeDetails?.manualRoute?.destination);
   const exitPoint = getDefaultRequiredVal("", routeDetails?.manualRoute?.exitPoint);
+  const isReturnTrip = getDefaultRequiredVal(false, routeDetails?.manualRoute?.isReturnTrip);
   const totalDistanceStr = getDefaultRequiredVal(0, routeDetails?.manualRoute?.totalDistance).toFixed(2);
   const highwaySequence = getDefaultRequiredVal([], routeDetails?.manualRoute?.highwaySequence);
   const details = getDefaultRequiredVal("", routeDetails?.routeDetails);
@@ -37,6 +38,10 @@ export const TripDetails = ({
           routeDetails?.manualRoute?.exitPoint,
           oldRouteDetails?.manualRoute?.exitPoint,
         ),
+        isReturnTrip: areValuesDifferent(
+          routeDetails?.manualRoute?.isReturnTrip,
+          oldRouteDetails?.manualRoute?.isReturnTrip,
+        ),
         totalDistance: areValuesDifferent(
           totalDistanceStr,
           getDefaultRequiredVal(0, oldRouteDetails?.manualRoute?.totalDistance).toFixed(2),
@@ -55,6 +60,7 @@ export const TripDetails = ({
         origin: false,
         destination: false,
         exitPoint: false,
+        isReturnTrip: false,
         totalDistance: false,
         highwaySequences: false,
         routeDetails: false,
@@ -109,6 +115,40 @@ export const TripDetails = ({
               </div>
             ) : null}
 
+            {isReturnTrip ? (
+              <div className="manual-route__is-return-trip">
+                <RadioGroup
+                  className="manual-route__radio-group"
+                  defaultValue={isReturnTrip}
+                >
+                  <FormControlLabel
+                    key="is-return-trip"
+                    className="return-trip-option"
+                    disabled={true}
+                    classes={{
+                      disabled: "return-trip-option--disabled",
+                      label: "return-trip-option__label",
+                    }}
+                    label="Return Trip"
+                    value={isReturnTrip}
+                    control={
+                      <Radio
+                        key="is-return-trip-true"
+                        className="return-trip-option__radio return-trip-option__radio--disabled"
+                      />}
+                  />
+                </RadioGroup>
+
+                <Typography className="manual-route__info">
+                  <span className="manual-route__info-text">
+                    Permitted for return trip along the same route.
+                  </span>
+
+                  {showDiffChip(changedFields.isReturnTrip)}
+                </Typography>
+              </div>
+            ) : null}
+
             {exitPoint ? (
               <div className="manual-route__exit">
                 <Typography className="manual-route__label">
diff --git a/frontend/src/features/permits/types/PermittedRoute.ts b/frontend/src/features/permits/types/PermittedRoute.ts
