From 9ace3850dbc2ee4990dfbbcf40eb32f2d9bc06e7 Mon Sep 17 00:00:00 2001
From: Bill Himmelsbach <whimmels@gmail.com>
Date: Tue, 28 May 2024 10:45:50 -0700
Subject: [PATCH] feat(home): add beta banner, beta/legal alert (#560)

Adds the beta and legal alert to the unauthenticated home page.

Closes #559

## Changes

- adds a beta banner to all pages
- adds a beta/legal alert to the unauthenticated home page

## How to test this PR

1. Take a peek at the preview site
2. See if the banner and alert look like the designs
3. Test out the links in the alert
4. Make sure the banner appears correct on other pages in the app

## Design questions
- what should the subject line be for the `email our support staff` link
in the Alert box on the unauthenticated home page? I set it to `[BETA]
Home page: Questions or suggestions` for now @natalia-fitzgerald

## Screenshots
<img width="1884" alt="Screenshot 2024-05-21 at 11 32 50 PM"
src="https://github.com/cfpb/sbl-frontend/assets/19983248/5feffa85-e8ae-41fa-831a-57c776c0217d">



## Notes

- Future post-mvp related PRs
  - https://github.com/cfpb/design-system-react/issues/352
  - https://github.com/cfpb/design-system-react/issues/351
---
 src/App.tsx                              | 12 +++++++-
 src/components/BetaAndLegalNotice.tsx    | 39 ++++++++++++++++++++++++
 src/pages/AuthenticatedLanding/index.tsx |  2 ++
 src/pages/Filing/FilingHome.tsx          |  2 ++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BetaAndLegalNotice.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a85e8119b..c883747f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import FooterCfGovWrapper from 'components/FooterCfGovWrapper';
 import { Link } from 'components/Link';
 import { LoadingApp, LoadingContent } from 'components/Loading';
 import ScrollToTop from 'components/ScrollToTop';
-import { PageHeader, SkipNav } from 'design-system-react';
+import { Alert, PageHeader, SkipNav } from 'design-system-react';
 import 'design-system-react/style.css';
 import Error500 from 'pages/Error/Error500';
 import { NotFound404 } from 'pages/Error/NotFound404';
@@ -113,6 +113,16 @@ function BasicLayout(): ReactElement {
     <div className='flex flex-col bg-white'>
       <div>
         <SkipNav />
+        {/* TODO: Move this component to the DSR for other teams' use */}
+        {/* See: https://github.com/cfpb/design-system-react/issues/352 */}
+        <div className='o-banner'>
+          <div className='wrapper wrapper__match-content'>
+            <Alert
+              message='This is a beta for the small business lending data submission platform'
+              status='warning'
+            />
+          </div>
+        </div>
         <PageHeader links={headerLinks} />
         <Outlet />
       </div>
diff --git a/src/components/BetaAndLegalNotice.tsx b/src/components/BetaAndLegalNotice.tsx
new file mode 100644
index 000000000..e2bd7924e
--- /dev/null
+++ b/src/components/BetaAndLegalNotice.tsx
@@ -0,0 +1,39 @@
+import { Alert, Heading, Paragraph, Link } from 'design-system-react';
+
+export default function BetaAndLegalNotice(): ReactElement {
+  return (
+    <Alert
+      className='mb-[2.813rem]'
+      message={
+        <>
+          <Heading type='2' className='h4 mb-[0.313rem]'>
+            This is a beta for the small business lending data submission
+            platform
+          </Heading>
+          <Paragraph>
+            Thank you for participating. The data submission platform is
+            available to upload, test, and validate data. All uploaded data is
+            for testing purposes only and may be removed at any time. For
+            questions or feedback,{' '}
+            <Link href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Home page: Questions or suggestions'>
+              email our support staff
+            </Link>
+            .
+          </Paragraph>
+          <Paragraph>
+            In light of court orders in ongoing litigation, the CFPB plans to
+            issue an interim final rule to extend the compliance dates of the
+            small business lending rule.{' '}
+            <Link href='https://www.consumerfinance.gov/1071-rule/'>
+              Find out more
+            </Link>
+          </Paragraph>
+        </>
+      }
+      status='warning'
+      // TODO: allow setting to strip heading formatting in Alerts post-mvp
+      // @ts-expect-error - See issue: https://github.com/cfpb/design-system-react/issues/351
+      headingLevel={null}
+    />
+  );
+}
diff --git a/src/pages/AuthenticatedLanding/index.tsx b/src/pages/AuthenticatedLanding/index.tsx
index 18b415122..730212e55 100644
--- a/src/pages/AuthenticatedLanding/index.tsx
+++ b/src/pages/AuthenticatedLanding/index.tsx
@@ -2,6 +2,7 @@ import { Divider, Hero, Layout, ListLink } from 'design-system-react';
 import './Landing.less';
 
 import AdditionalResources from 'components/AdditionalResources';
+import BetaAndLegalNotice from 'components/BetaAndLegalNotice';
 import type { ReactElement } from 'react';
 import { LoadingContent } from '../../components/Loading';
 import { useAssociatedInstitutions } from '../../utils/useAssociatedInstitutions';
@@ -32,6 +33,7 @@ function Landing(): ReactElement | null {
             <FileHMDA />
             <Divider/> 
             */}
+            <BetaAndLegalNotice />
             <FileSbl />
             <Divider />
             <ReviewInstitutions
diff --git a/src/pages/Filing/FilingHome.tsx b/src/pages/Filing/FilingHome.tsx
index c2c24f4f7..4b9383ef6 100644
--- a/src/pages/Filing/FilingHome.tsx
+++ b/src/pages/Filing/FilingHome.tsx
@@ -1,5 +1,6 @@
 import useSblAuth from 'api/useSblAuth';
 import AdditionalResources from 'components/AdditionalResources';
+import BetaAndLegalNotice from 'components/BetaAndLegalNotice';
 import { Link, ListLink } from 'components/Link';
 import {
   Button,
@@ -29,6 +30,7 @@ function Home(): ReactElement {
         />
         <Layout.Wrapper>
           <Layout.Content className='content_main u-mb15'>
+            <BetaAndLegalNotice />
             <div className='mb-[2.813rem]'>
               <Heading type='2'>Sign in with Login.gov</Heading>
               <Paragraph>