diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx index f57ee8d6214778b932ae38266ffc3fe415697865..31650c119d1e0ea221dbed1d74ceccd2a8a0b089 100644 --- a/src/components/Feedback/FeedbackModal.spec.tsx +++ b/src/components/Feedback/FeedbackModal.spec.tsx @@ -11,6 +11,7 @@ import { mockInitialEcolyoState, } from '../../../tests/__mocks__/store' import { act } from 'react-dom/test-utils' +import { BrowserRouter } from 'react-router-dom' jest.mock('cozy-ui/transpiled/react/I18n', () => { return { @@ -55,10 +56,12 @@ describe('FeedbackModal component', () => { mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing) const component = mount( <Provider store={store}> - <FeedbackModal - open={true} - handleCloseClick={handleFeedbackModalClose} - /> + <BrowserRouter> + <FeedbackModal + open={true} + handleCloseClick={handleFeedbackModalClose} + /> + </BrowserRouter> </Provider> ).getElement() expect(component).toMatchSnapshot() @@ -76,10 +79,12 @@ describe('FeedbackModal functionnalities', () => { const wrapper = mount( <Provider store={store}> - <FeedbackModal - open={true} - handleCloseClick={handleFeedbackModalClose} - /> + <BrowserRouter> + <FeedbackModal + open={true} + handleCloseClick={handleFeedbackModalClose} + /> + </BrowserRouter> </Provider> ) @@ -147,10 +152,12 @@ describe('FeedbackModal functionnalities', () => { mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing) const wrapper = mount( <Provider store={store}> - <FeedbackModal - open={true} - handleCloseClick={handleFeedbackModalClose} - /> + <BrowserRouter> + <FeedbackModal + open={true} + handleCloseClick={handleFeedbackModalClose} + /> + </BrowserRouter> </Provider> ) await act(async () => { @@ -174,10 +181,12 @@ describe('FeedbackModal functionnalities', () => { it('should upload the image', async () => { const wrapper = mount( <Provider store={store}> - <FeedbackModal - open={true} - handleCloseClick={handleFeedbackModalClose} - /> + <BrowserRouter> + <FeedbackModal + open={true} + handleCloseClick={handleFeedbackModalClose} + /> + </BrowserRouter> </Provider> ) await act(async () => { diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx index d2db8f2d0b2f8bf3d762f33c4e9e1852872c41ac..d387c86b8177ef109f2ce5662021c6edbcad4c07 100644 --- a/src/components/Feedback/FeedbackModal.tsx +++ b/src/components/Feedback/FeedbackModal.tsx @@ -23,6 +23,8 @@ import './feedbackModal.scss' import useExploration from 'components/Hooks/useExploration' import { UserExplorationID } from 'enum/userExploration.enum' import EnvironmentService from 'services/environment.service' +import Link from '@material-ui/core/Link' +import { Link as RouterLink } from 'react-router-dom' const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com' const browser = detect() @@ -266,36 +268,17 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ {selectorItem('other')} </fieldset> - {!uploadedFile ? ( - <> - <input - type="file" - id="folder" - accept="image/*" - onChange={(e): Promise<void> => getDocument(e)} - className="input-file" - hidden - /> - <label htmlFor="folder" className="upload-label"> - {t('feedback.upload')} - </label> - </> - ) : ( - <> - <span className="fb-label text-16-bold"> - {t('feedback.imageLabel')} - </span> - <div className="fileName"> - <span>{uploadedFile.name}</span> - <IconButton - onClick={() => setuploadedFile(null)} - className="removeUploaded" - > - <Icon icon={CloseIcon} size={12} /> - </IconButton> - </div> - </> - )} + <span id="suggestFaq" className="fb-label text-16-bold"> + {t('feedback.suggest_faq')} + <Link + component={RouterLink} + to="options/FAQ" + onClick={closeModal} + > + <span className="styledLink">FAQ</span> + </Link> + ? + </span> <label htmlFor="idFeedbackDescription" className="fb-label text-16-bold" @@ -312,18 +295,50 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ } value={description} ></textarea> - <Button - aria-label={t('feedback.accessibility.button_send')} - onClick={sendEmail} - disabled={sending} - classes={{ - root: 'btn-highlight', - label: 'text-16-bold', - }} - type="submit" - > - {t('feedback.send')} - </Button> + <div className="validate_row"> + {!uploadedFile ? ( + <> + <input + type="file" + id="folder" + accept="image/*" + onChange={(e): Promise<void> => getDocument(e)} + className="input-file" + hidden + /> + <label htmlFor="folder" className="upload-label"> + {t('feedback.upload')} + </label> + </> + ) : ( + <> + <span className="fb-label text-16-bold"> + {t('feedback.imageLabel')} + </span> + <div className="fileName"> + <span>{uploadedFile.name.substring(0, 3)}..</span> + <IconButton + onClick={() => setuploadedFile(null)} + className="removeUploaded" + > + <Icon icon={CloseIcon} size={12} /> + </IconButton> + </div> + </> + )} + <Button + aria-label={t('feedback.accessibility.button_send')} + onClick={sendEmail} + disabled={sending} + classes={{ + root: 'btn-highlight', + label: 'text-16-bold', + }} + type="submit" + > + {t('feedback.send')} + </Button> + </div> </form> </> )} diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap index 2fd286dd67fe400f211e0d6e01b0fe4bd275a457..bbf516e897809c47d29676f2b8e2c70d1526908c 100644 --- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap +++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap @@ -13,9 +13,11 @@ exports[`FeedbackModal component should render the component 1`] = ` } } > - <FeedbackModal - handleCloseClick={[MockFunction]} - open={true} - /> + <BrowserRouter> + <FeedbackModal + handleCloseClick={[MockFunction]} + open={true} + /> + </BrowserRouter> </Provider> `; diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss index 3a373cb59f55ef3626252cbcda8b886404100ca3..e8af88519790520306425b2dfbfebd09bd09e174 100644 --- a/src/components/Feedback/feedbackModal.scss +++ b/src/components/Feedback/feedbackModal.scss @@ -80,7 +80,10 @@ button.btn-highlight { max-width: 9.375rem; align-self: center; - margin-top: 1rem; + width: 38%; + padding-top: 0.5rem; + padding-bottom: 0.6rem; + margin: 0 !important; } } } @@ -89,6 +92,7 @@ padding: 0.5rem; text-align: center; max-width: 180px; + width: 50% !important; @include button( transparent, rgba($grey-bright, 0.7), @@ -102,6 +106,11 @@ opacity: 0.7; } } + +.styledLink { + color: $gold-light; + text-decoration: underline; +} .fileName { display: flex; justify-content: space-between; @@ -112,6 +121,13 @@ margin: 0.5rem 0; align-items: center; } +.validate_row { + display: flex; + justify-content: space-evenly; +} #accessibility-title { display: none; } +#suggestFaq { + margin-bottom: 1rem; +} diff --git a/src/locales/fr.json b/src/locales/fr.json index 19ff6d091d6f504808d72eb68635ed8c92582e17..e95893a7bb21f0acbf2a8fa64740fd88283dec70 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -433,6 +433,7 @@ "feedback": { "title": "Partagez-nous vos retours", "type": "Motif du retour :", + "suggest_faq": "Avez-vous pensé à consulter la ", "description": "Description :", "description_placeholder": "Vos remarques", "send": "Envoyer",