@bloom-housing/ui-components 4.2.2-alpha.23 → 4.2.2-alpha.26

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.25...@bloom-housing/ui-components@4.2.2-alpha.26) (2022-05-05)
+
+
+### Bug Fixes
+
+* use appropriate copy for FCFS vs Lottery in Application Confirmation screen ([#2702](https://github.com/bloom-housing/bloom/issues/2702)) ([5289504](https://github.com/bloom-housing/bloom/commit/52895044cba64eeb7789c68f0a5eb957785055b5))
+
+
+
+
+
+## [4.2.2-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.24...@bloom-housing/ui-components@4.2.2-alpha.25) (2022-05-04)
+
+
+### Bug Fixes
+
+* footer alignment issue with overflowing links ([#2713](https://github.com/bloom-housing/bloom/issues/2713)) ([b87be1d](https://github.com/bloom-housing/bloom/commit/b87be1da10d59df2616f5df51629a8201baa6f86))
+
+
+
+
+
+## [4.2.2-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.23...@bloom-housing/ui-components@4.2.2-alpha.24) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove backend dependencies from sidebar application components ([#2675](https://github.com/bloom-housing/bloom/issues/2675)) ([d2ebf87](https://github.com/bloom-housing/bloom/commit/d2ebf87c34af3f5b6168fa4e08663fea0a4a872c))
+
+
+### BREAKING CHANGES
+
+* the LeasingAgent component has been renamed to Contact with a new generalized prop set, the SidebarAddress component has been renamed to ContactAddress with a new generalized prop set
+
+
+
+
+
 ## [4.2.2-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.22...@bloom-housing/ui-components@4.2.2-alpha.23) (2022-05-04)
 
 

package/index.ts

@@ -52,23 +52,24 @@ export * from "./src/headers/SiteHeader"
 export * from "./src/headers/Heading"
 
 /* Helpers */
-export * from "./src/helpers/address"
 export * from "./src/helpers/capitalize"
 export * from "./src/helpers/dateToString"
+export * from "./src/helpers/debounce"
 export * from "./src/helpers/formOptions"
+export * from "./src/helpers/formatYesNoLabel"
+export * from "./src/helpers/getTranslationWithArguments"
 export * from "./src/helpers/links"
 export * from "./src/helpers/mergeDeep"
+export * from "./src/helpers/MultiLineAddress"
 export * from "./src/helpers/numberOrdinal"
-export * from "./src/helpers/translator"
-export * from "./src/helpers/debounce"
-export * from "./src/helpers/validators"
-export * from "./src/helpers/formatYesNoLabel"
-export * from "./src/helpers/getTranslationWithArguments"
+export * from "./src/helpers/OneLineAddress"
 export * from "./src/helpers/preferences"
 export * from "./src/helpers/resolveObject"
+export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/translator"
 export * from "./src/helpers/useIntersect"
 export * from "./src/helpers/useMutate"
-export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/validators"
 
 /* Icons */
 export * from "./src/icons/HeaderBadge"
@@ -108,12 +109,12 @@ export * from "./src/page_components/listing/ListingMap"
 export * from "./src/page_components/listing/ListingsGroup"
 export * from "./src/page_components/listing/UnitTables"
 export * from "./src/page_components/listing/listing_sidebar/GetApplication"
-export * from "./src/page_components/listing/listing_sidebar/LeasingAgent"
+export * from "./src/page_components/listing/listing_sidebar/Contact"
 export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
 export * from "./src/page_components/listing/listing_sidebar/NumberedHeader"
 export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
-export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
+export * from "./src/page_components/listing/listing_sidebar/ContactAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
 export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
 export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.23",
+  "version": "4.2.2-alpha.26",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -102,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "004be94722a0b7bccd6fa7528f2a0be2a5e8529b"
+  "gitHead": "401d36c47d66757a78c54681ed0adce78e8ebc0c"
 }

package/src/global/text.scss

@@ -88,7 +88,7 @@ h1.title {
 }
 
 .text-caps-tiny {
-  @apply mb-4;
+  @apply mb-3;
   @apply text-gray-750;
   @apply uppercase;
   @apply font-sans;

package/src/headers/Heading.tsx

@@ -16,6 +16,7 @@ const HeaderStyleMap = {
   tableSubheader: "table-subheader",
   sidebarHeader: "text-caps-underline",
   categoryHeader: "category-header",
+  sidebarSubHeader: "text-caps-tiny",
 }
 
 const Heading = (props: HeadingProps) => {

package/src/helpers/MultiLineAddress.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+export interface Address {
+  city?: string
+  latitude?: number
+  longitude?: number
+  placeName?: string
+  state?: string
+  street2?: string
+  street?: string
+  zipCode?: string
+}
+
+export interface MultiLineAddressProps {
+  address: Address
+}
+
+const MultiLineAddress = ({ address }: MultiLineAddressProps) => {
+  if (!address) return null
+
+  return (
+    <>
+      {address.placeName && (
+        <>
+          {address.placeName}
+          <br />
+        </>
+      )}
+      {address.street} {address.street2}
+      {(address.street || address.street2) && <br />}
+      {address.city}
+      {address.city && (address.state || address.zipCode) && ","} {address.state} {address.zipCode}
+    </>
+  )
+}
+
+export { MultiLineAddress as default, MultiLineAddress }

package/src/helpers/OneLineAddress.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Address } from "./MultiLineAddress"
+
+export interface OneLineAddressProps {
+  address: Address
+}
+
+const OneLineAddress = ({ address }: OneLineAddressProps) => {
+  if (!address) return null
+
+  return (
+    <>
+      {address.street} {address.street2}
+      {address.street && `, `}
+      {address.city}
+      {address.city && (address.state || address.zipCode) && ","} {address.state} {address.zipCode}
+    </>
+  )
+}
+
+export { OneLineAddress as default, OneLineAddress }

package/src/locales/general.json

@@ -375,7 +375,10 @@
   "application.review.confirmation.whatExpectFirstParagraph.refer": "Please refer to the listing for the lottery results date.",
   "application.review.confirmation.whatExpectSecondparagraph": "Applicants will be contacted in order until vacancies are filled. Should your application be chosen, be prepared to fill out a more detailed application and provide required supporting documents.",
   "application.review.confirmation.whatExpectTitle": "What to expect next",
-  "application.review.confirmation.whatHappensNext": "### What happens next?\n\n* After all applications are submitted, the property manager will begin processing applications.\n\n* Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled\n\n* If you are contacted for an interview, you will need to fill out a more detailed application and provide supporting documents.",
+  "application.review.confirmation.whatHappensNext": "### What happens next?\n\n* After all applications are submitted, the property manager will begin processing applications.\n\n* %{reviewOrder}\n\n* If you are contacted for an interview, you will need to fill out a more detailed application and provide supporting documents.",
+  "application.review.confirmation.eligibleApplicants.FCFS": "Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled",
+  "application.review.confirmation.eligibleApplicants.lotteryDate": "The lottery will be held on **%{lotteryDate}**.",
+  "application.review.confirmation.eligibleApplicants.lottery": "Eligible applicants will be contacted by the agent in lottery rank order until vacancies are filled",
   "application.review.demographics.ethnicityLabel": "Which best describes your ethnicity?",
   "application.review.demographics.ethnicityOptions.hispanicLatino": "Hispanic / Latino",
   "application.review.demographics.ethnicityOptions.notHispanicLatino": "Not Hispanic / Latino",

package/src/navigation/FooterNav.scss

@@ -22,26 +22,30 @@
   .footer-sock__inner {
     @apply max-w-5xl;
     @apply m-auto;
-
+    justify-content: space-between;
     @screen lg {
       @apply flex;
     }
   }
 
   .footer-copyright {
+    width: auto;
     @screen lg {
-      @apply w-6/12;
       @apply text-left;
     }
   }
 
   .footer-nav {
     @apply mt-5;
+    width: auto;
 
     @screen lg {
       @apply mt-0;
-      @apply w-6/12;
       @apply text-right;
+      display: flex;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      justify-content: end;
     }
   }
 }

package/src/page_components/listing/ListingMap.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useCallback, useEffect, useMemo } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import "mapbox-gl/dist/mapbox-gl.css"
 import MapGL, { Marker } from "react-map-gl"
 
 import "./ListingMap.scss"
-import { MultiLineAddress, Address } from "../../helpers/address"
+import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
 import { useIntersect } from "../../.."
+import { Heading } from "../../headers/Heading"
 
 export interface ListingMapProps {
   address?: Address
@@ -107,7 +108,11 @@ const ListingMap = (props: ListingMapProps) => {
   return (
     <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
-        {props.listingName && <h3 className="text-caps-tiny">{props.listingName}</h3>}
+        {props.listingName && (
+          <Heading priority={3} style={"sidebarSubHeader"}>
+            {props.listingName}
+          </Heading>
+        )}
         <MultiLineAddress address={props.address} />
       </div>
       {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (

package/src/page_components/listing/listing_sidebar/Contact.tsx

@@ -0,0 +1,110 @@
+import * as React from "react"
+import { ContactAddress } from "./ContactAddress"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { Heading } from "../../../headers/Heading"
+
+export interface ContactProps {
+  /** Any number of text sections rendered after the contact information */
+  additionalInformation?: { title: string; content: string | React.ReactNode }[]
+  /** The contact's address */
+  contactAddress?: Address
+  /** The contact's company and website */
+  contactCompany?: { name: string; website: string }
+  /** The contact's email */
+  contactEmail?: string
+  /** The contact's name */
+  contactName?: string
+  /** The contact's phone number */
+  contactPhoneNumber?: string
+  /** Additional information pertaining to the contact's phone number */
+  contactPhoneNumberNote?: string
+  /** The contact's title */
+  contactTitle?: string
+  /** The text for the section's header */
+  sectionTitle: string
+  strings: { email?: string; getDirections: string; website?: string }
+}
+
+/** Displays information about a contact, including their address, contact information, and notes */
+const Contact = ({
+  additionalInformation,
+  contactAddress,
+  contactCompany,
+  contactEmail,
+  contactName,
+  contactPhoneNumber,
+  contactPhoneNumberNote,
+  contactTitle,
+  sectionTitle,
+  strings,
+}: ContactProps) => {
+  const formattedPhoneLink = contactPhoneNumber
+    ? `tel:${contactPhoneNumber.replace(/[-()]/g, "")}`
+    : undefined
+  const formattedCompanyWebsite =
+    contactCompany?.website && !contactCompany?.website.startsWith("http")
+      ? `http://${contactCompany?.website}`
+      : contactCompany?.website
+
+  return (
+    <section className="aside-block">
+      <Heading priority={4} style={"sidebarHeader"}>
+        {sectionTitle}
+      </Heading>
+
+      {contactName && <p className="text-xl">{contactName}</p>}
+      {contactTitle && <p className="text-gray-700">{contactTitle}</p>}
+      {contactCompany?.name && <p className="text-gray-700">{contactCompany.name}</p>}
+
+      {contactPhoneNumber && (
+        <>
+          <p className="mt-3">
+            <a href={formattedPhoneLink}>
+              <Icon symbol="phone" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+              {contactPhoneNumber}
+            </a>
+          </p>
+          {contactPhoneNumberNote && (
+            <p className="text-sm text-gray-700">{contactPhoneNumberNote}</p>
+          )}
+        </>
+      )}
+
+      {contactEmail && (
+        <p className="my-3">
+          <a href={`mailto:${contactEmail}`}>
+            <Icon symbol="mail" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.email && strings?.email}
+          </a>
+        </p>
+      )}
+
+      {formattedCompanyWebsite && (
+        <p className="my-3">
+          <a href={formattedCompanyWebsite} target="_blank" rel="noreferrer noopener">
+            <Icon symbol="globe" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.website && strings?.website}
+          </a>
+        </p>
+      )}
+
+      {contactAddress && (
+        <ContactAddress address={contactAddress} mapString={strings.getDirections} />
+      )}
+
+      {additionalInformation?.map((info) => {
+        return (
+          <>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {info.title}
+            </Heading>
+            <div className="text-gray-800 text-tiny markdown">{info.content}</div>
+          </>
+        )
+      })}
+    </section>
+  )
+}
+
+export { Contact as default, Contact }

package/src/page_components/listing/listing_sidebar/ContactAddress.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import ReactDOMServer from "react-dom/server"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { MultiLineAddress, Address } from "../../../helpers/MultiLineAddress"
+import { OneLineAddress } from "../../../helpers/OneLineAddress"
+
+export interface ContactAddressProps {
+  /** An address */
+  address: Address
+  /** A string for the map link */
+  mapString: string
+}
+
+/** Renders an address followed by a Google Maps link to the address */
+const ContactAddress = ({ address, mapString }: ContactAddressProps) => {
+  if (!address?.street) return null
+
+  const oneLineAddress = <OneLineAddress address={address} />
+  const mainAddress = <MultiLineAddress address={address} />
+  const googleMapsHref =
+    "https://www.google.com/maps/place/" + ReactDOMServer.renderToStaticMarkup(oneLineAddress)
+
+  return (
+    <>
+      <p className="text-gray-700 mb-1">{mainAddress}</p>
+      <p className="mb-4">
+        <a
+          href={googleMapsHref}
+          className="inline-block pt-1"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Icon symbol="map" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+          {mapString}
+        </a>
+      </p>
+    </>
+  )
+}
+
+export { ContactAddress as default, ContactAddress }

package/src/page_components/listing/listing_sidebar/GetApplication.tsx

@@ -3,10 +3,11 @@ import { t } from "../../../helpers/translator"
 import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
+import { Heading } from "../../../headers/Heading"
+import Markdown from "markdown-to-jsx"
 
 export interface PaperApplication {
   fileURL: string
@@ -14,26 +15,30 @@ export interface PaperApplication {
 }
 
 export interface ApplicationsProps {
-  onlineApplicationURL?: string
+  /** The pickup address for the application */
+  applicationPickUpAddress?: Address
+  /** Office hours for the agent at the pickup address */
+  applicationPickUpAddressOfficeHours?: string
+  /** Whether or not applications are currently open */
   applicationsOpen: boolean
+  /** The date applications open */
   applicationsOpenDate?: string
+  /** The URL for an online applications */
+  onlineApplicationURL?: string
+  /** Any number of paper application objects, including their URL and language */
   paperApplications?: PaperApplication[]
+  /** Whether or not there is a paper application method */
   paperMethod?: boolean
+  /** The date mailed applications must be received by */
   postmarkedApplicationsReceivedByDate?: string
-  applicationPickUpAddressOfficeHours?: string
-  applicationPickUpAddress?: Address
+  /** Whether or not to hide actionable application buttons */
   preview?: boolean
-  listingStatus?: ListingStatus
 }
-
+/** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
   const [showDownload, setShowDownload] = useState(false)
   const toggleDownload = () => setShowDownload(!showDownload)
 
-  if (props.listingStatus === ListingStatus.closed) {
-    return null
-  }
-
   return (
     <section className="aside-block">
       <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
@@ -95,11 +100,26 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <h3 className="text-caps-tiny">{t("listings.apply.pickUpAnApplication")}</h3>
-          <SidebarAddress
+          <Heading priority={3} style={"sidebarSubHeader"}>
+            {t("listings.apply.pickUpAnApplication")}
+          </Heading>
+          <ContactAddress
             address={props.applicationPickUpAddress}
-            officeHours={props.applicationPickUpAddressOfficeHours}
+            mapString={t("t.getDirections")}
           />
+          {props.applicationPickUpAddressOfficeHours && (
+            <>
+              <Heading priority={3} style={"sidebarSubHeader"}>
+                {t("leasingAgent.officeHours")}
+              </Heading>
+              <p className="text-gray-800 text-tiny markdown">
+                <Markdown
+                  children={props.applicationPickUpAddressOfficeHours}
+                  options={{ disableParsingRawHTML: true }}
+                />
+              </p>
+            </>
+          )}
         </>
       )}
     </section>

package/src/page_components/listing/listing_sidebar/SubmitApplication.tsx

@@ -1,78 +1,73 @@
 import * as React from "react"
-import { t } from "../../../helpers/translator"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import Markdown from "markdown-to-jsx"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
-
-export interface PostmarkedApplication {
-  postmarkedApplicationsReceivedByDate: string | null
-  developer: string
-  applicationsDueDate: string | null
-}
+import { Heading } from "../../../headers/Heading"
 
 export interface ApplicationAddressesProps {
-  applicationMailingAddress?: Address
+  /** The dropoff address for paper applications */
   applicationDropOffAddress?: Address
+  /** Office hours for developers at the dropoff address for paper applications */
   applicationDropOffAddressOfficeHours?: string
+  /** The mailing address for paper applications */
+  applicationMailingAddress?: Address
+  /** The application organization, often the developer */
   applicationOrganization?: string
-  postmarkedApplicationData?: PostmarkedApplication
-  listingStatus?: ListingStatus
-}
-
-const SubmitApplication = (props: ApplicationAddressesProps) => {
-  if (
-    props.listingStatus === ListingStatus.closed ||
-    !(props.applicationMailingAddress || props.applicationDropOffAddress)
-  ) {
-    return null
-  }
-
-  const getPostmarkString = () => {
-    const applicationDueDate = props.postmarkedApplicationData?.applicationsDueDate
-    const postmarkReceivedByDate =
-      props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate
-    const developer = props.postmarkedApplicationData?.developer
-    if (applicationDueDate) {
-      return postmarkReceivedByDate
-        ? t("listings.apply.submitPaperDueDatePostMark", {
-            applicationDueDate,
-            postmarkReceivedByDate,
-            developer,
-          })
-        : t("listings.apply.submitPaperDueDateNoPostMark", {
-            applicationDueDate,
-            developer,
-          })
-    } else {
-      return postmarkReceivedByDate
-        ? t("listings.apply.submitPaperNoDueDatePostMark", { postmarkReceivedByDate, developer })
-        : t("listings.apply.submitPaperNoDueDateNoPostMark", { developer })
-    }
+  strings: {
+    postmark?: string
+    mailHeader?: string
+    sectionHeader?: string
+    dropOffHeader?: string
+    officeHoursHeader?: string
+    mapString: string
   }
+}
 
+/** Displays information regarding paper applications, including two sections: (1) how to mail in applications and (2) how to drop off applications */
+const SubmitApplication = ({
+  applicationDropOffAddress,
+  applicationDropOffAddressOfficeHours,
+  applicationMailingAddress,
+  applicationOrganization,
+  strings,
+}: ApplicationAddressesProps) => {
   return (
     <>
       <section className="aside-block is-tinted bg-gray-100">
-        <div className="text-serif-lg">{t("listings.apply.submitAPaperApplication")}</div>
-        {props.applicationMailingAddress && (
+        <div className="text-serif-lg">{strings.sectionHeader}</div>
+        {applicationMailingAddress && (
           <>
-            <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.mailHeader}
+            </Heading>
             <>
-              <p className="text-gray-700">{props.applicationOrganization}</p>
-              <SidebarAddress address={props.applicationMailingAddress} />
+              <p className="text-gray-700">{applicationOrganization}</p>
+              <ContactAddress address={applicationMailingAddress} mapString={strings.mapString} />
             </>
-            <p className="mt-4 text-tiny text-gray-750">{getPostmarkString()}</p>
+            {strings.postmark && <p className="mt-4 text-tiny text-gray-750">{strings.postmark}</p>}
           </>
         )}
-        {props.applicationDropOffAddress && (
+        {applicationDropOffAddress && (
           <>
-            {props.applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
-            <SidebarAddress
-              address={props.applicationDropOffAddress}
-              officeHours={props.applicationDropOffAddressOfficeHours}
-            />
+            {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.dropOffHeader}
+            </Heading>
+            <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
+            {applicationDropOffAddressOfficeHours && (
+              <>
+                <Heading priority={3} style={"sidebarSubHeader"}>
+                  {strings.officeHoursHeader}
+                </Heading>
+                <p className="mt-4 text-tiny text-gray-750">
+                  <Markdown
+                    children={applicationDropOffAddressOfficeHours}
+                    options={{ disableParsingRawHTML: true }}
+                  />
+                </p>
+              </>
+            )}
           </>
         )}
       </section>

package/src/page_components/listing/listing_sidebar/events/EventSection.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import Heading from "../../../../headers/Heading"
 
 export type EventType = {
   timeString?: string
@@ -19,9 +20,9 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <h4 className={props.sectionHeader ? "text-caps-underline" : "text-caps-tiny"}>
+        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
           {props.headerText}
-        </h4>
+        </Heading>
       )}
       {props.events.map((event, index) => (
         <div key={`events-${index}`} className={`${index !== props.events.length - 1 && "pb-3"}`}>

package/src/helpers/address.tsx

@@ -1,47 +0,0 @@
-import * as React from "react"
-
-export interface Address {
-  city?: string
-  latitude?: number
-  longitude?: number
-  placeName?: string
-  state?: string
-  street2?: string
-  street?: string
-  zipCode?: string
-}
-
-interface AddressProps {
-  address: Address
-}
-
-export const OneLineAddress = (props: AddressProps) => {
-  if (!props.address) return null
-
-  return (
-    <>
-      {props.address.street},{` `}
-      {props.address.city}, {props.address.state} {props.address.zipCode}
-    </>
-  )
-}
-
-export const MultiLineAddress = (props: AddressProps) => {
-  if (!props.address) return null
-
-  return (
-    <>
-      {props.address.placeName && (
-        <>
-          {props.address.placeName}
-          <br />
-        </>
-      )}
-      {props.address.street} {props.address.street2}
-      {(props.address.street || props.address.street2) && <br />}
-      {props.address.city}
-      {props.address.city && (props.address.state || props.address.zipCode) && ","}{" "}
-      {props.address.state} {props.address.zipCode}
-    </>
-  )
-}

package/src/page_components/listing/listing_sidebar/LeasingAgent.tsx

@@ -1,72 +0,0 @@
-import * as React from "react"
-import { SidebarAddress } from "./SidebarAddress"
-import { t } from "../../../helpers/translator"
-import { Icon, IconFillColors } from "../../../icons/Icon"
-import { Listing } from "@bloom-housing/backend-core/types"
-
-interface LeasingAgentProps {
-  listing: Listing
-  managementCompany?: { name: string; website: string }
-}
-
-const LeasingAgent = (props: LeasingAgentProps) => {
-  const listing = props.listing
-
-  const phoneNumber = listing.leasingAgentPhone
-    ? `tel:${listing.leasingAgentPhone.replace(/[-()]/g, "")}`
-    : ""
-
-  let managementWebsite = props.managementCompany?.website
-  if (managementWebsite && !managementWebsite.startsWith("http")) {
-    managementWebsite = `http://${managementWebsite}`
-  }
-
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("leasingAgent.contact")}</h4>
-
-      {listing.leasingAgentName && <p className="text-xl">{listing.leasingAgentName}</p>}
-      {listing.leasingAgentTitle && <p className="text-gray-700">{listing.leasingAgentTitle}</p>}
-      {props.managementCompany?.name && (
-        <p className="text-gray-700">{props.managementCompany.name}</p>
-      )}
-
-      {listing.leasingAgentPhone && (
-        <>
-          <p className="mt-5">
-            <a href={phoneNumber}>
-              <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
-              {listing.leasingAgentPhone}
-            </a>
-          </p>
-          <p className="text-sm text-gray-700">{t("leasingAgent.dueToHighCallVolume")}</p>
-        </>
-      )}
-
-      {listing.leasingAgentEmail && (
-        <p className="my-5">
-          <a href={`mailto:${listing.leasingAgentEmail}`}>
-            <Icon symbol="mail" size="medium" fill={IconFillColors.primary} /> {t("t.email")}
-          </a>
-        </p>
-      )}
-
-      {managementWebsite && (
-        <p className="my-5">
-          <a href={managementWebsite} target="_blank" rel="noreferrer noopener">
-            <Icon symbol="globe" size="medium" fill={IconFillColors.primary} /> {t("t.website")}
-          </a>
-        </p>
-      )}
-
-      {listing.leasingAgentAddress && (
-        <SidebarAddress
-          address={listing.leasingAgentAddress}
-          officeHours={listing.leasingAgentOfficeHours}
-        />
-      )}
-    </section>
-  )
-}
-
-export { LeasingAgent as default, LeasingAgent }

package/src/page_components/listing/listing_sidebar/SidebarAddress.tsx

@@ -1,56 +0,0 @@
-import * as React from "react"
-import ReactDOMServer from "react-dom/server"
-import { Icon, IconFillColors } from "../../../icons/Icon"
-import { OneLineAddress, MultiLineAddress, Address } from "../../../helpers/address"
-import { t } from "../../../helpers/translator"
-import Markdown from "markdown-to-jsx"
-
-export interface SidebarAddressProps {
-  address?: Address
-  officeHours?: string
-}
-
-const SidebarAddress = (props: SidebarAddressProps) => {
-  const { address, officeHours } = props
-  let mainAddress = null
-  let googleMapsHref = ""
-  let hours = <></>
-
-  if (address?.street) {
-    const oneLineAddress = <OneLineAddress address={address} />
-    mainAddress = <MultiLineAddress address={address} />
-
-    googleMapsHref =
-      "https://www.google.com/maps/place/" + ReactDOMServer.renderToStaticMarkup(oneLineAddress)
-  }
-
-  if (officeHours) {
-    hours = (
-      <>
-        <h3 className="text-caps-tiny ">{t("leasingAgent.officeHours")}</h3>
-        <div className="text-gray-800 text-tiny markdown">
-          <Markdown children={officeHours} options={{ disableParsingRawHTML: true }} />
-        </div>
-      </>
-    )
-  }
-
-  return (
-    <>
-      {address?.street && (
-        <>
-          <p className="text-gray-700 mb-1">{mainAddress}</p>
-          <p className="mb-4">
-            <a href={googleMapsHref} className="inline-block pt-1" target="_blank">
-              <Icon symbol="map" size="medium" fill={IconFillColors.primary} />{" "}
-              {t("t.getDirections")}
-            </a>
-          </p>
-        </>
-      )}
-      {hours}
-    </>
-  )
-}
-
-export { SidebarAddress as default, SidebarAddress }