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

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(

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 {

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(() => {