@bloom-housing/ui-components 4.0.1-alpha.20 → 4.0.1-alpha.24

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.23...@bloom-housing/ui-components@4.0.1-alpha.24) (2022-01-20)
+
+
+### Features
+
+* listing card takes optional children ([#2407](https://github.com/bloom-housing/bloom/issues/2407)) ([3c73a11](https://github.com/bloom-housing/bloom/commit/3c73a1144748fca6d50e5e0b220230eb8bf48dc6))
+
+
+
+
+
+## [4.0.1-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.22...@bloom-housing/ui-components@4.0.1-alpha.23) (2022-01-14)
+
+
+### Bug Fixes
+
+* patches translations for preferences ([#2410](https://github.com/bloom-housing/bloom/issues/2410)) ([7906e6b](https://github.com/bloom-housing/bloom/commit/7906e6bc035fab4deea79ea51833a0ef29926d45))
+
+
+
+
+
+## [4.0.1-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.21...@bloom-housing/ui-components@4.0.1-alpha.22) (2022-01-13)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.20...@bloom-housing/ui-components@4.0.1-alpha.21) (2022-01-13)
+
+
+### Bug Fixes
+
+* dates showing as invalid in send by mail section ([#2362](https://github.com/bloom-housing/bloom/issues/2362)) ([3567388](https://github.com/bloom-housing/bloom/commit/35673882d87e2b524b2c94d1fb7b40c9d777f0a3))
+
+
+### BREAKING CHANGES
+
+* remove applicationDueTime field and consolidated into applicationDueDate
+
+
+
+
+
 ## [4.0.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.19...@bloom-housing/ui-components@4.0.1-alpha.20) (2022-01-13)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.20",
+  "version": "4.0.1-alpha.24",
   "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",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^3.0.2-alpha.12",
+    "@bloom-housing/backend-core": "^3.0.2-alpha.15",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "4c8409db235ba764d41a83cd63462413a5b14926"
+  "gitHead": "4b36cd9d6f9e07b1061b6e843d7c672d878f6f1a"
 }

package/src/actions/Button.tsx

@@ -70,7 +70,6 @@ const Button = (props: ButtonProps) => {
 
   return (
     <button
-      {...props}
       id={props.id}
       type={props.type}
       className={buttonClasses.join(" ")}

package/src/forms/Field.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react"
 import { ErrorMessage } from "../notifications/ErrorMessage"
-import { UseFormMethods } from "react-hook-form"
+import { UseFormMethods, RegisterOptions } from "react-hook-form"
 
 export interface FieldProps {
   error?: boolean
@@ -17,12 +17,12 @@ export interface FieldProps {
   subNote?: string
   label?: string
   defaultValue?: string | number
-  onDrop?: (e: any) => boolean
-  onPaste?: (e: any) => boolean
+  onDrop?: (e: React.DragEvent<HTMLElement>) => boolean
+  onPaste?: (e: React.ClipboardEvent) => boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   placeholder?: string
   register?: UseFormMethods["register"]
-  validation?: Record<string, any>
+  validation?: RegisterOptions
   disabled?: boolean
   prepend?: string
   inputProps?: Record<string, unknown>
@@ -95,7 +95,6 @@ const Field = (props: FieldProps) => {
       <div className={controlClasses.join(" ")}>
         {props.prepend && <span className="prepend">{props.prepend}</span>}
         <input
-          {...props}
           aria-describedby={props.describedBy ? props.describedBy : `${idOrName}`}
           aria-invalid={!!props.error || false}
           className="input"

package/src/forms/FieldGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
 import { ExpandableContent } from "../actions/ExpandableContent"
 import { ErrorMessage } from "../notifications/ErrorMessage"
-import { UseFormMethods } from "react-hook-form"
+import { UseFormMethods, RegisterOptions } from "react-hook-form"
 import { Field } from "./Field"
 import { t } from "../helpers/translator"
 
@@ -29,7 +29,7 @@ interface FieldGroupProps {
   groupNote?: string
   groupSubNote?: string
   register: UseFormMethods["register"]
-  validation?: Record<string, unknown>
+  validation?: RegisterOptions
   fieldGroupClassName?: string
   fieldClassName?: string
   fieldLabelClassName?: string

package/src/forms/Select.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ErrorMessage } from "../notifications/ErrorMessage"
 import { FormOptions } from "../helpers/formOptions"
-import { UseFormMethods } from "react-hook-form"
+import { UseFormMethods, RegisterOptions } from "react-hook-form"
 
 export interface SelectOption {
   value: string
@@ -21,7 +21,7 @@ interface SelectProps {
   defaultValue?: string
   placeholder?: string
   register?: UseFormMethods["register"]
-  validation?: Record<string, unknown>
+  validation?: RegisterOptions
   disabled?: boolean
   options: (string | SelectOption)[]
   keyPrefix?: string

package/src/locales/es.json

@@ -252,6 +252,20 @@
       "general": {
         "title": "En base a la información que usted ingresó, su hogar no ha solicitado ninguna preferencia de vivienda.",
         "preamble": "Estará en el grupo general de solicitantes."
+      },
+      "rosefieldLive": {
+        "title": "Anterior Residentes de Rosefield Village reubicados fuera de la ciudad de Alameda",
+        "yes": {
+          "label": "Al menos un miembro de mi hogar fue residente anterior de Rosefield Village",
+          "description": "Al menos un miembro de mi hogar fue residente anterior de Rosefield Village"
+        }
+      },
+      "rosefieldAUSD": {
+        "title": "Empleado(a) del Distrito Escolar Unificado Alameda (AUSD)",
+        "yes": {
+          "label": "Al menos un miembro de mi hogar es empleado del Distrito Escolar Unificado de Alameda",
+          "description": "Al menos un miembro de mi hogar es empleado del Distrito Escolar Unificado de Alameda"
+        }
       }
     },
     "review": {
@@ -477,7 +491,7 @@
       "howToApply": "Cómo presentar una Solicitud",
       "paperApplicationsMustBeMailed": "Las solicitudes impresas deben ser enviadas a través del Servicio Postal de los EE.UU. y no pueden ser entregadas en persona.",
       "pickUpAnApplication": "Recoja una solicitud.",
-      "postmarkedApplicationsMustBeReceivedByDate": "Las solicitudes deben recibirse para la fecha límite. Si envía la solicitud a través del Servicio Postal de los EE.UU., la solicitud debe llevar el matasellos a más tardar del %{applicationDueDate} y ser recibida por correo a más tardar el %{postmarkReceivedByDate}. Las solicitudes recibidas por correo después del %{postmarkReceivedByDate} no serán aceptadas incluso si el matasellos lleva una fecha de a más tardar el %{applicationDueDate}. %{developer} no es responsable de correo extraviado o demorado.",
+      "submitPaperDueDatePostMark": "Las solicitudes deben recibirse para la fecha límite. Si envía la solicitud a través del Servicio Postal de los EE.UU., la solicitud debe llevar el matasellos a más tardar del %{applicationDueDate} y ser recibida por correo a más tardar el %{postmarkReceivedByDate}. Las solicitudes recibidas por correo después del %{postmarkReceivedByDate} no serán aceptadas incluso si el matasellos lleva una fecha de a más tardar el %{applicationDueDate}. %{developer} no es responsable de correo extraviado o demorado.",
       "sendByUsMail": "Enviar la Solicitud a través del Servicio Postal de los EE.UU.",
       "submitAPaperApplication": "Envíe una Solicitud impresa"
     },

package/src/locales/general.json

@@ -1016,7 +1016,6 @@
     "applicationsClosed": "Applications Closed",
     "applicationDropOffQuestion": "Can applications be dropped off?",
     "apply": {
-      "applicationsMustBeReceivedByDeadline": "Applications must be received by the deadline and postmarks will not be considered.",
       "applicationWillBeAvailableOn": "Application will be available for download and pick up on %{openDate}",
       "applyOnline": "Apply Online",
       "downloadApplication": "Download Application",
@@ -1026,9 +1025,12 @@
       "howToApply": "How to Apply",
       "paperApplicationsMustBeMailed": "Paper applications must be sent by US Mail and cannot be submitted in person.",
       "pickUpAnApplication": "Pick up an application",
-      "postmarkedApplicationsMustBeReceivedByDate": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be postmarked by %{applicationDueDate} and received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted even if they are postmarked by %{applicationDueDate}. %{developer} is not responsible for lost or delayed mail.",
       "sendByUsMail": "Send Application by US Mail",
-      "submitAPaperApplication": "Submit a Paper Application"
+      "submitAPaperApplication": "Submit a Paper Application",
+      "submitPaperDueDateNoPostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be postmarked by %{applicationDueDate}. %{developer} is not responsible for lost or delayed mail.",     
+      "submitPaperDueDatePostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be postmarked by %{applicationDueDate} and received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted even if they are postmarked by %{applicationDueDate}. %{developer} is not responsible for lost or delayed mail.",
+      "submitPaperNoDueDateNoPostMark": "%{developer} is not responsible for lost or delayed mail.",
+      "submitPaperNoDueDatePostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted. %{developer} is not responsible for lost or delayed mail."
     },
     "atAnotherAddress": "At another address",
     "atLeasingAgentAddress": "At the leasing agent address",
@@ -1123,6 +1125,8 @@
     "pickupAddress": "Pickup Address",
     "postmarkByDate": "Postmark by Date",
     "postmarkByTime": "Postmark by Time",
+    "receivedByDate": "Received by Date",
+    "receivedByTime": "Received by Time",
     "postmarksConsideredQuestion": "Are postmarks considered?",
     "priorityUnits": "Priority Units",
     "priorityUnitsDescription": "This building has units set aside if any of the following apply to you or someone in your household:",

package/src/locales/vi.json

@@ -249,6 +249,20 @@
       "general": {
         "title": "Dựa trên thông tin quý vị đã nhập, hộ gia đình của quý vị chưa yêu cầu bất kỳ lựa chọn ưu tiên nhà ở nào.",
         "preamble": "Quý vị sẽ thuộc nhóm các ứng viên chung."
+      },
+      "rosefieldLive": {
+        "title": "Cư dân trước đây của Làng Rosefield đã tái định cư bên ngoài Thành phố Alameda",
+        "yes": {
+          "label": "Ít nhất một thành viên trong gia đình tôi là cư dân trước đây của Làng Rosefield",
+          "description": "Ít nhất một thành viên trong gia đình tôi là cư dân trước đây của Làng Rosefield"
+        }
+      },
+      "rosefieldAUSD": {
+        "title": "Nhân viên của Học khu Thống nhất Alameda (AUSD)",
+        "yes": {
+          "label": "Ít nhất một thành viên trong gia đình tôi là nhân viên của Học khu Thống nhất Alameda",
+          "description": "Ít nhất một thành viên trong gia đình tôi là nhân viên của Học khu Thống nhất Alameda"
+        }
       }
     },
     "review": {
@@ -476,7 +490,7 @@
       "howToApply": "Cách Ghi danh",
       "paperApplicationsMustBeMailed": "Mẫu đơn ghi danh Giấy phải được gửi thư bưu điện Hoa Kỳ và không thể nộp trực tiếp.",
       "pickUpAnApplication": "Nhận đơn ghi danh",
-      "postmarkedApplicationsMustBeReceivedByDate": "Đơn ghi danh phải được nhận trước thời hạn. Nếu gửi qua đường bưu điện U.S Mail, đơn ghi danh phải được đóng dấu bưu điện trước %{applicationDueDate} và nhận qua thư trước ngày %{postmarkReceiveByDate}. Các đơn ghi danh nhận được sau %{postmarkReceiveByDate} qua đường bưu điện sẽ không được chấp nhận ngay cả khi chúng được đóng dấu bưu điện trước %{applicationDueDate}. %{developer} không chịu trách nhiệm về thư bị thất lạc hoặc bị trễ.",
+      "submitPaperDueDatePostMark": "Đơn ghi danh phải được nhận trước thời hạn. Nếu gửi qua đường bưu điện U.S Mail, đơn ghi danh phải được đóng dấu bưu điện trước %{applicationDueDate} và nhận qua thư trước ngày %{postmarkReceiveByDate}. Các đơn ghi danh nhận được sau %{postmarkReceiveByDate} qua đường bưu điện sẽ không được chấp nhận ngay cả khi chúng được đóng dấu bưu điện trước %{applicationDueDate}. %{developer} không chịu trách nhiệm về thư bị thất lạc hoặc bị trễ.",
       "sendByUsMail": "Gửi Đơn ghi danh qua đường bưu điện US Mail",
       "submitAPaperApplication": "Gửi Giấy ghi danh"
     },

package/src/locales/zh.json

@@ -249,6 +249,20 @@
       "general": {
         "title": "根據您填寫的資料，您的家庭沒有要求任何住房優先權。",
         "preamble": "您將被分配到一般申請人組別。"
+      },
+      "rosefieldLive": {
+        "title": "罗斯菲尔德村以前的居民搬迁到阿拉米达市外",
+        "yes": {
+          "label": "我的至少一名家庭成员曾是罗斯菲尔德村的居民",
+          "description": "我的至少一名家庭成员曾是罗斯菲尔德村的居民"
+        }
+      },
+      "rosefieldAUSD": {
+        "title": "阿拉米达联合学区 (AUSD) 员工",
+        "yes": {
+          "label": "我的至少一名家庭成员是阿拉米达联合学区的雇员",
+          "description": "我的至少一名家庭成员是阿拉米达联合学区的雇员"
+        }
       }
     },
     "review": {
@@ -476,7 +490,7 @@
       "howToApply": "如何申請",
       "paperApplicationsMustBeMailed": "紙本申請表必須經由美國郵政寄回，並且不能親自提交。",
       "pickUpAnApplication": "領取申請表",
-      "postmarkedApplicationsMustBeReceivedByDate": "申請表必須在截止日期前收到。如果經由美國郵政寄送，則申請表上的郵戳日期必須在 %{applicationDueDate} 前，郵件最遲要在 %{postmarkReceivedByDate} 前寄達。我們不會受理在 %{postmarkReceivedByDate} 之後郵寄送達的申請表，即使郵戳日期在 %{applicationDueDate} 之前也一樣。若郵件有任何遺失或延誤，%{developer} 概不負責。",
+      "submitPaperDueDatePostMark": "申請表必須在截止日期前收到。如果經由美國郵政寄送，則申請表上的郵戳日期必須在 %{applicationDueDate} 前，郵件最遲要在 %{postmarkReceivedByDate} 前寄達。我們不會受理在 %{postmarkReceivedByDate} 之後郵寄送達的申請表，即使郵戳日期在 %{applicationDueDate} 之前也一樣。若郵件有任何遺失或延誤，%{developer} 概不負責。",
       "sendByUsMail": "用美國郵政寄送申請表",
       "submitAPaperApplication": "提交紙本申請表"
     },

package/src/page_components/listing/ListingCard.tsx

@@ -18,14 +18,39 @@ export interface ListingCardHeaderProps {
 }
 export interface ListingCardProps {
   imageCardProps: ImageCardProps
+  children?: React.ReactElement
   seeDetailsLink?: string
   tableHeaderProps?: ListingCardHeaderProps
-  tableProps: ListingCardTableProps
+  tableProps?: ListingCardTableProps
   detailsLinkClass?: string
 }
 
 const ListingCard = (props: ListingCardProps) => {
-  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps } = props
+  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps, children } = props
+
+  const tableHeader = () => {
+    return (
+      <h3
+        className={`listings-row_title ${
+          tableHeaderProps?.tableHeaderClass && tableHeaderProps?.tableHeaderClass
+        }`}
+      >
+        {tableHeaderProps?.tableHeader}
+      </h3>
+    )
+  }
+
+  const tableSubHeader = () => {
+    return (
+      <h4
+        className={`listings-row_subtitle ${
+          tableHeaderProps?.tableSubHeaderClass && tableHeaderProps?.tableSubHeaderClass
+        }`}
+      >
+        {tableHeaderProps?.tableSubHeader}
+      </h4>
+    )
+  }
 
   return (
     <article className="listings-row" data-test-id={"listing-card-component"}>
@@ -33,26 +58,11 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        {tableHeaderProps?.tableHeader && (
-          <h3
-            className={`listings-row_title ${
-              tableHeaderProps.tableHeaderClass && tableHeaderProps.tableHeaderClass
-            }`}
-          >
-            {tableHeaderProps?.tableHeader}
-          </h3>
-        )}
-        {tableHeaderProps?.tableSubHeader && (
-          <h4
-            className={`listings-row_subtitle ${
-              tableHeaderProps.tableSubHeaderClass && tableHeaderProps.tableSubHeaderClass
-            }`}
-          >
-            {tableHeaderProps?.tableSubHeader}
-          </h4>
-        )}
+        {tableHeaderProps?.tableHeader && tableHeader()}
+        {tableHeaderProps?.tableSubHeader && tableSubHeader()}
         <div className="listings-row_table">
-          {(tableProps.data || tableProps.stackedData) && (
+          {children && children}
+          {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
               {tableHeaderProps?.stackedTable ? (
                 <StackedTable {...(tableProps as StackedTableProps)} />

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

@@ -5,7 +5,6 @@ import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/address"
 import { SidebarAddress } from "./SidebarAddress"
-import { NumberedHeader } from "./NumberedHeader"
 import { OrDivider } from "./OrDivider"
 import { ListingStatus } from "@bloom-housing/backend-core/types"
 
@@ -16,7 +15,6 @@ export interface PaperApplication {
 
 export interface ApplicationsProps {
   onlineApplicationURL?: string
-  applicationsDueDate?: string
   applicationsOpen: boolean
   applicationsOpenDate?: string
   paperApplications?: PaperApplication[]
@@ -67,7 +65,7 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.paperMethod && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
-          <NumberedHeader num={1} text={t("listings.apply.getAPaperApplication")} />
+          <div className="text-serif-lg">{t("listings.apply.getAPaperApplication")}</div>
           <Button
             styleType={
               !props.preview && props.onlineApplicationURL ? AppearanceStyleType.primary : undefined

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

@@ -2,14 +2,13 @@ import * as React from "react"
 import { t } from "../../../helpers/translator"
 import { Address } from "../../../helpers/address"
 import { SidebarAddress } from "./SidebarAddress"
-import { NumberedHeader } from "./NumberedHeader"
 import { OrDivider } from "./OrDivider"
 import { ListingStatus } from "@bloom-housing/backend-core/types"
 
 export interface PostmarkedApplication {
-  postmarkedApplicationsReceivedByDate: string
+  postmarkedApplicationsReceivedByDate: string | null
   developer: string
-  applicationsDueDate: string
+  applicationsDueDate: string | null
 }
 
 export interface ApplicationAddressesProps {
@@ -22,50 +21,61 @@ export interface ApplicationAddressesProps {
 }
 
 const SubmitApplication = (props: ApplicationAddressesProps) => {
-  if (props.listingStatus === ListingStatus.closed) {
+  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 })
+    }
+  }
+
   return (
     <>
-      {(props.applicationMailingAddress ||
-        props.applicationDropOffAddress ||
-        props.postmarkedApplicationData) && (
-        <section className="aside-block is-tinted bg-gray-100">
-          <NumberedHeader num={2} text={t("listings.apply.submitAPaperApplication")} />
-          {(props.applicationMailingAddress || props.postmarkedApplicationData) && (
+      <section className="aside-block is-tinted bg-gray-100">
+        <div className="text-serif-lg">{t("listings.apply.submitAPaperApplication")}</div>
+        {props.applicationMailingAddress && (
+          <>
+            <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
             <>
-              <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
               <p className="text-gray-700">{props.applicationOrganization}</p>
-              {props.applicationMailingAddress && (
-                <SidebarAddress address={props.applicationMailingAddress} />
-              )}
-              <p className="mt-4 text-tiny text-gray-750">
-                {props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate
-                  ? t("listings.apply.postmarkedApplicationsMustBeReceivedByDate", {
-                      applicationDueDate: props.postmarkedApplicationData?.applicationsDueDate,
-                      postmarkReceivedByDate:
-                        props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate,
-                      developer: props.postmarkedApplicationData?.developer,
-                    })
-                  : t("listings.apply.applicationsMustBeReceivedByDeadline")}
-              </p>
-            </>
-          )}
-          {props.applicationMailingAddress && props.applicationDropOffAddress && (
-            <OrDivider bgColor="gray-100" />
-          )}
-          {props.applicationDropOffAddress && (
-            <>
-              <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
-              <SidebarAddress
-                address={props.applicationDropOffAddress}
-                officeHours={props.applicationDropOffAddressOfficeHours}
-              />
+              <SidebarAddress address={props.applicationMailingAddress} />
             </>
-          )}
-        </section>
-      )}
+            <p className="mt-4 text-tiny text-gray-750">{getPostmarkString()}</p>
+          </>
+        )}
+        {props.applicationDropOffAddress && (
+          <>
+            {props.applicationMailingAddress && <OrDivider bgColor="gray-100" />}
+            <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
+            <SidebarAddress
+              address={props.applicationDropOffAddress}
+              officeHours={props.applicationDropOffAddressOfficeHours}
+            />
+          </>
+        )}
+      </section>
     </>
   )
 }

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

@@ -3,6 +3,11 @@ import { ListingEvent } from "@bloom-housing/backend-core/types"
 import dayjs from "dayjs"
 
 const EventDateSection = (props: { event: ListingEvent }) => {
+  const getRangeString = () => {
+    const startTime = dayjs(props.event.startTime).format("hh:mma")
+    const endTime = dayjs(props.event.endTime).format("hh:mma")
+    return startTime === endTime ? startTime : `${startTime} - ${endTime}`
+  }
   return (
     <>
       {props.event.startTime && (
@@ -10,11 +15,7 @@ const EventDateSection = (props: { event: ListingEvent }) => {
           <span className="inline-block text-tiny uppercase">
             {dayjs(props.event.startTime).format("MMMM D, YYYY")}
           </span>
-          <span className="inline-block text-sm font-bold">
-            {dayjs(props.event.startTime).format("hh:mma") +
-              "-" +
-              dayjs(props.event.endTime).format("hh:mma")}
-          </span>
+          <span className="inline-block text-sm font-bold">{getRangeString()}</span>
         </p>
       )}
     </>