di usage in website

apps/website/components/shared/CapabilityGate.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useCapability } from '@/hooks/useCapability';
 
 type CapabilityGateProps = {
   capabilityKey: string;
@@ -17,26 +16,17 @@ export function CapabilityGate({
   fallback = null,
   comingSoon = null,
 }: CapabilityGateProps) {
-  const { policyService } = useServices();
+  const { isLoading, isError, capabilityState } = useCapability(capabilityKey);
 
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['policySnapshot'],
-    queryFn: () => policyService.getSnapshot(),
-    staleTime: 60_000,
-    gcTime: 5 * 60_000,
-  });
-
-  if (isLoading || isError || !data) {
+  if (isLoading || isError || !capabilityState) {
     return <>{fallback}</>;
   }
 
-  const state = policyService.getCapabilityState(data, capabilityKey);
-
-  if (state === 'enabled') {
+  if (capabilityState === 'enabled') {
     return <>{children}</>;
   }
 
-  if (state === 'coming_soon') {
+  if (capabilityState === 'coming_soon') {
     return <>{comingSoon ?? fallback}</>;
   }