feat: set up new Preferences page & edit/view drawers (MSQ V2)

api/prisma/seed-helpers/multiselect-question-factory.ts

@@ -15,6 +15,7 @@ export const multiselectQuestionFactory = (
   optionalParams?: {
     optOut?: boolean;
     multiselectQuestion?: Partial<Prisma.MultiselectQuestionsCreateInput>;
+    status?: MultiselectQuestionsStatusEnum;
   },
   version2 = false,
 ): Prisma.MultiselectQuestionsCreateInput => {
@@ -56,7 +57,7 @@ export const multiselectQuestionFactory = (
     },
     name: name,
     subText: `sub text for ${name}`,
-    status: MultiselectQuestionsStatusEnum.draft,
+    status: optionalParams?.status || MultiselectQuestionsStatusEnum.draft,
     // TODO: Can be removed after MSQ refactor
     text: name,
   };

api/prisma/seed-staging.ts

@@ -8,6 +8,7 @@ import {
   Prisma,
   PrismaClient,
   UserRoleEnum,
+  MultiselectQuestionsStatusEnum,
 } from '@prisma/client';
 import { jurisdictionFactory } from './seed-helpers/jurisdiction-factory';
 import { listingFactory } from './seed-helpers/listing-factory';
@@ -41,14 +42,17 @@ import dayjs from 'dayjs';
 export const stagingSeed = async (
   prismaClient: PrismaClient,
   jurisdictionName: string,
+  msqV2: boolean,
 ) => {
   // Seed feature flags
   await createAllFeatureFlags(prismaClient);
+  const optionalMainFlags = msqV2 ? [FeatureFlagEnum.enableV2MSQ] : [];
   // create main jurisdiction with as many feature flags turned on as possible
   const mainJurisdiction = await prismaClient.jurisdictions.create({
     data: jurisdictionFactory(jurisdictionName, {
       listingApprovalPermissions: [UserRoleEnum.admin],
       featureFlags: [
+        ...optionalMainFlags,
         FeatureFlagEnum.enableAccessibilityFeatures,
         FeatureFlagEnum.enableCompanyWebsite,
         FeatureFlagEnum.enableGeocodingPreferences,
@@ -396,25 +400,85 @@ export const stagingSeed = async (
       simplifiedDCMap,
     ),
   });
-  const cityEmployeeQuestion = await prismaClient.multiselectQuestions.create({
-    data: multiselectQuestionFactory(mainJurisdiction.id, {
+  let cityEmployeeMsqData: Prisma.MultiselectQuestionsCreateInput;
+  if (msqV2) {
+    cityEmployeeMsqData = multiselectQuestionFactory(
+      mainJurisdiction.id,
+      {
+        multiselectQuestion: {
+          status: MultiselectQuestionsStatusEnum.active,
+          name: 'City Employees',
+          description: 'Employees of the local city.',
+          applicationSection:
+            MultiselectQuestionsApplicationSectionEnum.preferences,
+          options: [
+            {
+              name: 'At least one member of my household is a city employee',
+              collectAddress: false,
+              ordinal: 0,
+            },
+          ],
+        },
+      },
+      true,
+    );
+  } else {
+    cityEmployeeMsqData = multiselectQuestionFactory(mainJurisdiction.id, {
       multiselectQuestion: {
         text: 'City Employees',
         description: 'Employees of the local city.',
         applicationSection:
           MultiselectQuestionsApplicationSectionEnum.preferences,
         options: [
           {
-            text: 'At least one member of my household is a city employee',
+            name: 'At least one member of my household is a city employee',
             collectAddress: false,
             ordinal: 0,
           },
         ],
       },
-    }),
+    });
+  }
+  const cityEmployeeQuestion = await prismaClient.multiselectQuestions.create({
+    data: cityEmployeeMsqData,
   });
-  const workInCityQuestion = await prismaClient.multiselectQuestions.create({
-    data: multiselectQuestionFactory(mainJurisdiction.id, {
+  let workInCityMsqData: Prisma.MultiselectQuestionsCreateInput;
+  if (msqV2) {
+    workInCityMsqData = multiselectQuestionFactory(
+      mainJurisdiction.id,
+      {
+        optOut: true,
+        status: MultiselectQuestionsStatusEnum.active,
+        multiselectQuestion: {
+          name: 'Work in the city',
+          description: 'At least one member of my household works in the city',
+          applicationSection:
+            MultiselectQuestionsApplicationSectionEnum.preferences,
+          options: [
+            {
+              name: 'At least one member of my household works in the city',
+              ordinal: 0,
+              collectAddress: true,
+              collectName: true,
+              collectRelationship: true,
+              mapLayerId: mapLayer.id,
+              validationMethod: ValidationMethod.map,
+            },
+            {
+              name: 'All members of the household work in the city',
+              ordinal: 1,
+              collectAddress: true,
+              ValidationMethod: ValidationMethod.none,
+              collectName: false,
+              collectRelationship: false,
+            },
+          ],
+        },
+      },
+      true,
+    );
+  } else {
+    workInCityMsqData = multiselectQuestionFactory(mainJurisdiction.id, {
       optOut: true,
       multiselectQuestion: {
         text: 'Work in the city',
@@ -441,7 +505,10 @@ export const stagingSeed = async (
           },
         ],
       },
-    }),
+    });
+  }
+  const workInCityQuestion = await prismaClient.multiselectQuestions.create({
+    data: workInCityMsqData,
   });
   const veteranProgramQuestion = await prismaClient.multiselectQuestions.create(
     {

api/prisma/seed.ts

@@ -10,12 +10,13 @@ import { reservedCommunityTypeFactoryAll } from './seed-helpers/reserved-communi
 const options: { [name: string]: { type: 'string' | 'boolean' } } = {
   environment: { type: 'string' },
   jurisdictionName: { type: 'string' },
+  msqV2: { type: 'boolean' },
 };
 
 const prisma = new PrismaClient();
 async function main() {
   const {
-    values: { environment, jurisdictionName },
+    values: { environment, jurisdictionName, msqV2 },
   } = parseArgs({ options });
   switch (environment) {
     case 'production':
@@ -30,7 +31,7 @@ async function main() {
     case 'staging':
       // Staging setup should have realistic looking data with a preset list of listings
       // along with all of the required tables (ami, users, etc)
-      stagingSeed(prisma, jurisdictionName as string);
+      stagingSeed(prisma, jurisdictionName as string, msqV2 as boolean);
       break;
     case 'development':
     default:

api/src/services/multiselect-question.service.ts

@@ -276,49 +276,50 @@ export class MultiselectQuestionService {
       );
     }
 
-    const rawMultiselectQuestion =
-      await this.prisma.multiselectQuestions.create({
-        data: {
-          ...createData,
-          jurisdiction: {
-            connect: { id: rawJurisdiction.id },
-          },
-          links: links
-            ? (links as unknown as Prisma.InputJsonArray)
-            : undefined,
+    const finalCreateData = {
+      data: {
+        ...createData,
+        jurisdiction: {
+          connect: { id: rawJurisdiction.id },
+        },
+        links: links ? (links as unknown as Prisma.InputJsonArray) : undefined,
 
-          // TODO: Can be removed after MSQ refactor
-          options: options
+        // TODO: Can be removed after MSQ refactor
+        options:
+          !enableV2MSQ && options
             ? (options as unknown as Prisma.InputJsonArray)
             : undefined,
 
-          // TODO: Use of the feature flag is temporary until after MSQ refactor
-          isExclusive: enableV2MSQ ? isExclusive : false,
-          name: enableV2MSQ ? name : createData.text,
-          status: enableV2MSQ ? status : MultiselectQuestionsStatusEnum.draft,
+        // TODO: Use of the feature flag is temporary until after MSQ refactor
+        isExclusive: enableV2MSQ ? isExclusive : false,
+        name: enableV2MSQ ? name : createData.text,
+        status: enableV2MSQ ? status : MultiselectQuestionsStatusEnum.draft,
+
+        multiselectOptions: enableV2MSQ
+          ? {
+              createMany: {
+                data: multiselectOptions?.map((option) => {
+                  // TODO: Can be removed after MSQ refactor
+                  delete option['collectAddress'];
+                  delete option['collectName'];
+                  delete option['collectRelationship'];
+                  delete option['exclusive'];
+                  delete option['text'];
+                  return {
+                    ...option,
+                    links: option.links as unknown as Prisma.InputJsonArray,
+                    name: option.name,
+                  };
+                }),
+              },
+            }
+          : undefined,
+      },
+      include: includeViews.fundamentals,
+    };
 
-          multiselectOptions: enableV2MSQ
-            ? {
-                createMany: {
-                  data: multiselectOptions?.map((option) => {
-                    // TODO: Can be removed after MSQ refactor
-                    delete option['collectAddress'];
-                    delete option['collectName'];
-                    delete option['collectRelationship'];
-                    delete option['exclusive'];
-                    delete option['text'];
-                    return {
-                      ...option,
-                      links: option.links as unknown as Prisma.InputJsonArray,
-                      name: option.name,
-                    };
-                  }),
-                },
-              }
-            : undefined,
-        },
-        include: includeViews.fundamentals,
-      });
+    const rawMultiselectQuestion =
+      await this.prisma.multiselectQuestions.create(finalCreateData);
 
     // TODO: Can be removed after MSQ refactor
     rawMultiselectQuestion['jurisdictions'] = [

api/test/unit/services/multiselect-question.service.spec.ts

@@ -703,6 +703,7 @@ describe('Testing multiselect question service', () => {
       expect(prisma.multiselectQuestions.create).toHaveBeenCalledWith({
         data: {
           ...params,
+          options: undefined,
           jurisdiction: {
             connect: { id: mockedMultiselectQuestion.jurisdiction.id },
           },

shared-helpers/index.ts

@@ -27,6 +27,7 @@ export * from "./src/utilities/regex"
 export * from "./src/utilities/stringFormatting"
 export * from "./src/utilities/token"
 export * from "./src/utilities/unitTypes"
+export * from "./src/utilities/useMutate"
 export * from "./src/utilities/useIntersect"
 export * from "./src/views/components/BloomCard"
 export * from "./src/views/components/ClickableCard"

shared-helpers/src/locales/general.json

@@ -544,6 +544,7 @@
   "errors.alert.badRequest": "Looks like something went wrong. Please try again. \n\nContact your housing department if you're still experiencing issues.",
   "errors.alert.listingsApprovalEmailError": "This listing was updated, but the associated emails failed to send.",
   "errors.alert.timeoutPleaseTryAgain": "Oops! Looks like something went wrong. Please try again.",
+  "errors.alphaNumericError": "Please use letters & numbers only",
   "errors.backToHome": "Back to home",
   "errors.cityError": "Please enter a city",
   "errors.dateError": "Please enter a valid date",
@@ -1152,6 +1153,7 @@
   "t.pleaseSelectOne": "Please select one",
   "t.pleaseSelectYesNo": "Please select yes or no.",
   "t.pm": "PM",
+  "t.preference": "Preference",
   "t.preferences": "Preferences",
   "t.preferNotToSay": "Prefer not to say",
   "t.previous": "Previous",
@@ -1190,6 +1192,7 @@
   "t.units": "units",
   "t.unitType": "Unit type",
   "t.uploadFile": "Upload file",
+  "t.view": "View",
   "t.viewMap": "View map",
   "t.viewOnMap": "View on map",
   "t.website": "Website",

shared-helpers/src/utilities/useMutate.ts

@@ -0,0 +1,52 @@
+import { useState } from "react"
+
+export type UseMutateOptions = {
+  onSuccess?: () => void
+  onError?: (err: any) => void
+}
+
+export const useMutate = <UseMutateResponse>() => {
+  const [data, setData] = useState<UseMutateResponse | undefined>(undefined)
+  const [isSuccess, setSuccess] = useState(false)
+  const [isLoading, setLoading] = useState(false)
+  const [isError, setError] = useState<unknown>(null)
+
+  const mutate = async (
+    mutateFn: (args?: unknown) => Promise<UseMutateResponse>,
+    options?: UseMutateOptions
+  ) => {
+    let response: UseMutateResponse | undefined = undefined
+
+    try {
+      setLoading(true)
+      response = await mutateFn()
+      setData(response)
+      setSuccess(true)
+      options?.onSuccess?.()
+      setLoading(false)
+    } catch (err) {
+      setSuccess(false)
+      setLoading(false)
+      setError(err)
+      options?.onError?.(err)
+    }
+
+    return response
+  }
+
+  const reset = () => {
+    setData(undefined)
+    setSuccess(false)
+    setLoading(false)
+    setError(null)
+  }
+
+  return {
+    mutate,
+    reset,
+    data,
+    isSuccess,
+    isLoading,
+    isError,
+  }
+}

sites/partners/__tests__/pages/application/index.test.tsx

@@ -7,7 +7,6 @@ import { application, listing, user } from "@bloom-housing/shared-helpers/__test
 import ApplicationsList from "../../../src/pages/application/[id]"
 import {
   AlternateContactRelationship,
-  LanguagesEnum,
   UnitTypeEnum,
   YesNoEnum,
 } from "@bloom-housing/shared-helpers/src/types/backend-swagger"

sites/partners/__tests__/pages/listings/[id]/index.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from "react"
 import { setupServer } from "msw/lib/node"
-import { fireEvent, mockNextRouter, queryByText, render, screen, within } from "../../../testUtils"
+import { fireEvent, mockNextRouter, render, screen, within } from "../../../testUtils"
 import { ListingContext } from "../../../../src/components/listings/ListingContext"
 import { jurisdiction, listing, user } from "@bloom-housing/shared-helpers/__tests__/testHelpers"
 import DetailListingData from "../../../../src/components/listings/PaperListingDetails/sections/DetailListingData"

sites/partners/page_content/locale_overrides/general.json

@@ -602,6 +602,7 @@
   "settings.preferenceOptOutLabel": "Opt out label",
   "settings.preferenceOptionDescription": "Preference option description",
   "settings.preferenceOptionEdit": "Edit option",
+  "settings.preferenceOptionView": "View option",
   "settings.preferenceShowOnListing": "Show preference on listing?",
   "settings.preferenceValidatingAddress": "Do you need help validating the address?",
   "settings.preferenceValidatingAddress.checkWithinRadius": "Yes, check if within geographic radius of property",
@@ -610,6 +611,7 @@
   "settings.preferenceValidatingAddress.howManyMiles": "How many miles is the qualifying geographic radius?",
   "settings.preferenceValidatingAddress.selectMapLayer": "Select a map layer",
   "settings.preferenceValidatingAddress.selectMapLayerDescription": "Select your map layer based on your district. If you don't see your map contact us",
+  "settings.preferenceView": "View preference",
   "settings.preferenceDeleteConfirmation": "Deleting a preference cannot be undone.",
   "settings.preferenceChangesRequired": "Changes required before deleting",
   "settings.preferenceChangesRequiredEdit": "Changes required before editing",