@@ -10,10 +10,11 @@ import { useToast } from "@/components/hooks/use-toast"
1010interface AnonymousAccessToggleProps {
1111 hasAnonymousAccessEntitlement : boolean ;
1212 anonymousAccessEnabled : boolean
13+ forceEnableAnonymousAccess : boolean
1314 onToggleChange ?: ( checked : boolean ) => void
1415}
1516
16- export function AnonymousAccessToggle ( { hasAnonymousAccessEntitlement, anonymousAccessEnabled, onToggleChange } : AnonymousAccessToggleProps ) {
17+ export function AnonymousAccessToggle ( { hasAnonymousAccessEntitlement, anonymousAccessEnabled, forceEnableAnonymousAccess , onToggleChange } : AnonymousAccessToggleProps ) {
1718 const [ enabled , setEnabled ] = useState ( anonymousAccessEnabled )
1819 const [ isLoading , setIsLoading ] = useState ( false )
1920 const { toast } = useToast ( )
@@ -45,9 +46,12 @@ export function AnonymousAccessToggle({ hasAnonymousAccessEntitlement, anonymous
4546 setIsLoading ( false )
4647 }
4748 }
49+ const isDisabled = isLoading || ! hasAnonymousAccessEntitlement || forceEnableAnonymousAccess ;
50+ const showPlanMessage = ! hasAnonymousAccessEntitlement ;
51+ const showForceEnableMessage = ! showPlanMessage && forceEnableAnonymousAccess ;
4852
4953 return (
50- < div className = { `p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] ${ ! hasAnonymousAccessEntitlement ? 'opacity-60' : '' } ` } >
54+ < div className = { `p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] ${ ( ! hasAnonymousAccessEntitlement || forceEnableAnonymousAccess ) ? 'opacity-60' : '' } ` } >
5155 < div className = "flex items-start justify-between gap-4" >
5256 < div className = "flex-1 min-w-0" >
5357 < h3 className = "font-medium text-[var(--foreground)] mb-2" >
@@ -65,7 +69,7 @@ export function AnonymousAccessToggle({ hasAnonymousAccessEntitlement, anonymous
6569 Learn More
6670 </ a >
6771 </ p >
68- { ! hasAnonymousAccessEntitlement && (
72+ { showPlanMessage && (
6973 < div className = "mt-3 p-3 rounded-md bg-[var(--muted)] border border-[var(--border)]" >
7074 < p className = "text-sm text-[var(--foreground)] leading-relaxed flex items-center gap-2" >
7175 < svg
@@ -96,13 +100,35 @@ export function AnonymousAccessToggle({ hasAnonymousAccessEntitlement, anonymous
96100 </ p >
97101 </ div >
98102 ) }
103+ { showForceEnableMessage && (
104+ < div className = "mt-3 p-3 rounded-md bg-[var(--muted)] border border-[var(--border)]" >
105+ < p className = "text-sm text-[var(--foreground)] leading-relaxed flex items-center gap-2" >
106+ < svg
107+ className = "w-4 h-4 flex-shrink-0 text-[var(--muted-foreground)]"
108+ fill = "none"
109+ viewBox = "0 0 24 24"
110+ stroke = "currentColor"
111+ >
112+ < path
113+ strokeLinecap = "round"
114+ strokeLinejoin = "round"
115+ strokeWidth = { 2 }
116+ d = "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
117+ />
118+ </ svg >
119+ < span >
120+ The < code className = "bg-[var(--secondary)] px-1 py-0.5 rounded text-xs font-mono" > forceEnableAnonymousAccess</ code > is set, so this cannot be changed from the UI.
121+ </ span >
122+ </ p >
123+ </ div >
124+ ) }
99125 </ div >
100126 </ div >
101127 < div className = "flex-shrink-0" >
102128 < Switch
103129 checked = { enabled }
104130 onCheckedChange = { handleToggle }
105- disabled = { isLoading || ! hasAnonymousAccessEntitlement }
131+ disabled = { isDisabled }
106132 />
107133 </ div >
108134 </ div >
0 commit comments