MNTOR-1809 - Add chart into dashboard top banner

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

@@ -11,6 +11,7 @@ import { Shell } from "../../../Shell";
 import { StateAbbr } from "../../../../../../utils/states";
 import { getEnL10nSync } from "../../../../../functions/server/mockL10n";
 import { createRandomScan } from "../../../../../../apiMocks/mockData";
+import { DashboardSummary } from "../../../../../functions/server/dashboard";
 
 const meta: Meta<typeof DashboardEl> = {
   title: "Pages/Dashboard",
@@ -19,33 +20,6 @@ const meta: Meta<typeof DashboardEl> = {
 export default meta;
 type Story = StoryObj<typeof DashboardEl>;
 
-const _ScanResultMockItem: ScanResult = {
-  id: 1,
-  profile_id: 1,
-  first_name: "John",
-  last_name: "Doe",
-  middle_name: "string",
-  age: `${30}`,
-  addresses: [
-    {
-      city: "123",
-      state: "State" as StateAbbr,
-      street: "Street",
-      zip: "123456",
-    },
-  ],
-  phones: [""],
-  emails: [""],
-  data_broker: "Familytree.com",
-  created_at: "11/09/23",
-  updated_at: "11/09/23",
-  url: "",
-  link: "",
-  relatives: [],
-  status: "new",
-  data_broker_id: 0,
-};
-
 const BreachMockItem1: HibpLikeDbBreach = {
   AddedDate: new Date("2018-11-07T14:48:00.000Z"),
   BreachDate: "11/09/23",
@@ -138,13 +112,31 @@ const breachItemArraySample: HibpLikeDbBreach[] = [
   BreachMockItem4,
 ];
 
-const dashboardSummary: Record<string, number>[] = [
-  { "physical-addresses": 90 },
-  { "family-members-names": 29 },
-  { "full-names": 98 },
-  { "phone-numbers": 8 },
-  { "other-data-class": 80 },
-];
+const dashboardSummary: DashboardSummary = {
+  dataBreachTotalNum: 0,
+  dataBrokerTotalNum: 0,
+  totalExposures: 0,
+  allExposures: {
+    emailAddresses: 0,
+    phoneNumbers: 0,
+    addresses: 0,
+    familyMembers: 0,
+    fullNames: 0,
+    socialSecurityNumbers: 0,
+    ipAddresses: 0,
+    passwords: 0,
+    creditCardNumbers: 0,
+    pinNumbers: 0,
+    securityQuestions: 0,
+  },
+  sanitizedExposures: [
+    { "physical-addresses": 90 },
+    { "family-members-names": 29 },
+    { "full-names": 98 },
+    { "phone-numbers": 8 },
+    { "other-data-class": 80 },
+  ],
+};
 
 export const DashboardWithScan: Story = {
   render: () => (
@@ -173,7 +165,7 @@ export const DashboardWithScan: Story = {
         }}
         userScannedResults={scannedResultsArraySample}
         locale={"en"}
-        chartData={dashboardSummary}
+        bannerData={dashboardSummary}
       />
     </Shell>
   ),
@@ -206,7 +198,7 @@ export const DashboardWithoutScan: Story = {
         }}
         userScannedResults={[]}
         locale={"en"}
-        chartData={dashboardSummary}
+        bannerData={dashboardSummary}
       />
     </Shell>
   ),

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

@@ -7,6 +7,10 @@ import { ReactElement } from "react";
 import { Button } from "../../../../../components/server/Button";
 import { useL10n } from "../../../../../hooks/l10n";
 import { DoughnutChart as Chart } from "../../../../../components/client/Chart";
+import {
+  DashboardSummary,
+  dashboardSummary,
+} from "../../../../../functions/server/dashboard";
 
 export type DashboardTopBannerProps = {
   type:
@@ -15,33 +19,34 @@ export type DashboardTopBannerProps = {
     | "NoExposuresFoundContent"
     | "ResumeBreachResolutionContent"
     | "YourDataIsProtectedContent";
-  chart: ReactElement;
-  chartData: Record<string, number>[];
+  bannerData: DashboardSummary;
 };
 
 export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
   const l10n = useL10n();
 
-  const chartData: [string, number][] = props.chartData.map((obj) => {
-    const [key, value] = Object.entries(obj)[0];
-    return [l10n.getString(key), value];
-  });
+  const chartData: [string, number][] = props.bannerData.sanitizedExposures.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"),
       description: l10n.getString(
         "dashboard-top-banner-protect-your-data-description",
         {
-          // TODO: Replace all mocked exposure data
-          data_breach_total_num: 95,
-          data_broker_total_num: 15,
+          data_breach_total_num: props.bannerData.dataBreachTotalNum,
+          data_broker_total_num: props.bannerData.dataBrokerTotalNum,
         }
       ),
       cta: {
         content: l10n.getString("dashboard-top-banner-protect-your-data-cta"),
         onClick: () => {
-          window.location.href = "/redesign/user/dashboard/fix/data-broker-profiles/view-data-brokers";
+          window.location.href =
+            "/redesign/user/dashboard/fix/data-broker-profiles/view-data-brokers";
         },
       },
     },
@@ -86,6 +91,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
       description: l10n.getString(
         "dashboard-top-banner-lets-keep-protecting-description",
         {
+          //TODO: Add remaining total exposures
           remaining_exposures_total_num: 40,
         }
       ),
@@ -105,6 +111,7 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
       description: l10n.getString(
         "dashboard-top-banner-your-data-is-protected-description",
         {
+          //TODO: Add original count of exposures
           starting_exposure_total_num: 100,
         }
       ),

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

@@ -22,13 +22,13 @@ import { useState } from "react";
 import { ScanResult } from "../../../../../functions/server/onerep";
 import { HibpLikeDbBreach } from "../../../../../../utils/hibp";
 import { BundledVerifiedEmails } from "../../../../../../utils/breaches";
+import { DashboardSummary } from "../../../../../functions/server/dashboard";
 
 export type Props = {
   user: Session["user"];
   userBreaches: UserBreaches;
-  isUserScannedResults: boolean;
   userScannedResults: ScanResult[];
-  chartData: Record<string, number>[];
+  bannerData: DashboardSummary;
   locale: string;
 };
 
@@ -209,6 +209,8 @@ export const View = (props: Props) => {
     }
   );
 
+  console.log([props.bannerData]);
+
   const isScanResultItemsEmpty = props.userScannedResults.length === 0;
 
   return (
@@ -221,13 +223,12 @@ export const View = (props: Props) => {
       </Toolbar>
       <div className={styles.dashboardContent}>
         <DashboardTopBanner
-          chartData={props.chartData}
+          bannerData={props.bannerData}
           type={
             isScanResultItemsEmpty
               ? "DataBrokerScanUpsellContent"
               : "LetsFixDataContent"
           }
-          chart={<></>}
         />
         <section className={styles.exposuresArea}>
           <h2 className={styles.exposuresAreaHeadline}>

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

@@ -44,7 +44,7 @@ export default async function DashboardPage() {
       userScannedResults={scanResultItems}
       userBreaches={breaches}
       locale={locale}
-      chartData={summary.sanitizedExposures}
+      bannerData={summary}
     />
   );
 }