streamline components

apps/website/components/shared/CapabilityGate.tsx

@@ -2,6 +2,8 @@
 
 import { ReactNode } from 'react';
 import { useCapability } from '@/hooks/useCapability';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { POLICY_SERVICE_TOKEN } from '@/lib/di/tokens';
 
 type CapabilityGateProps = {
   capabilityKey: string;
@@ -16,19 +18,19 @@ export function CapabilityGate({
   fallback = null,
   comingSoon = null,
 }: CapabilityGateProps) {
-  const { isLoading, isError, capabilityState } = useCapability(capabilityKey);
+  const policyService = useInject(POLICY_SERVICE_TOKEN);
+  const { isLoading, isError, data: snapshot } = useCapability(capabilityKey);
 
-  if (isLoading || isError || !capabilityState) {
-    return <>{fallback}</>;
-  }
+  // Use PolicyService to centralize the evaluation logic
+  const content = policyService.getCapabilityContent(
+    snapshot || null,
+    capabilityKey,
+    isLoading,
+    isError,
+    children,
+    fallback,
+    comingSoon
+  );
 
-  if (capabilityState === 'enabled') {
-    return <>{children}</>;
-  }
-
-  if (capabilityState === 'coming_soon') {
-    return <>{comingSoon ?? fallback}</>;
-  }
-
-  return <>{fallback}</>;
+  return <>{content}</>;
 }