Merge branch 'main' into e2e-convert-cron-to-pr

mozilla · Sep 19, 2024 · 53b6dfa · 53b6dfa
2 parents cb8591a + 669e479
commit 53b6dfa
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 78 deletions.
diff --git a/locales/en/unsubscribe.ftl b/locales/en/unsubscribe.ftl
@@ -12,6 +12,7 @@ unsubscribe-cta = Unsubscribe
 
 unsubscribe-success-from-monthly-report-header = You’re now unsubscribed
 unsubscribe-success-from-monthly-report-body = You can resubscribe or update your email preferences anytime from your { -brand-monitor } settings.
+unsubscribe-success-cta = Sign in to { -brand-monitor }
 
 # Error warning
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -160,7 +160,6 @@
     "stylelint-scss": "^6.6.0",
     "tsx": "^4.19.1",
     "typescript": "^5.6.2",
-    "universal-cookie": "^7.2.0",
     "yaml": "^2.5.0"
   }
 }
diff --git a/src/TestComponentWrapper.tsx b/src/TestComponentWrapper.tsx
@@ -8,28 +8,25 @@ import { PublicEnvProvider } from "./contextProviders/public-env";
 import { SessionProvider } from "next-auth/react";
 import { ReactAriaI18nProvider } from "./contextProviders/react-aria";
 import { getL10nBundles } from "./app/functions/l10n/storybookAndJest";
-import { CookiesProvider } from "./contextProviders/cookies";
 
 const l10nBundles = getL10nBundles();
 
 export const TestComponentWrapper = (props: { children: ReactNode }) => {
   return (
-    <CookiesProvider defaultSetOptions={{ path: "/" }}>
-      <L10nProvider bundleSources={l10nBundles}>
-        <PublicEnvProvider
-          publicEnvs={{
-            PUBLIC_APP_ENV:
-              /* c8 ignore next */
-              process.env.STORYBOOK === "true" ? "storybook" : "test",
-          }}
-        >
-          <SessionProvider session={null}>
-            <ReactAriaI18nProvider locale="en">
-              {props.children}
-            </ReactAriaI18nProvider>
-          </SessionProvider>
-        </PublicEnvProvider>
-      </L10nProvider>
-    </CookiesProvider>
+    <L10nProvider bundleSources={l10nBundles}>
+      <PublicEnvProvider
+        publicEnvs={{
+          PUBLIC_APP_ENV:
+            /* c8 ignore next */
+            process.env.STORYBOOK === "true" ? "storybook" : "test",
+        }}
+      >
+        <SessionProvider session={null}>
+          <ReactAriaI18nProvider locale="en">
+            {props.children}
+          </ReactAriaI18nProvider>
+        </SessionProvider>
+      </PublicEnvProvider>
+    </L10nProvider>
   );
 };
diff --git a/...redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx b/...redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx
@@ -5,29 +5,34 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "../../../../../components/client/Button";
 import styles from "./UnsubscribeMonthlyReport.module.scss";
 import UnsubscriptionImage from "./images/confirm-unsubscribe.svg";
 import Image from "next/image";
 import { useL10n } from "../../../../../hooks/l10n";
 import { toast } from "react-toastify";
+import { TelemetryButton } from "../../../../../components/client/TelemetryButton";
+import { useTelemetry } from "../../../../../hooks/useTelemetry";
+import { signIn } from "next-auth/react";
 
 export const UnsubscribeMonthlyReportView = ({ token }: { token: string }) => {
+  const recordTelemetry = useTelemetry();
+  const l10n = useL10n();
   const [unsubscribeSuccess, setUnsubscribeSuccess] = useState(false);
 
-  const l10n = useL10n();
   const copy = {
     confirmation: {
       header: l10n.getString("unsubscribe-from-monthly-report-header"),
       body: l10n.getString("unsubscribe-from-monthly-report-body"),
+      cta: l10n.getString("unsubscribe-cta"),
     },
     success: {
       header: l10n.getString("unsubscribe-success-from-monthly-report-header"),
       body: l10n.getString("unsubscribe-success-from-monthly-report-body"),
+      cta: l10n.getString("unsubscribe-success-cta"),
     },
   };
 
-  const { header, body } = unsubscribeSuccess
+  const { header, body, cta } = unsubscribeSuccess
     ? copy.success
     : copy.confirmation;
 
@@ -44,7 +49,13 @@ export const UnsubscribeMonthlyReportView = ({ token }: { token: string }) => {
               try_again_link: (
                 <button
                   className={styles.tryAgain}
-                  onClick={() => void handleUnsubscription()}
+                  onClick={() => {
+                    recordTelemetry("button", "click", {
+                      button_id:
+                        "unsuccessful_unsubscribe_from_monthly_report_try_again",
+                    });
+                    void handleUnsubscription();
+                  }}
                 />
               ),
             },
@@ -75,13 +86,34 @@ export const UnsubscribeMonthlyReportView = ({ token }: { token: string }) => {
       <Image src={UnsubscriptionImage} alt="" />
       <h1>{header}</h1>
       <p>{body}</p>
-      <Button
+      <TelemetryButton
+        event={
+          !unsubscribeSuccess
+            ? {
+                module: "ctaButton",
+                name: "click",
+                data: {
+                  button_id: "unsubscribe_from_monthly_report",
+                },
+              }
+            : {
+                module: "ctaButton",
+                name: "click",
+                data: {
+                  button_id: "unsubscribe_from_monthly_report_sign_in",
+                },
+              }
+        }
         className={styles.cta}
         variant="primary"
-        onPress={() => void handleUnsubscription()}
+        onPress={() => {
+          !unsubscribeSuccess
+            ? void handleUnsubscription()
+            : void signIn("fxa", { callbackUrl: "/user/dashboard" });
+        }}
       >
-        {l10n.getString("unsubscribe-cta")}
-      </Button>
+        {cta}
+      </TelemetryButton>
     </main>
   );
 };
diff --git a/src/app/(proper_react)/layout.tsx b/src/app/(proper_react)/layout.tsx
@@ -14,7 +14,6 @@ import { getCountryCode } from "../functions/server/getCountryCode";
 import { PageLoadEvent } from "../components/client/PageLoadEvent";
 import { getExperimentationId } from "../functions/server/getExperimentationId";
 import { getEnabledFeatureFlags } from "../../db/tables/featureFlags";
-import { CookiesProvider } from "../../contextProviders/cookies";
 
 export default async function Layout({ children }: { children: ReactNode }) {
   const l10nBundles = getL10nBundles();
@@ -26,18 +25,16 @@ export default async function Layout({ children }: { children: ReactNode }) {
   });
 
   return (
-    <CookiesProvider defaultSetOptions={{ path: "/" }}>
-      <L10nProvider bundleSources={l10nBundles}>
-        <ReactAriaI18nProvider locale={getLocale(l10nBundles)}>
-          <CountryCodeProvider countryCode={countryCode}>
-            {children}
-            <PageLoadEvent
-              experimentationId={getExperimentationId(session?.user ?? null)}
-              enabledFlags={enabledFlags}
-            />
-          </CountryCodeProvider>
-        </ReactAriaI18nProvider>
-      </L10nProvider>
-    </CookiesProvider>
+    <L10nProvider bundleSources={l10nBundles}>
+      <ReactAriaI18nProvider locale={getLocale(l10nBundles)}>
+        <CountryCodeProvider countryCode={countryCode}>
+          {children}
+          <PageLoadEvent
+            experimentationId={getExperimentationId(session?.user ?? null)}
+            enabledFlags={enabledFlags}
+          />
+        </CountryCodeProvider>
+      </ReactAriaI18nProvider>
+    </L10nProvider>
   );
 }
diff --git a/src/app/components/client/PageLoadEvent.tsx b/src/app/components/client/PageLoadEvent.tsx
@@ -50,9 +50,11 @@ export const PageLoadEvent = (props: Props) => {
     // record attributions on page load
     if (window.location.search?.length > 0) {
       if (!cookies.attributionsFirstTouch) {
-        setCookie("attributionsFirstTouch", window.location.search);
+        setCookie("attributionsFirstTouch", window.location.search, {
+          path: "/",
+        });
       }
-      setCookie("attributionsLastTouch", window.location.search);
+      setCookie("attributionsLastTouch", window.location.search, { path: "/" });
     }
   }, [setCookie, cookies.attributionsFirstTouch]);
   // This component doesn't render anything.

diff --git a/src/app/functions/client/deleteAllCookies.ts b/src/app/functions/client/deleteAllCookies.ts
@@ -2,11 +2,10 @@
  * 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/. */
 
-import { Cookies } from "react-cookie";
-
 export function deleteAllCookies() {
-  const cookies = new Cookies(null, { path: "/" });
-  Object.keys(cookies.getAll()).forEach((cookieName) =>
-    cookies.remove(cookieName),
-  );
+  const cookieParts = document.cookie.split(";");
+  const cookieNames = cookieParts.map((part) => part.trim().split("=")[0]);
+  cookieNames.forEach((cookieName) => {
+    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+  });
 }
diff --git a/src/contextProviders/cookies.tsx b/src/contextProviders/cookies.tsx