NoDataModal.tsx

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

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

const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
  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('consumption_visualizer.modal.window_title')}
      </div>
      <IconButton
        aria-label={t('consumption_visualizer.modal.close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="nodata-modal">
        <div className="question-mark">
          <Icon icon={QuestionIcon} size={36} />
        </div>

        <div className="text-20-normal title">
          {t('consumption_visualizer.why_no_data')}
        </div>
        <div className="text-16-normal">
          {t('consumption_visualizer.dataModal.list_title')}
        </div>
        <ul>
          <li>{t('consumption_visualizer.dataModal.item1')}</li>
          <li>{t('consumption_visualizer.dataModal.item2')}</li>
          <li>{t('consumption_visualizer.dataModal.item3')}</li>
          <li>{t('consumption_visualizer.dataModal.item4')}</li>
        </ul>
        <Button
          aria-label={t('ecogesture_info_modal.button_close')}
          onClick={handleCloseClick}
          className="btnPrimary"
        >
          {t('ecogesture_info_modal.button_close')}
        </Button>
      </div>
    </Dialog>
  )
}

export default NoDataModal