@bloom-housing/ui-components 2.0.0-pre-tailwind

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

@@ -0,0 +1,49 @@
+import * as React from "react"
+import moment from "moment"
+import { Listing } from "@bloom-housing/backend-core/types"
+import { Apply } from "./Apply"
+import { Waitlist } from "./Waitlist"
+
+export interface ApplicationSectionProps {
+  listing: Listing
+  internalFormRoute: string
+  preview?: boolean
+  cloudName?: string
+}
+
+const showWaitlist = (listing: Listing) => {
+  // Hide waitlist for FCFS and when there are no waitlist spots
+  return (
+    listing.applicationDueDate != null &&
+    listing.isWaitlistOpen &&
+    listing.waitlistOpenSpots &&
+    listing.waitlistOpenSpots > 0
+  )
+}
+
+const ApplicationSection = (props: ApplicationSectionProps) => {
+  const { listing, preview } = props
+  const dueDate = moment(listing.applicationDueDate)
+  const nowTime = moment()
+
+  // If applications are closed, hide this section
+  if (nowTime > dueDate) return null
+
+  return (
+    <>
+      {showWaitlist(listing) && (
+        <section className="aside-block is-tinted">
+          <Waitlist listing={listing} />
+        </section>
+      )}
+      <Apply
+        listing={listing}
+        preview={preview}
+        internalFormRoute={props.internalFormRoute}
+        cloudName={props.cloudName}
+      />
+    </>
+  )
+}
+
+export { ApplicationSection as default, ApplicationSection }

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

@@ -0,0 +1,225 @@
+import React, { useState } from "react"
+import {
+  Listing,
+  ApplicationMethod,
+  ApplicationMethodType,
+  ListingApplicationAddressType,
+  PaperApplication,
+} from "@bloom-housing/backend-core/types"
+import moment from "moment"
+import { t } from "../../../helpers/translator"
+import { Button } from "../../../actions/Button"
+import { LinkButton } from "../../../actions/LinkButton"
+import { SidebarAddress } from "./SidebarAddress"
+import { openDateState } from "../../../helpers/state"
+import { AppearanceStyleType } from "../../../global/AppearanceTypes"
+import { cloudinaryPdfFromId } from "../../../helpers/pdfs"
+
+export interface ApplyProps {
+  listing: Listing
+  internalFormRoute: string
+  preview?: boolean
+  cloudName?: string
+}
+
+const hasMethod = (applicationMethods: ApplicationMethod[], type: ApplicationMethodType) => {
+  return applicationMethods.some((method) => method.type == type)
+}
+
+const getMethod = (applicationMethods: ApplicationMethod[], type: ApplicationMethodType) => {
+  return applicationMethods.find((method) => method.type == type)
+}
+
+const OrDivider = (props: { bgColor: string }) => (
+  <div className="aside-block__divider">
+    <span className={`bg-${props.bgColor} aside-block__conjunction`}>{t("t.or")}</span>
+  </div>
+)
+
+const SubHeader = (props: { text: string }) => <h3 className="text-caps-tiny">{props.text}</h3>
+
+const NumberedHeader = (props: { num: number; text: string }) => (
+  <div className="text-serif-lg">
+    <span className="text-primary pr-1">{props.num}</span>
+    {props.text}
+  </div>
+)
+
+const Apply = (props: ApplyProps) => {
+  // /applications/start/choose-language
+  const { listing, internalFormRoute, preview } = props
+  let onlineApplicationUrl = ""
+
+  const [showDownload, setShowDownload] = useState(false)
+  const toggleDownload = () => setShowDownload(!showDownload)
+
+  const openDate = moment(listing.applicationOpenDate).format("MMMM D, YYYY")
+
+  if (hasMethod(listing.applicationMethods, ApplicationMethodType.Internal)) {
+    onlineApplicationUrl = `${internalFormRoute}?listingId=${listing.id}`
+  } else if (hasMethod(listing.applicationMethods, ApplicationMethodType.ExternalLink)) {
+    onlineApplicationUrl =
+      getMethod(listing.applicationMethods, ApplicationMethodType.ExternalLink)
+        ?.externalReference || ""
+  }
+
+  const paperMethod = getMethod(listing.applicationMethods, ApplicationMethodType.FileDownload)
+  const sortedPaperApplications = paperMethod?.paperApplications?.sort((a, b) => {
+    // Ensure English is always first
+    if (a.language == "en") {
+      return -1
+    }
+    if (b.language == "en") {
+      return 1
+    }
+
+    // Otherwise, do regular string sort
+    const aLang = t(`languages.${a.language}`)
+    const bLang = t(`languages.${b.language}`)
+    if (aLang < bLang) {
+      return -1
+    }
+    if (aLang > bLang) {
+      return 1
+    }
+    return 0
+  })
+
+  type AddressLocation = "dropOff" | "pickUp"
+
+  const getAddress = (
+    addressType: ListingApplicationAddressType | undefined,
+    location: AddressLocation
+  ) => {
+    if (addressType === ListingApplicationAddressType.leasingAgent) {
+      return listing.leasingAgentAddress
+    }
+    if (addressType === ListingApplicationAddressType.mailingAddress) {
+      return listing.applicationMailingAddress
+    }
+    if (location === "dropOff") {
+      return listing.applicationDropOffAddress
+    } else {
+      return listing.applicationPickUpAddress
+    }
+  }
+
+  return (
+    <>
+      <section className="aside-block">
+        <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
+        {openDateState(listing) && (
+          <p className="mb-5 text-gray-700">
+            {t("listings.apply.applicationWillBeAvailableOn", { openDate: openDate })}
+          </p>
+        )}
+        {!openDateState(listing) && onlineApplicationUrl !== "" && (
+          <>
+            {preview ? (
+              <Button disabled className="w-full mb-2">
+                {t("listings.apply.applyOnline")}
+              </Button>
+            ) : (
+              <LinkButton
+                styleType={AppearanceStyleType.primary}
+                className="w-full mb-2"
+                href={onlineApplicationUrl}
+              >
+                {t("listings.apply.applyOnline")}
+              </LinkButton>
+            )}
+          </>
+        )}
+        {!openDateState(listing) && paperMethod && (
+          <>
+            {onlineApplicationUrl !== "" && <OrDivider bgColor="white" />}
+            <NumberedHeader num={1} text={t("listings.apply.getAPaperApplication")} />
+            <Button
+              styleType={
+                !preview && onlineApplicationUrl === "" ? AppearanceStyleType.primary : undefined
+              }
+              className="w-full mb-2"
+              onClick={toggleDownload}
+              disabled={preview}
+            >
+              {t("listings.apply.downloadApplication")}
+            </Button>
+          </>
+        )}
+        {showDownload &&
+          sortedPaperApplications?.map((paperApplication: PaperApplication) => (
+            <p key={paperApplication?.file?.fileId} className="text-center mt-2 mb-4 text-sm">
+              <a
+                href={
+                  paperApplication?.file?.fileId.includes("https")
+                    ? paperApplication?.file?.fileId
+                    : cloudinaryPdfFromId(
+                        paperApplication?.file?.fileId || "",
+                        props.cloudName || ""
+                      )
+                }
+                title={t("listings.apply.downloadApplication")}
+                target="_blank"
+              >
+                {t(`languages.${paperApplication.language}`)}
+              </a>
+            </p>
+          ))}
+        {(listing.applicationPickUpAddress || listing.applicationPickUpAddressType) && (
+          <>
+            {!openDateState(listing) && (onlineApplicationUrl !== "" || paperMethod) && (
+              <OrDivider bgColor="white" />
+            )}
+            <SubHeader text={t("listings.apply.pickUpAnApplication")} />
+            <SidebarAddress
+              address={getAddress(listing.applicationPickUpAddressType, "pickUp")}
+              officeHours={listing.applicationPickUpAddressOfficeHours}
+            />
+          </>
+        )}
+      </section>
+
+      {(listing.applicationMailingAddress ||
+        listing.applicationDropOffAddress ||
+        listing.applicationDropOffAddressType) && (
+        <section className="aside-block is-tinted bg-gray-100">
+          <NumberedHeader num={2} text={t("listings.apply.submitAPaperApplication")} />
+          {listing.applicationMailingAddress && (
+            <>
+              <SubHeader text={t("listings.apply.sendByUsMail")} />
+              <p className="text-gray-700">{listing.applicationOrganization}</p>
+              <SidebarAddress address={listing.applicationMailingAddress} />
+              <p className="mt-4 text-tiny text-gray-750">
+                {listing.postmarkedApplicationsReceivedByDate
+                  ? t("listings.apply.postmarkedApplicationsMustBeReceivedByDate", {
+                      applicationDueDate: moment(listing.applicationDueDate).format(
+                        `MMM. DD, YYYY [${t("t.at")}] h A`
+                      ),
+                      postmarkReceivedByDate: moment(
+                        listing.postmarkedApplicationsReceivedByDate
+                      ).format(`MMM. DD, YYYY [${t("t.at")}] h A`),
+                      developer: listing.developer,
+                    })
+                  : t("listings.apply.applicationsMustBeReceivedByDeadline")}
+              </p>
+            </>
+          )}
+          {listing.applicationMailingAddress && listing.applicationDropOffAddress && (
+            <OrDivider bgColor="gray-100" />
+          )}
+          {(listing.applicationDropOffAddress || listing.applicationDropOffAddressType) && (
+            <>
+              <SubHeader text={t("listings.apply.dropOffApplication")} />
+              <SidebarAddress
+                address={getAddress(listing.applicationDropOffAddressType, "dropOff")}
+                officeHours={listing.applicationDropOffAddressOfficeHours}
+              />
+            </>
+          )}
+        </section>
+      )}
+    </>
+  )
+}
+
+export { Apply as default, Apply }

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

@@ -0,0 +1,77 @@
+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"
+import { openDateState } from "../../../helpers/state"
+
+interface LeasingAgentProps {
+  listing: Listing
+  managementCompany?: { name: string; website: string }
+}
+
+const LeasingAgent = (props: LeasingAgentProps) => {
+  const listing = props.listing
+
+  if (openDateState(listing)) {
+    return null
+  }
+
+  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/ListingUpdated.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { t } from "../../../helpers/translator"
+import moment from "moment"
+
+interface ListingUpdatedProps {
+  listingUpdated: Date
+}
+
+const ListingUpdated = (props: ListingUpdatedProps) => {
+  const listingUpdated = props.listingUpdated
+  return (
+    <section className="aside-block">
+      <p className="text-tiny text-gray-800">
+        {`${t("listings.listingUpdated")}: ${moment(listingUpdated).format("MMMM DD, YYYY")}`}
+      </p>
+    </section>
+  )
+}
+
+export { ListingUpdated as default, ListingUpdated }

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { t } from "../../../helpers/translator"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+
+interface ReferralApplicationProps {
+  description: string
+  phoneNumber: string
+  title: string
+}
+
+const ReferralApplication = (props: ReferralApplicationProps) => {
+  const linkedPhoneNumber = `tel:${props.phoneNumber.replace(/[-()]/g, "")}`
+
+  return (
+    <section className="aside-block">
+      <h2 className="text-caps-underline">{props.title}</h2>
+      <p>
+        <a href={linkedPhoneNumber}>
+          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
+          {props.phoneNumber}
+        </a>
+      </p>
+      <p className="text-tiny mt-4 text-gray-800">{props.description}</p>
+    </section>
+  )
+}
+
+export { ReferralApplication as default, ReferralApplication }

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

@@ -0,0 +1,56 @@
+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 }