From 9f35e7e1a995c63dd6bbf23a23ca8ece049b3843 Mon Sep 17 00:00:00 2001 From: cade-exygy <131277283+cade-exygy@users.noreply.github.com> Date: Wed, 31 Jan 2024 15:47:17 -0600 Subject: [PATCH] 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 | 1 - shared-helpers/src/locales/general.json | 5 ++ .../src/components/account/SignUpBenefits.tsx | 33 ++++++++ sites/public/src/layouts/forms.tsx | 9 ++- sites/public/src/pages/sign-in.tsx | 81 +++++++++++++++---- 5 files changed, 108 insertions(+), 21 deletions(-) create mode 100644 sites/public/src/components/account/SignUpBenefits.tsx diff --git a/.circleci/config.yml b/.circleci/config.yml index b57191d555..e1e3432a9e 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json index c95cf8574f..39db09f215 100644 --- a/shared-helpers/src/locales/general.json +++ b/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", diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx new file mode 100644 index 0000000000..070292fd6e --- /dev/null +++ b/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 ( + + ) +} + +export default SignUpBenefits diff --git a/sites/public/src/layouts/forms.tsx b/sites/public/src/layouts/forms.tsx index d8967a01a5..526b1cb940 100644 --- a/sites/public/src/layouts/forms.tsx +++ b/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 ( <>
-
- {props.children} -
+
{props.children}
 diff --git a/sites/public/src/pages/sign-in.tsx b/sites/public/src/pages/sign-in.tsx index 77d0163312..5d20447b21 100644 --- a/sites/public/src/pages/sign-in.tsx +++ b/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 ( + + ) + } + return ( <> - - void onSubmit(data)} - control={{ register, errors, handleSubmit, watch }} - networkStatus={{ - content: networkStatusContent, - type: networkStatusType, - reset: () => { - reset() - resetNetworkError() - setConfirmationStatusMessage(undefined) - }, - }} - showRegisterBtn={true} - /> - + {process.env.showMandatedAccounts ? ( + +
+
+ +
+
+ void onSubmit(data)} + control={{ register, errors, handleSubmit, watch }} + networkStatus={{ + content: networkStatusContent, + type: networkStatusType, + reset: () => { + reset() + resetNetworkError() + setConfirmationStatusMessage(undefined) + }, + }} + showRegisterBtn={true} + /> +
+
+
+ + +
+
+ +
+ + ) : ( + + void onSubmit(data)} + control={{ register, errors, handleSubmit, watch }} + networkStatus={{ + content: networkStatusContent, + type: networkStatusType, + reset: () => { + reset() + resetNetworkError() + setConfirmationStatusMessage(undefined) + }, + }} + showRegisterBtn={true} + /> + + )}