[DEV-1418] Allow fetching from the CMS the "In evidenza" section on t…

…he home page (#667) * Allow fetching from the CMS the "In evidenza" section on the home page * Add changeset * Fix homepage test * Fix type to prevent error when newsShowcase is null * Fixes after code review * Set newsItem image as optional * Fix publishedAt type in NewsItemCodec --------- Co-authored-by: tommaso1 <[email protected]>
pagopa · Feb 28, 2024 · 9cbc418 · 9cbc418
1 parent b2dedb0
commit 9cbc418
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 86 deletions.
diff --git a/.changeset/selfish-items-worry.md b/.changeset/selfish-items-worry.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Allow fetching from the CMS the "In evidenza" section on the home page
diff --git a/apps/nextjs-website/src/_contents/appIo/tutorialLists.ts b/apps/nextjs-website/src/_contents/appIo/tutorialLists.ts
@@ -9,6 +9,10 @@ export const appIoTutorials: readonly Tutorial[] = [
     title: 'Quali sono i possibili accordi di adesione all’app IO',
     path: `${appIoTutorialListsPath.path}/quale-accordo-di-adesione-scegliere`,
     name: 'Quale accordo di adesione scegliere',
+    image: {
+      url: '/images/news.png',
+      alternativeText: 'Immagine: Come allegare documenti a un messaggio',
+    },
     showInOverview: true,
   },
   {
@@ -17,8 +21,9 @@ export const appIoTutorials: readonly Tutorial[] = [
     name: 'Come allegare documenti a un messaggio',
     image: {
       url: '/images/app-io-come-allegare-documenti.png',
-      alt: 'Immagine: Come allegare documenti a un messaggio',
+      alternativeText: 'Immagine: Come allegare documenti a un messaggio',
     },
+
     showInOverview: true,
   },
   {
@@ -27,7 +32,8 @@ export const appIoTutorials: readonly Tutorial[] = [
     name: 'Come sapere se un cittadino può ricevere messaggi da un servizio',
     image: {
       url: '/images/app-io-ricevere-messaggi.png',
-      alt: 'Immagine: Come sapere se un cittadino può ricevere messaggi da un servizio',
+      alternativeText:
+        'Immagine: Come sapere se un cittadino può ricevere messaggi da un servizio',
     },
     showInOverview: true,
   },
@@ -37,7 +43,8 @@ export const appIoTutorials: readonly Tutorial[] = [
     name: 'Come sapere se un cittadino può ricevere messaggi da un servizio',
     image: {
       url: '/images/app-io-come-inviare-avviso-pagamento.png',
-      alt: 'Immagine: Come spedire un avviso di pagamento in un messaggio',
+      alternativeText:
+        'Immagine: Come spedire un avviso di pagamento in un messaggio',
     },
     showInOverview: false,
   },

diff --git a/apps/nextjs-website/src/_contents/ioSign/tutorialLists.ts b/apps/nextjs-website/src/_contents/ioSign/tutorialLists.ts
@@ -10,7 +10,8 @@ export const ioSignTutorials: readonly Tutorial[] = [
     path: `${ioSignTutorialListsPath.path}/come-creare-e-preparare-il-documento-da-firmare-digitalmente-con-firma-con-io`,
     name: 'Come creare e preparare il documento da firmare digitalmente',
     image: {
-      alt: 'Immagine: Come creare e preparare il documento da firmare digitalmente',
+      alternativeText:
+        'Immagine: Come creare e preparare il documento da firmare digitalmente',
       url: '/images/io-sign-firmare-documento.png',
     },
     showInOverview: true,
@@ -20,7 +21,8 @@ export const ioSignTutorials: readonly Tutorial[] = [
     path: `${ioSignTutorialListsPath.path}/come-creare-il-dossier-per-la-richiesta-di-firma`,
     name: 'Come creare il Dossier per la richiesta di firma',
     image: {
-      alt: 'Immagine: Come creare il Dossier per la richiesta di firma',
+      alternativeText:
+        'Immagine: Come creare il Dossier per la richiesta di firma',
       url: '/images/io-sign-creare-dossier.png',
     },
     showInOverview: true,
@@ -30,7 +32,7 @@ export const ioSignTutorials: readonly Tutorial[] = [
     path: `${ioSignTutorialListsPath.path}/upload-dei-documenti`,
     name: 'Come effettuare l’upload dei documenti',
     image: {
-      alt: 'Immagine: Come effettuare l’upload dei documenti',
+      alternativeText: 'Immagine: Come effettuare l’upload dei documenti',
       url: '/images/io-sign-effettuare-upload-documento.png',
     },
     showInOverview: true,

diff --git a/apps/nextjs-website/src/_contents/pagoPa/tutorialLists.ts b/apps/nextjs-website/src/_contents/pagoPa/tutorialLists.ts
@@ -11,7 +11,8 @@ export const pagoPaTutorials: readonly Tutorial[] = [
     name: 'Come richiedere pagamenti che contengono marca da bollo digitale',
     image: {
       url: '/images/pago-pa-marca-bollo.png',
-      alt: 'Immagine: Come richiedere pagamenti che contengono marca da bollo digitale',
+      alternativeText:
+        'Immagine: Come richiedere pagamenti che contengono marca da bollo digitale',
     },
     showInOverview: true,
   },
@@ -21,7 +22,8 @@ export const pagoPaTutorials: readonly Tutorial[] = [
     name: 'Come avviare un esercizio come Ente Creditore su pagoPA',
     image: {
       url: '/images/pago-pa-creare-esercizio-ente-creditore.png',
-      alt: 'Immagine: Come avviare un esercizio come Ente Creditore su pagoPA',
+      alternativeText:
+        'Immagine: Come avviare un esercizio come Ente Creditore su pagoPA',
     },
     showInOverview: true,
   },
@@ -31,7 +33,8 @@ export const pagoPaTutorials: readonly Tutorial[] = [
     name: 'Come stampare un avviso di pagamento in formato PDF',
     image: {
       url: '/images/pago-pa-stampare-avviso-pagamento.png',
-      alt: 'Immagine: Come stampare un avviso di pagamento in formato PDF',
+      alternativeText:
+        'Immagine: Come stampare un avviso di pagamento in formato PDF',
     },
     showInOverview: true,
   },

diff --git a/apps/nextjs-website/src/_contents/send/tutorialLists.ts b/apps/nextjs-website/src/_contents/send/tutorialLists.ts
@@ -10,7 +10,7 @@ export const sendTutorials: readonly Tutorial[] = [
     path: `${sendTutorialListsPath.path}/come-inserire-una-notifica-via-curl`,
     name: 'Inserisci una notifica via curl',
     image: {
-      alt: 'Immagine: Inserisci una notifica via curl',
+      alternativeText: 'Immagine: Inserisci una notifica via curl',
       url: '/images/send-tutorial-1.png',
     },
     showInOverview: true,
@@ -20,7 +20,7 @@ export const sendTutorials: readonly Tutorial[] = [
     path: `${sendTutorialListsPath.path}/come-generare-il-tuo-api-client-per-le-api-di-send`,
     name: 'Genera il tuo client',
     image: {
-      alt: 'Immagine: Genera il tuo client',
+      alternativeText: 'Immagine: Genera il tuo client',
       url: '/images/send-tutorial-0.png',
     },
     showInOverview: true,
@@ -30,7 +30,7 @@ export const sendTutorials: readonly Tutorial[] = [
     path: `${sendTutorialListsPath.path}/configurare-laccesso-ad-interoperabilita-per-i-servizi-send`,
     name: 'Genera il tuo client',
     image: {
-      alt: 'Immagine: Genera il tuo client',
+      alternativeText: 'Immagine: Genera il tuo client',
       url: '/images/send-tutorial-2.png',
     },
     showInOverview: true,

diff --git a/apps/nextjs-website/src/_contents/translations.ts b/apps/nextjs-website/src/_contents/translations.ts
@@ -45,45 +45,63 @@ export const translations = {
     onThisPage: 'In questa pagina',
   },
   homepage: {
-    news: {
+    newsShowcase: {
       title: 'In evidenza',
-      list: [
+      items: [
         {
+          comingSoon: false,
           title:
             'Usa il validatore di SEND per fare una verifica sull’integrazione',
-          href: {
-            label: 'Vai al validatore',
-            link: `${sendGuideListsPath.path}/validatore/v1.0`,
-            title: 'Vai al validatore',
+          link: {
+            url: `${sendGuideListsPath.path}/validatore/v1.0`,
+            text: 'Vai al validatore',
           },
           image: {
+            name: 'homepage-validatore.png',
+            alternativeText:
+              'Immagine: Usa il validatore di SEND per fare una verifica sull’integrazione',
+            width: 1156,
+            height: 580,
+            ext: '.svg',
+            mime: 'image/svg+xml',
             url: '/images/homepage-validatore.png',
-            alt: 'Immagine: Usa il validatore di SEND per fare una verifica sull’integrazione',
           },
         },
         {
+          comingSoon: false,
           title: 'Scopri i nuovi tutorial di Firma con IO',
-          href: {
-            label: 'Vai ai tutorial',
-            link: `${ioSignTutorialListsPath.path}`,
-            title: 'Vai ai tutorial',
+          link: {
+            url: `${ioSignTutorialListsPath.path}`,
+            text: 'Vai ai tutorial',
           },
           image: {
+            name: 'homepage-io-sign.png',
+            alternativeText:
+              'Immagine: Scopri i nuovi tutorial di Firma con IO',
+            width: 1156,
+            height: 580,
+            ext: '.svg',
+            mime: 'image/svg+xml',
             url: '/images/homepage-io-sign.png',
-            alt: 'Immagine: Scopri i nuovi tutorial di Firma con IO',
           },
         },
         {
+          comingSoon: false,
           title:
             'Scopri la Quick Start di piattaforma pagoPA: l’integrazione in pochi semplici step',
-          href: {
-            label: 'Vai alla guida',
-            link: `${pagoPaQuickStartGuidePath.path}`,
-            title: 'Vai alla guida',
+          link: {
+            url: `${pagoPaQuickStartGuidePath.path}`,
+            text: 'Vai alla guida',
           },
           image: {
+            name: 'homepage-pago-pa.png',
+            alternativeText:
+              'Immagine: Scopri la Quick Start di piattaforma pagoPA: l’integrazione in pochi semplici step',
+            width: 1156,
+            height: 580,
+            ext: '.svg',
+            mime: 'image/svg+xml',
             url: '/images/homepage-pago-pa.png',
-            alt: 'Immagine: Scopri la Quick Start di piattaforma pagoPA: l’integrazione in pochi semplici step',
           },
         },
       ],

diff --git a/apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx b/apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx
@@ -75,17 +75,15 @@ const TutorialsPage = async ({ params }: ProductParams) => {
                 : shared.comingSoon,
               title: tutorial.title,
               date: {
-                date: tutorial.dateString
-                  ? new Date(tutorial.dateString)
-                  : undefined,
+                date: tutorial.publishedAt,
               },
               href: {
                 label: shared.readTutorial,
                 link: tutorial.path,
                 title: shared.readTutorial,
               },
               img: {
-                alt: tutorial.image?.alt || '',
+                alt: tutorial.image?.alternativeText || '',
                 src: tutorial.image?.url || '/images/news.png',
               },
             }))}

diff --git a/apps/nextjs-website/src/app/page.tsx b/apps/nextjs-website/src/app/page.tsx
@@ -2,7 +2,7 @@ import { translations } from '@/_contents/translations';
 import SiteLabel from '@/components/atoms/SiteLabel/SiteLabel';
 import HeroSwiper from '@/components/molecules/HeroSwiper/HeroSwiper';
 import RelatedLinks from '@/components/atoms/RelatedLinks/RelatedLinks';
-import News from '@/components/organisms/News/News';
+import NewsShowcase from '@/components/organisms/NewsShowcase/NewsShowcase';
 import ProductsShowcase from '@/components/organisms/ProductsShowcase/ProductsShowcase';
 import { Metadata } from 'next';
 import { makeMetadata } from '@/helpers/metadata.helpers';
@@ -49,10 +49,10 @@ const Home = async () => {
             ) : undefined,
         }))}
       />
-      <News
+      <NewsShowcase
         marginTop={5}
-        title={homepage.news.title}
-        cards={[...homepage.news.cards]}
+        title={homepage.newsShowcase.title}
+        items={[...homepage.newsShowcase.items]}
       />
       <ProductsShowcase
         title={homepage.productsShowcase.title}

diff --git a/apps/nextjs-website/src/components/atoms/LinkButton/LinkButton.tsx b/apps/nextjs-website/src/components/atoms/LinkButton/LinkButton.tsx
@@ -40,7 +40,6 @@ const LinkButton = ({
 
   return (
     <Stack
-      mt={2}
       direction='row'
       alignItems='center'
       color='primary.main'

diff --git a/...te/src/components/organisms/News/News.tsx → ...s/organisms/NewsShowcase/NewsShowcase.tsx b/...te/src/components/organisms/News/News.tsx → ...s/organisms/NewsShowcase/NewsShowcase.tsx
@@ -5,48 +5,53 @@ import { Box } from '@mui/material';
 import Newsroom from '@/editorialComponents/Newsroom/Newsroom';
 import { useTranslations } from 'next-intl';
 
-type NewsProps = {
+type NewsShowcaseProps = {
   title: string;
   subtitle?: string;
   cta?: {
     label: string;
     href: string;
   };
   marginTop?: number;
-  cards: {
+  items: {
     comingSoon?: boolean;
     title: string;
-    dateString?: string;
-    image?: {
+    publishedAt?: Date;
+    image: {
       url: string;
-      alt: string;
-    };
-    href: {
-      label: string;
-      link: string;
-      title: string;
+      alternativeText: string | null;
+    } | null;
+    link: {
+      url: string;
+      text: string;
     };
   }[];
 };
 
-const News = ({ title, subtitle, cta, marginTop, cards }: NewsProps) => {
+const NewsShowcase = ({
+  title,
+  subtitle,
+  cta,
+  marginTop,
+  items,
+}: NewsShowcaseProps) => {
   const t = useTranslations('shared');
   const coomingSoonLabel = t('comingSoon');
   return (
     <Box marginTop={marginTop}>
       <SectionTitle title={title} subtitle={subtitle} cta={cta} />
       <Box mt={2}>
         <Newsroom
-          items={cards.map((card) => ({
-            comingSoonLabel: !card.comingSoon ? undefined : coomingSoonLabel,
-            title: card.title,
+          items={items.map((item) => ({
+            comingSoonLabel: !item.comingSoon ? undefined : coomingSoonLabel,
+            title: item.title,
             date: {
-              date: card.dateString ? new Date(card.dateString) : undefined,
+              date: item.publishedAt,
             },
-            href: card.href,
+            href: { link: item.link.url, label: item.link.text },
             img: {
-              alt: card.image?.alt || '',
-              src: card.image?.url || '/images/news.png',
+              alt: (item.image && item.image.alternativeText) || '',
+              src: (item.image && item.image.url) || '/images/news.png',
             },
           }))}
         />
@@ -55,4 +60,4 @@ const News = ({ title, subtitle, cta, marginTop, cards }: NewsProps) => {
   );
 };
 
-export default News;
+export default NewsShowcase;
diff --git a/apps/nextjs-website/src/components/organisms/TutorialsOverview/TutorialsOverview.tsx b/apps/nextjs-website/src/components/organisms/TutorialsOverview/TutorialsOverview.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Tutorial } from '@/lib/types/tutorialData';
 import { Path } from '@/lib/types/path';
-import News from '@/components/organisms/News/News';
+import NewsShowcase from '@/components/organisms/NewsShowcase/NewsShowcase';
 import { useTranslations } from 'next-intl';
 
 type TutorialsOverviewProps = {
@@ -24,20 +24,19 @@ const TutorialsOverview = ({
   const t = useTranslations('shared');
   const label = t('readTutorial');
   return (
-    <News
+    <NewsShowcase
       marginTop={8}
       title={title}
       subtitle={subtitle}
       cta={{
         label: ctaLabel,
         href: tutorialPath.path,
       }}
-      cards={tutorials.map((tutorial) => ({
+      items={tutorials.map((tutorial) => ({
         ...tutorial,
-        href: {
-          label,
-          link: tutorial.path,
-          title: label,
+        link: {
+          url: tutorial.path,
+          text: label,
         },
       }))}
     />