* feat(debug-store): Zustand store met hydration-flag voor debug-modus * feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component * feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen * feat(shared): data-debug-id+label op navigatie-componenten * feat(shared): data-debug-id+label op form/select-componenten * feat(shared): data-debug-id+label op display-componenten
28 lines
934 B
TypeScript
28 lines
934 B
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
|
|
import { toast } from 'sonner'
|
|
|
|
const ALERT_MESSAGES: Record<string, string> = {
|
|
product_unavailable: 'Je actieve product is niet meer beschikbaar',
|
|
}
|
|
|
|
export function AlertToast() {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const alert = searchParams.get('alert')
|
|
|
|
useEffect(() => {
|
|
if (!alert || !ALERT_MESSAGES[alert]) return
|
|
toast.error(ALERT_MESSAGES[alert])
|
|
const params = new URLSearchParams(searchParams.toString())
|
|
params.delete('alert')
|
|
const next = params.toString() ? `${pathname}?${params}` : pathname
|
|
router.replace(next)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [alert])
|
|
|
|
return <span data-debug-id="alert-toast" data-debug-label="AlertToast — shared/alert-toast.tsx" hidden />
|
|
}
|