diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
index e72dca11fc..bcc8cf8e98 100644
--- a/shared-helpers/src/locales/general.json
+++ b/shared-helpers/src/locales/general.json
@@ -92,6 +92,7 @@
"application.contact.suggestedAddress": "Suggested Address:",
"application.contact.title": "Thanks %{firstName}. Now we need to know how to contact you.",
"application.contact.verifyAddressTitle": "We have located the following address. Please confirm it's correct.",
+ "application.contact.verifyMultipleAddresses": "Since there are multiple options for this preference, you’ll need to verify multiple addresses.",
"application.contact.workAddress": "Work Address",
"application.contact.youEntered": "You Entered:",
"application.contact.yourAdditionalPhoneNumber": "Your Second Phone Number",
diff --git a/shared-helpers/src/views/address/FormAddressAlternate.tsx b/shared-helpers/src/views/address/FormAddressAlternate.tsx
new file mode 100644
index 0000000000..73367403f9
--- /dev/null
+++ b/shared-helpers/src/views/address/FormAddressAlternate.tsx
@@ -0,0 +1,102 @@
+import { UseFormMethods } from "react-hook-form"
+import { Field, resolveObject, Select, t } from "@bloom-housing/ui-components"
+import React from "react"
+
+type FormAddressProps = {
+ subtitle?: string
+ dataKey: string
+ register: UseFormMethods["register"]
+ errors?: UseFormMethods["errors"]
+ required?: boolean
+ stateKeys: string[]
+}
+
+export const FormAddressAlternate = ({
+ subtitle,
+ dataKey,
+ register,
+ errors,
+ required,
+ stateKeys,
+}: FormAddressProps) => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx
index 50cf9c6fff..f8ec02737b 100644
--- a/shared-helpers/src/views/multiselectQuestions.tsx
+++ b/shared-helpers/src/views/multiselectQuestions.tsx
@@ -14,12 +14,12 @@ import {
ExpandableContent,
Field,
FieldGroup,
- FormAddress,
resolveObject,
t,
} from "@bloom-housing/ui-components"
import { stateKeys } from "../utilities/formKeys"
import { AddressHolder } from "../utilities/constants"
+import { FormAddressAlternate } from "./address/FormAddressAlternate"
export const listingSectionQuestions = (
listing: Listing,
@@ -290,7 +290,7 @@ export const getCheckboxOption = (
)}
{watchFields[optionFieldName] && option.collectAddress && (
-
{
+ const [verifyAddress, setVerifyAddress] = useState(false)
+ const [verifyAddressStep, setVerifyAddressStep] = useState(0)
+ const [foundAddress, setFoundAddress] = useState({})
+ const [newAddressSelected, setNewAddressSelected] = useState(true)
+
const clientLoaded = OnClientSide()
const { profile } = useContext(AuthContext)
const { conductor, application, listing } = useFormConductor(applicationStep)
@@ -77,27 +83,67 @@ const ApplicationMultiselectQuestionStep = ({
return getAllOptions(question, applicationSection)
}, [question])
+ const body = useRef(null)
+
const onSubmit = (data) => {
- const body =
- questionSetInputType === "checkbox"
- ? mapCheckboxesToApi(data, question, applicationSection)
- : mapRadiosToApi(data.application[applicationSection], question)
- if (questions.length > 1 && body) {
+ if (verifyAddressStep === 0) {
+ body.current =
+ questionSetInputType === "checkbox"
+ ? mapCheckboxesToApi(data, question, applicationSection)
+ : mapRadiosToApi(data.application[applicationSection], question)
+ }
+
+ // Verify address on preferences
+ if (question?.options.some((item) => item?.collectAddress)) {
+ const step: number = body.current.options.findIndex(
+ (option, index) =>
+ index >= verifyAddressStep && option.checked === true && option.extraData?.[0]?.value
+ )
+
+ if (
+ newAddressSelected &&
+ foundAddress.newAddress &&
+ body.current.options[verifyAddressStep - 1]?.extraData?.[0]?.value
+ ) {
+ body.current.options[verifyAddressStep - 1].extraData[0].value = foundAddress.newAddress
+ }
+
+ if (step !== -1) {
+ if (body.current.options[step].extraData[0]?.value) {
+ setFoundAddress({})
+ setVerifyAddress(true)
+ findValidatedAddress(
+ body.current.options[step].extraData[0]?.value,
+ setFoundAddress,
+ setNewAddressSelected
+ )
+ setVerifyAddressStep(step + 1)
+ }
+
+ return // Skip rest of the submit process
+ }
+ }
+
+ if (questions.length > 1 && body.current) {
// If there is more than one question, save the data in segments
const currentQuestions = conductor.currentStep.application[applicationSection].filter(
(question) => {
- return question.key !== body.key
+ return question.key !== body.current.key
}
)
- conductor.currentStep.save([...currentQuestions, body])
- setApplicationQuestions([...currentQuestions, body])
+
+ conductor.currentStep.save([...currentQuestions, body.current])
+ setApplicationQuestions([...currentQuestions, body.current])
} else {
// Otherwise, submit all at once
- conductor.currentStep.save([body])
+ conductor.currentStep.save([body.current])
}
// Update to the next page if we have more pages
if (page !== questions.length) {
+ setVerifyAddressStep(0)
+ setVerifyAddress(false)
setPage(page + 1)
+ body.current = null
return
}
// Otherwise complete the section and move to the next URL
@@ -154,15 +200,29 @@ const ApplicationMultiselectQuestionStep = ({
{
- conductor.setNavigatedBack(true)
- setPage(page - 1)
+ if (!verifyAddress) {
+ conductor.setNavigatedBack(true)
+ setPage(page - 1)
+ body.current = null
+ }
}}
- custom={page !== 1}
+ custom={page !== 1 || verifyAddress}
/>
-
{strings?.title ?? question?.text}
- {strings?.subTitle &&
{strings?.subTitle}
}
+
+ {verifyAddress
+ ? foundAddress.invalid
+ ? t("application.contact.couldntLocateAddress")
+ : t("application.contact.verifyAddressTitle")
+ : strings?.title ?? question?.text}
+
+ {verifyAddress && body.current.options.filter((option) => option.checked).length > 1 && (
+
{t("application.contact.verifyMultipleAddresses")}
+ )}
+ {!verifyAddress && strings?.subTitle && (
+
{strings?.subTitle}
+ )}
{!!Object.keys(errors).length && (
@@ -172,7 +232,7 @@ const ApplicationMultiselectQuestionStep = ({
)}