Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: DAH-3102 DALP on Sales Directory #2524

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+128 −15
Open

feat: DAH-3102 DALP on Sales Directory #2524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b6dafb
feat: restore header
cliu02 Jan 29, 2025
435a95b
Merge branch 'main' into DAH-3102-dalp-directory
cliu02 Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/assets/json/translations/react/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
38 changes: 38 additions & 0 deletions app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
38 changes: 38 additions & 0 deletions app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
62 changes: 47 additions & 15 deletions app/javascript/modules/listings/BuyHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: waiting on decision for how to implement non-English sf.gov link redirects

})
)}
</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
Loading