content(Complete User Profile): Updated the language, commented out b…

…utton (#598) closes #597 ## Note ### Tasks - Complete your user profile (associated financial institutions) - [x] Update small text in introduction to include link to email support staff and new URL for GLEIF. It would be best to swap in the whole block. ### Tasks - Complete your user profile (no associated financial institutions) - [x] Update small text in introduction to include link to email support staff and new URL for GLEIF. It would be best to swap in the whole block. - [x] Update body text under "Provide your financial institution details" to reference emailing support staff instead of "Add an additional financial institution" button/link. - [x] Change name of link/button to "Add an additional financial institution" - [x] Comment out "Add an additional financial institution" button/link - [x] For error alert links, remove numbering from "financial institution name" and "LEI" because there will only be one for MVP. You can comment out the numbering in code so that we can bring it back when we reveal the button/link post-MVP. - [x] Update text on error alert for "Your email domain" is not authorized (pre-clearance change). - [x] Add a breadcrumb to the warning alert notification screen that takes a user back to "Platform home" (un-authenticated). ## Notable Changes - content(Complete User Profile): Updated the language, commented out button - feat(complete user profile): toggle showing key index per error -- currently disabled - enhancement(Summary): breadcrumb is **standard** for all summaries -- if authenticated, routes to `/landing` otherwise `/` ## How to Test - Compare with the figma - Go through the two task lists above and verify each are correct; especially, last task. ## Screenshot - Normal <img width="410" alt="Screenshot 2024-05-29 at 12 28 38 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/0d290e0d-d8bf-4bc1-8fa9-74b7ce4cb1ad"> ## Screenshot - With Errors <img width="275" alt="Screenshot 2024-05-29 at 12 28 47 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/4f8cc1c9-d034-44fc-afae-a1a26fe18ba0"> ## Screenshot - Error Summary with breadcrumb <img width="793" alt="Screenshot 2024-05-29 at 6 13 26 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/6f1e8e09-af5e-46a4-b7f5-c0e778943557"> ## Screenshot - Warning Summary with breadcrumb <img width="778" alt="Screenshot 2024-05-29 at 6 28 03 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/f948593f-4b7f-42c5-b2f4-b2232f82811d"> ## References #578
cfpb · Jun 1, 2024 · ff3eed6 · ff3eed6
1 parent 7605eab
commit ff3eed6
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 27 deletions.
diff --git a/src/components/FormErrorHeader.tsx b/src/components/FormErrorHeader.tsx
@@ -2,6 +2,7 @@ import { Alert, List, ListItem } from 'design-system-react';
 import type { PropsWithChildren } from 'react';
 import type { FieldErrors, FieldValues } from 'react-hook-form';
 import { Element, Link } from 'react-scroll';
+import { One } from 'utils/constants';
 
 import getAllProperties from 'utils/getAllProperties';
 import type { FormErrorKeyType } from 'utils/getFormErrorKeyLogic';
@@ -15,6 +16,7 @@ interface FormErrorHeaderProperties<
   errors?: FieldErrors<M>;
   alertHeading?: string;
   formErrorHeaderObject: T;
+  showKeyIndexNumber?: boolean;
 }
 
 /**
@@ -30,6 +32,7 @@ function FormErrorHeader<
   id,
   keyLogicFunc,
   formErrorHeaderObject,
+  showKeyIndexNumber,
 }: PropsWithChildren<FormErrorHeaderProperties<M, T>>): JSX.Element | null {
   if (!errors || Object.keys(errors).length === 0) return null;
 
@@ -100,7 +103,9 @@ function FormErrorHeader<
                         : 'Missing entry'
                     }${
                       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-                      typeof keyIndex === 'number' ? ` (${keyIndex + 1})` : ''
+                      showKeyIndexNumber && typeof keyIndex === 'number'
+                        ? ` (${keyIndex + One})`
+                        : ''
                     }`}
                   </Link>
                 </ListItem>
@@ -116,6 +121,7 @@ function FormErrorHeader<
 FormErrorHeader.defaultProps = {
   alertHeading: 'There was a problem completing your user profile',
   errors: null,
+  showKeyIndexNumber: false,
 };
 
 export default FormErrorHeader;
diff --git a/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx b/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx
@@ -9,15 +9,17 @@ interface AddFinancialInstitutionProperties {
   index: number;
   register: UseFormRegister<ValidationSchemaCPF>;
   formErrors: FieldErrors<ValidationSchemaCPF>;
+  isLast?: boolean;
 }
 
 function AddFinancialInstitution({
   index,
   register,
   formErrors,
+  isLast,
 }: AddFinancialInstitutionProperties): JSX.Element {
   return (
-    <div className='mb-[1.875rem]' key={index}>
+    <div className={isLast ? '' : 'mb-[1.875rem]'} key={index}>
       <FieldGroup>
         <InputEntry
           label='Financial institution name'
@@ -46,4 +48,8 @@ function AddFinancialInstitution({
   );
 }
 
+AddFinancialInstitution.defaultProps = {
+  isLast: false,
+};
+
 export default AddFinancialInstitution;
diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -10,9 +10,10 @@ import FormWrapper from 'components/FormWrapper';
 
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormMain from 'components/FormMain';
+import { Link } from 'components/Link';
 import LinkButton from 'components/LinkButton';
 import SectionIntro from 'components/SectionIntro';
-import { Button, Link } from 'design-system-react';
+import { Button } from 'design-system-react';
 import {
   emptyAddFinancialInstitution,
   formatUserProfileObject,
@@ -34,6 +35,8 @@ import { scenarios } from 'pages/Summary/Summary.data';
 
 import { useNavigate } from 'react-router-dom';
 
+import { sblHelpMail } from 'utils/common';
+import { One } from 'utils/constants';
 import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 
 function CreateProfileForm(): JSX.Element {
@@ -113,6 +116,7 @@ function CreateProfileForm(): JSX.Element {
           id={formErrorHeaderId}
           formErrorHeaderObject={CupNFFormHeaderErrors}
           keyLogicFunc={normalKeyLogic}
+          // showKeyIndexNumber -- re-enable post-mvp
         />
         <Step1FormInfoHeader />
         <FormMain>
@@ -123,11 +127,12 @@ function CreateProfileForm(): JSX.Element {
           <SectionIntro heading='Provide your financial institution details'>
             Provide the name and LEI of the financial institution for which you
             are authorized to file. If you are authorized to file for an
-            additional financial institution, click &ldquo;Add a financial
-            institution.&rdquo;
+            additional financial institution,{' '}
+            <Link href={sblHelpMail}>email our support staff</Link>.
           </SectionIntro>
           {fields.map((field, index) => {
             const onRemoveThisInstitution = (): void => remove(index);
+            const isLast = fields.length - One === index;
             return (
               <div className='flex flex-col' key={`${field.id}`}>
                 {index !== 0 && (
@@ -141,15 +146,18 @@ function CreateProfileForm(): JSX.Element {
                   index={index}
                   register={register}
                   formErrors={formErrors}
+                  isLast={isLast}
                 />
               </div>
             );
           })}
-          <div className='mb-[3.75rem]'>
+          {/* TODO: Re-enable button post-mvp */}
+          {/* https://github.com/cfpb/sbl-frontend/issues/596 */}
+          {/* <div className='mb-[3.75rem]'>
             <LinkButton onClick={onAppendFinancialInstitutions} icon='plus'>
-              Add a financial institution
+              Add an additional financial institution
             </LinkButton>
-          </div>
+          </div> */}
           <FormButtonGroup>
             <Button
               appearance='primary'

diff --git a/src/pages/ProfileForm/Step1Form/Step1FormHeader.tsx b/src/pages/ProfileForm/Step1Form/Step1FormHeader.tsx
@@ -22,11 +22,22 @@ function Step1FormHeader({ isStep1 }: Step1FormHeaderProperties): JSX.Element {
         }
         description={
           <Paragraph>
-            In order to begin using the platform you must have a Legal Entity
-            Identifier (LEI) for your financial institution. If your
-            organization does not have an LEI, visit the{' '}
-            <Link href={gleifGetAnLEI}>Global LEI Foundation (GLEIF)</Link>{' '}
-            website.
+            <>
+              In order to begin using the platform you must have a Legal Entity
+              Identifier (LEI) for your financial institution. If your
+              organization does not have an LEI, visit the{' '}
+              <Link href={gleifGetAnLEI} target='_blank'>
+                Global LEI Foundation (GLEIF)
+              </Link>{' '}
+              website. If you need assistance with this form,{' '}
+              <Link
+                href='mailto:[email protected]?subject=[BETA] Complete your user profile: Questions after submitting form'
+                target='_blank'
+              >
+                email our support staff
+              </Link>
+              .
+            </>
           </Paragraph>
         }
       />

diff --git a/src/pages/Summary/Summary.data.tsx b/src/pages/Summary/Summary.data.tsx
@@ -99,7 +99,15 @@ function ChildrenError1(): JSX.Element {
       <Link className={linkStyles} href='/'>
         return to the platform homepage
       </Link>
-      , and sign in with your financial institution email address.
+      , and sign in with your financial institution email address. If this issue
+      persists,{' '}
+      <Link
+        className={linkStyles}
+        href='mailto:[email protected]?subject=[BETA] Complete your user profile: Questions after submitting form'
+      >
+        email our support staff
+      </Link>
+      .
     </>
   );
 }
@@ -126,7 +134,7 @@ function ChildrenSuccessInstitutionProfileUpdate(): JSX.Element {
   return (
     <>
       Please allow 24-48 hours for a response during normal business hours. If
-      you need further assistance please{' '}
+      you need further assistance{' '}
       <Link
         className={linkStyles}
         href='mailto:[email protected]?subject=[BETA] Update your financial institution profile: Questions after submitting form'

diff --git a/src/pages/Summary/Summary.tsx b/src/pages/Summary/Summary.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 
+import useSblAuth from 'api/useSblAuth';
 import CrumbTrail from 'components/CrumbTrail';
 import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
 import { Link } from 'design-system-react';
 import type { Scenario } from 'pages/Summary/Summary.data';
-import { scenarios } from 'pages/Summary/Summary.data';
 import { useLocation, useNavigate } from 'react-router-dom';
 import SummaryContent from './SummaryContent';
 
@@ -18,6 +18,10 @@ function Summary(): JSX.Element | null {
     window.scrollTo({ top: 0 });
   }, []);
 
+  const auth = useSblAuth();
+  const { isAuthenticated: userIsAuthenticated, isLoading: isAuthLoading } =
+    auth;
+
   const { state } = useLocation() as { state: ScenarioStateType };
   const navigate = useNavigate();
 
@@ -29,23 +33,20 @@ function Summary(): JSX.Element | null {
   }, [state, navigate]);
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (!state?.scenario) {
+  if (!state?.scenario || isAuthLoading) {
     return <LoadingContent />;
   }
 
-  const isSuccessInstitutionProfileUpdate: boolean =
-    state.scenario === scenarios.SuccessInstitutionProfileUpdate;
+  const platformHomeLink = userIsAuthenticated ? '/landing' : '/';
 
   return (
     <main id='main'>
-      {isSuccessInstitutionProfileUpdate ? (
-        <CrumbTrail>
-          <Link isRouterLink href='/landing' key='home'>
-            Platform home
-          </Link>
-        </CrumbTrail>
-      ) : null}
-      <FormWrapper isMarginTop={!isSuccessInstitutionProfileUpdate}>
+      <CrumbTrail>
+        <Link isRouterLink href={platformHomeLink} key='home'>
+          Platform home
+        </Link>
+      </CrumbTrail>
+      <FormWrapper isMarginTop={false}>
         <SummaryContent scenario={state.scenario} />
       </FormWrapper>
     </main>