From bf360878eb67fb581b04342bc8e4cfbf4ff899f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Wed, 22 Feb 2023 13:25:47 +0100 Subject: [PATCH] =?UTF-8?q?Ajout=20du=20bouton=20pas=20trouv=C3=A9=20mon?= =?UTF-8?q?=20activit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Feedback/FeedbackForm.tsx | 56 ++++---- site/source/components/Feedback/index.tsx | 11 +- site/source/design-system/popover/Popover.tsx | 4 +- .../recherche-code-ape/SearchCodeAPE.tsx | 121 ++++++++++++++---- 4 files changed, 136 insertions(+), 56 deletions(-) diff --git a/site/source/components/Feedback/FeedbackForm.tsx b/site/source/components/Feedback/FeedbackForm.tsx index 4f6d5fbe5..f9f3f8961 100644 --- a/site/source/components/Feedback/FeedbackForm.tsx +++ b/site/source/components/Feedback/FeedbackForm.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { ReactNode, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useLocation } from 'react-router-dom' import styled from 'styled-components' @@ -49,11 +49,17 @@ const FeedbackThankYouContent = () => { } export default function FeedbackForm({ - isNotSatisfied, title, + infoSlot, + description, + placeholder, + tags, }: { - isNotSatisfied: boolean title: string + infoSlot?: ReactNode + description?: string + placeholder?: string + tags?: string[] }) { const [isSubmittedSuccessfully, setIsSubmittedSuccessfully] = useState(false) const [isLoading, setIsLoading] = useState(false) @@ -61,7 +67,6 @@ export default function FeedbackForm({ undefined ) const pathname = useLocation().pathname - const page = pathname.split('/').slice(-1)[0] const { t } = useTranslation() @@ -73,6 +78,7 @@ export default function FeedbackForm({ email: string }) => { setIsLoading(true) + const subjectTags = tags?.length ? ` [${tags?.join(',')}]` : '' try { await fetch(`/server/send-crisp-message`, { @@ -81,7 +87,7 @@ export default function FeedbackForm({ 'Content-Type': 'application/json', }, body: JSON.stringify({ - subject: `Suggestion sur la page : ${page}`, + subject: `Suggestion sur la page : ${pathname}${subjectTags}`, message, email, }), @@ -89,6 +95,8 @@ export default function FeedbackForm({ setIsSubmittedSuccessfully(true) } catch (e) { // Show error message + // eslint-disable-next-line no-console + console.error(e) } } @@ -112,7 +120,7 @@ export default function FeedbackForm({ {isSubmittedSuccessfully && } {!isSubmittedSuccessfully && ( <> -

{title}

+

{title}

- {isNotSatisfied && ( - <> - - - Vous n’avez pas été satisfait(e) de votre expérience, nous - en sommes désolé(e)s. - - - - )} + {infoSlot} - - Que pouvons-nous améliorer pour mieux répondre à vos - attentes ? - + {description ?? + t( + 'Que pouvons-nous améliorer pour mieux répondre à vos attentes ?' + )} + - - {t('Envoyer')} - + +
+ + {t('Envoyer')} + +
diff --git a/site/source/components/Feedback/index.tsx b/site/source/components/Feedback/index.tsx index 6138b072e..3d0ba2fee 100644 --- a/site/source/components/Feedback/index.tsx +++ b/site/source/components/Feedback/index.tsx @@ -179,7 +179,16 @@ const FeedbackButton = ({ isEmbedded }: { isEmbedded?: boolean }) => { }} > + + Vous n’avez pas été satisfait(e) de votre expérience, nous + en sommes désolé(e)s. + + + ) + } title={ isNotSatisfied ? t('Vos attentes ne sont pas remplies') diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index 1aae416b4..f71f8d70a 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/site/source/design-system/popover/Popover.tsx @@ -10,11 +10,9 @@ import { import { AriaDialogProps } from '@react-types/dialog' import FocusTrap from 'focus-trap-react' import React, { RefObject, useEffect, useRef, useState } from 'react' -import styled, { ThemeProvider, css, keyframes } from 'styled-components' +import styled, { css, keyframes } from 'styled-components' -import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Grid } from '@/design-system/layout' -import { useDarkMode } from '@/hooks/useDarkMode' import { getIframeOffset, wrapperDebounceEvents } from '@/utils' import { Container } from '../layout' diff --git a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx index 56585dc27..9329ab2a2 100644 --- a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx +++ b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx @@ -1,13 +1,21 @@ import UFuzzy from '@leeoniya/ufuzzy' import { Fragment, useEffect, useMemo, useRef, useState } from 'react' -import { useTranslation } from 'react-i18next' -import styled from 'styled-components' +import { Trans, useTranslation } from 'react-i18next' +import styled, { css } from 'styled-components' +import FeedbackForm from '@/components/Feedback/FeedbackForm' import { FromTop } from '@/components/ui/animate' -import { Chip, RadioCardGroup, TextField } from '@/design-system' +import { + Chip, + PopoverWithTrigger, + RadioCardGroup, + TextField, +} from '@/design-system' import { Button } from '@/design-system/buttons' +import { Emoji } from '@/design-system/emoji' import { StyledRadioSkeleton } from '@/design-system/field/Radio/RadioCard' -import { Grid } from '@/design-system/layout' +import { ChevronIcon } from '@/design-system/icons' +import { Grid, Spacing } from '@/design-system/layout' import { H3 } from '@/design-system/typography/heading' import { Body } from '@/design-system/typography/paragraphs' import { useAsyncData } from '@/hooks/useAsyncData' @@ -93,12 +101,12 @@ interface ResultProps { const Result = ({ item, debug }: ResultProps) => { const { title, codeApe, contenuCentral, contenuAnnexe, contenuExclu } = item - const [open, setOpen] = useState(IS_DEVELOPMENT) + const [open, setOpen] = useState(false) const { t } = useTranslation() return ( - +

{title} APE: {codeApe} @@ -107,11 +115,12 @@ const Result = ({ item, debug }: ResultProps) => { {debug && 
{debug}
} - - - + {open && ( @@ -171,6 +180,22 @@ const Result = ({ item, debug }: ResultProps) => { ) } +const StyledGrid = styled(Grid)` + display: flex; + justify-content: end; +` + +const StyledChevron = styled(ChevronIcon)<{ $isOpen: boolean }>` + vertical-align: middle; + transform: rotate(-90deg); + transition: transform 0.3s; + ${({ $isOpen }) => + !$isOpen && + css` + transform: rotate(90deg); + `} +` + interface ListResult { item: Data['apeData'][0] score: number @@ -182,6 +207,7 @@ interface SearchCodeApeProps { } export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) { + const { t } = useTranslation() const [job, setJob] = useState('') const [department, setDepartment] = useState('') const [selected, setSelected] = useState('') @@ -277,19 +303,7 @@ export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) { setList(results) prevValue.current = job - }, [department, job]) - - const resultsList = list.slice(0, 25).map(({ item, debug }) => { - return ( - - - - ) - }) + }, [buildedResearch, department, job, lazyData]) const ret = ( @@ -298,11 +312,15 @@ export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) { - + @@ -317,8 +335,23 @@ export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) { onChange={setSelected} isDisabled={disabled} > - {resultsList} + + {list.slice(0, 25).map(({ item, debug }) => { + return ( + + + + ) + })} + + + + ) @@ -330,3 +363,39 @@ const StyledRadioCardGroup = styled(RadioCardGroup)` flex-direction: row; flex-wrap: wrap; ` + +const ActivityNotFound = () => { + const { t } = useTranslation() + + return ( + <> + ( + // eslint-disable-next-line react/jsx-props-no-spreading + + )} + small + > + {() => ( + <> + + + )} + + + ) +}