feat: DAH-2630 SCV Lottery Modal General Pool Section (#2284)

SFDigitalServices · Sep 12, 2024 · b42756a · b42756a
1 parent 7af6f95
commit b42756a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 83 deletions.
diff --git a/...istingDetailsLottery/__snapshots__/ListingDetailsLotteryPreferencesEducator.test.tsx.snap b/...istingDetailsLottery/__snapshots__/ListingDetailsLotteryPreferencesEducator.test.tsx.snap
@@ -340,38 +340,33 @@ exports[`ListingDetailsLotteryPreferencesEducatory displays 2 preferences - NRHP
         </p>
       </div>
       <hr
-        class="mt-4"
+        class="my-4"
       />
     </div>
-    <div
-      class="bg-gray-100 border-b mb-4 p-4"
-    >
+    <div>
+      <div
+        class="px-8"
+      >
+        <h3
+          class="font-sans font-semibold text-xs tracking-wide uppercase"
+        >
+          General Pool
+        </h3>
+        <p
+          class="text-sm"
+        >
+          Up to 1 unit
+        </p>
+        <p
+          class="text-gray-700 text-sm"
+        >
+          2 applicants are on this list.
+        </p>
+      </div>
       <hr
-        class="border-b-4 border-primary"
+        class="mt-4"
       />
     </div>
-    <div
-      class="px-8"
-    >
-      <h3
-        class="font-sans font-semibold text-sm tracking-wide uppercase"
-      >
-        General Pool
-      </h3>
-      <p
-        class="mb-1 text-sm"
-      >
-        Any remaining units
-      </p>
-      <p
-        class="text-gray-700 text-sm"
-      >
-        2 applicants are on this list. Please note, preference holders will be considered for all units first.
-      </p>
-    </div>
-    <hr
-      class="mt-4"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -716,38 +711,33 @@ exports[`ListingDetailsLotteryPreferencesEducatory displays 3 default preference
         </p>
       </div>
       <hr
-        class="mt-4"
+        class="my-4"
       />
     </div>
-    <div
-      class="bg-gray-100 border-b mb-4 p-4"
-    >
+    <div>
+      <div
+        class="px-8"
+      >
+        <h3
+          class="font-sans font-semibold text-xs tracking-wide uppercase"
+        >
+          General Pool
+        </h3>
+        <p
+          class="text-sm"
+        >
+          Up to 1 unit
+        </p>
+        <p
+          class="text-gray-700 text-sm"
+        >
+          2 applicants are on this list.
+        </p>
+      </div>
       <hr
-        class="border-b-4 border-primary"
+        class="mt-4"
       />
     </div>
-    <div
-      class="px-8"
-    >
-      <h3
-        class="font-sans font-semibold text-sm tracking-wide uppercase"
-      >
-        General Pool
-      </h3>
-      <p
-        class="mb-1 text-sm"
-      >
-        Any remaining units
-      </p>
-      <p
-        class="text-gray-700 text-sm"
-      >
-        2 applicants are on this list. Please note, preference holders will be considered for all units first.
-      </p>
-    </div>
-    <hr
-      class="mt-4"
-    />
   </div>
 </DocumentFragment>
 `;

diff --git a/app/javascript/modules/constants.tsx b/app/javascript/modules/constants.tsx
@@ -8,6 +8,7 @@ export const PREFERENCES = {
   dalpGeneral: "DALP General",
   displacedTenant: "Displaced Tenant Housing Preference (DTHP)",
   employmentOrDisability: "Employment or Disability Preference",
+  generalLottery: "generalLottery",
   hud221d3: "HUD 221(d)(3) Statutory Preference; Federal or Presidential Disasters (HUD 221)",
   liveWorkInSf: "Live or Work in San Francisco Preference",
   neighborhoodResidence: "Neighborhood Resident Housing Preference (NRHP)",

diff --git a/app/javascript/modules/listingDetailsLottery/ListingDetailsLotteryPreferencesEducator.tsx b/app/javascript/modules/listingDetailsLottery/ListingDetailsLotteryPreferencesEducator.tsx
@@ -3,7 +3,7 @@ import { Heading, t } from "@bloom-housing/ui-components"
 import type { RailsLotteryResult } from "../../api/types/rails/listings/RailsLotteryResult"
 import { defaultIfNotTranslated, renderMarkup } from "../../util/languageUtil"
 import { preferenceNameHasVeteran } from "../../util/listingUtil"
-import { LOTTERY_RANKING_VIDEO_URL } from "../constants"
+import { LOTTERY_RANKING_VIDEO_URL, PREFERENCES } from "../constants"
 import { RailsLotteryBucket } from "../../api/types/rails/listings/RailsLotteryBucket"
 
 export interface ListingDetailsLotteryPreferencesProps {
@@ -29,10 +29,12 @@ const LotteryPreferences = ({
     <div>
       <div className="px-8">
         <Heading className="font-sans font-semibold text-xs tracking-wide uppercase" priority={3}>
-          {defaultIfNotTranslated(
-            `listings.lotteryPreference.${preferenceName}.title`,
-            preferenceName
-          )}
+          {preferenceName === PREFERENCES.generalLottery
+            ? t("lottery.generalPool")
+            : defaultIfNotTranslated(
+                `listings.lotteryPreference.${preferenceName}.title`,
+                preferenceName
+              )}
         </Heading>
         <p className="text-sm">{t("lottery.upToXUnitsAvailable", unitsAvailable)}</p>
         {numVeteranApps > 0 ? (
@@ -86,13 +88,14 @@ const LotteryBucketsContent = ({
     // from the preference short code by adding in the 'V-'
     // e.g. The number of veteran applications for 'T1-COP' are stored in veteranAppsByBucketMap
     // under the key 'T1-V-COP', so we insert 'V-' using replace to get the veteran preference short code
-    const veteransPreferenceShortCode = bucket.preferenceShortCode.startsWith("T")
+    const veteransPreferenceShortCode = bucket.preferenceShortCode?.startsWith("T")
       ? bucket.preferenceShortCode.replace("-", "-V-")
-      : `V-${bucket.preferenceShortCode}`
+      : `V-${bucket.preferenceShortCode}` // may be 'V-null' if preferenceShortCode does not exist, which will not affect numVeteranApps
     const numVeteranApps = veteranAppsByBucketMap[veteransPreferenceShortCode] ?? 0
 
     return (
       <LotteryPreferences
+        key={preferenceName}
         unitsAvailable={bucket.unitsAvailable}
         totalSubmittedApps={bucket.totalSubmittedApps}
         preferenceName={preferenceName}
@@ -151,7 +154,7 @@ export const ListingDetailsLotteryPreferencesEducator = ({
   // Then, get the general lottery bucket
   // This only applies for SCV 2 & 3 (SCV 1 only allows educators to apply)
   const generalLottery = lotteryBucketsDetails.lotteryBuckets.filter(
-    (bucket) => bucket.preferenceName === "generalLottery"
+    (bucket) => bucket.preferenceName === PREFERENCES.generalLottery
   )
 
   return (
@@ -188,30 +191,10 @@ export const ListingDetailsLotteryPreferencesEducator = ({
         <>
           <LotteryBucketHeader headerKey="lottery.generalPublic" />
           <LotteryBucketsContent
-            buckets={nonEducatorsWithoutVeterans}
+            buckets={[...nonEducatorsWithoutVeterans, ...generalLottery]}
             veteranAppsByBucketMap={veteranAppsByBucketMap}
             lastPref
           />
-          <div className="bg-gray-100 border-b mb-4 p-4">
-            <hr className="border-b-4 border-primary" />
-          </div>
-          {generalLottery.map((bucket) => (
-            <React.Fragment key={bucket.preferenceOrder}>
-              <div className="px-8">
-                <Heading
-                  className="font-sans font-semibold text-sm tracking-wide uppercase"
-                  priority={3}
-                >
-                  {t("lottery.generalPool")}
-                </Heading>
-                <p className="mb-1 text-sm">{t("lottery.anyRemainingUnits")}</p>
-                <p className="text-gray-700 text-sm">
-                  {t("lottery.numberApplicantsQualifiedForGeneralPool", bucket.totalSubmittedApps)}
-                </p>
-              </div>
-              <hr className="mt-4" />
-            </React.Fragment>
-          ))}
         </>
       )}
     </div>