Skip to content
Snippets Groups Projects
ElecInfoModal.tsx 2.27 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { IconButton } from '@material-ui/core'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import Dialog from '@material-ui/core/Dialog'
    
    import CloseIcon from 'assets/icons/ico/close.svg'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    import Icon from 'cozy-ui/transpiled/react/Icon'
    import React from 'react'
    
    import {
      OffPeakHours,
      formatListWithAnd,
      formatOffPeakHours,
    } from 'utils/utils'
    
    import './elecInfoModal.scss'
    
    interface ElecInfoModalProps {
      open: boolean
    
      offPeakHours: OffPeakHours[] | undefined
    
      handleCloseClick: () => void
    }
    
    
    const ElecInfoModal = ({
      open,
      offPeakHours,
      handleCloseClick,
    }: ElecInfoModalProps) => {
    
      const { t } = useI18n()
    
      const displayedOffPeakHours =
        offPeakHours &&
        formatListWithAnd(
          offPeakHours.map(offPeakHour => formatOffPeakHours(offPeakHour))
        )
    
      return (
        <Dialog
          open={open}
          onClose={handleCloseClick}
    
          aria-labelledby="accessibility-title"
    
          classes={{
            root: 'modal-root',
            paper: 'modal-paper',
          }}
        >
    
          <div id="accessibility-title">
    
            {t('elec_info_modal.accessibility.window_title')}
          </div>
          <IconButton
            aria-label={t('elec_info_modal.accessibility.button_close')}
            className="modal-paper-close-button"
            onClick={handleCloseClick}
          >
            <Icon icon={CloseIcon} size={16} />
          </IconButton>
          <div className="elecInfoModal">
    
            <div className="title text-18-bold">
              {t('elec_info_modal.maxPowerTitle')}
            </div>
            <div>
              {t('elec_info_modal.maxPowerDetails-1')}
    
              {t('elec_info_modal.maxPowerDetails-2')}
    
            {offPeakHours && (
              <>
                <div className="title text-18-bold">
    
                  {t('elec_info_modal.offPeakTitle')}
    
                <div>
                  {t('elec_info_modal.offPeakDetails-1', {
    
                    offPeakHours: displayedOffPeakHours,
                  })}
                </div>
              </>
            )}
    
            <div className="title text-18-bold">
              {t('elec_info_modal.minPowerTitle')}
            </div>
            <div>
              {t('elec_info_modal.minPowerDetails-1')}
    
              {t('elec_info_modal.minPowerDetails-2')}
    
          </div>
        </Dialog>
      )
    }
    
    export default ElecInfoModal