diff --git a/locales-pending/premium.ftl b/locales-pending/premium.ftl index 62198bb7094..801fdd893fc 100644 --- a/locales-pending/premium.ftl +++ b/locales-pending/premium.ftl @@ -39,6 +39,8 @@ exposure-chart-legend-heading-nr = Number # $nr (number) - Number of a particular type of exposure found for the user exposure-chart-legend-value-nr = { $nr }× exposure-chart-caption = This chart shows how many times your info is actively exposed. +exposure-chart-returning-user-upgrade-prompt = Home address, family members and more are not yet included. +exposure-chart-returning-user-upgrade-prompt-cta = Start a free scan modal-active-number-of-exposures-title = About your number of active exposures # Variables: diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx index 1949ef0999f..2d537193498 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx @@ -27,6 +27,7 @@ const BreachMockItem1: HibpLikeDbBreach = { Domain: "", Id: 0, IsFabricated: false, + IsResolved: false, IsMalware: false, IsRetired: false, IsSensitive: false, @@ -44,6 +45,7 @@ const BreachMockItem2: HibpLikeDbBreach = { BreachDate: "11/09/23", DataClasses: [], Description: "", + IsResolved: false, Domain: "", Id: 0, IsFabricated: false, @@ -64,6 +66,7 @@ const BreachMockItem3: HibpLikeDbBreach = { BreachDate: "11/09/23", DataClasses: [], Description: "", + IsResolved: false, Domain: "", Id: 0, IsFabricated: false, @@ -84,6 +87,7 @@ const BreachMockItem4: HibpLikeDbBreach = { BreachDate: "11/09/23", DataClasses: [], Description: "", + IsResolved: false, Domain: "", Id: 0, IsFabricated: false, diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx index cc2dffecf67..f608dd84456 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx @@ -16,6 +16,7 @@ export type DashboardTopBannerProps = { | "ResumeBreachResolutionContent" | "YourDataIsProtectedContent"; bannerData: DashboardSummary; + hasRunScan: boolean; }; export const DashboardTopBanner = (props: DashboardTopBannerProps) => { @@ -61,7 +62,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { "dashboard-top-banner-monitor-protects-your-even-more-cta" ), onClick: () => { - // do something + window.location.href = "/redesign/user/welcome"; }, }, }, @@ -140,7 +141,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { )}
- +
); diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx index d6c1e2b9651..c8fd0d39117 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx @@ -226,6 +226,7 @@ export const View = (props: Props) => { ? "DataBrokerScanUpsellContent" : "LetsFixDataContent" } + hasRunScan={!isScanResultItemsEmpty} />

diff --git a/src/app/components/client/Chart.module.scss b/src/app/components/client/Chart.module.scss index f91196c53b0..765b28d6633 100644 --- a/src/app/components/client/Chart.module.scss +++ b/src/app/components/client/Chart.module.scss @@ -53,6 +53,7 @@ flex: 1; width: 100%; max-width: 250px; + align-self: center; // Font size set in Chart.tsx .headingNr { @@ -74,11 +75,25 @@ .legend { align-self: center; + flex-direction: column; + display: flex; + gap: $spacing-sm; @media screen and (min-width: $screen-lg) { height: auto; - display: flex; align-items: center; + max-width: 200px; // width of legend and prompt + } + + .prompt { + font: $text-body-xs; + display: flex; + text-align: start; + flex-direction: column; + gap: $spacing-xs; + border: 1px solid $color-purple-70; + padding: $spacing-sm; + align-items: flex-start; } thead { diff --git a/src/app/components/client/Chart.tsx b/src/app/components/client/Chart.tsx index 73cd9c884d5..25f35711b7a 100644 --- a/src/app/components/client/Chart.tsx +++ b/src/app/components/client/Chart.tsx @@ -15,9 +15,11 @@ import { ModalOverlay } from "./dialog/ModalOverlay"; import { Dialog } from "./dialog/Dialog"; import ModalImage from "../client/assets/modal-default-img.svg"; import Image from "next/image"; +import Link from "next/link"; export type Props = { data: Array<[string, number]>; + hasRunScan: boolean; }; export const DoughnutChart = (props: Props) => { @@ -95,6 +97,15 @@ export const DoughnutChart = (props: Props) => { ); + const prompt = ( +
+

{l10n.getString("exposure-chart-returning-user-upgrade-prompt")}

+ + {l10n.getString("exposure-chart-returning-user-upgrade-prompt-cta")} + +
+ ); + return ( <>
@@ -177,6 +188,7 @@ export const DoughnutChart = (props: Props) => { ))} + {!props.hasRunScan ? prompt : null}
diff --git a/src/app/components/client/stories/ExposureCard.stories.ts b/src/app/components/client/stories/ExposureCard.stories.ts index cf5d7f606a5..52ff2bfdb33 100644 --- a/src/app/components/client/stories/ExposureCard.stories.ts +++ b/src/app/components/client/stories/ExposureCard.stories.ts @@ -55,6 +55,7 @@ const BreachMockItem: HibpLikeDbBreach = { Id: 0, IsFabricated: false, IsMalware: false, + IsResolved: false, IsRetired: false, IsSensitive: false, IsSpamList: false,