Newer
Older
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'
interface FeedbackModalProps {
opened: boolean
handleCloseClick: () => void
}
const FeedbackModal: React.FC<FeedbackModalProps> = ({
opened,
handleCloseClick,
}: 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>('')
setType('bug')
setDescription('')
setEmail('')
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}`
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'))
}
setSent(true)
}
const validResult = () => {
setSent(false)
setError('')
if (error === '') {
}
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>
)
<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>{t('feedback.warning')}</div>
<div>{error}</div>
</div>
)}
<StyledButton
className="fb-button"
color="primary"
onClick={validResult}
>
{t('feedback.ok')}
</StyledButton>
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
</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>
export default translate()(withClient(FeedbackModal))