feat: [P4PU-585] added receipt error toast.

src/components/Transactions/TransactionDetail.tsx

@@ -1,11 +1,21 @@
 import { Download } from '@mui/icons-material';
-import { Box, Button, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Alert,
+  Box,
+  Button,
+  Divider,
+  Grid,
+  Snackbar,
+  Stack,
+  Typography,
+  useTheme
+} from '@mui/material';
 import { CopyToClipboardButton } from '@pagopa/mui-italia';
 import MasterCard from '../../assets/creditcard/mastercard.png';
 import { type TransactionDetail as TransactionDetailType } from '../../models/TransactionDetail';
-import React from 'react';
+import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { getReceipt } from 'utils/files';
+import { getReceipt as getReceiptApi } from 'utils/files';
 
 export default function TransactionDetail({
   transactionData
@@ -14,7 +24,15 @@ export default function TransactionDetail({
 }) {
   const theme = useTheme();
   const { t } = useTranslation();
+  const [toastOpen, setToastOpen] = useState(false);
 
+  const getReceipt = async (transactionId: string) => {
+    try {
+      await getReceiptApi(transactionId);
+    } catch (err) {
+      setToastOpen(true);
+    }
+  };
   return (
     <Grid container>
       <Stack
@@ -42,6 +60,17 @@ export default function TransactionDetail({
       </Stack>
 
       <Stack spacing={2} mt={3} width={'100%'}>
+        <Snackbar
+          autoHideDuration={6000}
+          onClose={() => {
+            setToastOpen(false);
+          }}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          open={toastOpen}>
+          <Alert severity="error" variant="outlined">
+            {t('app.transactionDetail.downloadReceiptError')}
+          </Alert>
+        </Snackbar>
         <Grid container>
           <Grid container item xs={12} md={7}>
             <Box

src/components/Transactions/transactionDetail.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { dummyTransactionsData } from 'stories/utils/mocks';
 import { TransactionDetails } from './';
 import '@testing-library/jest-dom';
@@ -18,6 +18,17 @@ describe('TransactionDetails component', () => {
     render(<TransactionDetails transactionData={dummyTransactionsData.transactionData} />);
   });
 
+  it('should show a toast if an error occurs while fetching the receipt', async () => {
+    mockUseReceiptData.mockImplementation(() => {
+      throw new Error();
+    });
+    render(<TransactionDetails transactionData={dummyTransactionsData.transactionData} />);
+    fireEvent.click(screen.getByTestId('receipt-download-btn'));
+    await waitFor(() =>
+      expect(screen.queryByText('app.transactionDetail.downloadReceiptError')).toBeInTheDocument()
+    );
+  });
+
   it('should truncate transactionId if longer than 20 ', () => {
     mockUseReceiptData.mockImplementation(vi.fn());
 

src/translations/it/translations.json

@@ -137,6 +137,7 @@
         "title": "Informazioni sulla transazione"
       },
       "downloadReceipt": "Scarica ricevuta",
+      "downloadReceiptError":"Non è stato possibile recuperare la ricevuta.",
       "downloadQuiettance": "Scarica quietanza",
       "createdOn": "Creato il",
       "paidBy": "Eseguito da",

src/utils/files.test.ts

@@ -9,12 +9,11 @@ vi.mock('utils/loaders');
 describe('files', () => {
   it('should give a console warning if no link is present', async () => {
     const mockTransactionReceipt = utils.loaders.getReceiptData as Mock;
-    mockTransactionReceipt.mockResolvedValue(null);
-    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    getReceipt('1');
+    global.URL.createObjectURL = vitest.fn();
 
+    mockTransactionReceipt.mockResolvedValue(null);
     await waitFor(() => {
-      expect(consoleWarn).toHaveBeenCalled();
+      expect(getReceipt('1')).rejects.toThrowError('receipt');
     });
   });
 });

src/utils/files.ts

@@ -1,19 +1,15 @@
 import utils from 'utils';
 
 export const getReceipt = async (transactionId: string) => {
-  try {
-    const receiptResult = await utils.loaders.getReceiptData(transactionId);
+  const receiptResult = await utils.loaders.getReceiptData(transactionId);
 
-    const file = new Blob([receiptResult as BlobPart], { type: 'application/pdf' });
+  const file = new Blob([receiptResult as BlobPart], { type: 'application/pdf' });
 
-    const link = window.URL.createObjectURL(file);
+  const link = window.URL.createObjectURL(file);
 
-    if (link) {
-      window.open(link);
-    } else {
-      console.warn('No receipt available');
-    }
-  } catch (e) {
-    console.warn('No notice receipt available');
+  if (link) {
+    window.open(link);
+  } else {
+    throw new Error('No receipt available');
   }
 };