1349/leasing agent section, listings management

CHANGELOG.md

@@ -43,6 +43,7 @@ All notable changes to this project will be documented in this file. The format
   - Created duplicates pages ([#1132](https://github.com/bloom-housing/bloom/pull/1132)) (Dominik Barcikowski)
   - Add Additional Details section to listing management ([#1338](https://github.com/bloom-housing/bloom/pull/1338)) (Emily Jablonski)
   - Add Additional Eligibility section to listing management ([#1374](https://github.com/bloom-housing/bloom/pull/1374)) (Emily Jablonski)
+  - Add Leasing Agent section to listing management ([#1349](https://github.com/bloom-housing/bloom/pull/1349)) (Emily Jablonski)
 
 - Fixed:
 

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

@@ -21,6 +21,7 @@ import DetailProperty from "../../../src/listings/PaperListingDetails/sections/D
 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"
 
 export default function ApplicationsList() {
   const router = useRouter()
@@ -104,6 +105,7 @@ export default function ApplicationsList() {
                 <DetailApplication />
                 <DetailAdditionalEligibility />
                 <DetailAdditionalDetails />
+                <DetailLeasingAgent />
               </div>
 
               <div className="md:w-3/12 pl-6">

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

@@ -0,0 +1,40 @@
+import React, { useContext } from "react"
+import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { ListingContext } from "../../ListingContext"
+
+const DetailLeasingAgent = () => {
+  const listing = useContext(ListingContext)
+
+  return (
+    <GridSection
+      className="bg-primary-ligher"
+      title={t("listings.sections.leasingAgentTitle")}
+      grid={false}
+      inset
+    >
+      <GridSection columns={3}>
+        <GridCell>
+          <ViewItem label={t("leasingAgent.name")}>{listing.leasingAgentName}</ViewItem>
+        </GridCell>
+        <GridCell>
+          <ViewItem label={t("t.email")}>{listing.leasingAgentEmail}</ViewItem>
+        </GridCell>
+        <GridCell>
+          <ViewItem label={t("t.phone")}>{listing.leasingAgentPhone}</ViewItem>
+        </GridCell>
+      </GridSection>
+      <GridSection columns={2}>
+        <GridCell>
+          <ViewItem label={t("leasingAgent.title")}>{listing.leasingAgentTitle}</ViewItem>
+        </GridCell>
+        <GridCell>
+          <ViewItem label={t("leasingAgent.officeHours")}>
+            {listing.leasingAgentOfficeHours}
+          </ViewItem>
+        </GridCell>
+      </GridSection>
+    </GridSection>
+  )
+}
+
+export default DetailLeasingAgent

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

@@ -24,6 +24,7 @@ import Aside from "../Aside"
 import FormListingData from "./sections/FormListingData"
 import AdditionalDetails from "./sections/AdditionalDetails"
 import AdditionalEligibility from "./sections/AdditionalEligibility"
+import LeasingAgent from "./sections/LeasingAgent"
 
 type FormListing = ListingCreate & ListingUpdate
 
@@ -203,6 +204,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                     <FormListingData />
                     <AdditionalEligibility />
                     <AdditionalDetails />
+                    <LeasingAgent />
                   </div>
 
                   <aside className="md:w-3/12 md:pl-6">

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

@@ -34,7 +34,7 @@ const FormListingData = () => {
           <Field
             id="property.id"
             name="property.id"
-            label="Property ID (can't save without this for now)"
+            label="Property ID (required for now)"
             placeholder="Property ID"
             register={register}
           />

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

@@ -0,0 +1,64 @@
+import React from "react"
+import { useFormContext } from "react-hook-form"
+import { t, GridSection, Textarea, Field, PhoneField } from "@bloom-housing/ui-components"
+
+const LeasingAgent = () => {
+  const formMethods = useFormContext()
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, control } = formMethods
+
+  return (
+    <div>
+      <GridSection grid={false} separator>
+        <span className="form-section__title">{t("listings.sections.leasingAgentTitle")}</span>
+        <span className="form-section__description">
+          {t("listings.sections.leasingAgentSubtitle")}
+        </span>
+        <GridSection columns={3}>
+          <Field
+            label={t("leasingAgent.name")}
+            name={"leasingAgentName"}
+            id={"leasingAgentName"}
+            placeholder={t("leasingAgent.namePlaceholder")}
+            register={register}
+          />
+          <Field
+            label={t("t.email")}
+            name={"leasingAgentEmail"}
+            id={"leasingAgentEmail"}
+            placeholder={t("t.emailAddressPlaceholder")}
+            register={register}
+          />
+          <PhoneField
+            label={t("t.phone")}
+            name={"leasingAgentPhone"}
+            id={"leasingAgentPhone"}
+            placeholder={t("t.phoneNumberPlaceholder")}
+            control={control}
+            controlClassName={"control"}
+          />
+        </GridSection>
+        <GridSection columns={2}>
+          <Field
+            label={t("leasingAgent.title")}
+            name={"leasingAgentTitle"}
+            id={"leasingAgentTitle"}
+            placeholder={t("leasingAgent.title")}
+            register={register}
+          />
+          <Textarea
+            label={t("leasingAgent.officeHours")}
+            name={"leasingAgentOfficeHours"}
+            id={"leasingAgentOfficeHours"}
+            fullWidth={true}
+            placeholder={t("leasingAgent.officeHoursPlaceholder")}
+            register={register}
+          />
+        </GridSection>
+      </GridSection>
+    </div>
+  )
+}
+
+export default LeasingAgent

sites/public/pages/applications/contact/alternate-contact-contact.tsx

@@ -103,7 +103,7 @@ export default () => {
               name="emailAddress"
               label={t("application.alternateContact.contact.emailAddressFormLabel")}
               readerOnly={true}
-              placeholder={t("application.alternateContact.contact.emailAddressFormPlaceHolder")}
+              placeholder={t("t.emailAddressPlaceHolder")}
               defaultValue={application.alternateContact.emailAddress || null}
               register={register}
             />

ui-components/src/blocks/ViewItem.scss

@@ -26,7 +26,7 @@
 }
 
 .view-item__label {
-  @apply text-gray-750;
+  @apply text-gray-800;
   @apply font-sans;
   @apply text-tiny;
   @apply block;
@@ -44,7 +44,8 @@
   }
 
   // do not change font-family for inputs
-  .field .control .input, .error-message {
+  .field .control .input,
+  .error-message {
     @apply font-sans;
     @apply font-normal;
   }

ui-components/src/forms/Textarea.scss

@@ -4,8 +4,9 @@
   @apply border;
   @apply border-gray-500;
   @apply p-2;
-  @apply text-tiny;
-  @apply text-gray-750;
+  @apply text-gray-900;
+  @apply bg-gray-200;
+  font-size: 1rem;
 }
 
 .textarea-resize-off {

ui-components/src/global/forms.scss

@@ -7,9 +7,9 @@
 
   label,
   .label {
-    @apply text-gray-750;
-    @apply font-semibold;
-    font-size: 0.875rem;
+    @apply pb-2;
+    @apply text-tiny;
+    @apply text-gray-800;
   }
 
   label + .control {
@@ -34,7 +34,7 @@
 
     .input {
       @apply border;
-      @apply border-gray-450;
+      @apply border-gray-500;
       @apply bg-gray-200;
       @apply rounded;
       @apply w-full;
@@ -149,7 +149,7 @@
     @apply text-gray-900;
     @apply rounded;
     @apply border;
-    @apply border-gray-450;
+    @apply border-gray-500;
     @apply bg-gray-200;
     @apply text-gray-900;
     @apply leading-tight;
@@ -251,9 +251,9 @@ input[type="number"] {
 }
 
 .field-label {
-  @apply text-gray-750;
+  @apply pb-2;
   @apply text-tiny;
-  @apply font-semibold;
+  @apply text-gray-800;
 }
 
 .field-label--caps {

ui-components/src/locales/es.json

@@ -122,7 +122,6 @@
         "description": "Solo utilizaremos esta información para ponernos en contacto con él o ella en relación con su solicitud.",
         "phoneNumberFormLabel": "Número telefónico del contacto",
         "emailAddressFormLabel": "Dirección de email del contacto",
-        "emailAddressFormPlaceHolder": "you@myemail.com",
         "contactMailingAddressLabel": "Dirección postal del contacto",
         "contactMailingAddressHelperText": "Elija una dirección en donde su contacto pueda recibir información actualizada y materiales relacionados con su solicitud"
       }
@@ -673,6 +672,7 @@
     "deposit": "Depósito",
     "edit": "Editar",
     "email": "Email",
+    "emailAddressPlaceHolder": "you@myemail.com",
     "floor": "piso",
     "floors": "pisos",
     "getDirections": "Obtener instrucciones para llegar",

ui-components/src/locales/general.json

@@ -271,7 +271,6 @@
         "description": "We'll only use this information to contact them about your application.",
         "phoneNumberFormLabel": "Contact phone number",
         "emailAddressFormLabel": "Contact email address",
-        "emailAddressFormPlaceHolder": "you@myemail.com",
         "contactMailingAddressLabel": "Contact mailing address",
         "contactMailingAddressHelperText": "Choose an address where they can receive updates and materials about your application"
       }
@@ -703,7 +702,11 @@
   "leasingAgent": {
     "contact": "Contact Leasing Agent",
     "dueToHighCallVolume": "Due to high call volume you may hear a message.",
-    "officeHours": "Office Hours"
+    "name": "Leasing Agent Name",
+    "namePlaceholder": "Full Name",
+    "title": "Leasing Agent Title",
+    "officeHours": "Office Hours",
+    "officeHoursPlaceholder": "ex: 9:00am - 5:00pm, Monday to Friday"
   },
   "listings": {
     "active": "Accepting Applications",
@@ -841,6 +844,8 @@
       "featuresTitle": "Features",
       "housingPreferencesSubtitle": "Preference holders will be given highest ranking.",
       "housingPreferencesTitle": "Housing Preferences",
+      "leasingAgentSubtitle": "Provide details about the leasing agent who will be managing the application process.",
+      "leasingAgentTitle": "Leasing Agent",
       "neighborhoodSubtitle": "Location and transportation",
       "neighborhoodTitle": "Neighborhood",
       "processSubtitle": "Important dates and contact information",
@@ -1009,6 +1014,7 @@
     "deposit": "Deposit",
     "done": "Done",
     "description": "Enter Description",
+    "emailAddressPlaceholder": "you@myemail.com",
     "export": "Export",
     "enterAmount": "Enter amount",
     "filter": "Filter",

ui-components/src/locales/vi.json

@@ -119,7 +119,6 @@
         "description": "Chúng tôi sẽ chỉ sử dụng thông tin này để liên lạc với họ về đơn ghi danh của quý vị.",
         "phoneNumberFormLabel": "Số điện thoại của người liên lạc",
         "emailAddressFormLabel": "Địa chỉ email của người liên lạc",
-        "emailAddressFormPlaceHolder": "you@myemail.com",
         "contactMailingAddressLabel": "Địa chỉ thư bưu điện của người liên lạc",
         "contactMailingAddressHelperText": "Chọn một địa chỉ nơi họ có thể nhận các thông tin cập nhật và tài liệu về đơn ghi danh của quý vị"
       }
@@ -673,6 +672,7 @@
     "deposit": "Đặt cọc",
     "edit": "Hiệu đính",
     "email": "Email",
+    "emailAddressPlaceHolder": "you@myemail.com",
     "floor": "sàn",
     "floors": "các sàn",
     "getDirections": "Lấy hướng dẫn chỉ đường",

ui-components/src/locales/zh.json

@@ -119,7 +119,6 @@
         "description": "我們只會為您的申請事宜使用此資料聯絡他們。",
         "phoneNumberFormLabel": "聯絡人電話號碼",
         "emailAddressFormLabel": "聯絡人電郵地址",
-        "emailAddressFormPlaceHolder": "you@myemail.com",
         "contactMailingAddressLabel": "聯絡人郵寄地址",
         "contactMailingAddressHelperText": "請選擇一個他們可收到您最新申請消息和資料的地址"
       }
@@ -673,6 +672,7 @@
     "deposit": "訂金",
     "edit": "編輯",
     "email": "電子郵件",
+    "emailAddressPlaceHolder": "you@myemail.com",
     "floor": "樓層",
     "floors": "樓層",
     "getDirections": "取得路線",

ui-components/src/page_components/listing/listing_sidebar/LeasingAgent.tsx

@@ -22,22 +22,29 @@ const LeasingAgent = (props: LeasingAgentProps) => {
     <section className="aside-block">
       <h4 className="text-caps-underline">{t("leasingAgent.contact")}</h4>
 
-      <p className="text-xl">{listing.leasingAgentName}</p>
-      <p className="text-gray-700">{listing.leasingAgentTitle}</p>
-
-      <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>
-
-      <p className="my-5">
-        <a href={`mailto:${listing.leasingAgentEmail}`}>
-          <Icon symbol="mail" size="medium" fill={IconFillColors.primary} /> {t("t.email")}
-        </a>
-      </p>
+      {listing.leasingAgentName && <p className="text-xl">{listing.leasingAgentName}</p>}
+      {listing.leasingAgentTitle && <p className="text-gray-700">{listing.leasingAgentTitle}</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>
+      )}
+
       <SidebarAddress
         address={listing.leasingAgentAddress}
         officeHours={listing.leasingAgentOfficeHours}