FeedbackModal.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 ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { UserExplorationID } from 'enums'
import React from 'react'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './feedbackModal.scss'

declare let __SAU_LINK__: string

const FeedbackModal = () => {
  const { t } = useI18n()
  const client = useClient()
  const dispatch = useAppDispatch()
  const { isFeedbacksOpen } = useAppSelector(state => state.ecolyo.modal)
  const [, setValidExploration] = useExploration()

  const closeModal = () => {
    dispatch(openFeedbackModal(false))
  }

  const goToSAU = () => {
    setValidExploration(UserExplorationID.EXPLORATION005)
    window.open(`${__SAU_LINK__}?version=${client.appMetadata.version}`)
  }

  return (
    <Dialog
      open={isFeedbacksOpen}
      onClose={() => closeModal()}
      aria-labelledby={'accessibility-title'}
      classes={{
        root: 'modal-root',
        paper: 'modal-paper yellow-border',
      }}
    >
      <div id={'accessibility-title'}>
        {t('feedback.accessibility.window_title')}
      </div>
      <IconButton
        aria-label={t('feedback.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={closeModal}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="fb-root">
        <StyledIcon icon={ecolyoIcon} size={80} />
        <p className="title">{t('feedback.title')}</p>
        <p className="text">{t('feedback.text1')}</p>
        <p className="text">{t('feedback.text2')}</p>
        <div className="actions">
          <Button
            aria-label={t('feedback.later')}
            onClick={closeModal}
            classes={{
              root: 'btn-secondary-positive',
              label: 'text-16-bold',
            }}
          >
            {t('feedback.later')}
          </Button>
          <Button
            aria-label={t('feedback.lets_go')}
            onClick={goToSAU}
            classes={{
              root: 'btn-highlight',
              label: 'text-16-bold',
            }}
          >
            {t('feedback.lets_go')}
          </Button>
        </div>
      </div>
    </Dialog>
  )
}

export default FeedbackModal