CustomPopupModal.tsx

import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
import Speaker from 'assets/icons/ico/speaker.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { DateTime } from 'luxon'
import { CustomPopup } from 'models/customPopup.model'
import React from 'react'
import './customPopupModal.scss'

interface CustomPopupModalProps {
  customPopup: CustomPopup
  handleCloseClick: () => void
}

const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
  customPopup,
  handleCloseClick,
}) => {
  const { t } = useI18n()
  const isPopupOutdated = () =>
    DateTime.local() >= DateTime.fromISO(customPopup.endDate)

  return (
    <Dialog
      open={customPopup.popupEnabled && !isPopupOutdated()}
      disableEscapeKeyDown
      onClose={(event, reason): void => {
        event && reason !== 'backdropClick' && handleCloseClick()
      }}
      aria-labelledby={'accessibility-title'}
      classes={{
        root: 'modal-root',
        paper: 'modal-paper customPopupRoot',
      }}
    >
      <div id="accessibility-title">{customPopup.title}</div>
      <IconButton
        aria-label={t('feedback.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="customPopupModal">
        <StyledIcon icon={Speaker} size={100} />

        <div className="customPopup-title text-20-bold">
          {customPopup.title}
        </div>

        <div
          className="customPopup-content text-16-normal"
          dangerouslySetInnerHTML={{
            __html: customPopup.description,
          }}
        />

        <Button
          onClick={handleCloseClick}
          classes={{
            root: 'btn-highlight ',
            label: 'text-16-bold',
          }}
        >
          {t('consumption.partner_issue_modal.ok')}
        </Button>
      </div>
    </Dialog>
  )
}

export default CustomPopupModal