LegalNoticeModal.tsx

import React from 'react'
import LegalNoticeContent from 'components/LegalNotice/LegalNoticeContent'
import './termsView.scss'
import Dialog from '@material-ui/core/Dialog'
import { Button, IconButton } from '@material-ui/core'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import CloseIcon from 'assets/icons/ico/close.svg'

interface LegalNoticeModalProps {
  open: boolean
  handleCloseClick: () => void
}

const LegalNoticeModal: React.FC<LegalNoticeModalProps> = ({
  open,
  handleCloseClick,
}: LegalNoticeModalProps) => {
  const { t } = useI18n()
  return (
    <Dialog
      open={open}
      onClose={handleCloseClick}
      aria-labelledby={'accessibility-title'}
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
    >
      <div id={'accessibility-title'}>{t('legal.title_legal')}</div>
      <IconButton
        aria-label={t('feedback.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <LegalNoticeContent />
      <Button
        aria-label={t('gcu_modal.accessibility.button_accept')}
        onClick={handleCloseClick}
        className="gcu-modal-button"
        classes={{
          root: 'btn-profile-next rounded',
          label: 'text-16-bold',
        }}
      >
        {t('legal.accessibility.button_close')}
      </Button>
    </Dialog>
  )
}

export default LegalNoticeModal