[Page] Resolve Errors & Warnings

src/api/requests/fetchFilingSubmissionLatest.ts

@@ -112,7 +112,7 @@ const interceptor = apiClient.interceptors.response.use(
       apiClient.defaults.handleStartInterceptorCallback(response);
     }
     // Retry if validation still in-progress
-    if (shouldRetry(response)) {
+    if (apiClient.defaults.enableLongPolling && shouldRetry(response)) {
       return retryRequestWithDelay(apiClient, response);
     }
     apiClient.defaults.retryCount = Zero;
@@ -124,16 +124,29 @@ const interceptor = apiClient.interceptors.response.use(
   },
 );
 
-export const fetchFilingSubmissionLatest = async (
-  auth: SblAuthProperties,
-  lei: InstitutionDetailsApiType['lei'],
-  filingPeriod: FilingPeriodType,
+interface FetchFilingSubmissionLatestProperties {
+  auth: SblAuthProperties;
+  lei: InstitutionDetailsApiType['lei'];
+  filingPeriod: FilingPeriodType;
   handleStartInterceptorCallback?: (
     response: AxiosResponse<SubmissionResponse>,
-  ) => void,
-  signal?: AbortSignal,
-  // eslint-disable-next-line @typescript-eslint/max-params
-): Promise<SubmissionResponse> => {
+  ) => void;
+  signal?: AbortSignal;
+  enableLongPolling?: boolean;
+}
+
+export const fetchFilingSubmissionLatest = async ({
+  auth,
+  lei,
+  filingPeriod,
+  handleStartInterceptorCallback,
+  signal,
+  enableLongPolling,
+}: FetchFilingSubmissionLatestProperties): Promise<SubmissionResponse> => {
+  if (enableLongPolling) {
+    apiClient.defaults.enableLongPolling = enableLongPolling;
+  }
+
   if (handleStartInterceptorCallback) {
     apiClient.defaults.handleStartInterceptorCallback =
       handleStartInterceptorCallback;

src/components/FormButtonGroup.tsx

@@ -2,10 +2,23 @@ import type { ReactNode } from 'react';
 
 interface Properties {
   children: ReactNode;
+  isFilingStep?: boolean;
 }
 
-function FormButtonGroup({ children }: Properties): JSX.Element {
-  return <div className='mt-[1.875rem] flex gap-[0.625rem]'>{children}</div>;
+function FormButtonGroup({ isFilingStep, children }: Properties): JSX.Element {
+  return (
+    <div
+      className={`mt-[1.875rem] flex ${
+        isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]'
+      }`}
+    >
+      {children}
+    </div>
+  );
 }
 
+FormButtonGroup.defaultProps = {
+  isFilingStep: false,
+};
+
 export default FormButtonGroup;

src/components/FormMain.tsx

@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import type { ReactNode } from 'react';
 
 interface FormProperties {
@@ -12,7 +13,11 @@ function FormMain({
   children,
   className = '',
 }: FormProperties & React.ComponentPropsWithoutRef<'form'>): JSX.Element {
-  return <form className={`mb-[3.75rem] w-full ${className}`}>{children}</form>;
+  return (
+    <form className={classnames('w-full', 'mb-[3.75rem]', className)}>
+      {children}
+    </form>
+  );
 }
 
 export default FormMain;

src/components/SectionIntro.tsx

@@ -13,9 +13,14 @@ export interface SectionIntroProperties {
 function SectionIntro({
   heading = null,
   children = '',
-}: SectionIntroProperties): JSX.Element {
+  className,
+  ...other
+}: JSX.IntrinsicElements['div'] & SectionIntroProperties): JSX.Element {
   return (
-    <div className='mb-[1.875rem] box-border max-w-[41.875rem]'>
+    <div
+      className={`mb-[1.875rem] box-border max-w-[41.875rem] ${className}`}
+      {...other}
+    >
       {heading ? <Heading type='2'>{heading}</Heading> : null}
       <FormParagraph>{children}</FormParagraph>
     </div>

src/index.css

@@ -26,4 +26,29 @@ https://v1.tailwindcss.com/docs/adding-base-styles#using-css */
 /* Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */
 body {
   background-color: #f7f8f9;
-}
+}
+
+/* Uncomment to use ellipsis trick on Review Errors and Warnings tables */
+
+/* td
+{
+ max-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+} */
+
+
+/* Uncomment to make cells width the smallest possible */
+
+/* td:not(:last-child){
+    white-space: nowrap;
+}
+
+td:last-child{
+    width: 100%;
+} */
+
+/* td {
+  word-break: break-all;
+} */

src/main.tsx

@@ -20,9 +20,9 @@ const MAX_RETRIES = 1;
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: Number.POSITIVE_INFINITY,
+      // staleTime: Number.POSITIVE_INFINITY,
       retry: MAX_RETRIES,
-      refetchOnWindowFocus: false,
+      refetchOnWindowFocus: false, // default: true
     },
   },
 });

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -0,0 +1,74 @@
+import { Link } from 'components/Link';
+import { Heading, Table } from 'design-system-react';
+import Markdown from 'react-markdown';
+import type { Detail, Field } from 'types/filingTypes';
+
+interface FieldEntryProperties {
+  fieldObject: Detail;
+}
+
+function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
+  const validationId = fieldObject.validation.id;
+  const validationLink = fieldObject.validation.fig_link;
+  const validationName = fieldObject.validation.name;
+  const validationDescription = fieldObject.validation.description;
+  // eslint-disable-next-line unicorn/no-array-reduce
+  const additionalColumnHeaders = fieldObject.records[0].fields.reduce(
+    (accumulator: Field['name'][], fieldsObject) => [
+      ...accumulator,
+      fieldsObject.name,
+    ],
+    [],
+  );
+  const columns = [
+    'Row',
+    'Unique identifier (uid)',
+    ...additionalColumnHeaders,
+  ];
+  const rows = fieldObject.records.map(object => {
+    // eslint-disable-next-line unicorn/no-array-reduce
+    const fieldValues = object.fields.reduce(
+      (accumulator: Field['name'][], fieldsObject) => [
+        ...accumulator,
+        fieldsObject.value,
+      ],
+      [],
+    );
+    return [object.record_no, object.uid, ...fieldValues];
+  });
+
+  return (
+    <div className='mb-[2.8125rem]'>
+      <div className='validation-info-section mb-[1.875rem] max-w-[41.875rem]'>
+        <Link target='_blank' href={validationLink}>
+          <Heading type='3'>{validationId}</Heading>
+        </Link>
+        <Heading type='4'>{validationName}</Heading>
+        <Markdown>{validationDescription}</Markdown>
+      </div>
+      <Table
+        className='w-full max-w-full table-auto'
+        columns={columns}
+        // rows={[...Array.from({ length: 100 }).keys()].map((item, index) => [
+        //   index + 10_000,
+        //   '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
+        //   '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
+        // ])}
+        // rows={[
+        //   [
+        //     'Row 1, Column 1',
+        //     'Row 1, Column 123456789TESTBANK123C2  123456789TESTBANK123C2  123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2',
+        //     'Row 1, Column 3 123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2',
+        //   ],
+        //   ['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
+        //   ['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3'],
+        // ]}
+        // @ts-expect-error TypeScript error needs to be resolved within DSR
+        rows={rows}
+        isScrollableHorizontal
+      />
+    </div>
+  );
+}
+
+export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -0,0 +1,35 @@
+import SectionIntro from 'components/SectionIntro';
+import FieldEntry from 'pages/Filing/FilingApp/FieldEntry';
+import type { ReactNode } from 'react';
+import type { Detail } from 'types/filingTypes';
+
+interface FieldProperties {
+  fieldArray: Detail[];
+  heading: string;
+  bottomMargin?: boolean;
+  children: ReactNode;
+  id: string;
+}
+
+function FieldSummary({
+  heading,
+  fieldArray,
+  bottomMargin,
+  children,
+  id,
+}: FieldProperties): JSX.Element {
+  return (
+    <div id={id} className={bottomMargin ? 'mb-[3.75rem]' : ''}>
+      <SectionIntro heading={heading}>{children}</SectionIntro>
+      {fieldArray.map(fieldObject => (
+        <FieldEntry key={fieldObject.validation.id} fieldObject={fieldObject} />
+      ))}
+    </div>
+  );
+}
+
+FieldSummary.defaultProps = {
+  bottomMargin: false,
+};
+
+export default FieldSummary;

src/pages/Filing/FilingApp/FileSubmission.data.tsx

@@ -83,6 +83,7 @@ export function IncorrectFileTypeAlert(): JSX.Element {
 export const fileSubmissionStateAlert: Record<
   Exclude<
     FileSubmissionState,
+    | FileSubmissionState.SUBMISSION_STARTED
     | FileSubmissionState.SUBMISSION_UPLOADED
     | FileSubmissionState.VALIDATION_IN_PROGRESS
   >,
@@ -122,6 +123,7 @@ export const fileSubmissionStateAlert: Record<
 export const fileSubmissionValidationStatus: Record<
   Exclude<
     FileSubmissionState,
+    | FileSubmissionState.SUBMISSION_STARTED
     | FileSubmissionState.SUBMISSION_UPLOADED
     | FileSubmissionState.UPLOAD_FAILED
     | FileSubmissionState.VALIDATION_IN_PROGRESS