Skip to content

Commit

Permalink
MNTOR-3378 - Data broker manual removal (#5287)
Browse files Browse the repository at this point in the history
* fix ui

* apply ui changes tto scanresultcard

* apply styling to button

* add removal under maintenance status

* change cta label and write test

* add new removal under maintenance page

* test exposure card in new view data broker page

* change terminology ot data broker

* make new scan result component for resolution flow

* ui fixes

* add header

* add header string

* add box shadow

* add estimated time of removal

* add removal instructions view

* ui tweaks

* rremove ispremium force

* remove commented out code

* fix tests

* add strings

* revert back to info for sale

* fix deprecated strings

* move cta button to the bottom on mobile

* fix ftl

* fix string changes

* ftl lint

* add condition to remove navclose from fixview

* add back arrow

* Update locales-pending/dashboard-premium.ftl

Co-authored-by: Francesco Lodolo <[email protected]>

* chore: rename

* feat: add db func for return scan results with data broker join

* feat: maintenance filter

* Update src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/page.tsx

* Update src/db/tables/onerep_scans.ts

* Update src/db/tables/onerep_scans.ts

* fix: lint

* MNTOR-3815 - Data broker manual removal integration (#5326)

* fix: fix comment vars

* pass SENTRY_AUTH_TOKEN arg to docker (#5324)

* integration

* rebase

* bad rebase fix

* bad rebase fix

---------

Co-authored-by: Joey Zhou <[email protected]>
Co-authored-by: Robert Helmer <[email protected]>

* premium exposure card by default

* port over databrokerremovalcard into main component and add confetti

* add loader to secondary button

* remove unused files

* add loading animation

* fix e2e tests

* roll back string change

* fix pbroken test

* remove typescript linter

* fix completion order

* add mmanual resolution praise

* dadd dashboard description for fixed state

* add unit tests

* fix

* add toast error

* add string

* fixes

* use trycatch

* show loader in white on hover

* remove exposureicon style

* Add fetch delay and update state handling (#5341)

* feat: Add util function for fetching with a delay

* chore: Remove useEffect and update state handling for firstScanResultNotResolved

---------

Co-authored-by: Francesco Lodolo <[email protected]>
Co-authored-by: Joey Zhou <[email protected]>
Co-authored-by: Robert Helmer <[email protected]>
Co-authored-by: Florian Zia <[email protected]>
  • Loading branch information
5 people authored Nov 29, 2024
1 parent bf7a1c3 commit df5ad6c
Show file tree
Hide file tree
Showing 30 changed files with 1,095 additions and 240 deletions.
47 changes: 46 additions & 1 deletion locales-pending/dashboard-premium.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ modal-exposure-type-description = {
}
modal-exposure-type-data-breach = <b>Data breach</b> means your information has been compromised in a breach and could be in the wrong hands.
Resolving these typically requires accessing your accounts, so you’ll need to take manual steps to resolve each breach even if you’ve subscribed to { -brand-monitor-plus }.
modal-exposure-type-data-broker-part-one = <b>Info for sale</b> means a data broker site is publicly publishing and selling your personal info.
modal-exposure-type-data-broker-part-one = <b>Your info for sale</b> means a data broker site is publicly publishing and selling your personal info.
You’ll need to manually request removal from each site.
modal-exposure-type-data-broker-part-two = But if you’re a { -brand-monitor-plus } subscriber, we auto-remove the profiles for you.
Expand Down Expand Up @@ -205,6 +205,51 @@ 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-fixed-removal-under-maintenance-manually-fixed = You marked <data_broker_profile>this profile</data_broker_profile> as resolved. You could be added back in the future, so { -brand-monitor } will continue to scan data broker sites for new exposures.
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.
## Manual Removal Data Broker

# Variables:
# $data_broker_name is the name of the data broker under removal maintenance
data-broker-removal-maintenance-header = { -brand-monitor } found this profile on <link_to_data_broker>{ $data_broker_name }</link_to_data_broker>
data-broker-removal-maintenance-cta-go-to-data-broker = Go to data broker site to get started
data-broker-removal-maintenance-cta-mark-as-resolved = Mark exposure resolved
# Est. is short for "estimated"
# Variables:
# $range is the range of minutes it would take to complete the removal. E.g. 3-5 minutes.
data-broker-removal-maintenance-estimated-time =
{ $range ->
[one] Est. time to complete: { $range } minute
*[other] Est. time to complete: { $range } minutes
}
data-broker-removal-maintenance-steps-to-remove-header = How to remove your profile from data broker websites
data-broker-removal-maintenance-steps-to-remove-header-step-one = Visit this data broker website then locate their removal instructions. These may be purposely difficult to find, so check in the footer, terms page, privacy page, or “do not sell” page for removal instructions.
data-broker-removal-maintenance-steps-to-remove-header-step-two = When you’ve determined your profile was successfully removed, you can mark the exposure as resolved by toggling on the switch within this exposure data card in your dashboard.
data-broker-removal-maintenance-steps-to-remove-view-more-link = View removal instructions
data-broker-removal-maintenance-rationale-header = Why do I need to manually remove this profile?
data-broker-removal-maintenance-rationale-answer = { -brand-monitor } works hard to auto-remove your profiles from data broker sites. But some are more difficult than others or are non-compliant, which requires manual removal from the profile owner. <learn_about_data_exposure_link>Learn about data exposures</learn_about_data_exposure_link>
## Manual Removal Guide

data-broker-removal-guide-header = Removal guide for data broker websites
data-broker-removal-guide-top-section-para-1 = { -brand-mozilla-monitor } works hard to automatically remove your personal information from data brokers sites. However, some data brokers are more difficult and may ignore removal requests from third parties.
data-broker-removal-guide-top-section-para-2 = We’re sorry we couldn’t remove this profile for you. Data brokers benefit from sharing personal information, so they often change their removal instructions to prevent companies like us from protecting your information. We are constantly evaluating our auto-removal processes to counter this behavior. But in the meantime, here’s what you need to do to manually remove your information.
data-broker-removal-guide-step-1-header = Step 1: Go to the data broker site and find their opt out instructions
data-broker-removal-guide-step-1-body = Visit the data broker website and locate the instructions they provide for requesting removal of your profile. Because data brokers often make money by selling your information, they may intentionally make it hard to find these instructions. Here are a few tips to find removal instructions:
data-broker-removal-guide-step-1-list-item-1 = They may be called data suppression, delete my data, do not show my data, or opt out instructions.
data-broker-removal-guide-step-1-list-item-2 = Start by checking the footer of the website.
data-broker-removal-guide-step-1-list-item-3 = You can also check the Privacy section of their website.
data-broker-removal-guide-step-1-list-item-4 = You can also check the site FAQs.
data-broker-removal-guide-step-2-header = Step 2: Follow the instructions
data-broker-removal-guide-step-2-body-para-1 = Each data broker’s removal process is different, and they usually require you to submit personal details such as your name, email address, or physical address. Sometimes it’s as easy as submitting your email address. But some may require you to mail a physical letter. Be sure to follow the directions fully to ensure removal. Each removal should take only a few minutes.
data-broker-removal-guide-step-2-body-para-2 = If you have many exposures needing manual removal, try to do them in batches, and keep going until they’re all removed.
data-broker-removal-guide-step-3-header = Step 3: Verify removal
data-broker-removal-guide-step-3-body-para-1 = Once you’ve verified your profile has been removed from the data broker site, you can use { -brand-monitor } to track this status. After removal, simply go to the exposure card in your dashboard and you’ll see that it’s been marked as “Removed”. Because data brokers usually add profiles back to their databases, you can toggle the “Removed” status on or off in cases where you’ve been added back.
data-broker-removal-guide-step-3-body-para-2 = Data brokers can take 2 weeks to remove your information, and sometimes even longer.
data-broker-removal-guide-step-4-header = Step 4: Watch for re-exposures
data-broker-removal-guide-step-4-body = Please note that this process does not remove your information from public records, which means your information could be added back to data brokers that you’ve been removed from. As a { -brand-monitor-plus } subscriber, we’ll continually watch for new exposures from this data broker.
data-broker-removal-guide-button-back-to-exposures = Back to exposures
## CSAT survey banner for subscribers

Expand Down
4 changes: 3 additions & 1 deletion locales/en/exposure-card.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ 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
exposure-card-resolve-exposures-cta = Resolve exposures
exposure-card-label-company-logo = Company logo
exposure-card-label-company = Company
# Status of the exposure card, could be In Progress, Fixed or Action Needed
Expand All @@ -40,3 +41,4 @@ exposure-card-label-status = Status
# $category_label is the data breach exposure type that was leaked. Eg. Email, IP Address.
# $count is the number of times that the data type was leaked.
exposure-card-label-and-count = { $category_label }: { $count }
exposure-card-manual-resolution-praise = <b>Great job!</b> You resolved this exposure.
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export const View = (props: Props) => {
}).href
}
>
{l10n.getString("exposure-card-cta")}
{l10n.getString("exposure-card-resolve-exposures-cta")}
</Button>
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export type FixViewProps = {
| "leaked-passwords"
| "security-recommendations";
hideProgressIndicator?: boolean;
hideNavClose?: boolean;
hideNextNavigationRightArrow?: boolean;
showConfetti?: boolean;
};

Expand Down Expand Up @@ -90,21 +92,23 @@ export const FixView = (props: FixViewProps) => {
)}
/>
)}
{navigationClose()}
{!props.hideNavClose && navigationClose()}
<section className={styles.fixSection}>
<div className={styles.viewWrapper}>{props.children}</div>
<Link
className={`${styles.navArrow} ${styles.navArrowNext}`}
href={props.nextStep.href}
aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
onClick={() => {
recordTelemetry("button", "click", {
button_id: "next_arrow",
});
}}
>
<Image alt="" src={ImageArrowRight} />
</Link>
{!props.hideNextNavigationRightArrow && (
<Link
className={`${styles.navArrow} ${styles.navArrowNext}`}
href={props.nextStep.href}
aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
onClick={() => {
recordTelemetry("button", "click", {
button_id: "next_arrow",
});
}}
>
<Image alt="" src={ImageArrowRight} />
</Link>
)}
</section>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
@import "../../../../../../../../../tokens";

.dataBrokerInformationWrapper {
.exposureCardWrapper {
margin-top: $spacing-md;
padding-bottom: $spacing-lg;

.exposureCard {
display: flex;
flex-direction: column;
background-color: $color-white;
border: 2px solid rgba($color-purple-70, 0.2);
border-radius: $border-radius-lg;
padding: $layout-sm $layout-sm $layout-xs $layout-sm;

.dataClassesList {
justify-content: space-between;
margin-left: 0;
display: grid;
grid-template-columns: 1fr;
grid-row-gap: $spacing-sm;
transition: opacity 0.35s ease-in-out;
opacity: 1;

&.fadeOut {
opacity: 0;
}

@media screen and (min-width: $screen-md) {
grid-template-columns: 1fr 1fr 1fr;
gap: $spacing-sm;
}

@media screen and (min-width: $screen-lg) {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: $layout-xs;
flex-wrap: wrap;
justify-content: flex-start;
}
}

.buttonsWrapper {
margin-top: $spacing-lg;
border-top: 2px solid $color-grey-10;
padding-top: $spacing-lg;
display: flex;
gap: $spacing-sm;
}

.estimatedTime {
@include estimated-time;
padding-top: $spacing-sm;
}
}
}

.header {
font: $text-body-lg;
font-weight: 700;
transition: opacity 0.35s ease-in-out;
opacity: 1;

&.fadeOut {
opacity: 0;
}
}
}

.removalGuideInstructionsWrapper {
.backArrow {
all: unset;
cursor: pointer;
}
.headerRemovalGuide {
padding-top: $spacing-lg;
font: $text-body-xl;
font-weight: 700;
}

.buttonWrapper {
display: flex;
justify-content: center;
padding-top: $spacing-lg;
}
}

.removalContentSection {
margin-top: $layout-md;

dt {
font: $text-body-lg;
font-weight: 600;

&.removalGuideInstructions {
font: $text-body-md;
font-weight: 700;
}
}

dd {
padding-top: $spacing-sm;
}

ol {
padding-top: $spacing-sm;

li {
margin-bottom: $spacing-xs;
}
}

button {
margin-top: $spacing-lg;
}
}
Loading

0 comments on commit df5ad6c

Please sign in to comment.