1382/listings management, application dates

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file. The format
   - Fix units availability ([#1397](https://github.com/bloom-housing/bloom/issues/1397))
 
 - Added:
+
   - Added "closed" to ListingStatus enum
   - Added Transform to ListingStatus field to return closed if applicationDueDate is in the past
   - Added "ohaFormat" to CSV exporter (includes OHA and HOPWA preferences) ([#1292](https://github.com/bloom-housing/bloom/pull/1292)) (Michał Plebański)
@@ -69,6 +70,7 @@ All notable changes to this project will be documented in this file. The format
   - Adds units to listings ([#1448](https://github.com/bloom-housing/bloom/pull/1448))
   - Add Rankings and Results section to listing management ([#1433](https://github.com/bloom-housing/bloom/pull/1433)) (Emily Jablonski)
   - Add Application Address section to listing management ([#1425](https://github.com/bloom-housing/bloom/pull/1425)) (Emily Jablonski)
+  - Add Application Dates section to listing management ([#1432](https://github.com/bloom-housing/bloom/pull/1432)) (Emily Jablonski)
 
 - Fixed:
 

backend/core/archer.ts

@@ -238,6 +238,7 @@ export const ArcherListing: Listing = {
   id: "Uvbk5qurpB2WI9V6WnNdH",
   applicationConfig: undefined,
   applicationOpenDate: new Date("2019-12-31T15:22:57.000-07:00"),
+  applicationDueTime: new Date(),
   applicationPickUpAddress: undefined,
   applicationPickUpAddressOfficeHours: "",
   applicationDropOffAddress: null,

backend/core/client.ts

@@ -1722,6 +1722,9 @@ export interface Listing {
   /**  */
   applicationDueDate: Date
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date
 
@@ -1899,6 +1902,9 @@ export interface ListingCreate {
   /**  */
   applicationDueDate: Date
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date
 
@@ -2094,6 +2100,9 @@ export interface ListingUpdate {
   /**  */
   applicationDueDate: Date
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date
 

backend/core/src/listings/entities/listing.entity.ts

@@ -119,6 +119,13 @@ class Listing extends BaseEntity {
   @Type(() => Date)
   applicationDueDate: Date | null
 
+  @Column({ type: "timestamptz", nullable: true })
+  @Expose()
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
+  @IsDate({ groups: [ValidationsGroupsEnum.default] })
+  @Type(() => Date)
+  applicationDueTime: Date | null
+
   @Column({ type: "timestamptz", nullable: true })
   @Expose()
   @IsOptional({ groups: [ValidationsGroupsEnum.default] })

backend/core/src/migration/1625094786618-application-due-time.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class applicationDueTime1625094786618 implements MigrationInterface {
+  name = "applicationDueTime1625094786618"
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "listings" ADD "application_due_time" TIMESTAMP WITH TIME ZONE`
+    )
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "listings" DROP COLUMN "application_due_time"`)
+  }
+}

backend/core/src/seeds/listings.ts

@@ -2410,6 +2410,7 @@ const defaultListing: ListingSeedType = {
   applicationDropOffAddressOfficeHours: null,
   applicationMailingAddress: null,
   applicationDueDate: getDate(10),
+  applicationDueTime: null,
   applicationFee: "20",
   applicationOpenDate: getDate(-10),
   applicationOrganization: "Application Organization",
@@ -2481,6 +2482,7 @@ const tritonListing: ListingSeedType = {
   applicationDueDate: getDate(10),
   applicationFee: "38.0",
   applicationOpenDate: getDate(-10),
+  applicationDueTime: null,
   applicationOrganization: "Triton",
   applicationPickUpAddress: {
     city: "Foster City",
@@ -2547,6 +2549,7 @@ const coliseumListing: ListingSeedType = {
   applicationDropOffAddressOfficeHours: null,
   applicationMailingAddress: null,
   applicationDueDate: getDate(10),
+  applicationDueTime: null,
   applicationFee: "12",
   applicationOpenDate: getDate(-10),
   applicationOrganization: "John Stewart Company",

backend/core/types/src/backend-swagger.ts

@@ -3273,6 +3273,9 @@ export interface Listing {
   /**  */
   applicationDueDate: Date;
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date;
 
@@ -3567,6 +3570,9 @@ export interface ListingCreate {
   /**  */
   applicationDueDate: Date;
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date;
 
@@ -3890,6 +3896,9 @@ export interface ListingUpdate {
   /**  */
   applicationDueDate: Date;
 
+  /**  */
+  applicationDueTime: Date
+
   /**  */
   applicationOpenDate: Date;
 

sites/partners/pages/listings/[id]/index.tsx

@@ -19,7 +19,6 @@ import { ListingContext } from "../../../src/listings/ListingContext"
 import DetailListingData from "../../../src/listings/PaperListingDetails/sections/DetailListingData"
 import DetailListingIntro from "../../../src/listings/PaperListingDetails/sections/DetailListingIntro"
 import DetailBuildingDetails from "../../../src/listings/PaperListingDetails/sections/DetailBuildingDetails"
-import DetailApplication from "../../../src/listings/PaperListingDetails/sections/DetailApplication"
 import DetailAdditionalDetails from "../../../src/listings/PaperListingDetails/sections/DetailAdditionalDetails"
 import DetailAdditionalEligibility from "../../../src/listings/PaperListingDetails/sections/DetailAdditionalEligibility"
 import DetailLeasingAgent from "../../../src/listings/PaperListingDetails/sections/DetailLeasingAgent"
@@ -31,6 +30,7 @@ import DetailUnitDrawer, {
 import DetailBuildingFeatures from "../../../src/listings/PaperListingDetails/sections/DetailBuildingFeatures"
 import DetailRankingsAndResults from "../../../src/listings/PaperListingDetails/sections/DetailRankingsAndResults"
 import DetailApplicationAddress from "../../../src/listings/PaperListingDetails/sections/DetailApplicationAddress"
+import DetailApplicationDates from "../../../src/listings/PaperListingDetails/sections/DetailApplicationDates"
 
 export default function ApplicationsList() {
   const router = useRouter()
@@ -113,7 +113,6 @@ export default function ApplicationsList() {
                 <DetailListingData />
                 <DetailListingIntro />
                 <DetailBuildingDetails />
-                <DetailApplication />
                 <DetailUnits setUnitDrawer={setUnitDrawer} />
                 <DetailAdditionalFees />
                 <DetailBuildingFeatures />
@@ -122,6 +121,7 @@ export default function ApplicationsList() {
                 <DetailRankingsAndResults />
                 <DetailLeasingAgent />
                 <DetailApplicationAddress />
+                <DetailApplicationDates />
               </div>
 
               <div className="md:w-3/12 pl-6">

sites/partners/src/listings/PaperListingDetails/sections/DetailApplicationDates.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from "react"
+import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { ListingContext } from "../../ListingContext"
+import moment from "moment"
+
+const DetailApplicationDates = () => {
+  const listing = useContext(ListingContext)
+
+  return (
+    <GridSection
+      className="bg-primary-lighter"
+      title={t("listings.sections.applicationDatesTitle")}
+      grid={false}
+      inset
+    >
+      <GridSection columns={3}>
+        <GridCell>
+          <ViewItem label={t("listings.applicationDeadline")}>
+            {listing.applicationDueDate &&
+              moment(new Date(listing?.applicationDueDate)).utc().format("MM/DD/YYYY")}
+          </ViewItem>
+        </GridCell>
+        <GridCell>
+          <ViewItem label={t("listings.applicationDueTime")}>
+            {listing.applicationDueTime &&
+              moment(new Date(listing?.applicationDueTime)).format("hh:mm:ss A")}
+          </ViewItem>
+        </GridCell>
+      </GridSection>
+    </GridSection>
+  )
+}
+
+export default DetailApplicationDates

sites/partners/src/listings/PaperListingForm/index.tsx

@@ -10,6 +10,7 @@ import {
   StatusBar,
   AppearanceStyleType,
   Button,
+  TimeFieldPeriod,
 } from "@bloom-housing/ui-components"
 import { useForm, FormProvider } from "react-hook-form"
 import {
@@ -24,7 +25,6 @@ import { YesNoAnswer } from "../../applications/PaperApplicationForm/FormTypes"
 import moment from "moment"
 
 import Aside from "../Aside"
-import FormListingData from "./sections/FormListingData"
 import AdditionalDetails from "./sections/AdditionalDetails"
 import AdditionalEligibility from "./sections/AdditionalEligibility"
 import LeasingAgent from "./sections/LeasingAgent"
@@ -37,10 +37,20 @@ import ListingIntro from "./sections/ListingIntro"
 import BuildingFeatures from "./sections/BuildingFeatures"
 import RankingsAndResults from "./sections/RankingsAndResults"
 import ApplicationAddress from "./sections/ApplicationAddress"
+import ApplicationDates from "./sections/ApplicationDates"
 
 export type FormListing = Listing & {
-  waitlistOpenQuestion?: YesNoAnswer
-  waitlistSizeQuestion?: YesNoAnswer
+  applicationDueDateField?: {
+    month: string
+    day: string
+    year: string
+  }
+  applicationDueTimeField?: {
+    hours: string
+    minutes: string
+    seconds: string
+    period: TimeFieldPeriod
+  }
   whereApplicationsDroppedOff?: ListingApplicationAddressType
   whereApplicationsPickedUp?: ListingApplicationAddressType
   arePaperAppsMailedToAnotherAddress?: boolean
@@ -52,6 +62,8 @@ export type FormListing = Listing & {
     day: string
     year: string
   }
+  waitlistOpenQuestion?: YesNoAnswer
+  waitlistSizeQuestion?: YesNoAnswer
 }
 
 export const addressTypes = {
@@ -82,6 +94,7 @@ const defaults: FormListing = {
   updatedAt: undefined,
   applicationAddress: defaultAddress,
   applicationDueDate: new Date(),
+  applicationDueTime: null,
   applicationFee: "0",
   applicationMethods: [],
   applicationOpenDate: new Date(moment().subtract(10).format()),
@@ -215,6 +228,23 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
   const formatFormData = (data: FormListing) => {
     const showWaitlistNumber =
       data.waitlistOpenQuestion === YesNoAnswer.Yes && data.waitlistSizeQuestion === YesNoAnswer.Yes
+
+    const getDueTime = () => {
+      let dueTimeHours = parseInt(data.applicationDueTimeField.hours)
+      if (data.applicationDueTimeField.period === "am" && dueTimeHours === 12) {
+        dueTimeHours = 0
+      }
+      if (data.applicationDueTimeField.period === "pm" && dueTimeHours !== 12) {
+        dueTimeHours = dueTimeHours + 12
+      }
+      const dueTime = new Date()
+      dueTime.setHours(
+        dueTimeHours,
+        parseInt(data.applicationDueTimeField.minutes),
+        parseInt(data.applicationDueTimeField.seconds)
+      )
+      return dueTime
+    }
     units.forEach((unit) => {
       switch (unit.unitType) {
         case "threeBdrm":
@@ -257,9 +287,13 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
 
     return {
       ...data,
+      applicationDueTime: getDueTime(),
       disableUnitsAccordion: stringToBoolean(data.disableUnitsAccordion),
       units: units,
       isWaitlistOpen: data.waitlistOpenQuestion === YesNoAnswer.Yes,
+      applicationDueDate: new Date(
+        `${data.applicationDueDateField.year}-${data.applicationDueDateField.month}-${data.applicationDueDateField.day}`
+      ),
       yearBuilt: data.yearBuilt ? Number(data.yearBuilt) : null,
       waitlistCurrentSize:
         data.waitlistCurrentSize && showWaitlistNumber ? Number(data.waitlistCurrentSize) : null,
@@ -379,7 +413,6 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                 <div className="flex flex-row flex-wrap">
                   <div className="info-card md:w-9/12">
                     <ListingIntro />
-                    <FormListingData />
                     <BuildingDetails />
                     <Units
                       units={units}
@@ -394,6 +427,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                     <RankingsAndResults listing={listing} />
                     <LeasingAgent />
                     <ApplicationAddress listing={listing} />
+                    <ApplicationDates listing={listing} />
                   </div>
 
                   <aside className="md:w-3/12 md:pl-6">

sites/partners/src/listings/PaperListingForm/sections/AdditionalDetails.tsx

@@ -10,11 +10,12 @@ const AdditionalDetails = () => {
 
   return (
     <div>
-      <GridSection grid={false} separator>
-        <span className="form-section__title">{t("listings.sections.additionalDetails")}</span>
-        <span className="form-section__description">
-          {t("listings.sections.additionalDetailsSubtitle")}
-        </span>
+      <GridSection
+        grid={false}
+        separator
+        title={t("listings.sections.additionalDetails")}
+        description={t("listings.sections.additionalDetailsSubtitle")}
+      >
         <GridSection columns={2}>
           <Textarea
             label={t("listings.requiredDocuments")}

sites/partners/src/listings/PaperListingForm/sections/AdditionalEligibility.tsx

@@ -10,13 +10,12 @@ const AdditionalEligibility = () => {
 
   return (
     <div>
-      <GridSection grid={false} separator>
-        <span className="form-section__title">
-          {t("listings.sections.additionalEligibilityTitle")}
-        </span>
-        <span className="form-section__description">
-          {t("listings.sections.additionalEligibilitySubtext")}
-        </span>
+      <GridSection
+        grid={false}
+        separator
+        title={t("listings.sections.additionalEligibilityTitle")}
+        description={t("listings.sections.additionalEligibilitySubtext")}
+      >
         <GridSection columns={2}>
           <Textarea
             label={t("listings.creditHistory")}

sites/partners/src/listings/PaperListingForm/sections/AdditionalFees.tsx

@@ -10,11 +10,12 @@ const AdditionalFees = () => {
 
   return (
     <div>
-      <GridSection grid={false} separator>
-        <span className="form-section__title">{t("listings.sections.additionalFees")}</span>
-        <span className="form-section__description">
-          {t("listings.sections.additionalFeesSubtitle")}
-        </span>
+      <GridSection
+        grid={false}
+        separator
+        title={t("listings.sections.additionalFees")}
+        description={t("listings.sections.additionalFeesSubtitle")}
+      >
         <GridSection columns={3}>
           <Field
             label={t("listings.applicationFee")}