PartnerIssueModal.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 OrangeWarn from 'assets/icons/ico/warn-orange.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 { FluidType } from 'enums'
import React from 'react'
import './partnerIssueModal.scss'

interface PartnerIssueModalProps {
  open: boolean
  issuedFluid: FluidType
  handleCloseClick: (fluidType: FluidType) => void
}

const PartnerIssueModal = ({
  open,
  issuedFluid,
  handleCloseClick,
}: PartnerIssueModalProps) => {
  const { t } = useI18n()

  const getFluidTypeLabel = () => {
    switch (issuedFluid) {
      case FluidType.ELECTRICITY:
        return 'elec'
      case FluidType.WATER:
        return 'water'
      case FluidType.GAS:
        return 'gaz'
    }
  }

  return (
    <Dialog
      open={open}
      disableEscapeKeyDown
      onClose={(event, reason): void => {
        event && reason !== 'backdropClick' && handleCloseClick(issuedFluid)
      }}
      aria-label={t('consumption.partner_issue_modal.accessibility_title')}
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
      style={{ zIndex: 1500 }}
    >
      <div id="accessibility-title">
        {t('feedback.accessibility.window_title')}
      </div>
      <IconButton
        aria-label={t('feedback.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={() => handleCloseClick(issuedFluid)}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>

      <div className="partnerIssueModal">
        <StyledIcon icon={OrangeWarn} size={40} className="warn-icon" />
        <div className="partner-issue-title text-20-bold">
          {t('consumption.partner_issue_modal.title')}
        </div>
        <div
          className="partner-issue-content text-16-normal"
          dangerouslySetInnerHTML={{
            __html: t(
              `consumption.partner_issue_modal.error_connect_${getFluidTypeLabel()}`
            ),
          }}
        />
        <div
          dangerouslySetInnerHTML={{
            __html: t(`consumption.partner_issue_modal.additional_text`),
          }}
        />
        <Button
          onClick={() => handleCloseClick(issuedFluid)}
          className="btnPrimary"
        >
          {t('consumption.partner_issue_modal.ok')}
        </Button>
      </div>
    </Dialog>
  )
}

export default PartnerIssueModal