diff --git a/client/src/components/Amplitude.ts b/client/src/components/Amplitude.ts index f789b9557..8f3d9037a 100644 --- a/client/src/components/Amplitude.ts +++ b/client/src/components/Amplitude.ts @@ -65,7 +65,8 @@ export type AmplitudeEvent = | "portfolioViewDetail" | "addressChangeMap" | "addressChangePortfolio" - | "portfolioColumnSort"; + | "portfolioColumnSort" + | "alertToFilterPortfolio"; export type EventProperties = { [x: string]: unknown; diff --git a/client/src/components/MapBanner.tsx b/client/src/components/MapBanner.tsx deleted file mode 100644 index 2bf1cc130..000000000 --- a/client/src/components/MapBanner.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Trans } from "@lingui/macro"; -import Modal from "./Modal"; -import networkDiagram from "../assets/img/network-diagram.png"; -import { logAmplitudeEvent } from "./Amplitude"; -import { CloseButton } from "./CloseButton"; -import classNames from "classnames"; - -export const PORTFOLIO_SIZE_THRESHOLD = 300; - -type MapBannerProps = { - message: React.ReactNode | string; - buttonText?: React.ReactNode | string; - buttonOnClick?: () => void; - className?: string; - children?: React.ReactNode; -}; - -export const MapBanner = ({ - message, - buttonText, - buttonOnClick, - className, - children, -}: MapBannerProps) => { - const [isBanerClosed, setBanerClosed] = useState(false); - - return !isBanerClosed ? ( -
- - {message}
- {!!buttonText ? : <>} -
-
- setBanerClosed(true)} /> -
- {children} -
- ) : ( - <> - ); -}; - -type BigPortfolioBannerProps = { - sizeOfPortfolio: number; - className?: number; -}; - -export const BigPortfolioBanner = ({ sizeOfPortfolio, className }: BigPortfolioBannerProps) => { - const [isLearnMoreModalVisible, setModalVisibility] = useState(false); - - // Preload modal image when BigPortfolioBanner mounts: - useEffect(() => { - new Image().src = networkDiagram; - }, []); - - return sizeOfPortfolio > PORTFOLIO_SIZE_THRESHOLD ? ( - Why am I seeing such a big portfolio?} - buttonText={Learn more} - buttonOnClick={() => { - logAmplitudeEvent("learnWhyPortfolioSoBig"); - window.gtag("event", "learn-why-portfolio-so-big"); - setModalVisibility(true); - }} - > - 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/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 + + +

+
+ +
+ ) : ( + <> + ); +}; + +export const FilterPortfolioAlert = ({ + portfolioSize, + className, + addressPageRoutes, + ...props +}: FilterPortfolioAlertProps) => { + const { pathname } = useLocation(); + + return !isLegacyPath(pathname) && portfolioSize >= FILTER_PORTFOLIO_THRESHOLD ? ( + + + Filter through this portfolio in{" "} + { + logAmplitudeEvent("alertToFilterPortfolio", { portfolioSize }); + window.gtag("event", "alert-topfilter-portfolio", { portfolioSize }); + }} + > + the Portfolio tab. + + + + ) : ( + <> + ); +}; diff --git a/client/src/components/PropertiesMap.tsx b/client/src/components/PropertiesMap.tsx index 207d8354e..1020869eb 100644 --- a/client/src/components/PropertiesMap.tsx +++ b/client/src/components/PropertiesMap.tsx @@ -13,11 +13,13 @@ import { AddressRecord } from "./APIDataTypes"; import { FitBounds, Props as MapboxMapProps } from "react-mapbox-gl/lib/map"; import { Events as MapboxMapEvents } from "react-mapbox-gl/lib/map-events"; import { withMachineInStateProps } from "state-machine"; -import { BigPortfolioBanner } from "./MapBanner"; +import { BigPortfolioAlert, FilterPortfolioAlert } from "./PortfolioAlerts"; +import { AddressPageRoutes } from "routes"; type Props = withMachineInStateProps<"portfolioFound"> & { onAddrChange: (bbl: string) => void; isVisible: boolean; + addressPageRoutes: AddressPageRoutes; }; type State = { @@ -267,8 +269,18 @@ export default class PropertiesMap extends Component { }} /> {useNewPortfolioMethod ? ( -
- +
+ +
) : ( <> 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." +msgstr "Filter through this portfolio in <0>the Portfolio tab." + #: 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>ACRIS" msgstr "View documents on <0>ACRIS" -#: 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 article" #~ 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 article" -#: 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 article" 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 article" @@ -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." +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>ACRIS" msgstr "Ver documentos en <0>ACRIS" -#: 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 article" #~ 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 article" -#: 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 article" 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ía" @@ -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; - } -}