[B2BP-1059] [B2BP-1060] Add Press Releases (#509)

* Add Press Releases * Make PressRelease body required * Update obsolete comments --------- Co-authored-by: Simone Salsi <[email protected]>
pagopa · Nov 29, 2024 · eece8ca · eece8ca
1 parent b27b5de
commit eece8ca
Show file tree

Hide file tree

Showing 27 changed files with 806 additions and 37 deletions.
diff --git a/.changeset/mighty-feet-explain.md b/.changeset/mighty-feet-explain.md
@@ -0,0 +1,5 @@
+---
+"strapi-cms": minor
+---
+
+Add PressRelease CollectionType and Section
diff --git a/.changeset/red-nails-joke.md b/.changeset/red-nails-joke.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Add PressRelease component and fetch related Strapi CollectionType as pages
diff --git a/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx b/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx
@@ -50,6 +50,11 @@ const PreFooter = (props: PreFooterProps) => {
     excludeSlugs,
   } = props;
   const pathname = usePathname();
+  // Don't show PreFooter for any press release
+  if (pathname.includes('press-releases')) {
+    return null;
+  }
+
   // Compare excluded slugs with current page slug (removing initial '/')
   if (excludeSlugs && excludeSlugs.includes(pathname.slice(1))) {
     return null;

diff --git a/apps/nextjs-website/react-components/components/PressRelease/PressRelease.tsx b/apps/nextjs-website/react-components/components/PressRelease/PressRelease.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Box, Typography, Container, useTheme } from '@mui/material';
+import {
+  TextColor,
+  BackgroundColor,
+  ExtraTextColor,
+} from '../common/Common.helpers';
+import { PressReleaseProps } from '@react-components/types';
+
+const PressRelease = (props: PressReleaseProps) => {
+  const { date, title, subtitle, body, sectionID } = props;
+  const textColor = TextColor('light');
+  const eyeletColor = ExtraTextColor('light');
+  const backgroundColor = BackgroundColor('light');
+  const { palette } = useTheme();
+
+  return (
+    <Box
+      component="section"
+      {...(sectionID && { id: sectionID })}
+      sx={{
+        width: '100%',
+        bgcolor: backgroundColor,
+        color: textColor,
+        py: 10,
+        px: 2,
+      }}
+    >
+      <Container
+        sx={{
+          width: { xs: '100%', md: '60%' },
+          mx: 'auto',
+          ml: { xs: 'auto', md: 16 },
+          mr: { xs: 'auto' },
+        }}
+      >
+        <Typography
+          variant="overline"
+          component="div"
+          sx={{
+            color: eyeletColor,
+            fontSize: { xs: '16px', md: '16px' },
+            fontWeight: 400,
+          }}
+        >
+          {date}
+        </Typography>
+        <Typography
+          variant="h4"
+          component="h2"
+          sx={{ fontSize: { xs: '32px', md: '38px' }, color: textColor }}
+        >
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography
+            variant="h6"
+            component="h3"
+            sx={{
+              fontSize: { xs: '22px', md: '24px' },
+              mt: 2,
+              color: textColor,
+            }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+        <Typography
+          component="div"
+          variant="body1"
+          sx={{
+            fontSize: { xs: '14px', md: '16px' },
+            mt: 1,
+            color: textColor,
+            '& a': {
+              color: palette.primary.main,
+              textDecoration: 'underline',
+              '&:hover': {
+                color: palette.primary.main,
+                textDecoration: 'underline',
+              },
+            },
+          }}
+        >
+          {body}
+        </Typography>
+      </Container>
+    </Box>
+  );
+};
+
+export default PressRelease;
diff --git a/apps/nextjs-website/react-components/components/index.ts b/apps/nextjs-website/react-components/components/index.ts
@@ -24,6 +24,7 @@ import RowText from './RowText/RowText';
 import TextSection from './TextSection/TextSection';
 import PageSwitch from './Page-Switch/Page-Switch';
 import FramedVideo from './FramedVideo/FramedVideo';
+import PressRelease from './PressRelease/PressRelease';
 
 export {
   Hero,
@@ -52,4 +53,5 @@ export {
   TextSection,
   PageSwitch,
   FramedVideo,
+  PressRelease,
 };
diff --git a/apps/nextjs-website/react-components/types/PressRelease/PressRelease.types.ts b/apps/nextjs-website/react-components/types/PressRelease/PressRelease.types.ts
@@ -0,0 +1,7 @@
+export interface PressReleaseProps {
+  title: string;
+  subtitle?: string;
+  body: JSX.Element;
+  sectionID: string | null;
+  date: string;
+}
diff --git a/apps/nextjs-website/react-components/types/index.ts b/apps/nextjs-website/react-components/types/index.ts
@@ -24,6 +24,7 @@ import { RowTextProps } from './RowText/RowText.types';
 import { TextSectionProps } from './TextSection/TextSection.types';
 import { PageSwitchProps } from './Page-Switch/Page-Switch.types';
 import { FramedVideoProps } from './FramedVideo/FramedVideo.types';
+import { PressReleaseProps } from './PressRelease/PressRelease.types';
 
 export type {
   HeroProps,
@@ -52,4 +53,5 @@ export type {
   TextSectionProps,
   PageSwitchProps,
   FramedVideoProps,
+  PressReleaseProps,
 };
diff --git a/apps/nextjs-website/src/app/[[...slug]]/layout.tsx b/apps/nextjs-website/src/app/[[...slug]]/layout.tsx
@@ -62,13 +62,13 @@ export const generateStaticParams = async (): Promise<
   const pages_it: Array<LayoutProps['params']> = locales.it
     ? (await getAllPages('it')).map((page) => ({
         // Prepend locale as the first level slug (unless it's the default locale)
-        slug: defaultLocale === 'it' ? [page.slug] : ['it', page.slug],
+        slug: defaultLocale === 'it' ? [...page.slug] : ['it', ...page.slug],
       }))
     : [];
   const pages_en: Array<LayoutProps['params']> = locales.en
     ? (await getAllPages('en')).map((page) => ({
         // Prepend locale as the first level slug (unless it's the default locale)
-        slug: defaultLocale === 'en' ? [page.slug] : ['en', page.slug],
+        slug: defaultLocale === 'en' ? [...page.slug] : ['en', ...page.slug],
       }))
     : [];
 

diff --git a/apps/nextjs-website/src/app/[[...slug]]/page.tsx b/apps/nextjs-website/src/app/[[...slug]]/page.tsx
@@ -35,13 +35,13 @@ export const generateStaticParams = async (): Promise<
   const pages_it: Array<PageParams['params']> = locales.it
     ? (await getAllPages('it')).map((page) => ({
         // Prepend locale as the first level slug (unless it's the default locale)
-        slug: defaultLocale === 'it' ? [page.slug] : ['it', page.slug],
+        slug: defaultLocale === 'it' ? [...page.slug] : ['it', ...page.slug],
       }))
     : [];
   const pages_en: Array<PageParams['params']> = locales.en
     ? (await getAllPages('en')).map((page) => ({
         // Prepend locale as the first level slug (unless it's the default locale)
-        slug: defaultLocale === 'en' ? [page.slug] : ['en', page.slug],
+        slug: defaultLocale === 'en' ? [...page.slug] : ['en', ...page.slug],
       }))
     : [];
 
@@ -58,11 +58,13 @@ export async function generateMetadata({
   // Check if slug is undefined, which happens for the default locale's homepage due to generateStaticParams' internal logic
   // If it is, set the slug back to '' and locale to the default locale
 
-  // The slug will be found in slug[0] for the default locale and slug[1] for all others
+  // Remove locale from slug (if present) and convert to string
   const slugString =
     slug === undefined
       ? ''
-      : (slug[0] === 'it' || slug[0] === 'en' ? slug[1] : slug[0]) ?? '';
+      : slug[0] === 'it' || slug[0] === 'en'
+      ? slug.slice(1).toString()
+      : slug.toString();
 
   // The locale will NOT be found for the default locale and will be in slug[0] for all others
   const locale =
@@ -113,11 +115,13 @@ const Page = async ({ params }: PageParams) => {
   // Check if slug is undefined, which happens for the default locale's homepage due to generateStaticParams' internal logic
   // If it is, set the slug back to '' and locale to the default locale
 
-  // The slug will be found in slug[0] for the default locale and slug[1] for all others
+  // Remove locale from slug (if present) and convert to string
   const slugString =
     slug === undefined
       ? ''
-      : (slug[0] === 'it' || slug[0] === 'en' ? slug[1] : slug[0]) ?? '';
+      : slug[0] === 'it' || slug[0] === 'en'
+      ? slug.slice(1).toString()
+      : slug.toString();
 
   // The locale will NOT be found for the default locale and will be in slug[0] for all others
   const locale =

diff --git a/apps/nextjs-website/src/components/PageSection/PageSection.tsx b/apps/nextjs-website/src/components/PageSection/PageSection.tsx
@@ -21,6 +21,7 @@ import RowText from '../RowText';
 import TextSection from '../TextSection';
 import PageSwitch from '../PageSwitch';
 import FramedVideo from '../FramedVideo';
+import PressRelease from '../PressRelease';
 import { PageSection as PageSectionData } from '@/lib/fetch/types/PageSection';
 import { SiteWidePageData } from '@/lib/fetch/siteWideSEO';
 
@@ -72,6 +73,8 @@ const PageSection = (props: PageSectionData & SiteWidePageData) => {
       return <PageSwitch {...props} />;
     case 'sections.framed-video':
       return <FramedVideo {...props} />;
+    case 'sections.press-release':
+      return <PressRelease {...props} />;
     default:
       return null;
   }

diff --git a/apps/nextjs-website/src/components/PressRelease.tsx b/apps/nextjs-website/src/components/PressRelease.tsx
@@ -0,0 +1,25 @@
+'use client';
+import MarkdownRenderer from './MarkdownRenderer';
+import { SiteWidePageData } from '@/lib/fetch/siteWideSEO';
+import { PressReleaseSection } from '@/lib/fetch/types/PageSection';
+import { PressRelease as PressReleaseRC } from '@react-components/components';
+import { PressReleaseProps } from '@react-components/types';
+
+const makeTextSectionProps = ({
+  locale,
+  defaultLocale,
+  subtitle,
+  body,
+  ...rest
+}: PressReleaseSection &
+  Omit<SiteWidePageData, 'themeVariant'>): PressReleaseProps => ({
+  ...(subtitle && { subtitle }),
+  body: MarkdownRenderer({ markdown: body, locale, defaultLocale }),
+  ...rest,
+});
+
+const PressRelease = (
+  props: PressReleaseSection & Omit<SiteWidePageData, 'themeVariant'>
+) => <PressReleaseRC {...makeTextSectionProps(props)} />;
+
+export default PressRelease;
diff --git a/apps/nextjs-website/src/lib/__tests__/navigation.test.ts b/apps/nextjs-website/src/lib/__tests__/navigation.test.ts
@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { describe, it, expect } from 'vitest';
+import { navigationToPageDataArray, PageData } from '../navigation';
+import { Navigation } from '../fetch/navigation';
+
+const navigation: Navigation = {
+  data: [
+    {
+      id: 1,
+      attributes: {
+        slug: 'homepage',
+        seo: {
+          metaTitle: 'title',
+          metaDescription: 'description',
+          keywords: null,
+          canonicalURL: null,
+          ogTitle: null,
+          ogDescription: null,
+          structuredData: null,
+        },
+        sections: [
+          {
+            __component: 'sections.stripe-link',
+            theme: 'dark',
+            subtitle: 'subtitle',
+            icon: {
+              data: null,
+            },
+            link: {
+              label: 'link',
+              href: '/',
+            },
+            sectionID: null,
+          },
+        ],
+      },
+    },
+    {
+      id: 2,
+      attributes: {
+        slug: 'other-page',
+        seo: {
+          metaTitle: 'title',
+          metaDescription: 'description',
+          keywords: null,
+          canonicalURL: null,
+          ogTitle: null,
+          ogDescription: null,
+          structuredData: null,
+        },
+        sections: [
+          {
+            __component: 'sections.stripe-link',
+            theme: 'dark',
+            subtitle: 'subtitle',
+            icon: {
+              data: null,
+            },
+            link: {
+              label: 'link',
+              href: '/',
+            },
+            sectionID: null,
+          },
+        ],
+      },
+    },
+  ],
+};
+
+describe('navigationToPageDataArray', () => {
+  it('should replace homepage slug with an empty string', () => {
+    const actual = navigationToPageDataArray(navigation);
+    const expected: ReadonlyArray<PageData> = [
+      {
+        seo: navigation.data[0]!.attributes.seo,
+        sections: navigation.data[0]!.attributes.sections,
+        slug: [''],
+      },
+      {
+        seo: navigation.data[1]!.attributes.seo,
+        sections: navigation.data[1]!.attributes.sections,
+        slug: ['other-page'],
+      },
+    ];
+
+    expect(actual).toStrictEqual(expected);
+  });
+});