Skip to content

Commit

Permalink
chore: add cbc infographic to all dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
RRanath committed Jan 8, 2025
1 parent 3843675 commit 5b83931
Show file tree
Hide file tree
Showing 7 changed files with 189 additions and 170 deletions.
3 changes: 1 addition & 2 deletions app/components/Analyst/ApplicationHeader.tsx
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
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
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
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;
11 changes: 9 additions & 2 deletions app/components/Analyst/StatusInformationIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@ 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' | 'all';
}

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

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

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

0 comments on commit 5b83931

Please sign in to comment.