Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add cbc infographic to all dashboard #3777

Merged
merged 3 commits into from
Jan 10, 2025
+193 −171
Merged

chore: add cbc infographic to all dashboard #3777

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd7be88
chore: add cbc infographic to all dashboard
RRanath Jan 8, 2025
245c7e1
Merge branch 'main' into NDT-586-Add-CBC-status-infographic-on-the-Al…
RRanath Jan 10, 2025
2362de9
chore: release v1.222.0
ccbc-service-account Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions app/components/Analyst/ApplicationHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import ChangeStatus from 'components/Analyst/ChangeStatus';
import { useFeature } from '@growthbook/growthbook-react';
import EditProjectDescription from './EditProjectDescription';
import StatusInformationIcon from './StatusInformationIcon';
import StatusInformationModal from './StatusInformationModal';
import AssignProjectType from './AssignProjectType';
import PendingChangeRequest from './PendingChangeRequest/PendingChangeRequest';

Expand Down Expand Up @@ -175,7 +174,7 @@ const ApplicationHeader: React.FC<Props> = ({ query }) => {
}
statusList={allApplicationStatusTypes?.nodes}
/>
<StatusInformationIcon ModalComponent={StatusInformationModal} />
<StatusInformationIcon type="ccbc" />
</StyledItem>
<StyledItem>
<StyledLabel htmlFor="change-status">External Status</StyledLabel>
Expand Down
3 changes: 1 addition & 2 deletions app/components/Analyst/CBC/CbcHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import CbcEditProjectDescription from './CbcEditProjectDescription';
import CbcAssignProjectType from './CbcAssignProjectType';
import CbcEditProjectNumber from './CbcEditProjectNumber';
import StatusInformationIcon from '../StatusInformationIcon';
import CbcStatusInformationModal from './CbcStatusInformationModal';

const StyledCallout = styled.div`
margin-bottom: 0.5em;
Expand Down Expand Up @@ -142,7 +141,7 @@ const CbcHeader: React.FC<Props> = ({ query, isFormEditable = false }) => {
]}
isFormEditable={isFormEditable}
/>
<StatusInformationIcon ModalComponent={CbcStatusInformationModal} />
<StatusInformationIcon type="cbc" />
</StyledItem>
<StyledProjectType>
<StyledLabel htmlFor="assign-project-type">Project Type</StyledLabel>
Expand Down
24 changes: 5 additions & 19 deletions ...Analyst/CBC/CbcStatusInformationModal.tsx → ...ents/Analyst/CBC/CbcStatusInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,25 @@
import Image from 'next/image';
import styled from 'styled-components';
import Chip from '@mui/material/Chip';
import Modal from 'components/Modal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLightbulb } from '@fortawesome/free-solid-svg-icons';

interface Props {
id?: string;
title?: string;
close: () => void;
isOpen: boolean;
}

const StyledIcon = styled(FontAwesomeIcon)`
color: ${(props) => props.theme.color.primaryYellow};
`;

// Styled div whose children are split to two columns
const TwoColumnDiv = styled.div`
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
align-items: center;
`;

const CbcStatusInformationModal: React.FC<Props> = ({
id = 'cbc-status-information-modal',
title = 'Description of Statuses and Triggers',
isOpen,
close,
}) => {
const CbcStatusInformation = () => {
const infoGraphicUrl = '/images/cbcStateMachine.svg';

return (
<Modal id={id} onClose={close} open={isOpen} title={title}>
<>
<div>
<a href={infoGraphicUrl} target="_blank" rel="noopener noreferrer">
<Image
Expand All @@ -44,7 +30,7 @@ const CbcStatusInformationModal: React.FC<Props> = ({
/>
</a>
</div>
<div style={{ paddingBottom: '16px' }}>
<div style={{ paddingBottom: '16px', maxWidth: '1000px' }}>
<StyledIcon data-testid="light-bulb-icon" icon={faLightbulb} />{' '}
<span>
The internal status for CBC projects mirrors the external status and
Expand All @@ -66,8 +52,8 @@ const CbcStatusInformationModal: React.FC<Props> = ({
/>
<span>Applicant has withdrawn their submitted application</span>
</TwoColumnDiv>
</Modal>
</>
);
};

export default CbcStatusInformationModal;
export default CbcStatusInformation;
150 changes: 150 additions & 0 deletions app/components/Analyst/CcbcStatusInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import Image from 'next/image';
import styled from 'styled-components';
import Chip from '@mui/material/Chip';

const StyledTable = styled.table`
border: none;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding-right: 75px;
padding-left: 75px;
margin-bottom: 52px;
th,
td {
border: none;
padding-bottom: 2px;
padding-top: 2px;
}
`;

const CcbcStatusInformation = () => {
const infoGraphicUrl = '/images/stateMachine.svg';
return (
<>
<div style={{ height: '150px' }}>
<a href={infoGraphicUrl} target="_blank" rel="noopener noreferrer">
<Image
src={infoGraphicUrl}
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."
width={1000}
height={140}
/>
</a>
</div>
<div>
<StyledTable>
<thead>
<tr>
<th
style={{ fontFamily: 'BCSans, Verdana, Arial, sans-serif' }}
colSpan={2}
>
Other statuses
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Chip
label="On hold"
sx={{
bgcolor: '#FFECC2',
color: '#A37000',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>
Application is not rejected, but is not being actively reviewed.
For example, an applicant has been given 30 days to send a
community letter of support, and they haven&apos;t finished by
the deadline.
</td>
</tr>
<tr>
<td>
<Chip
label="Not selected"
sx={{
bgcolor: '#E8E8E8',
color: '#414141',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>
Application was not selected by the BC Minister for conditional
approval and is no longer being considered as a CCBC project.
</td>
</tr>
<tr>
<td>
<Chip
label="Withdrawn"
sx={{
bgcolor: '#E8E8E8',
color: '#414141',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>
Applicant has withdrawn their submitted application and should
not be reviewed or assessed by NWBC and ISED.
</td>
</tr>
<tr>
<td>
<Chip
label="Cancelled"
sx={{
bgcolor: '#E8E8E8',
color: '#414141',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>Project deliverables not achieved.</td>
</tr>
<tr>
<td>
<Chip
label="Draft"
sx={{
bgcolor: '#606060e6',
color: '#FFFFFF',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>
Applicant has created an application, visible only to
applicants.
</td>
</tr>
<tr>
<td>
<Chip
label="Submitted"
sx={{
bgcolor: '#345FA9',
color: '#FFFFFF',
fontFamily: 'BCSans, Verdana, Arial, sans-serif',
}}
/>
</td>
<td>
Application submitted on final page of form, but can still be
edited until the intake closes.
</td>
</tr>
</tbody>
</StyledTable>
</div>
</>
);
};

export default CcbcStatusInformation;
9 changes: 7 additions & 2 deletions app/components/Analyst/StatusInformationIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components';
import useModal from 'lib/helpers/useModal';
import StatusInformationModal from './StatusInformationModal';

const StyledFontAwesome = styled(FontAwesomeIcon)`
margin-left: 4px;
`;

const StatusInformationIcon = ({ ModalComponent }) => {
interface StatusInformationIconProps {
type?: 'cbc' | 'ccbc';
}

const StatusInformationIcon = ({ type }: StatusInformationIconProps) => {
const modalProps = useModal();

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

return (
<>
<ModalComponent {...modalProps} />
<StatusInformationModal type={type} {...modalProps} />
<div
role="button"
tabIndex={0}
Expand Down
Loading
Loading