@bloom-housing/ui-components 4.2.3 → 4.3.0

package/src/helpers/address.tsx

@@ -1,46 +0,0 @@
-import * as React from "react"
-import Markdown from "markdown-to-jsx"
-
-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 />
-        </>
-      )}
-      <Markdown children={props.address.street || ""} />
-      <br />
-      {props.address.city}, {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 }

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

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { t } from "../../../helpers/translator"
-
-export interface WaitlistProps {
-  isWaitlistOpen: boolean
-  waitlistMaxSize?: number | null
-  waitlistCurrentSize?: number | null
-  waitlistOpenSpots?: number | null
-}
-
-const WaitlistItem = (props: { className?: string; value: number; text: string }) => (
-  <li className={`uppercase text-gray-800 text-tiny ${props.className}`}>
-    <span className="text-right w-12 inline-block pr-2">{props.value}</span>
-    <span>{props.text}</span>
-  </li>
-)
-
-const Waitlist = (props: WaitlistProps) => {
-  if (!props.isWaitlistOpen) return <></>
-
-  return (
-    <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{t("listings.waitlist.unitsAndWaitlist")}</h4>
-      <div>
-        <p className="text-tiny text-gray-800 pb-3">{t("listings.waitlist.submitAnApplication")}</p>
-        <ul>
-          {props.waitlistCurrentSize !== null && props.waitlistCurrentSize !== undefined && (
-            <WaitlistItem
-              value={props.waitlistCurrentSize}
-              text={t("listings.waitlist.currentSize")}
-            />
-          )}
-          {props.waitlistOpenSpots !== null && props.waitlistOpenSpots !== undefined && (
-            <WaitlistItem
-              value={props.waitlistOpenSpots}
-              text={t("listings.waitlist.openSlots")}
-              className={"font-semibold"}
-            />
-          )}
-          {props.waitlistMaxSize != null && (
-            <WaitlistItem value={props.waitlistMaxSize} text={t("listings.waitlist.finalSize")} />
-          )}
-        </ul>
-      </div>
-    </section>
-  )
-}
-
-export { Waitlist as default, Waitlist }