Feature/dynamic preferences

backend/core/src/seeds/listings.ts

@@ -181,7 +181,16 @@ export const listingSeed1: ListingSeed = {
       subtitle: "",
       description:
         "At least one member of my household lives in City of Hayward. At least one member of my household works in the City of Hayward",
-      links: [],
+      links: [
+        {
+          title: "example.com",
+          url: "https://example.com",
+        },
+        {
+          title: "example2.com",
+          url: "https://example2.com",
+        },
+      ],
       formMetadata: {
         key: "liveWork",
         options: [
@@ -202,7 +211,16 @@ export const listingSeed1: ListingSeed = {
       subtitle: "",
       description:
         "At least one member of my household was displaced from a residential property due to redevelopment activity by the Hayward Housing Authority, the Redevelopment Agency or the City of Hayward.",
-      links: [],
+      links: [
+        {
+          title: "example.com",
+          url: "https://example.com",
+        },
+        {
+          title: "example2.com",
+          url: "https://example2.com",
+        },
+      ],
       formMetadata: {
         key: "displacedTenant",
         options: [
@@ -211,7 +229,7 @@ export const listingSeed1: ListingSeed = {
             extraData: [
               {
                 key: "name",
-                type: InputType.text,
+                type: InputType.hhMemberSelect,
               },
               {
                 key: "address",
@@ -224,7 +242,7 @@ export const listingSeed1: ListingSeed = {
             extraData: [
               {
                 key: "name",
-                type: InputType.text,
+                type: InputType.hhMemberSelect,
               },
               {
                 key: "address",

backend/core/src/shared/types/input-type.ts

@@ -2,4 +2,5 @@ export enum InputType {
   boolean = "boolean",
   text = "text",
   address = "address",
+  hhMemberSelect = "hhMemberSelect",
 }

backend/core/types/src/backend-swagger.ts

@@ -3662,7 +3662,8 @@ export enum CSVFormattingType {
 export enum InputType {
   'boolean' = 'boolean',
   'text' = 'text',
-  'address' = 'address'
+  'address' = 'address',
+  'hhMemberSelect' = 'hhMemberSelect'
 }
 export type CombinedAmiChartTypes = AmiChart;
 export enum ApplicationMethodType {

sites/partners/lib/formatApplicationData.ts

@@ -7,10 +7,13 @@ import {
   ApplicationStatus,
   Address,
   HouseholdMember,
-  InputType,
 } from "@bloom-housing/backend-core/types"
 
-import { TimeFieldPeriod } from "@bloom-housing/ui-components"
+import {
+  TimeFieldPeriod,
+  mapPreferencesToApi,
+  mapApiToPreferencesForm,
+} from "@bloom-housing/ui-components"
 import {
   FormTypes,
   YesNoAnswer,
@@ -96,60 +99,7 @@ export const mapFormToApi = (data: FormData, listingId: string, editMode: boolea
     }
   })()
 
-  const preferences = (() => {
-    const CLAIMED_KEY = "claimed"
-    const preferencesFormData = data.application.preferences
-
-    const keys = Object.keys(preferencesFormData)
-
-    return keys.map((key) => {
-      const currentPreference = preferencesFormData[key]
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const currentPreferenceValues = Object.values(currentPreference) as Record<string, any>
-      const claimed = currentPreferenceValues.map((c) => c.claimed).includes(true)
-
-      const options = Object.keys(currentPreference).map((option) => {
-        const currentOption = currentPreference[option]
-
-        // count keys except claimed
-        const extraKeys = Object.keys(currentOption).filter((item) => item !== CLAIMED_KEY)
-
-        const response = {
-          key: option,
-          checked: currentOption[CLAIMED_KEY],
-        }
-
-        // assign extra data and detect data type
-        if (extraKeys.length) {
-          const extraData = extraKeys.map((extraKey) => {
-            const type = (() => {
-              if (typeof currentOption[extraKey] === "boolean") return InputType.boolean
-              // if object includes "city" property, it should be an address
-              if (Object.keys(currentOption[extraKey]).includes("city")) return InputType.address
-
-              return InputType.text
-            })()
-
-            return {
-              key: extraKey,
-              type,
-              value: currentOption[extraKey],
-            }
-          })
-
-          Object.assign(response, { extraData })
-        }
-
-        return response
-      })
-
-      return {
-        key,
-        claimed,
-        options,
-      }
-    })
-  })()
+  const preferences = mapPreferencesToApi(data)
 
   // additional phone
   const {
@@ -293,44 +243,7 @@ export const mapApiToForm = (applicationData: ApplicationUpdate) => {
 
   const phoneNumber = applicationData.applicant.phoneNumber
 
-  const preferences = (() => {
-    const preferencesFormData = {}
-
-    const preferencesApiData = applicationData.preferences
-
-    preferencesApiData.forEach((item) => {
-      const options = item.options.reduce((acc, curr) => {
-        // extraData which comes from the API is an array, in the form we expect an object
-        const extraData =
-          curr?.extraData?.reduce((extraAcc, extraCurr) => {
-            // value - it can be string or nested address object
-            const value = extraCurr.value
-            Object.assign(extraAcc, {
-              [extraCurr.key]: value,
-            })
-
-            return extraAcc
-          }, {}) || {}
-
-        // each form option has "claimed" property - it's "checked" property in the API
-        const claimed = curr.checked
-
-        Object.assign(acc, {
-          [curr.key]: {
-            claimed,
-            ...extraData,
-          },
-        })
-        return acc
-      }, {})
-
-      Object.assign(preferencesFormData, {
-        [item.key]: options,
-      })
-    })
-
-    return preferencesFormData
-  })()
+  const preferences = mapApiToPreferencesForm(applicationData.preferences)
 
   const application: ApplicationTypes = (() => {
     const {

sites/partners/lib/hooks.ts

@@ -29,16 +29,36 @@ export function useListingsData() {
   }
 }
 
-export function useApplicationsData(pageIndex: number, limit = 10, listingId: string, search = "") {
+export function useApplicationsData(
+  pageIndex: number,
+  limit = 10,
+  listingId: string,
+  search: string
+) {
   const { applicationsService } = useContext(ApiClientContext)
-  const endpoint = `${process.env.backendApiBase}/applications?listingId=${listingId}&page=${pageIndex}&limit=${limit}&search=${search}`
-  const fetcher = () =>
-    applicationsService.list({
-      listingId,
-      page: pageIndex,
-      limit,
-      search,
-    })
+
+  const searchParams = new URLSearchParams()
+  searchParams.append("listingId", listingId)
+  searchParams.append("page", pageIndex.toString())
+  searchParams.append("limit", limit.toString())
+
+  if (search) {
+    searchParams.append("search", search)
+  }
+
+  const endpoint = `${process.env.backendApiBase}/applications?${searchParams.toString()}`
+
+  const params = {
+    listingId,
+    page: pageIndex,
+    limit,
+  }
+
+  if (search) {
+    Object.assign(params, search)
+  }
+
+  const fetcher = () => applicationsService.list(params)
   const { data, error } = useSWR(endpoint, fetcher)
 
   return {

sites/partners/src/applications/PaperApplicationForm/FormMember.tsx

@@ -14,9 +14,9 @@ import {
   FieldGroup,
   Button,
   Form,
+  FormAddress,
 } from "@bloom-housing/ui-components"
 import { useForm } from "react-hook-form"
-import { FormAddress } from "./FormAddress"
 import { YesNoAnswer } from "./FormTypes"
 
 type ApplicationFormMemberProps = {
@@ -208,16 +208,23 @@ const FormMember = ({ onSubmit, onClose, members, editedMemberId }: ApplicationF
           </GridCell>
         </GridSection>
 
-        {sameAddressField === YesNoAnswer.No &&
-          FormAddress(
-            t("application.details.residenceAddress"),
-            "address",
-            "residence-member",
-            register
-          )}
-
-        {workInRegionField === YesNoAnswer.Yes &&
-          FormAddress(t("application.contact.workAddress"), "workAddress", "work", register)}
+        {sameAddressField === YesNoAnswer.No && (
+          <FormAddress
+            subtitle={t("application.details.residenceAddress")}
+            dataKey="address"
+            type="residence-member"
+            register={register}
+          />
+        )}
+
+        {workInRegionField === YesNoAnswer.Yes && (
+          <FormAddress
+            subtitle={t("application.contact.workAddress")}
+            dataKey="workAddress"
+            type="work"
+            register={register}
+          />
+        )}
       </div>
 
       <div className="mt-6">