Améliore le style de la bannière et répare le SSR sur les pages /iframes
Johan Girod
parent
9f8fb317db
commit
46328c5d75
|
|
@ -10,81 +10,85 @@ import { Li, Ul } from '@/design-system/typography/list'
|
|||
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
|
||||
export default function BadNews() {
|
||||
export function BadNews() {
|
||||
const { absoluteSitePaths } = useSitePaths()
|
||||
|
||||
return (
|
||||
<Message
|
||||
className="print-hidden"
|
||||
type="error"
|
||||
icon={<Emoji emoji="💔" />}
|
||||
mini
|
||||
border={false}
|
||||
>
|
||||
<Body>
|
||||
<Trans i18nKey="badnews.body">
|
||||
<strong>Important :</strong> La mise à jour des simulateurs et le
|
||||
support utilisateur ne sont plus assurés.{' '}
|
||||
<PopoverWithTrigger
|
||||
small
|
||||
title={'Interruption du service'}
|
||||
trigger={(props) => (
|
||||
<Link {...props}>
|
||||
<Trans>En savoir plus.</Trans>
|
||||
</Link>
|
||||
)}
|
||||
>
|
||||
<Body>
|
||||
L'équipe qui opérait les simulateurs et les assistants de
|
||||
mon-entreprise.urssaf.fr depuis plus de cinq ans a pris la
|
||||
décision d'arrêter son travail. En voici l'explication :
|
||||
</Body>
|
||||
<Ul>
|
||||
<Li>
|
||||
L'équipe est composée de{' '}
|
||||
<Strong>deux développeurs indépendants</Strong> (travailleurs
|
||||
non salariés) ;
|
||||
</Li>
|
||||
<Li>
|
||||
Le paiement de leurs factures est bloqué{' '}
|
||||
<Strong>depuis avril</Strong> ;
|
||||
</Li>
|
||||
<Li>
|
||||
Le budget de développement du site, financé en totalité par
|
||||
l'Urssaf, est en{' '}
|
||||
<Link to={absoluteSitePaths.budget}>
|
||||
forte baisse pour 2023
|
||||
<div>
|
||||
<Message
|
||||
className="print-hidden"
|
||||
type="error"
|
||||
mini
|
||||
border={false}
|
||||
style={{ textAlign: 'center' }}
|
||||
>
|
||||
<Body>
|
||||
<Emoji emoji="💔" />
|
||||
|
||||
<Trans i18nKey="badnews.body">
|
||||
<strong>Annonce :</strong> La mise à jour des simulateurs et le
|
||||
support utilisateur ne sont plus assurés.{' '}
|
||||
<PopoverWithTrigger
|
||||
small
|
||||
title={'Interruption du service'}
|
||||
trigger={(props) => (
|
||||
<Link {...props}>
|
||||
<Trans>En savoir plus.</Trans>
|
||||
</Link>
|
||||
, alors que{' '}
|
||||
<Link to={absoluteSitePaths.stats}>
|
||||
son usage est en forte hausse
|
||||
</Link>
|
||||
.
|
||||
</Li>
|
||||
<Li>
|
||||
Ce budget n'est <Strong>pas suffisant</Strong> pour faire
|
||||
travailler l'équipe sur l'année complète et continuer à
|
||||
développer le produit.
|
||||
</Li>
|
||||
</Ul>
|
||||
)}
|
||||
>
|
||||
<Body>
|
||||
L'équipe qui opérait les simulateurs et les assistants de
|
||||
mon-entreprise.urssaf.fr depuis plus de cinq ans a pris la
|
||||
décision d'arrêter son travail. En voici l'explication :
|
||||
</Body>
|
||||
<Ul>
|
||||
<Li>
|
||||
L'équipe est composée de{' '}
|
||||
<Strong>deux développeurs indépendants</Strong> (travailleurs
|
||||
non salariés) ;
|
||||
</Li>
|
||||
<Li>
|
||||
Le paiement de leurs factures est bloqué{' '}
|
||||
<Strong>depuis avril</Strong> ;
|
||||
</Li>
|
||||
<Li>
|
||||
Le budget de développement du site, financé en totalité par
|
||||
l'Urssaf, est en{' '}
|
||||
<Link to={absoluteSitePaths.budget}>
|
||||
forte baisse pour 2023
|
||||
</Link>
|
||||
, alors que{' '}
|
||||
<Link to={absoluteSitePaths.stats}>
|
||||
son usage est en forte hausse
|
||||
</Link>
|
||||
.
|
||||
</Li>
|
||||
<Li>
|
||||
Ce budget n'est <Strong>pas suffisant</Strong> pour faire
|
||||
travailler l'équipe sur l'année complète et continuer à
|
||||
développer le produit.
|
||||
</Li>
|
||||
</Ul>
|
||||
|
||||
<Body>
|
||||
Cette situation est <Strong>temporaire</Strong>, et devrait{' '}
|
||||
<Strong>revenir à la normale</Strong> dans les prochains mois.
|
||||
Veuillez nous excuser pour la gêne occasionnée.
|
||||
</Body>
|
||||
<StyledImg src={missedChance} aria-hidden alt="" />
|
||||
<SmallBody $grey>
|
||||
P.S de l'équipe : On vous le dit sincèrement, ça été très dur de
|
||||
prendre cette décision. On aurait aimé continuer à faire évoluer
|
||||
ce site comme on l'a fait toutes ces années. Quoi qu'il advienne,
|
||||
on part très honoré de voir plus de 500 000 d'entre vous utiliser
|
||||
nos outils chaque mois !
|
||||
</SmallBody>
|
||||
</PopoverWithTrigger>
|
||||
</Trans>
|
||||
</Body>
|
||||
</Message>
|
||||
<Body>
|
||||
Cette situation est <Strong>temporaire</Strong>, et devrait{' '}
|
||||
<Strong>revenir à la normale</Strong> dans les prochains mois.
|
||||
Veuillez nous excuser pour la gêne occasionnée.
|
||||
</Body>
|
||||
<StyledImg src={missedChance} aria-hidden alt="" />
|
||||
<SmallBody $grey>
|
||||
P.S de l'équipe : On vous le dit sincèrement, ça été très dur de
|
||||
prendre cette décision. On aurait aimé continuer à faire évoluer
|
||||
ce site comme on l'a fait toutes ces années. Quoi qu'il
|
||||
advienne, on part très honoré de voir plus de 500 000 d'entre
|
||||
vous utiliser nos outils chaque mois !
|
||||
</SmallBody>
|
||||
</PopoverWithTrigger>
|
||||
</Trans>
|
||||
</Body>
|
||||
</Message>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import { Merge } from '@/types/utils'
|
|||
|
||||
import { NextSteps } from '../pages/simulateurs/NextSteps'
|
||||
import { TrackChapter } from './ATInternetTracking'
|
||||
import BetaBanner from './BetaBanner'
|
||||
|
||||
export default function SimulateurOrAssistantPage() {
|
||||
const { currentSimulatorData } = useCurrentSimulatorData()
|
||||
|
|
@ -81,7 +80,7 @@ export default function SimulateurOrAssistantPage() {
|
|||
/>
|
||||
)}
|
||||
|
||||
{beta && <BetaBanner />}
|
||||
{/* {beta && <BetaBanner />} */}
|
||||
|
||||
{title && !inIframe && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { useDarkMode } from '@/hooks/useDarkMode'
|
|||
import { useGetFullURL } from '@/hooks/useGetFullURL'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
|
||||
import BadNews from '../BadNews'
|
||||
import { BadNews } from '../BadNews'
|
||||
import { Appear } from '../ui/animate'
|
||||
import BrowserOnly from '../utils/BrowserOnly'
|
||||
import { Menu } from './Menu'
|
||||
|
|
@ -27,64 +27,71 @@ export default function Header() {
|
|||
const [darkMode, setDarkMode] = useDarkMode()
|
||||
|
||||
return (
|
||||
<header
|
||||
role="banner"
|
||||
style={{
|
||||
zIndex: '1',
|
||||
}}
|
||||
>
|
||||
<a href={`${fullURL}#main`} className="skip-link print-hidden">
|
||||
{t('Aller au contenu principal')}
|
||||
</a>
|
||||
<Container>
|
||||
<StyledHeader>
|
||||
<Link
|
||||
to={absoluteSitePaths.index}
|
||||
aria-label={t("URSSAF Mon entreprise, accéder à la page d'accueil")}
|
||||
>
|
||||
<StyledLogo>
|
||||
<Logo />
|
||||
</StyledLogo>
|
||||
</Link>
|
||||
<>
|
||||
<header
|
||||
role="banner"
|
||||
style={{
|
||||
zIndex: '1',
|
||||
}}
|
||||
>
|
||||
<a href={`${fullURL}#main`} className="skip-link print-hidden">
|
||||
{t('Aller au contenu principal')}
|
||||
</a>
|
||||
<Container>
|
||||
<StyledHeader>
|
||||
<Link
|
||||
to={absoluteSitePaths.index}
|
||||
aria-label={t(
|
||||
"URSSAF Mon entreprise, accéder à la page d'accueil"
|
||||
)}
|
||||
>
|
||||
<StyledLogo>
|
||||
<Logo />
|
||||
</StyledLogo>
|
||||
</Link>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginRight: '1rem',
|
||||
}}
|
||||
>
|
||||
<Emoji emoji="☀️" aria-hidden />
|
||||
<Switch
|
||||
isSelected={darkMode}
|
||||
onChange={setDarkMode}
|
||||
role="checkbox"
|
||||
aria-label={
|
||||
darkMode
|
||||
? t('navbar.deactivate-darkmode', 'Désactiver le mode sombre')
|
||||
: t('navbar.activate-darkmode', 'Activer le mode sombre')
|
||||
}
|
||||
/>
|
||||
<Emoji emoji="🌙" aria-hidden />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginRight: '1rem',
|
||||
}}
|
||||
>
|
||||
<Emoji emoji="☀️" aria-hidden />
|
||||
<Switch
|
||||
isSelected={darkMode}
|
||||
onChange={setDarkMode}
|
||||
role="checkbox"
|
||||
aria-label={
|
||||
darkMode
|
||||
? t(
|
||||
'navbar.deactivate-darkmode',
|
||||
'Désactiver le mode sombre'
|
||||
)
|
||||
: t('navbar.activate-darkmode', 'Activer le mode sombre')
|
||||
}
|
||||
/>
|
||||
<Emoji emoji="🌙" aria-hidden />
|
||||
</div>
|
||||
|
||||
{i18n.language === 'fr' && <SearchButton />}
|
||||
{i18n.language === 'fr' && <SearchButton />}
|
||||
|
||||
<Menu />
|
||||
</StyledHeader>
|
||||
<BadNews />
|
||||
<Menu />
|
||||
</StyledHeader>
|
||||
<BadNews />
|
||||
|
||||
<BrowserOnly>
|
||||
{i18n.language === 'fr' && (
|
||||
<Appear>
|
||||
<NewsBannerWrapper />
|
||||
</Appear>
|
||||
)}
|
||||
</BrowserOnly>
|
||||
</Container>
|
||||
</header>
|
||||
<BrowserOnly>
|
||||
{i18n.language === 'fr' && (
|
||||
<Appear>
|
||||
<NewsBannerWrapper />
|
||||
</Appear>
|
||||
)}
|
||||
</BrowserOnly>
|
||||
</Container>
|
||||
</header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import { Meta, StoryObj } from '@storybook/react'
|
||||
import { styled } from 'styled-components'
|
||||
|
||||
import { Message } from '@/design-system'
|
||||
|
||||
import { Emoji } from '../emoji'
|
||||
import { Strong } from '../typography'
|
||||
import { Body } from '../typography/paragraphs'
|
||||
|
||||
const meta: Meta<typeof Message> = {
|
||||
|
|
@ -48,25 +45,3 @@ export const Alert: Story = {
|
|||
),
|
||||
args: { icon: true },
|
||||
}
|
||||
|
||||
export const MessageWithCustomIcon: Story = {
|
||||
render: (args) => (
|
||||
<Message {...args}>
|
||||
<Body>
|
||||
<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
|
||||
travaillons à <Strong>valider les informations et les calculs</Strong>,
|
||||
mais des <Strong>erreurs peuvent être présentes.</Strong>
|
||||
</Body>
|
||||
</Message>
|
||||
),
|
||||
args: {
|
||||
type: 'info',
|
||||
icon: <Emoji emoji="🚧" />,
|
||||
border: false,
|
||||
mini: true,
|
||||
},
|
||||
}
|
||||
|
||||
const StyledStrong = styled(Strong)`
|
||||
color: ${({ theme }) => theme.colors.extended.info[600]};
|
||||
`
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export function EmbededContextProvider({
|
|||
let isIframePath
|
||||
try {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
isIframePath = useMatch('/iframes/')
|
||||
isIframePath = useMatch('/iframes/*')
|
||||
} catch {
|
||||
try {
|
||||
isIframePath = window.document.location.pathname.includes('/iframes/')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import BadNews from '@/components/BadNews'
|
||||
import { BadNews } from '@/components/BadNews'
|
||||
import FeedbackButton from '@/components/Feedback'
|
||||
import Privacy from '@/components/layout/Footer/Privacy'
|
||||
import { Spacing } from '@/design-system/layout'
|
||||
|
|
@ -12,7 +12,9 @@ export default function IframeFooter() {
|
|||
}}
|
||||
>
|
||||
<Spacing md />
|
||||
<BadNews />
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<BadNews />
|
||||
</div>
|
||||
<FeedbackButton isEmbedded />
|
||||
<Spacing md />
|
||||
<Privacy noUnderline={false} />
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export default defineConfig(({ command, mode }) => ({
|
|||
},
|
||||
publicDir: 'source/public',
|
||||
build: {
|
||||
minify: process.env.NODE_ENV === 'production' ? 'esbuild' : false,
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue