@bloom-housing/ui-components 4.0.3 → 4.1.0

package/src/page_components/sign-in/FormSignIn.tsx

@@ -8,23 +8,14 @@ import {
   Icon,
   LinkButton,
   t,
-  AlertBox,
-  SiteAlert,
-  AlertNotice,
-  ErrorMessage,
+  FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
 import { NavigationContext } from "../../config/NavigationContext"
-
-export type NetworkErrorValue = {
-  title: string
-  content: string
-} | null
+import type { NetworkErrorReset, NetworkErrorValue } from "../forgot-password/FormForgotPassword"
 
 export type NetworkErrorDetermineError = (status: number, error: Error) => void
 
-export type NetworkErrorReset = () => void
-
 export type FormSignInProps = {
   control: FormSignInControl
   onSubmit: (data: FormSignInValues) => void
@@ -61,31 +52,16 @@ const FormSignIn = ({
 
   return (
     <FormCard>
-      <div className="form-card__lead text-center border-b mx-0">
+      <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" />
         <h2 className="form-card__title">{t(`nav.signIn`)}</h2>
       </div>
-
-      {Object.entries(errors).length > 0 && !networkError.error && (
-        <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
-        </AlertBox>
-      )}
-
-      {!!networkError.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"householdsize-error"} error={!!networkError.error}>
-          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
-            {networkError.error.title}
-          </AlertBox>
-
-          <AlertNotice title="" type="alert" inverted>
-            {networkError.error.content}
-          </AlertNotice>
-        </ErrorMessage>
-      )}
-
-      <SiteAlert type="notice" dismissable />
-      <div className="form-card__group pt-0 border-b">
+      <FormSignInErrorBox
+        errors={errors}
+        networkError={networkError}
+        errorMessageId={"main-sign-in"}
+      />
+      <div className="form-card__group pt-0">
         <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}

package/src/page_components/sign-in/FormSignInAddPhone.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import {
+  AppearanceStyleType,
+  Button,
+  Form,
+  FormCard,
+  Icon,
+  t,
+  SiteAlert,
+  PhoneField,
+  FormSignInErrorBox,
+} from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+import { FormSignInNetworkError } from "./FormSignIn"
+
+export type FormSignInAddPhoneProps = {
+  control: FormSignInAddPhoneControl
+  onSubmit: (data: FormSignInAddPhoneValues) => void
+  networkError: FormSignInNetworkError
+  phoneNumber: string
+}
+
+export type FormSignInAddPhoneControl = {
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  control: UseFormMethods["control"]
+}
+
+export type FormSignInAddPhoneValues = {
+  phoneNumber: string
+}
+
+const FormSignInAddPhone = ({
+  onSubmit,
+  networkError,
+  control,
+  phoneNumber,
+}: FormSignInAddPhoneProps) => {
+  const onError = () => {
+    window.scrollTo(0, 0)
+  }
+  const { errors, handleSubmit } = control
+  return (
+    <FormCard>
+      <div className="form-card__lead text-center">
+        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
+        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
+      </div>
+      <FormSignInErrorBox
+        errors={errors}
+        networkError={networkError}
+        errorMessageId={"add-phone"}
+      />
+
+      <SiteAlert type="notice" dismissable />
+      <div className="form-card__group pt-0">
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+          <PhoneField
+            label={t("nav.signInMFA.phoneNumber")}
+            caps={true}
+            required={true}
+            id="phoneNumber"
+            name="phoneNumber"
+            error={errors.phoneNumber}
+            errorMessage={t("errors.phoneNumberError")}
+            controlClassName="control"
+            control={control.control}
+            dataTestId={"sign-in-phone-number-field"}
+            defaultValue={phoneNumber}
+          />
+
+          <div className="text-center mt-10">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="request-mfa-code-and-add-phone"
+            >
+              {t("nav.signInMFA.addPhoneNumber")}
+            </Button>
+          </div>
+        </Form>
+      </div>
+    </FormCard>
+  )
+}
+
+export { FormSignInAddPhone as default, FormSignInAddPhone }

package/src/page_components/sign-in/FormSignInErrorBox.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+import { FormSignInNetworkError } from "./FormSignIn"
+
+export type FormSignInErrorBoxProps = {
+  errors: FormSignInErrorBoxControl["errors"]
+  networkError: FormSignInNetworkError
+  errorMessageId: string
+}
+
+export type FormSignInErrorBoxControl = {
+  errors: UseFormMethods["errors"]
+  control: UseFormMethods["control"]
+}
+
+const FormSignInErrorBox = ({ networkError, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+  return (
+    <div className="border-b">
+      {Object.entries(errors).length > 0 && !networkError.error && (
+        <AlertBox type="alert" inverted closeable>
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+        </AlertBox>
+      )}
+
+      {!!networkError.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={`form-sign-in-${errorMessageId}-error`} error={!!networkError.error}>
+          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
+            {networkError.error.title}
+          </AlertBox>
+
+          <AlertNotice title="" type="alert" inverted>
+            {networkError.error.content}
+          </AlertNotice>
+        </ErrorMessage>
+      )}
+
+      <SiteAlert type="notice" dismissable />
+    </div>
+  )
+}
+
+export { FormSignInErrorBox as default, FormSignInErrorBox }

package/src/page_components/sign-in/FormSignInMFACode.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import {
+  AppearanceStyleType,
+  Button,
+  Field,
+  Form,
+  FormCard,
+  Icon,
+  t,
+  SiteAlert,
+  FormSignInErrorBox,
+} from "@bloom-housing/ui-components"
+import { FormSignInNetworkError, FormSignInControl } from "./FormSignIn"
+import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
+
+export type FormSignInMFACodeProps = {
+  control: FormSignInControl
+  onSubmit: (data: FormSignInMFACodeValues) => void
+  networkError: FormSignInNetworkError
+  mfaType: EnumRequestMfaCodeMfaType
+  allowPhoneNumberEdit: boolean
+  phoneNumber: string
+  goBackToPhone: () => void
+}
+
+export type FormSignInMFACodeValues = {
+  mfaCode: string
+}
+
+const FormSignInMFACode = ({
+  onSubmit,
+  networkError,
+  control: { errors, register, handleSubmit },
+  mfaType,
+  allowPhoneNumberEdit,
+  phoneNumber,
+  goBackToPhone,
+}: FormSignInMFACodeProps) => {
+  const onError = () => {
+    window.scrollTo(0, 0)
+  }
+
+  let note
+  if (allowPhoneNumberEdit) {
+    note = (
+      <>
+        {t("nav.signInMFA.sentTo", { phoneNumber })}{" "}
+        <Button
+          unstyled={true}
+          className=".field-note underline cursor-pointer font-semibold m-0"
+          onClick={() => goBackToPhone()}
+        >
+          {" "}
+          {t("nav.signInMFA.editPhoneNumber")}{" "}
+        </Button>
+      </>
+    )
+  }
+
+  return (
+    <FormCard>
+      <div className="form-card__lead text-center">
+        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.verifyTitle")}</h2>
+        <p className="form-card__sub-title">
+          {mfaType === EnumRequestMfaCodeMfaType.sms
+            ? t("nav.signInMFA.haveSentCodeToPhone")
+            : t("nav.signInMFA.haveSentCodeToEmail")}
+        </p>
+      </div>
+      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-code"} />
+
+      <SiteAlert type="notice" dismissable />
+      <div className="form-card__group pt-0">
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+          <Field
+            caps={true}
+            name="mfaCode"
+            label={t("nav.signInMFA.code")}
+            validation={{ required: true }}
+            error={errors.mfaCode}
+            errorMessage={t("nav.signInMFA.noMFACode")}
+            register={register}
+            dataTestId="sign-in-mfa-code-field"
+            note={note}
+          />
+          <div className="text-center mt-10">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="verify-and-sign-in">
+              {t("nav.signInMFA.signIn")}
+            </Button>
+          </div>
+        </Form>
+      </div>
+    </FormCard>
+  )
+}
+
+export { FormSignInMFACode as default, FormSignInMFACode }

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -0,0 +1,95 @@
+import React from "react"
+import {
+  AppearanceStyleType,
+  Button,
+  Field,
+  Form,
+  FormCard,
+  Icon,
+  t,
+  SiteAlert,
+  FormSignInErrorBox,
+} from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+import { FormSignInNetworkError } from "./FormSignIn"
+import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
+
+export type FormSignInMFAProps = {
+  control: FormSignInMFAControl
+  onSubmit: (data: FormSignInMFAValues) => void
+  networkError: FormSignInNetworkError
+}
+
+export type FormSignInMFAControl = {
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+  setValue: UseFormMethods["setValue"]
+}
+
+export type FormSignInMFAValues = {
+  mfaType: EnumRequestMfaCodeMfaType
+}
+
+const FormSignInMFAType = ({
+  onSubmit,
+  networkError,
+  control: { errors, register, handleSubmit, setValue },
+}: FormSignInMFAProps) => {
+  const onError = () => {
+    window.scrollTo(0, 0)
+  }
+
+  return (
+    <FormCard>
+      <div className="form-card__lead text-center">
+        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.verificationChoiceMainTitle")}
+        </h2>
+        <p className="form-card__sub-title">
+          {t("nav.signInMFA.verificationChoiceSecondaryTitle")}
+        </p>
+      </div>
+      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-type"} />
+
+      <SiteAlert type="notice" dismissable />
+      <div className="form-card__group pt-0">
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+          <Field
+            caps={true}
+            name="mfaType"
+            label={"MFA Type"}
+            validation={{ required: true }}
+            error={errors.mfaType}
+            errorMessage={t("nav.signInMFA.noMFAType")}
+            register={register}
+            dataTestId="sign-in-mfaType-field"
+            hidden={true}
+          />
+
+          <div className="text-center mt-6">
+            <Button
+              styleType={AppearanceStyleType.accentCool}
+              data-test-id="verify-by-email"
+              onClick={() => setValue("mfaType", EnumRequestMfaCodeMfaType.email)}
+            >
+              {t("nav.signInMFA.verifyByEmail")}
+            </Button>
+          </div>
+          <div className="text-center mt-6">
+            <Button
+              styleType={AppearanceStyleType.accentCool}
+              data-test-id="verify-by-phone"
+              onClick={() => setValue("mfaType", EnumRequestMfaCodeMfaType.sms)}
+            >
+              {t("nav.signInMFA.verifyByPhone")}
+            </Button>
+          </div>
+        </Form>
+      </div>
+    </FormCard>
+  )
+}
+
+export { FormSignInMFAType as default, FormSignInMFAType }

package/src/tables/StackedTable.tsx

@@ -24,7 +24,7 @@ const StackedTable = (props: StackedTableProps) => {
     const dataCell = Object.keys(dataRow).reduce((acc, item) => {
       acc[item] = (
         <div
-          className={`md:flex md:flex-col ${
+          className={`md:flex md:flex-col w-1/2 md:w-full ${
             props.headersHiddenDesktop?.includes(item) && "md:hidden"
           }`}
         >

package/src/page_components/listing/listing_sidebar/events/EventDateSection.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import dayjs from "dayjs"
-
-const EventDateSection = (props: { event: ListingEvent }) => {
-  const getRangeString = () => {
-    const startTime = dayjs(props.event.startTime).format("hh:mma")
-    const endTime = dayjs(props.event.endTime).format("hh:mma")
-    return startTime === endTime ? startTime : `${startTime} - ${endTime}`
-  }
-  return (
-    <>
-      {props.event.startTime && (
-        <p className="text text-gray-800 pb-3 flex justify-between items-center">
-          <span className="inline-block text-tiny uppercase">
-            {dayjs(props.event.startTime).format("MMMM D, YYYY")}
-          </span>
-          <span className="inline-block text-sm font-bold">{getRangeString()}</span>
-        </p>
-      )}
-    </>
-  )
-}
-
-export { EventDateSection as default, EventDateSection }

package/src/page_components/listing/listing_sidebar/events/LotteryResultsEvent.tsx

@@ -1,26 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { t } from "../../../../helpers/translator"
-import dayjs from "dayjs"
-
-const LotteryResultsEvent = (props: { event: ListingEvent }) => {
-  const { event } = props
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("listings.lotteryResults.header")}</h4>
-      <p className="text text-gray-800 pb-3 flex justify-between items-center">
-        <span className="inline-block">{dayjs(props.event.startTime).format("MMMM D, YYYY")}</span>
-      </p>
-      {event.note && <p className="text text-gray-600">{event.note}</p>}
-      {!event.note && (
-        <p className="text-tiny text-gray-600">
-          {t("listings.lotteryResults.completeResultsWillBePosted", {
-            hour: dayjs(props.event.startTime).format("h a"),
-          })}
-        </p>
-      )}
-    </section>
-  )
-}
-
-export { LotteryResultsEvent as default, LotteryResultsEvent }

package/src/page_components/listing/listing_sidebar/events/OpenHouseEvent.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { EventDateSection } from "./EventDateSection"
-import { t } from "../../../../helpers/translator"
-
-const OpenHouseEvent = (props: { events: ListingEvent[] }) => {
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-tiny">{t("listings.openHouseEvent.header")}</h4>
-      {props.events.map((openHouseEvent, index) => (
-        <div key={`openHouses-${index}`}>
-          <EventDateSection event={openHouseEvent} />
-          {openHouseEvent.url && (
-            <p className="text text-gray-800 pb-3">
-              <a href={openHouseEvent.url}>
-                {openHouseEvent.label || t("listings.openHouseEvent.seeVideo")}
-              </a>
-            </p>
-          )}
-          {openHouseEvent.note && <p className="text-tiny text-gray-600">{openHouseEvent.note}</p>}
-        </div>
-      ))}
-    </section>
-  )
-}
-
-export { OpenHouseEvent as default, OpenHouseEvent }

package/src/page_components/listing/listing_sidebar/events/PublicLotteryEvent.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { t } from "../../../../helpers/translator"
-import { EventDateSection } from "./EventDateSection"
-
-const PublicLotteryEvent = (props: { event: ListingEvent }) => {
-  const { event } = props
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("listings.publicLottery.header")}</h4>
-      <EventDateSection event={props.event} />
-      {event.url && (
-        <p className="text text-gray-800 pb-3">
-          <a href={event.url}>{t("listings.publicLottery.seeVideo")}</a>
-        </p>
-      )}
-      {event.note && <p className="text-tiny text-gray-600">{event.note}</p>}
-    </section>
-  )
-}
-
-export { PublicLotteryEvent as default, PublicLotteryEvent }