feat: DAH-2660 new directory section headers (#2459)

* feat: DAH-2660 new directory section headers * test: DAH-2660 add test * feat: DAH-2660 add feature flag * feat: DAH-2650 add icons * feat: DAH-2660 fix logic for when the headers show up * fix: DAH-2660 buy now only for sales * fix: DAH-2660 use bloom icon * feat: DAH-2660 update strings * feat: DAH-2660 styling * feat: DAH-2660 add back padding * feat: DAH-2660 put back spacing * feat: DAH-2660 use bloom css
SFDigitalServices · Dec 18, 2024 · efc32e8 · efc32e8
1 parent 35357e8
commit efc32e8
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 30 deletions.
diff --git a/app/assets/json/translations/react/en.json b/app/assets/json/translations/react/en.json
@@ -1074,6 +1074,12 @@
   "listings.finalWaitlistSize": "Final Waitlist Size",
   "listings.forHouseholdSize": "for <span className='eligibility-subtext'>%{smart_count}</span> person |||| for <span className='eligibility-subtext'>%{smart_count}</span> people",
   "listings.forIncomeCalculations": "For income calculations, household size includes everyone (all ages) living in the unit.",
+  "listings.forRent.openListings.subtitle": "Enter a lottery to rent a unit at a below-market-rate (BMR) price.",
+  "listings.forRent.openListings.title": "Enter a lottery",
+  "listings.forSale.fcfsListings.subtitle": "Buy a below-market-rate (BMR) home without entering a lottery. First come, first served.",
+  "listings.forSale.fcfsListings.title": "Buy now",
+  "listings.forSale.openListings.subtitle": "Enter a lottery to buy a home at a below-market-rate (BMR) price.",
+  "listings.forSale.openListings.title": "Enter a lottery",
   "listings.habitat.applicationProcess.ol1": "You must go to a <a target='_blank' href='%{infoSessionLink}'>Habitat for Humanity information session</a>.",
   "listings.habitat.applicationProcess.ol10": "You can move into your new home!",
   "listings.habitat.applicationProcess.ol2": "You will submit your application on DAHLIA.",
@@ -1573,9 +1579,12 @@
   "signIn.accountAlreadyConfirmed.title": "Account already confirmed",
   "signIn.badCredentials": "Invalid login credentials. Please try again.",
   "signIn.badCredentialsWithResetLink": "Email or password is incorrect. Check for mistakes and try again. <a target='_blank' href='%{url}'>Reset your password</a> if you need to.",
-  "signIn.unknownError": "Something went wrong. Try again or refresh the page.",
   "signIn.dontHaveAccount": "Don't have an account?",
   "signIn.easilyCheckLottery": "Easily check lottery results",
+  "signIn.expiredUnconfirmed.p1": "The confirmation link expired after 24 hours.",
+  "signIn.expiredUnconfirmed.p2": "To finish creating your account, we need to send you a new link.",
+  "signIn.expiredUnconfirmed.sendNewLink": "Send a new link",
+  "signIn.expiredUnconfirmed.title": "Confirmation link expired",
   "signIn.fillInFaster": "Fill in applications faster",
   "signIn.forgotPassword": "Forgot password?",
   "signIn.loggedOutDueToInactivity": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
@@ -1588,14 +1597,11 @@
   "signIn.resentConfirmationMessage": "Email sent. Please check your inbox.",
   "signIn.signInRequired": "Please sign in to your account to access this page.",
   "signIn.signedOutSuccessfully": "You have successfully logged out of your account.",
+  "signIn.unknownError": "Something went wrong. Try again or refresh the page.",
   "signIn.userTokenValidationTimeout": "We care about your security. We logged you out due to a connection issue. Please sign in to continue.",
   "signOut.alertMessage.confirmSignOut": "You are signed out.",
   "signOut.alertMessage.connectionIssue": "There was a connection issue, so we signed you out. We do this for your security. Sign in again to continue.",
   "signOut.alertMessage.timeout": "You were inactive for more than 30 minutes, so we signed you out. We do this for your security. Sign in again to continue.",
-  "signIn.expiredUnconfirmed.title": "Confirmation link expired",
-  "signIn.expiredUnconfirmed.p1": "The confirmation link expired after 24 hours.",
-  "signIn.expiredUnconfirmed.p2": "To finish creating your account, we need to send you a new link.",
-  "signIn.expiredUnconfirmed.sendNewLink": "Send a new link",
   "t.ami": "AMI",
   "t.applicationClosed": "Applications Closed",
   "t.applicationDeadline": "Application Deadline",

diff --git a/app/javascript/__tests__/pages/listings/ForSale.test.tsx b/app/javascript/__tests__/pages/listings/ForSale.test.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { render, cleanup } from "@testing-library/react"
 import ForSale from "../../../pages/listings/for-sale"
 import { openSaleListing } from "../../data/RailsSaleListing/listing-sale-open"
+import { fcfsSaleListing } from "../../data/RailsSaleListing/listing-sale-fcfs"
 import { useFeatureFlag } from "../../../hooks/useFeatureFlag"
 
 const axios = require("axios")
@@ -40,11 +41,11 @@ describe("For Sale", () => {
   })
 
   it("listings with multiple listings render the first image in the array", async () => {
-    axios.get.mockResolvedValue({ data: { listings: [openSaleListing] } })
+    axios.get.mockResolvedValue({ data: { listings: [openSaleListing, fcfsSaleListing] } })
 
-    const { findByAltText } = render(<ForSale assetPaths="/" />)
+    const { findAllByAltText } = render(<ForSale assetPaths="/" />)
 
-    const image = await findByAltText("This is a listing image")
-    expect(image.getAttribute("src")).toBe(openSaleListing.Listing_Images[0].displayImageURL)
+    const image = await findAllByAltText("This is a listing image")
+    expect(image[0].getAttribute("src")).toBe(openSaleListing.Listing_Images[0].displayImageURL)
   })
 })
diff --git a/app/javascript/hooks/useFeatureFlag.tsx b/app/javascript/hooks/useFeatureFlag.tsx
@@ -2,7 +2,7 @@ import { useFlag as useFlagUnleash, useFlagsStatus } from "@unleash/proxy-client
 
 // If you want to allow a user to change this feature flag via the URL, you can add it to the urlWhiteList set.
 // Unless set, the feature flag will only be determined by the Unleash API.
-const urlWhiteList = new Set(["testFlag"])
+const urlWhiteList = new Set(["temp.webapp.directory.listings", "testFlag"])
 
 export const useFeatureFlag = (flagName: string, defaultValue: boolean) => {
   const urlParams = new URLSearchParams(window.location.search)

diff --git a/app/javascript/modules/listings/DirectoryHelpers.tsx b/app/javascript/modules/listings/DirectoryHelpers.tsx
@@ -34,6 +34,8 @@ import { getImageCardProps, RailsListing } from "./SharedHelpers"
 import TableSubHeader from "./TableSubHeader"
 import RailsSaleListing from "../../api/types/rails/listings/RailsSaleListing"
 import { ListingState } from "./ListingState"
+import { ListingsGroupHeader } from "./ListingsGroupHeader"
+import { IconHomeCheck } from "./assets/icon-home-check"
 
 export type RailsUnitSummary = RailsSaleUnitSummary | RailsRentalUnitSummary
 
@@ -249,14 +251,30 @@ export const openListingsView = (
   directoryType: DirectoryType,
   stackedDataFxn: StackedDataFxnType,
   filtersSet?: boolean
-) => listings.length > 0 && getListingCards(listings, directoryType, stackedDataFxn, filtersSet)
+) => (
+  <ListingsGroupHeader
+    title={t(`listings.${directoryType}.openListings.title`)}
+    subtitle={t(`listings.${directoryType}.openListings.subtitle`)}
+    icon={<Icon size="xlarge" symbol="house" />}
+  >
+    {listings.length > 0 && getListingCards(listings, directoryType, stackedDataFxn, filtersSet)}
+  </ListingsGroupHeader>
+)
 
 export const fcfsSalesView = (
   listings: RailsListing[],
   directoryType: DirectoryType,
   stackedDataFxn: StackedDataFxnType,
   filtersSet?: boolean
-) => listings.length > 0 && getListingCards(listings, directoryType, stackedDataFxn, filtersSet)
+) => (
+  <ListingsGroupHeader
+    title={t(`listings.${directoryType}.fcfsListings.title`)}
+    subtitle={t(`listings.${directoryType}.fcfsListings.subtitle`)}
+    icon={IconHomeCheck}
+  >
+    {listings.length > 0 && getListingCards(listings, directoryType, stackedDataFxn, filtersSet)}
+  </ListingsGroupHeader>
+)
 
 // Get an expandable group of listings
 export const getListingGroup = (
@@ -410,18 +428,6 @@ export const sortListings = (
     sortListingByStringDate(a, b, "Application_Start_Date_Time", true)
   )
 
-  // uncomment to see the listings order in the console
-
-  // console.log("FCFS Open Listings")
-  // fcfsSalesOpen.map((listing) =>
-  //   console.log(`Name: ${listing.Name} ${listing.Application_Start_Date_Time}`)
-  // )
-
-  // console.log("FCFS Not Yet Open Listings")
-  // fcfsSalesNotYetOpen.map((listing) =>
-  //   console.log(`Name: ${listing.Name} ${listing.Application_Start_Date_Time}`)
-  // )
-
   return {
     open,
     upcoming,

diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx
@@ -76,12 +76,13 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
                 props.getSummaryTable,
                 hasFiltersSet
               )}
-              {fcfsSalesView(
-                [...listings.fcfsSalesOpen, ...listings.fcfsSalesNotYetOpen],
-                props.directoryType,
-                props.getSummaryTable,
-                hasFiltersSet
-              )}
+              {props.directoryType === "forSale" &&
+                fcfsSalesView(
+                  [...listings.fcfsSalesOpen, ...listings.fcfsSalesNotYetOpen],
+                  props.directoryType,
+                  props.getSummaryTable,
+                  hasFiltersSet
+                )}
               {props.findMoreActionBlock}
               {filters &&
                 additionalView(

diff --git a/app/javascript/modules/listings/ListingsGroupHeader.scss b/app/javascript/modules/listings/ListingsGroupHeader.scss
@@ -0,0 +1,16 @@
+.listings-group__custom {
+  max-width: var(--seeds-width-3xl);
+
+  @media (min-width: $screen-lg) {
+    max-width: var(--seeds-width-5xl);
+  }
+
+  &:not(:first-of-type) {
+    margin-top: var(--seeds-s20);
+  }
+}
+
+.listings-group__header:not(:first-of-type) {
+  border-top: 1px solid var(--seeds-color-gray-450);
+  padding-top: var(--seeds-s9);
+}
diff --git a/app/javascript/modules/listings/ListingsGroupHeader.tsx b/app/javascript/modules/listings/ListingsGroupHeader.tsx
@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react"
+import "./ListingsGroupHeader.scss"
+import { useFeatureFlag } from "../../hooks/useFeatureFlag"
+
+export interface ListingsGroupProps {
+  title: string
+  icon?: ReactNode
+  subtitle?: string
+  children: React.ReactNode
+}
+
+const ListingsGroupHeader = ({ title, icon, subtitle, children }: ListingsGroupProps) => {
+  const { unleashFlag: newDirectoryEnabled } = useFeatureFlag(
+    "temp.webapp.directory.listings",
+    false
+  )
+
+  if (!newDirectoryEnabled) {
+    return children
+  }
+
+  return (
+    <>
+      <div className="listings-group__header listings-group__custom">
+        <div className="listings-group__content">
+          <div className="listings-group__icon">{icon}</div>
+          <div className="listings-group__header-group">
+            <h2 className="listings-group__title">{title}</h2>
+            {subtitle && <div className="listings-group__info">{subtitle}</div>}
+          </div>
+        </div>
+      </div>
+      {children}
+    </>
+  )
+}
+
+export { ListingsGroupHeader as default, ListingsGroupHeader }
diff --git a/app/javascript/modules/listings/assets/icon-home-check.tsx b/app/javascript/modules/listings/assets/icon-home-check.tsx
@@ -0,0 +1,12 @@
+import React from "react"
+
+export const IconHomeCheck = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.382 5.86506C17.6945 5.56635 18.2171 5.56727 18.5265 5.86416C18.2171 5.56727 17.6951 5.56582 17.3825 5.86453L6.1856 16.613L17.382 5.86506ZM18.249 24.1118C18.2604 24.0581 18.2721 24.0045 18.2842 23.9511L18.2885 23.9323C18.2749 23.9919 18.2617 24.0518 18.249 24.1118ZM17.1752 5.64766C17.6037 5.2381 18.3088 5.23943 18.7342 5.64772L28.2351 14.767C28.651 14.7226 29.0733 14.6999 29.5008 14.6999C29.9032 14.6999 30.301 14.7201 30.6932 14.7594L19.9167 4.41572C18.8295 3.37218 17.0814 3.37306 15.9934 4.41499L15.9926 4.41575L0.563329 19.227C0.223139 19.5536 0.212094 20.0941 0.538659 20.4343C0.865225 20.7745 1.40574 20.7855 1.74593 20.459L4.17791 18.1244V32.868C4.17791 34.398 5.46064 35.5826 6.97032 35.5826H21.9674C21.352 35.0716 20.7893 34.4992 20.2889 33.8749H14.9323V26.6656C14.9323 26.148 15.3796 25.6588 16.017 25.6588H17.7303C17.7713 25.077 17.8545 24.5067 17.9769 23.9511H16.017C14.5073 23.9511 13.2246 25.1356 13.2246 26.6656V33.8749H6.97032C6.33298 33.8749 5.8856 33.3856 5.8856 32.868V16.4851L17.1752 5.64766ZM24.2274 20.8388C25.6833 19.3829 27.658 18.565 29.717 18.565C31.776 18.565 33.7506 19.3829 35.2066 20.8388C36.6625 22.2948 37.4804 24.2694 37.4804 26.3284C37.4804 27.348 37.2796 28.3575 36.8895 29.2994C36.4993 30.2413 35.9275 31.0971 35.2066 31.818C34.4857 32.5389 33.6298 33.1108 32.6879 33.501C31.746 33.8911 30.7365 34.0919 29.717 34.0919C28.6974 34.0919 27.6879 33.8911 26.746 33.501C25.8041 33.1108 24.9483 32.5389 24.2274 31.818C23.5064 31.0971 22.9346 30.2413 22.5444 29.2994C22.1543 28.3575 21.9535 27.348 21.9535 26.3284C21.9535 24.2694 22.7714 22.2948 24.2274 20.8388ZM28.8853 28.1016L27.3121 26.5283C27.0165 26.2327 26.5372 26.2327 26.2415 26.5283C25.9459 26.8239 25.9459 27.3032 26.2415 27.5989L28.4466 29.804C28.604 29.9613 28.8226 30.0415 29.0444 30.0231C29.2661 30.0048 29.4686 29.8898 29.5979 29.7087L33.2731 24.5634C33.5161 24.2232 33.4373 23.7504 33.0971 23.5074C32.7569 23.2644 32.2841 23.3432 32.0411 23.6834L28.8853 28.1016ZM29.717 16.751C27.1769 16.751 24.7408 17.76 22.9447 19.5562C21.1485 21.3523 20.1395 23.7883 20.1395 26.3284C20.1395 27.5862 20.3872 28.8316 20.8685 29.9936C21.3498 31.1556 22.0553 32.2114 22.9447 33.1007C23.834 33.9901 24.8898 34.6956 26.0518 35.1769C27.2138 35.6582 28.4592 35.9059 29.717 35.9059C30.9747 35.9059 32.2201 35.6582 33.3821 35.1769C34.5441 34.6956 35.5999 33.9901 36.4892 33.1007C37.3786 32.2114 38.0841 31.1556 38.5654 29.9936C39.0467 28.8316 39.2944 27.5862 39.2944 26.3284C39.2944 23.7883 38.2854 21.3523 36.4892 19.5562C34.6931 17.76 32.2571 16.751 29.717 16.751Z"
+      fill="black"
+    />
+  </svg>
+)