From 42f9cb164b0414bc3639968ef8bb9980dbc59dad Mon Sep 17 00:00:00 2001 From: Kaitlyn Andres Date: Wed, 18 Sep 2024 13:07:45 -0400 Subject: [PATCH 1/2] add telemetry (#5072) --- locales/en/unsubscribe.ftl | 1 + .../UnsubscribeMonthlyReportView.tsx | 48 +++++++++++++++---- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/locales/en/unsubscribe.ftl b/locales/en/unsubscribe.ftl index ab8be5db662..89b4bf9de96 100644 --- 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/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx b/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx index fa673ffe719..d707c91c9fa 100644 --- a/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx +++ b/src/app/(proper_react)/(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: ( + {cta} + ); }; From 669e4791b35dc2e23673a723efe0600fb6451a82 Mon Sep 17 00:00:00 2001 From: Robert Helmer Date: Wed, 18 Sep 2024 12:43:02 -0700 Subject: [PATCH 2/2] Revert "Set cookies for all pages" (#5077) --- package-lock.json | 7 ++--- package.json | 1 - src/TestComponentWrapper.tsx | 33 +++++++++----------- src/app/(proper_react)/layout.tsx | 25 +++++++-------- src/app/components/client/PageLoadEvent.tsx | 6 ++-- src/app/functions/client/deleteAllCookies.ts | 11 +++---- src/contextProviders/cookies.tsx | 25 --------------- 7 files changed, 38 insertions(+), 70 deletions(-) delete mode 100644 src/contextProviders/cookies.tsx diff --git a/package-lock.json b/package-lock.json index ade1da61862..e2b6a69a3f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -104,7 +104,6 @@ "stylelint-scss": "^6.6.0", "tsx": "^4.19.1", "typescript": "^5.6.2", - "universal-cookie": "^7.2.0", "yaml": "^2.5.0" }, "engines": { @@ -25100,9 +25099,9 @@ } }, "node_modules/universal-cookie": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz", - "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.0.0.tgz", + "integrity": "sha512-T3XwZ2cUbHRU+UNfPSaPd0zti50tVIvk6onLA90pa+qKwsP8ksn5pwYM7rWMODoX1OCA9qPAN8uK88Avq5YbtQ==", "dependencies": { "@types/cookie": "^0.6.0", "cookie": "^0.6.0" diff --git a/package.json b/package.json index d03abe8aba0..0278b0bb056 100644 --- 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 index 4de43fc26ff..26d3d672ffd 100644 --- 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 ( - - - - - - {props.children} - - - - - + + + + + {props.children} + + + + ); }; diff --git a/src/app/(proper_react)/layout.tsx b/src/app/(proper_react)/layout.tsx index b4c79b56bb4..389d04ff7ed 100644 --- 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 ( - - - - - {children} - - - - - + + + + {children} + + + + ); } diff --git a/src/app/components/client/PageLoadEvent.tsx b/src/app/components/client/PageLoadEvent.tsx index fae61cc4075..2fef30317fc 100644 --- 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 index 6ef0925480c..23f729c86f7 100644 --- 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 deleted file mode 100644 index 9e92b97da74..00000000000 --- a/src/contextProviders/cookies.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * 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/. */ - -"use client"; - -import { ReactNode } from "react"; -import { CookiesProvider as ReactCookiesProvider } from "react-cookie"; -import { CookieSetOptions } from "universal-cookie"; - -interface SessionProviderProps { - children: ReactNode; - defaultSetOptions: CookieSetOptions; -} - -export const CookiesProvider = ({ - children, - defaultSetOptions, -}: SessionProviderProps) => { - return ( - - {children} - - ); -};