Merge pull request #5368 from mozilla/mntor-3851

Add link to marketing email preferences

Author: flozia

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 =