Merge pull request #4889 from mozilla/mntor-3432-ios

[iOS] Fix petition banner link (MNTOR-3432)
mozilla · Aug 20, 2024 · 4a185e0 · 4a185e0
2 parents 49748f4 + 7a76546
commit 4a185e0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 32 deletions.
diff --git a/...p/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx b/...p/(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";
@@ -3832,16 +3831,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
@@ -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
@@ -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}