[DEV-1389] Migrate to cms the "Discover our ecosystem" section in hom…

…e page (#632)
pagopa · Feb 19, 2024 · 1e4b96e · 1e4b96e
1 parent 945394d
commit 1e4b96e
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 40 deletions.
diff --git a/.changeset/nine-wombats-pretend.md b/.changeset/nine-wombats-pretend.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Allow fetching from the CMS the "Discover our ecosystem" section on the home page
diff --git a/.changeset/slimy-turkeys-flash.md b/.changeset/slimy-turkeys-flash.md
@@ -0,0 +1,5 @@
+---
+"strapi-cms": minor
+---
+
+Set logo as required in product schema
diff --git a/apps/nextjs-website/src/__tests__/helpers/productHeader.helpers.test.ts b/apps/nextjs-website/src/__tests__/helpers/productHeader.helpers.test.ts
@@ -1,10 +1,17 @@
-import { productToMenuItems } from '../../helpers/productHeader.helper';
+import { productToMenuItems } from '@/helpers/productHeader.helper';
 import { Product } from '@/lib/types/product';
 
 const product: Product = {
   name: 'test',
   description: 'test',
-  svgPath: 'test',
+  logo: {
+    name: 'test',
+    width: 60,
+    height: 61,
+    ext: '.svg',
+    mime: 'image/svg+xml',
+    url: 'test',
+  },
   path: '/path',
   slug: 'path',
   subpaths: {

diff --git a/apps/nextjs-website/src/_contents/appIo/appIo.ts b/apps/nextjs-website/src/_contents/appIo/appIo.ts
@@ -4,16 +4,21 @@ import { appIOGuideListsPath } from '@/_contents/appIo/guideListsPath';
 import { appIoOverviewPath } from '@/_contents/appIo/overviewPath';
 import { appIoQuickStartGuidePath } from '@/_contents/appIo/quickStartGuidePath';
 import { appIoTutorialListsPath } from '@/_contents/appIo/tutorialListsPath';
-import { baseUrl } from '@/config';
 
 export const appIo: Product = {
   name: 'IO, l’app dei servizi pubblici',
   description:
     'Raccogli tutti i servizi digitali del tuo ente in un’unica piattaforma e interagisci in modo semplice e sicuro con i cittadini.',
-  svgPath: '/icons/appIo.svg',
-  pngUrl: `${baseUrl}/icons/appIo.png`,
-  path: '/app-io',
   slug: 'app-io',
+  path: '/app-io',
+  logo: {
+    name: '',
+    width: 60,
+    height: 61,
+    ext: '.svg',
+    mime: 'image/svg+xml',
+    url: '/icons/appIo.svg',
+  },
   subpaths: {
     overview: appIoOverviewPath,
     quickStart: appIoQuickStartGuidePath,

diff --git a/apps/nextjs-website/src/_contents/ioSign/ioSign.ts b/apps/nextjs-website/src/_contents/ioSign/ioSign.ts
@@ -4,16 +4,21 @@ import { ioSignOverviewPath } from '@/_contents/ioSign/overviewPath';
 import { ioSignTutorialListsPath } from '@/_contents/ioSign/tutorialListsPath';
 import { Product } from '@/lib/types/product';
 import { ioSignQuickStartGuidePath } from './quickStartGuidePath';
-import { baseUrl } from '@/config';
 
 export const ioSign: Product = {
   name: 'Firma con IO',
-  slug: 'firma-con-io',
-  path: '/firma-con-io',
   description:
     'Richiedi la Firma Elettronica Certificata su contratti e documenti. Le cittadine e i cittadini possono firmare direttamente sull’app IO.',
-  svgPath: '/icons/appIo.svg',
-  pngUrl: `${baseUrl}/icons/appIo.png`,
+  slug: 'firma-con-io',
+  path: '/firma-con-io',
+  logo: {
+    name: '',
+    width: 60,
+    height: 61,
+    ext: '.svg',
+    mime: 'image/svg+xml',
+    url: '/icons/appIo.svg',
+  },
   subpaths: {
     overview: ioSignOverviewPath,
     quickStart: ioSignQuickStartGuidePath,

diff --git a/apps/nextjs-website/src/_contents/pagoPa/pagoPa.ts b/apps/nextjs-website/src/_contents/pagoPa/pagoPa.ts
@@ -4,16 +4,22 @@ import { pagoPaOverviewPath } from '@/_contents/pagoPa/overviewPath';
 import { pagoPaTutorialListsPath } from '@/_contents/pagoPa/tutorialListsPath';
 import { pagoPaQuickStartGuidePath } from '@/_contents/pagoPa/quickStartGuidePath';
 import { Product } from '@/lib/types/product';
-import { baseUrl } from '@/config';
 
 export const pagoPa: Product = {
   name: 'Piattaforma pagoPA',
-  path: '/pago-pa',
-  slug: 'pago-pa',
   description:
     'Gestisci gli incassi in modo centralizzato e con immediata riconciliazione delle posizioni debitorie.',
-  svgPath: '/icons/pagoPa.svg',
-  pngUrl: `${baseUrl}/icons/pagoPa.png`,
+  path: '/pago-pa',
+  slug: 'pago-pa',
+  logo: {
+    name: '',
+    width: 60,
+    height: 61,
+    ext: '.svg',
+    mime: 'image/svg+xml',
+    url: '/icons/pagoPa.svg',
+  },
+
   subpaths: {
     overview: pagoPaOverviewPath,
     quickStart: pagoPaQuickStartGuidePath,

diff --git a/apps/nextjs-website/src/_contents/send/send.ts b/apps/nextjs-website/src/_contents/send/send.ts
@@ -4,16 +4,21 @@ import { sendGuideListsPath } from '@/_contents/send/guideListsPath';
 import { sendOverviewPath } from '@/_contents/send/overviewPath';
 import { sendTutorialListsPath } from '@/_contents/send/tutorialListsPath';
 import { sendQuickStartGuidePath } from '@/_contents/send/quickStartGuidePath';
-import { baseUrl } from '@/config';
 
 export const send: Product = {
   name: 'SEND - Servizio Notifiche Digitali',
-  path: '/send',
-  slug: 'send',
   description:
     'Invia comunicazioni a valore legale con un processo di notificazione gestito interamente dalla piattaforma.',
-  svgPath: '/icons/send.svg',
-  pngUrl: `${baseUrl}/icons/send.png`,
+  slug: 'send',
+  path: '/send',
+  logo: {
+    name: '',
+    width: 60,
+    height: 61,
+    ext: '.svg',
+    mime: 'image/svg+xml',
+    url: '/icons/send.svg',
+  },
   subpaths: {
     overview: sendOverviewPath,
     quickStart: sendQuickStartGuidePath,

diff --git a/apps/nextjs-website/src/_contents/translations.ts b/apps/nextjs-website/src/_contents/translations.ts
@@ -2,6 +2,10 @@
 import { ioSignTutorialListsPath } from '@/_contents/ioSign/tutorialListsPath';
 import { sendGuideListsPath } from '@/_contents/send/guideListsPath';
 import { pagoPaQuickStartGuidePath } from '@/_contents/pagoPa/quickStartGuidePath';
+import { send } from '@/_contents/send/send';
+import { appIo } from '@/_contents/appIo/appIo';
+import { ioSign } from '@/_contents/ioSign/ioSign';
+import { pagoPa } from '@/_contents/pagoPa/pagoPa';
 
 export const translations = {
   header: {
@@ -85,7 +89,10 @@ export const translations = {
       ],
     },
     webinarBannerButtonContent: 'Scopri',
-    productsShowcaseTitle: 'Scopri il nostro ecosistema',
+    productsShowcase: {
+      title: 'Scopri il nostro ecosistema',
+      products: [appIo, ioSign, pagoPa, send],
+    },
     heroItems: [
       {
         title: 'Tutto ciò che serve per integrarsi con i prodotti PagoPA',

diff --git a/apps/nextjs-website/src/app/[productSlug]/overview/page.tsx b/apps/nextjs-website/src/app/[productSlug]/overview/page.tsx
@@ -89,7 +89,7 @@ export async function generateMetadata(
     title: product.name,
     description: product.description,
     url: path,
-    image: product.pngUrl,
+    image: product.logo.url,
   });
 }
 

diff --git a/apps/nextjs-website/src/app/[productSlug]/quick-start/page.tsx b/apps/nextjs-website/src/app/[productSlug]/quick-start/page.tsx
@@ -40,7 +40,7 @@ export async function generateMetadata(
     title: abstract?.title,
     description: abstract?.description,
     url: path,
-    image: product.pngUrl,
+    image: product.logo.url,
   });
 }
 

diff --git a/apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx b/apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx
@@ -42,7 +42,7 @@ export async function generateMetadata(
     title: product.name,
     description: abstract?.description,
     url: path,
-    image: product.pngUrl,
+    image: product.logo.url,
   });
 }
 

diff --git a/apps/nextjs-website/src/app/page.tsx b/apps/nextjs-website/src/app/page.tsx
@@ -6,7 +6,7 @@ import News from '@/components/organisms/News/News';
 import ProductsShowcase from '@/components/organisms/ProductsShowcase/ProductsShowcase';
 import { Metadata } from 'next';
 import { makeMetadata } from '@/helpers/metadata.helpers';
-import { getProducts, getVisibleInHomeWebinars } from '@/lib/api';
+import { getVisibleInHomeWebinars } from '@/lib/api';
 import dynamic from 'next/dynamic';
 import { baseUrl } from '@/config';
 import { getHomepageProps } from '@/lib/cmsApi';
@@ -31,7 +31,6 @@ const NotSsrWebinarsSection = dynamic(
 );
 
 const Home = async () => {
-  const products = await getProducts();
   const webinars = await getVisibleInHomeWebinars();
   const { header } = translations;
 
@@ -56,12 +55,12 @@ const Home = async () => {
         cards={[...homepage.news.cards]}
       />
       <ProductsShowcase
-        title={homepage.productsShowcaseTitle}
-        cards={products.map((product) => ({
+        title={homepage.productsShowcase.title}
+        cards={homepage.productsShowcase.products.map((product) => ({
           title: product.name,
           text: product.description,
-          href: product.subpaths.overview.path,
-          svgPath: product.svgPath,
+          href: `/${product.slug}/overview`,
+          logoUrl: product.logo.url,
         }))}
       />
       <NotSsrWebinarsSection webinars={[...webinars]} />

diff --git a/apps/nextjs-website/src/components/molecules/CardsGrid/CardsGrid.tsx b/apps/nextjs-website/src/components/molecules/CardsGrid/CardsGrid.tsx
@@ -33,7 +33,7 @@ const CardsGrid = ({
 
   return (
     <EContainer>
-      <Box pb={4}>
+      <Box pb={4} width={'100%'}>
         <Grid container spacing={3}>
           {cards.map(({ title, text, href, icon, comingSoon }, index) => {
             return (

diff --git a/apps/nextjs-website/src/components/organisms/ProductsShowcase/ProductsShowcase.tsx b/apps/nextjs-website/src/components/organisms/ProductsShowcase/ProductsShowcase.tsx
@@ -10,7 +10,7 @@ type ProductsShowcaseProps = {
     title: string;
     text: string;
     href: string;
-    svgPath: string;
+    logoUrl: string;
   }[];
 };
 
@@ -26,7 +26,7 @@ const ProductsShowcase = ({ title, cards }: ProductsShowcaseProps) => {
           title: card.title,
           text: card.text,
           href: card.href,
-          icon: card.svgPath,
+          icon: card.logoUrl,
         }))}
       />
     </Box>

diff --git a/apps/nextjs-website/src/lib/homepage.ts b/apps/nextjs-website/src/lib/homepage.ts
@@ -25,7 +25,22 @@ export type HomepageProps = {
       };
     }[];
   };
-  readonly productsShowcaseTitle: string;
+  readonly productsShowcase: {
+    readonly title: string;
+    readonly products: readonly {
+      readonly name: string;
+      readonly description: string;
+      readonly slug: string;
+      readonly logo: {
+        readonly name: string;
+        readonly width: number;
+        readonly height: number;
+        readonly ext: string;
+        readonly mime: string;
+        readonly url: string;
+      };
+    }[];
+  };
   readonly comingsoonDocumentation: {
     readonly title: string;
     readonly links: readonly {
@@ -46,6 +61,17 @@ export const makeHomepageProps = (
   ...makeHomepagePropsFromStatic(staticHeader, staticHomepage),
   comingsoonDocumentation:
     strapiHomepage.data.attributes.comingsoonDocumentation,
+  productsShowcase: {
+    title: strapiHomepage.data.attributes.productsShowcase.title,
+    products: strapiHomepage.data.attributes.productsShowcase.products.data.map(
+      (product) => ({
+        name: product.attributes.name,
+        description: product.attributes.description,
+        slug: product.attributes.slug,
+        logo: product.attributes.logo.data.attributes,
+      })
+    ),
+  },
 });
 
 export const makeHomepagePropsFromStatic = (
@@ -61,6 +87,6 @@ export const makeHomepagePropsFromStatic = (
     title: staticHomepage.news.title,
     cards: staticHomepage.news.list,
   },
-  productsShowcaseTitle: staticHomepage.productsShowcaseTitle,
+  productsShowcase: staticHomepage.productsShowcase,
   comingsoonDocumentation: staticHomepage.comingsoonDocumentation,
 });
diff --git a/apps/nextjs-website/src/lib/strapi/__tests__/homepage.test.ts b/apps/nextjs-website/src/lib/strapi/__tests__/homepage.test.ts
@@ -44,6 +44,49 @@ const makeStrapiResponseJson = () => ({
           },
         ],
       },
+      productsShowcase: {
+        id: 1,
+        title: 'aText',
+        products: {
+          data: [
+            {
+              id: 1,
+              attributes: {
+                name: 'aText',
+                description: 'aText',
+                slug: 'a-slug',
+                createdAt: '2024-02-09T13:32:16.646Z',
+                updatedAt: '2024-02-09T13:32:25.171Z',
+                publishedAt: '2024-02-09T13:32:25.170Z',
+                locale: 'it',
+                logo: {
+                  data: {
+                    id: 2,
+                    attributes: {
+                      name: 'aFileName.svg',
+                      alternativeText: null,
+                      caption: null,
+                      width: 60,
+                      height: 61,
+                      formats: null,
+                      hash: 'a_file_name_714c6d0fd3',
+                      ext: '.svg',
+                      mime: 'image/svg+xml',
+                      size: 1.9,
+                      url: '/uploads/a_file_name_714c6d0fd3.svg',
+                      previewUrl: null,
+                      provider: 'local',
+                      provider_metadata: null,
+                      createdAt: '2024-02-07T17:29:12.923Z',
+                      updatedAt: '2024-02-07T17:29:12.923Z',
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
     },
   },
   meta: {},