@bloom-housing/ui-components 4.2.2-alpha.16 → 4.2.2-alpha.19

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.18...@bloom-housing/ui-components@4.2.2-alpha.19) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.17...@bloom-housing/ui-components@4.2.2-alpha.18) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.16...@bloom-housing/ui-components@4.2.2-alpha.17) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.2.2-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.15...@bloom-housing/ui-components@4.2.2-alpha.16) (2022-04-27)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.16",
+  "version": "4.2.2-alpha.19",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -70,7 +70,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.2.2-alpha.4",
+    "@bloom-housing/backend-core": "^4.2.2-alpha.5",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -102,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "b720633cb8f3d9f69c5cd8d7093088d13a61046d"
+  "gitHead": "1f533505104083c02e2bacd3b23d39de95273ea9"
 }

package/src/helpers/address.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import Markdown from "markdown-to-jsx"
 
 export interface Address {
   city?: string
@@ -38,9 +37,11 @@ export const MultiLineAddress = (props: AddressProps) => {
           <br />
         </>
       )}
-      <Markdown children={props.address.street || ""} />
-      <br />
-      {props.address.city}, {props.address.state} {props.address.zipCode}
+      {props.address.street} {props.address.street2}
+      {(props.address.street || props.address.street2) && <br />}
+      {props.address.city}
+      {props.address.city && (props.address.state || props.address.zipCode) && ","}{" "}
+      {props.address.state} {props.address.zipCode}
     </>
   )
 }

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>
   )
 }