fix: DAH-3125 directory page phase 1.5 fix position of where button jumps to

app/assets/json/translations/react/en.json

@@ -1588,6 +1588,7 @@
   "saleDirectory.getHelp.visitMohcdPrograms": "Visit the MOHCD Affordable Homebuyer Programs page to learn more.",
   "saleDirectory.hoaDues": "HOA Dues",
   "saleDirectory.price": "Sales Price",
+  "saleDirectory.seeHomesForSale": "See homes for sale",
   "saleDirectory.seeTheListings": "See the listings",
   "saleDirectory.title": "Buy affordable housing",
   "seeTheUnit.makeAnAppointment": "Make an appointment",

app/javascript/__tests__/modules/listings/BuyHeader.test.tsx

@@ -1,9 +1,36 @@
 import React from "react"
 import { render } from "@testing-library/react"
 import BuyHeader from "../../../modules/listings/BuyHeader"
+import { useFeatureFlag } from "../../../hooks/useFeatureFlag"
+
+jest.mock("../../../hooks/useFeatureFlag", () => ({
+  useFeatureFlag: jest.fn(),
+}))
 
 describe("BuyHeader", () => {
-  it("renders BuyHeader component", () => {
+  it("renders BuyHeader component with See the listings button", async () => {
+    ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true, unleashFlag: false })
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      return {
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }
+    })
+
+    const { findByText, asFragment } = render(<BuyHeader />)
+
+    expect(asFragment()).toMatchSnapshot()
+    expect(await findByText("See the listings")).toBeDefined()
+  })
+
+  it("renders BuyHeader component with See homes for sale button", async () => {
+    ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true, unleashFlag: true })
     window.matchMedia = jest.fn().mockImplementation((query) => {
       return {
         matches: true,
@@ -17,8 +44,9 @@ describe("BuyHeader", () => {
       }
     })
 
-    const { asFragment } = render(<BuyHeader />)
+    const { findByText, asFragment } = render(<BuyHeader />)
 
     expect(asFragment()).toMatchSnapshot()
+    expect(await findByText("See homes for sale")).toBeDefined()
   })
 })

app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BuyHeader renders BuyHeader component 1`] = `
+exports[`BuyHeader renders BuyHeader component with See homes for sale button 1`] = `
 <DocumentFragment>
   <header
     class="page-header buy-header"
@@ -21,9 +21,9 @@ exports[`BuyHeader renders BuyHeader component 1`] = `
         >
           <a
             class="button is-primary is-fullwidth"
-            href="#listing-results"
+            href="#nav-bar-container"
           >
-            See the listings
+            See homes for sale
           </a>
         </div>
         <div
@@ -154,3 +154,120 @@ exports[`BuyHeader renders BuyHeader component 1`] = `
   </header>
 </DocumentFragment>
 `;
+
+exports[`BuyHeader renders BuyHeader component with See the listings button 1`] = `
+<DocumentFragment>
+  <header
+    class="page-header buy-header"
+  >
+    <hgroup
+      class="page-header__group"
+    >
+      <div
+        class="buy-header_columns"
+      >
+        <h1
+          class="buy-header_title buy-header_left_col"
+        >
+          Buy affordable housing
+        </h1>
+        <div
+          class="mb-8 buy-header_right_col"
+        >
+          <a
+            class="button is-primary is-fullwidth"
+            href="#nav-bar-container"
+          >
+            See the listings
+          </a>
+        </div>
+        <div
+          class="buy-header_left_col"
+        >
+          <div
+            class="mb-8"
+          >
+            <h2
+              class="text__underline-weighted mb-5 text-gray-750"
+            >
+              Before applying
+            </h2>
+            <p
+              class="text-gray-750"
+            >
+              Make sure you:
+            </p>
+            <ol
+              class="numbered-list my-5"
+            >
+              <li
+                class="text-gray-750 primary-lighter-markup-link"
+              >
+                Haven't owned residential property in the past 3 years
+              </li>
+              <li
+                class="text-gray-750 primary-lighter-markup-link"
+              >
+                <span>
+                  Meet our 
+                  <a
+                    href="https://sf.gov/determine-if-you-can-buy-affordable-housing-program"
+                    target="_blank"
+                  >
+                    income requirements
+                  </a>
+                </span>
+              </li>
+              <li
+                class="text-gray-750 primary-lighter-markup-link"
+              >
+                <span>
+                  Complete 
+                  <a
+                    href="https://sf.gov/sign-complete-homebuyer-education"
+                    target="_blank"
+                  >
+                    homebuyer education
+                  </a>
+                </span>
+              </li>
+              <li
+                class="text-gray-750 primary-lighter-markup-link"
+              >
+                <span>
+                  Get pre-approved for a mortgage loan by a 
+                  <a
+                    href="https://sf.gov/reports/october-2023/find-lender-below-market-rate-program"
+                    target="_blank"
+                  >
+                    lender on our list
+                  </a>
+                </span>
+              </li>
+              <li
+                class="text-gray-750 primary-lighter-markup-link"
+              >
+                Have enough in savings for closing costs and downpayment
+              </li>
+            </ol>
+            <div
+              class="text-gray-750 primary-lighter-markup-link-desktop"
+            >
+              <span>
+                Read 
+                <a
+                  href="https://sf.gov/determine-if-you-can-buy-affordable-housing-program"
+                  target="_blank"
+                >
+                  our full list of requirements
+                </a>
+                 for more details.
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </hgroup>
+  </header>
+</DocumentFragment>
+`;

app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap

@@ -249,9 +249,9 @@ exports[`For Sale renders ForSale component 1`] = `
                   >
                     <a
                       class="button is-primary is-fullwidth"
-                      href="#listing-results"
+                      href="#nav-bar-container"
                     >
-                      See the listings
+                      See homes for sale
                     </a>
                   </div>
                   <div

app/javascript/modules/listings/BuyHeader.tsx

@@ -27,6 +27,10 @@ const DalpHeader = () => {
 
 const BuyHeader = () => {
   const { unleashFlag: dalpDirectoryEnabled } = useFeatureFlag("temp.webapp.directory.dalp", false)
+  const { unleashFlag: translationsReady } = useFeatureFlag(
+    "temp.webapp.listings.sales.seeHomesForSale",
+    false
+  )
   return (
     <PageHeader className="buy-header">
       <div className="buy-header_columns">
@@ -35,8 +39,10 @@ const BuyHeader = () => {
         </Heading>
         <div className="mb-8 buy-header_right_col">
           {/* TODO: Switch this back to LinkButton or button once this issue is resolvedhttps://github.com/bloom-housing/bloom/issues/2324 */}
-          <a href="#listing-results" className="button is-primary is-fullwidth">
-            {t("saleDirectory.seeTheListings")}
+          <a href="#nav-bar-container" className="button is-primary is-fullwidth">
+            {translationsReady
+              ? t("saleDirectory.seeHomesForSale")
+              : t("saleDirectory.seeTheListings")}
           </a>
         </div>
         <div className="buy-header_left_col">