From 7649a74fe847c4a21b061e8c7ade1982b6cf1395 Mon Sep 17 00:00:00 2001
From: Meghan Sardesai <msardesai@mozilla.com>
Date: Thu, 30 Nov 2023 01:03:03 -0500
Subject: [PATCH] fix(payments): remove GA tracking for opted-out customers
 Because:

* Customers who have opted out of data collection and use should expect to navigate Subscription Platform without their data being tracked.

This commit:

* Updates the `useReactGA4Setup` to check whether customer has opted in to data collection before initializing.
* Adds related test.

Closes FXA-8639
---
 .../src/lib/hooks.test.tsx                    | 23 ++++++++++++++++++-
 .../fxa-payments-server/src/lib/hooks.tsx     | 19 +++++++++++----
 .../src/routes/Product/index.tsx              |  2 +-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/packages/fxa-payments-server/src/lib/hooks.test.tsx b/packages/fxa-payments-server/src/lib/hooks.test.tsx
index 1a85c01f1e..b99d1d8a99 100644
--- a/packages/fxa-payments-server/src/lib/hooks.test.tsx
+++ b/packages/fxa-payments-server/src/lib/hooks.test.tsx
@@ -27,6 +27,7 @@ import {
   CUSTOMER,
   IAP_CUSTOMER,
   SELECTED_PLAN,
+  PROFILE,
 } from './mock-data';
 
 // eslint-disable-next-line import/first
@@ -118,11 +119,13 @@ describe('useReactGA4Setup', () => {
   const Subject = ({
     config,
     productId,
+    optedIn = true,
   }: {
     config: Config;
     productId: string;
+    optedIn?: boolean;
   }) => {
-    useReactGA4Setup(config, productId);
+    useReactGA4Setup(config, productId, optedIn);
     // Should always render
     return <div data-testid="success">Render success</div>;
   };
@@ -198,6 +201,24 @@ describe('useReactGA4Setup', () => {
     consoleError.mockRestore();
   });
 
+  it('does not initialize ReactGA4 - customer is opted out of data collection and use', () => {
+    const config = mockConfig;
+    const profile = {
+      ...PROFILE,
+      metricsEnabled: false,
+    };
+    const { queryByTestId } = renderWithLocalizationProvider(
+      <Subject
+        config={config}
+        productId="prod_GqM9ToKK62qjkK"
+        optedIn={profile.metricsEnabled}
+      />
+    );
+
+    expect(ReactGA.initialize).not.toBeCalled();
+    expect(queryByTestId('success')?.textContent).toEqual('Render success');
+  });
+
   it('successfully initialize ReactGA4', () => {
     const config = mockConfig;
     const { queryByTestId } = renderWithLocalizationProvider(
diff --git a/packages/fxa-payments-server/src/lib/hooks.tsx b/packages/fxa-payments-server/src/lib/hooks.tsx
index b1787fa2a0..8ec276e802 100644
--- a/packages/fxa-payments-server/src/lib/hooks.tsx
+++ b/packages/fxa-payments-server/src/lib/hooks.tsx
@@ -116,16 +116,20 @@ export function usePaypalButtonSetup(
   }, [config, setPaypalScriptLoaded, paypalButtonBase]);
 }
 
-export function useReactGA4Setup(config: Config, productId: string) {
+export function useReactGA4Setup(
+  config: Config,
+  productId: string,
+  optedIn: boolean = true
+) {
   const { enabled, measurementId, supportedProductIds, debugMode } =
     config.googleAnalytics;
 
   useEffect(() => {
-    // Check if GA is enabled and if current productId should support GA
+    // Check if GA is enabled, customer has opted in, and if current productId should support GA
     const products: string[] = !supportedProductIds
       ? []
       : supportedProductIds.split(',');
-    if (!enabled || !products.includes(productId)) {
+    if (!optedIn || !enabled || !products.includes(productId)) {
       return;
     }
 
@@ -159,7 +163,14 @@ export function useReactGA4Setup(config: Config, productId: string) {
     } catch (error) {
       console.error('Error initializing GA script\n', error);
     }
-  }, [enabled, measurementId, supportedProductIds, debugMode, productId]);
+  }, [
+    enabled,
+    measurementId,
+    supportedProductIds,
+    debugMode,
+    productId,
+    optedIn,
+  ]);
 }
 
 export const enum CouponInfoBoxMessageType {
diff --git a/packages/fxa-payments-server/src/routes/Product/index.tsx b/packages/fxa-payments-server/src/routes/Product/index.tsx
index 57b7b2bc03..1b8b9b8618 100644
--- a/packages/fxa-payments-server/src/routes/Product/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/index.tsx
@@ -108,7 +108,7 @@ export const Product = ({
     );
   }
 
-  useReactGA4Setup(config, productId);
+  useReactGA4Setup(config, productId, profile.result?.metricsEnabled);
 
   // Fetch plans on initial render, change in product ID, or auth change.
   useEffect(() => {