MNTOR-1692 Resolution Flow: Data Broker Results #3201

maxxcrawford · 2023-07-07T16:27:47Z

Summary

This PR adds initial routes for the entire guided fix flow, and builds out the initial Data Broker scan results page. Additional pages (welcome, manual removal, automatic removal)

Jira: MNTOR-1692

TODO

~~Add logic to next/prev buttons~~ See known issues
~~Add logic/state to ℹ️ button next to "View your info on these sites" text~~ See known issues
Add logic to "view more" button to show additional profiles
Add close/X button
Style "Remove them for me" page (No functionality)
Style "I'll remove them manually" page (No functionality)
Add logic/active state to progress bar
~~Add (Number) on progress bar~~ See known issues

Known issues:

Setting the correct target forward/backward arrow links is not working. Root issue is component placement to pass targets on a per page/route level. This same sort of issue also applies to the (#) in the progress bar.
Cannot add the standard dialog modal to my page as the page.tsx are currently server-side
Logos are missing for data brokers
The logic isn't very protected. You can "land" in this flow by going to the URL, regardless if you've started a scan

Other Notes

When showing data counts for each data broker profile, be sure the number is generated/served from the server to not expose extra info

Testing

⭐ Setup: You need scan results first: Please run through the welcome onboarding flow (/redesign/user/welcome) first.

Testing steps:

Navigate to /redesign/user/dashboard/
- Alternatively, you could start on redesign/user/dashboard/fix/data-broker-profiles/start-free-scan
Click on "Let's fix it" in the top banner on the dashboard
- Note: This should take you to /redesign/user/dashboard/fix/data-broker-profiles/view-data-brokers
Expected: You should get the data broker screen
From here, you can
- View all the data broker profiles (Click "view more")
- Go to upgrade flow (Click "Remove them for me")
- Go to manual removal flow (Click "I'll remove them manually")

Screenshots

TBD

Vinnl

pdehaan · 2023-07-07T16:55:46Z

very review? but @maxxcrawford said "DO NOT REVIEW"!!! :ohno:

locales-pending/fix.ftl

.../redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/page.tsx

pdehaan · 2023-07-13T23:25:24Z

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

+
+  return (
+    <button className={styles.navArrowBack} onClick={() => router.back()}>
+      <Image alt="" src={imageNavLeft} />


nit: might need a localized "Back" alt/aria-label for screen readers.

Note: This comment still stands, even if it's not technically going "back" in history, but more to the previous step.

pdehaan · 2023-07-17T20:25:36Z

locales-pending/fix.ftl

nits: add linebreak and remove trailing spaces.

pdehaan · 2023-07-17T20:49:49Z

.../redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/page.tsx

          {l10n.getString(
            "fix-flow-data-broker-profiles-view-data-broker-profiles-view-info-on-sites"
          )}
-          <button>
+          <button className={styles.questionTooltip}>


Probably off topic, but I think the <button> or <Image> tags needs some a11y alt= or aria-label= attributes for screen readers.

pdehaan · 2023-07-17T20:51:40Z

src/app/components/client/DataBrokerProfiles.module.scss

+    margin: 0;
+    padding: 0;
+
+    &:nth-child(n + 5) {


nit: add comment on what element nth-child(n + 5) is referring to.

Added a context comment to every (n +...) selector. Revised in 67ecbc1

src/app/components/client/DataBrokerProfiles.tsx

pdehaan · 2023-07-17T21:01:23Z

.../redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/page.tsx

+import { useL10n } from "../../../../../../../../hooks/l10n";
+import { DataBrokerProfiles } from "../../../../../../../../components/client/DataBrokerProfiles";
+import iconQuestionMark from "./images/icon-question-mark.svg";
+import { getOnerepScanResults } from "../../../../../../../../../db/tables/onerep_scans";


./src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/page.tsx 15:10 Warning: 'getOnerepScanResults' is defined but never used. Allowed unused vars must match /^_/u. @typescript-eslint/no-unused-vars

pdehaan · 2023-07-17T21:02:56Z

src/app/components/client/FixNavigation.tsx

+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import styles from "./FixNavigation.module.scss";
+import stepDoneIcon from "./assets/step-counter-done.svg";


10:8 Warning: 'stepDoneIcon' is defined but never used. Allowed unused vars must match /^_/u. @typescript-eslint/no-unused-vars

pdehaan · 2023-07-17T21:04:44Z

src/app/components/client/FixNavigation.tsx

+
+// type NavigationItems = Array<NavigationItemsContent>
+
+export const FixNavigation = (props: Props) => {


38:31 Warning: 'props' is defined but never used. Allowed unused args must match /^_/u. @typescript-eslint/no-unused-vars

Also unclear on what "Props" is here since the definition above on L25 is commented out (yet ESLint didn't seemingly flag that as an issue?)

I just noticed the squiggle line. Same thought - it's weird lint didn't catch this? Added a props definition. Revised in 35e256b

pdehaan · 2023-07-17T21:05:45Z

src/app/components/client/FixNavigation.tsx

+  );
+};
+
+function isStepDone(step: StepId, currentStep: StepId): boolean {


233:10 Warning: 'isStepDone' is defined but never used. Allowed unused vars must match /^_/u. @typescript-eslint/no-unused-vars

pdehaan · 2023-07-20T22:09:34Z

locales-pending/fix.ftl

+fix-flow-nav-leaked-passwords = Leaked passwords
+fix-flow-nav-security-recommendations = Security recommendations
+fix-flow-data-broker-profiles-start-free-scan-headline = Find out which sites are selling your personal info
+fix-flow-data-broker-profiles-start-free-scan-content-p1 = Before you review your data breaches, would you like us to search for you on 190 data broker sites that may be selling your personal information? 


nit: we should make 190 a variable, so we can optionally update across n locales from a single source.
It seems to be hardcoded here and elsewhere in the .ts/.tsx templates.

I'd prefer not to do that, because then it becomes a huge pain to translate (6 variants for some locales). Honestly, better to be more vague, e.g. "almost 200 hundred", because nobody will go and keep this up to date with the real number…

In this case, I think hundreds would work just as well.

BTW, looks like we used the plural approach on another string :-(

onboarding-get-started-how-it-works-dialog-step1-content = { $dataBrokerTotalCount -> *[other] With just a few key pieces of information, we’ll search for you in all known data breaches and { $dataBrokerTotalCount } major data broker sites. All users get the first scan free. }

Can we ask content to revisit this, and avoid shooting ourselves in the foot by putting a number that needs to be kept up-to-date? Based on previous experiences, we'll just forget to update it anyway, and this creates extra-work for some languages that is not completely warratend.

This isn't scientific or probably a great grep(tm), but possibly interesting:

git grep -IPn "\b190\b" -- ':!*.svg' | cat .env-dist:78:ONEREP_DATA_BROKER_COUNT=190 locales-pending/fix.ftl:8:fix-flow-data-broker-profiles-start-free-scan-content-p1 = Before you review your data breaches, would you like us to search for you on 190 data broker sites that may be selling your personal information? locales-pending/fix.ftl:41:# $data_broker_count is the number of data brokers scanned monthly (As of adding this, it is 190). This number will always be plural. locales-pending/fix.ftl:59:# $data_broker_count is the number of data brokers scanned monthly (As of adding this, it is 190). This number will always be plural. locales-pending/onboarding.ftl:16:# $dataBrokerTotalCount (number) - number of scanned data broker sites, e.g. 190 locales-pending/onboarding.ftl:62:# $dataBrokerTotalCount (number) - number of scanned data broker sites, e.g. 190 src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx:52: data_broker_sites_total_num: 190, src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx:69: data_broker_sites_total_num: 190, src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx:30: data_broker_count: 190, src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx:76: data_broker_count: 190, src/app/(proper_react)/redesign/(authenticated)/user/welcome/Onboarding.stories.tsx:20: dataBrokerCount={190} src/app/components/client/ExposuresFilterExplainer.tsx:30: data_broker_sites_total_num: 190, src/app/components/client/ExposuresFilterExplainer.tsx:61: data_broker_sites_total_num: 190,

As @pdehaan already found out: We are setting ONEREP_DATA_BROKER_COUNT as an env variable. It’s not only used for strings, but also calculations on views. I’d expect that variable to not change often. If it does, it will be updated. Nevertheless, if this is still a localization concern because of the additional effort this creates we’ll need to sync with PM & Content.

@flozia How do you know it's 190?
I found https://onerep.com/sites-we-remove-from and if I copy-paste+merge+dedupe the "People-search sites" and "Mirror people-search sites" sections, I get 195 results. But not sure if you're using some API or better method of calculating. I guess we could just have a monthly/quarterly calendar reminder or something if it truly is a manual task to count up results and keep them in sync.

Ah, OK, maybe they do have an API for this: https://docs.onerep.com/#tag/Data-Brokers
But I can't ping it directly since I don't have an API key.

@pdehaan This is a side-note, but to help lock in the exact number, we're discussing/determining how to support individual logos for each data broker.

@maxxcrawford The manual logo team is back, baby! :r+:

@flozia @pdehaan As stated else where in this review, I am using the plural fluent format *[other] {... and referencing the environment variable.

One note for @flozia: I ran into a hydration error issue when doing this, so it's still hard-coded, but I added a FIXME comment regarding it for now. (See 6e660ee)

locales-pending/fix.ftl

pdehaan · 2023-07-20T22:45:39Z

...t)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/start-free-scan/page.tsx

+          {l10n.getString(
+            "fix-flow-data-broker-profiles-start-free-scan-content-p2"
+          )}
+          <a href="#">


TODO: Add href? ALso, should this use <Link>?

pdehaan · 2023-07-20T22:50:22Z

.../redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/page.tsx

+          )}
+        </Link>
+        <Link
+          className="button secondary"


Why is it

className="button secondary"

here, but

className={`${buttonStyles.button} ${buttonStyles.primary}`}

above?

Why? 🤷

But hey! Great catch. Revised in 7e7a9d0

pdehaan · 2023-07-20T22:53:28Z

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

+import imageArrowLeft from "./images/icon-arrow-left.svg";
+import imageArrowRight from "./images/icon-arrow-right.svg";


nit: elsewhere we name these Pascal case ImageArrowLeft since they're a DOM Element.

Ahhh! Nice callout. Revised in 7e7a9d0

pdehaan · 2023-07-20T22:54:57Z

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

+    {
+      key: "data-broker-profiles",
+      labelStringId: "fix-flow-nav-data-broker-profiles",
+      name: "Data broker profiles",


Q: Are these names user facing and need to be localized?

Interesting. This attribute is no longer being used (in favor of the labelStringId entry which does reference a localized string). Removed in 7e7a9d0

pdehaan · 2023-07-20T23:00:46Z

src/app/components/client/DataBrokerProfiles.tsx

+      ></div>
+      {/* TODO: Add logic to show unique image per data broker */}
+      {/* <Image src={} alt={props.data.data_broker} /> */}
+      <a href={props.data.url}>


Q: Is this a local URL, and therefore this should be a <Link> element?

Coincidentally, I think you want props.data.link here, not props.data.url. Per example output in the API, url is a pointer to the user's profile on OneRep's site, link is a link to the data broker.

@rhelmer Great catch. That was my intent (and it is an external URL @pdehaan). Revised in dee2f4d

flodolo · 2023-07-21T04:29:57Z

locales-pending/fix.ftl

+fix-flow-nav-leaked-passwords = Leaked passwords
+fix-flow-nav-security-recommendations = Security recommendations
+fix-flow-data-broker-profiles-start-free-scan-headline = Find out which sites are selling your personal info
+fix-flow-data-broker-profiles-start-free-scan-content-p1 = Before you review your data breaches, would you like us to search for you on 190 data broker sites that may be selling your personal information? 


In this case, I think hundreds would work just as well.

locales-pending/fix.ftl

flodolo · 2023-07-21T04:34:01Z

locales-pending/fix.ftl

+# $data_broker_count is the number of data brokers scanned monthly (As of adding this, it is 190). This number will always be plural.
+fix-flow-data-broker-profiles-automatic-remove-features-monthly-scan = Monthly scan of { $data_broker_count } data broker sites that may be selling your personal info


Same note as above: can we get rid of the number? If not, we need a plural form to trigger Pontoon UI, even if it's always > 1.

flodolo · 2023-07-21T04:38:12Z

Note: opened #3238, since there seems to be quite a few issues in strings, and I would miss them all if it wasn't for @pdehaan attention to details.

Code review suggestions: Fluent string fixes Co-authored-by: Francesco Lodolo <[email protected]> Co-authored-by: Peter deHaan <[email protected]>

…entions, fix spacing, use brand variables

…s to use PascalCase

…oard

…ogic

…line, H3/H4 typography sizes

… correctly

maxxcrawford added WIP 🚧 Work in Progress 🛑 Do Not Merge Do not merge this PR, even if approved. labels Jul 7, 2023

Vinnl reviewed Jul 7, 2023

View reviewed changes

maxxcrawford changed the title ~~WIP: Stub component in Storybook~~ (WIP/DNM) MNTOR-1692 Resolution Flow: Data Broker Results Jul 7, 2023

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch 2 times, most recently from d6efa0c to c80aa41 Compare July 11, 2023 18:54

pdehaan reviewed Jul 13, 2023

View reviewed changes

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch from de5db3b to 4df524a Compare July 14, 2023 16:58

pdehaan reviewed Jul 17, 2023

View reviewed changes

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch 6 times, most recently from 0709a4a to 60a0f8f Compare July 20, 2023 21:47

maxxcrawford changed the title ~~(WIP/DNM) MNTOR-1692 Resolution Flow: Data Broker Results~~ MNTOR-1692 Resolution Flow: Data Broker Results Jul 20, 2023

maxxcrawford marked this pull request as ready for review July 20, 2023 21:53

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch from 60a0f8f to f11e432 Compare July 20, 2023 22:47

maxxcrawford requested review from pdehaan, Vinnl, rhelmer, codemist and flozia July 20, 2023 22:48

pdehaan reviewed Jul 20, 2023

View reviewed changes

flodolo requested changes Jul 21, 2023

View reviewed changes

maxxcrawford added Review: M Code review time: 1-2 hours and removed WIP 🚧 Work in Progress 🛑 Do Not Merge Do not merge this PR, even if approved. labels Jul 21, 2023

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch from 235bee5 to 1ae644a Compare July 21, 2023 20:38

maxxcrawford requested a review from flodolo July 21, 2023 20:38

flodolo approved these changes Jul 24, 2023

View reviewed changes

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch from 1ae644a to 3353502 Compare July 25, 2023 15:16

rhelmer assigned maxxcrawford Jul 25, 2023

maxxcrawford and others added 22 commits July 25, 2023 12:14

Fix MNTOR-1692 - Add Progress Bar for Guided Fix Flow Component

d4ca72d

Add Data Broker Profiles card component

963c825

Add layout page for guided/fix flow routes/pages

f16c158

Add start free scan step of data broker profiles fix flow

14550a2

Add view data broker profiles step of data broker profiles fix flow

77d1821

Add manual remove step of data broker profiles fix flow

e85e3ba

Add automatic remove (upgrade) step of data broker profiles fix flow

3289693

Add path to flow from dashboard page

680c398

Add additional navigation pages for fix/progress bar

bc31cfc

Apply suggestions from code review

532a850

Code review suggestions: Fluent string fixes Co-authored-by: Francesco Lodolo <[email protected]> Co-authored-by: Peter deHaan <[email protected]>

Update Fluent strings to accept dataBrokerCount the same across all m…

cfee74b

…entions, fix spacing, use brand variables

Move emoji into Fluent file

9726c02

Code cleanup: Removed unused imports, code comments, updated variable…

77ecc08

…s to use PascalCase

Add logic to redirect users who are not logged into back to the dashb…

9febae3

…oard

Update SCSS spacing/comments

76562da

Fix issue where data broker card was using wrong OneRep link

2c5bc6d

Update navigation component props def, remove commented code/unused l…

10cff0b

…ogic

Remove additional React import

f0ffbad

Design fixes: (Tablet) next/prev arrows content overlap, button under…

cbcb74c

…line, H3/H4 typography sizes

Fix lint error

ff0cacd

Add singluar versions to plural strings in fix.ftl to trigger Pontoon…

dcb923a

… correctly

Add jest/mock functions for Jest test issue

0b6a8d9

maxxcrawford force-pushed the MNTOR-1692-sites-selling-your-info-storybook branch from 084d7ba to 0b6a8d9 Compare July 25, 2023 17:14

maxxcrawford merged commit a4e06a3 into main Jul 25, 2023

maxxcrawford deleted the MNTOR-1692-sites-selling-your-info-storybook branch July 25, 2023 17:35


		// type NavigationItems = Array<NavigationItemsContent>

		export const FixNavigation = (props: Props) => {

		import imageArrowLeft from "./images/icon-arrow-left.svg";
		import imageArrowRight from "./images/icon-arrow-right.svg";

		# $data_broker_count is the number of data brokers scanned monthly (As of adding this, it is 190). This number will always be plural.
		fix-flow-data-broker-profiles-automatic-remove-features-monthly-scan = Monthly scan of { $data_broker_count } data broker sites that may be selling your personal info

MNTOR-1692 Resolution Flow: Data Broker Results #3201

MNTOR-1692 Resolution Flow: Data Broker Results #3201

Conversation

maxxcrawford commented Jul 7, 2023 • edited Loading

Summary

TODO

Other Notes

Testing

Screenshots

Vinnl left a comment

Choose a reason for hiding this comment

pdehaan commented Jul 7, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flodolo commented Jul 21, 2023 • edited Loading

maxxcrawford commented Jul 7, 2023 •

edited

Loading

flodolo commented Jul 21, 2023 •

edited

Loading