Filing process routing - Phase 2 (Live data)

src/App.tsx

@@ -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';
@@ -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={

src/api/oidc.ts

@@ -1,4 +1,3 @@
-
 export interface OidcConfig {
   authority: string;
   client_id: string;

src/api/requests/createFiling.ts

@@ -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;

src/api/requests/fetchSubmissionLatest.tsx

@@ -0,0 +1,18 @@
+import { request } from 'api/axiosService';
+import type { SblAuthProperties } from 'api/useSblAuth';
+import type { FilingPeriodType, SubmissionResponse } from 'types/filingTypes';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
+
+export const fetchSubmissionLatest = async (
+  auth: SblAuthProperties,
+  lei: InstitutionDetailsApiType['lei'],
+  filingPeriod: FilingPeriodType,
+): Promise<SubmissionResponse> => {
+  return request({
+    url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}/submissions/latest`,
+    method: 'get',
+    headers: { Authorization: `Bearer ${auth.user?.access_token}` },
+  });
+};
+
+export default fetchSubmissionLatest;

src/api/requests/index.ts

@@ -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 fetchInstitutionDetails } from './fetchInstitutionDetails';
 export { default as fetchInstitutions } from './fetchInstitutions';
 export { default as fetchIsDomainAllowed } from './fetchIsDomainAllowed';
+export { default as fetchSubmissionLatest } from './fetchSubmissionLatest';
 export { default as fetchUserProfile } from './fetchUserProfile';
 export { default as submitUpdateFinancialProfile } from './submitUpdateFinancialProfile';
 export { default as submitUserProfile } from './submitUserProfile';
 export { default as submitUserProfileFi } from './submitUserProfileFi';
-

src/components/StepIndicator.tsx

@@ -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}

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -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';
@@ -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'];
   };
 
@@ -114,7 +114,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 });
     }
 
@@ -144,8 +143,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(() => {
@@ -155,21 +171,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'
@@ -425,18 +437,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>
   );

src/pages/Filing/FilingApp/FilingComplete.tsx

@@ -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;

src/pages/Filing/FilingApp/FilingContact.tsx

@@ -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 FilingContact(): JSX.Element {
   const { lei, year } = useParams();
 
-  const mockFiling = useMemo(
-    () =>
-      createMockFiling({
-        status: FilingStatusAsNumber.VALIDATION_WITH_WARNINGS,
-        contact_info: true, // TODO: Should be a Contact object
-      }),
-    [],
-  );
-
   return (
-    <FilingStepWrapper
-      heading='Filing - Point of Contact'
-      hrefPrevious={`/filing/${year}/${lei}/warnings`}
-      hrefNext={`/filing/${year}/${lei}/submit`}
-      currentFiling={mockFiling}
-    >
-      CONTACT CONTENT GOES HERE
-    </FilingStepWrapper>
+    <>
+      <FilingSteps />
+      <Grid.Wrapper center>
+        <Grid.Row>
+          <Grid.Column width={8} className='u-mt15'>
+            CONTACT CONTENT GOES HERE
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={8} className='u-mt15'>
+            <FilingNavButtons
+              hrefPrevious={`/filing/${year}/${lei}/warnings`}
+              hrefNext={`/filing/${year}/${lei}/submit`}
+              isStepComplete // TODO: Derive actual step status
+            />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid.Wrapper>
+    </>
   );
 }
 

src/pages/Filing/FilingApp/FilingErrors.tsx

@@ -1,29 +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 FilingErrors(): JSX.Element {
   const { lei, year } = useParams();
 
-  const mockFiling = useMemo(
-    () =>
-      createMockFiling({
-        status: FilingStatusAsNumber.VALIDATION_WITH_ERRORS,
-      }),
-    [],
-  );
-
   return (
-    <FilingStepWrapper
-      heading='Filing - Errors'
-      hrefPrevious={`/filing/${year}/${lei}/upload-w-status`}
-      hrefNext={`/filing/${year}/${lei}/warnings`}
-      currentFiling={mockFiling}
-    >
-      ERROR CONTENT GOES HERE
-    </FilingStepWrapper>
+    <>
+      <FilingSteps />
+      <Grid.Wrapper center>
+        <Grid.Row>
+          <Grid.Column width={8} className='u-mt15'>
+            ERROR CONTENT GOES HERE
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={8} className='u-mt15'>
+            <FilingNavButtons
+              hrefPrevious={`/filing/${year}/${lei}/upload`}
+              hrefNext={`/filing/${year}/${lei}/warnings`}
+              isStepComplete // TODO: Derive actual step status
+            />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid.Wrapper>
+    </>
   );
 }