fix: DAH-2948 put change behind feature flag (#2411)

SFDigitalServices · Nov 13, 2024 · acedf0f · acedf0f
1 parent e993e77
commit acedf0f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
@@ -342,7 +342,7 @@ exports[`For Sale renders ForSale component 1`] = `
             id="listing-results"
           >
             <div
-              class="bg-primary-darker sale-directory"
+              class="bg-primary-darker "
             >
               <div
                 class="max-w-5xl mx-auto p-2 md:p-4"
@@ -367,7 +367,14 @@ exports[`For Sale renders ForSale component 1`] = `
                     class="action-block__actions"
                   >
                     <a
-                      class="button ml-8"
+                      class="button"
+                      href="https://sfmohcd.org/current-bmr-homeownership-listings"
+                      target="_self"
+                    >
+                      First come, first served
+                    </a>
+                    <a
+                      class="button "
                       href="https://sfmohcd.org/current-listings-city-second-program"
                       target="_self"
                     >

diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react"
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react"
 import { LoadingOverlay, StackedTableRow } from "@bloom-housing/ui-components"
 
 import type RailsRentalListing from "../../api/types/rails/listings/RailsRentalListing"
@@ -28,7 +28,7 @@ interface RentalDirectoryProps {
     setFilters: Dispatch<SetStateAction<EligibilityFilters>>,
     match: boolean
   ) => JSX.Element
-  findMoreActionBlock: () => JSX.Element
+  findMoreActionBlock: ReactNode
 }
 
 export const GenericDirectory = (props: RentalDirectoryProps) => {
@@ -89,7 +89,7 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
                   hasFiltersSet,
                   isSalesFcfsEnabled
                 )}
-              {props.findMoreActionBlock()}
+              {props.findMoreActionBlock}
               {filters &&
                 additionalView(
                   listings.additional,

diff --git a/app/javascript/pages/listings/for-rent.tsx b/app/javascript/pages/listings/for-rent.tsx
@@ -136,7 +136,7 @@ const RentDirectory = () => {
         filters={hasSetEligibilityFilters() ? eligibilityFilters : null}
         getSummaryTable={getForRentSummaryTable}
         getPageHeader={getRentalHeader}
-        findMoreActionBlock={getFindMoreActionBlock}
+        findMoreActionBlock={getFindMoreActionBlock()}
       />
     </Layout>
   )

diff --git a/app/javascript/pages/listings/for-sale.tsx b/app/javascript/pages/listings/for-sale.tsx
@@ -21,6 +21,7 @@ import {
 } from "../../modules/listings/DirectoryHelpers"
 import BuyHeader from "../../modules/listings/BuyHeader"
 import { defaultIfNotTranslated } from "../../util/languageUtil"
+import { useFeatureFlag } from "../../hooks/useFeatureFlag"
 
 const getForSaleSummaryTable = (listing: RailsSaleListing) => {
   const summary = listing.unitSummaries.general ?? listing.unitSummaries.reserved
@@ -86,18 +87,29 @@ const getBuyHeader = (
   )
 }
 
-const getFindMoreActionBlock = () => {
+const getFindMoreActionBlock = (isSalesFcfsEnabled: boolean) => {
   return (
     <>
-      <div className="bg-primary-darker sale-directory">
+      <div className={`bg-primary-darker ${isSalesFcfsEnabled ? "sale-directory" : ""}`}>
         <div className="max-w-5xl mx-auto p-2 md:p-4">
           <ActionBlock
             header={<Heading priority={2}>{t("saleDirectory.callout.title")}</Heading>}
             background="primary-darker"
             layout={ActionBlockLayout.inline}
             actions={[
+              !isSalesFcfsEnabled && (
+                <Link
+                  className="button"
+                  key="action-1"
+                  external
+                  href={"https://sfmohcd.org/current-bmr-homeownership-listings"}
+                >
+                  {t("saleDirectory.callout.firstComeFirstServed")}
+                </Link>
+              ),
               <Link
-                className="button ml-8"
+                className={`button ${isSalesFcfsEnabled ? "ml-8" : ""}`}
+                key={isSalesFcfsEnabled ? "action-1" : "action-2"}
                 external
                 href={"https://sfmohcd.org/current-listings-city-second-program"}
               >
@@ -110,7 +122,10 @@ const getFindMoreActionBlock = () => {
     </>
   )
 }
+
 const SaleDirectory = () => {
+  const { unleashFlag: isSalesFcfsEnabled } = useFeatureFlag("FCFS", false)
+
   const eligibilityFilters: EligibilityFilters = JSON.parse(
     localStorage.getItem("ngStorage-eligibility_filters")
   )
@@ -124,6 +139,7 @@ const SaleDirectory = () => {
       eligibilityFilters?.income_total
     )
   }
+
   return (
     <Layout title={t("pageTitle.saleListings")}>
       <GenericDirectory
@@ -132,7 +148,7 @@ const SaleDirectory = () => {
         filters={hasSetEligibilityFilters() ? eligibilityFilters : null}
         getSummaryTable={getForSaleSummaryTable}
         getPageHeader={getBuyHeader}
-        findMoreActionBlock={getFindMoreActionBlock}
+        findMoreActionBlock={getFindMoreActionBlock(isSalesFcfsEnabled)}
       />
     </Layout>
   )