Merge pull request #567 from pagopa/feat/OI-300-remove-retry-button

feat: [OI-300] EndingPage refactoring

src/oneid/oneid-fe/src/App.tsx

@@ -8,25 +8,18 @@ import Logout from './pages/logout/Logout';
 import { LoginError } from './pages/loginError/LoginError';
 import Login from './pages/login';
 
-const onLogout = () => <Logout />;
-const onLoginError = () => <LoginError />;
-const onLoginRequest = () => <Login />;
-
 function App() {
-  if (window.location.pathname === ROUTE_LOGOUT) {
-    return onLogout();
-  } else {
-    switch (window.location.pathname) {
-      case ROUTE_LOGIN:
-        return onLoginRequest();
-      case ROUTE_LOGIN_ERROR:
-        return onLoginError();
-      default:
-        redirectToLogin();
-    }
+  switch (window.location.pathname) {
+    case ROUTE_LOGIN:
+      return <Login />;
+    case ROUTE_LOGIN_ERROR:
+      return <LoginError />;
+    case ROUTE_LOGOUT:
+      return <Logout />;
+    default:
+      redirectToLogin();
+      return;
   }
-
-  return <div />;
 }
 
 export default App;

src/oneid/oneid-fe/src/components/EndingPage.test.tsx

@@ -2,7 +2,6 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import EndingPage from './EndingPage';
-
 describe('EndingPage Component', () => {
   it('should render the title, description, and icon', () => {
     render(
@@ -28,8 +27,8 @@ describe('EndingPage Component', () => {
     const onButtonClick = vi.fn();
     render(
       <EndingPage
-        buttonLabel="First Button"
-        onButtonClick={onButtonClick}
+        labelButton="First Button"
+        onClickButton={onButtonClick}
         title={undefined}
         description={undefined}
       />
@@ -44,55 +43,16 @@ describe('EndingPage Component', () => {
     expect(onButtonClick).toHaveBeenCalled();
   });
 
-  it('should render the second button if haveTwoButtons is true and trigger its onClick', () => {
-    const onSecondButtonClick = vi.fn();
-    render(
-      <EndingPage
-        buttonLabel="First Button"
-        secondButtonLabel="Second Button"
-        onSecondButtonClick={onSecondButtonClick}
-        haveTwoButtons={true}
-        title={undefined}
-        description={undefined}
-      />
-    );
-
-    // Check if both buttons are rendered
-    const firstButton = screen.getByText('First Button');
-    const secondButton = screen.getByText('Second Button');
-    expect(firstButton).toBeInTheDocument();
-    expect(secondButton).toBeInTheDocument();
-
-    // Simulate a click on the second button
-    fireEvent.click(secondButton);
-    expect(onSecondButtonClick).toHaveBeenCalled();
-  });
-
-  it('should conditionally render the paragraph if isParagraphPresent is true', () => {
+  it('should conditionally render the paragraph if passed', () => {
     render(
       <EndingPage
         description="Test Description"
         paragraph="Test Paragraph"
-        isParagraphPresent={true}
         title={undefined}
       />
     );
 
     // Check if the paragraph is rendered
     expect(screen.getByText('Test Paragraph')).toBeInTheDocument();
   });
-
-  it('should not render the paragraph if isParagraphPresent is false', () => {
-    render(
-      <EndingPage
-        description="Test Description"
-        paragraph="Test Paragraph"
-        isParagraphPresent={false}
-        title={undefined}
-      />
-    );
-
-    // Ensure the paragraph is not rendered
-    expect(screen.queryByText('Test Paragraph')).toBeNull();
-  });
 });

src/oneid/oneid-fe/src/components/EndingPage.tsx

@@ -1,9 +1,17 @@
-import { Button, Grid, Typography, Box, SvgIconProps } from '@mui/material';
+import { ButtonProps } from '@mui/base/Button/Button.types';
+import {
+  Button,
+  Typography,
+  SvgIconProps,
+  Stack,
+  ButtonOwnProps,
+  TypographyOwnProps,
+} from '@mui/material';
 import { theme } from '@pagopa/mui-italia/dist/theme';
 import { FunctionComponent, ReactElement, SVGProps } from 'react';
 
-type Props = {
-  /** The minHeight of the component, can be 52vh for the pages and 100vh for the blocking page */
+type EndingPageProps = {
+  /** The minHeight of the component, can be 52vh or 100vh */
   minHeight?: '52vh' | '100vh';
   /** The ending page icon */
   icon?:
@@ -15,132 +23,57 @@ type Props = {
   /** The ending page description */
   description: React.ReactNode;
   /** The ending page button label if any */
-  buttonLabel?: React.ReactNode;
-  /** The ending page second button label if any */
-  secondButtonLabel?: React.ReactNode;
-  /** if defined performe this action on click of the first button */
-  onButtonClick?: () => void;
-  /** if defined performe this action on click of the second button */
-  onSecondButtonClick?: () => void;
-  /** Set the variant of the title */
-  variantTitle?:
-    | 'button'
-    | 'caption'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'inherit'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'overline'
-    | undefined;
+  variantTitle?: TypographyOwnProps['variant'];
   /** Set the variant of the description */
-  variantDescription?:
-    | 'button'
-    | 'caption'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'inherit'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'overline'
-    | undefined;
-  /** Set the variant of the first button */
-  variantFirstButton?: 'contained' | 'outlined' | 'text';
-  /** Set the variant of the second button */
-  variantSecondButton?: 'contained' | 'outlined' | 'text';
+  variantDescription?: TypographyOwnProps['variant'];
   /** Set the text of paragraph */
   paragraph?: React.ReactNode;
-  /** Show the paragraph */
-  isParagraphPresent?: boolean;
-  /** Show the second button and the "secondButtonLabel" as text of this one */
-  haveTwoButtons?: boolean;
+  onClickButton?: ButtonProps['onClick'];
+  labelButton?: React.ReactNode;
+  variantButton?: ButtonOwnProps['variant'];
 };
 
 /** Selfcare's Ending Page */
 const EndingPage = ({
-  minHeight,
   description,
-  onButtonClick,
-  onSecondButtonClick,
   icon,
+  labelButton,
+  minHeight = '52vh',
+  onClickButton,
+  paragraph,
   title,
-  buttonLabel,
-  variantTitle,
+  variantButton = 'contained',
   variantDescription,
-  paragraph,
-  isParagraphPresent,
-  haveTwoButtons = false,
-  secondButtonLabel,
-  variantFirstButton = 'contained',
-  variantSecondButton = 'contained',
-}: Props) => (
-  <Box sx={{ minHeight, position: 'static' }} display="flex" flexGrow={1}>
-    <Grid
-      container
-      direction="column"
-      key="0"
-      style={{ textAlign: 'center' }}
-      margin={'auto'}
-    >
-      <Grid container item justifyContent="center" mb={3}>
-        <Grid item xs={6}>
-          {icon as ReactElement}
-        </Grid>
-      </Grid>
-      <Grid container item justifyContent="center">
-        <Typography width={theme.spacing(56)} variant={variantTitle}>
-          {title}
-        </Typography>
-      </Grid>
-      <Grid container item justifyContent="center" mb={4} mt={1}>
-        <Typography width={theme.spacing(62)} variant={variantDescription}>
-          {description}
-        </Typography>
-      </Grid>
-      {buttonLabel && (
-        <Grid container item justifyContent="center">
-          <Grid item xs={haveTwoButtons ? 12 : 4}>
-            <Button
-              variant={variantFirstButton}
-              sx={{ alignSelf: 'center', marginRight: haveTwoButtons ? 3 : 0 }}
-              onClick={onButtonClick}
-            >
-              {buttonLabel}
-            </Button>
-            {haveTwoButtons && (
-              <Button
-                variant={variantSecondButton}
-                sx={{ alignSelf: 'center' }}
-                onClick={onSecondButtonClick}
-              >
-                {secondButtonLabel}
-              </Button>
-            )}
-          </Grid>
-        </Grid>
-      )}
+  variantTitle,
+}: EndingPageProps) => (
+  <Stack
+    sx={{
+      minHeight: { md: minHeight, xs: 'auto' },
+      marginTop: { md: 0, xs: '25%' },
+      justifyContent: { md: 'center', xs: 'flex-start' },
+      alignItems: 'center',
+      gap: 2,
+    }}
+  >
+    {icon as ReactElement}
+    <Stack textAlign="center" alignItems="center" gap={1}>
+      <Typography maxWidth={theme.spacing(56)} variant={variantTitle}>
+        {title}
+      </Typography>
+      <Typography maxWidth={theme.spacing(62)} variant={variantDescription}>
+        {description}
+      </Typography>
+    </Stack>
+    {labelButton && (
+      <Button variant={variantButton} onClick={onClickButton}>
+        {labelButton}
+      </Button>
+    )}
 
-      {isParagraphPresent && (
-        <Grid container item justifyContent="center" my={4}>
-          <Grid item xs={6}>
-            <Typography variant={variantDescription}>{paragraph}</Typography>
-          </Grid>
-        </Grid>
-      )}
-    </Grid>
-  </Box>
+    {paragraph && (
+      <Typography variant={variantDescription}>{paragraph}</Typography>
+    )}
+  </Stack>
 );
 
 export default EndingPage;

src/oneid/oneid-fe/src/hooks/useLoginError.test.tsx

@@ -10,55 +10,48 @@ describe('useLoginError', () => {
       expected: {
         title: t('loginError.tooManyAttempts.title'),
         description: t('loginError.tooManyAttempts.description'),
-        haveRetryButton: true,
       },
     },
     {
       errorCode: '20',
       expected: {
         title: t('loginError.incompatibleCredentials.title'),
         description: t('loginError.incompatibleCredentials.description'),
-        haveRetryButton: false,
       },
     },
     {
       errorCode: '21',
       expected: {
         title: t('loginError.authTimeout.title'),
         description: t('loginError.authTimeout.description'),
-        haveRetryButton: true,
       },
     },
     {
       errorCode: '22',
       expected: {
         title: t('loginError.deniedByUser.title'),
         description: t('loginError.deniedByUser.description'),
-        haveRetryButton: true,
       },
     },
     {
       errorCode: '23',
       expected: {
         title: t('loginError.suspendedOrRevoked.title'),
         description: t('loginError.suspendedOrRevoked.description'),
-        haveRetryButton: false,
       },
     },
     {
       errorCode: '25',
       expected: {
         title: t('loginError.canceledbyUser.title'),
         description: t('loginError.canceledbyUser.description'),
-        haveRetryButton: true,
       },
     },
     {
       errorCode: 'unknown',
       expected: {
         title: t('loginError.generic.title'),
         description: t('loginError.generic.description'),
-        haveRetryButton: true,
       },
     },
   ];
@@ -68,12 +61,10 @@ describe('useLoginError', () => {
     ({ errorCode, expected }) => {
       const { result } = renderHook(useLoginError);
 
-      const { title, description, haveRetryButton } =
-        result.current.handleErrorCode(errorCode);
+      const { title, description } = result.current.handleErrorCode(errorCode);
 
       expect(title).toEqual(expected.title);
       expect(description).toEqual(expected.description);
-      expect(haveRetryButton).toBe(expected.haveRetryButton);
     }
   );
 });