From 4b6dafb5485742e03215d22a7c5c6a39f1c2d7c1 Mon Sep 17 00:00:00 2001
From: cliu02 <32694266+cliu02@users.noreply.github.com>
Date: Wed, 29 Jan 2025 10:37:55 -0800
Subject: [PATCH] feat: restore header

---
 app/assets/json/translations/react/en.json    |  5 ++
 .../__snapshots__/BuyHeader.test.tsx.snap     | 38 ++++++++++++
 .../__snapshots__/ForSale.test.tsx.snap       | 38 ++++++++++++
 app/javascript/modules/listings/BuyHeader.tsx | 62 ++++++++++++++-----
 4 files changed, 128 insertions(+), 15 deletions(-)

diff --git a/app/assets/json/translations/react/en.json b/app/assets/json/translations/react/en.json
index 7f91a0ccac..473c65877b 100644
--- a/app/assets/json/translations/react/en.json
+++ b/app/assets/json/translations/react/en.json
@@ -1565,6 +1565,11 @@
   "saleDirectory.callout.citySecondLoan": "City Second Loan Program",
   "saleDirectory.callout.firstComeFirstServed": "First come, first served",
   "saleDirectory.callout.title": "Find more listings on our website:",
+  "saleDirectory.dalp.content": "Get a loan up to $500,000 to buy a home through the 2025 Downpayment Assistance Loan Program (DALP).",
+  "saleDirectory.dalp.link": "<a href='%{url}' target='_blank'>Learn more about DALP and how to apply</a>",
+  "saleDirectory.dalp.subcontent": "Apply between March 4 and June 2, 2025",
+  "saleDirectory.dalp.subtitle": "Application dates",
+  "saleDirectory.dalp.title": "Get a down payment loan",
   "saleDirectory.getHelp.dalpProgramInfo": "The 2021 Downpayment Assistance Loan Program (DALP) will begin accepting applications on February 26, 2021.",
   "saleDirectory.getHelp.helpWithDownpayment": "Help with downpayments",
   "saleDirectory.getHelp.learnMoreAndHowToApply": "Learn more about DALP and how to apply on SF.gov",
diff --git a/app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap b/app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap
index 0cbc30e6e7..a51bd75752 100644
--- a/app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap
+++ b/app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap
@@ -111,6 +111,44 @@ exports[`BuyHeader renders BuyHeader component 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="buy-header_right_col"
+        >
+          <div
+            class="md:bg-white md:p-4"
+          >
+            <h2
+              class="text__underline-weighted mb-5"
+            >
+              Get a down payment loan
+            </h2>
+            <p
+              class="mb-4"
+            >
+              Get a loan up to $500,000 to buy a home through the 2025 Downpayment Assistance Loan Program (DALP).
+            </p>
+            <p
+              class="font-bold"
+            >
+              Application dates
+            </p>
+            <p
+              class="mb-4"
+            >
+              Apply between March 4 and June 2, 2025
+            </p>
+            <p
+              class="mb-4"
+            >
+              <a
+                href="https://www.sf.gov/apply-downpayment-loan-buy-market-rate-home"
+                target="_blank"
+              >
+                Learn more about DALP and how to apply
+              </a>
+            </p>
+          </div>
+        </div>
       </div>
     </hgroup>
   </header>
diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
index 21f5ff8085..8bf80b7431 100644
--- a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
+++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
@@ -337,6 +337,44 @@ exports[`For Sale renders ForSale component 1`] = `
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="buy-header_right_col"
+                  >
+                    <div
+                      class="md:bg-white md:p-4"
+                    >
+                      <h2
+                        class="text__underline-weighted mb-5"
+                      >
+                        Get a down payment loan
+                      </h2>
+                      <p
+                        class="mb-4"
+                      >
+                        Get a loan up to $500,000 to buy a home through the 2025 Downpayment Assistance Loan Program (DALP).
+                      </p>
+                      <p
+                        class="font-bold"
+                      >
+                        Application dates
+                      </p>
+                      <p
+                        class="mb-4"
+                      >
+                        Apply between March 4 and June 2, 2025
+                      </p>
+                      <p
+                        class="mb-4"
+                      >
+                        <a
+                          href="https://www.sf.gov/apply-downpayment-loan-buy-market-rate-home"
+                          target="_blank"
+                        >
+                          Learn more about DALP and how to apply
+                        </a>
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </hgroup>
             </header>
diff --git a/app/javascript/modules/listings/BuyHeader.tsx b/app/javascript/modules/listings/BuyHeader.tsx
index bd8c859861..5e4d382f25 100644
--- a/app/javascript/modules/listings/BuyHeader.tsx
+++ b/app/javascript/modules/listings/BuyHeader.tsx
@@ -2,22 +2,54 @@ import { Heading, PageHeader, t } from "@bloom-housing/ui-components"
 import React from "react"
 import "./BuyHeader.scss"
 import { BeforeApplyingForSale, BeforeApplyingType } from "../../components/BeforeApplyingForSale"
+import { renderInlineMarkup } from "../../util/languageUtil"
+import { useFeatureFlag } from "../../hooks/useFeatureFlag"
 
-const BuyHeader = () => (
-  <PageHeader className="buy-header">
-    <div className="buy-header_columns">
-      <Heading className="buy-header_title buy-header_left_col">{t("saleDirectory.title")}</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>
-      </div>
-      <div className="buy-header_left_col">
-        <BeforeApplyingForSale beforeApplyingType={BeforeApplyingType.DIRECTORY} />
-      </div>
+const DalpHeader = () => {
+  return (
+    <div className="md:bg-white md:p-4">
+      <Heading styleType="underlineWeighted" className="mb-5" priority={2}>
+        {t("saleDirectory.dalp.title")}
+      </Heading>
+      <p className="mb-4">{t("saleDirectory.dalp.content")}</p>
+      <p className="font-bold">{t("saleDirectory.dalp.subtitle")}</p>
+      <p className="mb-4">{t("saleDirectory.dalp.subcontent")}</p>
+      <p className="mb-4">
+        {renderInlineMarkup(
+          t("saleDirectory.dalp.link", {
+            url: "https://www.sf.gov/apply-downpayment-loan-buy-market-rate-home",
+          })
+        )}
+      </p>
     </div>
-  </PageHeader>
-)
+  )
+}
+
+const BuyHeader = () => {
+  const { unleashFlag: dalpDirectoryEnabled } = useFeatureFlag("temp.webapp.directory.dalp", false)
+  return (
+    <PageHeader className="buy-header">
+      <div className="buy-header_columns">
+        <Heading className="buy-header_title buy-header_left_col">
+          {t("saleDirectory.title")}
+        </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>
+        </div>
+        <div className="buy-header_left_col">
+          <BeforeApplyingForSale beforeApplyingType={BeforeApplyingType.DIRECTORY} />
+        </div>
+        {dalpDirectoryEnabled && (
+          <div className="buy-header_right_col">
+            <DalpHeader />
+          </div>
+        )}
+      </div>
+    </PageHeader>
+  )
+}
 
 export default BuyHeader