[Task] [Complete your user profile] DSR and Figma Alignment

src/App.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
+import 'design-system-react/style.css';
+
 import { useQuery } from '@tanstack/react-query';
 import fetchInstitutions from 'api/fetchInstitutions';
 import fetchIsDomainAllowed from 'api/fetchIsDomainAllowed';
@@ -8,14 +10,14 @@ import useSblAuth from 'api/useSblAuth';
 import classNames from 'classnames';
 import LoadingOrError from 'components/LoadingOrError';
 import { Button, FooterCfGov, Link, PageHeader } from 'design-system-react';
-import 'design-system-react/style.css';
 import ViewUserProfile from 'pages/Filing/ViewUserProfile';
 import { Scenario } from 'pages/ProfileForm/Step2Form/Step2FormHeader.data';
 import type { ReactElement } from 'react';
 import { Suspense, lazy } from 'react';
 import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import useProfileForm from 'store/useProfileForm';
 import './App.less';
+import { sblHelpLink } from 'utils/common';
 
 
 const FilingApp = lazy(async () => import('pages/Filing/FilingApp'));
@@ -136,7 +138,7 @@ function ProtectedRoute({
     // TODO: replace this generic SBL Help link with a specific Salesforce form link, see:
     // https://github.com/cfpb/sbl-frontend/issues/109
     window.location.replace(
-      'https://sblhelp.consumerfinance.gov/',
+      sblHelpLink,
     );
     return null;
   }

src/api/submitUserProfile.tsx

@@ -1,5 +1,4 @@
 import type { SblAuthProperties } from 'api/useSblAuth';
-import { BASE_URL } from 'api/common';
 
 interface UserProfileObject {
   first_name: string;
@@ -10,6 +9,7 @@ interface UserProfileObject {
 export const submitUserProfile = async (
   auth: SblAuthProperties,
   userProfileObject: UserProfileObject,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): Promise<any> => {
   const response = await fetch(`/v1/admin/me/`, {
     headers: {
@@ -20,7 +20,7 @@ export const submitUserProfile = async (
     body: JSON.stringify(userProfileObject),
   });
 
-  return response.json() ;
+  return response.json();
 };
 
 export default submitUserProfile;

src/api/useSblAuth.ts

@@ -18,6 +18,11 @@ const useSblAuth = (): SblAuthProperties => {
     auth.signoutRedirect({
       post_logout_redirect_uri: window.location.origin,
     });
+
+    // Note: This is placed here because after logging in with a non-domain email the app hard-forwards the user to sblHelp with no way of stopping this
+    if (import.meta.env.DEV) {
+      window.logout = onLogout;
+    }
 
   return {
     ...auth,

src/components/InputErrorMessage.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import ErrorIcon from './ErrorIcon';
+import { AlertFieldLevel } from 'design-system-react';
 
 interface InputErrorMessageProperties {
   children: ReactNode;
@@ -13,10 +13,10 @@ function InputErrorMessage({
       className='a-form-alert a-form-alert__error mt-[0.9375em]'
       role='alert'
     >
-      <ErrorIcon />
-      <p className='a-form-alert_text ml-6 -translate-y-[6%] text-[#1B1B1B]'>
-        {children}
-      </p>
+      <AlertFieldLevel
+        message={children}
+        status="error"
+      />
     </div>
   );
 }

src/pages/Filing/FilingHome.tsx

@@ -15,6 +15,7 @@ import type { ReactElement } from 'react';
 import { Link as RouterLink } from "react-router-dom";
 import './FilingHome.less';
 import ProcessStep from './ProcessStep';
+import { sblHelpLink, gleifLink } from 'utils/common';
 
 function Home(): ReactElement {
   const auth = useSblAuth();
@@ -55,7 +56,7 @@ function Home(): ReactElement {
             >
               In order to begin using the filing platform you must have a Legal
               Entity Identifier (LEI) for your financial institution. Visit the{' '}
-              <Link href='https://www.gleif.org/'>Global LEI Foundation (GLEIF)</Link> website for
+              <Link href={gleifLink}>Global LEI Foundation (GLEIF)</Link> website for
               more information on how to obtain an LEI.
             </ProcessStep>
 
@@ -105,7 +106,7 @@ function Home(): ReactElement {
                 >
                   Find answers to frequently asked questions
                 </Link>,
-                <Link href='https://sblhelp.consumerfinance.gov/' key='ask-a-question'>
+                <Link href={sblHelpLink} key='ask-a-question'>
                   Submit a question
                 </Link>,
               ]}

src/pages/Filing/InstitutionDetails/PageIntro.tsx

@@ -1,4 +1,5 @@
 import { Link, TextIntroduction } from 'design-system-react';
+import { sblHelpLink } from 'utils/common';
 
 export function PageIntro(): JSX.Element {
   return (
@@ -15,7 +16,7 @@ export function PageIntro(): JSX.Element {
       callToAction={
         // TODO: replace this generic SBL Help link with a specific Salesforce form link, see:
         // https://github.com/cfpb/sbl-frontend/issues/109
-        <Link href='https://sblhelp.consumerfinance.gov/'>Update your financial institution profile</Link>
+        <Link href={sblHelpLink}>Update your financial institution profile</Link>
       }
     />
   );

src/pages/Filing/ViewUserProfile/index.tsx

@@ -8,6 +8,7 @@ import useSblAuth from '../../../api/useSblAuth';
 import CrumbTrail from '../../../components/CrumbTrail';
 import AssociatedInstitutions from './AssociatedInstitutions';
 import UserInformation from './UserInformation';
+import { sblHelpLink } from 'utils/common';
 
 
 export default function ViewUserProfile(): JSX.Element {
@@ -54,7 +55,7 @@ export default function ViewUserProfile(): JSX.Element {
               // TODO: replace this generic SBL Help link with a specific Salesforce form link, see:
               // https://github.com/cfpb/sbl-frontend/issues/109
               callToAction={
-                <Link href='/https://sblhelp.consumerfinance.gov/'>Update your user profile</Link>
+                <Link href={sblHelpLink}>Update your user profile</Link>
               }
             />
             <UserInformation data={UserProfile} />

src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx

@@ -1,14 +1,15 @@
-import { Checkbox, Link } from 'design-system-react';
+import { Checkbox, Link, Paragraph, Heading } from 'design-system-react';
 import FormParagraph from 'components/FormParagraph';
+import { sblHelpLink } from 'utils/common';
 
-import type { FiDataChecked } from 'pages/ProfileForm/types';
+import type { InstitutionDetailsApiCheckedType } from 'pages/ProfileForm/types';
 
 import useProfileForm from 'store/useProfileForm';
 
 interface AssociatedFinancialInstitutionProperties {
   key: string;
   isFirst: boolean;
-  fiObject: FiDataChecked;
+  fiObject: InstitutionDetailsApiCheckedType;
   onCheckHandler: () => void;
   hasError: boolean;
 }
@@ -30,14 +31,14 @@ function AssociatedFinancialInstitution({
         id={`${fiObject.name} ${fiObject.lei}`}
         className={`${hasError ? 'error-checkbox' : ''}`}
         label={
-          <div className='-translate-x-[0.2em] -translate-y-[1.4%]'>
-            <h4 className='mb-[0.03rem]'>{fiObject.name}</h4>
-            <p className='mb-[0.03rem] font-normal'>LEI: {fiObject.lei}</p>
-            <p className='mb-[0.03rem] font-normal'>Tax ID: {fiObject.tax_id}</p>
+          <div className='-translate-x-[0.2rem] -translate-y-[1.4%]'>
+            <Heading type='4' className='mb-[0.03rem]'>{fiObject.name}</Heading>
+            <Paragraph className='mb-[0.03rem] font-normal'>LEI: {fiObject.lei}</Paragraph>
+            <Paragraph className='mb-[0.03rem] font-normal'>Tax ID: {fiObject.tax_id}</Paragraph>
             {fiObject.rssd_id ? (
-              <p className='mb-[0.03rem] font-normal'>
+              <Paragraph className='mb-[0.03rem] font-normal'>
                 RSS ID: {fiObject.rssd_id}
-              </p>
+              </Paragraph>
             ) : null}
           </div>
         }
@@ -52,9 +53,9 @@ function AssociatedFinancialInstitution({
 
 interface AssociatedFinancialInstitutionsProperties {
   errors: object;
-  checkedListState: FiDataChecked[];
+  checkedListState: InstitutionDetailsApiCheckedType[];
   setCheckedListState: (
-    callbackFunction: (previous: FiDataChecked[]) => FiDataChecked[],
+    callbackFunction: (previous: InstitutionDetailsApiCheckedType[]) => InstitutionDetailsApiCheckedType[],
   ) => void;
 }
 
@@ -74,10 +75,10 @@ function AssociatedFinancialInstitutions({
       </FormParagraph>
 
       <div>
-        {checkedListState.map((fiObject: FiDataChecked, index: number) => {
+        {checkedListState.map((fiObject: InstitutionDetailsApiCheckedType, index: number) => {
           const onCheckHandler = (): void => {
-            setCheckedListState((previous: FiDataChecked[]): FiDataChecked[] =>
-              previous.map(object => {
+            setCheckedListState((previous: InstitutionDetailsApiCheckedType[]): InstitutionDetailsApiCheckedType[] =>
+              previous.map((object: InstitutionDetailsApiCheckedType) => {
                 if (object.lei !== fiObject.lei) return object;
                 return { ...fiObject, checked: !fiObject.checked };
               }),
@@ -98,7 +99,7 @@ function AssociatedFinancialInstitutions({
         <FormParagraph>
           If you are authorized to file for an institution that is not listed,
           please complete this form and then contact our support staff{' '}
-          <Link href='#'>contact our support staff</Link> to complete your user
+          <Link href={sblHelpLink}>contact our support staff</Link> to complete your user
           profile.
         </FormParagraph>
       )}

src/pages/ProfileForm/Step1Form/InputEntry.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { Element } from 'react-scroll';
 
+import { TextInput } from 'design-system-react';
 import InputErrorMessage from 'components/InputErrorMessage';
 
 interface InputEntryProperties
@@ -24,21 +25,16 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
           {label}
         </label>
         {children}
-        {/* TODO: Replace this item with DSR equivalent : https://github.com/cfpb/sbl-frontend/issues/97 */}
-        <input
+        <TextInput
+          isFullWidth
           type={id === 'email' ? 'email' : 'text'}
           id={id}
-          className={`w-full !border !border-solid ${
-            errors[id]
-              ? 'border-2 !border-errorColor'
-              : '!border-cfpbBorderColor'
-          } box-border disabled:bg-disabledColor`}
+          status={errors[id] ? 'error' : ''}
           aria-invalid={errors[id] ? 'true' : 'false'}
           disabled={isDisabled}
           ref={reference}
           {...properties}
         />
-        {/* TODO: Replace this item with DSR equivalent : https://github.com/cfpb/sbl-frontend/issues/97 */}
         {errors[id] ? (
           <div>
             <InputErrorMessage>{errors[id].message}</InputErrorMessage>

src/pages/ProfileForm/Step1Form/NoDatabaseResultError.tsx

@@ -1,19 +1,17 @@
-import ErrorIcon from 'components/ErrorIcon';
-import { Link } from 'design-system-react';
+import { Link, AlertFieldLevel } from 'design-system-react';
+import { sblHelpLink } from 'utils/common';
 
 function NoDatabaseResultError(): JSX.Element {
   return (
     <div className='mt-[0.9375em] flex flex-row gap-2'>
-      <ErrorIcon />
-      <div className=''>
-        <p className='-translate-y-[3%]'>
-          The financial institution/LEI you searched for was not found in our
+      <AlertFieldLevel
+    message={<>The financial institution/LEI you searched for was not found in our
           database. If you recently registered for an LEI with GLEIF, your
           registration may still be in process. If you need further assistance
-          please <Link href='#'>submit a technical question</Link> to our help
-          desk.
-        </p>
-      </div>
+          please <Link href={sblHelpLink}>submit a technical question</Link> to our help
+          desk.</>}
+    status="error"
+  />
     </div>
   );
 }

src/pages/ProfileForm/Step1Form/Step1Form.tsx

@@ -284,7 +284,6 @@ function Step1Form(): JSX.Element {
         <div className='mt-[30px]'>
           <Button
             appearance='primary'
-            // TODO: Route to SBLhelp/Salesforce on no associated LEIs: https://github.com/cfpb/sbl-frontend/issues/99
             onClick={onSubmitButtonAction}
             label='Submit'
             aria-label='Submit User Profile'

src/pages/ProfileForm/Step1Form/Step1FormHeader.tsx

@@ -1,19 +1,23 @@
 import { Link, TextIntroduction } from 'design-system-react';
+import { gleifLink } from 'utils/common';
+
 
 /**
  * 
  * @returns Header for Step1Form
  */
 function Step1FormHeader(): JSX.Element {
   return (
-          <div className="max-w-[670px] mb-[45px]">
-            {/* TODO: Replace with TextIntroduction component */}
-            <h1 className="">Complete your user profile</h1>
-            <p className="lead-paragraph">Indicate the financial institution you are authorized to file for to complete your user profile. Once you have successfully associated your user profile with a financial institution you will have access to the filing platform and can begin the filing process.</p>
-            <p className="mb-[30px]">
-              In order to begin using the filing platform you must have a Legal Entity identifier (LEI) for your financial institution. Visit the <Link href="#">Global LEI Foundation (GLEIF)</Link> website for more information on how to obtain an LEI.
-            </p>
-            <p />
+          <div className="max-w-[41.875rem] mb-[2.8125rem]">
+            <TextIntroduction
+            heading="Complete your user profile"
+            subheading='Indicate the financial institution you are authorized to file for to complete your user profile. Once you have successfully associated your user profile with a financial institution you will have access to the filing platform and can begin the filing process.'
+            description={
+              <>
+                In order to begin using the filing platform you must have a Legal Entity identifier (LEI) for your financial institution. Visit the <Link href={gleifLink}>Global LEI Foundation (GLEIF)</Link> website for more information on how to obtain an LEI.
+              </>
+            }
+          />
         </div>
   )
 }

src/store/useProfileForm.ts

@@ -6,7 +6,10 @@ import { immer } from 'zustand/middleware/immer';
 interface State {
   step: number,
   profileData: ValidationSchema,
-  selectedScenario: Scenario
+  selectedScenario: Scenario,
+  step: number,
+  enableMultiselect: boolean,
+  isSalesforce: boolean,
 }
 
 interface Actions {
@@ -27,15 +30,15 @@ const useProfileForm = create(
     // Step 2 toggles
     selectedScenario: Scenario.Error1,
     // setters
-    setStep: (by) =>
+    setStep: (by): void =>
       set((state: State) => {
         state.step = by
       }),
-    setProfileData: (vObject) =>
+    setProfileData: (vObject): void =>
       set((state: State) => {
         state.profileData = vObject
       }),
-    setSelectedScenario: (scenario) =>
+    setSelectedScenario: (scenario): void =>
       set((state: State) => {
         state.selectedScenario = scenario
       }),

src/utils/common.ts

@@ -0,0 +1,7 @@
+export const sblHelpLink = 'https://sblhelp.consumerfinance.gov/';
+export const gleifLink = 'https://www.gleif.org/';
+
+export default {
+  sblHelpLink,
+  gleifLink
+}