Add story for the manual broker resolution view

.storybook/preview.tsx

@@ -89,6 +89,13 @@ const preview: Preview = {
               "With a few unresolved scan results (free)"
             )();
           }
+
+          if (
+            path ===
+            "/redesign/user/dashboard/fix/data-broker-profiles/manual-remove"
+          ) {
+            linkTo("Pages/Guided resolution/1c. Manually resolve brokers")();
+          }
         },
       },
     },

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/01c.ManualRemove.stories.tsx

@@ -0,0 +1,87 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { OnerepScanRow } from "knex/types/tables";
+import { ManualRemoveView } from "./ManualRemoveView";
+import {
+  createRandomBreach,
+  createRandomScanResult,
+  createUserWithPremiumSubscription,
+} from "../../../../../../../../../apiMocks/mockData";
+import { Shell } from "../../../../../../Shell";
+import { getEnL10nSync } from "../../../../../../../../functions/server/mockL10n";
+import { FixView } from "../../FixView";
+import { LatestOnerepScanData } from "../../../../../../../../../db/tables/onerep_scans";
+import { GuidedExperienceBreaches } from "../../../../../../../../functions/server/getUserBreaches";
+
+const mockedScan: OnerepScanRow = {
+  created_at: new Date(1998, 2, 31),
+  updated_at: new Date(1998, 2, 31),
+  id: 0,
+  onerep_profile_id: 0,
+  onerep_scan_id: 0,
+  onerep_scan_reason: "initial",
+  onerep_scan_status: "finished",
+};
+
+const mockedScanData: LatestOnerepScanData = {
+  scan: mockedScan,
+  results: [...Array(5)].map(() =>
+    createRandomScanResult({ status: "new", manually_resolved: false })
+  ),
+};
+const mockedBreaches = [...Array(5)].map(() => createRandomBreach());
+
+const mockedBreachSummary: GuidedExperienceBreaches = {
+  emails: [],
+  highRisk: {
+    bankBreaches: [],
+    creditCardBreaches: [],
+    pinBreaches: [],
+    ssnBreaches: [],
+  },
+  passwordBreaches: {
+    passwords: [],
+    securityQuestions: [],
+  },
+  securityRecommendations: {
+    emailAddress: [],
+    IPAddress: [],
+    phoneNumber: [],
+  },
+};
+
+const user = createUserWithPremiumSubscription();
+
+const mockedSession = {
+  expires: new Date().toISOString(),
+  user: user,
+};
+
+const meta: Meta<typeof ManualRemoveView> = {
+  title: "Pages/Guided resolution/1c. Manually resolve brokers",
+  component: ManualRemoveView,
+};
+export default meta;
+type Story = StoryObj<typeof ManualRemoveView>;
+
+export const ManualRemoveViewStory: Story = {
+  name: "1c. Manually resolve brokers",
+  render: () => {
+    return (
+      <Shell l10n={getEnL10nSync()} session={mockedSession} nonce="">
+        <FixView
+          breaches={mockedBreachSummary}
+          userScannedResults={mockedScanData.results}
+        >
+          <ManualRemoveView
+            scanData={mockedScanData}
+            breaches={mockedBreaches}
+          />
+        </FixView>
+      </Shell>
+    );
+  },
+};

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.tsx

@@ -8,37 +8,30 @@ import {
   AvatarIcon,
   ClockIcon,
 } from "../../../../../../../../components/server/Icons";
-import { getOnerepProfileId } from "../../../../../../../../../db/tables/subscribers";
-import { getLatestOnerepScanResults } from "../../../../../../../../../db/tables/onerep_scans";
-import { authOptions } from "../../../../../../../../api/utils/auth";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { getSubscriberBreaches } from "../../../../../../../../functions/server/getUserBreaches";
+import { LatestOnerepScanData } from "../../../../../../../../../db/tables/onerep_scans";
 import { Button } from "../../../../../../../../components/server/Button";
 import {
   getDashboardSummary,
   getExposureReduction,
 } from "../../../../../../../../functions/server/dashboard";
+import { SubscriberBreach } from "../../../../../../../../../utils/subscriberBreaches";
 
-export default async function ManualRemoveView() {
+export type Props = {
+  scanData: LatestOnerepScanData;
+  breaches: SubscriberBreach[];
+};
+
+export function ManualRemoveView(props: Props) {
   const l10n = getL10n();
 
-  const session = await getServerSession(authOptions);
+  const summary = getDashboardSummary(props.scanData.results, props.breaches);
 
-  if (!session?.user?.subscriber?.id) {
-    redirect("/redesign/user/dashboard/");
-  }
-  const result = await getOnerepProfileId(session.user.subscriber.id);
-  const profileId = result[0]["onerep_profile_id"] as number;
-  const scanResult = await getLatestOnerepScanResults(profileId);
-  const scanResultItems = scanResult.results;
-  const subBreaches = await getSubscriberBreaches(session.user);
-  const summary = getDashboardSummary(scanResultItems, subBreaches);
-
-  // TODO: Use api to set/query count
-  const countOfDataBrokerProfiles = scanResultItems.length;
+  const countOfDataBrokerProfiles = props.scanData.results.length;
   const estimatedTime = countOfDataBrokerProfiles * 10; // 10 minutes per data broker site.
-  const exposureReduction = getExposureReduction(summary, scanResultItems);
+  const exposureReduction = getExposureReduction(
+    summary,
+    props.scanData.results
+  );
 
   return (
     <div className={styles.main}>

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/page.tsx

@@ -2,8 +2,24 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import ManualRemoveView from "./ManualRemoveView";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { getLatestOnerepScanResults } from "../../../../../../../../../db/tables/onerep_scans";
+import { getOnerepProfileId } from "../../../../../../../../../db/tables/subscribers";
+import { getSubscriberBreaches } from "../../../../../../../../functions/server/getUserBreaches";
+import { ManualRemoveView } from "./ManualRemoveView";
+import { authOptions } from "../../../../../../../../api/utils/auth";
 
-export default function ManualRemove() {
-  return <>{ManualRemoveView()}</>;
+export default async function ManualRemove() {
+  const session = await getServerSession(authOptions);
+
+  if (!session?.user?.subscriber?.id) {
+    redirect("/redesign/user/dashboard/");
+  }
+
+  const result = await getOnerepProfileId(session.user.subscriber.id);
+  const profileId = result[0]["onerep_profile_id"] as number;
+  const scanData = await getLatestOnerepScanResults(profileId);
+  const subBreaches = await getSubscriberBreaches(session.user);
+  return <ManualRemoveView breaches={subBreaches} scanData={scanData} />;
 }