From 615e07bbba918ea1b1fc6dbd97d5785834645727 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:27:44 -0600
Subject: [PATCH] feat: create Sign Up Copy (#3880)

* feat: create Sign Up Copy

* fix: style fix

* fix: reinstate success dto

* fix: update icon margin

---------

Co-authored-by: ColinBuyck <colin.buyck@gmail.com>
Co-authored-by: cliu02 <32694266+cliu02@users.noreply.github.com>
---
 api/src/dtos/users/user-create.dto.ts         |   4 +-
 .../src/components/account/SignUpBenefits.tsx |   2 +-
 .../account/SignUpBenefitsHeadingGroup.tsx    |  16 +
 sites/public/src/pages/create-account.tsx     | 348 ++++++++++--------
 sites/public/src/pages/sign-in.tsx            |  91 ++---
 .../styles/sign-up-benefits.module.scss       |  54 +++
 6 files changed, 301 insertions(+), 214 deletions(-)
 create mode 100644 sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
 create mode 100644 sites/public/styles/sign-up-benefits.module.scss

diff --git a/api/src/dtos/users/user-create.dto.ts b/api/src/dtos/users/user-create.dto.ts
index c8d726505d..e746e30067 100644
--- a/api/src/dtos/users/user-create.dto.ts
+++ b/api/src/dtos/users/user-create.dto.ts
@@ -47,11 +47,11 @@ export class UserCreate extends OmitType(UserUpdate, [
   email: string;
 
   @Expose()
-  @ApiProperty()
+  @ApiPropertyOptional()
   @IsEmail({}, { groups: [ValidationsGroupsEnum.default] })
   @Match('email', { groups: [ValidationsGroupsEnum.default] })
   @EnforceLowerCase()
-  emailConfirmation: string;
+  emailConfirmation?: string;
 
   @Expose()
   @Type(() => IdDTO)
diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx
index 070292fd6e..7b18d551fb 100644
--- a/sites/public/src/components/account/SignUpBenefits.tsx
+++ b/sites/public/src/components/account/SignUpBenefits.tsx
@@ -17,7 +17,7 @@ const SignUpBenefits = (props: SignUpBenefitsProps) => {
   return (
     <ul className={classNames.join(" ")}>
       {iconListItems.map((item) => (
-        <li className="flex flex-row mb-2 items-center" key={`${item.text}-${props.idTag}`}>
+        <li className="flex flex-row mb-3 items-center" key={`${item.text}-${props.idTag}`}>
           <Icon
             icon={item.icon}
             size="xl"
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
new file mode 100644
index 0000000000..f55de20e44
--- /dev/null
+++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
@@ -0,0 +1,16 @@
+import { t } from "@bloom-housing/ui-components"
+import { HeadingGroup } from "@bloom-housing/ui-seeds"
+
+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}
+    />
+  )
+}
+
+export default SignUpBenefitsHeadingGroup
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 0a41e46763..9f8ca3df51 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -23,10 +23,14 @@ import FormsLayout from "../layouts/forms"
 import { AccountCard } from "../components/account/AccountCard"
 import accountCardStyles from "./account/account.module.scss"
 import styles from "../../styles/create-account.module.scss"
+import signUpBenefitsStyles from "../../styles/sign-up-benefits.module.scss"
+import SignUpBenefits from "../components/account/SignUpBenefits"
+import SignUpBenefitsHeadingGroup from "../components/account/SignUpBenefitsHeadingGroup"
 
 export default () => {
   const { createUser, resendConfirmation } = useContext(AuthContext)
   const [confirmationResent, setConfirmationResent] = useState<boolean>(false)
+  const signUpCopy = process.env.showMandatedAccounts
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { register, handleSubmit, errors, watch } = useForm()
@@ -79,165 +83,199 @@ export default () => {
   }
 
   return (
-    <FormsLayout>
-      <AccountCard
-        iconSymbol="profile"
-        title={t("account.createAccount")}
-        divider="inset"
-        headingPriority={1}
-      >
-        <>
-          {requestError && (
-            <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
-              {requestError}
-            </AlertBox>
-          )}
-          <SiteAlert type="notice" dismissable />
-          <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <label className={styles["create-account-header"]} htmlFor="firstName">
-                {t("application.name.yourName")}
-              </label>
+    <FormsLayout className={signUpCopy && "sm:max-w-lg md:max-w-full"}>
+      <div className={signUpCopy && signUpBenefitsStyles["benefits-container"]}>
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+            <SignUpBenefitsHeadingGroup mobileView={true} />
+          </div>
+        )}
+        <div className={signUpCopy && signUpBenefitsStyles["benefits-form-container"]}>
+          <AccountCard
+            iconSymbol="profile"
+            title={t("account.createAccount")}
+            divider="inset"
+            headingPriority={1}
+          >
+            <>
+              {requestError && (
+                <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
+                  {requestError}
+                </AlertBox>
+              )}
+              <SiteAlert type="notice" dismissable />
+              <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <label className={styles["create-account-header"]} htmlFor="firstName">
+                    {t("application.name.yourName")}
+                  </label>
 
-              <label className={styles["create-account-field"]} htmlFor="firstName">
-                {t("application.name.firstName")}
-              </label>
-              <Field
-                controlClassName={styles["create-account-input"]}
-                className={styles["create-account-gap"]}
-                name="firstName"
-                validation={{ required: true, maxLength: 64 }}
-                error={errors.givenName}
-                errorMessage={
-                  errors.givenName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.firstNameError")
-                }
-                register={register}
-              />
+                  <label className={styles["create-account-field"]} htmlFor="firstName">
+                    {t("application.name.firstName")}
+                  </label>
+                  <Field
+                    controlClassName={styles["create-account-input"]}
+                    name="firstName"
+                    validation={{ required: true, maxLength: 64 }}
+                    error={errors.givenName}
+                    errorMessage={
+                      errors.givenName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.firstNameError")
+                    }
+                    register={register}
+                  />
 
-              <label className={styles["create-account-field"]} htmlFor="middleName">
-                {t("application.name.middleNameOptional")}
-              </label>
-              <Field
-                name="middleName"
-                register={register}
-                label={t("application.name.middleNameOptional")}
-                readerOnly
-                error={errors.middleName}
-                validation={{ maxLength: 64 }}
-                errorMessage={t("errors.maxLength")}
-                controlClassName={styles["create-account-input"]}
-                className={styles["create-account-gap"]}
-              />
+                  <label className={styles["create-account-field"]} htmlFor="middleName">
+                    {t("application.name.middleNameOptional")}
+                  </label>
+                  <Field
+                    name="middleName"
+                    register={register}
+                    label={t("application.name.middleNameOptional")}
+                    readerOnly
+                    error={errors.middleName}
+                    validation={{ maxLength: 64 }}
+                    errorMessage={t("errors.maxLength")}
+                    controlClassName={styles["create-account-input"]}
+                  />
 
-              <label className={styles["create-account-field"]} htmlFor="lastName">
-                {t("application.name.lastName")}
-              </label>
-              <Field
-                name="lastName"
-                validation={{ required: true, maxLength: 64 }}
-                error={errors.lastName}
-                register={register}
-                label={t("application.name.lastName")}
-                errorMessage={
-                  errors.lastName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.lastNameError")
-                }
-                readerOnly
-                controlClassName={styles["create-account-input"]}
-              />
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <DOBField
-                register={register}
-                required={true}
-                error={errors.dob}
-                name="dob"
-                id="dob"
-                watch={watch}
-                validateAge18={true}
-                errorMessage={t("errors.dateOfBirthErrorAge")}
-                label={t("application.name.yourDateOfBirth")}
-              />
-              <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
-            </CardSection>
+                  <label className={styles["create-account-field"]} htmlFor="lastName">
+                    {t("application.name.lastName")}
+                  </label>
+                  <Field
+                    name="lastName"
+                    validation={{ required: true, maxLength: 64 }}
+                    error={errors.lastName}
+                    register={register}
+                    label={t("application.name.lastName")}
+                    errorMessage={
+                      errors.lastName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.lastNameError")
+                    }
+                    readerOnly
+                    controlClassName={styles["create-account-input"]}
+                  />
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <DOBField
+                    register={register}
+                    required={true}
+                    error={errors.dob}
+                    name="dob"
+                    id="dob"
+                    watch={watch}
+                    validateAge18={true}
+                    errorMessage={t("errors.dateOfBirthErrorAge")}
+                    label={t("application.name.yourDateOfBirth")}
+                  />
+                  <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+                </CardSection>
 
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Field
-                caps={true}
-                type="email"
-                name="email"
-                label={t("application.name.yourEmailAddress")}
-                validation={{ required: true, pattern: emailRegex }}
-                error={errors.email}
-                errorMessage={t("authentication.signIn.loginError")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-                labelClassName={styles["create-account-label"]}
-              />
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Field
-                caps={true}
-                type={"password"}
-                name="password"
-                note={t("authentication.createAccount.passwordInfo")}
-                label={t("authentication.createAccount.password")}
-                validation={{
-                  required: true,
-                  minLength: 8,
-                  pattern: passwordRegex,
-                }}
-                error={errors.password}
-                errorMessage={t("authentication.signIn.passwordError")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-              />
-              <label className={styles["create-account-field"]} htmlFor="passwordConfirmation">
-                {t("authentication.createAccount.reEnterPassword")}
-              </label>
-              <Field
-                type="password"
-                name="passwordConfirmation"
-                validation={{
-                  validate: (value) =>
-                    value === password.current ||
-                    t("authentication.createAccount.errors.passwordMismatch"),
-                }}
-                onPaste={(e) => {
-                  e.preventDefault()
-                  e.nativeEvent.stopImmediatePropagation()
-                  return false
-                }}
-                onDrop={(e) => {
-                  e.preventDefault()
-                  e.nativeEvent.stopImmediatePropagation()
-                  return false
-                }}
-                error={errors.passwordConfirmation}
-                errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-                label={t("authentication.createAccount.reEnterPassword")}
-                readerOnly
-              />
-              <Button type="submit" variant="primary">
-                {t("account.createAccount")}
-              </Button>
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Heading priority={2} size="2xl" className="mb-6">
-                {t("account.haveAnAccount")}
-              </Heading>
-              <Button href="/sign-in" variant="primary-outlined">
-                {t("nav.signIn")}
-              </Button>
-            </CardSection>
-          </Form>
-        </>
-      </AccountCard>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Field
+                    caps={true}
+                    type="email"
+                    name="email"
+                    label={t("application.name.yourEmailAddress")}
+                    validation={{ required: true, pattern: emailRegex }}
+                    error={errors.email}
+                    errorMessage={t("authentication.signIn.loginError")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                  />
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Field
+                    caps={true}
+                    type={"password"}
+                    name="password"
+                    note={t("authentication.createAccount.passwordInfo")}
+                    label={t("authentication.createAccount.password")}
+                    validation={{
+                      required: true,
+                      minLength: 8,
+                      pattern: passwordRegex,
+                    }}
+                    error={errors.password}
+                    errorMessage={t("authentication.signIn.passwordError")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                  />
+                  <label className={styles["create-account-field"]} htmlFor="passwordConfirmation">
+                    {t("authentication.createAccount.reEnterPassword")}
+                  </label>
+                  <Field
+                    type="password"
+                    name="passwordConfirmation"
+                    validation={{
+                      validate: (value) =>
+                        value === password.current ||
+                        t("authentication.createAccount.errors.passwordMismatch"),
+                    }}
+                    onPaste={(e) => {
+                      e.preventDefault()
+                      e.nativeEvent.stopImmediatePropagation()
+                      return false
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault()
+                      e.nativeEvent.stopImmediatePropagation()
+                      return false
+                    }}
+                    error={errors.passwordConfirmation}
+                    errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                    label={t("authentication.createAccount.reEnterPassword")}
+                    readerOnly
+                  />
+                  <Button type="submit" variant="primary">
+                    {t("account.createAccount")}
+                  </Button>
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Heading priority={2} size="2xl" className="mb-6">
+                    {t("account.haveAnAccount")}
+                  </Heading>
+                  <Button href="/sign-in" variant="primary-outlined">
+                    {t("nav.signIn")}
+                  </Button>
+                </CardSection>
+              </Form>
+            </>
+          </AccountCard>
+        </div>
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-hide-display"]}>
+            <div className={signUpBenefitsStyles["benefits-desktop-container"]}>
+              <SignUpBenefitsHeadingGroup mobileView={false} />
+              <SignUpBenefits idTag="desktop" />
+            </div>
+          </div>
+        )}
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+            <SignUpBenefits idTag="mobile" />
+          </div>
+        )}
+      </div>
       <Modal
         open={openModal}
         title={t("authentication.createAccount.confirmationNeeded")}
diff --git a/sites/public/src/pages/sign-in.tsx b/sites/public/src/pages/sign-in.tsx
index 520dacd049..ba148406df 100644
--- a/sites/public/src/pages/sign-in.tsx
+++ b/sites/public/src/pages/sign-in.tsx
@@ -15,11 +15,13 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import { SuccessDTO } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
-import { HeadingGroup } from "@bloom-housing/ui-seeds"
 import SignUpBenefits from "../components/account/SignUpBenefits"
+import signUpBenefitsStyles from "../../styles/sign-up-benefits.module.scss"
+import SignUpBenefitsHeadingGroup from "../components/account/SignUpBenefitsHeadingGroup"
 
 const SignIn = () => {
   const { login, userService } = useContext(AuthContext)
+  const signUpCopy = process.env.showMandatedAccounts
   /* Form Handler */
   // This is causing a linting issue with unbound-method, see open issue as of 10/21/2020:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
@@ -125,69 +127,46 @@ const SignIn = () => {
     }
   }, [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 (
     <>
-      {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 ">
+      <FormsLayout className={signUpCopy && "sm:max-w-lg md:max-w-full"}>
+        <div className={signUpCopy && signUpBenefitsStyles["benefits-container"]}>
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-display-hide"]}>
               <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 ">
+          )}
+          <div className={signUpCopy && signUpBenefitsStyles["benefits-form-container"]}>
+            <FormSignIn
+              onSubmit={(data) => void onSubmit(data)}
+              control={{ register, errors, handleSubmit, watch }}
+              networkStatus={{
+                content: networkStatusContent,
+                type: networkStatusType,
+                reset: () => {
+                  reset()
+                  resetNetworkError()
+                  setConfirmationStatusMessage(undefined)
+                },
+              }}
+              showRegisterBtn={true}
+            />
+          </div>
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-hide-display"]}>
+              <div className={signUpBenefitsStyles["benefits-desktop-container"]}>
                 <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>
-      )}
+          )}
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+              <SignUpBenefits idTag="mobile" />
+            </div>
+          )}
+        </div>
+      </FormsLayout>
 
       <ResendConfirmationModal
         isOpen={confirmationStatusModal}
diff --git a/sites/public/styles/sign-up-benefits.module.scss b/sites/public/styles/sign-up-benefits.module.scss
new file mode 100644
index 0000000000..8a46239e97
--- /dev/null
+++ b/sites/public/styles/sign-up-benefits.module.scss
@@ -0,0 +1,54 @@
+.benefits-form-layout {
+    @media (min-width: theme("screens.sm")) {
+      max-width: var(--seeds-width-lg);
+    }
+    @media (min-width: theme("screens.md")) {
+      max-width: 100%;
+    }
+  }
+  .benefits-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  
+    @media (min-width: theme("screens.md")) {
+      flex-direction: row;
+      margin-left: var(--seeds-s20);
+    }
+  }
+  
+  .benefits-display-hide {
+    display: block;
+  
+    @media (min-width: theme("screens.md")) {
+      display: none;
+    }
+  }
+  
+  .benefits-hide-display {
+    display: none;
+  
+    @media (min-width: theme("screens.md")) {
+      display: flex;
+    }
+  }
+  
+  .benefits-form-container {
+    width: 100%;
+    justify-content: center;
+  
+    @media (min-width: theme("screens.md")) {
+      max-width: var(--seeds-width-lg);
+      width: max-content;
+    }
+  }
+  
+  .benefits-desktop-container {
+    @media (min-width: theme("screens.md")) {
+      display: flex;
+      flex-direction: column;
+      padding: var(--seeds-s8);
+      max-width: var(--seeds-width-lg);
+      width: 100%;
+    }
+  }
\ No newline at end of file