[TRELLO-2556] Actu + LP 'Erreur de prix en caisse' (#912)

website/package.json

@@ -8,6 +8,7 @@
     "devdemo": "yarn beforebuild && cross-env NEXT_PUBLIC_API_BASE_URL=https://demo-signalement-api.cleverapps.io next dev -p 3001",
     "devyaml": "yarn concurrently -n website,yaml_watcher \"yarn devdemo\" \"yarn generate-json-watch\"",
     "w:devyaml": "yarn devyaml",
+    "w:dev": "yarn dev",
     "build": "yarn beforebuild && tsc --declaration  && next build",
     "runplaywright": "npx playwright test",
     "start": "next start",

website/src/app/[lang]/erreur-de-prix-en-caisse/page.tsx

@@ -0,0 +1,6 @@
+import {buildGenerateMetadata} from '@/core/metadatas'
+import {erreurDePrixEnCaisse} from '@/reusablePages/manual_landings/erreurDePrixEnCaisse'
+
+export const generateMetadata = buildGenerateMetadata('erreurDePrixEnCaisse')
+
+export default erreurDePrixEnCaisse

website/src/components_feature/actualites/ArticleErreurDePrixEnCaisse.tsx

@@ -0,0 +1,70 @@
+import Image from 'next/image'
+import imgCaisse from '@/img/actualites/caisse.png'
+import Link from 'next/link'
+
+export function ArticleErreurDePrixEnCaisse() {
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row gap-5 mb-5">
+        <div className="w-full sm:w-1/2 md:w-1/2">
+          <Image src={imgCaisse} width={306} height={189} alt="" />
+        </div>
+        <p>
+          Lors de vos courses, vous avez peut-être déjà constaté une différence entre le prix affiché en rayon et celui enregistré
+          en caisse. Cette situation est plus courante qu’on ne pourrait le penser et peut causer une frustration légitime. Il est
+          important de savoir comment réagir et, surtout, comment se protéger contre ces erreurs.
+        </p>
+      </div>
+
+      <h2 className="text-2xl">La problématique</h2>
+      <p>
+        Selon la loi, les commerçants ont l'obligation de fournir une information claire et exacte sur le prix des produits, que
+        ce soit en magasin ou en ligne. Cependant, il arrive que des écarts apparaissent entre le prix indiqué en rayon et celui
+        facturé en caisse. Ces erreurs peuvent survenir en raison de modifications tarifaires non mises à jour ou de problèmes
+        techniques et humains, comme un manque de personnel.
+      </p>
+      <p className="font-bold">Environ 8 % des produits en magasin sont affectés par ces erreurs !</p>
+
+      <h2 className="text-2xl">Que dit la loi ?</h2>
+      <p>
+        <Link href="https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000032227013" target="_blank">
+          L'article L.211-1 du Code de la consommation
+        </Link>{' '}
+        prévoit qu’en cas de différence entre le prix en rayon et celui à la caisse, le consommateur est en droit d’exiger de
+        payer le prix le plus bas affiché, sauf en cas d’erreur manifeste. Par exemple, si un article de haute valeur est étiqueté
+        à un prix dérisoire, le commerçant peut refuser la vente, arguant d’une erreur évidente.{' '}
+      </p>
+      <h2 className="text-2xl">Que faire en cas d'erreur ?</h2>
+      <ul>
+        <li>
+          <strong>Avant de payer :</strong> Si vous remarquez une différence de prix avant le passage en caisse, vous pouvez
+          demander que le prix affiché soit appliqué.
+        </li>
+        <li>
+          <strong>Après paiement :</strong> Si l'erreur est constatée après avoir réglé, conservez votre ticket de caisse et
+          retournez voir un employé pour demander un remboursement de la différence. Les magasins sont souvent disposés à
+          effectuer ce geste commercial pour éviter les réclamations.
+        </li>
+      </ul>
+      <p>
+        Dans les cas où le commerçant refuse d'appliquer la loi : il est crucial de signaler ces pratiques sur{' '}
+        <Link href="https://signal.conso.gouv.fr/fr" target="_blank">
+          SignalConso.fr
+        </Link>
+      </p>
+
+      <h2 className="text-2xl">Pourquoi faire un signalement sur SignalConso ?</h2>
+
+      <p>
+        Si vous constatez que ces erreurs sont récurrentes ou que l’enseigne ne respecte pas la loi, vous pouvez faire un
+        signalement sur le site SignalConso. Cela permet à la DGCCRF (Direction générale de la concurrence, de la consommation et
+        de la répression des fraudes) d’être informée et, si nécessaire, de mener des contrôles dans les magasins concernés. Votre
+        signalement peut non seulement vous aider, mais aussi protéger d’autres consommateurs de pratiques commerciales déloyales.
+      </p>
+      <p>
+        En résumé, il est essentiel de rester vigilant lors de vos achats et de ne pas hésiter à demander un remboursement ou à
+        signaler un problème si une erreur de prix survient.
+      </p>
+    </div>
+  )
+}

website/src/components_feature/actualites/getArticleContent.ts

@@ -17,11 +17,14 @@ import {ArticleSignalConsoTraduit} from './ArticleSignalConsoTraduit'
 import {ArticleSignalConsoTranslated} from './ArticleSignalConsoTranslated'
 import {NewsArticle} from './newsArticlesData'
 import {ArticleFauxSitesDeVenteThesee} from '@/components_feature/actualites/ArticleFauxSitesDeVenteThesee'
+import {ArticleErreurDePrixEnCaisse} from '@/components_feature/actualites/ArticleErreurDePrixEnCaisse'
 
 // 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 'erreur-de-prix-en-caisse':
+      return ArticleErreurDePrixEnCaisse
     case 'faux-sites-de-vente-thesee':
       return ArticleFauxSitesDeVenteThesee
     case 'rappel-airbag-takata':

website/src/components_feature/actualites/newsArticlesData.ts

@@ -12,6 +12,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-09-19',
+    lang: AppLangs.fr,
+    slug: 'erreur-de-prix-en-caisse',
+    veryShortTitle: 'Erreur de prix en caisse',
+    title: 'Erreur de prix en caisse : Comment réagir et s’en prémunir ?',
+    excerpt: `Lors de vos courses, vous avez peut-être déjà constaté une différence entre le prix affiché en rayon et celui enregistré en caisse. Cette situation est plus courante qu’on ne pourrait le penser et peut causer une frustration légitime.`,
+  },
   {
     date: '2024-07-11',
     lang: AppLangs.fr,

website/src/core/pagesDefinitions.ts

@@ -61,6 +61,7 @@ export const internalPageDefs = {
   litige: page(`/litige`),
   litigeTelecom: page(`/litige/telecom`),
   obligationFibre: page('/obligation-adsl-fibre', {hasEnglishVersion: false}),
+  erreurDePrixEnCaisse: page('/erreur-de-prix-en-caisse', {hasEnglishVersion: false}),
   signalInfluenceur: page('/signaler-un-influenceur', {hasEnglishVersion: false}),
   obsolescencePage: page('/duree-de-vie-produit-obsolescence-programmee', {hasEnglishVersion: false}),
   demarchageAbusif: page('/demarchage-abusif', {hasEnglishVersion: false}),

website/src/i18n/localization/en.ts

@@ -135,6 +135,10 @@ export const en = {
         title: '',
         description: '',
       },
+      erreurDePrixEnCaisse: {
+        title: '',
+        description: '',
+      },
       signalInfluenceur: {
         title: '',
         description: '',

website/src/i18n/localization/fr.ts

@@ -135,6 +135,11 @@ export const fr = {
         title: `Fibre optique : installation forcée par votre opérateur Internet ?`,
         description: `Signalez un passage à la fibre forcé par votre fournisseur d'accès Internet`,
       },
+      erreurDePrixEnCaisse: {
+        title: 'Mauvais affichage des prix : Signalez-le sur SignalConso !',
+        description:
+          'Vous constatez un écart entre le prix affiché en magasin et celui en caisse ? Signalez-le sur SignalConso ! Protégez vos droits en cas de mauvais affichage des prix ou de promotions non appliquées. Agissez avec la DGCCRF pour corriger ces pratiques commerciales trompeuses.',
+      },
       signalInfluenceur: {
         title: "Signalez une publication frauduleuse d'un influenceur",
         description:

website/src/reusablePages/manual_landings/erreurDePrixEnCaisse.tsx

@@ -0,0 +1,75 @@
+import {PageComponentProps} from '@/core/metadatas'
+import {notFound} from 'next/navigation'
+import {FullWidthPageContainer} from '@/components_simple/PageContainers'
+import Button from '@codegouvfr/react-dsfr/Button'
+import {getManualLpButtonProps} from '@/landings/manualLandingsUtils'
+
+export function erreurDePrixEnCaisse(props: PageComponentProps) {
+  const lang = props.params.lang
+  if (lang !== 'fr') {
+    return notFound()
+  }
+  return (
+    <FullWidthPageContainer>
+      <div className="bg-scblueinfo text-white border-t-[1px] border-0 border-solid border-black">
+        <div className="fr-container py-12 flex justify-center">
+          <div className="flex flex-col max-w-4xl">
+            <h1 className="text-white">Vous avez constaté un prix différent en magasin et en caisse ?</h1>
+            <p className="text-xl">
+              Lorsque le prix affiché en rayon diffère de celui passé en caisse, cela peut constituer une infraction à la
+              réglementation sur l’affichage des prix. En tant que consommateur, il est important de connaître vos droits et
+              d’agir si vous êtes confronté à ce type de situation !
+            </p>
+            <div className="flex justify-center w-full">
+              <Button className=" border-blue-300 border border-solid" {...getManualLpButtonProps(lang, 'AchatMagasin')}>
+                Je signale une erreur de prix en caisse
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-sclightpurpledarker">
+        <div className="fr-container py-4">
+          <h2 className="fr-h4">Que dit la loi sur l’affichage des prix ?</h2>
+          <p className="text-lg">
+            Le code de la consommation impose que le prix d’un produit ou service soit clairement affiché et respecté. Lorsqu’une
+            différence est constatée, le consommateur est en droit de payer le prix le plus bas indiqué. Toutefois, en cas
+            d’erreur manifeste, le commerçant peut refuser la vente.
+          </p>
+          <p className="text-lg">
+            Par exemple, un professionnel peut refuser de vendre un produit à haute valeur qui a été affiché à un prix dérisoire
+            par inadvertance.
+          </p>
+        </div>
+      </div>
+      <div className="bg-sclightpurple">
+        <div className="fr-container py-4">
+          <h2 className="fr-h4">Quels sont les cas fréquents d'erreur d'affichage des prix ?</h2>
+          <ul className="mb-8 md:pl-0 md:flex md:flex-row md:justify-around">
+            <li className="text-lg basis-1/4">Prix en caisse supérieur à celui affiché en rayon.</li>
+            <li className="text-lg basis-1/4">Promotions non appliquées ou disparité entre publicité et prix facturé.</li>
+            <li className="text-lg basis-1/4">
+              Prix mal indiqués dans des secteurs comme les restaurants, garages ou coiffeurs.
+            </li>
+          </ul>
+
+          <p className="text-lg font-bold">Si vous constatez des écarts, n’hésitez pas à agir et à protéger vos droits.</p>
+        </div>
+      </div>
+
+      <div className="bg-scblueinfo text-white">
+        <div className="fr-container py-4">
+          <p className="text-lg mt-4">
+            SignalConso est une plateforme qui permet aux consommateurs de signaler les problèmes rencontrés lors de leurs achats.
+            Que ce soit pour une erreur de prix, un défaut d'affichage ou toute autre pratique commerciale trompeuse, vous
+            participez à la protection des consommateurs en aidant la DGCCRF à enquêter et à corriger ces pratiques.
+          </p>
+          <p className="text-lg mb-8">
+            Protégez-vous et faites respecter vos droits : signalez toute anomalie de prix avec SignalConso !
+          </p>
+        </div>
+      </div>
+    </FullWidthPageContainer>
+  )
+}