Skip to content

Commit

Permalink
feat: application confirmation styling updates based on design QA (#4173
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@jaredcwhite
jaredcwhite authored Jul 3, 2024
1 parent 97b1c85 commit a9f0ac8
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 75 deletions.
148 changes: 73 additions & 75 deletions sites/public/src/pages/applications/review/confirmation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useContext, useEffect, useMemo } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import Markdown from "markdown-to-jsx"
import { t, ApplicationTimeline } from "@bloom-housing/ui-components"
Expand All @@ -9,8 +8,9 @@ import {
PageView,
pushGtmEvent,
AuthContext,
BloomCard,
} from "@bloom-housing/shared-helpers"
import { Button, Card, Heading } from "@bloom-housing/ui-seeds"
import { Button, Heading, Link } from "@bloom-housing/ui-seeds"
import FormsLayout from "../../../layouts/forms"
import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext"
import { UserStatus } from "../../../lib/constants"
Expand Down Expand Up @@ -52,88 +52,86 @@ const ApplicationConfirmation = () => {

return (
<FormsLayout>
<Card spacing={"lg"}>
<CardSection divider={"flush"}>
<Heading priority={1} size={"2xl"}>
{t("application.review.confirmation.title")}
{listing?.name}
</Heading>
</CardSection>

{imageUrl && <img src={imageUrl} alt={listing?.name} />}

<CardSection divider={"flush"}>
<h2 className="text__caps-spaced">
{t("application.review.confirmation.lotteryNumber")}
</h2>

<p
id="confirmationCode"
className="font-serif text-2xl mb-1"
data-testid={"app-confirmation-id"}
>
{application.confirmationCode || application.id}
</p>
<p className="field-note">{t("application.review.confirmation.pleaseWriteNumber")}</p>
</CardSection>

<CardSection divider={"inset"}>
<div className="markdown markdown-informational">
<ApplicationTimeline />

<Markdown options={{ disableParsingRawHTML: true }}>{content.text}</Markdown>
</div>
</CardSection>

<CardSection divider={"inset"}>
<div className="markdown markdown-informational">
<Markdown options={{ disableParsingRawHTML: true }}>
{t("application.review.confirmation.needToMakeUpdates", {
agentName: listing?.leasingAgentName || "",
agentPhone: listing?.leasingAgentPhone || "",
agentEmail: listing?.leasingAgentEmail || "",
agentOfficeHours: listing?.leasingAgentOfficeHours || "",
})}
</Markdown>
</div>
</CardSection>

{initialStateLoaded && !profile && (
<CardSection divider={"flush"} className={"border-none"}>
<BloomCard>
<>
<CardSection divider={"flush"}>
<Heading priority={1} size={"2xl"}>
{t("application.review.confirmation.title")}
{listing?.name}
</Heading>
</CardSection>

{imageUrl && <img src={imageUrl} alt={listing?.name} />}

<CardSection divider={"inset"}>
<Heading priority={2} size="lg">
{t("application.review.confirmation.lotteryNumber")}
</Heading>

<p
id="confirmationCode"
className="font-serif text-2xl my-3"
data-testid={"app-confirmation-id"}
>
{application.confirmationCode || application.id}
</p>
<p>{t("application.review.confirmation.pleaseWriteNumber")}</p>
</CardSection>

<CardSection divider={"inset"}>
<div className="markdown markdown-informational">
<ApplicationTimeline />

<Markdown options={{ disableParsingRawHTML: true }}>{content.text}</Markdown>
</div>
</CardSection>

<CardSection divider={"inset"}>
<div className="markdown markdown-informational">
<Markdown options={{ disableParsingRawHTML: true }}>
{t("application.review.confirmation.createAccount")}
{t("application.review.confirmation.needToMakeUpdates", {
agentName: listing?.leasingAgentName || "",
agentPhone: listing?.leasingAgentPhone || "",
agentEmail: listing?.leasingAgentEmail || "",
agentOfficeHours: listing?.leasingAgentOfficeHours || "",
})}
</Markdown>
</div>
</CardSection>
)}

{initialStateLoaded && !profile && (
<CardSection className={"bg-primary-lighter border-none"} divider={"flush"}>
<Button
variant={"primary"}
onClick={() => {
void router.push("/create-account")
}}
id={"app-confirmation-create-account"}
>
{t("account.createAccount")}
</Button>
</CardSection>
)}

<CardSection divider={"flush"}>
<span className="underline text-sm" data-testid={"app-confirmation-browse"}>
{initialStateLoaded && !profile && (
<CardSection divider={"flush"} className={"border-none"}>
<div className="markdown markdown-informational">
<Markdown options={{ disableParsingRawHTML: true }}>
{t("application.review.confirmation.createAccount")}
</Markdown>
</div>
</CardSection>
)}

{initialStateLoaded && !profile && (
<CardSection className={"bg-primary-lighter border-none"} divider={"flush"}>
<Button
variant={"primary"}
onClick={() => {
void router.push("/create-account")
}}
id={"app-confirmation-create-account"}
>
{t("account.createAccount")}
</Button>
</CardSection>
)}

<CardSection divider={"flush"}>
<Link href="/listings">{t("application.review.confirmation.browseMore")}</Link>
</span>
</CardSection>
</CardSection>

<CardSection>
<span className="underline text-sm" data-testid={"app-confirmation-print"}>
<CardSection>
<Link href="/applications/view">{t("application.review.confirmation.print")}</Link>
</span>
</CardSection>
</Card>
</CardSection>
</>
</BloomCard>
</FormsLayout>
)
}
Expand Down
55 changes: 55 additions & 0 deletions sites/public/styles/overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,59 @@
.label.text__caps-spaced {
margin-bottom: var(--seeds-s1);
}

.markdown-informational {
font-size: var(--seeds-type-body-size);

h3 {
font-family: var(--seeds-font-alt-sans);
font-size: var(--seeds-type-heading-size-lg);
font-weight: var(--seeds-font-weight-semibold);
}

ul:not(.application-timeline) > li:last-of-type {
margin-bottom: 0;
}
}

ul.application-timeline {
.ui-icon > svg {
margin-top: 0 !important;
}

.progress-nav__dot-item > p {
padding-top: 2.65rem;
text-align: left;
font-weight: normal !important;
}

.progress-nav__dot-item {
text-align: left;
}

.progress-nav__dot-item::before {
left: 1rem;
}

.progress-nav__dot-item::after {
top: 0.9rem;
height: 3px;
}

.progress-nav__dot-item.is-active::before {
background-color: var(--seeds-color-success-dark);
}

.progress-nav__dot-item:first-of-type::after {
left: 0;
}

.progress-nav__dot-item:last-of-type::after {
display: none;
}

.progress-nav__dot-item .absolute {
margin-left: 0.6rem;
}
}
}

0 comments on commit a9f0ac8

Please sign in to comment.