fix(glean): Fix ProductPromo firing extra view event, add glean click…

… event

Because:
* We use this component in multiple places (sidebar and setitngs), and it fired a view event for each instance
* We want a glean click event for comparison on a custom event

fixes FXA-10317

packages/fxa-settings/src/components/Settings/ProductPromo/index.test.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
-import ProductPromo from '.';
+import ProductPromo, { ProductPromoType } from '.';
 import { Account, AppContext } from '../../../models';
 import { MOCK_SERVICES } from '../ConnectedServices/mocks';
 import { MozServices } from '../../../lib/types';
@@ -63,7 +63,7 @@ describe('ProductPromo', () => {
 
     const { container } = renderWithLocalizationProvider(
       <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo />
+        <ProductPromo type={ProductPromoType.Settings} />
       </AppContext.Provider>
     );
 
@@ -77,7 +77,7 @@ describe('ProductPromo', () => {
     } as unknown as Account;
     renderWithLocalizationProvider(
       <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo />
+        <ProductPromo type={ProductPromoType.Settings} />
       </AppContext.Provider>
     );
 
@@ -105,7 +105,10 @@ describe('ProductPromo', () => {
     } as unknown as Account;
     renderWithLocalizationProvider(
       <AppContext.Provider value={mockAppContext({ account })}>
-        <ProductPromo monitorPlusEnabled={true} />
+        <ProductPromo
+          monitorPlusEnabled={true}
+          type={ProductPromoType.Settings}
+        />
       </AppContext.Provider>
     );
 

packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx

@@ -71,7 +71,12 @@ export const ProductPromo = ({
     ? { event: { reason: 'plus' } }
     : { event: { reason: 'free' } };
 
-  GleanMetrics.accountPref.promoMonitorView(gleanEvent);
+  // NOTE, this is a quick fix to prevent double 'view' event firing
+  // since we use this component in two places (sidebar + settings).
+  // We will want to refactor this to be less fragile.
+  if (type === ProductPromoType.Settings) {
+    GleanMetrics.accountPref.promoMonitorView(gleanEvent);
+  }
 
   const promoContent = showMonitorPlusPromo ? (
     <>
@@ -99,6 +104,10 @@ export const ProductPromo = ({
       <LinkExternal
         href={monitorPromoLink}
         className="link-blue"
+        gleanDataAttrs={{
+          id: 'account_pref_promo_monitor_submit',
+          type: 'free',
+        }}
         onClick={() => GleanMetrics.accountPref.promoMonitorSubmit(gleanEvent)}
       >
         <FtlMsg id="product-promo-monitor-cta">Get free scan</FtlMsg>