Skip to content
Snippets Groups Projects
ConnectionInfoCreationEnedisAccountModal.tsx 2.51 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React from 'react'
    import './connectionInfoCreationEnedisAccountModal.scss'
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    import Button from '@material-ui/core/Button'
    import Dialog from '@material-ui/core/Dialog'
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
    import Icon from 'cozy-ui/transpiled/react/Icon'
    import IconButton from '@material-ui/core/IconButton'
    import CloseIcon from 'assets/icons/ico/close.svg'
    
    
    interface ConnectionInfoCreationEnedisAccountModalProps {
      open: boolean
      handleCloseClick: () => void
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
      handleSubmit: () => void
    
    }
    
    const ConnectionInfoCreationEnedisAccountModal: React.FC<ConnectionInfoCreationEnedisAccountModalProps> = ({
      open,
      handleCloseClick,
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
      handleSubmit,
    
    }: ConnectionInfoCreationEnedisAccountModalProps) => {
      const { t } = useI18n()
    
      return (
        <Dialog
          open={open}
          disableBackdropClick
          disableEscapeKeyDown
          onClose={handleCloseClick}
          aria-labelledby={'accessibility-title'}
          classes={{
            root: 'modal-root',
            paper: 'modal-paper',
          }}
        >
          <div id={'accessibility-title'}>
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
            {t('auth.enedisgrandlyon.infoModal.accessibility.window_title')}
    
          </div>
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
          <IconButton
            aria-label={t(
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
              'auth.enedisgrandlyon.infoModal.accessibility.button_close'
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
            )}
            className="modal-paper-close-button"
            onClick={handleCloseClick}
          >
            <Icon icon={CloseIcon} size={16} />
          </IconButton>
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
          <div className="enedisInfoModal">
            <p className="text-16-normal">
              {t('auth.enedisgrandlyon.infoModal.text1')}
              <br />
              {t('auth.enedisgrandlyon.infoModal.text2')}
            </p>
            <p className="text-16-normal">
              {t('auth.enedisgrandlyon.infoModal.text3')}
            </p>
            <p className="text-16-normal">
              {t('auth.enedisgrandlyon.infoModal.text4')}
            </p>
            <p className="text-16-normal">
              {t('auth.enedisgrandlyon.infoModal.text5')}
            </p>
            <p className="text-16-normal">
              {t('auth.enedisgrandlyon.infoModal.text6')}
              <br />
              {t('auth.enedisgrandlyon.infoModal.text7')}
            </p>
    
            <Button
              aria-label={t(
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
                'auth.enedisgrandlyon.infoModal.accessibility.buttonText'
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
              onClick={handleSubmit}
    
              classes={{
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
                root: 'btn-highlight',
                label: 'text-16-bold',
    
    Nicolas PAGNY's avatar
    Nicolas PAGNY committed
              {t('auth.enedisgrandlyon.infoModal.buttonText')}
    
            </Button>
          </div>
        </Dialog>
      )
    }
    
    export default ConnectionInfoCreationEnedisAccountModal