TRELLO-2765 : preview unreleased article (#973)

website/src/app/[lang]/actualites/[articleSlug]/page.tsx

@@ -1,5 +1,5 @@
 import {getArticleContent} from '@/components_feature/actualites/getArticleContent'
-import {NewsArticle, getNewsArticleData} from '@/components_feature/actualites/newsArticlesData'
+import {NewsArticle, getNewsArticleData, isPreview} from '@/components_feature/actualites/newsArticlesData'
 import {FullWidthPageContainer} from '@/components_simple/PageContainers'
 import {GenerateMetadataArg, PageComponentProps, PathParams} from '@/core/metadatas'
 import {pagesDefs} from '@/core/pagesDefinitions'
@@ -9,6 +9,7 @@ import Link from 'next/link'
 import {notFound} from 'next/navigation'
 import {getI18n} from '../../../../i18n/I18nDictionnary'
 import {AppLang} from '../../../../i18n/localization/AppLangs'
+import ArticleInfo from '@/components_feature/actualites/ArticleInfo'
 
 type LocalPathParams = PathParams<{
   articleSlug: string
@@ -48,7 +49,7 @@ function NewsArticleComponent(props: {article: NewsArticle; lang: AppLang}) {
                 <Link href={pagesDefs.actualites.url}>{messages.planDuSite.newsSection}</Link>
               </p>
               <p>
-                <span className=" text-sm"> {isoToHumanReadableText(props.article.date, props.lang)}</span>
+                <ArticleInfo article={props.article} />
               </p>
             </div>
             <h1 className={`fr-h2 ${title2 ? '!mb-2' : ''}`}>{props.article.title}</h1>

website/src/components_feature/actualites/ArticleInfo.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import {isoToHumanReadableText} from '@/utils/utils'
+import {useI18n} from '@/i18n/I18n'
+import {isPreview, NewsArticle} from '@/components_feature/actualites/newsArticlesData'
+import Tag from '@codegouvfr/react-dsfr/Tag'
+import {AppLang} from '@/i18n/localization/AppLangs'
+
+const ArticleInfo = ({article}: {article: NewsArticle}) => {
+  const {m, currentLang} = useI18n()
+
+  return (
+    <span className="text-sm">
+      {isPreview(article) && <Tag className={'bg-sclightpurple'}>{m.preview}</Tag>}&nbsp;
+      {isoToHumanReadableText(article.date, currentLang)}
+    </span>
+  )
+}
+
+export default ArticleInfo

website/src/components_feature/actualites/ArticleMarchesDeNoel.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import marcheNoel from "@/img/actualites/marcheNoel.jpg";
+import marcheNoel from '@/img/actualites/marcheNoel.jpg'
 
 export function ArticleMarchesDeNoel() {
   return (
@@ -11,85 +11,65 @@ export function ArticleMarchesDeNoel() {
         style={{
           width: '100%',
           height: 'auto',
-          marginBottom : 5
+          marginBottom: 5,
         }}
         alt=""
       />
 
-        <p>
-          Les marchés de Noël regorgent de trésors : produits du terroir, artisanat local, créations made in France.
-          Parcourir ces
-          allées illuminées est un plaisir pour dénicher des cadeaux originaux ou se régaler. Mais comment faire des choix
-          éclairés
-          parmi ces étals ? Quels points méritent une attention particulière pour éviter les mauvaises surprises ? Voici
-          quelques
-          conseils pratiques pour acheter en toute confiance sur les marchés de Noël et profiter pleinement de cette
-          tradition.
-        </p>
+      <p>
+        Les marchés de Noël regorgent de trésors : produits du terroir, artisanat local, créations made in France. Parcourir ces
+        allées illuminées est un plaisir pour dénicher des cadeaux originaux ou se régaler. Mais comment faire des choix éclairés
+        parmi ces étals ? Quels points méritent une attention particulière pour éviter les mauvaises surprises ? Voici quelques
+        conseils pratiques pour acheter en toute confiance sur les marchés de Noël et profiter pleinement de cette tradition.
+      </p>
 
       <p>
-        Les marchés de Noël regorgent de trésors : produits du terroir, artisanat local, créations made in France.
-        Parcourir ces
-        allées illuminées est un plaisir pour dénicher des cadeaux originaux ou se régaler. Mais comment faire des choix
-        éclairés
-        parmi ces étals ? Quels points méritent une attention particulière pour éviter les mauvaises surprises ? Voici
-        quelques
-        conseils pratiques pour acheter en toute confiance sur les marchés de Noël et profiter pleinement de cette
-        tradition.
+        Les marchés de Noël regorgent de trésors : produits du terroir, artisanat local, créations made in France. Parcourir ces
+        allées illuminées est un plaisir pour dénicher des cadeaux originaux ou se régaler. Mais comment faire des choix éclairés
+        parmi ces étals ? Quels points méritent une attention particulière pour éviter les mauvaises surprises ? Voici quelques
+        conseils pratiques pour acheter en toute confiance sur les marchés de Noël et profiter pleinement de cette tradition.
       </p>
 
       <h3 id="Réglementation-des-marchés-de-Noël--Ce-qu’il-faut-savoir">
         Réglementation des marchés de Noël : Ce qu’il faut savoir
       </h3>
 
       <p>
-        Les marchés de Noël sont soumis à des réglementations strictes pour garantir la sécurité des consommateurs et le
-        respect
+        Les marchés de Noël sont soumis à des réglementations strictes pour garantir la sécurité des consommateurs et le respect
         des lois en vigueur. Voici ce qu’il faut retenir.
       </p>
 
       <p>
-        <strong>Origine des produits</strong> : Pour les denrées alimentaires comme le miel ou l’huile d’olive,
-        l’indication de
-        l’origine est obligatoire. Pour les autres denrées, elle l’est seulement si son omission est de nature à créer
-        une
+        <strong>Origine des produits</strong> : Pour les denrées alimentaires comme le miel ou l’huile d’olive, l’indication de
+        l’origine est obligatoire. Pour les autres denrées, elle l’est seulement si son omission est de nature à créer une
         confusion dans l’esprit de l’acheteur.
       </p>
 
       <p>
-        <strong>Labels et mentions</strong> : Pour éviter toute déconvenue, préférez les produits avec mention “Fabriqué
-        en
-        France” ou “Made in France” ou ceux bénéficiant de labels de qualité tels que AOP (Appellation d’Origine
-        Protégée) ou
-        AOC (Appellation d’Origine Contrôlée). Ces mentions garantissent un savoir-faire spécifique et une origine
-        locale.
+        <strong>Labels et mentions</strong> : Pour éviter toute déconvenue, préférez les produits avec mention “Fabriqué en
+        France” ou “Made in France” ou ceux bénéficiant de labels de qualité tels que AOP (Appellation d’Origine Protégée) ou AOC
+        (Appellation d’Origine Contrôlée). Ces mentions garantissent un savoir-faire spécifique et une origine locale.
       </p>
 
       <p>
-        <strong>Transparence</strong> : Les prix doivent être affichés clairement et l’origine des produits indiquée
-        pour éviter
+        <strong>Transparence</strong> : Les prix doivent être affichés clairement et l’origine des produits indiquée pour éviter
         les tromperies sur l’artisanat ou le caractère local des articles.
       </p>
 
       <p>
-        <strong>Droit de rétractation</strong> : Sur les marchés de Noël, le droit de rétractation ne s’applique
-        généralement pas
-        pour les achats physiques. Les commerçants doivent toutefois informer les clients de cette règle via une
-        pancarte.
+        <strong>Droit de rétractation</strong> : Sur les marchés de Noël, le droit de rétractation ne s’applique généralement pas
+        pour les achats physiques. Les commerçants doivent toutefois informer les clients de cette règle via une pancarte.
       </p>
 
       <p>
-        Si vous avez rencontré un problème avec un commerçant sur un stand de marché, vous pouvez faire un signalement
-        sur{' '}
+        Si vous avez rencontré un problème avec un commerçant sur un stand de marché, vous pouvez faire un signalement sur{' '}
         <Link href="https://signal.conso.gouv.fr/" target="_blank" rel="noopener">
           SignalConso
         </Link>
         .
       </p>
 
-      <p>
-        Profitez des marchés de Noël sans mauvaises surprises et faites valoir vos droits en cas de problème !
-      </p>
+      <p>Profitez des marchés de Noël sans mauvaises surprises et faites valoir vos droits en cas de problème !</p>
     </div>
   )
-}
+}

website/src/components_feature/actualites/NewsHome.tsx

@@ -5,7 +5,8 @@ import {Card} from '@codegouvfr/react-dsfr/Card'
 import {ContentPageContainer} from '../../components_simple/PageContainers'
 import {useI18n} from '../../i18n/I18n'
 import {isoToFrenchFormat} from '../../utils/utils'
-import {getNewsArticleData} from './newsArticlesData'
+import {getNewsArticleData, isPreview} from './newsArticlesData'
+import ArticleInfo from '@/components_feature/actualites/ArticleInfo'
 
 const NewsHome = () => {
   const {m, currentLang} = useI18n()
@@ -26,7 +27,7 @@ const NewsHome = () => {
                     href: buildLinkNewsArticle(article, {withLangPrefix: true}),
                   }}
                   enlargeLink
-                  detail={isoToFrenchFormat(article.date)}
+                  detail={<ArticleInfo article={article} />}
                 />
               </div>
             )

website/src/components_feature/actualites/getArticleContent.ts

@@ -33,7 +33,7 @@ import {ArticleAbonnementsCachesBlackFriday} from '@/components_feature/actualit
 import {ArticleAteliersUtilisateurs} from '@/components_feature/actualites/ArticleAteliersUtilisateurs'
 import {ArticleDarkPatterns} from '@/components_feature/actualites/ArticleDarkPatterns'
 import {ArticleDroitDeRetractation} from '@/components_feature/actualites/ArticleDroitDeRetractation'
-import {ArticleMarchesDeNoel} from "@/components_feature/actualites/ArticleMarchesDeNoel";
+import {ArticleMarchesDeNoel} from '@/components_feature/actualites/ArticleMarchesDeNoel'
 
 // We can't put import these JSX directly into the "newsArticlesData"
 // it causes too much import problems in the sitemap generation script

website/src/components_feature/actualites/newsArticlesData.ts

@@ -1,4 +1,3 @@
-
 import {AppLang, AppLangs} from '../../i18n/localization/AppLangs'
 import {appConfig} from '../../core/appConfig'
 
@@ -310,9 +309,13 @@ export const initialNewsArticlesData: NewsArticle[] = [
   },
 ] as const
 
-const conf = appConfig.showOutilsInternes
+const isDemo = appConfig.showOutilsInternes
 
 export const getNewsArticleData = () => {
   const currentDate = new Date()
-  return initialNewsArticlesData.filter(article => (new Date(article.date) <= currentDate || conf))
+  return initialNewsArticlesData.filter(article => new Date(article.date) <= currentDate || isDemo)
+}
+
+export const isPreview = (article: NewsArticle) => {
+  return new Date(article.date) > new Date()
 }

website/src/i18n/localization/AppLangs.tsx

@@ -1,4 +1,3 @@
-
 export enum AppLangs {
   fr = 'fr',
   en = 'en',

website/src/i18n/localization/en.ts

@@ -819,6 +819,7 @@ export const en = {
     date: 'Date',
     add: 'Add',
     previous: 'Previous',
+    preview: 'Preview',
     back: 'Back',
     count: 'Count',
     delete: 'Delete',

website/src/i18n/localization/fr.ts

@@ -824,7 +824,7 @@ export const fr = {
     date: 'Date',
     add: 'Ajouter',
     previous: 'Précédent',
-    back: 'Retour',
+    preview: 'À venir',
     count: 'Nombre',
     delete: 'Supprimer',
     deleted: 'Supprimé',