From bbd59bf9cde4a9b72562d58f62cc003fa83b743d Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 10:44:58 -0400 Subject: [PATCH 1/6] MNTOR-1809 Returning user view --- locales-pending/premium.ftl | 2 ++ .../user/dashboard/DashboardTopBanner.tsx | 11 +++++++++-- src/app/components/client/Chart.module.scss | 17 ++++++++++++++++- src/app/components/client/Chart.tsx | 11 +++++++++++ src/app/functions/server/dashboard.ts | 10 +++++++++- 5 files changed, 47 insertions(+), 4 deletions(-) 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/DashboardTopBanner.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx index cc2dffecf67..9cefd5aa3bd 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) => { @@ -28,6 +29,12 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { } ); + const breachChartData: [string, number][] = + props.bannerData.sanitizedBreachExposures.map((obj) => { + const [key, value] = Object.entries(obj)[0]; + return [l10n.getString(key), value]; + }); + const contentData = { LetsFixDataContent: { headline: l10n.getString("dashboard-top-banner-protect-your-data-title"), @@ -61,7 +68,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 +147,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { )}
- +
); 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..c6a4506f646 100644 --- a/src/app/components/client/Chart.tsx +++ b/src/app/components/client/Chart.tsx @@ -15,6 +15,7 @@ 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]>; @@ -177,6 +178,16 @@ export const DoughnutChart = (props: Props) => { ))} +
+

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

+ + {l10n.getString( + "exposure-chart-returning-user-upgrade-prompt-cta" + )} + +
diff --git a/src/app/functions/server/dashboard.ts b/src/app/functions/server/dashboard.ts index cde5d9e1eb2..421e8fa7e88 100644 --- a/src/app/functions/server/dashboard.ts +++ b/src/app/functions/server/dashboard.ts @@ -182,7 +182,7 @@ export function dashboardSummary( } } - // count ssn + // count SSN if (dataClasses.includes(BreachDataTypes.SSN)) { summary.totalExposures++; summary.allExposures.socialSecurityNumbers++; @@ -231,6 +231,14 @@ export function dashboardSummary( summary.dataBreachFixedNum++; } } + + // count phone numbers + if (dataClasses.includes(BreachDataTypes.Phone)) { + summary.totalExposures++; + summary.allExposures.phoneNumbers++; + } else { + summary.totalExposures++; + } }); } } From 8669e27cdea47d4dc160d03a098a607ce3d0d5b7 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 13:46:09 -0400 Subject: [PATCH 2/6] remove changes to dashboard.js --- .../user/dashboard/DashboardTopBanner.tsx | 9 ++------ .../(authenticated)/user/dashboard/View.tsx | 1 + src/app/components/client/Chart.tsx | 21 ++++++++++--------- 3 files changed, 14 insertions(+), 17 deletions(-) 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 9cefd5aa3bd..da481ec71dd 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx @@ -29,12 +29,6 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { } ); - const breachChartData: [string, number][] = - props.bannerData.sanitizedBreachExposures.map((obj) => { - const [key, value] = Object.entries(obj)[0]; - return [l10n.getString(key), value]; - }); - const contentData = { LetsFixDataContent: { headline: l10n.getString("dashboard-top-banner-protect-your-data-title"), @@ -130,6 +124,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { }; const content = contentData[props.type]; + console.log(props.hasRunScan); return (
@@ -147,7 +142,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.tsx b/src/app/components/client/Chart.tsx index c6a4506f646..25f35711b7a 100644 --- a/src/app/components/client/Chart.tsx +++ b/src/app/components/client/Chart.tsx @@ -19,6 +19,7 @@ import Link from "next/link"; export type Props = { data: Array<[string, number]>; + hasRunScan: boolean; }; export const DoughnutChart = (props: Props) => { @@ -96,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 ( <>
@@ -178,16 +188,7 @@ export const DoughnutChart = (props: Props) => { ))} -
-

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

- - {l10n.getString( - "exposure-chart-returning-user-upgrade-prompt-cta" - )} - -
+ {!props.hasRunScan ? prompt : null}
From 0b8d252e5efd2962cb275a088a673678998fd279 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 15:54:25 -0400 Subject: [PATCH 3/6] undo dashboard.ts changes --- src/app/functions/server/dashboard.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/app/functions/server/dashboard.ts b/src/app/functions/server/dashboard.ts index 421e8fa7e88..cde5d9e1eb2 100644 --- a/src/app/functions/server/dashboard.ts +++ b/src/app/functions/server/dashboard.ts @@ -182,7 +182,7 @@ export function dashboardSummary( } } - // count SSN + // count ssn if (dataClasses.includes(BreachDataTypes.SSN)) { summary.totalExposures++; summary.allExposures.socialSecurityNumbers++; @@ -231,14 +231,6 @@ export function dashboardSummary( summary.dataBreachFixedNum++; } } - - // count phone numbers - if (dataClasses.includes(BreachDataTypes.Phone)) { - summary.totalExposures++; - summary.allExposures.phoneNumbers++; - } else { - summary.totalExposures++; - } }); } } From db6a22b814db3a6ff4ac81c7f9a0af635659e753 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 15:55:38 -0400 Subject: [PATCH 4/6] remove console.log --- .../(authenticated)/user/dashboard/DashboardTopBanner.tsx | 1 - 1 file changed, 1 deletion(-) 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 da481ec71dd..f608dd84456 100644 --- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx +++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx @@ -124,7 +124,6 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => { }; const content = contentData[props.type]; - console.log(props.hasRunScan); return (
From ebcbf709428218ec70ccdb369d3d41a80227bfd7 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 16:08:08 -0400 Subject: [PATCH 5/6] fix broken stories file --- .../(authenticated)/user/dashboard/Dashboard.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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, From 3f0a8062240b0a6328e401e91e88be647921ff45 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 27 Jul 2023 16:24:07 -0400 Subject: [PATCH 6/6] fix broken stories file --- src/app/components/client/stories/ExposureCard.stories.ts | 1 + 1 file changed, 1 insertion(+) 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,