fix: [P4PU-565] back from notice detail, retry on error and paymentNo…

…tice SessionStorage clearing (#165)

src/components/PaymentNotice/Card.tsx

@@ -41,7 +41,8 @@ export const _Card = (notice: PaymentNoticeType) => {
   const navigate = useNavigate();
   const { setState } = useStore();
 
-  function viewDetail() {
+  function viewDetail(e: React.MouseEvent) {
+    e.stopPropagation();
     setState(STATE.PAYMENT_NOTICE, notice);
     navigate(`${ArcRoutes.PAYMENT_NOTICES}${iupd}`);
   }
@@ -51,7 +52,7 @@ export const _Card = (notice: PaymentNoticeType) => {
       <Stack
         role="option"
         component="article"
-        onClick={() => viewDetail()}
+        onClick={viewDetail}
         borderRadius={1}
         padding={3}
         gap={3}
@@ -80,7 +81,7 @@ export const _Card = (notice: PaymentNoticeType) => {
               />
             </Stack>
           )}
-          <IconButton aria-label={t('app.paymentNotice.card.detail')} onClick={() => viewDetail()}>
+          <IconButton aria-label={t('app.paymentNotice.card.detail')} onClick={viewDetail}>
             <ArrowForwardIosIcon color="primary" fontSize="small" />
           </IconButton>
         </Stack>

src/components/PaymentNotice/Error.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PaymentNotice } from './PaymentNotice';
+
+describe('Payment notices error component', () => {
+  const onRetry = vi.fn();
+
+  it('should render as expected', () => {
+    render(<PaymentNotice.Error onRetry={onRetry} />);
+    const button = screen.getByRole('button', { name: 'app.paymentNotice.error.button' });
+    expect(button).toBeVisible();
+    const description = screen.getByText('app.paymentNotice.error.description');
+    expect(description).toBeVisible();
+  });
+
+  it('should trigger the retry function correctly', () => {
+    const onRetry = vi.fn();
+    render(<PaymentNotice.Error onRetry={onRetry} />);
+    const button = screen.getByRole('button', { name: 'app.paymentNotice.error.button' });
+    fireEvent.click(button);
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});

src/components/PaymentNotice/Error.tsx

@@ -5,14 +5,18 @@ import { useTranslation } from 'react-i18next';
 import { Box, Button, Card, CardActions } from '@mui/material';
 import { ErrorOutline } from '@mui/icons-material';
 
+interface ErrorProps {
+  onRetry: () => void;
+}
+
 /**
  * This component is considered private and should not be used directly.
  * Instead, use `PaymentNotice.Error` for rendering the card.
  *
  * @component
  * @private
  */
-export const _Error = () => {
+export const _Error = (props: ErrorProps) => {
   const { t } = useTranslation();
   return (
     <Card
@@ -26,6 +30,7 @@ export const _Error = () => {
           <Typography variant="body1">{t('app.paymentNotice.error.description')}</Typography>
           <Box mt={3} width={'100%'}>
             <Button
+              onClick={props.onRetry}
               variant="text"
               aria-label={t('app.paymentNotice.error.button')}
               role="button"

src/routes/PaymentNotices/PaymentNotices.test.tsx

@@ -10,36 +10,28 @@ import { Mock } from 'vitest';
 import { State, StoreContextProps } from 'store/types';
 import loaders from 'utils/loaders';
 import { useMediaQuery } from '@mui/material';
+import utils from 'utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 vi.mock(import('@mui/material'), async (importActual) => ({
   ...(await importActual()),
   useMediaQuery: vi.fn()
 }));
+
 vi.mock('utils/loaders');
 vi.mock('utils/converters');
 
 vi.mock('./store/PaymentNoticeStore', () => ({
   paymentNoticeState: { removeItem: vi.fn(), state: null }
 }));
-vi.mock('./utils/converters');
-
-vi.mock(import('utils/storage'), async (importOriginal) => {
-  const mod = await importOriginal();
-  return {
-    ...mod,
-    pullPaymentsOptIn: {
-      get: { value: true },
-      set: vi.fn()
-    }
-  };
-});
 
 describe('PaymentNoticeRoute', () => {
   (useMediaQuery as Mock).mockReturnValue(false);
 
   beforeEach(() => {
     vi.spyOn(GlobalStore, 'useStore').mockReturnValue({
-      state: { paymentNotice: undefined } as State
+      state: { paymentNotice: undefined } as State,
+      setState: vi.fn()
     } as StoreContextProps);
   });
 
@@ -49,16 +41,20 @@ describe('PaymentNoticeRoute', () => {
 
   const WrappedPaymentNotices = () => {
     const queryClient = new QueryClient();
+    const theme = createTheme();
     return (
-      <MemoryRouter>
-        <QueryClientProvider client={queryClient}>
-          <PaymentNotices />
-        </QueryClientProvider>
-      </MemoryRouter>
+      <ThemeProvider theme={theme}>
+        <MemoryRouter>
+          <QueryClientProvider client={queryClient}>
+            <PaymentNotices />
+          </QueryClientProvider>
+        </MemoryRouter>
+      </ThemeProvider>
     );
   };
 
   it('renders without crashing', () => {
+    utils.storage.pullPaymentsOptIn.set();
     const mockQueryResult = {
       data: [
         { id: 1, notice: 'Notice 1' },
@@ -79,14 +75,17 @@ describe('PaymentNoticeRoute', () => {
   });
 
   it('renders without crashing no payment notices', () => {
+    utils.storage.pullPaymentsOptIn.set();
     const mockQueryResult = { data: null };
     const mockNormalizedData = null;
 
     (loaders.getPaymentNotices as Mock).mockReturnValue(mockQueryResult);
     (converters.prepareNoticesData as Mock).mockReturnValue(mockNormalizedData);
     render(<WrappedPaymentNotices />);
   });
+
   it('renders without crashing empty notice array', () => {
+    utils.storage.pullPaymentsOptIn.set();
     const mockQueryResult = { data: [] };
     const mockNormalizedData = { paymentNotice: [] };
 

src/routes/PaymentNotices/index.tsx

@@ -1,18 +1,25 @@
+import React, { useEffect } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { PaymentNotice } from 'components/PaymentNotice';
 import QueryLoader from 'components/QueryLoader';
 import { PaymentNoticesListSkeleton } from 'components/Skeleton';
 import { useNormalizedNotices } from 'hooks/useNormalizedNotices';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useStore } from 'store/GlobalStore';
+import { STATE } from 'store/types';
 import utils from 'utils';
 
 const Notices = () => {
-  const { data, isError } = useNormalizedNotices();
+  const { data, isError, refetch } = useNormalizedNotices();
+  const { setState } = useStore();
+
+  useEffect(() => {
+    setState(STATE.PAYMENT_NOTICE, {});
+  }, []);
 
   const Content = () => {
-    if (isError || !data) return <PaymentNotice.Error />;
+    if (isError || !data) return <PaymentNotice.Error onRetry={refetch} />;
     if (!data?.paymentNotices?.length) return <PaymentNotice.Empty />;
     return (
       <Stack gap={5} component="section">

vitest.setup.mts

@@ -1,3 +1,4 @@
 import { i18nTestSetup } from './src/__tests__/i18nTestSetup';
+import '@testing-library/jest-dom';
 
 i18nTestSetup({});