Skip to content

Commit

Permalink
fix: dont allow saving an ami chart without a percent (#3646)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilyjablonski
emilyjablonski authored Sep 21, 2023
1 parent 424a6de commit 40a957c
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 75 deletions.
186 changes: 113 additions & 73 deletions sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import React from "react"
import { AppearanceStyleType, t, GridSection, Button, Drawer } from "@bloom-housing/ui-components"
import {
AppearanceStyleType,
t,
GridSection,
Button,
Drawer,
GridCell,
} from "@bloom-housing/ui-components"
import { FieldValue } from "@bloom-housing/ui-seeds"
import { Unit } from "@bloom-housing/backend-core/types"
import { getRentType } from "../../../lib/helpers"
Expand Down Expand Up @@ -31,105 +38,138 @@ const DetailUnitDrawer = ({ unit, setUnitDrawer }: UnitDrawerProps) => {
<section className="border rounded-md p-8 bg-white mb-8">
<GridSection title={t("listings.unit.details")} tinted={true} inset={true} grid={false}>
<GridSection grid columns={4}>
<FieldValue
id="unit.unitNumber"
label={t("listings.unit.unitNumber")}
children={unit?.number || t("t.n/a")}
/>

<FieldValue
label={t("listings.unit.type")}
children={unit?.unitType?.name || t("t.n/a")}
/>

<FieldValue
id="unit.numBathrooms"
label={t("listings.unit.numBathrooms")}
children={unit?.numBathrooms || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.unitNumber"
label={t("listings.unit.unitNumber")}
children={unit?.number || t("t.n/a")}
/>
</GridCell>
<GridCell>
<FieldValue
label={t("listings.unit.type")}
children={
unit?.unitType?.name
? t(`listings.unit.typeOptions.${unit?.unitType?.name}`)
: t("t.n/a")
}
/>
</GridCell>
<GridCell>
<FieldValue
id="unit.numBathrooms"
label={t("listings.unit.numBathrooms")}
children={unit?.numBathrooms || t("t.n/a")}
/>
</GridCell>

<FieldValue
id="unit.floor"
label={t("listings.unit.floor")}
children={unit?.floor || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.floor"
label={t("listings.unit.floor")}
children={unit?.floor || t("t.n/a")}
/>
</GridCell>

<FieldValue
id="unit.squareFootage"
label={t("listings.unit.squareFootage")}
children={unit?.sqFeet || t("t.n/a")}
/>
<GridCell>
{" "}
<FieldValue
id="unit.squareFootage"
label={t("listings.unit.squareFootage")}
children={unit?.sqFeet || t("t.n/a")}
/>
</GridCell>

<FieldValue
id="unit.minOccupancy"
label={t("listings.unit.minOccupancy")}
children={unit?.minOccupancy || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.minOccupancy"
label={t("listings.unit.minOccupancy")}
children={unit?.minOccupancy || t("t.n/a")}
/>
</GridCell>

<FieldValue
id="unit.maxOccupancy"
label={t("listings.unit.maxOccupancy")}
children={unit?.maxOccupancy || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.maxOccupancy"
label={t("listings.unit.maxOccupancy")}
children={unit?.maxOccupancy || t("t.n/a")}
/>
</GridCell>
</GridSection>
</GridSection>
<GridSection title={t("listings.unit.eligibility")} tinted={true} inset={true} grid={false}>
<GridSection grid columns={4}>
<FieldValue
id="unit.amiChart"
label={t("listings.unit.amiChart")}
children={unit?.amiChart?.id ? AmiChartWrapper(unit.amiChart.id) : t("t.n/a")}
/>
<FieldValue
id="unit.amiPercentage"
label={t("listings.unit.amiPercentage")}
children={unit?.amiPercentage || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.amiChart"
label={t("listings.unit.amiChart")}
children={unit?.amiChart?.id ? AmiChartWrapper(unit.amiChart.id) : t("t.n/a")}
/>
</GridCell>
<GridCell>
<FieldValue
id="unit.amiPercentage"
label={t("listings.unit.amiPercentage")}
children={unit?.amiPercentage || t("t.n/a")}
/>
</GridCell>
</GridSection>
<GridSection columns={1}>
{unit?.amiChartOverride?.items.map((override, index) => {
return (
<FieldValue
id="amiOverrideTitle"
key={index}
label={t("listings.amiOverrideTitle", { householdSize: override.householdSize })}
children={`$${override.income}`}
/>
<GridCell>
<FieldValue
id="amiOverrideTitle"
key={index}
label={t("listings.amiOverrideTitle", {
householdSize: override.householdSize,
})}
children={`$${override.income}`}
/>
</GridCell>
)
})}
</GridSection>
<GridSection columns={4} className="pt-6">
{rentType === "fixed" && (
<>
<FieldValue
id="unit.monthlyIncomeMin"
label={t("t.monthlyMinimumIncome")}
children={unit?.monthlyIncomeMin || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.monthlyIncomeMin"
label={t("t.monthlyMinimumIncome")}
children={unit?.monthlyIncomeMin || t("t.n/a")}
/>
</GridCell>

<FieldValue
id="unit.monthlyRent"
label={t("listings.unit.monthlyRent")}
children={unit?.monthlyRent || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.monthlyRent"
label={t("listings.unit.monthlyRent")}
children={unit?.monthlyRent || t("t.n/a")}
/>
</GridCell>
</>
)}
{rentType === "percentage" && (
<FieldValue
id="unit.percentage"
label={t("listings.unit.percentage")}
children={unit?.monthlyRentAsPercentOfIncome || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.percentage"
label={t("listings.unit.percentage")}
children={unit?.monthlyRentAsPercentOfIncome || t("t.n/a")}
/>
</GridCell>
)}
</GridSection>
</GridSection>
<GridSection title={t("t.accessibility")} tinted={true} inset={true} grid={false}>
<GridSection grid columns={4}>
<FieldValue
id="unit.accessibilityPriorityType"
label={t("listings.unit.accessibilityPriorityType")}
children={unit?.priorityType?.name || t("t.n/a")}
/>
<GridCell>
<FieldValue
id="unit.accessibilityPriorityType"
label={t("listings.unit.accessibilityPriorityType")}
children={unit?.priorityType?.name || t("t.n/a")}
/>
</GridCell>
</GridSection>
</GridSection>
</section>
Expand Down
34 changes: 32 additions & 2 deletions sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
const { data: unitTypes = [] } = useUnitTypeList()

// eslint-disable-next-line @typescript-eslint/unbound-method
const { register, errors, trigger, getValues, setValue, control, reset } = useForm()
const { register, errors, trigger, getValues, setValue, control, reset, clearErrors } = useForm()

const numberOccupancyOptions = 11

Expand Down Expand Up @@ -99,6 +99,15 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
type="number"
prepend="$"
readerOnly
className={errors[fieldName] ? "error" : ""}
error={errors[fieldName]}
errorMessage={t("errors.requiredFieldError")}
validation={{ required: !!amiChartID }}
inputProps={{
onChange: () => {
clearErrors(fieldName)
},
}}
/>
)
return (
Expand Down Expand Up @@ -180,6 +189,9 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
}

useEffect(() => {
;[...Array(maxAmiHouseholdSize)].forEach((_, index) => {
clearErrors(`maxIncomeHouseholdSize${index + 1}`)
})
if (
amiPercentage &&
!loading &&
Expand Down Expand Up @@ -271,7 +283,10 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
setLoading(true)
const data = getValues()
const validation = await trigger()
if (!validation) return
if (!validation) {
setLoading(false)
return
}

const formData = formatFormData(data)

Expand Down Expand Up @@ -400,6 +415,11 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
error={fieldHasError(errors?.unitType)}
errorMessage={t("errors.requiredFieldError")}
validation={{ required: true }}
inputProps={{
onChange: () => {
clearErrors("unitType.id")
},
}}
/>
</FieldValue>
</GridCell>
Expand Down Expand Up @@ -508,6 +528,11 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
options={amiChartsOptions}
inputProps={{
onChange: () => {
setValue("amiPercentage", undefined)
clearErrors("amiPercentage")
;[...Array(maxAmiHouseholdSize)].forEach((_, index) => {
setValue(`maxIncomeHouseholdSize${index + 1}`, undefined)
})
if (amiChartID && !loading && amiChartsOptions) {
void fetchAmiChart()
setIsAmiPercentageDirty(true)
Expand All @@ -530,8 +555,13 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
inputProps={{
onChange: () => {
setIsAmiPercentageDirty(true)
clearErrors("amiPercentage")
},
}}
error={fieldHasError(errors?.amiPercentage)}
errorMessage={t("errors.requiredFieldError")}
validation={{ required: !!amiChartID }}
disabled={!amiChartID}
/>
</FieldValue>
</GridCell>
Expand Down

0 comments on commit 40a957c

Please sign in to comment.