FeedbackModal.tsx

import React, { useState } from 'react'
import { withClient, Client } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
import { detect } from 'detect-browser'

import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'

import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
import warningIcon from 'assets/icons/ico/warning-yellow.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'

const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
const browser = detect()

interface FeedbackModalProps {
  opened: boolean
  handleCloseClick: () => void
  t: Function
  client: Client
}

const FeedbackModal: React.FC<FeedbackModalProps> = ({
  opened,
  handleCloseClick,
  t,
  client,
}: FeedbackModalProps) => {
  const [type, setType] = useState<string>('bug')
  const [description, setDescription] = useState<string>('')
  const [email, setEmail] = useState<string>('')
  const [sending, setSending] = useState<boolean>(false)
  const [sent, setSent] = useState<boolean>(false)
  const [error, setError] = useState<string>('')

  const resetInputs = () => {
    setType('bug')
    setDescription('')
    setEmail('')
    setSent(false)
    setError('')
  }

  const closeModal = () => {
    resetInputs()
    handleCloseClick()
  }

  const sendEmail = async () => {
    setSending(true)
    if (description === '') {
      setError(t('feedback.error_empty_description'))
    } else {
      const envInfo =
        `Ecolyo` +
        `\nv${client.appMetadata.version}` +
        `\n\nLocation: ${window.location}` +
        '\n\nBrowser:' +
        `\nOn ${browser && browser.os}` +
        `\nFrom ${browser && browser.name}` +
        `\n${browser && browser.version}` +
        '\n\nNavigator:' +
        `\nOn ${navigator.platform}` +
        `\nFrom ${navigator.vendor}` +
        `\n${navigator.userAgent}`

      const mailContent =
        'Type: ' +
        t('feedback.type_' + type) +
        '\n\nDescription:\n' +
        description +
        '\n\nEmail: ' +
        email +
        '\n_______________\n' +
        envInfo

      const mailData = {
        mode: 'from',
        to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
        subject: '[Ecolyo] - Feedbacks - ' + t('feedback.type_' + type),
        parts: [{ type: 'text/plain', body: mailContent }],
      }
      try {
        const jobCollection = client.collection('io.cozy.jobs')
        await jobCollection.create('sendmail', mailData)
      } catch (e) {
        // eslint-disable-next-line no-console
        console.error(e)
        setError(t('feedback.error_sending'))
      }
    }
    setSending(false)
    setSent(true)
  }

  const validResult = () => {
    setSent(false)
    setError('')
    if (error === '') {
      resetInputs()
      closeModal()
    }
  }

  const getOnIcon = (_type: string) => {
    switch (_type) {
      case 'bug':
        return BugOnIcon
      case 'idea':
        return IdeaOnIcon
      case 'other':
        return OtherOnIcon
      default:
        return BugOnIcon
    }
  }
  const getOffIcon = (_type: string) => {
    switch (_type) {
      case 'bug':
        return BugOffIcon
      case 'idea':
        return IdeaOffIcon
      case 'other':
        return OtherOffIcon
      default:
        return BugOffIcon
    }
  }

  const selectorItem = (itemType: string) => {
    const selected = type === itemType
    return (
      <div className="fb-selector-item">
        <StyledIconBorderedButton
          icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
          selected={selected}
          size={36}
          onClick={() => setType(itemType)}
        >
          <div
            className={
              selected
                ? 'fb-selector-item-selectedlabel text-10-bold'
                : 'fb-selector-item-label text-10-normal'
            }
          >
            {t('feedback.type_' + itemType)}
          </div>
        </StyledIconBorderedButton>
      </div>
    )
  }

  return (
    <Modal open={opened} yellowBorder={true} handleCloseClick={closeModal}>
      {sent ? (
        <div className="fb-root">
          <div className="fb-content">
            {error === '' ? (
              <div className="fb-content-success">
                <div className="fb-icon">
                  <StyledIcon icon={successIcon} size={48} />
                </div>
                <div>{t('feedback.success_sending')}</div>
              </div>
            ) : (
              <div className="fb-content-error">
                <div className="fb-icon">
                  <StyledIcon icon={warningIcon} size={48} />
                </div>
                <div>{t('feedback.warning')}</div>
                <div>{error}</div>
              </div>
            )}
            <StyledButton
              className="fb-button"
              color="primary"
              onClick={validResult}
            >
              {t('feedback.ok')}
            </StyledButton>
          </div>
        </div>
      ) : (
        <div className="fb-root">
          <div className="fb-header text-18-bold">{t('feedback.title')}</div>
          <div className="fb-content">
            <div className="fb-label text-16-bold">{t('feedback.type')}</div>
            <div className="fb-selector">
              {selectorItem('bug')}
              {selectorItem('idea')}
              {selectorItem('other')}
            </div>
            <div className="fb-label text-16-bold">
              {t('feedback.description')}
            </div>
            <textarea
              id="idFeedbackDescription"
              className="fb-form fb-textarea"
              aria-describedby="Feedbacks description"
              placeholder={t('feedback.description_placeholder')}
              name="description"
              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                setDescription(e.target.value)
              }
              value={description}
            ></textarea>
            <div className="fb-label text-15-normal">{t('feedback.email')}</div>
            <input
              id="idFeedbackEmail"
              type="text"
              className="fb-form fb-input"
              aria-describedby="Feedbacks email"
              placeholder={t('feedback.email_placeholder')}
              name="email"
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                setEmail(e.target.value)
              }
              value={email}
            />
            <StyledButton
              className="fb-button"
              color="primary"
              onClick={sendEmail}
              disabled={sending}
            >
              {t('feedback.send')}
            </StyledButton>
          </div>
        </div>
      )}
    </Modal>
  )
}

export default translate()(withClient(FeedbackModal))