pawol.nu/components/cgu/cgu-dialog.js

import {useRef, useEffect} from 'react'
import {styled, useTheme} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
import {useRouter} from 'next/navigation'
import useMediaQuery from '@mui/material/useMediaQuery'
import Cgu from '.'

const PREFIX = 'cgu-dialog'

const classes = {
  dialog: `${PREFIX}-dialog`
}

const Root = styled('div')(() => ({
  [`& .${classes.dialog}`]: {
    zIndex: 1
  }
}))

const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK

export default function CGUDialog({open, setOpen}) {
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
  const router = useRouter()

  const handleClose = () => {
    setOpen(false)
  }

  const handleClick = event => {
    event.preventDefault()
    router.push(CGU_DOWNLOAD_LINK)
  }

  const descriptionElementRef = useRef(null)
  useEffect(() => {
    if (open) {
      const {current: descriptionElement} = descriptionElementRef
      if (descriptionElement !== null) {
        descriptionElement.focus()
      }
    }
  }, [open])

  return (
    <Root>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        scroll='paper'
        aria-labelledby='scroll-dialog-title'
        aria-describedby='scroll-dialog-description'
        className={classes.dialog}
        onClose={handleClose}
      >
        <DialogTitle className={classes.dialog} id='scroll-dialog-title'>CGU et politique de confidentialité</DialogTitle>
        <DialogContent dividers>
          <Typography
            ref={descriptionElementRef}
            component='div'
            variant='inherit'
            id='scroll-dialog-description'
            tabIndex={-1}
          >
            <Cgu />
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button color='primary' onClick={handleClick}>
            Voir au format pdf
          </Button>
          <Button color='primary' onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </Root>
  )
}

CGUDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  setOpen: PropTypes.func.isRequired
}