feat(payments): google analytics deny consent

Because:

* SubPlat currently does not request cookie consent from customers,
  therefore Google Analytics should be configured to not use any
  cookies.

This commit:

* Sets Google Analytics default consent to denied for all consent types.
* Renames testMode to debugMode, and reassigned it to the gtag
  debug_mode option, which is what it was originally intended for.

Closes #FXA-8445

packages/fxa-payments-server/server/config/index.js

@@ -117,9 +117,9 @@ const conf = convict({
       env: 'GA_SUPPORTED_STRIPE_PRODUCT_IDS',
       format: String,
     },
-    testMode: {
+    debugMode: {
       default: false,
-      doc: 'Toggle Google Analytics test/debug mode',
+      doc: 'Toggle Google Analytics gtag debug mode. (Not to be confused with librayr react-ga testMode',
       env: 'GA_TEST_MODE',
       format: Boolean,
     },

packages/fxa-payments-server/server/lib/server.js

@@ -73,7 +73,7 @@ module.exports = () => {
       enabled: config.get('googleAnalytics.enabled'),
       measurementId: config.get('googleAnalytics.measurementId'),
       supportedProductIds: config.get('googleAnalytics.supportedProductIds'),
-      testMode: config.get('googleAnalytics.testMode'),
+      debugMode: config.get('googleAnalytics.debugMode'),
     },
     legalDocLinks: {
       privacyNotice: config.get('legalDocLinks.privacyNotice'),

packages/fxa-payments-server/src/lib/config.test.ts

@@ -123,7 +123,7 @@ const expectedMergedConfig = {
     enabled: false,
     measurementId: '',
     supportedProductIds: 'prod_GqM9ToKK62qjkK',
-    testMode: false,
+    debugMode: false,
   },
   lang: '',
   legalDocLinks: {

packages/fxa-payments-server/src/lib/config.ts

@@ -7,7 +7,7 @@ export interface Config {
     enabled: boolean;
     measurementId: string;
     supportedProductIds: string;
-    testMode: boolean;
+    debugMode: boolean;
   };
   lang: string;
   legalDocLinks: {
@@ -61,7 +61,7 @@ export function defaultConfig(): Config {
       enabled: false,
       measurementId: '',
       supportedProductIds: 'prod_GqM9ToKK62qjkK',
-      testMode: false,
+      debugMode: false,
     },
     lang: '',
     legalDocLinks: {

packages/fxa-payments-server/src/lib/hooks.test.tsx

@@ -112,7 +112,7 @@ describe('useReactGA4Setup', () => {
       enabled: true,
       measurementId: '123',
       supportedProductIds: 'prod_GqM9ToKK62qjkK',
-      testMode: false,
+      debugMode: false,
     },
   } as Config;
   const Subject = ({
@@ -209,7 +209,9 @@ describe('useReactGA4Setup', () => {
       config.googleAnalytics.measurementId,
       {
         nonce: '',
-        testMode: config.googleAnalytics.testMode,
+        gtagOptions: {
+          debug_mode: false,
+        },
       }
     );
     expect(queryByTestId('success')?.textContent).toEqual('Render success');
@@ -230,17 +232,19 @@ describe('useReactGA4Setup', () => {
       config.googleAnalytics.measurementId,
       {
         nonce: '',
-        testMode: config.googleAnalytics.testMode,
+        gtagOptions: {
+          debug_mode: false,
+        },
       }
     );
     expect(queryByTestId('success')?.textContent).toEqual('Render success');
   });
 
-  it('successfully initialize ReactGA4 - with testMode enabled', () => {
+  it('successfully initialize ReactGA4 - with debugMode enabled', () => {
     const config = {
       googleAnalytics: {
         ...mockConfig.googleAnalytics,
-        testMode: true,
+        debugMode: true,
       },
     } as Config;
     const { queryByTestId } = renderWithLocalizationProvider(
@@ -251,7 +255,9 @@ describe('useReactGA4Setup', () => {
       config.googleAnalytics.measurementId,
       {
         nonce: '',
-        testMode: true,
+        gtagOptions: {
+          debug_mode: true,
+        },
       }
     );
     expect(queryByTestId('success')?.textContent).toEqual('Render success');

packages/fxa-payments-server/src/lib/hooks.tsx

@@ -117,7 +117,7 @@ export function usePaypalButtonSetup(
 }
 
 export function useReactGA4Setup(config: Config, productId: string) {
-  const { enabled, measurementId, supportedProductIds, testMode } =
+  const { enabled, measurementId, supportedProductIds, debugMode } =
     config.googleAnalytics;
 
   useEffect(() => {
@@ -138,14 +138,26 @@ export function useReactGA4Setup(config: Config, productId: string) {
     );
 
     try {
+      // Deny all consent types to disable cookies
+      // https://developers.google.com/tag-platform/devguides/privacy#consent_mode_terminology
+      ReactGA.gtag('consent', 'default', {
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        functionality_storage: 'denied',
+        personalization_storage: 'denied',
+        security_storage: 'denied',
+      });
+
       ReactGA.initialize(measurementId, {
         nonce: cspNonce,
-        testMode,
+        gtagOptions: {
+          debug_mode: debugMode,
+        },
       });
     } catch (error) {
       console.error('Error initializing GA script\n', error);
     }
-  }, [enabled, measurementId, supportedProductIds, testMode, productId]);
+  }, [enabled, measurementId, supportedProductIds, debugMode, productId]);
 }
 
 export const enum CouponInfoBoxMessageType {