Skip to content

Commit e254ea3

Browse files
RRanathRRanath
authored
Merge pull request #3777 from bcgov/NDT-586-Add-CBC-status-infographic-on-the-All-dashboard
chore: add cbc infographic to all dashboard
2 parents 00a7420 + 2362de9 commit e254ea3

10 files changed

+193
-171
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# [1.222.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.221.4...v1.222.0) (2025-01-10)
2+
3+
### Features
4+
5+
- add sprint done to columns checked for merge conflict ([d58cebf](https://github.com/bcgov/CONN-CCBC-portal/commit/d58cebf9e6ccaf00266c292c9ad7ddd0f88fcc82))
6+
17
## [1.221.4](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.221.3...v1.221.4) (2025-01-06)
28

39
### Bug Fixes

‎app/components/Analyst/ApplicationHeader.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import ChangeStatus from 'components/Analyst/ChangeStatus';
66
import { useFeature } from '@growthbook/growthbook-react';
77
import EditProjectDescription from './EditProjectDescription';
88
import StatusInformationIcon from './StatusInformationIcon';
9-
import StatusInformationModal from './StatusInformationModal';
109
import AssignProjectType from './AssignProjectType';
1110
import PendingChangeRequest from './PendingChangeRequest/PendingChangeRequest';
1211

@@ -175,7 +174,7 @@ const ApplicationHeader: React.FC<Props> = ({ query }) => {
175174
}
176175
statusList={allApplicationStatusTypes?.nodes}
177176
/>
178-
<StatusInformationIcon ModalComponent={StatusInformationModal} />
177+
<StatusInformationIcon type="ccbc" />
179178
</StyledItem>
180179
<StyledItem>
181180
<StyledLabel htmlFor="change-status">External Status</StyledLabel>

‎app/components/Analyst/CBC/CbcHeader.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import CbcEditProjectDescription from './CbcEditProjectDescription';
66
import CbcAssignProjectType from './CbcAssignProjectType';
77
import CbcEditProjectNumber from './CbcEditProjectNumber';
88
import StatusInformationIcon from '../StatusInformationIcon';
9-
import CbcStatusInformationModal from './CbcStatusInformationModal';
109

1110
const StyledCallout = styled.div`
1211
margin-bottom: 0.5em;
@@ -142,7 +141,7 @@ const CbcHeader: React.FC<Props> = ({ query, isFormEditable = false }) => {
142141
]}
143142
isFormEditable={isFormEditable}
144143
/>
145-
<StatusInformationIcon ModalComponent={CbcStatusInformationModal} />
144+
<StatusInformationIcon type="cbc" />
146145
</StyledItem>
147146
<StyledProjectType>
148147
<StyledLabel htmlFor="assign-project-type">Project Type</StyledLabel>

‎app/components/Analyst/CBC/CbcStatusInformationModal.tsx ‎app/components/Analyst/CBC/CbcStatusInformation.tsx

+5-19
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
11
import Image from 'next/image';
22
import styled from 'styled-components';
33
import Chip from '@mui/material/Chip';
4-
import Modal from 'components/Modal';
54
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
65
import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
76

8-
interface Props {
9-
id?: string;
10-
title?: string;
11-
close: () => void;
12-
isOpen: boolean;
13-
}
14-
157
const StyledIcon = styled(FontAwesomeIcon)`
168
color: ${(props) => props.theme.color.primaryYellow};
179
`;
1810

19-
// Styled div whose children are split to two columns
2011
const TwoColumnDiv = styled.div`
2112
display: grid;
2213
grid-template-columns: 100px 1fr;
2314
gap: 16px;
2415
align-items: center;
2516
`;
2617

27-
const CbcStatusInformationModal: React.FC<Props> = ({
28-
id = 'cbc-status-information-modal',
29-
title = 'Description of Statuses and Triggers',
30-
isOpen,
31-
close,
32-
}) => {
18+
const CbcStatusInformation = () => {
3319
const infoGraphicUrl = '/images/cbcStateMachine.svg';
3420

3521
return (
36-
<Modal id={id} onClose={close} open={isOpen} title={title}>
22+
<>
3723
<div>
3824
<a href={infoGraphicUrl} target="_blank" rel="noopener noreferrer">
3925
<Image
@@ -44,7 +30,7 @@ const CbcStatusInformationModal: React.FC<Props> = ({
4430
/>
4531
</a>
4632
</div>
47-
<div style={{ paddingBottom: '16px' }}>
33+
<div style={{ paddingBottom: '16px', maxWidth: '1000px' }}>
4834
<StyledIcon data-testid="light-bulb-icon" icon={faLightbulb} />{' '}
4935
<span>
5036
The internal status for CBC projects mirrors the external status and
@@ -66,8 +52,8 @@ const CbcStatusInformationModal: React.FC<Props> = ({
6652
/>
6753
<span>Applicant has withdrawn their submitted application</span>
6854
</TwoColumnDiv>
69-
</Modal>
55+
</>
7056
);
7157
};
7258

73-
export default CbcStatusInformationModal;
59+
export default CbcStatusInformation;

‎app/components/Analyst/CcbcStatusInformation.tsx

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import Image from 'next/image';
2+
import styled from 'styled-components';
3+
import Chip from '@mui/material/Chip';
4+
5+
const StyledTable = styled.table`
6+
border: none;
7+
margin-left: auto;
8+
margin-right: auto;
9+
max-width: 1000px;
10+
padding-right: 75px;
11+
padding-left: 75px;
12+
margin-bottom: 52px;
13+
th,
14+
td {
15+
border: none;
16+
padding-bottom: 2px;
17+
padding-top: 2px;
18+
}
19+
`;
20+
21+
const CcbcStatusInformation = () => {
22+
const infoGraphicUrl = '/images/stateMachine.svg';
23+
return (
24+
<>
25+
<div style={{ height: '150px' }}>
26+
<a href={infoGraphicUrl} target="_blank" rel="noopener noreferrer">
27+
<Image
28+
src={infoGraphicUrl}
29+
alt="The happy path for a project from application to completion. The external status is what an applicant sees and the internal status is what you the analyst sees. After an intake closes, both internal and external status are Received. After eligibility screening is assigned, the internal status can be changed to Screening but the external status remains Received. After it is determined to be eligible, the internal status can be changed to Assessment but the external status remains Received. If it is in the selection package for the Minister, the internal status can be changed to Recommendation but the external status remains Received. After the Minister states Approved in Annex A of the selection package, the internal status can be changed to Conditionally Approved. The external status can only be changed to Conditionally Approved when the applicant responds to the Letter of Conditional Approval, accepting the offer. When the Funding Agreement is signed by both the Recipient and the Province, the internal and external statuses can be changed to Agreement Signed. After a final implementation report is received and the final claim is processed, both statuses can be changed to Complete."
30+
width={1000}
31+
height={140}
32+
/>
33+
</a>
34+
</div>
35+
<div>
36+
<StyledTable>
37+
<thead>
38+
<tr>
39+
<th
40+
style={{ fontFamily: 'BCSans, Verdana, Arial, sans-serif' }}
41+
colSpan={2}
42+
>
43+
Other statuses
44+
</th>
45+
</tr>
46+
</thead>
47+
<tbody>
48+
<tr>
49+
<td>
50+
<Chip
51+
label="On hold"
52+
sx={{
53+
bgcolor: '#FFECC2',
54+
color: '#A37000',
55+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
56+
}}
57+
/>
58+
</td>
59+
<td>
60+
Application is not rejected, but is not being actively reviewed.
61+
For example, an applicant has been given 30 days to send a
62+
community letter of support, and they haven&apos;t finished by
63+
the deadline.
64+
</td>
65+
</tr>
66+
<tr>
67+
<td>
68+
<Chip
69+
label="Not selected"
70+
sx={{
71+
bgcolor: '#E8E8E8',
72+
color: '#414141',
73+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
74+
}}
75+
/>
76+
</td>
77+
<td>
78+
Application was not selected by the BC Minister for conditional
79+
approval and is no longer being considered as a CCBC project.
80+
</td>
81+
</tr>
82+
<tr>
83+
<td>
84+
<Chip
85+
label="Withdrawn"
86+
sx={{
87+
bgcolor: '#E8E8E8',
88+
color: '#414141',
89+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
90+
}}
91+
/>
92+
</td>
93+
<td>
94+
Applicant has withdrawn their submitted application and should
95+
not be reviewed or assessed by NWBC and ISED.
96+
</td>
97+
</tr>
98+
<tr>
99+
<td>
100+
<Chip
101+
label="Cancelled"
102+
sx={{
103+
bgcolor: '#E8E8E8',
104+
color: '#414141',
105+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
106+
}}
107+
/>
108+
</td>
109+
<td>Project deliverables not achieved.</td>
110+
</tr>
111+
<tr>
112+
<td>
113+
<Chip
114+
label="Draft"
115+
sx={{
116+
bgcolor: '#606060e6',
117+
color: '#FFFFFF',
118+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
119+
}}
120+
/>
121+
</td>
122+
<td>
123+
Applicant has created an application, visible only to
124+
applicants.
125+
</td>
126+
</tr>
127+
<tr>
128+
<td>
129+
<Chip
130+
label="Submitted"
131+
sx={{
132+
bgcolor: '#345FA9',
133+
color: '#FFFFFF',
134+
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
135+
}}
136+
/>
137+
</td>
138+
<td>
139+
Application submitted on final page of form, but can still be
140+
edited until the intake closes.
141+
</td>
142+
</tr>
143+
</tbody>
144+
</StyledTable>
145+
</div>
146+
</>
147+
);
148+
};
149+
150+
export default CcbcStatusInformation;

‎app/components/Analyst/StatusInformationIcon.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
22
import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
33
import styled from 'styled-components';
44
import useModal from 'lib/helpers/useModal';
5+
import StatusInformationModal from './StatusInformationModal';
56

67
const StyledFontAwesome = styled(FontAwesomeIcon)`
78
margin-left: 4px;
89
`;
910

10-
const StatusInformationIcon = ({ ModalComponent }) => {
11+
interface StatusInformationIconProps {
12+
type?: 'cbc' | 'ccbc';
13+
}
14+
15+
const StatusInformationIcon = ({ type }: StatusInformationIconProps) => {
1116
const modalProps = useModal();
1217

1318
const handleClick = () => {
@@ -22,7 +27,7 @@ const StatusInformationIcon = ({ ModalComponent }) => {
2227

2328
return (
2429
<>
25-
<ModalComponent {...modalProps} />
30+
<StatusInformationModal type={type} {...modalProps} />
2631
<div
2732
role="button"
2833
tabIndex={0}

0 commit comments

Comments
 (0)