[DEV-1433]: display hero from Strapi (#672)

* feat(DEV-1433): display hero from Strapi * feat(DEV-1433): update test * chore: add changeset * feat(DEV-1433): update test * feat(DEV-1433): update code * feat(DEV-1433): update codecs names * feat(DEV-1433): fix codec bugs * feat(DEV-1433): add test * feat(DEV-1433): fix tests * chore: remove console.log Co-authored-by: AF <[email protected]> * feat(DEV-1433): simplify logic Co-authored-by: AF <[email protected]> * [DEV-1342] Remove email in url (#663) * Remove email in url * eslint * changeset * pr comment --------- Co-authored-by: marcobottaro <[email protected]> * Do not fetch from cache when executing deploy website workflow (#699) * Update CHANGELOG and prepare next release (#682) * Fix pagoPA guides and manuals version (#700) * Revert "Fix pagoPA guides and manuals version (#700)" (#701) This reverts commit 17ef179. * [DPC-160] Fix pagoPA guides and manuals version (#702) * Update CHANGELOG and prepare next release (#703) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: fix typo * Add NullToUndefined custom type * feat(DEV-1433): simplify logic Co-authored-by: AF <[email protected]> * feat(DEV-1433): add explanatory comment --------- Co-authored-by: AF <[email protected]> Co-authored-by: marcobottaro <[email protected]> Co-authored-by: tommaso1 <[email protected]> Co-authored-by: Marco Comi <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Marco Ponchia <[email protected]> Co-authored-by: Marco Bottaro <[email protected]>
pagopa · Mar 11, 2024 · 1730ae3 · 1730ae3
1 parent 6d8f876
commit 1730ae3
Show file tree

Hide file tree

Showing 9 changed files with 296 additions and 124 deletions.
diff --git a/.changeset/old-rocks-cover.md b/.changeset/old-rocks-cover.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Allow fetching from the CMS the hero section of the homepage
diff --git a/apps/nextjs-website/src/_contents/translations.ts b/apps/nextjs-website/src/_contents/translations.ts
@@ -117,16 +117,20 @@ export const translations = {
       },
       {
         title: 'Invia comunicazioni a valore legale con piattaforma notifiche',
-        cta: {
-          label: 'Vai a SEND',
-          href: '/send/overview',
+        callToAction: {
+          link: {
+            text: 'Vai a SEND',
+            href: '/send/overview',
+          },
         },
       },
       {
         title: 'Richiedi una firma su documenti e contratti',
-        cta: {
-          label: 'Vai a Firma con IO',
-          href: '/firma-con-io/overview',
+        callToAction: {
+          link: {
+            text: 'Vai a Firma con IO',
+            href: '/firma-con-io/overview',
+          },
         },
       },
     ],

diff --git a/apps/nextjs-website/src/app/page.tsx b/apps/nextjs-website/src/app/page.tsx
@@ -41,7 +41,7 @@ const Home = async () => {
       <NotSsrWebinarHeaderBanner webinars={webinars} />
 
       <HeroSwiper
-        cards={homepage.hero.cards.map((itemProp, index) => ({
+        cards={homepage.hero.map((itemProp, index) => ({
           ...itemProp,
           child:
             index === 0 ? (

diff --git a/apps/nextjs-website/src/components/atoms/CtaSlide/CtaSlide.tsx b/apps/nextjs-website/src/components/atoms/CtaSlide/CtaSlide.tsx
@@ -7,25 +7,44 @@ import React, { ReactNode } from 'react';
 
 export type CtaSlideProps = {
   readonly title: string;
-  readonly color?: string;
-  readonly cta?: {
-    readonly label: string;
-    readonly href: string;
+  readonly titleColor?: 'contrastText' | 'main' | 'light' | 'dark';
+  readonly callToAction?: {
     readonly variant?: 'text' | 'contained' | 'outlined';
+    readonly link: {
+      readonly href: string;
+      readonly text: string;
+      readonly target?: '_self' | '_blank' | '_parent' | '_top';
+    };
   };
   readonly child?: ReactNode;
-  readonly backgroundImage?: string;
+  readonly backgroundImage?: {
+    readonly name: string;
+    readonly width: number;
+    readonly height: number;
+    readonly ext: string;
+    readonly mime: string;
+    readonly url: string;
+  };
 };
 
 const CtaSlide = ({
   title,
-  color,
-  cta,
+  titleColor: color,
+  callToAction: cta,
   child,
-  backgroundImage = '/images/hero-swiper.png',
+  backgroundImage = {
+    name: 'hero-swiper.png',
+    width: 1920,
+    height: 1080,
+    ext: '.png',
+    mime: 'image/png',
+    url: '/images/hero-swiper.png',
+  },
 }: CtaSlideProps) => {
   const { palette } = useTheme();
-  const textColor = color || palette.primary.contrastText;
+  const textColor = color
+    ? palette.primary[color]
+    : palette.primary.contrastText;
 
   return (
     <Stack
@@ -55,24 +74,27 @@ const CtaSlide = ({
           {cta && (
             <ButtonNaked
               component={Link}
-              href={cta.href}
+              href={cta.link.href}
               color={'negative'}
               variant={cta.variant || 'contained'}
               sx={{ mb: 6 }}
+              target={cta.link.target ?? '_self'}
             >
-              {cta.label}
+              {cta.link.text}
             </ButtonNaked>
           )}
         </Box>
       </Stack>
-      <Box zIndex={0} position={'absolute'} height={'100%'} width={'100%'}>
-        <Image
-          style={{ objectFit: 'cover' }}
-          src={backgroundImage}
-          alt={title}
-          fill={true}
-        />
-      </Box>
+      {backgroundImage && (
+        <Box zIndex={0} position={'absolute'} height={'100%'} width={'100%'}>
+          <Image
+            style={{ objectFit: 'cover' }}
+            src={backgroundImage.url}
+            alt={title}
+            fill={true}
+          />
+        </Box>
+      )}
     </Stack>
   );
 };

diff --git a/apps/nextjs-website/src/components/molecules/HeroSwiper/HeroSwiper.tsx b/apps/nextjs-website/src/components/molecules/HeroSwiper/HeroSwiper.tsx
@@ -35,12 +35,17 @@ const HeroSwiper = ({ cards }: HeroSwiperProps) => {
       loop={true}
       modules={[Navigation, Pagination]}
     >
-      <div onClick={() => previousSlide()}>
-        <NavigationArrow direction={'left'} hidden={false} />
-      </div>
-      <div onClick={() => nextSlide()}>
-        <NavigationArrow direction={'right'} hidden={false} />
-      </div>
+      {cards.length > 1 && (
+        <>
+          <div onClick={() => previousSlide()}>
+            <NavigationArrow direction={'left'} hidden={false} />
+          </div>
+          <div onClick={() => nextSlide()}>
+            <NavigationArrow direction={'right'} hidden={false} />
+          </div>
+        </>
+      )}
+
       {cards.map((props, index) => (
         <SwiperSlide key={index}>
           <CtaSlide {...props} />

diff --git a/apps/nextjs-website/src/lib/cmsApi.ts b/apps/nextjs-website/src/lib/cmsApi.ts
@@ -21,12 +21,12 @@ export const getHomepageProps = async () => {
     config: { FETCH_FROM_STRAPI: fetchFromStrapi },
   } = buildEnv;
 
-  const { header: staticHeader, homepage: staticHomepage } = translations;
+  const { homepage: staticHomepage } = translations;
 
   if (fetchFromStrapi) {
     const strapiHomepage = await fetchHomepage(buildEnv);
-    return makeHomepageProps(strapiHomepage, staticHeader, staticHomepage);
+    return makeHomepageProps(strapiHomepage, staticHomepage);
   } else {
-    return makeHomepagePropsFromStatic(staticHeader, staticHomepage);
+    return makeHomepagePropsFromStatic(staticHomepage);
   }
 };
diff --git a/apps/nextjs-website/src/lib/homepage.ts b/apps/nextjs-website/src/lib/homepage.ts
@@ -3,11 +3,7 @@ import { StrapiHomepage } from '@/lib/strapi/homepage';
 import { translations } from '@/_contents/translations';
 
 export type HomepageProps = {
-  readonly hero: {
-    readonly siteTitle: string;
-    readonly boldTitle: string;
-    readonly cards: readonly CtaSlideProps[];
-  };
+  readonly hero: readonly CtaSlideProps[];
   readonly newsShowcase: {
     readonly title: string;
     readonly items: readonly {
@@ -55,17 +51,19 @@ export type HomepageProps = {
   };
 };
 
-type StaticHeader = typeof translations.header;
 type StaticHomepage = typeof translations.homepage;
 
 export const makeHomepageProps = (
   strapiHomepage: StrapiHomepage,
-  staticHeader: StaticHeader,
   staticHomepage: StaticHomepage
 ): HomepageProps => ({
-  ...makeHomepagePropsFromStatic(staticHeader, staticHomepage),
+  ...makeHomepagePropsFromStatic(staticHomepage),
   comingsoonDocumentation:
     strapiHomepage.data.attributes.comingsoonDocumentation,
+  hero: strapiHomepage.data.attributes.heroSlider.map((slide) => ({
+    ...slide,
+    backgroundImage: slide.backgroundImage?.data?.attributes,
+  })),
   ...(strapiHomepage.data.attributes.newsShowcase && {
     newsShowcase: {
       title: strapiHomepage.data.attributes.newsShowcase.title,
@@ -99,14 +97,9 @@ export const makeHomepageProps = (
 });
 
 export const makeHomepagePropsFromStatic = (
-  staticHeader: StaticHeader,
   staticHomepage: StaticHomepage
 ): HomepageProps => ({
-  hero: {
-    siteTitle: staticHeader.title,
-    boldTitle: staticHeader.boldTitle,
-    cards: staticHomepage.heroItems,
-  },
+  hero: staticHomepage.heroItems,
   newsShowcase: staticHomepage.newsShowcase,
   productsShowcase: staticHomepage.productsShowcase,
   comingsoonDocumentation: staticHomepage.comingsoonDocumentation,