show CTA up to 3 dismissals every 24 hours or until AI Search is made (#55741)

Author: Ebonsignori

src/frame/components/context/CTAContext.tsx

@@ -13,59 +13,89 @@ import {
 type CTAPopoverState = {
   isOpen: boolean
   initializeCTA: () => void // Call to "open" the CTA if it's not already been dismissed by the user
-  dismiss: () => void // Call to "close" the CTA and store the dismissal in local storage
+  dismiss: () => void // Call to "close" the CTA and store the dismissal in local storage. Will be shown again after 24 hours for a max of 3 times
+  permanentDismiss: () => void // Call to permanently dismiss the CTA and store the dismissal in local storage
 }
 
-type StoredValue = { dismissed: true }
+type StoredValue = {
+  dismissedCount: number
+  lastDismissedAt: number | null
+  permanentlyDismissed: boolean
+}
 
 const CTAPopoverContext = createContext<CTAPopoverState | undefined>(undefined)
 
-const STORAGE_KEY = 'ctaPopoverDismissed'
+const STORAGE_KEY = 'ctaPopoverState'
+const MAX_DISMISSES = 3
+const HIDE_CTA_FOR_MS = 24 * 60 * 60 * 1000 // Every 24 hours we show the CTA again, unless permanently dismissed
 
-const isDismissed = (): boolean => {
+const shouldHide = (): boolean => {
   if (typeof window === 'undefined') return false // SSR guard
   try {
     const raw = localStorage.getItem(STORAGE_KEY)
     if (!raw) return false
     const parsed = JSON.parse(raw) as StoredValue
-    return parsed?.dismissed
+    if (parsed.permanentlyDismissed) return true
+    if (parsed.dismissedCount >= MAX_DISMISSES) return true
+    if (parsed.lastDismissedAt && Date.now() - parsed.lastDismissedAt < HIDE_CTA_FOR_MS) return true
+    return false
   } catch {
     return false // corruption / quota / disabled storage
   }
 }
 
+const readStored = (): StoredValue => {
+  const emptyValue = { dismissedCount: 0, lastDismissedAt: null, permanentlyDismissed: false }
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) {
+      return emptyValue
+    }
+    return JSON.parse(raw) as StoredValue
+  } catch {
+    return emptyValue // corruption / quota / disabled storage
+  }
+}
+
+const writeStored = (v: StoredValue) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(v))
+  } catch {
+    /* ignore */
+  }
+}
+
 export function CTAPopoverProvider({ children }: PropsWithChildren) {
   // We start closed because we might only want to "turn on" the CTA if an experiment is active
   const [isOpen, setIsOpen] = useState(false)
 
-  const persistDismissal = useCallback(() => {
+  const dismiss = useCallback(() => {
+    const stored = readStored()
+    writeStored({
+      ...stored,
+      dismissedCount: stored.dismissedCount + 1,
+      lastDismissedAt: Date.now(),
+    })
+    setIsOpen(false)
+  }, [])
+
+  const permanentDismiss = useCallback(() => {
+    const stored = readStored()
+    writeStored({ ...stored, permanentlyDismissed: true })
     setIsOpen(false)
-    try {
-      const obj: StoredValue = { dismissed: true }
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(obj))
-    } catch {
-      /* ignore */
-    }
   }, [])
 
-  const dismiss = useCallback(() => persistDismissal(), [persistDismissal])
   const initializeCTA = useCallback(() => {
-    const dismissed = isDismissed()
-    if (dismissed) {
-      setIsOpen(false)
-    } else {
-      setIsOpen(true)
-    }
-  }, [isDismissed])
+    setIsOpen(!shouldHide())
+  }, [])
 
   // Wrap in a useEffect to avoid a hydration mismatch (SSR guard)
   useEffect(() => {
-    const stored = isDismissed()
-    setIsOpen(!stored)
+    setIsOpen(!shouldHide())
   }, [])
 
   return (
-    <CTAPopoverContext.Provider value={{ isOpen, initializeCTA, dismiss }}>
+    <CTAPopoverContext.Provider value={{ isOpen, initializeCTA, dismiss, permanentDismiss }}>
       {children}
     </CTAPopoverContext.Provider>
   )

src/search/components/input/AskAIResults.tsx

@@ -83,7 +83,7 @@ export function AskAIResults({
     aiCouldNotAnswer: boolean
     connectedEventId?: string
   }>('ai-query-cache', 1000, 7)
-  const { isOpen: isCTAOpen, dismiss: dismissCTA } = useCTAPopoverContext()
+  const { isOpen: isCTAOpen, permanentDismiss: permanentlyDismissCTA } = useCTAPopoverContext()
 
   const [isCopied, setCopied] = useClipboard(message, { successDuration: 1400 })
   const [feedbackSelected, setFeedbackSelected] = useState<null | 'up' | 'down'>(null)
@@ -138,9 +138,10 @@ export function AskAIResults({
     setResponseLoading(true)
     disclaimerRef.current?.focus()
 
-    // Upon performing an AI Search, dismiss the CTA if it is open
+    // We permanently dismiss the CTA after performing an AI Search because the
+    // user has tried it and doesn't require additional CTA prompting to try it
     if (isCTAOpen) {
-      dismissCTA()
+      permanentlyDismissCTA()
     }
 
     const cachedData = getItem(query, version, router.locale || 'en')