ORV2-2834 - FE: Update: Change Start Application Menu and Steps (#1635)

Co-authored-by: GlenAOT <[email protected]>
bcgov · Oct 21, 2024 · 63b9ed9 · 63b9ed9
1 parent cc90fa6
commit 63b9ed9
Show file tree

Hide file tree

Showing 15 changed files with 572 additions and 217 deletions.
diff --git a/frontend/src/features/permits/components/feeSummary/FeeSummary.tsx b/frontend/src/features/permits/components/feeSummary/FeeSummary.tsx
@@ -1,6 +1,6 @@
 import { Nullable } from "../../../../common/types/common";
 import { feeSummaryDisplayText } from "../../helpers/feeSummary";
-import { PermitType, permitTypeDisplayText } from "../../types/PermitType";
+import { getPermitTypeName, PermitType } from "../../types/PermitType";
 import "./FeeSummary.scss";
 
 export const FeeSummary = ({
@@ -14,7 +14,11 @@ export const FeeSummary = ({
   permitDuration?: number;
   hideDescriptions?: boolean;
 }) => {
-  const feeDisplayText = feeSummaryDisplayText(feeSummary, permitDuration, permitType);
+  const feeDisplayText = feeSummaryDisplayText(
+    feeSummary,
+    permitDuration,
+    permitType,
+  );
 
   return (
     <div className="fee-summary">
@@ -28,17 +32,20 @@ export const FeeSummary = ({
             </div>
 
             <div className="table-row">
-              <div className="table-row__td" data-testid="fee-summary-permit-type">
-                {permitTypeDisplayText(permitType)}
+              <div
+                className="table-row__td"
+                data-testid="fee-summary-permit-type"
+              >
+                {getPermitTypeName(permitType)}
               </div>
-              
+
               <div className="table-row__td" data-testid="fee-summary-price">
                 {feeDisplayText}
               </div>
             </div>
           </>
         )}
-        
+
         <div className="table-row table-row--total">
           <div className="table-row__tf">Total (CAD)</div>
           <div className="table-row__tf" data-testid="fee-summary-total">

diff --git a/frontend/src/features/permits/components/form/ApplicationDetails.tsx b/frontend/src/features/permits/components/form/ApplicationDetails.tsx
@@ -4,7 +4,7 @@ import { Dayjs } from "dayjs";
 import { CompanyBanner } from "../../../../common/components/banners/CompanyBanner";
 import { CompanyInformation } from "./CompanyInformation";
 import "./ApplicationDetails.scss";
-import { permitTypeDisplayText } from "../../types/PermitType";
+import { getPermitTypeName } from "../../types/PermitType";
 import { CompanyProfile } from "../../../manageProfile/types/manageProfile";
 import { Nullable } from "../../../../common/types/common";
 import {
@@ -35,7 +35,7 @@ export const ApplicationDetails = ({
   isAmendAction?: Nullable<boolean>;
   doingBusinessAs?: Nullable<string>;
 }) => {
-  const applicationName = permitTypeDisplayText(
+  const applicationName = getPermitTypeName(
     getDefaultRequiredVal("", permitType),
   );
 

diff --git a/frontend/src/features/permits/components/form/tests/ApplicationDetails.test.tsx b/frontend/src/features/permits/components/form/tests/ApplicationDetails.test.tsx
@@ -1,4 +1,4 @@
-import { permitTypeDisplayText } from "../../../types/PermitType";
+import { getPermitTypeName } from "../../../types/PermitType";
 import {
   DATE_FORMATS,
   dayjsToLocalStr,
@@ -57,7 +57,7 @@ describe("Application Details Display", () => {
     );
 
     // Assert
-    expect(await title()).toHaveTextContent(permitTypeDisplayText(permitType));
+    expect(await title()).toHaveTextContent(getPermitTypeName(permitType));
     expect(await applicationNumber()).toHaveTextContent(
       defaultApplicationNumber,
     );

diff --git a/frontend/src/features/permits/constants/constants.ts b/frontend/src/features/permits/constants/constants.ts
@@ -1,5 +1,14 @@
 import { VEHICLE_TYPES } from "../../manageVehicles/types/Vehicle";
-import { EMPTY_PERMIT_TYPE_SELECT, PERMIT_TYPES, getPermitTypeName } from "../types/PermitType";
+import {
+  getPermitCategoryName,
+  PERMIT_CATEGORIES,
+  PermitCategory,
+} from "../types/PermitCategory";
+import {
+  PermitType,
+  TERM_PERMIT_LIST,
+  getPermitTypeShortName,
+} from "../types/PermitType";
 
 export const VEHICLE_CHOOSE_FROM = {
   UNIT_NUMBER: "unitNumber",
@@ -19,12 +28,45 @@ export const VEHICLE_TYPE_OPTIONS = [
   { value: VEHICLE_TYPES.TRAILER, label: "Trailer" },
 ];
 
-export const PERMIT_TYPE_CHOOSE_FROM_OPTIONS = [
-  { value: EMPTY_PERMIT_TYPE_SELECT, label: "Select" },
-  { value: PERMIT_TYPES.TROS, label: getPermitTypeName(PERMIT_TYPES.TROS) },
-  { value: PERMIT_TYPES.TROW, label: getPermitTypeName(PERMIT_TYPES.TROW) },
+export const ALL_PERMIT_TYPE_CHOOSE_FROM_OPTIONS: PermitTypeChooseFromItem[] = [
+  {
+    value: PERMIT_CATEGORIES.TERM,
+    label: getPermitCategoryName(PERMIT_CATEGORIES.TERM),
+    items: TERM_PERMIT_LIST.map((permitType: PermitType) => ({
+      value: permitType,
+      label: getPermitTypeShortName(permitType),
+    })),
+  },
+  /* TODO uncomment these when required */
+  // {
+  //   value: PERMIT_CATEGORIES.SINGLE_TRIP,
+  //   label: getPermitCategoryName(PERMIT_CATEGORIES.SINGLE_TRIP),
+  //   items: SINGLE_TRIP_PERMIT_LIST.map((permitType: PermitType) => ({
+  //     value: permitType,
+  //     label: getPermitTypeShortName(permitType),
+  //   })),
+  // },
+  // {
+  //   value: PERMIT_CATEGORIES.NON_RESIDENT,
+  //   label: getPermitCategoryName(PERMIT_CATEGORIES.NON_RESIDENT),
+  //   items: NON_RESIDENT_PERMIT_LIST.map((permitType: PermitType) => ({
+  //     value: permitType,
+  //     label: getPermitTypeShortName(permitType),
+  //   })),
+  // },
+  // {
+  //   value: PERMIT_TYPES.MFP,
+  //   label: getPermitTypeShortName(PERMIT_TYPES.MFP),
+  // },
 ];
 
+export interface PermitTypeChooseFromItem {
+  value: PermitType | PermitCategory;
+  label: string;
+  items?: PermitTypeChooseFromItem[];
+  category?: string;
+}
+
 export const BASE_DAYS_IN_YEAR = 365;
 export const COMMON_MIN_DURATION = 30;
 export const TERM_DURATION_INTERVAL_DAYS = 30;

diff --git a/frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.scss b/frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.scss
diff --git a/frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.tsx b/frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.tsx
diff --git a/...d/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.scss b/...d/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.scss
@@ -1,8 +1,132 @@
+@import "../../../../../../themes/orbcStyles.scss";
+
+$select-width: 347px;
+
 .start-application-action {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  width: 100%;
+  & &__label {
+    font-weight: bold;
+  }
+
+  &__control {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    padding-top: .5rem;
+  }
+
+  & &__input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $white;
+    padding: .5rem .75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    border: 2px solid;
+    border-color: $bc-text-box-border-grey;
+    color: $bc-black;
+    margin-bottom: 0;
+    width: $select-width;
+
+    &:hover {
+      background-color: $white;
+    }
+
+    &:active, &:focus {
+      border-color: $border-blue;
+      outline: none;
+    }
+
+
+    &--error {
+      border-color: $bc-red; 
+    }
+
+    &--open {
+      border-radius: 4px 4px 0px 0px;
+      border-bottom: none;
+      border-color: $border-blue;
+      // prevent input text shifting when menu is open
+      padding-top: 6px;
+    }
+
+  }
+   &__input-text {
+    text-align: left;
+    width: 40ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__input-tooltip {
+    max-width: fit-content;
+  }
+
+  &__menu-list {
+    &.MuiList-root {
+      padding: 0;
+
+      & > * {
+        border-top: 1px solid $bc-border-grey;
+      }
+    }
+  }
+
+  &__menu-item:not(:last-child) {
+    &.MuiButtonBase-root {
+      border-bottom: 1px solid $bc-border-grey;
+    }
+  }
+
+  &__menu-container {
+    &.MuiPaper-root {
+      border-radius: 0;
+      box-shadow: 0 0.5rem 0.5rem -0.2rem #00000029;
+      // prevent menu from being wider than the input element itself
+      width: calc($select-width - 4px);
+      transition-duration: 0ms;
+    }
+
+    &--open {
+      &.MuiPaper-root {
+        border: 2px solid;
+        border-top: none;
+        border-radius: 0px 0px 2px 2px;
+        border-color: $border-blue;
+      }
+    }
+  }
+
+  // NESTED MENUS
+
+  &__nested-menu-list {
+    &.MuiList-root.MuiMenu-list {
+      padding: 0;
+      max-height: none;
+    }
+  }
+
+
+  &__nested-menu-item:not(:last-child) {
+    &.MuiButtonBase-root {
+      border-bottom: 1px solid $bc-border-grey;
+    }
+  }
+
+  &__nested-menu-container {
+    &.MuiPaper-root {
+      border-radius: 4px;
+      box-shadow: $bc-shadow;
+      width: calc($select-width - 4px);
+      transition-duration: 0ms;
+      border: 2px solid;
+      border-color: $border-blue;
+      margin-left: 8px;
+    }
+  }
+
+  // SUBMIT BUTTON
 
   & &__btn {
     margin-left: 1.5rem;
@@ -11,12 +135,22 @@
     font-size: 1rem;
     font-weight: bold;
   }
+
+  &__error-msg {
+    position: absolute;
+    color: $bc-red
+  }
 }
 
-@media (width < 1200px) {
-  .start-application-action {
-    flex-direction: column;
-    align-items: flex-start;
+@media (width < 600px) {
+  .start-application-action  {
+    &__control {
+      flex-direction: column;
+    }
+
+    & &__input {
+      width: 100%;
+    }
 
     & &__btn {
       margin-left: 0;