chore: Add .env variable for total broker count

.env-dist

@@ -75,6 +75,7 @@ HIBP_BREACH_DOMAIN_BLOCKLIST=a-blocked-domain.com,another-blocked-domain.org
 ONEREP_API_BASE=https://api.onerep.com
 ONEREP_API_KEY=
 ONEREP_WEBHOOK_SECRET=
+ONEREP_DATA_BROKER_COUNT=190
 
 # Firefox Remote Settings
 FX_REMOTE_SETTINGS_WRITER_SERVER=https://settings-writer.prod.mozaws.net/v1

locales-pending/onboarding.ftl

@@ -13,8 +13,8 @@ onboarding-get-started-how-it-works-dialog-heading-line1 = We’re here to prote
 onboarding-get-started-how-it-works-dialog-heading-line2 = Here’s how it works:
 onboarding-get-started-how-it-works-dialog-step1-heading = Scan for exposures
 # Variables:
-#   $dataBrokerCount (number) - number of scanned data broker sites, e.g. 190
-onboarding-get-started-how-it-works-dialog-step1-content = With just a few key pieces of information, we’ll search for you in all known data breaches and { $dataBrokerCount } major data broker sites. All users get the first scan free.
+#   $dataBrokerTotalCount (number) - number of scanned data broker sites, e.g. 190
+onboarding-get-started-how-it-works-dialog-step1-content = 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.
 onboarding-get-started-how-it-works-dialog-step2-heading = Remove your personal info
 onboarding-get-started-how-it-works-dialog-step2-content = We’ll show you what personal info each data broker site is selling. You’ll need to contact each data broker to request removal. Removal typically takes 7-10 business days, but some can take longer. Upgrade to { -brand-premium } and we’ll handle this for you.
 onboarding-get-started-how-it-works-dialog-step3-heading = Resolve data breaches
@@ -47,3 +47,9 @@ onboarding-enter-details-label-date-of-birth = Date of birth
 onboarding-enter-details-input-error-message-generic = Required to complete the scan
 onboarding-enter-details-input-error-message-location = Search and select your location
 onboarding-enter-details-input-error-message-age = You have to be at least 13 years old
+
+onboarding-find-exposures-progress-label = Scanning for exposures…
+# Variables:
+#   $dataBrokerTotalCount (number) - number of scanned data broker sites, e.g. 190
+#   $dataBrokerScannedCount (number) - number of the currently scanned data broker sites, e.g. between 0 and $dataBrokerTotalCount
+onboarding-find-exposures-progress-broker-counter = { $dataBrokerScannedCount } of { $dataBrokerTotalCount } known data breaches

src/app/(proper_react)/redesign/(authenticated)/user/welcome/FindExposures.tsx

@@ -8,22 +8,24 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { ProgressBar } from "../../../../../components/client/ProgressBar";
 import styles from "./FindExposures.module.scss";
+import { useL10n } from "../../../../../hooks/l10n";
 
 export const FindExposures = () => {
   const [scanProgress, setScanProgress] = useState(0);
   const [scanFinished, setScanFinished] = useState(false);
   const [checkingScanProgress, setCheckingScanProgress] = useState(false);
   const router = useRouter();
+  const l10n = useL10n();
 
-  const progressSteps = 6;
-  const maxProgress = 100;
-  const totalBreachesCount = 672;
-  const scannedBreachesCount = Math.ceil(
-    (totalBreachesCount * scanProgress) / 100
+  const dataBrokerTotalCount = Number(process.env.ONEREP_DATA_BROKER_COUNT);
+  const dataBrokerScannedCount = Math.ceil(
+    (dataBrokerTotalCount * scanProgress) / 100
   );
+  const maxProgress = 100;
+  const percentageSteps = 6;
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      const nextProgress = scanProgress + progressSteps;
+      const nextProgress = scanProgress + percentageSteps;
       setScanProgress(Math.min(nextProgress, maxProgress));
 
       // For development we are periodically checking the scan progress and set
@@ -57,11 +59,12 @@ export const FindExposures = () => {
   function ProgressLabel() {
     return (
       <div className={styles.progressLabel}>
-        Scanning for exposures…
+        {l10n.getString("onboarding-find-exposures-progress-label")}
         <div className={styles.progressLabelIndicator}>
-          {/* TODO: Localize string */}
-          <span>{scannedBreachesCount}</span>
-          {` of ${totalBreachesCount} known data breaches`}
+          {l10n.getString("onboarding-find-exposures-progress-label-counter", {
+            dataBrokerScannedCount,
+            dataBrokerTotalCount,
+          })}
         </div>
       </div>
     );

src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx

@@ -27,6 +27,7 @@ export const GetStarted = (props: Props) => {
     explainerDialogState
   );
 
+  const dataBrokerTotalCount = Number(process.env.ONEREP_DATA_BROKER_COUNT);
   return (
     <div className={styles.stepContent}>
       <h1>{l10n.getString("onboarding-get-started-heading")}</h1>
@@ -71,10 +72,7 @@ export const GetStarted = (props: Props) => {
                     <p>
                       {l10n.getString(
                         "onboarding-get-started-how-it-works-dialog-step1-content",
-                        {
-                          // TODO: Can we get this value from the OneRep API?
-                          dataBrokerCount: 190,
-                        }
+                        { dataBrokerTotalCount }
                       )}
                     </p>
                   </li>