[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,7 +9,7 @@ interface UserProfileObject {
 export const submitUserProfile = async (
   auth: SblAuthProperties,
   userProfileObject: UserProfileObject,
-): Promise<any> => {
+): Promise<null> => {
   const response = await fetch(`/v1/admin/me/`, {
     headers: {
       Authorization: `Bearer ${auth.user?.access_token}`,
@@ -20,7 +19,7 @@ export const submitUserProfile = async (
     body: JSON.stringify(userProfileObject),
   });
 
-  return response.json() ;
+  return response.json() as Promise<null>;
 };
 
 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/FieldGroup.tsx

@@ -5,7 +5,7 @@ interface FieldGroupProperties {
 function FieldGroup({ children }: FieldGroupProperties): JSX.Element {
   return (
       <div
-        className="bg-[#F7F8F9] p-[30px] !border !border-solid !border-cfpbBorderColor"
+        className="bg-[#F7F8F9] p-[1.875rem] !border !border-solid !border-cfpbBorderColor"
       >
         {children}
       </div>

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'>TIN: {fiObject.tax_id}</Paragraph>
             {fiObject.rssd_id ? (
-              <p className='mb-[0.03rem] font-normal'>
-                RSS ID: {fiObject.rssd_id}
-              </p>
+              <Paragraph className='mb-[0.03rem] font-normal'>
+                RSSD ID: {fiObject.rssd_id}
+              </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;
 }
 
@@ -68,16 +69,14 @@ function AssociatedFinancialInstitutions({
   return (
     <>
       <FormParagraph>
-        The following financial institution is associated with your email
-        domain. Check the box if you are authorized to file for this
-        institution.
+        The following financial institutions are associated with your email domain. Select the financial institutions you are authorized to file for.
       </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 +97,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, Heading } from 'design-system-react';
 import InputErrorMessage from 'components/InputErrorMessage';
 
 interface InputEntryProperties
@@ -10,35 +11,34 @@ interface InputEntryProperties
   label: string;
   errors: object;
   isDisabled: boolean;
+  isLast: boolean;
+  hideInput: boolean;
   children?: ReactNode;
 }
 
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
-    { id, errors, label, isDisabled = false, children, ...properties },
+    { id, errors, label, isDisabled = false, hideInput = false, isLast = false, children, ...properties },
     reference,
   ) => (
-    <div className='mb-6'>
+    <div className={`${isLast ? '' : 'mb-[0.9375rem]'} ?`}>
       <Element name={id}>
-        <label htmlFor={id} className='a-label a-label__heading'>
-          {label}
+        <label htmlFor={id}>
+          <Heading type='4' className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}>{label}</Heading>
         </label>
         {children}
-        {/* TODO: Replace this item with DSR equivalent : https://github.com/cfpb/sbl-frontend/issues/97 */}
-        <input
-          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`}
-          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 */}
+        <div className={`${hideInput ? 'hidden' : ''}`}>
+          <TextInput
+            isFullWidth
+            type={id === 'email' ? 'email' : 'text'}
+            id={id}
+            status={errors[id] ? 'error' : ''}
+            aria-invalid={errors[id] ? 'true' : 'false'}
+            disabled={isDisabled}
+            ref={reference}
+            {...properties}
+          />
+        </div>
         {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>
   );
 }