Gate content visibility setting

src/analytics/features/types.ts

@@ -25,6 +25,7 @@ export enum Features {
   FollowSortEnable = 'follow_sort:enable',
   OnboardingInterestsRequiredEnable = 'onboarding:interests:required:enable',
   CanonicalPostNumberingEnable = 'canonical_post_numbering:enable',
+  ContentVisibilitySettingsEnable = 'content_visibility_settings:enable',
 
   // values
   TrendingDiscoverValues = 'trending_discover:values',

src/screens/Settings/PrivacyAndSecuritySettings.tsx

@@ -18,6 +18,7 @@ import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/
 import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
 import * as Layout from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
+import {useAnalytics} from '#/analytics'
 import {AlgoVisibilityOptOut} from './components/AlgoVisibilityOptOut'
 import {Email2FAToggle} from './components/Email2FAToggle'
 import {PwiOptOut} from './components/PwiOptOut'
@@ -30,6 +31,10 @@ type Props = NativeStackScreenProps<
 export function PrivacyAndSecuritySettingsScreen({}: Props) {
   const {_} = useLingui()
   const t = useTheme()
+  const ax = useAnalytics()
+  const isContentVisibilityEnabled = ax.features.enabled(
+    ax.features.ContentVisibilitySettingsEnable,
+  )
   const {data: appPasswords} = useAppPasswordsQuery()
   const {currentAccount} = useSession()
   const {
@@ -103,10 +108,12 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
             />
           </SettingsList.LinkItem>
           <SettingsList.Divider />
-          <SettingsList.Item style={[a.align_start]}>
+          {isContentVisibilityEnabled && (
-            <SettingsList.ItemIcon icon={MagnifyingGlassIcon} />
+            <SettingsList.Item style={[a.align_start]}>
-            <AlgoVisibilityOptOut />
+              <SettingsList.ItemIcon icon={MagnifyingGlassIcon} />
-          </SettingsList.Item>
+              <AlgoVisibilityOptOut />
+            </SettingsList.Item>
+          )}
           <SettingsList.Item style={[a.align_start]}>
             <SettingsList.ItemIcon icon={EyeSlashIcon} />
             <PwiOptOut />

src/screens/Settings/components/AlgoVisibilityOptOut.tsx

@@ -10,12 +10,10 @@ import {
 import {atoms as a, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
-import {useAnalytics} from '#/analytics'
 
 export function AlgoVisibilityOptOut() {
   const t = useTheme()
   const {_} = useLingui()
-  const ax = useAnalytics()
   const {data, isPending: isQueryPending} = useContentVisibilityQuery()
   const updateContentVisibility = useContentVisibilityMutation()
 
@@ -23,7 +21,6 @@ export function AlgoVisibilityOptOut() {
   const canToggle = !isQueryPending && !updateContentVisibility.isPending
 
   const onToggleOptOut = (hide: boolean) => {
-    ax.metric('contentVisibility:algorithmicRecommendations:change', {hide})
     updateContentVisibility.mutate(hide)
   }
 

src/state/queries/content-visibility.ts

@@ -3,6 +3,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/components/Toast'
+import {useAnalytics} from '#/analytics'
 import {
   CONTENT_VISIBILITY_COLLECTION,
   CONTENT_VISIBILITY_RKEY,
@@ -46,6 +47,7 @@ export function useContentVisibilityQuery() {
 }
 
 export function useContentVisibilityMutation() {
+  const ax = useAnalytics()
   const agent = useAgent()
   const {currentAccount} = useSession()
   const queryClient = useQueryClient()
@@ -81,6 +83,9 @@ export function useContentVisibilityMutation() {
       queryClient.setQueryData(queryKey, context?.previous)
       Toast.show(t`Failed to update content visibility`)
     },
+    onSuccess: (_record, hide) => {
+      ax.metric('contentVisibility:algorithmicRecommendations:change', {hide})
+    },
     onSettled: () => {
       void queryClient.invalidateQueries({queryKey})
     },