BjConsent

import { BjConsent } from '@flrxnt/dsbj/react'

const services = [
  { id: 'analytics', name: 'Mesure d’audience', description: 'Statistiques anonymes.' },
  { id: 'required', name: 'Indispensable', required: true },
]

export function Example() {
  return (
    <BjConsent
      title="Gestion des cookies"
      text="Nous utilisons des cookies pour améliorer le site."
      services={services}
      onAccept={() => {
        localStorage.setItem('consent', 'all')
      }}
      onRefuse={() => {
        localStorage.setItem('consent', 'essential')
      }}
      onCustomize={(accepted) => {
        localStorage.setItem('consent', JSON.stringify(accepted))
      }}
    />
  )
}

import { useCallback } from 'react'
import { BjConsent } from '@flrxnt/dsbj/react'

type Service = { id: string; name: string; description?: string; required?: boolean }

export function ConsentTracked({ services }: { services: Service[] }) {
  const onAccept = useCallback(() => {
    console.log('accept all')
  }, [])
  const onRefuse = useCallback(() => {
    console.log('refuse all')
  }, [])
  const onCustomize = useCallback((accepted: string[]) => {
    console.log('saved ids', accepted)
  }, [])

  return (
    <BjConsent
      services={services}
      onAccept={onAccept}
      onRefuse={onRefuse}
      onCustomize={onCustomize}
    />
  )
}

const services = [
  { id: 'req', name: 'Sécurité', required: true, description: 'Toujours actif.' },
  { id: 'ads', name: 'Publicité', description: 'Optionnel.' },
]

import { BjConsent } from '@flrxnt/dsbj/react'

export function ConsentWithSlot() {
  return (
    <BjConsent title="Cookies" text="Description courte.">
      <p className="bj-text-sm">
        <a href="/politique">Politique de confidentialité</a>
      </p>
    </BjConsent>
  )
}

import { BjConsent } from '@flrxnt/dsbj/react'

export function ConsentFull() {
  const services = [
    { id: 'necessary', name: 'Nécessaires', required: true },
    { id: 'stats', name: 'Statistiques' },
  ]
  return (
    <BjConsent
      title="Vos choix"
      text="Personnalisez les catégories ci-dessous ou via le bouton Personnaliser."
      services={services}
      className="my-consent"
      role="dialog"
      onAccept={() => {
        /* … */
      }}
      onRefuse={() => {
        /* … */
      }}
      onCustomize={(accepted) => {
        /* persister accepted (string[]) */
      }}
    >
      <p className="bj-text-sm">Texte additionnel.</p>
    </BjConsent>
  )
}