MEP update libs + article

.yarnrc.yml

@@ -2,6 +2,8 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-constraints.cjs
+    spec: "@yarnpkg/plugin-constraints"
 
 yarnPath: .yarn/releases/yarn-3.2.1.cjs

mobile-tools/package.json

@@ -5,27 +5,27 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "@types/cors": "^2.8.13",
-    "@types/express": "^4.17.17",
-    "@types/jest": "29.5.12",
-    "@types/jsdom": "^21.1.1",
-    "@types/morgan": "^1.9.4",
-    "@types/node": "^20.3.1",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/jest": "29.5.14",
+    "@types/jsdom": "^21.1.7",
+    "@types/morgan": "^1.9.9",
+    "@types/node": "^20.17.7",
     "@types/node-cron": "^3.0.11",
     "@types/supertest": "^6.0.2",
-    "concurrently": "^8.2.0",
-    "jest": "^29.5.0",
+    "concurrently": "^8.2.2",
+    "jest": "^29.7.0",
     "nodemon": "^2.0.22",
     "prettier": "^3.3.3",
     "supertest": "^7.0.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "5.4.5"
+    "ts-jest": "^29.2.5",
+    "typescript": "5.7.2"
   },
   "dependencies": {
     "argon2": "^0.30.3",
     "cors": "^2.8.5",
-    "express": "^4.18.2",
-    "jsdom": "^22.0.0",
+    "express": "^4.21.1",
+    "jsdom": "^22.1.0",
     "morgan": "^1.10.0",
     "node-cron": "^3.0.3",
     "shared": "workspace:^"

mobile-tools/src/config/config.ts

@@ -8,7 +8,7 @@ export const Config = {
   rappelConsoUrl: noTrailingSlash(process.env.RAPPELCONSO_URL ?? ''),
   fetchTimeout: parseInt(process.env.MOBILE_HELPERS_FETCH_TIMEOUT ?? '5000'),
   oneSignalUrl: process.env.ONE_SIGNAL_URL ?? '',
-  oneSignalEnablePush: process.env.ONE_SIGNAL_ENABLE_PUSH === 'true' ?? false,
+  oneSignalEnablePush: process.env.ONE_SIGNAL_ENABLE_PUSH === 'true',
   oneSignalAppId: process.env.ONE_SIGNAL_APP_ID ?? '',
   oneSignaleApiKey: process.env.ONE_SIGNAL_API_KEY ?? '',
   websiteUrl: process.env.WEBSITE_URL ?? '',

shared/package.json

@@ -14,10 +14,10 @@
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "4.17.4",
-    "@types/node": "20.12.12",
+    "@types/lodash": "4.17.13",
+    "@types/node": "20.17.7",
     "slugify": "^1.6.6",
     "ts-node": "10.9.2",
-    "typescript": "5.4.5"
+    "typescript": "5.7.2"
   }
 }

website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

website/package.json

@@ -29,89 +29,89 @@
   },
   "heroku-run-build-script": true,
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^1.11.2",
-    "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.4",
+    "@codegouvfr/react-dsfr": "^1.14.7",
+    "@emotion/cache": "11.13.5",
+    "@emotion/react": "11.13.5",
     "@emotion/server": "11.11.0",
-    "@emotion/styled": "11.11.5",
-    "@formatjs/intl-localematcher": "^0.5.4",
+    "@emotion/styled": "11.13.5",
+    "@formatjs/intl-localematcher": "^0.5.8",
     "@headlessui/react": "^1.7.19",
-    "@headlessui/tailwindcss": "^0.2.0",
+    "@headlessui/tailwindcss": "^0.2.1",
     "@hello-pangea/dnd": "^16.6.0",
     "@iarna/toml": "^2.2.5",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@react-hook/throttle": "^2.2.0",
-    "@sentry/nextjs": "7.116.0",
-    "@sentry/react": "7.116.0",
-    "@sentry/tracing": "7.116.0",
-    "@tanstack/react-query": "^5.40.0",
+    "@sentry/nextjs": "7.120.0",
+    "@sentry/react": "7.120.0",
+    "@sentry/tracing": "7.120.0",
+    "@tanstack/react-query": "^5.61.3",
     "@types/fs-extra": "^11.0.4",
     "@types/iframe-resizer": "^3.5.13",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.1",
     "@types/uuid": "^9.0.8",
     "airtable": "^0.12.2",
-    "autoprefixer": "^10.4.19",
-    "axios": "1.7.2",
+    "autoprefixer": "^10.4.20",
+    "axios": "1.7.7",
     "browser-image-compression": "2.0.2",
-    "cookies-next": "^4.2.1",
-    "csv-parse": "^5.5.6",
+    "cookies-next": "^4.3.0",
+    "csv-parse": "^5.6.0",
     "date-fns": "2.30.0",
     "fuse.js": "^7.0.0",
     "heic2any": "^0.0.4",
-    "iframe-resizer": "^4.4.0",
+    "iframe-resizer": "^4.4.5",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
-    "negotiator": "^0.6.3",
-    "next": "^14.2.3",
-    "postcss": "^8.4.38",
-    "qs": "6.12.1",
+    "negotiator": "^0.6.4",
+    "next": "^14.2.18",
+    "postcss": "^8.4.49",
+    "qs": "6.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "7.51.5",
+    "react-hook-form": "7.53.2",
     "react-imask": "7.6.1",
     "react-swipeable-views": "0.14.0",
-    "recharts": "2.12.7",
-    "rimraf": "^5.0.7",
+    "recharts": "2.13.3",
+    "rimraf": "^5.0.10",
     "shared": "workspace:^",
     "sharp": "^0.32.6",
     "smoothscroll-polyfill": "0.4.4",
-    "tailwindcss": "^3.4.3",
-    "tss-react": "^4.9.10",
+    "tailwindcss": "^3.4.15",
+    "tss-react": "^4.9.13",
     "uuid": "^9.0.1",
     "yaml-import": "2.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.0",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/date-fns": "2.6.0",
-    "@types/jest": "29.5.12",
+    "@types/date-fns": "2.6.3",
+    "@types/jest": "29.5.14",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "4.17.4",
+    "@types/lodash": "4.17.13",
     "@types/lodash.uniqby": "^4.7.9",
     "@types/negotiator": "^0.6.3",
-    "@types/node": "20.12.12",
-    "@types/qs": "^6.9.15",
+    "@types/node": "20.17.7",
+    "@types/qs": "^6.9.17",
     "@types/randomstring": "1.3.0",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
     "@types/react-swipeable-views": "0.13.5",
     "@types/smoothscroll-polyfill": "0.3.4",
     "babel-jest": "29.7.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "8.57.0",
-    "eslint-config-next": "^14.2.3",
+    "eslint": "8.57.1",
+    "eslint-config-next": "^14.2.18",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-html-reporters": "3.1.7",
-    "nodemon": "^3.1.1",
-    "prettier": "3.2.5",
-    "sass": "^1.77.2",
+    "nodemon": "^3.1.7",
+    "prettier": "3.3.3",
+    "sass": "^1.81.0",
     "ts-node": "10.9.2",
     "typescript": "5.4.5"
   }

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

@@ -0,0 +1,75 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import marcheNoel from '@/img/actualites/marcheNoel.jpg'
+
+export function ArticleMarchesDeNoel() {
+  return (
+    <div className="sc-article">
+      <Image
+        src={marcheNoel}
+        sizes="100vw"
+        style={{
+          width: '100%',
+          height: 'auto',
+          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>
+
+      <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
+        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
+        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.
+      </p>
+
+      <p>
+        <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.
+      </p>
+
+      <p>
+        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>
+    </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,11 +33,14 @@ 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'
 
 // We can't put import these JSX directly into the "newsArticlesData"
 // it causes too much import problems in the sitemap generation script
 export function getArticleContent(slug: NewsArticle['slug']): () => JSX.Element {
   switch (slug) {
+    case 'marche-noel':
+      return ArticleMarchesDeNoel
     case 'droit-de-retractation':
       return ArticleDroitDeRetractation
     case 'dark-patterns':

website/src/components_feature/actualites/newsArticlesData.ts

@@ -1,4 +1,5 @@
 import {AppLang, AppLangs} from '../../i18n/localization/AppLangs'
+import {appConfig} from '../../core/appConfig'
 
 export type NewsArticle = {
   date: string
@@ -12,6 +13,14 @@ export type NewsArticle = {
 
 // This is the display order. Keep the most recents at the start of the array
 export const initialNewsArticlesData: NewsArticle[] = [
+  {
+    date: '2024-12-05',
+    lang: AppLangs.fr,
+    slug: 'marche-noel',
+    veryShortTitle: 'Les marchés de Noël',
+    title: 'Les fêtes approchent : profitez des marchés de Noël en toute sérénité !',
+    excerpt: `Voici quelques conseils pratiques pour acheter en toute confiance sur les marchés de Noël et profiter pleinement de cette tradition.`,
+  },
   {
     date: '2024-11-29',
     lang: AppLangs.fr,
@@ -300,7 +309,13 @@ export const initialNewsArticlesData: NewsArticle[] = [
   },
 ] as const
 
+const isDemo = appConfig.showOutilsInternes
+
 export const getNewsArticleData = () => {
   const currentDate = new Date()
-  return initialNewsArticlesData.filter(article => new Date(article.date) <= currentDate)
+  return initialNewsArticlesData.filter(article => new Date(article.date) <= currentDate || isDemo)
+}
+
+export const isPreview = (article: NewsArticle) => {
+  return new Date(article.date) > new Date()
 }