feat: add toggle on settings for beta program opt in (#1451)

AngelCastilloB · web-flow · commit 3478c413df16 · 2024-09-30T21:06:52.000+08:00
diff --git a/apps/browser-extension-wallet/src/lib/scripts/types/storage.ts b/apps/browser-extension-wallet/src/lib/scripts/types/storage.ts
@@ -31,6 +31,7 @@ export interface BackgroundStorage {
   usePersistentUserId?: boolean;
   featureFlags?: Record<number, Record<ExperimentName, string | boolean>>;
   customSubmitTxUrl?: string;
+  optedInBeta?: boolean;
 }
 
 export type BackgroundStorageKeys = keyof BackgroundStorage;
diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts
@@ -33,6 +33,7 @@ export enum TxCreationType {
 export type PostHogPersonProperties = {
   $set: {
     user_tracking_type: UserTrackingType;
+    opted_in_beta: boolean;
   };
 };
 export type PostHogMetadata = {
diff --git a/apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.test.ts b/apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.test.ts
@@ -10,7 +10,10 @@ import { BehaviorSubject, ReplaySubject } from 'rxjs';
 import { waitFor } from '@testing-library/react';
 
 const mockSentDate = new Date('2023-07-25T15:31:10.275000+00:00');
-const mockBackgroundStorageUtil = { getBackgroundStorage: jest.fn(), setBackgroundStorage: jest.fn() };
+const mockBackgroundStorageUtil = {
+  getBackgroundStorage: jest.fn(() => Promise.resolve({})),
+  setBackgroundStorage: jest.fn()
+};
 const mockUserId$ = new ReplaySubject<UserId>();
 
 jest.mock('posthog-js');
@@ -205,6 +208,8 @@ describe('PostHogClient', () => {
       event,
       expect.objectContaining({
         $set: {
+          // eslint-disable-next-line camelcase
+          opted_in_beta: false,
           // eslint-disable-next-line camelcase
           user_tracking_type: 'enhanced'
         }
@@ -232,6 +237,8 @@ describe('PostHogClient', () => {
       event,
       expect.objectContaining({
         $set: {
+          // eslint-disable-next-line camelcase
+          opted_in_beta: false,
           // eslint-disable-next-line camelcase
           user_tracking_type: 'enhanced'
         }
@@ -246,6 +253,8 @@ describe('PostHogClient', () => {
       event,
       expect.objectContaining({
         $set: {
+          // eslint-disable-next-line camelcase
+          opted_in_beta: false,
           // eslint-disable-next-line camelcase
           user_tracking_type: 'basic'
         }
diff --git a/apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.ts b/apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.ts
@@ -1,4 +1,4 @@
-/* eslint-disable camelcase, max-depth, sonarjs/cognitive-complexity */
+/* eslint-disable camelcase, max-depth, sonarjs/cognitive-complexity, promise/no-nesting */
 import posthog, { JsonRecord, JsonType } from 'posthog-js';
 import dayjs from 'dayjs';
 import { Wallet } from '@lace/cardano';
@@ -22,7 +22,7 @@ import {
 import { BackgroundService, UserIdService } from '@lib/scripts/types';
 import { experiments, getDefaultFeatureFlags } from '@providers/ExperimentsProvider/config';
 import { ExperimentName } from '@providers/ExperimentsProvider/types';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable, Subscription } from 'rxjs';
 import { PostHogAction, PostHogProperties } from '@lace/common';
 
 type FeatureFlag = 'create-paper-wallet' | 'restore-paper-wallet' | 'shared-wallets';
@@ -46,6 +46,8 @@ export class PostHogClient<Action extends string = string> {
   private hasPostHogInitialized$: BehaviorSubject<boolean>;
   private subscription: Subscription;
   private initSuccess: Promise<boolean>;
+  private readonly optedInBeta$: BehaviorSubject<boolean>;
+  private updatePersonaProperties = false;
   featureFlags: GroupedFeatureFlags;
   constructor(
     private chain: Wallet.Cardano.ChainId,
@@ -58,45 +60,52 @@ export class PostHogClient<Action extends string = string> {
     const token = this.getApiToken();
     if (!token) throw new Error(`posthog token has not been provided for chain: ${this.chain.networkId}`);
     this.hasPostHogInitialized$ = new BehaviorSubject(false);
-
-    this.initSuccess = this.userIdService
-      .getUserId(chain.networkMagic)
-      .then((id) => {
-        posthog.init(token, {
-          request_batching: false,
-          api_host: this.postHogHost,
-          autocapture: false,
-          opt_out_useragent_filter: true,
-          disable_compression: true,
-          disable_session_recording: true,
-          capture_pageview: false,
-          capture_pageleave: false,
-          // Disables PostHog user ID persistence - we manage ID ourselves with userIdService
-          disable_persistence: true,
-          disable_cookie: true,
-          persistence: 'memory',
-          bootstrap: {
-            distinctID: id,
-            isIdentifiedID: true
-          },
-          property_blacklist: [
-            '$autocapture_disabled_server_side',
-            '$console_log_recording_enabled_server_side',
-            '$device_id',
-            '$session_recording_recorder_version_server_side',
-            '$time'
-          ]
-        });
+    this.optedInBeta$ = new BehaviorSubject(false);
+
+    this.backgroundServiceUtils
+      .getBackgroundStorage()
+      .then((storage) => {
+        this.optedInBeta$.next(storage?.optedInBeta ?? false);
+
+        this.initSuccess = this.userIdService
+          .getUserId(chain.networkMagic)
+          .then((id) => {
+            posthog.init(token, {
+              request_batching: false,
+              api_host: this.postHogHost,
+              autocapture: false,
+              opt_out_useragent_filter: true,
+              disable_compression: true,
+              disable_session_recording: true,
+              capture_pageview: false,
+              capture_pageleave: false,
+              // Disables PostHog user ID persistence - we manage ID ourselves with userIdService
+              disable_persistence: true,
+              disable_cookie: true,
+              persistence: 'memory',
+              bootstrap: {
+                distinctID: id,
+                isIdentifiedID: true
+              },
+              property_blacklist: [
+                '$autocapture_disabled_server_side',
+                '$console_log_recording_enabled_server_side',
+                '$device_id',
+                '$session_recording_recorder_version_server_side',
+                '$time'
+              ]
+            });
+          })
+          .then(() => true);
+
+        this.subscribeToDistinctIdUpdate();
+        this.loadExperiments();
       })
-      .then(() => true)
       .catch(() => {
         console.warn('Analytics failed');
         return false;
       });
 
-    this.subscribeToDistinctIdUpdate();
-    this.loadExperiments();
-
     this.featureFlags = {
       [Wallet.Cardano.NetworkMagics.Mainnet]: getDefaultFeatureFlags(),
       [Wallet.Cardano.NetworkMagics.Preprod]: getDefaultFeatureFlags(),
@@ -203,6 +212,21 @@ export class PostHogClient<Action extends string = string> {
     });
   }
 
+  hasOptedInBeta(): Observable<boolean> {
+    return this.optedInBeta$.pipe(distinctUntilChanged());
+  }
+
+  async setOptedInBeta(optedInBeta: boolean): Promise<void> {
+    await this.backgroundServiceUtils.setBackgroundStorage({
+      optedInBeta
+    });
+
+    this.updatePersonaProperties = true;
+    this.optedInBeta$.next(optedInBeta);
+
+    console.debug('[ANALYTICS] Changing Opted In Beta', optedInBeta);
+  }
+
   isFeatureFlagEnabled(feature: string): boolean {
     return this.featureFlags[this.chain.networkMagic]?.[feature as FeatureFlag] || false;
   }
@@ -281,6 +305,8 @@ export class PostHogClient<Action extends string = string> {
           backgroundStorage?.featureFlags[this.chain.networkMagic] || getDefaultFeatureFlags()
         );
       }
+
+      this.optedInBeta$.next(backgroundStorage?.optedInBeta);
     });
     this.hasPostHogInitialized$.next(true);
   }
@@ -307,15 +333,17 @@ export class PostHogClient<Action extends string = string> {
   protected async getPersonProperties(): Promise<PostHogPersonProperties | undefined> {
     if (!this.userTrackingType) {
       this.userTrackingType = this.currentUserTrackingType;
-      // set user_tracking_type in the first event
-      return { $set: { user_tracking_type: this.userTrackingType } };
+      // set user_tracking_type and opted_in_beta in the first event
+      return { $set: { user_tracking_type: this.userTrackingType, opted_in_beta: this.optedInBeta$.value } };
     }
 
     // eslint-disable-next-line consistent-return
-    if (this.currentUserTrackingType === this.userTrackingType) return;
+    if (this.currentUserTrackingType === this.userTrackingType && !this.updatePersonaProperties) return;
+
+    this.updatePersonaProperties = false;
     this.userTrackingType = this.currentUserTrackingType;
-    // update user_tracking_type if tracking type has changed
-    return { $set: { user_tracking_type: this.userTrackingType } };
+
+    return { $set: { user_tracking_type: this.userTrackingType, opted_in_beta: this.optedInBeta$.value } };
   }
 
   static getAllowedNetworksMapFromPayloads(payloads: Record<string, JsonType>): Record<string, string[]> {
diff --git a/apps/browser-extension-wallet/src/utils/mocks/test-helpers.tsx b/apps/browser-extension-wallet/src/utils/mocks/test-helpers.tsx
@@ -646,7 +646,9 @@ export const postHogClientMocks: Record<keyof typeof PostHogClient.prototype, je
   sendSessionStartEvent: jest.fn(),
   sendMergeEvent: jest.fn(),
   isFeatureEnabled: jest.fn(),
-  featureFlags: jest.fn()
+  featureFlags: jest.fn(),
+  hasOptedInBeta: jest.fn(),
+  setOptedInBeta: jest.fn()
 };
 
 export const mockAnalyticsTracker: Record<keyof typeof AnalyticsTracker.prototype, jest.Mock> = {
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsPreferences/SettingsPreferences.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsPreferences/SettingsPreferences.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SettingsCard, SettingsLink } from '..';
 import { useTranslation } from 'react-i18next';
 import { Typography } from 'antd';
@@ -8,6 +8,8 @@ import { ThemeSwitch } from '@components/MainMenu/DropdownMenuOverlay/components
 import { CurrencyDrawer } from './CurrencyDrawer';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { currencyCode } from '@providers/currency/constants';
+import { Switch } from '@lace/common';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 
 const { Title } = Typography;
 
@@ -20,6 +22,18 @@ export const SettingsPreferences = ({ popupView = false }: SettingsPreferencesPr
   const [isCurrrencyChoiceDrawerOpen, setIsCurrrencyChoiceDrawerOpen] = useState(false);
   const { t } = useTranslation();
   const { fiatCurrency } = useCurrencyStore();
+  const posthog = usePostHogClientContext();
+  const [isOptInBeta, setIsOptInBeta] = useState(false);
+
+  useEffect(() => {
+    const subscription = posthog.hasOptedInBeta().subscribe((optInStatus) => {
+      setIsOptInBeta(optInStatus);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [posthog]);
 
   const handleOpenCurrencyDrawer = () => {
     setIsCurrrencyChoiceDrawerOpen(true);
@@ -34,6 +48,13 @@ export const SettingsPreferences = ({ popupView = false }: SettingsPreferencesPr
   const handleSendCurrencyChangeEvent = (currency: currencyCode) =>
     analytics.sendEventToPostHog(PostHogAction.SettingsCurrencySelectCurrencyClick, { currency });
 
+  const handleBetaOptInChoice = async (isOptedIn: boolean) => {
+    await posthog.setOptedInBeta(isOptedIn);
+    setIsOptInBeta(isOptedIn);
+
+    await analytics.sendEventToPostHog(PostHogAction.SettingsBetaProgramClick, { isOptedIn });
+  };
+
   return (
     <>
       <CurrencyDrawer
@@ -61,6 +82,20 @@ export const SettingsPreferences = ({ popupView = false }: SettingsPreferencesPr
         >
           {t('browserView.settings.preferences.theme.title')}
         </SettingsLink>
+        <SettingsLink
+          description={t('browserView.settings.preferences.betaProgram.description')}
+          addon={
+            <Switch
+              testId="settings-beta-program-switch"
+              checked={isOptInBeta}
+              onChange={handleBetaOptInChoice}
+              className={styles.analyticsSwitch}
+            />
+          }
+          data-testid="settings-beta-program-section"
+        >
+          {t('browserView.settings.preferences.betaProgram.title')}
+        </SettingsLink>
       </SettingsCard>
     </>
   );
diff --git a/packages/common/src/analytics/types.ts b/packages/common/src/analytics/types.ts
@@ -202,6 +202,7 @@ export enum PostHogAction {
   SettingsCurrencyClick = 'settings | currency | click',
   SettingsCurrencySelectCurrencyClick = 'settings | currency | select currency | click',
   SettingsCurrencyXClick = 'settings | currency | x | click',
+  SettingsBetaProgramClick = 'settings | beta program | click',
   SettingsThemeLightModeClick = 'settings | theme | light mode | click',
   SettingsThemeDarkModeClick = 'settings | theme | dark mode | click',
   SettingsShowRecoveryPhraseClick = 'settings | show recovery phrase | click',
diff --git a/packages/translation/src/lib/translations/browser-extension-wallet/en.json b/packages/translation/src/lib/translations/browser-extension-wallet/en.json
@@ -259,6 +259,8 @@
   "browserView.settings.preferences.theme.description": "Choose between light or dark for your workstation's theme",
   "browserView.settings.preferences.theme.title": "Theme",
   "browserView.settings.preferences.title": "Preferences",
+  "browserView.settings.preferences.betaProgram.description": "Test out new features and help us improve the product experience",
+  "browserView.settings.preferences.betaProgram.title": "Beta Program",
   "browserView.settings.security.2fa": "2-Factor authentication",
   "browserView.settings.security.analytics.description": "We'll collect anonymous analytics info from your browser extension to help us improve the quality and performance of Lace",
   "browserView.settings.security.analytics.title": "Analytics",

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ export interface BackgroundStorage {`
`31`	`31`	`usePersistentUserId?: boolean;`
`32`	`32`	`featureFlags?: Record<number, Record<ExperimentName, string \| boolean>>;`
`33`	`33`	`customSubmitTxUrl?: string;`
	`34`	`+ optedInBeta?: boolean;`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`export type BackgroundStorageKeys = keyof BackgroundStorage;`