feat: 3753/ma sign in copy (#3811)

* feat: add sign-in copy for mandated accounts

* refactor: signUpBenefits component

* feat(component): allow classNames to be applied and overridden

* feat: allow Sign Copy to be mobile responsive

* feat: show and hide correct layout based on screen size

* refactor: signUpBenefits component

* fix: 3753 fix typescript errors

* fix: fix null errors

* fix: remove type cast

* fix: fix import

* fix: 3753 remove duplicate sign in form

* fix: add feature toggle

* fix: clean up sign-in page

* fix: address issue with email input losing focus

* fix: add feature toggle

* fix: remvoe MA flag from circleCI

* fix: sort strings

* refactor: signUpBenefitsHeadingGroup component

* fix: style fixes

* fix: adjust padding

* refactor: clean up classNames

.circleci/config.yml

@@ -30,7 +30,6 @@ executors:
       # DB URL for the jest tests per ormconfig.test.ts
       TEST_DATABASE_URL: "postgres://bloom-ci@localhost:5432/bloom"
       PARTNERS_PORTAL_URL: "http://localhost:3001"
-
 jobs:
   setup:
     executor: standard-node

shared-helpers/src/locales/general.json

@@ -15,6 +15,11 @@
   "account.viewApplications": "View applications",
   "account.myApplicationsSubtitle": "See lottery dates and listings for properties for which you've applied",
   "account.noApplications": "It looks like you haven't applied to any listings yet.",
+  "account.signUpSaveTime.applyFaster": "Apply faster with saved application details",
+  "account.signUpSaveTime.checkStatus": "Check on the status of an application at any time",
+  "account.signUpSaveTime.resetPassword": "Simply reset your password if you forget it",
+  "account.signUpSaveTime.subTitle": "Having an account will save you time by using saved application details, and allow you to check the status of an application at anytime.",
+  "account.signUpSaveTime.title": "Sign up quickly and check application status at anytime",
   "account.settings.alerts.currentPassword": "Invalid current password. Please try again.",
   "account.settings.alerts.dobSuccess": "Birthdate update successful",
   "account.settings.alerts.emailSuccess": "Email update successful",

sites/public/src/components/account/SignUpBenefits.tsx

@@ -0,0 +1,33 @@
+import { Icon } from "@bloom-housing/ui-seeds"
+import { faStopwatch, faEye, faLock } from "@fortawesome/free-solid-svg-icons"
+import { t } from "@bloom-housing/ui-components"
+
+type SignUpBenefitsProps = {
+  className?: string
+  idTag?: string
+}
+const SignUpBenefits = (props: SignUpBenefitsProps) => {
+  const iconListItems = [
+    { icon: faStopwatch, text: t("account.signUpSaveTime.applyFaster") },
+    { icon: faEye, text: t("account.signUpSaveTime.checkStatus") },
+    { icon: faLock, text: t("account.signUpSaveTime.resetPassword") },
+  ]
+  const classNames = ["flex flex-col pt-6 pb-6 pr-4 pl-4 md:p-0"]
+  if (props.className) classNames.push(props.className)
+  return (
+    <ul className={classNames.join(" ")}>
+      {iconListItems.map((item) => (
+        <li className="flex flex-row mb-2 items-center" key={`${item.text}-${props.idTag}`}>
+          <Icon
+            icon={item.icon}
+            size="xl"
+            className="border border-white bg-white rounded-full p-2.5"
+          />
+          <p className="ml-3">{item.text}</p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SignUpBenefits

sites/public/src/layouts/forms.tsx

@@ -4,16 +4,19 @@ import { ApplicationTimeout } from "../components/applications/ApplicationTimeou
 
 interface FormLayoutProps {
   children?: React.ReactNode
+  className?: string
 }
 const FormLayout = (props: FormLayoutProps) => {
+  const classNames = [
+    "md:mb-20 md:mt-12 mx-auto sm:max-w-lg max-w-full print:my-0 print:max-w-full",
+  ]
+  if (props.className) classNames.push(props.className)
   return (
     <>
       <ApplicationTimeout />
       <Layout>
         <section className="bg-gray-300 border-t border-gray-450">
-          <div className="md:mb-20 md:mt-12 mx-auto sm:max-w-lg max-w-full print:my-0 print:max-w-full">
-            {props.children}
-          </div>
+          <div className={classNames.join(" ")}>{props.children}</div>
         </section>
       </Layout>
     </>

sites/public/src/pages/sign-in.tsx

@@ -15,6 +15,8 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import { EnumUserErrorExtraModelUserErrorMessages } from "@bloom-housing/backend-core/types"
+import { HeadingGroup } from "@bloom-housing/ui-seeds"
+import SignUpBenefits from "../components/account/SignUpBenefits"
 
 const SignIn = () => {
   const { login, userService } = useContext(AuthContext)
@@ -119,31 +121,76 @@ const SignIn = () => {
 
   useEffect(() => {
     if (
-      networkError?.error.response.data?.message ===
+      networkError?.error?.response?.data?.message ===
       EnumUserErrorExtraModelUserErrorMessages.accountNotConfirmed
     ) {
       setConfirmationStatusModal(true)
     }
   }, [networkError])
 
+  const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => {
+    const classNames = props.mobileView ? "py-6 px-4" : ""
+    return (
+      <HeadingGroup
+        heading={t("account.signUpSaveTime.title")}
+        subheading={t("account.signUpSaveTime.subTitle")}
+        size="2xl"
+        className={classNames}
+      />
+    )
+  }
+
   return (
     <>
-      <FormsLayout>
-        <FormSignIn
-          onSubmit={(data) => void onSubmit(data)}
-          control={{ register, errors, handleSubmit, watch }}
-          networkStatus={{
-            content: networkStatusContent,
-            type: networkStatusType,
-            reset: () => {
-              reset()
-              resetNetworkError()
-              setConfirmationStatusMessage(undefined)
-            },
-          }}
-          showRegisterBtn={true}
-        />
-      </FormsLayout>
+      {process.env.showMandatedAccounts ? (
+        <FormsLayout className="sm:max-w-lg md:max-w-full">
+          <div className="flex flex-col md:flex-row md:ml-20 justify-center">
+            <div className="display md:hidden ">
+              <SignUpBenefitsHeadingGroup mobileView={true} />
+            </div>
+            <div className="md:max-w-lg w-full justify-center">
+              <FormSignIn
+                onSubmit={(data) => void onSubmit(data)}
+                control={{ register, errors, handleSubmit, watch }}
+                networkStatus={{
+                  content: networkStatusContent,
+                  type: networkStatusType,
+                  reset: () => {
+                    reset()
+                    resetNetworkError()
+                    setConfirmationStatusMessage(undefined)
+                  },
+                }}
+                showRegisterBtn={true}
+              />
+            </div>
+            <div className="hidden md:flex">
+              <div className="md:flex md:flex-col md:p-8 md:max-w-lg md:w-full ">
+                <SignUpBenefitsHeadingGroup mobileView={false} />
+                <SignUpBenefits idTag="desktop" />
+              </div>
+            </div>
+            <SignUpBenefits idTag="mobile" className="display md:hidden" />
+          </div>
+        </FormsLayout>
+      ) : (
+        <FormsLayout>
+          <FormSignIn
+            onSubmit={(data) => void onSubmit(data)}
+            control={{ register, errors, handleSubmit, watch }}
+            networkStatus={{
+              content: networkStatusContent,
+              type: networkStatusType,
+              reset: () => {
+                reset()
+                resetNetworkError()
+                setConfirmationStatusMessage(undefined)
+              },
+            }}
+            showRegisterBtn={true}
+          />
+        </FormsLayout>
+      )}
 
       <ResendConfirmationModal
         isOpen={confirmationStatusModal}