Skip to content

Commit 63b9ed9

Browse files
glen-aotglen-aot
authored
ORV2-2834 - FE: Update: Change Start Application Menu and Steps (#1635)
Co-authored-by: GlenAOT <[email protected]>
1 parent cc90fa6 commit 63b9ed9

15 files changed

+572
-217
lines changed

‎frontend/src/features/permits/components/feeSummary/FeeSummary.tsx

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Nullable } from "../../../../common/types/common";
22
import { feeSummaryDisplayText } from "../../helpers/feeSummary";
3-
import { PermitType, permitTypeDisplayText } from "../../types/PermitType";
3+
import { getPermitTypeName, PermitType } from "../../types/PermitType";
44
import "./FeeSummary.scss";
55

66
export const FeeSummary = ({
@@ -14,7 +14,11 @@ export const FeeSummary = ({
1414
permitDuration?: number;
1515
hideDescriptions?: boolean;
1616
}) => {
17-
const feeDisplayText = feeSummaryDisplayText(feeSummary, permitDuration, permitType);
17+
const feeDisplayText = feeSummaryDisplayText(
18+
feeSummary,
19+
permitDuration,
20+
permitType,
21+
);
1822

1923
return (
2024
<div className="fee-summary">
@@ -28,17 +32,20 @@ export const FeeSummary = ({
2832
</div>
2933

3034
<div className="table-row">
31-
<div className="table-row__td" data-testid="fee-summary-permit-type">
32-
{permitTypeDisplayText(permitType)}
35+
<div
36+
className="table-row__td"
37+
data-testid="fee-summary-permit-type"
38+
>
39+
{getPermitTypeName(permitType)}
3340
</div>
34-
41+
3542
<div className="table-row__td" data-testid="fee-summary-price">
3643
{feeDisplayText}
3744
</div>
3845
</div>
3946
</>
4047
)}
41-
48+
4249
<div className="table-row table-row--total">
4350
<div className="table-row__tf">Total (CAD)</div>
4451
<div className="table-row__tf" data-testid="fee-summary-total">

‎frontend/src/features/permits/components/form/ApplicationDetails.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Dayjs } from "dayjs";
44
import { CompanyBanner } from "../../../../common/components/banners/CompanyBanner";
55
import { CompanyInformation } from "./CompanyInformation";
66
import "./ApplicationDetails.scss";
7-
import { permitTypeDisplayText } from "../../types/PermitType";
7+
import { getPermitTypeName } from "../../types/PermitType";
88
import { CompanyProfile } from "../../../manageProfile/types/manageProfile";
99
import { Nullable } from "../../../../common/types/common";
1010
import {
@@ -35,7 +35,7 @@ export const ApplicationDetails = ({
3535
isAmendAction?: Nullable<boolean>;
3636
doingBusinessAs?: Nullable<string>;
3737
}) => {
38-
const applicationName = permitTypeDisplayText(
38+
const applicationName = getPermitTypeName(
3939
getDefaultRequiredVal("", permitType),
4040
);
4141

‎frontend/src/features/permits/components/form/tests/ApplicationDetails.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { permitTypeDisplayText } from "../../../types/PermitType";
1+
import { getPermitTypeName } from "../../../types/PermitType";
22
import {
33
DATE_FORMATS,
44
dayjsToLocalStr,
@@ -57,7 +57,7 @@ describe("Application Details Display", () => {
5757
);
5858

5959
// Assert
60-
expect(await title()).toHaveTextContent(permitTypeDisplayText(permitType));
60+
expect(await title()).toHaveTextContent(getPermitTypeName(permitType));
6161
expect(await applicationNumber()).toHaveTextContent(
6262
defaultApplicationNumber,
6363
);

‎frontend/src/features/permits/constants/constants.ts

+47-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import { VEHICLE_TYPES } from "../../manageVehicles/types/Vehicle";
2-
import { EMPTY_PERMIT_TYPE_SELECT, PERMIT_TYPES, getPermitTypeName } from "../types/PermitType";
2+
import {
3+
getPermitCategoryName,
4+
PERMIT_CATEGORIES,
5+
PermitCategory,
6+
} from "../types/PermitCategory";
7+
import {
8+
PermitType,
9+
TERM_PERMIT_LIST,
10+
getPermitTypeShortName,
11+
} from "../types/PermitType";
312

413
export const VEHICLE_CHOOSE_FROM = {
514
UNIT_NUMBER: "unitNumber",
@@ -19,12 +28,45 @@ export const VEHICLE_TYPE_OPTIONS = [
1928
{ value: VEHICLE_TYPES.TRAILER, label: "Trailer" },
2029
];
2130

22-
export const PERMIT_TYPE_CHOOSE_FROM_OPTIONS = [
23-
{ value: EMPTY_PERMIT_TYPE_SELECT, label: "Select" },
24-
{ value: PERMIT_TYPES.TROS, label: getPermitTypeName(PERMIT_TYPES.TROS) },
25-
{ value: PERMIT_TYPES.TROW, label: getPermitTypeName(PERMIT_TYPES.TROW) },
31+
export const ALL_PERMIT_TYPE_CHOOSE_FROM_OPTIONS: PermitTypeChooseFromItem[] = [
32+
{
33+
value: PERMIT_CATEGORIES.TERM,
34+
label: getPermitCategoryName(PERMIT_CATEGORIES.TERM),
35+
items: TERM_PERMIT_LIST.map((permitType: PermitType) => ({
36+
value: permitType,
37+
label: getPermitTypeShortName(permitType),
38+
})),
39+
},
40+
/* TODO uncomment these when required */
41+
// {
42+
// value: PERMIT_CATEGORIES.SINGLE_TRIP,
43+
// label: getPermitCategoryName(PERMIT_CATEGORIES.SINGLE_TRIP),
44+
// items: SINGLE_TRIP_PERMIT_LIST.map((permitType: PermitType) => ({
45+
// value: permitType,
46+
// label: getPermitTypeShortName(permitType),
47+
// })),
48+
// },
49+
// {
50+
// value: PERMIT_CATEGORIES.NON_RESIDENT,
51+
// label: getPermitCategoryName(PERMIT_CATEGORIES.NON_RESIDENT),
52+
// items: NON_RESIDENT_PERMIT_LIST.map((permitType: PermitType) => ({
53+
// value: permitType,
54+
// label: getPermitTypeShortName(permitType),
55+
// })),
56+
// },
57+
// {
58+
// value: PERMIT_TYPES.MFP,
59+
// label: getPermitTypeShortName(PERMIT_TYPES.MFP),
60+
// },
2661
];
2762

63+
export interface PermitTypeChooseFromItem {
64+
value: PermitType | PermitCategory;
65+
label: string;
66+
items?: PermitTypeChooseFromItem[];
67+
category?: string;
68+
}
69+
2870
export const BASE_DAYS_IN_YEAR = 365;
2971
export const COMMON_MIN_DURATION = 30;
3072
export const TERM_DURATION_INTERVAL_DAYS = 30;

‎frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.scss

-27
This file was deleted.

‎frontend/src/features/permits/pages/Application/components/dashboard/SelectPermitType.tsx

-36
This file was deleted.

‎frontend/src/features/permits/pages/Application/components/dashboard/StartApplicationAction.scss

+142-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,132 @@
1+
@import "../../../../../../themes/orbcStyles.scss";
2+
3+
$select-width: 347px;
4+
15
.start-application-action {
2-
display: flex;
3-
flex-direction: row;
4-
align-items: flex-end;
5-
width: 100%;
6+
& &__label {
7+
font-weight: bold;
8+
}
9+
10+
&__control {
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: stretch;
14+
padding-top: .5rem;
15+
}
16+
17+
& &__input {
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
background-color: $white;
22+
padding: .5rem .75rem;
23+
white-space: nowrap;
24+
overflow: hidden;
25+
border: 2px solid;
26+
border-color: $bc-text-box-border-grey;
27+
color: $bc-black;
28+
margin-bottom: 0;
29+
width: $select-width;
30+
31+
&:hover {
32+
background-color: $white;
33+
}
34+
35+
&:active, &:focus {
36+
border-color: $border-blue;
37+
outline: none;
38+
}
39+
40+
41+
&--error {
42+
border-color: $bc-red;
43+
}
44+
45+
&--open {
46+
border-radius: 4px 4px 0px 0px;
47+
border-bottom: none;
48+
border-color: $border-blue;
49+
// prevent input text shifting when menu is open
50+
padding-top: 6px;
51+
}
52+
53+
}
54+
&__input-text {
55+
text-align: left;
56+
width: 40ch;
57+
white-space: nowrap;
58+
overflow: hidden;
59+
text-overflow: ellipsis;
60+
}
61+
62+
&__input-tooltip {
63+
max-width: fit-content;
64+
}
65+
66+
&__menu-list {
67+
&.MuiList-root {
68+
padding: 0;
69+
70+
& > * {
71+
border-top: 1px solid $bc-border-grey;
72+
}
73+
}
74+
}
75+
76+
&__menu-item:not(:last-child) {
77+
&.MuiButtonBase-root {
78+
border-bottom: 1px solid $bc-border-grey;
79+
}
80+
}
81+
82+
&__menu-container {
83+
&.MuiPaper-root {
84+
border-radius: 0;
85+
box-shadow: 0 0.5rem 0.5rem -0.2rem #00000029;
86+
// prevent menu from being wider than the input element itself
87+
width: calc($select-width - 4px);
88+
transition-duration: 0ms;
89+
}
90+
91+
&--open {
92+
&.MuiPaper-root {
93+
border: 2px solid;
94+
border-top: none;
95+
border-radius: 0px 0px 2px 2px;
96+
border-color: $border-blue;
97+
}
98+
}
99+
}
100+
101+
// NESTED MENUS
102+
103+
&__nested-menu-list {
104+
&.MuiList-root.MuiMenu-list {
105+
padding: 0;
106+
max-height: none;
107+
}
108+
}
109+
110+
111+
&__nested-menu-item:not(:last-child) {
112+
&.MuiButtonBase-root {
113+
border-bottom: 1px solid $bc-border-grey;
114+
}
115+
}
116+
117+
&__nested-menu-container {
118+
&.MuiPaper-root {
119+
border-radius: 4px;
120+
box-shadow: $bc-shadow;
121+
width: calc($select-width - 4px);
122+
transition-duration: 0ms;
123+
border: 2px solid;
124+
border-color: $border-blue;
125+
margin-left: 8px;
126+
}
127+
}
128+
129+
// SUBMIT BUTTON
6130

7131
& &__btn {
8132
margin-left: 1.5rem;
@@ -11,12 +135,22 @@
11135
font-size: 1rem;
12136
font-weight: bold;
13137
}
138+
139+
&__error-msg {
140+
position: absolute;
141+
color: $bc-red
142+
}
14143
}
15144

16-
@media (width < 1200px) {
17-
.start-application-action {
18-
flex-direction: column;
19-
align-items: flex-start;
145+
@media (width < 600px) {
146+
.start-application-action {
147+
&__control {
148+
flex-direction: column;
149+
}
150+
151+
& &__input {
152+
width: 100%;
153+
}
20154

21155
& &__btn {
22156
margin-left: 0;

0 commit comments

Comments
 (0)