MNTOR-1809 Returning user dashboard chart

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:

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,

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) => {
         )}
       </div>
       <div className={styles.chart}>
-        <Chart data={chartData} />
+        <Chart hasRunScan={props.hasRunScan} data={chartData} />
       </div>
     </div>
   );

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx

@@ -226,6 +226,7 @@ export const View = (props: Props) => {
               ? "DataBrokerScanUpsellContent"
               : "LetsFixDataContent"
           }
+          hasRunScan={!isScanResultItemsEmpty}
         />
         <section className={styles.exposuresArea}>
           <h2 className={styles.exposuresAreaHeadline}>

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 {

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) => {
     </div>
   );
 
+  const prompt = (
+    <div className={styles.prompt}>
+      <p>{l10n.getString("exposure-chart-returning-user-upgrade-prompt")}</p>
+      <Link href="/redesign/user/welcome">
+        {l10n.getString("exposure-chart-returning-user-upgrade-prompt-cta")}
+      </Link>
+    </div>
+  );
+
   return (
     <>
       <figure className={styles.chartContainer}>
@@ -177,6 +188,7 @@ export const DoughnutChart = (props: Props) => {
                 ))}
               </tbody>
             </table>
+            {!props.hasRunScan ? prompt : null}
           </div>
         </div>
         <figcaption>

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,