-
- When two parties share the same business address, we group them as part of the same
- portfolio.
-
-
-
-
- Some large corporations, however, are a bit more complicated and may share personnel and
- financial stake with other related companies, which all will show up on Who Owns What as
- one large portfolio.
-
-
-
-
-
-
-
- We’ve improved Who Owns What to dig deeper into the data and offer you a more complete
- picture of buildings associated with your landlord.{" "}
-
- Read more in our methodology article
-
-
-
-
-
- ) : (
- <>>
- );
-};
diff --git a/client/src/components/PortfolioAlerts.tsx b/client/src/components/PortfolioAlerts.tsx
new file mode 100644
index 000000000..00d0c3ac6
--- /dev/null
+++ b/client/src/components/PortfolioAlerts.tsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { Trans } from "@lingui/macro";
+import classNames from "classnames";
+import { Link, useLocation } from "react-router-dom";
+import networkDiagram from "../assets/img/network-diagram.png";
+import { AddressPageRoutes } from "../routes";
+import { Alert, AlertProps } from "./Alert";
+import { logAmplitudeEvent } from "./Amplitude";
+import Modal from "./Modal";
+import { isLegacyPath } from "./WowzaToggle";
+
+export const BIG_PORTFOLIO_THRESHOLD = 300;
+export const FILTER_PORTFOLIO_THRESHOLD = 15;
+
+type PortfolioAlertProps = Omit & {
+ portfolioSize: number;
+};
+
+type FilterPortfolioAlertProps = PortfolioAlertProps & {
+ addressPageRoutes: AddressPageRoutes;
+};
+
+export const BigPortfolioAlert = ({ portfolioSize, className, ...props }: PortfolioAlertProps) => {
+ const [isLearnMoreModalVisible, setModalVisibility] = useState(false);
+ const { pathname } = useLocation();
+
+ // Preload modal image when BigPortfolioBanner mounts:
+ useEffect(() => {
+ new Image().src = networkDiagram;
+ }, []);
+
+ return !isLegacyPath(pathname) && portfolioSize > BIG_PORTFOLIO_THRESHOLD ? (
+
+ <>
+ Why am I seeing such a big portfolio?{" "}
+
+ setModalVisibility(false)}>
+
+ Why am I seeing such a big portfolio?
+
+
+
+ When two parties share the same business address, we group them as part of the same
+ portfolio.
+
+
+
+
+ Some large corporations, however, are a bit more complicated and may share personnel
+ and financial stake with other related companies, which all will show up on Who Owns
+ What as one large portfolio.
+
+
+
+
+
+
+
+ We’ve improved Who Owns What to dig deeper into the data and offer you a more complete
+ picture of buildings associated with your landlord.{" "}
+
+ Read more in our methodology article
+
+
+
) : (
<>>
diff --git a/client/src/components/PropertiesSummary.tsx b/client/src/components/PropertiesSummary.tsx
index 06f421c2a..231f0d211 100644
--- a/client/src/components/PropertiesSummary.tsx
+++ b/client/src/components/PropertiesSummary.tsx
@@ -17,7 +17,7 @@ import { I18n } from "@lingui/core/i18n";
import { I18n as I18nComponent } from "@lingui/react";
import { PortfolioGraph } from "./PortfolioGraph";
import { ComplaintsSummary } from "./ComplaintsSummary";
-import { BigPortfolioBanner } from "./MapBanner";
+import { BigPortfolioAlert } from "./PortfolioAlerts";
import { LazyLoadWhenVisible } from "./LazyLoadWhenVisible";
type Props = withMachineInStateProps<"portfolioFound"> & {
@@ -105,7 +105,11 @@ export default class PropertiesSummary extends Component {
graphJSON={state.context.portfolioData.portfolioGraph}
state={state}
/>
-
+
)}
diff --git a/client/src/containers/AddressPage.tsx b/client/src/containers/AddressPage.tsx
index 84ef6e2db..efa5d24d6 100644
--- a/client/src/containers/AddressPage.tsx
+++ b/client/src/containers/AddressPage.tsx
@@ -234,6 +234,7 @@ export default class AddressPage extends Component {
window.gtag("event", "address-change-map");
}}
isVisible={this.props.currentTab === 0}
+ addressPageRoutes={routes}
/>
the Portfolio tab.0>"
+msgstr "Filter through this portfolio in <0>the Portfolio tab.0>"
+
#: src/components/PortfolioFilters.tsx:175
msgid "Filters"
msgstr "Filters"
@@ -647,11 +651,14 @@ msgid "Last sold:"
msgstr "Last sold:"
#: src/components/DetailView.tsx:58
-#: src/components/MapBanner.tsx:28
msgid "Learn more"
msgstr "Learn more"
-#: src/components/PropertiesMap.tsx:206
+#: src/components/PortfolioAlerts.tsx:39
+msgid "Learn more."
+msgstr "Learn more."
+
+#: src/components/PropertiesMap.tsx:207
msgid "Legend"
msgstr "Legend"
@@ -1118,7 +1125,7 @@ msgstr "Site Manager"
msgid "Sold to Current Owner"
msgstr "Sold to Current Owner"
-#: src/components/MapBanner.tsx:44
+#: src/components/PortfolioAlerts.tsx:52
msgid "Some large corporations, however, are a bit more complicated and may share personnel and financial stake with other related companies, which all will show up on Who Owns What as one large portfolio."
msgstr "Some large corporations, however, are a bit more complicated and may share personnel and financial stake with other related companies, which all will show up on Who Owns What as one large portfolio."
@@ -1388,7 +1395,7 @@ msgstr "View data over time ↗︎"
msgid "View documents on <0>ACRIS0>"
msgstr "View documents on <0>ACRIS0>"
-#: src/components/PropertiesMap.tsx:206
+#: src/components/PropertiesMap.tsx:207
msgid "View legend"
msgstr "View legend"
@@ -1451,7 +1458,7 @@ msgstr "We reorganized the contact details for each individual and corporate ent
#~ msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our Medium article0>"
#~ msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our Medium article0>"
-#: src/components/MapBanner.tsx:54
+#: src/components/PortfolioAlerts.tsx:62
msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our methodology article0>"
msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our methodology article0>"
@@ -1480,7 +1487,7 @@ msgstr "What's this?"
msgid "What’s the difference between a landlord, an owner, and head officer?"
msgstr "What’s the difference between a landlord, an owner, and head officer?"
-#: src/components/MapBanner.tsx:38
+#: src/components/PortfolioAlerts.tsx:46
msgid "When two parties share the same business address, we group them as part of the same portfolio."
msgstr "When two parties share the same business address, we group them as part of the same portfolio."
@@ -1511,8 +1518,8 @@ msgstr "Who’s responsible for issues in your apartment & building? #WhoOwnsWha
msgid "Who’s the landlord of this building?"
msgstr "Who’s the landlord of this building?"
-#: src/components/MapBanner.tsx:28
-#: src/components/MapBanner.tsx:35
+#: src/components/PortfolioAlerts.tsx:33
+#: src/components/PortfolioAlerts.tsx:43
msgid "Why am I seeing such a big portfolio?"
msgstr "Why am I seeing such a big portfolio?"
@@ -1575,7 +1582,7 @@ msgstr "Zoom out"
msgid "and"
msgstr "and"
-#: src/components/PropertiesMap.tsx:213
+#: src/components/PropertiesMap.tsx:214
msgid "associated building"
msgstr "associated building"
@@ -1595,7 +1602,7 @@ msgstr "of"
msgid "quarter"
msgstr "quarter"
-#: src/components/PropertiesMap.tsx:212
+#: src/components/PropertiesMap.tsx:213
msgid "search address"
msgstr "search address"
diff --git a/client/src/locales/es/messages.po b/client/src/locales/es/messages.po
index f3f14c3b3..b9f785bc5 100644
--- a/client/src/locales/es/messages.po
+++ b/client/src/locales/es/messages.po
@@ -55,7 +55,7 @@ msgstr "(pase el cursor sobre una casilla para aprender más)"
msgid "(this may take a while)"
msgstr "(esto puede tardar un rato)"
-#: src/components/PropertiesMap.tsx:218
+#: src/components/PropertiesMap.tsx:219
msgid "({browserType, select, mobile {tap} other {click}} to view details)"
msgstr "({browserType, select, mobile {pulsa} other {haz clic}} para ver detalles)"
@@ -287,7 +287,7 @@ msgstr "HaZ clic aquí para obtener más información."
msgid "Close"
msgstr "Cerrar"
-#: src/components/PropertiesMap.tsx:206
+#: src/components/PropertiesMap.tsx:207
msgid "Close legend"
msgstr "Cerrar leyenda"
@@ -470,6 +470,10 @@ msgstr "Presentado"
msgid "Filter"
msgstr ""
+#: src/components/PortfolioAlerts.tsx:78
+msgid "Filter through this portfolio in <0>the Portfolio tab.0>"
+msgstr ""
+
#: src/components/PortfolioFilters.tsx:175
msgid "Filters"
msgstr ""
@@ -652,11 +656,14 @@ msgid "Last sold:"
msgstr "Vendido por última vez:"
#: src/components/DetailView.tsx:58
-#: src/components/MapBanner.tsx:28
msgid "Learn more"
msgstr "Aprende más"
-#: src/components/PropertiesMap.tsx:206
+#: src/components/PortfolioAlerts.tsx:39
+msgid "Learn more."
+msgstr ""
+
+#: src/components/PropertiesMap.tsx:207
msgid "Legend"
msgstr "Leyenda"
@@ -1123,7 +1130,7 @@ msgstr "Administrador del Sitio"
msgid "Sold to Current Owner"
msgstr "Vendido al Propietario Actual"
-#: src/components/MapBanner.tsx:44
+#: src/components/PortfolioAlerts.tsx:52
msgid "Some large corporations, however, are a bit more complicated and may share personnel and financial stake with other related companies, which all will show up on Who Owns What as one large portfolio."
msgstr "Sin embargo, algunas grandes corporaciones son un poco más complicadas y pueden compartir personal y participación financiera con otras compañías relacionadas, que todos se mostrarán en Quién es el Dueño como un gran portafolio."
@@ -1393,7 +1400,7 @@ msgstr "Ver datos a lo largo del tiempo ↗︎"
msgid "View documents on <0>ACRIS0>"
msgstr "Ver documentos en <0>ACRIS0>"
-#: src/components/PropertiesMap.tsx:206
+#: src/components/PropertiesMap.tsx:207
msgid "View legend"
msgstr "Ver leyenda"
@@ -1456,7 +1463,7 @@ msgstr "Reorganizamos los datos de contacto de cada entidad individual y corpora
#~ msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our Medium article0>"
#~ msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our Medium article0>"
-#: src/components/MapBanner.tsx:54
+#: src/components/PortfolioAlerts.tsx:62
msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more in our methodology article0>"
msgstr "Hemos mejorado ¿Quién es el Dueño en NY? para profundizar en los datos y ofrecerle una imagen más completa de los edificios asociados a su dueño. <0>Más información en nuestro artículo sobre metodología0>"
@@ -1485,7 +1492,7 @@ msgstr ""
msgid "What’s the difference between a landlord, an owner, and head officer?"
msgstr ""
-#: src/components/MapBanner.tsx:38
+#: src/components/PortfolioAlerts.tsx:46
msgid "When two parties share the same business address, we group them as part of the same portfolio."
msgstr "Cuando dos partes comparten la misma dirección comercial, los agrupamos como parte del mismo portafolio."
@@ -1516,8 +1523,8 @@ msgstr "¿Quién es responsable por los problemas en tu apartamento y edificio?
msgid "Who’s the landlord of this building?"
msgstr "¿Quién es el dueño de este edificio?"
-#: src/components/MapBanner.tsx:28
-#: src/components/MapBanner.tsx:35
+#: src/components/PortfolioAlerts.tsx:33
+#: src/components/PortfolioAlerts.tsx:43
msgid "Why am I seeing such a big portfolio?"
msgstr "¿Por qué estoy viendo un portafolio tan grande?"
@@ -1584,7 +1591,7 @@ msgstr "Alejar"
msgid "and"
msgstr "y"
-#: src/components/PropertiesMap.tsx:213
+#: src/components/PropertiesMap.tsx:214
msgid "associated building"
msgstr "edificio asociado"
@@ -1604,7 +1611,7 @@ msgstr ""
msgid "quarter"
msgstr "trimestre"
-#: src/components/PropertiesMap.tsx:212
+#: src/components/PropertiesMap.tsx:213
msgid "search address"
msgstr "dirección de búsqueda"
diff --git a/client/src/styles/PropertiesMap.scss b/client/src/styles/PropertiesMap.scss
index cde56fbf7..348ccb0df 100644
--- a/client/src/styles/PropertiesMap.scss
+++ b/client/src/styles/PropertiesMap.scss
@@ -1,5 +1,4 @@
@import "_vars.scss";
-@import "_mapbanner.scss";
.PropertiesMap {
display: inline-block;
@@ -41,7 +40,7 @@
}
}
- .MapBanner__container {
+ .MapAlert__container {
position: absolute;
z-index: 100;
top: 0;
@@ -50,6 +49,7 @@
margin: 1rem 2.2rem 0 4.5rem;
display: flex;
flex-direction: column;
+ gap: 0.4rem;
}
}
diff --git a/client/src/styles/PropertiesSummary.scss b/client/src/styles/PropertiesSummary.scss
index 19d167f80..e491c46ec 100644
--- a/client/src/styles/PropertiesSummary.scss
+++ b/client/src/styles/PropertiesSummary.scss
@@ -1,7 +1,6 @@
@import "_vars.scss";
@import "_scrollbar.scss";
@import "_button.scss";
-@import "_mapbanner.scss";
.PropertiesSummary {
position: relative;
diff --git a/client/src/styles/_alert.scss b/client/src/styles/_alert.scss
index 98516c694..93b6be181 100644
--- a/client/src/styles/_alert.scss
+++ b/client/src/styles/_alert.scss
@@ -75,8 +75,13 @@
background-color: $justfix-green;
}
&.is-info {
- color: $justfix-grey-600;
border: 0.1rem solid $justfix-grey-400;
+ &,
+ p,
+ a,
+ .button.is-text {
+ color: $justfix-grey-600;
+ }
&::before {
background-color: $justfix-blue;
}
diff --git a/client/src/styles/_mapbanner.scss b/client/src/styles/_mapbanner.scss
deleted file mode 100644
index 085b27a61..000000000
--- a/client/src/styles/_mapbanner.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "_vars.scss";
-
-.MapBanner {
- display: flex;
- position: relative;
- min-height: 5.4rem;
- padding: 0.5rem 1.7rem 0.5rem 4.2rem;
- margin-bottom: 0.5rem;
- border-radius: 0.2rem;
- font-family: "Inconsolata", monospace;
- font-size: 1.4rem;
-
- .MapBanner__message {
- margin-right: auto;
- padding-right: 1rem;
- button {
- text-decoration: underline;
- text-align: left;
- &:hover {
- text-decoration: none;
- }
- }
- }
-}
-
-.BigPortfolioBanner {
- background-color: $justfix-orange;
- color: $justfix-black;
- .closeIcon {
- stroke: $justfix-black;
- }
-}
-
-.MapFilterBanner {
- background-color: $justfix-black;
- color: $justfix-white;
- border: 0.1rem solid $justfix-white;
- .closeIcon {
- stroke: $justfix-white;
- }
- &::before {
- content: "";
- background-color: $justfix-green;
- width: 1.5rem;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- }
-}