From 9b75efe1068ea907405a99b5c1b35d2cbf4ce5ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Zi=C4=99cina?= Date: Mon, 20 Nov 2023 17:56:16 +0100 Subject: [PATCH] feat: geocoding - showing name and relationship on preference screens (#3703) * feat: add collectAddress checkbox with subfields * test: update preference tests * fix: add minimum value validation for radius field * fix: make collect address not required * fix: expand collect address fields * fix: change fields order in PreferenceDrawer * feat: add address holder fields to application * fix: make added field optional * fix: display errors properly * feat: add address holder fields to application summary * feat: adjust padding for application summary * fix: move address holder name and relationship fields to extraData * fix: remove redundant backend address holder fields * fix: use enum for address holder fields --- shared-helpers/index.ts | 1 + shared-helpers/src/locales/general.json | 3 + shared-helpers/src/utilities/constants.ts | 4 + .../src/views/multiselectQuestions.tsx | 98 ++++++++++++++++--- .../components/shared/FormSummaryDetails.tsx | 26 ++--- sites/public/src/lib/helpers.tsx | 4 +- 6 files changed, 107 insertions(+), 29 deletions(-) create mode 100644 shared-helpers/src/utilities/constants.ts diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts index 42da2f1e86..6adfb676e6 100644 --- a/shared-helpers/index.ts +++ b/shared-helpers/index.ts @@ -16,6 +16,7 @@ export * from "./src/utilities/stringFormatting" export * from "./src/utilities/token" export * from "./src/utilities/unitTypes" export * from "./src/utilities/DateFormat" +export * from "./src/utilities/constants" export * from "./src/views/multiselectQuestions" export * from "./src/views/occupancyFormatting" export * from "./src/views/summaryTables" diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json index 0dc9fdea05..e72dca11fc 100644 --- a/shared-helpers/src/locales/general.json +++ b/shared-helpers/src/locales/general.json @@ -316,6 +316,9 @@ "application.preferences.neighborhoodResidence.neighborhoodResidence.label": "Neighborhood Residents Preference", "application.preferences.neighborhoodResidence.title": "Neighborhood Residents", "application.preferences.options.address": "Address", + "application.preferences.options.qualifyingAddress": "Qualifying Address", + "application.preferences.options.addressHolderName": "Full Name of Address Holder", + "application.preferences.options.addressHolderRelationship": "Relationship to Address Holder", "application.preferences.options.organization": "Name of Organization", "application.preferences.preamble": "If you qualify for this preference, you'll get a higher ranking.", "application.preferences.rosefieldAUSD.title": "Alameda Unified School District (AUSD) employee", diff --git a/shared-helpers/src/utilities/constants.ts b/shared-helpers/src/utilities/constants.ts new file mode 100644 index 0000000000..ee2b199380 --- /dev/null +++ b/shared-helpers/src/utilities/constants.ts @@ -0,0 +1,4 @@ +export enum AddressHolder { + Relationship = "addressHolderRelationship", + Name = "addressHolderName", +} diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx index 9cd6c7512f..50cf9c6fff 100644 --- a/shared-helpers/src/views/multiselectQuestions.tsx +++ b/shared-helpers/src/views/multiselectQuestions.tsx @@ -1,24 +1,25 @@ import * as React from "react" import { - InputType, - MultiselectQuestion, - MultiselectOption, ApplicationMultiselectQuestion, ApplicationMultiselectQuestionOption, ApplicationSection, - ListingMultiselectQuestion, + InputType, Listing, + ListingMultiselectQuestion, + MultiselectOption, + MultiselectQuestion, } from "@bloom-housing/backend-core/types" import { UseFormMethods } from "react-hook-form" import { - t, - Field, - resolveObject, - FormAddress, ExpandableContent, + Field, FieldGroup, + FormAddress, + resolveObject, + t, } from "@bloom-housing/ui-components" import { stateKeys } from "../utilities/formKeys" +import { AddressHolder } from "../utilities/constants" export const listingSectionQuestions = ( listing: Listing, @@ -235,7 +236,6 @@ export const getCheckboxOption = ( exclusiveKeys )} - {option.description && (
@@ -257,11 +257,41 @@ export const getCheckboxOption = (
)} - + {watchFields[optionFieldName] && option.collectName && ( + + )} + {watchFields[optionFieldName] && option.collectRelationship && ( + + )} {watchFields[optionFieldName] && option.collectAddress && (
data[key] === true).length const addressFields = Object.keys(data).filter((option) => Object.keys(data[option])) - const questionOptions: ApplicationMultiselectQuestionOption[] = Object.keys(data) .filter((option) => !Object.keys(data[option]).length) .map((key) => { + const extraData = [] const addressData = addressFields.filter((addressField) => addressField === `${key}-address`) + const addressHolderNameData = addressFields.filter( + (addressField) => addressField === `${key}-${AddressHolder.Name}` + ) + const addressHolderRelationshipData = addressFields.filter( + (addressField) => addressField === `${key}-${AddressHolder.Relationship}` + ) + if (addressData.length) { + extraData.push({ type: InputType.address, key: "address", value: data[addressData[0]] }) + + if (addressHolderNameData.length) { + extraData.push({ + type: InputType.text, + key: AddressHolder.Name, + value: data[addressHolderNameData[0]], + }) + } + + if (addressHolderRelationshipData.length) { + extraData.push({ + type: InputType.text, + key: AddressHolder.Relationship, + value: data[addressHolderRelationshipData[0]], + }) + } + } return { key, checked: data[key] === true, - extraData: addressData.length - ? [{ type: InputType.address, key, value: data[addressData[0]] }] - : [], + extraData: extraData, } }) @@ -379,11 +432,24 @@ export const mapApiToMultiselectForm = ( if (appQuestion.inputType === "checkbox") { options = question.options.reduce((acc, curr) => { const claimed = curr.checked - if (appQuestion.inputType === "checkbox") { acc[curr.key] = claimed if (curr.extraData?.length) { acc[`${curr.key}-address`] = curr.extraData[0].value + + const addressHolderName = curr.extraData?.find( + (field) => field.key === AddressHolder.Name + ) + if (addressHolderName) { + acc[`${curr.key}-${AddressHolder.Name}`] = addressHolderName.value + } + + const addressHolderRelationship = curr.extraData?.find( + (field) => field.key === AddressHolder.Relationship + ) + if (addressHolderRelationship) { + acc[`${curr.key}-${AddressHolder.Relationship}`] = addressHolderRelationship.value + } } } diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx index 54431c0e25..ae354a7f38 100644 --- a/sites/public/src/components/shared/FormSummaryDetails.tsx +++ b/sites/public/src/components/shared/FormSummaryDetails.tsx @@ -1,7 +1,7 @@ import React, { Fragment, useEffect, useState } from "react" import { LocalizedLink, MultiLineAddress, t } from "@bloom-housing/ui-components" import { FieldValue } from "@bloom-housing/ui-seeds" -import { getUniqueUnitTypes } from "@bloom-housing/shared-helpers" +import { getUniqueUnitTypes, AddressHolder } from "@bloom-housing/shared-helpers" import { Address, AllExtraDataTypes, @@ -88,21 +88,23 @@ const FormSummaryDetails = ({ } } - const multiselectQuestionAddress = (extraData?: AllExtraDataTypes[]) => { + const multiselectQuestionHelpText = (extraData?: AllExtraDataTypes[]) => { if (!extraData) return - return extraData.reduce((acc, item) => { + const helperText = extraData.reduce((acc, item) => { if (item.type === InputType.address && typeof item.value === "object") { - acc += ` - ${item.value.street}${!item.value.street2 && ","} - ${item.value.street2 ? `${item.value.street2},` : ""} - ${item.value.city}, - ${item.value.state} - ${item.value.zipCode} - ` + acc += `${item.value.street} ${!item.value.street2 ? "," : ""} ${ + item.value.street2 ? `${item.value.street2},` : "" + } ${item.value.city}, ${item.value.state} ${item.value.zipCode}` } return acc }, "") + + const name = extraData.find((field) => field.key === AddressHolder.Name)?.value as string + const relationship = extraData.find((field) => field.key === AddressHolder.Relationship) + ?.value as string + + return `${name ? `${name}\n` : ""}${relationship ? `${relationship}\n` : ""}${helperText}` } const multiselectQuestionSection = ( @@ -134,10 +136,10 @@ const FormSummaryDetails = ({ .map((option: ApplicationMultiselectQuestionOption, index) => ( {option.key} diff --git a/sites/public/src/lib/helpers.tsx b/sites/public/src/lib/helpers.tsx index 6d3dd6cc4f..d2365920a4 100644 --- a/sites/public/src/lib/helpers.tsx +++ b/sites/public/src/lib/helpers.tsx @@ -202,7 +202,9 @@ export const untranslateMultiselectQuestion = ( if (option.extraData) { option.extraData.forEach((extra) => { - extra.key = selectedOption.untranslatedText ?? selectedOption.text + if (!extra.key) { + extra.key = selectedOption.untranslatedText ?? selectedOption.text + } }) } })