ORV2-5060: Frontend enhancement on permit review/confirm page for return trip (#2223)

Author: zgong-gov

frontend/src/features/permits/pages/Application/components/review/PermitReview.tsx

@@ -201,6 +201,7 @@ export const PermitReview = (props: PermitReviewProps) => {
           routeDetails={props.route}
           oldRouteDetails={props.oldFields?.permitData?.permittedRoute}
           showChangedFields={props.showChangedFields}
+          permitType={props.permitType}
         />
 
         <ThirdPartyLiabilitySection

frontend/src/features/permits/pages/Application/components/review/TripDetails.scss

@@ -46,6 +46,11 @@
         }
       }
 
+      &__radio-group {
+        display: flex;
+        flex-direction: row;
+      }
+
       &__info {
         display: flex;
         flex-direction: row;

frontend/src/features/permits/pages/Application/components/review/TripDetails.tsx

@@ -6,14 +6,17 @@ import { DiffChip } from "./DiffChip";
 import { PermittedRoute } from "../../../../types/PermittedRoute";
 import { getDefaultRequiredVal } from "../../../../../../common/helpers/util";
 import { areOrderedSequencesEqual, areValuesDifferent } from "../../../../../../common/helpers/equality";
+import { PERMIT_TYPES, PermitType } from "../../../../types/PermitType";
 
 export const TripDetails = ({
   routeDetails,
   oldRouteDetails,
+  permitType,
   showChangedFields = false,
 }: {
   routeDetails?: Nullable<PermittedRoute>;
   oldRouteDetails?: Nullable<PermittedRoute>;
+  permitType?: Nullable<PermitType>;
   showChangedFields?: boolean;
 }) => {
   const origin = getDefaultRequiredVal("", routeDetails?.manualRoute?.origin);
@@ -70,6 +73,12 @@ export const TripDetails = ({
     return show ? <DiffChip /> : null;
   };
 
+  const showReturnTrip = permitType && ([
+    PERMIT_TYPES.STOS,
+    PERMIT_TYPES.STOW,
+    PERMIT_TYPES.STWS,
+  ] as PermitType[]).includes(permitType);
+
   return routeDetails ? (
     <Box className="review-trip-details">
       <Box className="review-trip-details__header">
@@ -115,7 +124,7 @@ export const TripDetails = ({
               </div>
             ) : null}
 
-            {isReturnTrip ? (
+            {showReturnTrip ? (
               <div className="manual-route__is-return-trip">
                 <RadioGroup
                   className="manual-route__radio-group"
@@ -129,23 +138,27 @@ export const TripDetails = ({
                       disabled: "return-trip-option--disabled",
                       label: "return-trip-option__label",
                     }}
-                    label="Return Trip"
+                    label={isReturnTrip ? "Return Trip" : "One Way"}
                     value={isReturnTrip}
                     control={
                       <Radio
                         key="is-return-trip-true"
                         className="return-trip-option__radio return-trip-option__radio--disabled"
                       />}
                   />
+
+                  {showDiffChip(!isReturnTrip && changedFields.isReturnTrip)}
                 </RadioGroup>
 
-                <Typography className="manual-route__info">
-                  <span className="manual-route__info-text">
-                    Permitted for return trip along the same route.
-                  </span>
+                {isReturnTrip ? (
+                  <Typography className="manual-route__info">
+                    <span className="manual-route__info-text">
+                      Permitted for return trip along the same route.
+                    </span>
 
-                  {showDiffChip(changedFields.isReturnTrip)}
-                </Typography>
+                    {showDiffChip(changedFields.isReturnTrip)}
+                  </Typography>
+                ) : null}
               </div>
             ) : null}