[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,15 +10,20 @@ 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 {
+  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'));
 const FilingHome = lazy(async () => import('pages/Filing/FilingHome'));
@@ -57,7 +64,10 @@ interface NavItemProperties {
 
 function NavItem({ href, label, className }: NavItemProperties): JSX.Element {
   return (
-    <Link {...{ href }} className={classNames(deriveClassname(href), className)}>
+    <Link
+      {...{ href }}
+      className={classNames(deriveClassname(href), className)}
+    >
       {label}
     </Link>
   );
@@ -74,13 +84,17 @@ function BasicLayout(): ReactElement {
     enabled: !!auth.isAuthenticated,
   });
 
-  if (userInfo && !(pathname === '/')) {
+  if (userInfo && !(pathname === '/') && !(pathname === '/profile-form')) {
     // Logged in
     headerLinks.push(
       <span key='user-name'>
-        <NavItem className="!font-normal " href="/user-profile" label={
-          userInfo.profile.name ?? userInfo.profile.email ?? 'User profile'
-        } />
+        <NavItem
+          className='!font-normal '
+          href='/user-profile'
+          label={
+            userInfo.profile.name ?? userInfo.profile.email ?? 'User profile'
+          }
+        />
       </span>,
       <span className='a-link nav-item auth-action' key='logout'>
         <Button label='LOG OUT' asLink onClick={auth.onLogout} />
@@ -128,24 +142,24 @@ function ProtectedRoute({
 
   if (!isEmailDomainAllowed) {
     ProfileFormState.setState({ selectedScenario: Scenario.Error1, step: 2 });
-    return <Navigate replace to="/profile-form" />;
+    return <Navigate replace to='/profile-form' />;
   }
 
-  const isUserEmailDomainAssociatedWithAnyInstitution = institutionsAssociatedWithUserEmailDomain.length > 0;
-  if (!isUserEmailDomainAssociatedWithAnyInstitution){
+  const isUserEmailDomainAssociatedWithAnyInstitution =
+    institutionsAssociatedWithUserEmailDomain.length > 0;
+  if (!isUserEmailDomainAssociatedWithAnyInstitution) {
     // 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/',
-    );
+    window.location.replace(sblHelpLink);
     return null;
   }
 
   const institutionsAssociatedWithUserProfile = UserProfile.institutions;
-  const isUserProfileAssociatedWithAnyInstitutions = institutionsAssociatedWithUserProfile.length > 0;
-  if(!isUserProfileAssociatedWithAnyInstitutions) {
+  const isUserProfileAssociatedWithAnyInstitutions =
+    institutionsAssociatedWithUserProfile.length > 0;
+  if (!isUserProfileAssociatedWithAnyInstitutions) {
     ProfileFormState.setState({ step: 1 });
-    return (<Navigate replace to="/profile-form" />);
+    return <Navigate replace to='/profile-form' />;
   }
   return children;
 }
@@ -157,20 +171,26 @@ export default function App(): ReactElement {
   // TODO: incorporate this into useSblAuth, see:
   // https://github.com/cfpb/sbl-frontend/issues/134
   // eslint-disable-next-line unicorn/prefer-string-slice
-  const emailDomain = emailAddress?.substring(emailAddress.lastIndexOf('@')+1);
+  const emailDomain = emailAddress?.substring(
+    emailAddress.lastIndexOf('@') + 1,
+  );
 
-  const { isLoading: isFetchInstitutionsLoading, data: institutionsAssociatedWithUserEmailDomain } = useQuery({
-    queryKey:  [`fetch-institutions-${emailDomain}`, emailDomain],
+  const {
+    isLoading: isFetchInstitutionsLoading,
+    data: institutionsAssociatedWithUserEmailDomain,
+  } = useQuery({
+    queryKey: [`fetch-institutions-${emailDomain}`, emailDomain],
     queryFn: async () => fetchInstitutions(auth, emailDomain),
     enabled: !!emailDomain,
   });
-  const { isLoading: isEmailDomainAllowedLoading, data: isEmailDomainAllowed } = useQuery({
-    queryKey:  [`is-domain-allowed-${emailDomain}`, emailDomain],
-    queryFn: async () => fetchIsDomainAllowed(auth, emailDomain),
-    enabled: !!emailDomain,
-  });
+  const { isLoading: isEmailDomainAllowedLoading, data: isEmailDomainAllowed } =
+    useQuery({
+      queryKey: [`is-domain-allowed-${emailDomain}`, emailDomain],
+      queryFn: async () => fetchIsDomainAllowed(auth, emailDomain),
+      enabled: !!emailDomain,
+    });
   const { isLoading: isFetchUserProfileLoading, data: UserProfile } = useQuery({
-    queryKey:  [`fetch-user-profile-${emailAddress}`, emailAddress],
+    queryKey: [`fetch-user-profile-${emailAddress}`, emailAddress],
     queryFn: async () => fetchUserProfile(auth),
     enabled: !!auth.isAuthenticated,
   });
@@ -179,16 +199,16 @@ export default function App(): ReactElement {
     auth.isLoading,
     isFetchInstitutionsLoading,
     isEmailDomainAllowedLoading,
-    isFetchUserProfileLoading
+    isFetchUserProfileLoading,
   ];
   const isAnyAuthorizationLoading = loadingStates.some(Boolean);
   const ProtectedRouteAuthorizations = {
     ...auth,
     isEmailDomainAllowed,
     institutionsAssociatedWithUserEmailDomain,
     UserProfile,
-    isAnyAuthorizationLoading
-  }
+    isAnyAuthorizationLoading,
+  };
 
   // TODO: add more comprehensive error and loading state handling, see:
   // https://github.com/cfpb/sbl-frontend/issues/108

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;
@@ -9,14 +9,8 @@ function InputErrorMessage({
   children,
 }: InputErrorMessageProperties): JSX.Element {
   return (
-    <div
-      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>
+    <div className='mt-[0.9375rem]'>
+      <AlertFieldLevel message={children} status='error' />
     </div>
   );
 }

src/components/ProfileFormWrapper.tsx

@@ -6,9 +6,9 @@ interface Properties {
 
 function ProfileFormWrapper({children}: Properties): JSX.Element {
   return (
-    <div className="ml-5 mr-5 mt-[45px]">
-      <div className="max-w-[1200px] mx-auto mb-12">
-        <div className="max-w-[770px] mx-auto">
+    <div className="ml-5 mr-5 mt-[2.813rem]">
+      <div className="max-w-[75rem] mx-auto mb-12">
+        <div className="max-w-[48.125rem] mx-auto">
           { children }
         </div>
       </div>

src/index.css

@@ -1,7 +1,17 @@
-@tailwind base;
+/* @tailwind base; */
 @tailwind components;
 @tailwind utilities;
 
+/* Modified from cf.gov for tailwind use, see:
+https://github.com/search?q=org%3Acfpb+max-width%3A+41.875rem%3B&type=code&p=1
+https://v1.tailwindcss.com/docs/adding-base-styles#using-css */
+
+@layer components {
+  .row dd, .row dt, .row h3, .row h4, .row h5, .row h6, .row li, .row p, .row label {
+      max-width: 41.875rem;
+  }
+}
+
 .auth-action .a-btn {
   font-weight: 600;
   color: #43484e;
@@ -23,6 +33,11 @@
 }
 
 /* Checkbox Border error styling - workaround */
-.m-form-field__checkbox.error-checkbox .a-label:before, .m-form-field__radio .a-label:before {
+.m-form-field__checkbox.error-checkbox .a-label::before, .m-form-field__radio .a-label::before {
   @apply !border-errorColor !border-2
+}
+
+/* Workaround for styling the institution details on Profile-Form */
+.m-form-field__checkbox .invisible::before {
+  visibility: hidden;
 }

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/ViewUserProfile/index.tsx

@@ -7,6 +7,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 {
   const auth = useSblAuth();

src/pages/ProfileForm/ProfileFormUtils.ts

@@ -1,4 +1,9 @@
-import type { ValidationSchema, FormattedUserProfileObjectType } from './types';
+import type {
+  InstitutionDetailsApiType,
+  InstitutionDetailsApiCheckedType,
+  ValidationSchema,
+  FormattedUserProfileObjectType
+} from 'pages/ProfileForm/types';
 
 export const formatUserProfileObject = (
   userProfileObject: ValidationSchema,
@@ -7,3 +12,13 @@ export const formatUserProfileObject = (
   last_name: userProfileObject.lastName,
   leis: userProfileObject.financialInstitutions.map(object => object.lei),
 });
+
+export const formatDataCheckedState = (
+  fiDataInput: InstitutionDetailsApiType[] = [],
+): InstitutionDetailsApiCheckedType[] =>
+  fiDataInput.map(object => ({ ...object, checked: false }));
+
+export default {
+  formatUserProfileObject,
+  formatDataCheckedState
+}