Michael Chihlas
f1be3abcc5
Co-authored-by: Michael Chihlas <michael@resolutionflow.com> Co-committed-by: Michael Chihlas <michael@resolutionflow.com>
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { useFeature } from '@/hooks/useFeature'
|
|
import { UpgradePrompt } from './UpgradePrompt'
|
|
|
|
interface FeatureGateProps {
|
|
/** Feature flag key (e.g. `psa_integration`). Must match a backend `feature_flags.flag_key`. */
|
|
feature: string
|
|
/**
|
|
* Rendered when the feature is enabled for the current account.
|
|
*/
|
|
children: ReactNode
|
|
/**
|
|
* Rendered when the feature is disabled. Defaults to `<UpgradePrompt feature={feature} />`.
|
|
* Pass `null` to render nothing.
|
|
*/
|
|
fallback?: ReactNode
|
|
}
|
|
|
|
/**
|
|
* Conditionally renders `children` based on whether `feature` is enabled
|
|
* for the current account.
|
|
*
|
|
* This is a UX affordance — the security boundary is the backend
|
|
* `require_feature` dependency. Never trust this gate for authorization.
|
|
*/
|
|
export function FeatureGate({ feature, children, fallback }: FeatureGateProps) {
|
|
const enabled = useFeature(feature)
|
|
|
|
if (enabled) {
|
|
return <>{children}</>
|
|
}
|
|
|
|
// Use explicit fallback when provided, otherwise render the standard prompt.
|
|
// `null` is a valid fallback (renders nothing).
|
|
if (fallback !== undefined) {
|
|
return <>{fallback}</>
|
|
}
|
|
|
|
return <UpgradePrompt feature={feature} />
|
|
}
|
|
|
|
export default FeatureGate
|