feat: add geocoding preference label (#3765)

* feat: add additional fields info to add listing preferences * feat: add additional fields column to table * refactor: reuse additional field tag * refactor: change base tag style * fix: revert onClose drawer function
bloom-housing · Dec 18, 2023 · 2dfe7e3 · 2dfe7e3
1 parent a6acc08
commit 2dfe7e3
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 11 deletions.
diff --git a/sites/partners/page_content/locale_overrides/general.json b/sites/partners/page_content/locale_overrides/general.json
@@ -222,6 +222,8 @@
   "listings.pdfHelperText": "Select PDF file",
   "listings.pickupAddress": "Pickup Address",
   "listings.postmarksConsideredQuestion": "Are postmarks considered?",
+  "listings.providesAdditionalFields": "Provides additional fields",
+  "listings.providesAdditionalFields.info": "This preference provides additional details that will be included in the exported data",
   "listings.publishThisListing": "Publishing will push the listing live on the public site.",
   "listings.receivedByDate": "Received by Date",
   "listings.receivedByTime": "Received by Time",

diff --git a/sites/partners/src/components/applications/PaperApplicationForm/PaperApplicationForm.tsx b/sites/partners/src/components/applications/PaperApplicationForm/PaperApplicationForm.tsx
@@ -172,6 +172,7 @@ const ApplicationForm = ({ listingId, editMode, application }: ApplicationFormPr
       <>
         <StatusBar>
           <Tag
+            className="tag-uppercase"
             variant={application?.status == ApplicationStatus.submitted ? "success" : "primary"}
             size={"lg"}
           >

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react"
 import { t, MinimalTable, Drawer, Field, StandardTableData } from "@bloom-housing/ui-components"
-import { Button, Card, Grid } from "@bloom-housing/ui-seeds"
+import { Button, Card, Grid, Tag, Icon } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
 import { ApplicationSection, MultiselectQuestion } from "@bloom-housing/backend-core/types"
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
 import LinkComponent from "../../../../components/core/LinkComponent"
 import SectionWithGrid from "../../../shared/SectionWithGrid"
 
@@ -75,10 +76,21 @@ const SelectAndOrder = ({
     [draftListingData]
   )
 
+  const additionalFieldsTag = () => (
+    <Tag variant="primary">
+      <Icon icon={faInfoCircle} /> {t("listings.providesAdditionalFields")}
+    </Tag>
+  )
+
   const draggableTableData: StandardTableData = useMemo(
     () =>
       draftListingData.map((item) => ({
         name: { content: item.text },
+        additionalFields: {
+          content: (
+            <>{item?.options.some((item) => item.collectAddress) && additionalFieldsTag()}</>
+          ),
+        },
         action: {
           content: (
             <div className="flex">
@@ -104,6 +116,11 @@ const SelectAndOrder = ({
       listingData.map((item, index) => ({
         order: { content: index + 1 },
         name: { content: item.text },
+        additionalFields: {
+          content: (
+            <>{item?.options.some((item) => item.collectAddress) && additionalFieldsTag()}</>
+          ),
+        },
         action: {
           content: (
             <div className="flex">
@@ -145,11 +162,17 @@ const SelectAndOrder = ({
   const formTableHeaders = {
     order: "t.order",
     name: "t.name",
+    ...(formKey === "preference" && {
+      additionalFields: "settings.preferenceAdditionalFields",
+    }),
     action: "",
   }
 
   const draggableTableHeaders = {
     name: "t.name",
+    ...(formKey === "preference" && {
+      additionalFields: "settings.preferenceAdditionalFields",
+    }),
     action: "",
   }
 
@@ -188,11 +211,19 @@ const SelectAndOrder = ({
               })}
             </div>
           )}
+          {option.collectAddress && (
+            <div className={`${isNotLastItem ? "-mt-4" : "mt-0"}`}>
+              ({t("listings.providesAdditionalFields.info")})
+            </div>
+          )}
         </div>
       )
     }
     return (
       <div className="ml-8 -mt-6 mb-4 text-sm">
+        {item.options.some((option) => option.collectAddress) && (
+          <div className="mt-6 mb-2">{additionalFieldsTag()}</div>
+        )}
         <div>
           <button
             onClick={() => {

diff --git a/sites/partners/src/components/listings/helpers.tsx b/sites/partners/src/components/listings/helpers.tsx
@@ -7,31 +7,51 @@ export const getListingStatusTag = (listingStatus: ListingStatus) => {
   switch (listingStatus) {
     case ListingStatus.active:
       return (
-        <Tag variant={"success"} size={"lg"} id={"listing-status-active"}>
+        <Tag className="tag-uppercase" variant={"success"} size={"lg"} id={"listing-status-active"}>
           {t(`listings.listingStatus.active`)}
         </Tag>
       )
     case ListingStatus.closed:
       return (
-        <Tag variant={"secondary"} size={"lg"} id={"listing-status-closed"}>
+        <Tag
+          className="tag-uppercase"
+          variant={"secondary"}
+          size={"lg"}
+          id={"listing-status-closed"}
+        >
           {t(`listings.listingStatus.closed`)}
         </Tag>
       )
     case ListingStatus.pendingReview:
       return (
-        <Tag variant={"in-process"} size={"lg"} id={"listing-status-pending-review"}>
+        <Tag
+          className="tag-uppercase"
+          variant={"in-process"}
+          size={"lg"}
+          id={"listing-status-pending-review"}
+        >
           {t(`applications.pendingReview`)}
         </Tag>
       )
     case ListingStatus.changesRequested:
       return (
-        <Tag variant={"highlight-warm"} size={"lg"} id={"listing-status-changes-requested"}>
+        <Tag
+          className="tag-uppercase"
+          variant={"highlight-warm"}
+          size={"lg"}
+          id={"listing-status-changes-requested"}
+        >
           {t(`listings.listingStatus.changesRequested`)}
         </Tag>
       )
     default:
       return (
-        <Tag variant={"primary"} size={"lg"} id={"listing-status-pending"}>
+        <Tag
+          className="tag-uppercase"
+          variant={"primary"}
+          size={"lg"}
+          id={"listing-status-pending"}
+        >
           {t(`listings.listingStatus.pending`)}
         </Tag>
       )

diff --git a/sites/partners/src/components/users/FormUserManage.tsx b/sites/partners/src/components/users/FormUserManage.tsx
@@ -306,7 +306,10 @@ const FormUserManage = ({
 
                   {mode === "edit" && (
                     <div className="ml-2 mt-1 flex items-center justify-center">
-                      <Tag variant={user.confirmedAt ? "success" : "primary"}>
+                      <Tag
+                        className="tag-uppercase"
+                        variant={user.confirmedAt ? "success" : "primary"}
+                      >
                         {user.confirmedAt ? t("users.confirmed") : t("users.unconfirmed")}
                       </Tag>
                     </div>

diff --git a/sites/partners/src/pages/application/[id]/index.tsx b/sites/partners/src/pages/application/[id]/index.tsx
@@ -51,19 +51,19 @@ export default function ApplicationsList() {
     switch (application?.status) {
       case ApplicationStatus.submitted:
         return (
-          <Tag variant={"success"} size={"lg"}>
+          <Tag className="tag-uppercase" variant={"success"} size={"lg"}>
             {t(`application.details.applicationStatus.submitted`)}
           </Tag>
         )
       case ApplicationStatus.removed:
         return (
-          <Tag variant={"highlight-warm"} size={"lg"}>
+          <Tag className="tag-uppercase" variant={"highlight-warm"} size={"lg"}>
             {t(`application.details.applicationStatus.removed`)}
           </Tag>
         )
       default:
         return (
-          <Tag variant={"primary"} size={"lg"}>
+          <Tag className="tag-uppercase" variant={"primary"} size={"lg"}>
             {t(`application.details.applicationStatus.draft`)}
           </Tag>
         )

diff --git a/sites/partners/src/pages/application/[id]/review.tsx b/sites/partners/src/pages/application/[id]/review.tsx
@@ -126,6 +126,7 @@ const Flag = () => {
           }
         >
           <Tag
+            className="tag-uppercase"
             variant={
               data?.status === EnumApplicationFlaggedSetStatus.resolved ? "success" : "primary"
             }

diff --git a/sites/partners/styles/overrides.scss b/sites/partners/styles/overrides.scss
@@ -3,7 +3,7 @@
     --field-value-label-color: var(--seeds-color-alert);
   }
 
-  .seeds-tag {
+  .tag-uppercase {
     text-transform: uppercase;
     letter-spacing: var(--seeds-letter-spacing-wider);
     // Allows for status tags to take up the full width of their container
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,7 @@ const Flag = () => { @@
               }
             >
               <Tag
+                className="tag-uppercase"
                 variant={
                   data?.status === EnumApplicationFlaggedSetStatus.resolved ? "success" : "primary"
                 }
@@ Expand Down @@