feat : display feedback result

src/components/ContentComponents/Feedback/FeedbackModal.tsx

@@ -4,6 +4,7 @@ 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'
 
@@ -13,6 +14,8 @@ 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 errorIcon from 'assets/icons/visu/data-nok.svg'
+import successIcon from 'assets/icons/visu/data-ok.svg'
 
 const FEEDBACK_EMAIL = 'yoan.vallet@soprasteria.com'
 const browser = detect()
@@ -35,11 +38,13 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
   const [email, setEmail] = useState<string>('')
   const [sending, setSending] = useState<boolean>(false)
   const [sent, setSent] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
 
   const clearInput = () => {
     setType('bug')
     setDescription('')
     setEmail('')
+    setError('')
   }
 
   const closeModal = () => {
@@ -49,6 +54,9 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
 
   const sendEmail = async () => {
     setSending(true)
+    if (description === '') {
+      setError(t('feedback.error_empty_description'))
+    } else {
       const envInfo =
         `Ecolyo` +
         `\nv${client.appMetadata.version}` +
@@ -84,10 +92,21 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
       } 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 === '') {
+      clearInput()
       closeModal()
     }
+  }
 
   const getOnIcon = (_type: string) => {
     switch (_type) {
@@ -140,6 +159,34 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
 
   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={errorIcon} size={48} />
+                </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">
@@ -186,6 +233,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
             </StyledButton>
           </div>
         </div>
+      )}
     </Modal>
   )
 }

src/locales/fr.json

@@ -265,8 +265,12 @@
     "email": "Si vous souhaitez un suivi de vos retours, inscrivez votre email :",
     "email_placeholder": "Email (optionnel)",
     "send": "Envoyer",
+    "ok": "Ok",
     "type_bug": "Bug",
     "type_idea": "Idée",
-    "type_other": "Autre"
+    "type_other": "Autre",
+    "success_sending": "Nous vous remercions pour votre retour.",
+    "error_empty_description": "Veuillez remplir une description.",
+    "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
   }
 }

src/styles/components/_feedback.scss

@@ -15,6 +15,17 @@
     padding: 1rem 1.5rem 1.5rem 1.5rem;
     display: flex;
     flex-direction: column;
+    .fb-content-success{
+      color: $multi-color;
+    }
+    .fb-content-error{
+      color: $red-primary;
+    }
+    .fb-icon {
+      display: flex;
+      justify-content: center;
+      margin: 1rem 0;
+    }
     .fb-label{
       margin: 0.5rem 0 0 0;
     }