MNTOR-3378 - Data broker manual removal

locales-pending/dashboard-premium.ftl

@@ -205,6 +205,7 @@ exposure-card-description-info-for-sale-action-needed-dashboard = This site is p
 exposure-card-description-info-for-sale-in-progress-dashboard = As a { -brand-monitor-plus } member, we’ve removed <data_broker_profile>this profile</data_broker_profile> and are confirming the data broker’s removal compliance.
 exposure-card-description-info-for-sale-fixed = As a { -brand-monitor-plus } member, we’ve <data_broker_profile>removed this profile</data_broker_profile> for you and will continually monitor to make sure they don’t add you back.
 exposure-card-description-info-for-sale-fixed-manually-fixed =  You marked this profile as fixed. Be sure you’ve followed all instructions on <data_broker_profile>the site</data_broker_profile> to ensure they remove your personal info.
+exposure-card-description-info-for-sale-manual-removal-needed = We’ve asked this data broker to remove your profile but they haven’t done it. To start the process sooner, we can guide you step-by-step to manually remove your profile and resolve any exposures. Select <b>Resolve exposures</b> to get started.
 
 ## CSAT survey banner for subscribers
 

locales/en/exposure-card.ftl

@@ -29,6 +29,7 @@ exposure-card-other = Other
 exposure-card-description-data-breach-action-needed = Your information was exposed in the <data_breach_link>{ $data_breach_company } data breach on { $data_breach_date }.</data_breach_link> We’ll walk you through the steps to fix it.
 exposure-card-description-data-breach-fixed = You’ve taken the steps needed to fix <data_breach_link>this breach</data_breach_link>. We’ll continually monitor for data breaches and alert you of any new exposures.
 exposure-card-your-exposed-info = Your exposed info:
+exposure-card-found-the-following-data = { -brand-monitor } found the following exposed data:
 exposure-card-exposure-type-data-broker = Info for sale
 exposure-card-exposure-type-data-breach = Data breach
 exposure-card-cta = Fix all exposures

src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/onerepConfig.tsx

@@ -380,6 +380,9 @@ const OnerepConfigPage = (props: Props) => {
                   <option value="new">New</option>
                   <option value="optout_in_progress">In Progress</option>
                   <option value="removed">Removed</option>
+                  <option value="removal_under_maintenance">
+                    Removal under maintenance
+                  </option>
                 </select>
               </label>
 

src/app/components/client/exposure_card/ExposureCard.module.scss

@@ -120,10 +120,37 @@
   .exposureDetailsSection {
     margin: 0;
     overflow: hidden;
-    padding: 0 $layout-lg;
+    padding: 0 $layout-md;
     height: 0;
     display: none;
 
+    .exposureDetailsTopDescription {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: $layout-xs;
+
+      @media screen and (min-width: $screen-sm) {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      @media screen and (min-width: $screen-md) {
+        gap: $layout-xl;
+      }
+
+      span {
+        flex: 0 0 auto;
+      }
+    }
+
+    .exposureDetailsContent {
+      margin-top: $layout-xs;
+      background: $color-grey-05;
+      padding: $spacing-md $spacing-lg;
+      border-radius: $border-radius-md;
+    }
+
     .openInNewTab {
       color: $color-blue-50;
 
@@ -146,13 +173,17 @@
     }
 
     .exposedInfoContainer {
-      padding-top: $spacing-md;
       display: flex;
       flex-direction: column;
       gap: $layout-xs;
 
+      .exposuredInfoSection {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-md;
+      }
+
       .exposedInfoWrapper {
-        font: $text-body-xs;
         display: flex;
         flex-direction: column;
         gap: $spacing-md;
@@ -217,6 +248,7 @@
             display: flex;
             align-items: center;
             gap: $spacing-xs;
+            font-weight: 500;
 
             .exposureTypeIcon {
               color: $color-purple-60;

src/app/components/client/exposure_card/ExposureCard.stories.tsx

@@ -11,6 +11,7 @@ import {
   createRandomScanResult,
 } from "../../../../apiMocks/mockData";
 import { defaultExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
+import { BreachDataTypes } from "../../../functions/universal/breach";
 
 const meta: Meta<typeof ExposureCard> = {
   title: "ExposureCard",
@@ -49,7 +50,19 @@ const ScanMockItemInProgress = createRandomScanResult({
   status: "optout_in_progress",
   manually_resolved: false,
 });
-const BreachMockItemRemoved = createRandomBreach({ isResolved: true });
+const ScanMockItemRemovalUnderMaintenance = createRandomScanResult({
+  status: "removal_under_maintenance",
+  manually_resolved: false,
+});
+const BreachMockItemRemoved = createRandomBreach({
+  isResolved: true,
+  dataClassesEffected: [
+    {
+      [BreachDataTypes.Email]: 2,
+      [BreachDataTypes.Passwords]: 4,
+    },
+  ],
+});
 const BreachMockItemNew = createRandomBreach({ isResolved: false });
 
 export const DataBrokerRequestedRemoval: Story = {
@@ -95,6 +108,13 @@ export const DataBreachActionNeeded: Story = {
   },
 };
 
+export const DataBrokerRemovalUnderMaintenance: Story = {
+  args: {
+    exposureImg: FamilyTreeImage,
+    exposureData: ScanMockItemRemovalUnderMaintenance,
+  },
+};
+
 export const DataBreachFixed: Story = {
   args: {
     exposureImg: TwitterImage,

src/app/components/client/exposure_card/ScanResultCard.tsx

@@ -197,6 +197,15 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
             },
           },
         );
+      case "removal_under_maintenance":
+        return l10n.getFragment(
+          "exposure-card-description-info-for-sale-manual-removal-needed",
+          {
+            elems: {
+              b: <b />,
+            },
+          },
+        );
     }
   };
 
@@ -317,28 +326,33 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
             props.isExpanded ? styles.isOpen : ""
           }`}
         >
-          <div>
+          <div className={styles.exposureDetailsTopDescription}>
             <p>{dataBrokerDescription()}</p>
-          </div>
-          <div className={styles.exposedInfoContainer}>
-            <div className={styles.exposedInfoWrapper}>
-              <p className={styles.exposedInfoTitle}>
-                {l10n.getString("exposure-card-your-exposed-info")}
-              </p>
-              <div className={styles.dataClassesList}>
-                {exposureCategoriesArray.map((item) => (
-                  <React.Fragment key={item.key}>{item}</React.Fragment>
-                ))}
-              </div>
-            </div>
             {
               // Verifying the status for automatically removed data brokers v. manually resolved are handled differently
-              props.scanResult.status === "new" &&
+              (props.scanResult.status === "new" ||
+                props.scanResult.status === "removal_under_maintenance") &&
               !props.scanResult.manually_resolved ? (
                 <span className={styles.fixItBtn}>{props.resolutionCta}</span>
               ) : null
             }
           </div>
+          <div className={styles.exposureDetailsContent}>
+            <div className={styles.exposedInfoContainer}>
+              <div className={styles.exposuredInfoSection}>
+                <p className={styles.exposedInfoTitle}>
+                  {l10n.getString("exposure-card-found-the-following-data")}
+                </p>
+                <div className={styles.exposedInfoWrapper}>
+                  <div className={styles.dataClassesList}>
+                    {exposureCategoriesArray.map((item) => (
+                      <React.Fragment key={item.key}>{item}</React.Fragment>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/app/components/client/exposure_card/SubscriberBreachCard.tsx

@@ -268,25 +268,28 @@ export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
           <div>
             <p>{dataBreachDescription()}</p>
           </div>
-
-          <div className={styles.exposedInfoContainer}>
-            <div className={styles.exposedInfoWrapper}>
-              <p className={styles.exposedInfoTitle}>
-                {l10n.getString("exposure-card-your-exposed-info")}
-              </p>
-              <div className={styles.dataClassesList}>
-                {exposureCategoriesArray.map((item) => (
-                  <React.Fragment key={item.key}>{item}</React.Fragment>
-                ))}
+          <div className={styles.exposureDetailsContent}>
+            <div className={styles.exposedInfoContainer}>
+              <div className={styles.exposuredInfoSection}>
+                <p className={styles.exposedInfoTitle}>
+                  {l10n.getString("exposure-card-found-the-following-data")}
+                </p>
+                <div className={styles.exposedInfoWrapper}>
+                  <div className={styles.dataClassesList}>
+                    {exposureCategoriesArray.map((item) => (
+                      <React.Fragment key={item.key}>{item}</React.Fragment>
+                    ))}
+                  </div>
+                </div>
               </div>
+              {
+                // TODO: Add unit test when changing this code:
+                /* c8 ignore next */
+                !props.subscriberBreach.isResolved ? (
+                  <span className={styles.fixItBtn}>{props.resolutionCta}</span>
+                ) : null
+              }
             </div>
-            {
-              // TODO: Add unit test when changing this code:
-              /* c8 ignore next */
-              !props.subscriberBreach.isResolved ? (
-                <span className={styles.fixItBtn}>{props.resolutionCta}</span>
-              ) : null
-            }
           </div>
         </div>
       </div>

src/app/components/server/StatusPill.tsx

@@ -98,6 +98,8 @@ export const getExposureStatus = (
           : "inProgress";
       case "optout_in_progress":
         return "inProgress";
+      case "removal_under_maintenance":
+        return "actionNeeded";
       case "new":
       default:
         return "actionNeeded";

src/app/functions/universal/scanResult.ts

@@ -8,10 +8,12 @@ export type RemovalStatus =
   | "new"
   | "optout_in_progress"
   | "waiting_for_verification"
-  | "removed";
+  | "removed"
+  | "removal_under_maintenance";
 export const RemovalStatusMap = {
   New: "new",
   OptOutInProgress: "optout_in_progress",
   WaitingForVerification: "waiting_for_verification",
   Removed: "removed",
+  RemovalUnderMaintenance: "removal_under_maintenance",
 };