From 322430d49e8dd2bf6de2f626dfe5487d3b06f541 Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Tue, 30 Jul 2024 14:26:17 +0200
Subject: [PATCH 1/2] chore: Add directory certificates to .gitignore

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 6aefeddb9f7..a8d1e559161 100644
--- a/.gitignore
+++ b/.gitignore
@@ -69,3 +69,6 @@ next-env.d.ts
 # Glean
 .venv
 /src/telemetry/generated/
+
+# certificates
+certificates

From f07efdfa89bdf2c5d7ca5bcff9ff28cfafeb053e Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Tue, 30 Jul 2024 17:26:25 +0200
Subject: [PATCH 2/2] fix: Use TelemetryLink instead of TelemetryButton for
 petition banner

---
 .gitignore                                    |  3 --
 .../(dashboard)/dashboard/Dashboard.test.tsx  | 13 ++------
 .../client/PetitionBanner.module.scss         | 15 +++++++++
 src/app/components/client/PetitionBanner.tsx  | 31 ++++++-------------
 4 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/.gitignore b/.gitignore
index a8d1e559161..6aefeddb9f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -69,6 +69,3 @@ next-env.d.ts
 # Glean
 .venv
 /src/telemetry/generated/
-
-# certificates
-certificates
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx
index 01018181b6f..ba185bdc9d5 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx
@@ -10,7 +10,6 @@ import {
   queryByRole,
   render,
   screen,
-  waitFor,
   within,
 } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
@@ -3811,16 +3810,10 @@ describe("CSAT survey banner", () => {
     });
     await user.click(dismissCta);
 
-    // The dismissal of the petition banner is being delayed so that the click
-    // on the “Sign petition” link can get registered before the banner is
-    // being hidden. As a result we’ll need to wait for the follow-up CSAT
-    // survey to appear.
-    await waitFor(() => {
-      const answerButton = screen.getByRole("button", {
-        name: "Neutral",
-      });
-      expect(answerButton).toBeInTheDocument();
+    const answerButton = screen.getByRole("button", {
+      name: "Neutral",
     });
+    expect(answerButton).toBeInTheDocument();
   });
 });
 
diff --git a/src/app/components/client/PetitionBanner.module.scss b/src/app/components/client/PetitionBanner.module.scss
index 3fea104e31e..01ef3d539a1 100644
--- a/src/app/components/client/PetitionBanner.module.scss
+++ b/src/app/components/client/PetitionBanner.module.scss
@@ -33,6 +33,21 @@
     }
   }
 
+  .signLink {
+    background-color: $color-purple-60;
+    border-radius: $border-radius-md;
+    color: $color-white;
+    font: $text-body-md;
+    font-weight: 500;
+    line-height: 1;
+    padding: $spacing-md $spacing-lg;
+    text-align: center;
+    text-decoration: none;
+    &:hover {
+      background-color: $color-purple-50;
+    }
+  }
+
   .dismissButton {
     color: $color-white;
     &:hover {
diff --git a/src/app/components/client/PetitionBanner.tsx b/src/app/components/client/PetitionBanner.tsx
index 94f9a975d5b..26429546c39 100644
--- a/src/app/components/client/PetitionBanner.tsx
+++ b/src/app/components/client/PetitionBanner.tsx
@@ -15,6 +15,7 @@ import { TelemetryButton } from "./TelemetryButton";
 import { useTelemetry } from "../../hooks/useTelemetry";
 import { useViewTelemetry } from "../../hooks/useViewTelemetry";
 import { DismissalData } from "../../hooks/useLocalDismissal";
+import { TelemetryLink } from "./TelemetryLink";
 
 export const PetitionBanner = (props: {
   user: Session["user"];
@@ -48,33 +49,19 @@ export const PetitionBanner = (props: {
           })}
         </p>
         <div className={styles.buttons}>
-          <TelemetryButton
-            variant="primary"
-            className={styles.signButton}
-            onPress={() => {
-              // In order to prevent the banner from being hidden before
-              // the click on the link button is getting registered: Delay the
-              // dismissal until the next event loop execution.
-              // A timeout value of `0` should be enough, but unfortunately
-              // this does not seem to work on iOS — even a value lower than
-              // `100` should be plenty, but since this is now an arbitrary
-              // value let’s make extra sure.
-              setTimeout(() => {
-                dismiss();
-              }, 100);
-            }}
+          <TelemetryLink
             href={CONST_URL_DATA_PRIVACY_PETITION_BANNER}
+            className={styles.signLink}
             target="_blank"
-            event={{
-              module: "ctaButton",
-              name: "click",
-              data: {
-                button_id: "sign_petition",
-              },
+            eventData={{
+              link_id: "sign_petition",
+            }}
+            onClick={() => {
+              dismiss();
             }}
           >
             {l10n.getString("petition-banner-data-privacy-button-sign")}
-          </TelemetryButton>
+          </TelemetryLink>
           <TelemetryButton
             variant="tertiary"
             className={styles.dismissButton}