Skip to content

Commit

Permalink
Filing process routing - Phase 2 (Live data) (#406)
Browse files Browse the repository at this point in the history
Closes #404  

## Changes
- [Filing] Automatically creates a new `Filing` when needed
- [Filing overview] Determines latest incomplete Filing step and links
to it
- [Filing sub-pages] Creates placeholder pages for Errors, Warnings,
Point of contact, and Complete
- [Filing sub-pages] Displays the status of all Steps at the top of each
sub-page
- [Styling] Updates step label's font-weight and color based on the
steps status (complete, incomplete)
- [Styling] Only displays a step as Complete (Dark blue bar, semibold
font) when a user has navigated beyond the step in the Filing flow (i.e.
When viewing `Warnings`, `Errors` would show complete)

Co-authored-by: shindigira <shindigira@gmail.com>
  • Loading branch information
meissadia and shindigira committed Apr 30, 2024
1 parent afffc7b commit 687e466
Show file tree
Hide file tree
Showing 22 changed files with 730 additions and 232 deletions.
9 changes: 0 additions & 9 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import FilingContact from 'pages/Filing/FilingApp/FilingContact';
import FilingErrors from 'pages/Filing/FilingApp/FilingErrors';
import FilingOverview from 'pages/Filing/FilingApp/FilingOverviewPage';
import FilingSubmit from 'pages/Filing/FilingApp/FilingSubmit';
import FilingUpload from 'pages/Filing/FilingApp/FilingUpload';
import FilingWarnings from 'pages/Filing/FilingApp/FilingWarnings';
import UpdateFinancialProfile from 'pages/Filing/UpdateFinancialProfile';
import ViewUserProfile from 'pages/Filing/ViewUserProfile';
Expand Down Expand Up @@ -198,14 +197,6 @@ export default function App(): ReactElement {
</ProtectedRoute>
}
/>
<Route
path='/filing/:year/:lei/upload-w-status'
element={
<ProtectedRoute {...ProtectedRouteAuthorizations}>
<FilingUpload />
</ProtectedRoute>
}
/>
<Route
path='/filing/:year/:lei/errors'
element={
Expand Down
1 change: 0 additions & 1 deletion src/api/oidc.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

export interface OidcConfig {
authority: string;
client_id: string;
Expand Down
18 changes: 18 additions & 0 deletions src/api/requests/createFiling.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { request } from 'api/axiosService';
import type { SblAuthProperties } from 'api/useSblAuth';
import type { FilingPeriodType, FilingType } from 'types/filingTypes';

export const createFiling = async (
auth: SblAuthProperties,
lei: string,
filingPeriod: FilingPeriodType,
): Promise<FilingType> => {
return request<FilingType>({
url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}`,
method: 'post',
headers: { Authorization: `Bearer ${auth.user?.access_token}` },
body: 'no-body',
});
};

export default createFiling;
4 changes: 3 additions & 1 deletion src/api/requests/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
export { default as createFiling } from './createFiling';
export { default as fetchAssociatedInstitutions } from './fetchAssociatedInstitutions';
export { default as fetchFiling } from './fetchFiling';
export { default as fetchFilingSubmissionLatest } from './fetchFilingSubmissionLatest';
export { default as fetchInstitutionDetails } from './fetchInstitutionDetails';
export { default as fetchInstitutions } from './fetchInstitutions';
export { default as fetchIsDomainAllowed } from './fetchIsDomainAllowed';
export { default as fetchUserProfile } from './fetchUserProfile';
export { default as submitUpdateFinancialProfile } from './submitUpdateFinancialProfile';
export { default as submitUserProfile } from './submitUserProfile';
export { default as submitUserProfileFi } from './submitUserProfileFi';

12 changes: 10 additions & 2 deletions src/components/StepIndicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const mockSteps: StepType[] = [

export const stepStyleMap = {
[STEP_COMPLETE]: 'border-stepIndicatorComplete text-stepIndicatorComplete',
[STEP_CURRENT]: 'border-stepIndicatorCurrent text-stepIndicatorCurrent ',
[STEP_CURRENT]: 'border-pacific text-pacific ',
[STEP_INCOMPLETE]: 'border-stepIndicatorIncomplete',
};

Expand Down Expand Up @@ -58,10 +58,18 @@ export function Step({
}: StepType): JSX.Element {
const statusAdjusted = isCurrent ? STEP_CURRENT : status;
const border = `border-0 border-t-8 border-solid ${stepStyleMap[statusAdjusted]}`;
const font = 'text-lg font-medium';
let font = 'text-lg';
const flex = 'basis-0 grow';
const margin = hasMargin ? 'ml-[0.938rem]' : '';

// Font weight
if (isCurrent) font += ' font-semibold';
else if (status === STEP_COMPLETE) font += ' font-medium';
else font += ' font-normal';

// Font color
font += status === STEP_COMPLETE ? ' text-black' : ' text-grayDark';

return (
<div
aria-current={isCurrent}
Expand Down
1 change: 1 addition & 0 deletions src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const queryClient = new QueryClient({
queries: {
staleTime: Number.POSITIVE_INFINITY,
retry: MAX_RETRIES,
refetchOnWindowFocus: false,
},
},
});
Expand Down
92 changes: 52 additions & 40 deletions src/pages/Filing/FilingApp/FileSubmission.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,10 @@ import InlineStatus from 'components/InlineStatus';
import Input from 'components/Input';
import { Link } from 'components/Link';
import SectionIntro from 'components/SectionIntro';
import StepIndicator, { mockSteps } from 'components/StepIndicator';
import { Button, Heading, TextIntroduction } from 'design-system-react';
import type { ChangeEvent } from 'react';
import { useEffect, useRef, useState } from 'react';
import { Navigate, useLocation, useParams } from 'react-router-dom';
import { useLocation, useParams } from 'react-router-dom';
import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';

import type { AxiosResponse } from 'axios';
Expand All @@ -26,18 +25,19 @@ import {
FILE_SIZE_LIMIT_2GB,
FILE_SIZE_LIMIT_ERROR_MESSAGE,
} from 'utils/constants';
import useInstitutionDetails from 'utils/useInstitutionDetails';
import FileDetailsUpload from './FileDetailsUpload';
import FileDetailsValidation from './FileDetailsValidation';
import FileSubmissionAlert from './FileSubmissionAlert';
import type { InstitutionDataType } from './InstitutionCard.types';
import { FilingNavButtons } from './FilingNavButtons';
import { FilingSteps } from './FilingSteps';
import InstitutionHeading from './InstitutionHeading';

export function FileSubmission(): JSX.Element {
const abortController = new AbortController();
const { lei, year } = useParams();
const location = useLocation();
const { state, pathname } = location as {
state: InstitutionDataType;
const { pathname } = location as {
pathname: Location['pathname'];
};

Expand All @@ -61,7 +61,7 @@ export function FileSubmission(): JSX.Element {
setDataGetSubmissionLatest(response.data);
}

// prevents the Alert from showing unless an initial upload/validation has occurred
// NOTE: Prevents the Alert from showing unless an initial upload/validation has occurred
const [uploadedBefore, setUploadedBefore] = useState<boolean>(false);

const {
Expand All @@ -79,10 +79,15 @@ export function FileSubmission(): JSX.Element {

// TODO compare lei and filing period to getlastsubmission before updating object
useEffect(() => {
if (actualDataGetSubmissionLatest) {
if (!isFetchingGetSubmissionLatest && !errorGetSubmissionLatest) {
setInitialGetSubmissionLatestFetched(true);
setDataGetSubmissionLatest(actualDataGetSubmissionLatest);
}
}, [actualDataGetSubmissionLatest]);
}, [
actualDataGetSubmissionLatest,
isFetchingGetSubmissionLatest,
errorGetSubmissionLatest,
]);

async function handleAfterUpload(data: SubmissionResponse): Promise<void> {
setUploadedBefore(true);
Expand All @@ -97,7 +102,6 @@ export function FileSubmission(): JSX.Element {
isLoading: isLoadingUpload,
error: errorUpload,
data: dataUpload,
reset: resetUpload,
} = useUploadMutation({
lei,
period_code: year,
Expand All @@ -114,7 +118,6 @@ export function FileSubmission(): JSX.Element {
);

if (event.target.files && event.target.files.length > 0 && lei && year) {
resetUpload();
mutateUpload({ file: event.target.files[0], fileSizeTest });
}

Expand All @@ -131,11 +134,10 @@ export function FileSubmission(): JSX.Element {
};

// Derived Conditions
const hasUploadedBefore = dataGetSubmissionLatest?.state;
const buttonLabel = hasUploadedBefore
const buttonLabel = dataGetSubmissionLatest?.state
? 'Replace your file'
: 'Upload your file';
const inputAriaLabel = hasUploadedBefore
const inputAriaLabel = dataGetSubmissionLatest?.state
? 'Replace your previously uploaded .csv file'
: 'Select a .csv file to upload';
const currentSuccess = dataGetSubmissionLatest?.state && !errorUpload;
Expand All @@ -144,8 +146,25 @@ export function FileSubmission(): JSX.Element {
isLoadingUpload ||
isFetchingGetSubmissionLatest ||
!currentSuccess ||
dataGetSubmissionLatest.state ===
FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED;
(dataGetSubmissionLatest.state &&
[
FileSubmissionState.UPLOAD_FAILED,
FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED,
FileSubmissionState.VALIDATION_ERROR,
FileSubmissionState.VALIDATION_EXPIRED,
].includes(dataGetSubmissionLatest.state));

const {
data: institution,
isLoading: isLoadingInstitution,
isError: isErrorInstitution,
} = useInstitutionDetails(lei);

const institutionName = isLoadingInstitution
? 'Loading...'
: isErrorInstitution
? ''
: institution.name;

/* Cancels pending GetSubmissionLatest retry on unmount */
useEffect(() => {
Expand All @@ -155,21 +174,17 @@ export function FileSubmission(): JSX.Element {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pathname]);

/* Incorrect parameters handling - User must click on 'Upload' link otherwise redirect to /filing */
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!state?.name) {
return <Navigate replace to='/filing' />;
}

return (
<div id='file-submission' className='min-h-[80vh]'>
<div className='mx-auto mb-[3.75rem] max-w-[75rem]'>
<StepIndicator steps={mockSteps} />
</div>
<FilingSteps />
<FormWrapper>
<FormHeaderWrapper>
<div className='mb-[0.9375rem]'>
<InstitutionHeading eyebrow name={state.name} filingPeriod={year} />
<InstitutionHeading
eyebrow
name={institutionName}
filingPeriod={year}
/>
</div>
<TextIntroduction
heading='Upload file'
Expand Down Expand Up @@ -202,7 +217,7 @@ export function FileSubmission(): JSX.Element {
/>
<FieldGroup>
<SectionIntro heading='Select a file to upload'>
{hasUploadedBefore ? (
{dataGetSubmissionLatest?.state ? (
<>
To change your file selection, click on &quot;Replace your
file,&quot; navigate to the file on your computer that you
Expand Down Expand Up @@ -241,8 +256,8 @@ export function FileSubmission(): JSX.Element {
size='default'
type='button'
className={
hasUploadedBefore
? 'cursor-pointer border-[1px] border-solid border-stepIndicatorCurrent bg-white text-stepIndicatorCurrent hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none'
dataGetSubmissionLatest?.state
? 'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none'
: 'cursor-pointer disabled:cursor-not-allowed'
}
disabled={isLoadingUpload || isFetchingGetSubmissionLatest}
Expand Down Expand Up @@ -278,7 +293,7 @@ export function FileSubmission(): JSX.Element {
classNamePriorityPipe={[
{
condition: isLoadingUpload,
value: 'text-inProgressUploadValidation',
value: 'text-grayDark',
},
{
condition:
Expand Down Expand Up @@ -359,7 +374,7 @@ export function FileSubmission(): JSX.Element {
{
condition:
isFetchingGetSubmissionLatest || isLoadingUpload,
value: 'text-inProgressUploadValidation',
value: 'text-grayDark',
},
{
condition:
Expand Down Expand Up @@ -425,18 +440,15 @@ export function FileSubmission(): JSX.Element {
</>
) : null}
</FieldGroup>
<Button
className='mt-[1.875rem]'
appearance='primary'
iconRight='right'
label='Save and continue'
// TODO: route to next step
onClick={() => console.log('Save and continue -- clicked!')}
size='default'
disabled={disableButtonCriteria}
/>
</FormMain>
) : null}
<FilingNavButtons
hrefNext={`/filing/${year}/${lei}/errors`}
labelNext='Save and continue'
hrefPrevious='/filing'
labelPrevious='Return to Filing Overview'
isStepComplete={!disableButtonCriteria}
/>
</FormWrapper>
</div>
);
Expand Down
45 changes: 23 additions & 22 deletions src/pages/Filing/FilingApp/FilingComplete.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
import { useMemo } from 'react';
import { Grid } from 'design-system-react';
import { useParams } from 'react-router-dom';
import { FilingStatusAsNumber } from 'types/filingTypes';
import { FilingStepWrapper } from './FilingStepWrapper';
import { createMockFiling } from './FilingStepWrapper.helpers';
import { FilingNavButtons } from './FilingNavButtons';
import { FilingSteps } from './FilingSteps';

function FilingComplete(): JSX.Element {
function FilingSubmit(): JSX.Element {
const { lei, year } = useParams();

const mockFiling = useMemo(
() =>
createMockFiling({
status: FilingStatusAsNumber.SUBMISSION_ACCEPTED,
contact_info: true, // TODO: Should be a Contact object
}),
[],
);

return (
<FilingStepWrapper
heading='Filing - Complete'
hrefPrevious={`/filing/${year}/${lei}/submit`}
currentFiling={mockFiling}
>
FILING SUMMARY CONTENT GOES HERE
</FilingStepWrapper>
<>
<FilingSteps />
<Grid.Wrapper center>
<Grid.Row>
<Grid.Column width={8} className='u-mt15'>
FILING SUMMARY CONTENT GOES HERE
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={8} className='u-mt15'>
<FilingNavButtons
hrefPrevious={`/filing/${year}/${lei}/submit`}
isStepComplete // TODO: Derive actual step status
/>
</Grid.Column>
</Grid.Row>
</Grid.Wrapper>
</>
);
}

export default FilingComplete;
export default FilingSubmit;

0 comments on commit 687e466

Please sign in to comment.