@bloom-housing/ui-components 4.2.3 → 4.3.0

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -62,8 +62,8 @@ const FormForgotPassword = ({
         </AlertBox>
       )}
 
-      {!!networkError.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"householdsize-error"} error={!!networkError.error}>
+      {!!networkError.error?.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -76,7 +76,7 @@ const FormForgotPassword = ({
 
       <SiteAlert type="notice" dismissable />
 
-      <div className="form-card__group pt-0 border-b">
+      <div className="form-card__group pt-0">
         <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
@@ -86,8 +86,9 @@ const FormForgotPassword = ({
             error={errors.email}
             errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
             register={register}
+            onChange={() => networkError.reset()}
           />
-          <section className="bg-gray-300">
+          <section>
             <div className="text-center mt-6">
               <Button styleType={AppearanceStyleType.primary}>
                 {t("authentication.forgotPassword.sendEmail")}

package/src/page_components/listing/AdditionalFees.tsx

@@ -1,49 +1,56 @@
 import * as React from "react"
-import { t } from "../../helpers/translator"
 
 export interface AdditionalFeesProps {
-  depositMin?: string
-  depositMax?: string
+  /** The application fee for the property, rendered in the first block */
   applicationFee?: string
-  costsNotIncluded?: string
-  depositHelperText?: string
-}
-
-const AdditionalFees = (props: AdditionalFeesProps) => {
-  if (!props.depositMin && !props.depositMax && !props.applicationFee && !props.costsNotIncluded) {
-    return <></>
+  /** Costs not included in the deposit or application fee, rendered below both blocks */
+  costsNotIncluded?: string | React.ReactNode
+  /** The deposit amount for the property, rendered in the second block */
+  deposit?: string
+  strings: {
+    sectionHeader: string
+    deposit?: string
+    depositSubtext?: string[]
+    applicationFee?: string
+    applicationFeeSubtext?: string[]
   }
+}
 
-  const getDeposit = () => {
-    const min = props.depositMin
-    const max = props.depositMax
-    if (min && max && min !== max) {
-      return `$${min} – $${max}`
-    } else if (min) return `$${min}`
-    else return `$${max}`
-  }
+const AdditionalFees = ({
+  deposit,
+  applicationFee,
+  costsNotIncluded,
+  strings,
+}: AdditionalFeesProps) => {
   return (
     <div className="info-card bg-gray-100 border-0">
-      <p className="info-card__title">{t("listings.sections.additionalFees")}</p>
+      <p className="info-card__title mb-2">{strings.sectionHeader}</p>
       <div className="info-card__columns text-sm">
-        {props.applicationFee && (
-          <div className="info-card__column">
-            <div className="text-base">{t("listings.applicationFee")}</div>
-            <div className="text-xl font-bold">${props.applicationFee}</div>
-            <div>{t("listings.applicationPerApplicantAgeDescription")}</div>
-            <div>{t("listings.applicationFeeDueAt")}</div>
+        {applicationFee && (
+          <div className={`info-card__column ${deposit && "mr-2"}`}>
+            <div className="text-base">{strings.applicationFee}</div>
+            <div className="text-xl font-bold">{applicationFee}</div>
+            {strings.applicationFeeSubtext?.map((appFeeSubtext, index) => (
+              <div key={index}>{appFeeSubtext}</div>
+            ))}
           </div>
         )}
-        {(props.depositMin || props.depositMax) && (
-          <div className="info-card__column">
-            <div className="text-base">{t("t.deposit")}</div>
-            <div className="text-xl font-bold">{getDeposit()}</div>
-            {props.depositHelperText && <div>{props.depositHelperText}</div>}
+        {deposit && (
+          <div className={`info-card__column ${applicationFee && "ml-2"}`}>
+            <div className="text-base">{strings.deposit}</div>
+            <div className="text-xl font-bold">{deposit}</div>
+            {strings.depositSubtext?.map((depositSubtext, index) => (
+              <div key={index}>{depositSubtext}</div>
+            ))}
           </div>
         )}
       </div>
 
-      {props.costsNotIncluded && <p className="text-sm mt-6">{props.costsNotIncluded}</p>}
+      {costsNotIncluded && (
+        <p className={`text-sm mt-2 ${(applicationFee || deposit) && `mt-6`}`}>
+          {costsNotIncluded}
+        </p>
+      )}
     </div>
   )
 }

package/src/page_components/listing/ListingCard.scss

@@ -19,6 +19,7 @@
 .listings-row_figure {
   @apply w-full;
   @apply p-3;
+  @apply pb-0;
 
   @screen lg {
     @apply w-6/12;
@@ -32,6 +33,17 @@
   @screen lg {
     @apply w-6/12;
   }
+
+  .listings-row_headers {
+    @apply flex;
+    @apply flex-col;
+    @apply items-center;
+    @apply text-center;
+    @screen md {
+      @apply items-start;
+      @apply text-left;
+    }
+  }
 }
 
 .listings-row_table {

package/src/page_components/listing/ListingCard.tsx

@@ -122,8 +122,10 @@ const ListingCard = (props: ListingCardProps) => {
             (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
               <hr className={"mb-2"} />
             )}
-          {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
-          {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          <div className={"listings-row_headers"}>
+            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
@@ -159,7 +161,7 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        <div>{getContentHeader()}</div>
+        <div className={"listings-row_headers"}>{getContentHeader()}</div>
         {getContent()}
       </div>
     </article>

package/src/page_components/listing/ListingMap.tsx

@@ -3,8 +3,9 @@ import "mapbox-gl/dist/mapbox-gl.css"
 import MapGL, { Marker } from "react-map-gl"
 
 import "./ListingMap.scss"
-import { MultiLineAddress, Address } from "../../helpers/address"
+import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
 import { useIntersect } from "../../.."
+import { Heading } from "../../headers/Heading"
 
 export interface ListingMapProps {
   address?: Address
@@ -107,7 +108,11 @@ const ListingMap = (props: ListingMapProps) => {
   return (
     <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
-        {props.listingName && <h3 className="text-caps-tiny">{props.listingName}</h3>}
+        {props.listingName && (
+          <Heading priority={3} style={"sidebarSubHeader"}>
+            {props.listingName}
+          </Heading>
+        )}
         <MultiLineAddress address={props.address} />
       </div>
       {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (

package/src/page_components/listing/UnitTables.tsx

@@ -1,11 +1,10 @@
 import React from "react"
-import { nanoid } from "nanoid"
 import { MinMax, UnitSummary, Unit } from "@bloom-housing/backend-core/types"
 
-import { StandardTable } from "../../tables/StandardTable"
+import { StandardTable, StandardTableData } from "../../tables/StandardTable"
 import { t } from "../../helpers/translator"
 import { numberOrdinal } from "../../helpers/numberOrdinal"
-import ContentAccordion from "./ContentAccordion"
+import { ContentAccordion } from "./ContentAccordion"
 
 const formatRange = (range: MinMax, ordinalize?: boolean) => {
   let min: string | number = range.min
@@ -50,24 +49,26 @@ const UnitTables = (props: UnitTablesProps) => {
         const units = props.units.filter(
           (unit: Unit) => unit.unitType?.name == unitSummary.unitType.name
         )
-        const unitsFormatted = [] as Array<Record<string, React.ReactNode>>
+        const unitsFormatted = [] as StandardTableData
         let floorSection: React.ReactNode
         units.forEach((unit: Unit) => {
           unitsFormatted.push({
-            number: unit.number,
-            sqFeet: (
-              <>
-                {unit.sqFeet ? (
-                  <>
-                    <strong>{parseInt(unit.sqFeet)}</strong> {t("t.sqFeet")}
-                  </>
-                ) : (
-                  <></>
-                )}
-              </>
-            ),
-            numBathrooms: <strong>{unit.numBathrooms}</strong>,
-            floor: <strong>{unit.floor}</strong>,
+            number: { content: unit.number },
+            sqFeet: {
+              content: (
+                <>
+                  {unit.sqFeet ? (
+                    <>
+                      <strong>{parseInt(unit.sqFeet)}</strong> {t("t.sqFeet")}
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                </>
+              ),
+            },
+            numBathrooms: { content: <strong>{unit.numBathrooms}</strong> },
+            floor: { content: <strong>{unit.floor}</strong> },
           })
         })
 

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

@@ -0,0 +1,110 @@
+import * as React from "react"
+import { ContactAddress } from "./ContactAddress"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { Heading } from "../../../headers/Heading"
+
+export interface ContactProps {
+  /** Any number of text sections rendered after the contact information */
+  additionalInformation?: { title: string; content: string | React.ReactNode }[]
+  /** The contact's address */
+  contactAddress?: Address
+  /** The contact's company and website */
+  contactCompany?: { name: string; website: string }
+  /** The contact's email */
+  contactEmail?: string
+  /** The contact's name */
+  contactName?: string
+  /** The contact's phone number */
+  contactPhoneNumber?: string
+  /** Additional information pertaining to the contact's phone number */
+  contactPhoneNumberNote?: string
+  /** The contact's title */
+  contactTitle?: string
+  /** The text for the section's header */
+  sectionTitle: string
+  strings: { email?: string; getDirections: string; website?: string }
+}
+
+/** Displays information about a contact, including their address, contact information, and notes */
+const Contact = ({
+  additionalInformation,
+  contactAddress,
+  contactCompany,
+  contactEmail,
+  contactName,
+  contactPhoneNumber,
+  contactPhoneNumberNote,
+  contactTitle,
+  sectionTitle,
+  strings,
+}: ContactProps) => {
+  const formattedPhoneLink = contactPhoneNumber
+    ? `tel:${contactPhoneNumber.replace(/[-()]/g, "")}`
+    : undefined
+  const formattedCompanyWebsite =
+    contactCompany?.website && !contactCompany?.website.startsWith("http")
+      ? `http://${contactCompany?.website}`
+      : contactCompany?.website
+
+  return (
+    <section className="aside-block">
+      <Heading priority={4} style={"sidebarHeader"}>
+        {sectionTitle}
+      </Heading>
+
+      {contactName && <p className="text-xl">{contactName}</p>}
+      {contactTitle && <p className="text-gray-700">{contactTitle}</p>}
+      {contactCompany?.name && <p className="text-gray-700">{contactCompany.name}</p>}
+
+      {contactPhoneNumber && (
+        <>
+          <p className="mt-3">
+            <a href={formattedPhoneLink}>
+              <Icon symbol="phone" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+              {contactPhoneNumber}
+            </a>
+          </p>
+          {contactPhoneNumberNote && (
+            <p className="text-sm text-gray-700">{contactPhoneNumberNote}</p>
+          )}
+        </>
+      )}
+
+      {contactEmail && (
+        <p className="my-3">
+          <a href={`mailto:${contactEmail}`}>
+            <Icon symbol="mail" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.email && strings?.email}
+          </a>
+        </p>
+      )}
+
+      {formattedCompanyWebsite && (
+        <p className="my-3">
+          <a href={formattedCompanyWebsite} target="_blank" rel="noreferrer noopener">
+            <Icon symbol="globe" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.website && strings?.website}
+          </a>
+        </p>
+      )}
+
+      {contactAddress && (
+        <ContactAddress address={contactAddress} mapString={strings.getDirections} />
+      )}
+
+      {additionalInformation?.map((info) => {
+        return (
+          <>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {info.title}
+            </Heading>
+            <div className="text-gray-800 text-tiny markdown">{info.content}</div>
+          </>
+        )
+      })}
+    </section>
+  )
+}
+
+export { Contact as default, Contact }

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

@@ -0,0 +1,41 @@
+import * as React from "react"
+import ReactDOMServer from "react-dom/server"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { MultiLineAddress, Address } from "../../../helpers/MultiLineAddress"
+import { OneLineAddress } from "../../../helpers/OneLineAddress"
+
+export interface ContactAddressProps {
+  /** An address */
+  address: Address
+  /** A string for the map link */
+  mapString: string
+}
+
+/** Renders an address followed by a Google Maps link to the address */
+const ContactAddress = ({ address, mapString }: ContactAddressProps) => {
+  if (!address?.street) return null
+
+  const oneLineAddress = <OneLineAddress address={address} />
+  const mainAddress = <MultiLineAddress address={address} />
+  const googleMapsHref =
+    "https://www.google.com/maps/place/" + ReactDOMServer.renderToStaticMarkup(oneLineAddress)
+
+  return (
+    <>
+      <p className="text-gray-700 mb-1">{mainAddress}</p>
+      <p className="mb-4">
+        <a
+          href={googleMapsHref}
+          className="inline-block pt-1"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Icon symbol="map" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+          {mapString}
+        </a>
+      </p>
+    </>
+  )
+}
+
+export { ContactAddress as default, ContactAddress }

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

@@ -3,10 +3,11 @@ import { t } from "../../../helpers/translator"
 import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
+import { Heading } from "../../../headers/Heading"
+import Markdown from "markdown-to-jsx"
 
 export interface PaperApplication {
   fileURL: string
@@ -14,26 +15,30 @@ export interface PaperApplication {
 }
 
 export interface ApplicationsProps {
-  onlineApplicationURL?: string
+  /** The pickup address for the application */
+  applicationPickUpAddress?: Address
+  /** Office hours for the agent at the pickup address */
+  applicationPickUpAddressOfficeHours?: string
+  /** Whether or not applications are currently open */
   applicationsOpen: boolean
+  /** The date applications open */
   applicationsOpenDate?: string
+  /** The URL for an online applications */
+  onlineApplicationURL?: string
+  /** Any number of paper application objects, including their URL and language */
   paperApplications?: PaperApplication[]
+  /** Whether or not there is a paper application method */
   paperMethod?: boolean
+  /** The date mailed applications must be received by */
   postmarkedApplicationsReceivedByDate?: string
-  applicationPickUpAddressOfficeHours?: string
-  applicationPickUpAddress?: Address
+  /** Whether or not to hide actionable application buttons */
   preview?: boolean
-  listingStatus?: ListingStatus
 }
-
+/** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
   const [showDownload, setShowDownload] = useState(false)
   const toggleDownload = () => setShowDownload(!showDownload)
 
-  if (props.listingStatus === ListingStatus.closed) {
-    return null
-  }
-
   return (
     <section className="aside-block">
       <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
@@ -95,11 +100,26 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <h3 className="text-caps-tiny">{t("listings.apply.pickUpAnApplication")}</h3>
-          <SidebarAddress
+          <Heading priority={3} style={"sidebarSubHeader"}>
+            {t("listings.apply.pickUpAnApplication")}
+          </Heading>
+          <ContactAddress
             address={props.applicationPickUpAddress}
-            officeHours={props.applicationPickUpAddressOfficeHours}
+            mapString={t("t.getDirections")}
           />
+          {props.applicationPickUpAddressOfficeHours && (
+            <>
+              <Heading priority={3} style={"sidebarSubHeader"}>
+                {t("leasingAgent.officeHours")}
+              </Heading>
+              <p className="text-gray-800 text-tiny markdown">
+                <Markdown
+                  children={props.applicationPickUpAddressOfficeHours}
+                  options={{ disableParsingRawHTML: true }}
+                />
+              </p>
+            </>
+          )}
         </>
       )}
     </section>

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+export interface QuantityRow {
+  amount: number | null
+  text: string
+  emphasized?: boolean
+}
+
+export interface QuantityRowSectionProps {
+  /** Any amount of number/text combinations, rendered in a list */
+  quantityRows: QuantityRow[]
+  strings: {
+    sectionTitle: string
+    description?: string | React.ReactNode
+  }
+}
+
+const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps) => {
+  const getRow = (row: QuantityRow) => {
+    return (
+      <li
+        key={row.text}
+        className={`uppercase text-gray-800 ${
+          row.emphasized ? "font-bold" : "font-normal"
+        } font-alt-sans leading-7`}
+      >
+        <span className="text-right w-12 inline-block pr-2.5 text-base">{row.amount}</span>
+        <span className={"text-sm"}>{row.text}</span>
+      </li>
+    )
+  }
+
+  return (
+    <section className="aside-block is-tinted">
+      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <div>
+        {strings.description && (
+          <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>
+        )}
+        {quantityRows.length && <ul>{quantityRows.map((row) => getRow(row))}</ul>}
+      </div>
+    </section>
+  )
+}
+
+export { QuantityRowSection as default, QuantityRowSection }

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

@@ -1,78 +1,73 @@
 import * as React from "react"
-import { t } from "../../../helpers/translator"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import Markdown from "markdown-to-jsx"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
-
-export interface PostmarkedApplication {
-  postmarkedApplicationsReceivedByDate: string | null
-  developer: string
-  applicationsDueDate: string | null
-}
+import { Heading } from "../../../headers/Heading"
 
 export interface ApplicationAddressesProps {
-  applicationMailingAddress?: Address
+  /** The dropoff address for paper applications */
   applicationDropOffAddress?: Address
+  /** Office hours for developers at the dropoff address for paper applications */
   applicationDropOffAddressOfficeHours?: string
+  /** The mailing address for paper applications */
+  applicationMailingAddress?: Address
+  /** The application organization, often the developer */
   applicationOrganization?: string
-  postmarkedApplicationData?: PostmarkedApplication
-  listingStatus?: ListingStatus
-}
-
-const SubmitApplication = (props: ApplicationAddressesProps) => {
-  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 })
-    }
+  strings: {
+    postmark?: string
+    mailHeader?: string
+    sectionHeader?: string
+    dropOffHeader?: string
+    officeHoursHeader?: string
+    mapString: string
   }
+}
 
+/** Displays information regarding paper applications, including two sections: (1) how to mail in applications and (2) how to drop off applications */
+const SubmitApplication = ({
+  applicationDropOffAddress,
+  applicationDropOffAddressOfficeHours,
+  applicationMailingAddress,
+  applicationOrganization,
+  strings,
+}: ApplicationAddressesProps) => {
   return (
     <>
       <section className="aside-block is-tinted bg-gray-100">
-        <div className="text-serif-lg">{t("listings.apply.submitAPaperApplication")}</div>
-        {props.applicationMailingAddress && (
+        <div className="text-serif-lg">{strings.sectionHeader}</div>
+        {applicationMailingAddress && (
           <>
-            <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.mailHeader}
+            </Heading>
             <>
-              <p className="text-gray-700">{props.applicationOrganization}</p>
-              <SidebarAddress address={props.applicationMailingAddress} />
+              <p className="text-gray-700">{applicationOrganization}</p>
+              <ContactAddress address={applicationMailingAddress} mapString={strings.mapString} />
             </>
-            <p className="mt-4 text-tiny text-gray-750">{getPostmarkString()}</p>
+            {strings.postmark && <p className="mt-4 text-tiny text-gray-750">{strings.postmark}</p>}
           </>
         )}
-        {props.applicationDropOffAddress && (
+        {applicationDropOffAddress && (
           <>
-            {props.applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
-            <SidebarAddress
-              address={props.applicationDropOffAddress}
-              officeHours={props.applicationDropOffAddressOfficeHours}
-            />
+            {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.dropOffHeader}
+            </Heading>
+            <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
+            {applicationDropOffAddressOfficeHours && (
+              <>
+                <Heading priority={3} style={"sidebarSubHeader"}>
+                  {strings.officeHoursHeader}
+                </Heading>
+                <p className="mt-4 text-tiny text-gray-750">
+                  <Markdown
+                    children={applicationDropOffAddressOfficeHours}
+                    options={{ disableParsingRawHTML: true }}
+                  />
+                </p>
+              </>
+            )}
           </>
         )}
       </section>