feat(complete user profile): split urls - complete user profile - w a…

…nd without associations (#878) closes #863 ## Changes - feat(complete user profile): split urls - complete user profile - w and without associations ## How to test this PR 1. Create a profile -- using an account with financial institutions 2. Create a profile -- using an account without financial institutions - Try to break the PR by manually navigating as authorized and unauthorized (not logged in) users
cfpb · Aug 23, 2024 · 871c9ad · 871c9ad
1 parent 2e27a58
commit 871c9ad
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,6 +23,8 @@ import FilingWarnings from 'pages/Filing/FilingApp/FilingWarnings';
 import InstitutionProtectedRoute from 'pages/Filing/FilingApp/InstitutionProtectedRoute';
 import UpdateFinancialProfile from 'pages/Filing/UpdateFinancialProfile';
 import ViewUserProfile from 'pages/Filing/ViewUserProfile';
+import CreateProfileFormNoAssoc from 'pages/ProfileForm/CreateProfileForm';
+import CreateProfileFormWAssoc from 'pages/ProfileForm/Step1Form/Step1Form';
 import { SummaryRoutesList } from 'pages/Summary/SummaryRoutes';
 import type { ReactElement } from 'react';
 import { Suspense, lazy } from 'react';
@@ -231,7 +233,7 @@ export default function App(): ReactElement {
     UserProfile,
     isAnyAuthorizationLoading,
   };
-  
+
   return (
     <BrowserRouter>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
@@ -389,6 +391,28 @@ export default function App(): ReactElement {
                   </ProtectedRoute>
                 }
               />
+              <Route
+                path='/profile/complete/no-associations'
+                element={
+                  // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+                  <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                    <main id='main'>
+                      <CreateProfileFormNoAssoc />
+                    </main>
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                path='/profile/complete/with-associations'
+                element={
+                  // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+                  <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                    <main id='main'>
+                      <CreateProfileFormWAssoc />
+                    </main>
+                  </ProtectedRoute>
+                }
+              />
               <Route
                 path='/profile/complete'
                 element={
@@ -434,9 +458,15 @@ export default function App(): ReactElement {
                 path='/paperwork-reduction-act-notice'
                 element={<PaperworkNotice />}
               />
-            {SummaryRoutesList.map(path => {
-              return <Route key={path} path={path} element={<Summary UserProfile={UserProfile} />} />;
-            })}
+              {SummaryRoutesList.map(path => {
+                return (
+                  <Route
+                    key={path}
+                    path={path}
+                    element={<Summary UserProfile={UserProfile} />}
+                  />
+                );
+              })}
               <Route path='/500/*' element={<Error500 />} />
               {/* TODO: Remove /loading route once testing is complete */}
               <Route path='/loading' element={<LoadingContent />} />

diff --git a/src/pages/ProfileForm/index.tsx b/src/pages/ProfileForm/index.tsx
@@ -1,6 +1,3 @@
-import CreateProfileForm from 'pages/ProfileForm/CreateProfileForm';
-import Step1Form from 'pages/ProfileForm/Step1Form/Step1Form';
-
 import { useQuery } from '@tanstack/react-query';
 import { fetchInstitutions, fetchIsDomainAllowed } from 'api/requests';
 import useSblAuth from 'api/useSblAuth';
@@ -75,7 +72,11 @@ function CompleteUserProfileForm(): JSX.Element | null {
   if (isRoutingEnabled && !isEmailDomainAllowed) {
     // TODO: This check should happen in App.ts -- top-level
     return (
-      <Navigate replace to='/profile/complete/summary/deniedDomain' state={{ scenario: scenarios.Error1 }} />
+      <Navigate
+        replace
+        to='/profile/complete/summary/deniedDomain'
+        state={{ scenario: scenarios.Error1 }}
+      />
     );
   }
 
@@ -89,15 +90,11 @@ function CompleteUserProfileForm(): JSX.Element | null {
     !isUserEmailDomainAssociatedWithAnyInstitution;
 
   /* If there is no financial institutions associated with user's email domain, use the 'Add Financial Institution' form instead */
-  const UserProfileForm = isNonAssociatedEmailDomain
-    ? CreateProfileForm
-    : Step1Form;
+  if (isNonAssociatedEmailDomain) {
+    return <Navigate replace to='/profile/complete/no-associations' />;
+  }
 
-  return (
-    <main id='main'>
-      <UserProfileForm />
-    </main>
-  );
+  return <Navigate replace to='/profile/complete/with-associations' />;
 }
 
 export default CompleteUserProfileForm;
diff --git a/src/pages/Summary/Summary.data.tsx b/src/pages/Summary/Summary.data.tsx
@@ -69,7 +69,7 @@ const linkStyles = 'border-b-[1px]';
 // function ChildrenWarning2(): JSX.Element {
 //   return (
 //     <>
-//       You may begin filing for the financial institution assocation that match
+//       You may begin filing for the financial institution association that match
 //       your email domain. Your self selections have gone to our technical help
 //       team for review. You will not be able to file for those institutions until
 //       the associations are approved. Please allow 24-48 hours for a response