@bloom-housing/ui-components 4.0.1-alpha.6 → 4.0.1

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": {
@@ -459,6 +473,7 @@
     "additionalInformation": "Información adicional",
     "allUnits": "Todas las viviendas",
     "allUnitsReservedFor": "Todas las viviendas reservadas para %{type}",
+    "annualIncome": "%{income} al año",
     "applicationDeadline": "Fecha límite de solicitud",
     "applicationFCFS": "Atención por orden de llegada",
     "applicationFee": "Cargo de solicitud",
@@ -477,7 +492,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"
     },
@@ -511,6 +526,7 @@
     },
     "maxIncomeMonth": "Ingresos máximos / Mes",
     "maxIncomeYear": "Ingresos máximos / Año",
+    "monthlyIncome": "%{income} al mes",
     "moreBuildingSelectionCriteria": "Obtenga más información sobre los Criterios de Selección de Edificaciones",
     "noAvailableUnits": "No hay viviendas disponibles en este momento.",
     "noOpenListings": "Actualmente ningún listado tiene solicitudes abiertas.",

package/src/locales/general.json

@@ -242,7 +242,11 @@
       "provideAMailingAddress": "Provide an address where you can receive updates and materials about your application.",
       "doYouWorkIn": "Do you work in %{county} County?",
       "doYouWorkInDescription": "TBD",
-      "workAddress": "Work Address"
+      "workAddress": "Work Address",
+      "verifyAddressTitle": "We have located the following address. Please confirm it's correct.",
+      "couldntLocateAddress": "We couldn't locate the address you entered.  Please confirm it's correct.",
+      "suggestedAddress": "Suggested Address:",
+      "youEntered": "You Entered:"
     },
     "alternateContact": {
       "type": {
@@ -421,6 +425,17 @@
         "doNotConsider": {
           "label": "No"
         }
+      },
+      "rentBasedOnIncome": {
+        "summary": "Flat Rent & Rent Based on Income",
+        "flatRent": {
+          "label": "Affordable apartment with flat rent",
+          "description": "I would like to apply for an affordable flat rent apartment, which has a set monthly rent amount that is below market rate. Note - applicants with Section 8 Mobile Housing Choice Vouchers (HCV) are welcome to apply."
+        },
+        "30Percent": {
+          "label": "Project based affordable apartments with a rent at 30% of your income",
+          "description": "I would like to apply for an apartment with Project-Based subsidy. These apartments require initial screening and yearly certification by the Housing Authority. The Housing Authority will calculate my monthly rent payment to approximately 30% of monthly income."
+        }
       }
     },
     "preferences": {
@@ -639,6 +654,20 @@
         "address": "Address",
         "name": "Name",
         "organization": "Name of Organization"
+      },
+      "rosefieldLive": {
+        "title": "Previous Residents of Rosefield Village Relocated Outside of the City of Alameda",
+        "yes": {
+          "label": "At least one member of my household was a previous resident of Rosefield Village",
+          "description": "At least one member of my household was a previous resident of Rosefield Village"
+        }
+      },
+      "rosefieldAUSD": {
+        "title": "Alameda Unified School District (AUSD) employee",
+        "yes": {
+          "label": "At least one member of my household is an Alameda Unified School District employee",
+          "description": "At least one member of my household is an Alameda Unified School District employee."
+        }
       }
     },
     "review": {
@@ -945,7 +974,7 @@
     "es": "Español",
     "zh": "中文",
     "vi": "Tiếng Việt",
-    "tl": "Tagalog"
+    "tl": "Filipino"
   },
   "leasingAgent": {
     "contact": "Contact Leasing Agent",
@@ -1002,7 +1031,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",
@@ -1012,9 +1040,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",
@@ -1109,6 +1140,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

@@ -1,4 +1,4 @@
-{
+{
   "account": {
     "accountSettings": "Thiết lập Tài khoản",
     "accountSettingsSubtitle": "Thiết lập Tài khoản, email và mật khẩu",
@@ -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": {
@@ -458,6 +472,7 @@
     "additionalInformation": "Thông tin Bổ sung",
     "allUnits": "Tất cả các Căn nhà",
     "allUnitsReservedFor": "Tất cả các căn nhà được dành cho %{type}",
+    "annualIncome": "%{income} mỗi năm",
     "applicationDeadline": "Hạn nộp Đơn ghi danh",
     "applicationFCFS": "Ai Nộp đơn Trước Được Nhận trước",
     "applicationFee": "Lệ phí Ghi danh",
@@ -476,7 +491,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"
     },
@@ -510,6 +525,7 @@
     },
     "maxIncomeMonth": "Thu nhập Tối đa / Tháng",
     "maxIncomeYear": "Thu nhập Tối đa / Năm",
+    "monthlyIncome": "%{income} mỗi tháng",
     "moreBuildingSelectionCriteria": "Tìm hiểu thêm về Tiêu chí Lựa chọn Tòa nhà",
     "noAvailableUnits": "Không có căn nhà nào còn trống tại thời điểm này.",
     "noOpenListings": "Không có danh sách nhà nào hiện đang mở nhận đơn 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": {
@@ -458,6 +472,7 @@
     "additionalInformation": "其他資訊",
     "allUnits": "所有單位",
     "allUnitsReservedFor": "保留給 %{type} 的所有單位",
+    "annualIncome": "每年 %{income}",
     "applicationDeadline": "申請截止日期",
     "applicationFCFS": "先申請先服務",
     "applicationFee": "申請費",
@@ -476,7 +491,7 @@
       "howToApply": "如何申請",
       "paperApplicationsMustBeMailed": "紙本申請表必須經由美國郵政寄回，並且不能親自提交。",
       "pickUpAnApplication": "領取申請表",
-      "postmarkedApplicationsMustBeReceivedByDate": "申請表必須在截止日期前收到。如果經由美國郵政寄送，則申請表上的郵戳日期必須在 %{applicationDueDate} 前，郵件最遲要在 %{postmarkReceivedByDate} 前寄達。我們不會受理在 %{postmarkReceivedByDate} 之後郵寄送達的申請表，即使郵戳日期在 %{applicationDueDate} 之前也一樣。若郵件有任何遺失或延誤，%{developer} 概不負責。",
+      "submitPaperDueDatePostMark": "申請表必須在截止日期前收到。如果經由美國郵政寄送，則申請表上的郵戳日期必須在 %{applicationDueDate} 前，郵件最遲要在 %{postmarkReceivedByDate} 前寄達。我們不會受理在 %{postmarkReceivedByDate} 之後郵寄送達的申請表，即使郵戳日期在 %{applicationDueDate} 之前也一樣。若郵件有任何遺失或延誤，%{developer} 概不負責。",
       "sendByUsMail": "用美國郵政寄送申請表",
       "submitAPaperApplication": "提交紙本申請表"
     },
@@ -510,6 +525,7 @@
     },
     "maxIncomeMonth": "最高收入 / 月",
     "maxIncomeYear": "最高收入 / 年",
+    "monthlyIncome": "每月 %{income}",
     "moreBuildingSelectionCriteria": "了解「樓宇選擇標準」詳情",
     "noAvailableUnits": "目前並無單位提供。",
     "noOpenListings": "目前沒有上市名單接受申請。",

package/src/overlays/Modal.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import "./Modal.scss"
 import { Icon } from "../icons/Icon"
-import { GridCell, GridSection } from "../sections/GridSection"
 import { Overlay, OverlayProps } from "./Overlay"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {

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/ListingsGroup.scss

@@ -6,44 +6,71 @@
 
 .listings-group__header {
   @apply flex;
-  @apply flex-row;
-  @apply flex-wrap;
+  @apply flex-col;
   @apply max-w-5xl;
   @apply m-auto;
   @apply mt-6;
   @apply mb-8;
   @apply p-3;
+  @apply justify-between;
+
+  @screen md {
+    @apply flex-row;
+  }
 }
 
 .listings-group__icon {
   @apply hidden;
-  @apply pt-2;
   @apply pr-5;
+  @apply mr-5;
+  @apply border-r-4;
+  @apply border-gray-700;
+  @apply items-center;
+  @apply hidden;
+  @screen md {
+    @apply flex;
+  }
+}
+
+.listings-group__content {
+  @apply flex;
+  @apply flex-row;
+  flex-grow: 2;
+  margin-right: 15px;
 
+  @apply max-w-full;
   @screen md {
-    @apply inline-block;
+    max-width: 70%;
   }
 }
 
 .listings-group__header-group {
-  @apply w-full;
+  max-width: inherit;
   @apply flex;
-  @apply items-center;
-  @apply mb-4;
+  @apply flex-col;
+  @apply items-start;
+  @apply justify-center;
+  @apply h-full;
+}
 
+.listings-group__info {
+  @apply text-gray-750;
+  @apply pt-1;
+  @apply pt-2;
   @screen md {
-    @apply w-7/12;
-    @apply mb-0;
+    @apply pt-0;
   }
 }
 
 .listings-group__button {
-  @apply w-full;
   @apply flex;
   @apply items-center;
-
+  flex-shrink: 0;
+  @apply ml-0;
+  @apply pt-5;
   @screen md {
-    @apply w-4/12;
+    @apply ml-6;
+    @apply pt-0;
   }
 }
 
@@ -51,15 +78,13 @@
   @apply uppercase;
   @apply font-alt-sans;
   @apply font-black;
-  @apply my-1;
   @apply tracking-widest;
   @apply border-b-4;
-  @apply border-gray-600;
+  @apply border-gray-700;
   @apply pb-1;
 
   @screen md {
-    @apply px-4;
-    @apply border-b-0;
-    @apply border-l-4;
+    @apply pb-0;
+    @apply border-0;
   }
 }

package/src/page_components/listing/ListingsGroup.tsx

@@ -1,43 +1,41 @@
 import React, { useState } from "react"
 import { Button } from "../../actions/Button"
-import { Icon } from "../../icons/Icon"
+import { Icon, IconTypes } from "../../icons/Icon"
 import "./ListingsGroup.scss"
 
 export interface ListingsGroupProps {
   children?: React.ReactNode
-  listingsCount: number
   header: string
+  hideButtonText: string
+  icon?: IconTypes
   info?: string
+  listingsCount: number
   showButtonText: string
-  hideButtonText: string
 }
 
 const ListingsGroup = (props: ListingsGroupProps) => {
   const [showListings, setShowListings] = useState(false)
   const toggleListings = () => setShowListings(!showListings)
 
-  let buttonText
-
   const listingsCount = ` (${props.listingsCount})`
-  if (showListings) {
-    buttonText = props.hideButtonText + listingsCount
-  } else {
-    buttonText = props.showButtonText + listingsCount
-  }
 
   return (
     <div className="listings-group">
       <div className="listings-group__header">
-        <div className="listings-group__icon">
-          <Icon size="xlarge" symbol="clock" />
-        </div>
-        <div className="listings-group__header-group">
-          <h2 className="listings-group__title">{props.header}</h2>
-          {props.info && <div className="px-4 my-2">{props.info}</div>}
+        <div className={"listings-group__content"}>
+          <div className="listings-group__icon">
+            <Icon size="xlarge" symbol={props.icon ?? `clock`} />
+          </div>
+          <div className="listings-group__header-group">
+            <h2 className="listings-group__title">{props.header}</h2>
+            {props.info && <div className="listings-group__info">{props.info}</div>}
+          </div>
         </div>
         <div className="listings-group__button">
           <Button className="w-full" onClick={() => toggleListings()}>
-            {buttonText}
+            {showListings
+              ? props.hideButtonText + listingsCount
+              : props.showButtonText + listingsCount}
           </Button>
         </div>
       </div>

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/ListingUpdated.tsx

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

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/DownloadLotteryResults.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string }) => {
   const { event, pdfUrl } = props
@@ -12,7 +12,7 @@ const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string })
         <section className="aside-block text-center">
           <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
           <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">
-            {moment(event.startTime).format("MMMM D, YYYY")}
+            {dayjs(event.startTime).format("MMMM D, YYYY")}
           </p>
           <a
             className="button is-primary w-full mb-2"