From 218a8ea059f56547f89e3daee51cb30815276bf4 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Wed, 2 Aug 2023 11:06:39 +0200 Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20la=20navigation=20dans=20les=20?= =?UTF-8?q?int=C3=A9grations=20pour=20l'assistant=20au=20choix=20du=20stat?= =?UTF-8?q?ut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SimulateurOrAssistantPage.tsx | 3 +- site/source/design-system/hooks.tsx | 17 ++++++++++ site/source/design-system/popover/Popover.tsx | 19 ++--------- site/source/hooks/useCurrentSimulatorData.ts | 18 +++++----- .../_components/Navigation.tsx | 22 ++++++++---- .../_components/StatutsPossibles.tsx | 2 ++ .../choix-du-statut/recherche-activité.tsx | 34 ++++++++++++------- .../assistants/recherche-code-ape/Result.tsx | 20 +++++------ .../recherche-code-ape/SearchCodeAPE.tsx | 31 ++++++++++------- 9 files changed, 98 insertions(+), 68 deletions(-) create mode 100644 site/source/design-system/hooks.tsx diff --git a/site/source/components/SimulateurOrAssistantPage.tsx b/site/source/components/SimulateurOrAssistantPage.tsx index 927d1cab2..f9d3d241b 100644 --- a/site/source/components/SimulateurOrAssistantPage.tsx +++ b/site/source/components/SimulateurOrAssistantPage.tsx @@ -15,7 +15,6 @@ import { } from '@/hooks/useCurrentSimulatorData' import { useIsEmbedded } from '@/hooks/useIsEmbedded' import useSimulationConfig from '@/hooks/useSimulationConfig' -import { useSitePaths } from '@/sitePaths' import { situationSelector } from '@/store/selectors/simulationSelectors' import { Merge } from '@/types/utils' @@ -57,7 +56,7 @@ export default function SimulateurOrAssistantPage() { autoloadLastSimulation, }) useSearchParamsSimulationSharing() - const { absoluteSitePaths } = useSitePaths() + const trackInfo = { chapter1: typeof tracking !== 'string' && tracking && 'chapter1' in tracking diff --git a/site/source/design-system/hooks.tsx b/site/source/design-system/hooks.tsx new file mode 100644 index 000000000..6c4a74844 --- /dev/null +++ b/site/source/design-system/hooks.tsx @@ -0,0 +1,17 @@ +import { useEffect, useState } from 'react' + +import { getIframeOffset } from '@/utils' + +export const useIFrameOffset = () => { + const [offsetTop, setOffset] = useState( + window.parent !== window ? undefined : null + ) + useEffect(() => { + if (window.parent === window) { + return + } + void getIframeOffset().then(setOffset) + }, []) + + return offsetTop +} diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index 3df9908bd..9c63805fa 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/site/source/design-system/popover/Popover.tsx @@ -9,31 +9,18 @@ import { } from '@react-aria/overlays' import { AriaDialogProps } from '@react-types/dialog' import FocusTrap from 'focus-trap-react' -import React, { RefObject, useEffect, useRef, useState } from 'react' +import React, { RefObject, useRef } from 'react' import { useTranslation } from 'react-i18next' import styled, { css, keyframes } from 'styled-components' import { Grid } from '@/design-system/layout' -import { getIframeOffset, wrapperDebounceEvents } from '@/utils' +import { wrapperDebounceEvents } from '@/utils' import { FocusStyle } from '../global-style' +import { useIFrameOffset } from '../hooks' import { Container } from '../layout' import { H2 } from '../typography/heading' -const useIFrameOffset = () => { - const [offsetTop, setOffset] = useState( - window.parent !== window ? undefined : null - ) - useEffect(() => { - if (window.parent === window) { - return - } - void getIframeOffset().then(setOffset) - }, []) - - return offsetTop -} - export default function Popover( props: OverlayProps & AriaDialogProps & { diff --git a/site/source/hooks/useCurrentSimulatorData.ts b/site/source/hooks/useCurrentSimulatorData.ts index 9c010c10a..a8c3c66fe 100644 --- a/site/source/hooks/useCurrentSimulatorData.ts +++ b/site/source/hooks/useCurrentSimulatorData.ts @@ -17,15 +17,15 @@ export const useCurrentSimulatorData = () => { const entries = Object.entries(simulatorsData) const [key, data] = - (!isEmbedded - ? entries - .sort((a, b) => b[1].path.length - a[1].path.length) - .find(([, data]) => pathname.startsWith(data.path)) - : entries - .sort((a, b) => b[1].iframePath.length - a[1].iframePath.length) - .find(([, data]) => - pathname.startsWith('/iframes/' + data.iframePath) - )) ?? [] + // Find the simulator with classic path + entries + .sort((a, b) => b[1].path.length - a[1].path.length) + .find(([, data]) => pathname.startsWith(data.path)) ?? + // Find the simulator with iframe path + entries + .sort((a, b) => b[1].iframePath.length - a[1].iframePath.length) + .find(([, data]) => pathname.startsWith('/iframes/' + data.iframePath)) ?? + [] return { key: key as keyof typeof simulatorsData, diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx index 219857ef8..721706386 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx @@ -1,5 +1,5 @@ import { Trans, useTranslation } from 'react-i18next' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { TrackPage } from '@/components/ATInternetTracking' import { Button } from '@/design-system/buttons' @@ -20,6 +20,7 @@ export default function Navigation({ onPreviousStep, // TODO : prefer resetOnLeave assistantIsCompleted = false, children, + small = false, }: { currentStepIsComplete: boolean nextStepLabel?: false | string @@ -27,6 +28,7 @@ export default function Navigation({ onPreviousStep?: () => void assistantIsCompleted?: false | Statuts children?: React.ReactNode + small?: boolean }) { const { t } = useTranslation() const nextStep = useNextStep() @@ -38,8 +40,8 @@ export default function Navigation({ return ( <> - - + {!small && } + {children && ( @@ -49,6 +51,7 @@ export default function Navigation({ - + {open && ( {contenuCentral.length ? ( <> -
Contenu central de cette activité :
+
Contenu central de cette activité :
    {contenuCentral.map((contenu, i) => (
  • {contenu}
    • @@ -69,7 +69,7 @@ export const Result = ({ item, hideGuichetUnique }: ResultProps) => { {contenuAnnexe.length ? ( <> -
    Contenu annexe de cette activité :
    +
    Contenu annexe de cette activité :
      {contenuAnnexe.map((contenu, i) => (
    • {contenu}
      • @@ -80,7 +80,7 @@ export const Result = ({ item, hideGuichetUnique }: ResultProps) => { {contenuExclu.length ? ( <> -
      Contenu exclu de cette activité :
      +
      Contenu exclu de cette activité :
        {contenuExclu.map((contenu, i) => (
      • {contenu}
        • diff --git a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx index c372f6134..b955a3c93 100644 --- a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx +++ b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx @@ -78,6 +78,7 @@ interface SearchCodeApeProps { hideGuichetUnique?: boolean onCodeAPESelected?: (codeAPE: string) => void trackSearch?: boolean + underSelection?: React.ReactNode } export default function SearchCodeAPE({ @@ -85,6 +86,7 @@ export default function SearchCodeAPE({ hideGuichetUnique = false, onCodeAPESelected, trackSearch = false, + underSelection, }: SearchCodeApeProps) { const { t } = useTranslation() const [searchQuery, setSearchQuery] = usePersistingState( @@ -250,18 +252,23 @@ export default function SearchCodeAPE({ > {list.slice(0, 25).map(({ item, debug }) => { return ( - - - + <> + + + + {underSelection && selected === item.codeApe && ( + {underSelection} + )} + ) })}