Merge branch 'main' into dependabot/npm_and_yarn/storybook-b32a16fbca

locales/he/data-classes.ftl

@@ -2,7 +2,8 @@
 # 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/.
 
-## Breach Data Classes
+
+# Breach Data Classes
 
 account-balances = יתרות בחשבון
 address-book-contacts = פרטי אנשי קשר
@@ -16,7 +17,7 @@ avatars = אווטארים
 bank-account-numbers = מספרי חשבון בנק
 beauty-ratings = דירוגי יופי
 biometric-data = נתונים ביומטריים
-# This string is the shortened version of "Biographies", and 
+# This string is the shortened version of "Biographies", and
 # refers to biographical data about a user.
 bios = פרטים ביוגרפיים
 browser-user-agent-details = פרטי סוכן משתמש בדפדפן

locales/he/email-strings.ftl

@@ -2,52 +2,39 @@
 # 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/.
 
-# Firefox Monitor is a product name and should not be translated.
--product-name = Firefox Monitor
-# Firefox is a brand name and should not be translated.
--brand-name = Firefox
+
+## Email headers
+
+
+## Email footers
 
 # Firefox Relay is a product name and should not be translated.
 -product-name-relay = Firefox Relay
-
 # A link to legal information about mozilla products.
 legal = מידע משפטי
-
-# Unsubscribe link in email.
-email-unsub-link = ביטול מינוי
-
 # Button text
 verify-email-cta = אימות דוא״ל
-
 # Headline of verification email
 email-link-expires = קישור זה יפוג תוך 24 שעות
 
-## Variables:
-##   $userEmail (string) - User email address
-
 ##
 
 # Subject line of email
 email-subject-no-breaches = { -product-name } לא מצא דליפות נתונים מוכרות
-
 # Subject line of email
 email-subject-verify = אימות הדוא״ל שלך עבור { -product-name }
 
 ## 2022 email template. HTML tags should not be translated, e.g. `<a>`
 
 
-## Monthly email for unresolved breaches. HTML tags should not be translated, e.g. `<br>`
-## Variables:
-##   $email-address (string) - Email address
-
-
 ## Verification email
 
 
 ## Breach report
-## Variables:
-##   $email-address (string) - Email address
 
 
 ## Breach alert
 
+
+## Redesigned breach alert email
+

locales/sk/exposure-card.ftl

@@ -3,7 +3,6 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 chevron-alt = Podrobnosti o úniku
-
 exposure-card-exposure-type = Typ odhalenia
 exposure-card-date-found = Dátum odhalenia
 
@@ -29,9 +28,10 @@ exposure-card-other = Iné
 exposure-card-description-data-breach-action-needed = Vaše informácie boli odhalené pri <data_breach_link>úniku údajov spoločnosti { $data_breach_company } dňa { $data_breach_date }</data_breach_link>. Prevedieme vás krokmi na nápravu.
 exposure-card-description-data-breach-fixed = Vykonali ste kroky potrebné na vyriešenie <data_breach_link>tohto úniku</data_breach_link>. Neustále budeme monitorovať nové úniky údajov a upozorníme vás na akékoľvek nové odhalenia.
 exposure-card-your-exposed-info = Vaše odhalené informácie:
+exposure-card-found-the-following-data = { -brand-monitor } našiel nasledujúce uniknuté údaje:
 exposure-card-exposure-type-data-broker = Informácie na predaj
 exposure-card-exposure-type-data-breach = Únik údajov
-exposure-card-cta = Vyriešiť všetky odhalenia
+exposure-card-resolve-exposures-cta = Vyriešiť úniky
 exposure-card-label-company-logo = Logo spoločnosti
 exposure-card-label-company = Spoločnosť
 # Status of the exposure card, could be In Progress, Fixed or Action Needed
@@ -40,3 +40,4 @@ exposure-card-label-status = Stav
 # $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>Skvelá práca!</b> Tento únik ste vyriešili.

locales/sk/settings.ftl

@@ -15,8 +15,6 @@ settings-alert-preferences-allow-breach-alerts-title = Okamžité upozornenia na
 settings-alert-preferences-allow-breach-alerts-subtitle = Tieto upozornenia sa odosielajú okamžite po zistení úniku údajov
 settings-alert-preferences-option-one = Upozornenia na únik údajov posielať na dotknutú e‑mailovú adresu
 settings-alert-preferences-option-two = Všetky upozornenia na únik údajov posielať na hlavnú e‑mailovú adresu
-settings-alert-preferences-allow-monthly-monitor-report-title = Mesačný prehľad { -brand-monitor(case: "gen") }
-settings-alert-preferences-allow-monthly-monitor-report-subtitle = Mesačný prehľad nových únikov, toho, čo bolo opravené a čo si vyžaduje vašu pozornosť.
 
 ## Monitored email addresses
 
@@ -51,12 +49,6 @@ settings-email-number-of-breaches-info =
        *[other] Vyskytuje sa v { $breachCount } známych únikoch.
     }
 
-## Deactivate account
-
-settings-deactivate-account-title = Deaktivovať účet
-settings-deactivate-account-info-2 = { -product-short-name } môžete deaktivovať odstránením svojho { -brand-mozilla-account(case: "gen", capitalization: "lower") }.
-settings-fxa-link-label-3 = Prejsť do Nastavení { -brand-mozilla-account(case: "gen", capitalization: "lowe") }
-
 ## Delete Monitor account
 
 settings-delete-monitor-free-account-title = Odstrániť účet služby { -brand-monitor }
@@ -68,3 +60,18 @@ settings-delete-monitor-free-account-dialog-cta-label = Odstrániť účet
 settings-delete-monitor-free-account-dialog-cancel-button-label = Rozmyslel som si to
 settings-delete-monitor-account-confirmation-toast-label-2 = Váš účet služby { -brand-monitor } je teraz odstránený.
 settings-delete-monitor-account-confirmation-toast-dismiss-label = Zavrieť
+
+## Monthly Monitor Report
+
+settings-alert-preferences-allow-monthly-monitor-report-title = Mesačný prehľad { -brand-monitor(case: "gen") }
+settings-alert-preferences-allow-monthly-monitor-report-subtitle = Mesačný prehľad nových únikov, toho, čo bolo opravené a čo si vyžaduje vašu pozornosť.
+
+## Settings page redesign
+
+settings-tab-label-edit-info = Upravte svoje informácie
+settings-tab-label-notifications = Nastaviť upozornenia
+settings-tab-label-manage-account = Spravovať účet
+settings-tab-subtitle-manage-account = Spravujte svoj účet služby { -product-name }.
+settings-tab-notifications-marketing-title = Marketingová komunikácia
+settings-tab-notifications-marketing-text = Pravidelné aktualizácie o službe { -brand-monitor }, { -brand-mozilla(case: "loc") } a našich ďalších bezpečnostných produktoch.
+settings-tab-notifications-marketing-link-label = Prejsť na nastavení e‑mailov od { -brand-mozilla(case: "gen") }

locales/tr/settings.ftl

@@ -15,8 +15,6 @@ settings-alert-preferences-allow-breach-alerts-title = Anlık ihlal uyarıları
 settings-alert-preferences-allow-breach-alerts-subtitle = Bu uyarılar bir veri ihlali algılandığı anda hemen gönderilir.
 settings-alert-preferences-option-one = İhlal uyarılarını etkilenen e-posta adresine gönder
 settings-alert-preferences-option-two = Tüm ihlal uyarılarını birinci e-posta adresine gönder
-settings-alert-preferences-allow-monthly-monitor-report-title = Aylık { -brand-monitor } raporu
-settings-alert-preferences-allow-monthly-monitor-report-subtitle = Yeni riskler, çözülen sorunlar ve ilgilenmeniz gereken sorunlara dair aylık bir rapor.
 
 ## Monitored email addresses
 
@@ -47,12 +45,6 @@ settings-email-number-of-breaches-info =
        *[other] Bilinen { $breachCount } ihlalde yer alıyor.
     }
 
-## Deactivate account
-
-settings-deactivate-account-title = Hesabı devre dışı bırak
-settings-deactivate-account-info-2 = { -product-short-name }’ü { -brand-mozilla-account }nızı silerek devre dışı bırakabilirsiniz.
-settings-fxa-link-label-3 = { -brand-mozilla-account } ayarlarına gidin
-
 ## Delete Monitor account
 
 settings-delete-monitor-free-account-title = { -brand-monitor } hesabını sil
@@ -64,3 +56,12 @@ settings-delete-monitor-free-account-dialog-cta-label = Hesabı sil
 settings-delete-monitor-free-account-dialog-cancel-button-label = Vazgeçtim, geri dön
 settings-delete-monitor-account-confirmation-toast-label-2 = { -brand-monitor } hesabınız silindi.
 settings-delete-monitor-account-confirmation-toast-dismiss-label = Kapat
+
+## Monthly Monitor Report
+
+settings-alert-preferences-allow-monthly-monitor-report-title = Aylık { -brand-monitor } raporu
+settings-alert-preferences-allow-monthly-monitor-report-subtitle = Yeni riskler, çözülen sorunlar ve ilgilenmeniz gereken sorunlara dair aylık bir rapor.
+
+## Settings page redesign
+
+settings-tab-notifications-marketing-title = Pazarlama iletişimi

locales/vi/exposure-card.ftl

@@ -3,7 +3,6 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 chevron-alt = Chi tiết dữ liệu bị lộ
-
 exposure-card-exposure-type = Loại vụ rò rỉ
 exposure-card-date-found = Ngày vụ rò rỉ
 
@@ -29,9 +28,10 @@ exposure-card-other = Khác
 exposure-card-description-data-breach-action-needed = Thông tin của bạn đã bị lộ trong <data_breach_link>vụ rò rỉ dữ liệu { $data_breach_company } vào { $data_breach_date }.</data_breach_link> Chúng tôi sẽ hướng dẫn bạn các bước để khắc phục sự cố.
 exposure-card-description-data-breach-fixed = Bạn đã thực hiện các bước cần thiết để khắc phục <data_breach_link>rò rỉ này</data_breach_link>. Chúng tôi sẽ liên tục theo dõi các hành vi rò rỉ dữ liệu và cảnh báo cho bạn về bất kỳ hành vi rò rỉ dữ liệu mới nào.
 exposure-card-your-exposed-info = Thông tin bị lộ của bạn:
+exposure-card-found-the-following-data = { -brand-monitor } tìm thấy dữ liệu bị lộ sau đây:
 exposure-card-exposure-type-data-broker = Thông tin để bán
 exposure-card-exposure-type-data-breach = Vụ rò rỉ
-exposure-card-cta = Giải quyết tất cả vụ rò rỉ
+exposure-card-resolve-exposures-cta = Giải quyết dữ liệu bị lộ
 exposure-card-label-company-logo = Logo công ty
 exposure-card-label-company = Công ty
 # Status of the exposure card, could be In Progress, Fixed or Action Needed
@@ -40,3 +40,4 @@ exposure-card-label-status = Trạng thái
 # $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>Làm tốt lắm!</b> Bạn đã giải quyết vấn đề này.

locales/vi/settings.ftl

@@ -15,8 +15,6 @@ settings-alert-preferences-allow-breach-alerts-title = Cảnh báo rò rỉ tứ
 settings-alert-preferences-allow-breach-alerts-subtitle = Những cảnh báo này được gửi ngay lập tức khi phát hiện rò rỉ dữ liệu
 settings-alert-preferences-option-one = Gửi thông báo rò rỉ dữ liệu đến địa chỉ email bị ảnh hưởng
 settings-alert-preferences-option-two = Gửi tất cả cảnh báo rò rỉ dữ liệu đến địa chỉ email chính
-settings-alert-preferences-allow-monthly-monitor-report-title = Báo cáo hàng tháng { -brand-monitor }
-settings-alert-preferences-allow-monthly-monitor-report-subtitle = Bản cập nhật hàng tháng về số lần lộ dữ liệu mới, những gì đã được sửa và những gì bạn cần chú ý.
 
 ## Monitored email addresses
 
@@ -39,12 +37,6 @@ settings-remove-email-button-tooltip = Dừng giám sát { $emailAddress }
 #   $breachCount (number) - Number of breaches
 settings-email-number-of-breaches-info = Xuất hiện trong { $breachCount } rò rỉ dữ liệu đã biết.
 
-## Deactivate account
-
-settings-deactivate-account-title = Hủy kích hoạt tài khoản
-settings-deactivate-account-info-2 = Bạn có thể vô hiệu hóa { -product-short-name } bằng cách xoá { -brand-mozilla-account } của bạn.
-settings-fxa-link-label-3 = Đi đến cài đặt { -brand-mozilla-account }
-
 ## Delete Monitor account
 
 settings-delete-monitor-free-account-title = Xoá tài khoản { -brand-monitor }
@@ -56,3 +48,18 @@ settings-delete-monitor-free-account-dialog-cta-label = Xóa tài khoản
 settings-delete-monitor-free-account-dialog-cancel-button-label = Nghĩ lại rồi, đưa tôi quay lại
 settings-delete-monitor-account-confirmation-toast-label-2 = Tài khoản { -brand-monitor } của bạn đã bị xóa.
 settings-delete-monitor-account-confirmation-toast-dismiss-label = Bỏ qua
+
+## Monthly Monitor Report
+
+settings-alert-preferences-allow-monthly-monitor-report-title = Báo cáo hàng tháng { -brand-monitor }
+settings-alert-preferences-allow-monthly-monitor-report-subtitle = Bản cập nhật hàng tháng về số lần lộ dữ liệu mới, những gì đã được sửa và những gì bạn cần chú ý.
+
+## Settings page redesign
+
+settings-tab-label-edit-info = Chỉnh sửa thông tin của bạn
+settings-tab-label-notifications = Đặt thông báo
+settings-tab-label-manage-account = Quản lý tài khoản
+settings-tab-subtitle-manage-account = Quản lý tài khoản { -product-name } của bạn.
+settings-tab-notifications-marketing-title = Truyền thông tiếp thị
+settings-tab-notifications-marketing-text = Cập nhật định kỳ về { -brand-monitor }, { -brand-mozilla }, và các sản phẩm bảo mật khác của chúng tôi.
+settings-tab-notifications-marketing-link-label = Đi đến cài đặt email { -brand-mozilla }

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/Panel.module.scss

@@ -39,7 +39,10 @@
     p {
       color: $color-grey-40;
       font-weight: 400;
-      padding-right: $layout-xl;
+
+      @media screen and (min-width: $content-md) {
+        padding-right: $layout-xl;
+      }
     }
   }
 }

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.module.scss

@@ -15,9 +15,13 @@
     label {
       align-items: center;
       display: flex;
-      gap: $layout-md;
+      gap: $layout-xs;
       justify-content: space-between;
 
+      @media screen and (min-width: $content-md) {
+        gap: $layout-md;
+      }
+
       div {
         display: flex;
         flex-direction: column;

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.tsx

@@ -15,10 +15,11 @@ import { EmailUpdateCommOptionRequest } from "../../../../../../../api/v1/user/u
 import { useTelemetry } from "../../../../../../../hooks/useTelemetry";
 import { useRadioGroup } from "react-aria";
 import { VisuallyHidden } from "../../../../../../../components/server/VisuallyHidden";
-import { Button } from "../../../../../../../components/client/Button";
+import { TelemetryButton } from "../../../../../../../components/client/TelemetryButton";
 import styles from "./SettingsPanelNotifications.module.scss";
 import { SwitchInput } from "../../../../../../../components/client/SwitchInput";
 import { RadioInput } from "../../../../../../../components/client/RadioInput";
+import { CONST_URL_MOZILLA_BASKET } from "../../../../../../../../constants";
 
 export type SettingsPanelNotificationsProps = {
   data: SubscriberEmailPreferencesOutput;
@@ -215,9 +216,21 @@ function SettingsPanelNotifications(props: SettingsPanelNotificationsProps) {
       <section>
         <h4>{l10n.getString("settings-tab-notifications-marketing-title")}</h4>
         <p>{l10n.getString("settings-tab-notifications-marketing-text")}</p>
-        <Button className={styles.link} variant="link" href="/">
+        <TelemetryButton
+          className={styles.link}
+          variant="link"
+          href={`${CONST_URL_MOZILLA_BASKET}/fxa/?email=${props.subscriber.primary_email}`}
+          target="_blank"
+          event={{
+            module: "link",
+            name: "click",
+            data: {
+              link_id: "clicked_marketing_email_settings",
+            },
+          }}
+        >
           {l10n.getString("settings-tab-notifications-marketing-link-label")}
-        </Button>
+        </TelemetryButton>
       </section>
     </>
   );

src/constants.ts

@@ -28,6 +28,7 @@ export const CONST_URL_TERMS =
   "https://www.mozilla.org/about/legal/terms/subscription-services/";
 export const CONST_URL_PRIVACY_POLICY =
   "https://www.mozilla.org/privacy/subscription-services/";
+export const CONST_URL_MOZILLA_BASKET = "https://basket.mozilla.org";
 export const CONST_URL_DATA_PRIVACY_PETITION_BANNER =
   "https://foundation.mozilla.org/campaigns/demand-privacy-for-all-support-a-us-data-privacy-law-v1/?utm_source=monitor&utm_medium=in-product&utm_campaign=24-pfa";
 export const CONST_URL_MONITOR_GITHUB =

src/e2e/pages/landingPage.ts

@@ -262,6 +262,7 @@ export class LandingPage {
   }
 
   async goToSignIn() {
+    await this.page.waitForTimeout(500); // sign in button may not be loaded at this point.
     await this.signInButton.click();
     // FxA can take a while to load on stage:
     await this.page.waitForURL("**/oauth/**", { timeout: 60_000 });

src/e2e/pages/settingsPage.ts

@@ -9,6 +9,7 @@ export class SettingsPage {
   readonly settingsHeader: Locator;
   readonly emailPrefHeader: Locator;
   readonly emailHeader: Locator;
+  readonly tabNotifications: Locator;
   readonly deleteHeader: Locator;
   readonly deactivateHeader: Locator;
   readonly addEmailButton: Locator;
@@ -25,6 +26,9 @@ export class SettingsPage {
     this.settingsHeader = page.locator("h2").first();
     this.emailPrefHeader = page.getByText(/Email preferences/);
     this.emailHeader = page.getByText(/Monitored email addresses/);
+    this.tabNotifications = page.getByRole("tab", {
+      name: "Set notifications",
+    });
     this.deleteHeader = page.getByText(/Delete ⁨Monitor⁩ account/);
     this.deactivateHeader = page.getByText(/Deactivate account/);
     this.addEmailButton = page.getByText(/Add email address/);

src/e2e/specs/dashboard/dashboard-navigation.spec.ts

@@ -40,7 +40,7 @@ test.describe(`${process.env.E2E_TEST_ENV} - Breaches Dashboard - Navigation @sm
     //testrail's step 1
     await dashboardPage.goToDashboard();
     await goToHrefOf(dashboardPage.settingsPageLink);
-    await expect(page).toHaveURL(/\/settings$/);
+    await expect(page).toHaveURL(/.*\/settings.*/);
 
     //testrail's step 2
     await goToHrefOf(dashboardPage.dashboardPageLink);