From 8f629be9781260a6cff690c097b05213da5d551d Mon Sep 17 00:00:00 2001 From: Jared White Date: Fri, 28 Jun 2024 12:19:57 -0700 Subject: [PATCH 1/4] fix: switch to HTML text inputs with numeric validation --- .../sections/FormHouseholdIncome.tsx | 10 +++++-- .../listings/PaperListingForm/UnitForm.tsx | 30 ++++++++++++++----- .../components/settings/PreferenceDrawer.tsx | 4 +-- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx index 9be3ebe0b0..2917159b59 100644 --- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx +++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx @@ -7,12 +7,13 @@ import { YesNoEnum, } from "@bloom-housing/shared-helpers/src/types/backend-swagger" import SectionWithGrid from "../../../shared/SectionWithGrid" +import { fieldHasError } from "../../../../lib/helpers" const FormHouseholdIncome = () => { const formMethods = useFormContext() // eslint-disable-next-line @typescript-eslint/unbound-method - const { register, setValue, watch } = formMethods + const { errors, register, setValue, trigger, watch } = formMethods const incomePeriodValue: string = watch("application.incomePeriod") @@ -62,19 +63,22 @@ const FormHouseholdIncome = () => { { clearErrors(fieldName) @@ -339,7 +341,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro }, [defaultUnit, unitTypesOptions, setValue]) // when rent type is updated we set the rent/income data to defaultUnit data for that value - // e.g. rent is fixed and swithced to percentage, then switched back we readd the old fixed data + // e.g. rent is fixed and switched to percentage, then switched back we readd the old fixed data useEffect(() => { if (defaultUnit) { if (rentType === "fixed") { @@ -452,7 +454,10 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro placeholder={t("listings.unit.squareFootage")} register={register} readerOnly - type="number" + type="text" + validation={{ pattern: /^[0-9.]+$/ }} + error={fieldHasError(errors?.sqFeet)} + errorMessage={t("errors.numberError")} /> @@ -589,8 +594,12 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro label={t("t.monthlyMinimumIncome")} placeholder="0.00" register={register} - type="number" + type="currency" + getValues={getValues} + setValue={setValue} prepend="$" + error={fieldHasError(errors?.monthlyIncomeMin)} + errorMessage={t("errors.numberError")} /> @@ -601,8 +610,12 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro label={t("listings.unit.monthlyRent")} placeholder="0.00" register={register} - type="number" + type="currency" + getValues={getValues} + setValue={setValue} prepend="$" + error={fieldHasError(errors?.monthlyRent)} + errorMessage={t("errors.numberError")} /> @@ -615,7 +628,10 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro label={t("listings.unit.%incomeRent")} placeholder={t("listings.unit.percentage")} register={register} - type="number" + type="text" + validation={{ pattern: /^[0-9.]+$/ }} + error={fieldHasError(errors?.monthlyRentAsPercentOfIncome)} + errorMessage={t("errors.numberError")} /> )} diff --git a/sites/partners/src/components/settings/PreferenceDrawer.tsx b/sites/partners/src/components/settings/PreferenceDrawer.tsx index ba78047cba..306abc24dc 100644 --- a/sites/partners/src/components/settings/PreferenceDrawer.tsx +++ b/sites/partners/src/components/settings/PreferenceDrawer.tsx @@ -704,10 +704,10 @@ const PreferenceDrawer = ({ name="radiusSize" label={t("settings.preferenceValidatingAddress.howManyMiles")} register={register} - validation={{ required: true, min: 0 }} + validation={{ required: true, min: 0, pattern: /^[0-9.]+$/ }} error={errors.radiusSize} errorMessage={t("errors.requiredFieldError")} - type="number" + type="text" readerOnly defaultValue={optionData?.radiusSize ?? null} dataTestId={"preference-option-radius-size"} From 6366263b1b7cc2398efbf724d837b6591fab223f Mon Sep 17 00:00:00 2001 From: Jared White Date: Fri, 28 Jun 2024 12:19:57 -0700 Subject: [PATCH 2/4] feat: add additional validation --- .../PaperApplicationForm/sections/FormHouseholdIncome.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx index 2917159b59..29f4a23d88 100644 --- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx +++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx @@ -84,6 +84,9 @@ const FormHouseholdIncome = () => { placeholder={t("t.enterAmount")} register={register} disabled={incomePeriodValue !== IncomePeriodEnum.perMonth} + validation={{ pattern: /^[0-9]+$/ }} + error={fieldHasError(errors?.incomeMonth)} + errorMessage={t("errors.numberError")} /> From 1de824b4ead247ca5a2a5780ea6696b16268c19c Mon Sep 17 00:00:00 2001 From: Jared White Date: Fri, 28 Jun 2024 12:21:48 -0700 Subject: [PATCH 3/4] fix: support decimal validation --- .../PaperApplicationForm/sections/FormHouseholdIncome.tsx | 4 ++-- .../src/components/listings/PaperListingForm/UnitForm.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx index 29f4a23d88..cbcb20240f 100644 --- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx +++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx @@ -69,7 +69,7 @@ const FormHouseholdIncome = () => { placeholder={t("t.enterAmount")} register={register} disabled={incomePeriodValue !== IncomePeriodEnum.perYear} - validation={{ pattern: /^[0-9]+$/ }} + validation={{ pattern: /^[0-9.]+$/ }} error={fieldHasError(errors?.incomeYear)} errorMessage={t("errors.numberError")} /> @@ -84,7 +84,7 @@ const FormHouseholdIncome = () => { placeholder={t("t.enterAmount")} register={register} disabled={incomePeriodValue !== IncomePeriodEnum.perMonth} - validation={{ pattern: /^[0-9]+$/ }} + validation={{ pattern: /^[0-9.]+$/ }} error={fieldHasError(errors?.incomeMonth)} errorMessage={t("errors.numberError")} /> diff --git a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx index 8700555a43..5befdefa9d 100644 --- a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx +++ b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx @@ -92,7 +92,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro className={errors[fieldName] ? "error" : ""} error={errors[fieldName]} errorMessage={t("errors.requiredFieldError")} - validation={{ required: !!amiChartID, pattern: /^[0-9]+$/ }} + validation={{ required: !!amiChartID, pattern: /^[0-9.]+$/ }} inputProps={{ onChange: () => { clearErrors(fieldName) From 68c56f039cedffecd4a0028252c67bc482f886d9 Mon Sep 17 00:00:00 2001 From: Jared White Date: Fri, 28 Jun 2024 12:22:29 -0700 Subject: [PATCH 4/4] feat: use currency type for dollar amount inputs --- .../sections/FormHouseholdIncome.tsx | 12 +++++++----- .../listings/PaperListingForm/UnitForm.tsx | 2 +- .../PaperListingForm/sections/AdditionalFees.tsx | 8 +++++++- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx index cbcb20240f..473f0389f6 100644 --- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx +++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx @@ -13,7 +13,7 @@ const FormHouseholdIncome = () => { const formMethods = useFormContext() // eslint-disable-next-line @typescript-eslint/unbound-method - const { errors, register, setValue, trigger, watch } = formMethods + const { errors, register, getValues, setValue, trigger, watch } = formMethods const incomePeriodValue: string = watch("application.incomePeriod") @@ -63,13 +63,14 @@ const FormHouseholdIncome = () => { @@ -78,13 +79,14 @@ const FormHouseholdIncome = () => { diff --git a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx index 5befdefa9d..d39efe2571 100644 --- a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx +++ b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx @@ -92,7 +92,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro className={errors[fieldName] ? "error" : ""} error={errors[fieldName]} errorMessage={t("errors.requiredFieldError")} - validation={{ required: !!amiChartID, pattern: /^[0-9.]+$/ }} + validation={{ required: !!amiChartID }} inputProps={{ onChange: () => { clearErrors(fieldName) diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx index ee8d25af89..0dfdb87f38 100644 --- a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx +++ b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx @@ -15,7 +15,7 @@ const AdditionalFees = (props: AdditionalFeesProps) => { const formMethods = useFormContext() const { profile } = useContext(AuthContext) // eslint-disable-next-line @typescript-eslint/unbound-method - const { register, watch, errors, clearErrors } = formMethods + const { register, watch, errors, clearErrors, getValues, setValue } = formMethods const jurisdiction = watch("jurisdiction.id") @@ -47,6 +47,8 @@ const AdditionalFees = (props: AdditionalFeesProps) => { id={"applicationFee"} register={register} type={"currency"} + getValues={getValues} + setValue={setValue} prepend={"$"} placeholder={"0.00"} /> @@ -58,6 +60,8 @@ const AdditionalFees = (props: AdditionalFeesProps) => { id={"depositMin"} register={register} type={"currency"} + getValues={getValues} + setValue={setValue} prepend={"$"} placeholder={"0.00"} error={fieldHasError(errors?.depositMin)} @@ -74,6 +78,8 @@ const AdditionalFees = (props: AdditionalFeesProps) => { id={"depositMax"} register={register} type={"currency"} + getValues={getValues} + setValue={setValue} prepend={"$"} placeholder={"0.00"} error={fieldHasError(errors?.depositMax)}