feat(page): Complete Your User Profile - No Associated Financial Institutions with Email Domain - Phase 1

src/App.tsx

@@ -42,6 +42,7 @@ const PrivacyActNotice = lazy(async () => import('pages/Filing/PrivacyNotice'));
 const PaperworkNotice = lazy(
   async () => import('pages/Filing/PaperworkNotice'),
 );
+const Summary = lazy(async () => import('pages/Summary/Summary'));
 
 // allow developers to toggle routing in development
 const isRoutingEnabled = getIsRoutingEnabled();
@@ -120,7 +121,7 @@ function ProtectedRoute({
   children,
 }: ProtectedRouteProperties): JSX.Element | null {
   const { pathname } = useLocation();
-  const isProfileFormPath = pathname === '/profile-form';
+  const isProfileFormPath = pathname.includes('/profile/complete');
 
   if (!isRoutingEnabled) {
     return children;
@@ -136,17 +137,19 @@ function ProtectedRoute({
   const isUserAssociatedWithAnyInstitution =
     UserProfile.institutions.length > 0;
   if (!isUserAssociatedWithAnyInstitution && !isProfileFormPath)
-    return <Navigate replace to='/profile-form' />;
+    return <Navigate replace to='/profile/complete' />;
   if (isProfileFormPath && isUserAssociatedWithAnyInstitution)
     return <Navigate replace to='/landing' />;
   return children;
 }
 
 export default function App(): ReactElement {
   const auth = useSblAuth();
-  const { isAuthenticated: userIsAuthenticated, isLoading: isAuthLoading } =
-    auth;
-  const { emailAddress } = auth;
+  const {
+    isAuthenticated: userIsAuthenticated,
+    isLoading: isAuthLoading,
+    emailAddress,
+  } = auth;
 
   const { isLoading: isFetchUserProfileLoading, data: UserProfile } = useQuery({
     queryKey: [`fetch-user-profile-${emailAddress}`, emailAddress],
@@ -202,15 +205,15 @@ export default function App(): ReactElement {
               }
             />
             <Route
-              path='/user-profile/'
+              path='/profile/view'
               element={
                 <ProtectedRoute {...ProtectedRouteAuthorizations}>
                   <ViewUserProfile />
                 </ProtectedRoute>
               }
             />
             <Route
-              path='/profile-form'
+              path='/profile/complete'
               element={
                 <ProtectedRoute {...ProtectedRouteAuthorizations}>
                   <ProfileForm />
@@ -230,6 +233,7 @@ export default function App(): ReactElement {
               path='/paperwork-reduction-act-notice'
               element={<PaperworkNotice />}
             />
+            <Route path='/summary' element={<Summary />} />
             <Route path='/500/*' element={<Error500 />} />
             {/* TODO: Remove /loading route once testing is complete */}
             <Route path='/loading' element={<LoadingContent />} />

src/api/axiosService.ts

@@ -47,3 +47,10 @@ export const request = async <T>({
   // @ts-expect-error: Unnecessary check
   return response.data;
 };
+
+/** Querystring for mail api - form urlencoded * */
+/* example: queryString.stringify({foo: [1, 2, 3]}, {arrayFormat: 'index'}); */
+/* result: //=> 'foo[0]=1&foo[1]=2&foo[2]=3' */
+export const queryStringFormat = (object): string =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  queryString.stringify(object, { arrayFormat: 'index' });

src/api/requests/index.ts

@@ -1,8 +1,9 @@
-import fetchInstitutionDetails from './fetchInstitutionDetails';
-import fetchAssociatedInstitutions from './fetchAssociatedInstitutions';
-import fetchInstitutions from './fetchInstitutions';
-import fetchIsDomainAllowed from './fetchIsDomainAllowed';
-import fetchUserProfile from './fetchUserProfile';
-import submitUserProfile from './submitUserProfile';
+export { default as fetchAssociatedInstitutions } from './fetchAssociatedInstitutions';
+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';
 
-export { fetchInstitutionDetails, fetchAssociatedInstitutions, fetchInstitutions, fetchIsDomainAllowed, fetchUserProfile, submitUserProfile }

src/components/FormErrorHeader.tsx

@@ -1,12 +1,13 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Alert, List, ListItem } from 'design-system-react';
+import type { FieldErrors } from 'react-hook-form';
 import { Element, Link } from 'react-scroll';
 
 import { FormFieldsHeaderError as formFieldsHeaderError } from 'pages/ProfileForm/types';
+import getAllProperties from 'utils/getAllProperties';
 
 interface FormErrorHeaderProperties {
   id: string;
-  errors: object;
+  errors?: FieldErrors;
 }
 
 /**
@@ -16,10 +17,8 @@ interface FormErrorHeaderProperties {
 function FormErrorHeader({
   errors,
   id,
-}: FormErrorHeaderProperties): JSX.Element {
-  // formErrors && Object.keys(formErrors).length > 0
+}: FormErrorHeaderProperties): JSX.Element | null {
   if (!errors || Object.keys(errors).length === 0) return null;
-
   return (
     <div className='mb-[2.8125rem] mt-[2.8125rem] w-full'>
       <Element name={id} id={id}>
@@ -28,7 +27,8 @@ function FormErrorHeader({
           status='error'
         >
           <List isLinks>
-            {Object.keys(errors).map((key: string): JSX.Element => {
+            {/* eslint-disable-next-line @typescript-eslint/no-unsafe-call */}
+            {getAllProperties(errors).map((key: string): JSX.Element => {
               const focusKeyItem = (): void => {
                 const element = document.querySelector(`#${key}`) as
                   | HTMLElement
@@ -52,6 +52,7 @@ function FormErrorHeader({
 
               return (
                 <ListItem key={key}>
+                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                   <Link
                     href='#'
                     className='m-list_link'
@@ -64,9 +65,10 @@ function FormErrorHeader({
                     tabIndex={0}
                   >
                     {
+                      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                       formFieldsHeaderError[
                         key as keyof typeof formFieldsHeaderError
-                      ]
+                      ] || key
                     }
                   </Link>
                 </ListItem>
@@ -79,4 +81,8 @@ function FormErrorHeader({
   );
 }
 
+FormErrorHeader.defaultProps = {
+  errors: null,
+};
+
 export default FormErrorHeader;

src/components/FormHeaderWrapper.tsx

@@ -1,15 +1,24 @@
 import type { ReactNode } from 'react';
 
-interface Properties {
+interface FormHeaderWrapperProperties {
+  crumbTrailMarginTop?: boolean;
   children: ReactNode;
 }
 
-function FormHeaderWrapper({ children }: Properties): JSX.Element {
+function FormHeaderWrapper({
+  crumbTrailMarginTop,
+  children,
+}: FormHeaderWrapperProperties): JSX.Element {
+  const marginTop = crumbTrailMarginTop ? 'mt-[1.875rem]' : 'mt-[2.84375rem]';
   return (
-    <div className='mb-[3.75rem] mt-[2.84375rem] max-w-[41.875rem]'>
+    <div className={`mb-[3.75rem] max-w-[41.875rem] ${marginTop} `}>
       {children}
     </div>
   );
 }
 
+FormHeaderWrapper.defaultProps = {
+  crumbTrailMarginTop: false,
+};
+
 export default FormHeaderWrapper;

src/components/FormParagraph.tsx

@@ -1,6 +1,7 @@
+import type { ReactNode } from 'react';
+
 interface FormParagraphProperties {
-  children: string;
-  className: string;
+  children: ReactNode;
 }
 
 /**
@@ -10,7 +11,7 @@ interface FormParagraphProperties {
 function FormParagraph({
   children,
   className = '',
-}: FormParagraphProperties): JSX.Element {
+}: FormParagraphProperties & React.ComponentPropsWithoutRef<'p'>): JSX.Element {
   return <p className={`max-w-[41.875rem] ${className}`}>{children}</p>;
 }
 

src/components/InputEntry.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/require-default-props */
-import type { ReactNode } from 'react';
+import type { PropsWithoutRef, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Heading, TextInput } from 'design-system-react';
+import isString from 'utils/isString';
 
 interface InputEntryProperties
-  extends React.PropsWithoutRef<JSX.IntrinsicElements['input']> {
+  extends PropsWithoutRef<JSX.IntrinsicElements['input']> {
   id: string;
-  label: string;
-  errors: object;
+  label: JSX.Element | string;
+  errorMessage?: string | undefined;
   isDisabled?: boolean;
   isLast?: boolean;
   hideInput?: boolean;
@@ -22,7 +23,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
       id,
-      errors,
+      errorMessage,
       label,
       isDisabled = false,
       hideInput = false,
@@ -33,26 +34,34 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
     },
     reference,
   ) => {
-    const handleError = Boolean(showError && errors[id]);
+    const handleError = Boolean(showError && errorMessage);
     return (
       <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
         <Element name={id}>
           <label htmlFor={id}>
-            <Heading
-              type='4'
-              className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
-            >
-              {label}
-            </Heading>
+            {isString(label) ? (
+              <Heading
+                type='4'
+                className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
+              >
+                {label}
+              </Heading>
+            ) : (
+              <div>{label}</div>
+            )}
           </label>
           {children}
           {/* TODO: Will put in a prop to style the email input as a regular text */}
           {/* https://github.com/cfpb/sbl-frontend/issues/156 */}
           <div className={`${hideInput ? 'hidden' : ''}`}>
             <TextInput
               isFullWidth
+              // TODO: fix TS errors due by making props optional
+              // https://github.com/cfpb/design-system-react/issues/308
+              // @ts-expect-error will need to be fixed in DSR TextInput
               type={id === 'email' ? 'email' : 'text'}
               id={id}
+              // @ts-expect-error will need to be fixed in DSR TextInput
               status={handleError ? 'error' : ''}
               aria-invalid={handleError ? 'true' : 'false'}
               disabled={isDisabled}
@@ -62,7 +71,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
           </div>
           {handleError ? (
             <div>
-              <InputErrorMessage>{errors[id].message}</InputErrorMessage>
+              <InputErrorMessage>{errorMessage}</InputErrorMessage>
             </div>
           ) : null}
         </Element>

src/components/LinkButton.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { Button, Icon, LinkText } from 'design-system-react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+interface LinkButtonProperties {
+  icon: string;
+  children: ReactNode;
+}
+
+function LinkButton({
+  className,
+  icon = 'plus',
+  children,
+  ...other
+}: ComponentPropsWithoutRef<'button'> & LinkButtonProperties): JSX.Element {
+  return (
+    <Button
+      className={`cursor-pointer ${className}`}
+      // TODO: https://github.com/cfpb/design-system-react/issues/311
+      // @ts-expect-error label should be ReactNode, fix should be in DSR Repo
+      label={
+        <>
+          <Icon name={icon} />
+          <LinkText className='ml-2'>{children}</LinkText>
+        </>
+      }
+      asLink
+      {...other}
+    />
+  );
+}
+
+export default LinkButton;

src/components/SectionIntro.tsx

@@ -1,5 +1,6 @@
-import { Heading } from 'design-system-react';
 import FormParagraph from 'components/FormParagraph';
+import { Heading } from 'design-system-react';
+import type { ReactNode } from 'react';
 
 interface SectionIntroProperties {
   heading: ReactNode;

src/pages/Filing/UpdateFinancialProfile/index.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import submitUpdateFinancialProfile from 'api/requests/submitUpdateFinancialProfile';
+import { submitUpdateFinancialProfile } from 'api/requests';
 import useSblAuth from 'api/useSblAuth';
 import FieldGroup from 'components/FieldGroup';
 import FormButtonGroup from 'components/FormButtonGroup';
@@ -24,7 +24,7 @@ import {
   ufpSchema,
 } from 'pages/Filing/UpdateFinancialProfile/types';
 
-import { scrollToErrorForm } from 'pages/ProfileForm/ProfileFormUtils';
+import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 
 import { Controller as FormController, useForm } from 'react-hook-form';
 
@@ -78,7 +78,7 @@ function UpdateFinancialProfile(properties: Properties): JSX.Element {
         preFormattedData,
       );
     } else {
-      scrollToErrorForm(formErrorHeaderId);
+      scrollToElement(formErrorHeaderId);
     }
   };
 
@@ -153,7 +153,7 @@ function UpdateFinancialProfile(properties: Properties): JSX.Element {
               label='Federal Taxpayer Identification Number (TIN)'
               id='tin'
               {...register('tin')}
-              errors={formErrors}
+              errorMessage={formErrors.tin?.message}
               showError
             />
           </FieldGroup>