Merge branch 'main' into megaheader-style-update

pagopa · Oct 11, 2024 · 4c82c07 · 4c82c07
2 parents 0091719 + 3dd56e8
commit 4c82c07
Show file tree

Hide file tree

Showing 16 changed files with 483 additions and 153 deletions.
diff --git a/.changeset/rich-tigers-build.md b/.changeset/rich-tigers-build.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+add background image to form
diff --git a/apps/nextjs-website/react-components/components/Form/Form.tsx b/apps/nextjs-website/react-components/components/Form/Form.tsx
@@ -43,6 +43,7 @@ const Form = ({
  sectionID,
  buttonLabel,
  notes,
+ background,
 }: FormProps) => {
  const textColor = TextColor(theme);
  const graylinkColor = GrayLinkColor(theme);
@@ -249,156 +250,166 @@ const Form = ({
  return (
  <Box
  sx={{
- maxWidth: 900,
- mx: 'auto',
- p: 4,
- textAlign: 'center',
- borderRadius: 2,
- boxShadow: 3,
- color: textColor,
+ width: '100vw',
  position: 'relative',
+ backgroundImage: background ? `url(${background})` : undefined,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
  }}
- component='section'
- {...(sectionID && { id: sectionID })}
  >
- <MailOutlineIcon
- sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
- />
- <Typography
- variant='h4'
- gutterBottom
- sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
+ <Box
+ sx={{
+ maxWidth: 900,
+ mx: 'auto',
+ p: 4,
+ textAlign: 'center',
+ borderRadius: 2,
+ boxShadow: 3,
+ color: textColor,
+ position: 'relative',
+ }}
+ component='section'
+ {...(sectionID && { id: sectionID })}
  >
- {title}
- </Typography>
- {subtitle && (
+ <MailOutlineIcon
+  sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
+  />
  <Typography
- variant='body1'
+ variant='h4'
  gutterBottom
- sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+ sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
  >
- {subtitle}
+ {title}
  </Typography>
- )}
- <Grid
- container
- spacing={2}
- sx={{ mb: 2, position: 'relative', zIndex: 3 }}
- >
- {inputFields.map(InputField)}
- </Grid>
- {categoriesTitle && categories.length > 0 && (
+ {subtitle && (
+ <Typography
+ variant='body1'
+ gutterBottom
+ sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+ >
+ {subtitle}
+ </Typography>
+ )}
+ <Grid
+ container
+ spacing={2}
+ sx={{ mb: 2, position: 'relative', zIndex: 3 }}
+ >
+ {inputFields.map(InputField)}
+ </Grid>
+ {categoriesTitle && categories.length > 0 && (
+ <Typography
+ variant='h6'
+ gutterBottom
+ sx={{
+ position: 'relative',
+ zIndex: 3,
+ mb: 2,
+ mt: 4,
+ color: textColor,
+ fontWeight: '700',
+ }}
+ >
+ {categoriesTitle}
+ </Typography>
+ )}
+ {categories.length > 0 && (
+ <FormCategories
+ categories={categories}
+ textColor={textColor}
+ borderColor={borderColor}
+ selectedCategory={formData.category}
+ handleRadioChange={handleRadioChange}
+ />
+ )}
  <Typography
- variant='h6'
- gutterBottom
+ variant='body2'
  sx={{
+ mb: 2,
  position: 'relative',
  zIndex: 3,
- mb: 2,
- mt: 4,
  color: textColor,
- fontWeight: '700',
+ textAlign: 'start',
  }}
  >
- {categoriesTitle}
+ *Campo obbligatorio
  </Typography>
- )}
- {categories.length > 0 && (
- <FormCategories
- categories={categories}
- textColor={textColor}
- borderColor={borderColor}
- selectedCategory={formData.category}
- handleRadioChange={handleRadioChange}
- />
- )}
- <Typography
- variant='body2'
- sx={{
- mb: 2,
- position: 'relative',
- zIndex: 3,
- color: textColor,
- textAlign: 'start',
- }}
- >
- *Campo obbligatorio
- </Typography>
- <Button
- variant='contained'
- sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
- onClick={handleSubmit}
- color={theme === 'dark' ? 'negative' : 'primary'}
- >
- {buttonLabel}
- </Button>
- {submissionStatus === 'success' && (
- <Alert
- severity='success'
- sx={{
- maxWidth: 'fit-content',
- margin: '16px auto 0px auto',
- padding: '8px 16px',
- border: 'none',
- backgroundColor: '#e1f4e1',
- textAlign: 'center',
- fontWeight: 'bold',
- '& .MuiAlert-icon': {
- display: 'none',
- },
- }}
+ <Button
+ variant='contained'
+ sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
+ onClick={handleSubmit}
+ color={theme === 'dark' ? 'negative' : 'primary'}
  >
- Grazie! La tua richiesta è stata registrata
- </Alert>
- )}
- {submissionStatus === 'failure' && (
- <Alert
- severity='error'
- sx={{
- maxWidth: 'fit-content',
- margin: '16px auto 0px auto',
- padding: '8px 16px',
- border: 'none',
- backgroundColor: '#ffd9d9',
- textAlign: 'center',
- fontWeight: 'bold',
- '& .MuiAlert-icon': {
- display: 'none',
- },
- }}
- >
- Purtroppo in questo momento non è possibile registrare la tua
- richiesta
- </Alert>
- )}
- {notes && (
- <Typography
- component='div'
- variant='body2'
- sx={{
- mt: 2,
- position: 'relative',
- zIndex: 3,
- color: graylinkColor,
- '& a': {
+ {buttonLabel}
+ </Button>
+ {submissionStatus === 'success' && (
+ <Alert
+ severity='success'
+ sx={{
+ maxWidth: 'fit-content',
+ margin: '16px auto 0px auto',
+ padding: '8px 16px',
+ border: 'none',
+ backgroundColor: '#e1f4e1',
+ textAlign: 'center',
+ fontWeight: 'bold',
+ '& .MuiAlert-icon': {
+ display: 'none',
+ },
+ }}
+ >
+ Grazie! La tua richiesta è stata registrata
+ </Alert>
+ )}
+ {submissionStatus === 'failure' && (
+ <Alert
+ severity='error'
+ sx={{
+ maxWidth: 'fit-content',
+ margin: '16px auto 0px auto',
+ padding: '8px 16px',
+ border: 'none',
+ backgroundColor: '#ffd9d9',
+ textAlign: 'center',
+ fontWeight: 'bold',
+ '& .MuiAlert-icon': {
+ display: 'none',
+ },
+ }}
+ >
+ Purtroppo in questo momento non è possibile registrare la tua
+ richiesta
+ </Alert>
+ )}
+ {notes && (
+ <Typography
+ component='div'
+ variant='body2'
+ sx={{
+ mt: 2,
+ position: 'relative',
+ zIndex: 3,
  color: graylinkColor,
- textDecoration: 'underline',
- '&:hover': {
+ '& a': {
  color: graylinkColor,
  textDecoration: 'underline',
+ '&:hover': {
+ color: graylinkColor,
+ textDecoration: 'underline',
+ },
  },
- },
- }}
- >
- {notes}
- </Typography>
- )}
+ }}
+ >
+ {notes}
+ </Typography>
+ )}
 
- <RECAPTCHA
- size='invisible'
- ref={recaptchaRef}
- sitekey={recaptchaSiteKey}
- />
+ <RECAPTCHA
+ size='invisible'
+ ref={recaptchaRef}
+ sitekey={recaptchaSiteKey}
+ />
+ </Box>
  </Box>
  );
 };

diff --git a/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx b/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx
@@ -10,6 +10,7 @@ import googleBadgeDarkBase64 from './BadgeImages/googleBadgeDarkBase64';
 import appleBadgeDarkBase64 from './BadgeImages/appleBadgeDarkBase64';
 import ContainerRC from '../common/ContainerRC';
 import { CtaButtons } from '../common/Common';
+import { usePathname } from 'next/navigation';
 
 const styles = {
  main: (isSmallScreen: boolean, layout: 'left' | 'center') => ({
@@ -40,14 +41,20 @@ const styles = {
 
 const PreFooter = (props: PreFooterProps) => {
  const {
- theme,
  title,
+ theme,
+ layout,
  storeButtons,
  background,
- sectionID,
  ctaButtons,
- layout = 'left',
+ excludeSlugs,
  } = props;
+ const pathname = usePathname();
+ // Compare excluded slugs with current page slug (removing initial '/')
+ if (excludeSlugs && excludeSlugs.includes(pathname.slice(1))) {
+ return null;
+ }
+
  const muiTheme = useTheme();
  const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down('sm'));
 
@@ -59,11 +66,7 @@ const PreFooter = (props: PreFooterProps) => {
  const backgroundColor = BackgroundColor(theme);
 
  return (
- <Box
- component='section'
- sx={styles.backgroundImage(isSmallScreen, theme)}
- {...(sectionID && { id: sectionID })}
- >
+ <Box component='section' sx={styles.backgroundImage(isSmallScreen, theme)}>
  <Box sx={{ position: 'relative', overflow: 'hidden' }}>
  <Box
  role='presentation'

diff --git a/apps/nextjs-website/react-components/types/Form/Form.types.ts b/apps/nextjs-website/react-components/types/Form/Form.types.ts
@@ -24,6 +24,7 @@ export interface FormProps extends SectionProps, FormFields, FormCategories {
  readonly recaptchaSiteKey: string;
  readonly buttonLabel: string;
  readonly notes?: JSX.Element;
+ readonly background?: string;
 }
 
 export interface FormData {

diff --git a/apps/nextjs-website/react-components/types/PreFooter/PreFooter.ts b/apps/nextjs-website/react-components/types/PreFooter/PreFooter.ts
@@ -1,16 +1,17 @@
-import { SectionProps, Theme } from '../common/Common.types';
+import { Theme } from '../common/Common.types';
 import { CtaButtonProps } from '../common/Common.types';
 
 export interface StoreButtonsProps {
  readonly hrefGoogle?: string;
  readonly hrefApple?: string;
 }
 
-export interface PreFooterProps extends SectionProps, PreFooterContentProps {
+export interface PreFooterProps extends PreFooterContentProps {
  readonly storeButtons?: StoreButtonsProps;
  readonly background?: string;
  readonly ctaButtons?: CtaButtonProps[];
- readonly layout?: 'left' | 'center';
+ readonly layout: 'left' | 'center';
+ readonly excludeSlugs?: string[];
 }
 
 export interface PreFooterContentProps {