.

client/src/app/quotes/components/QuotePDFPreview.tsx

@@ -22,6 +22,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
+import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
 
 const QuotePDFPreview = ({
   quote,
@@ -33,8 +34,8 @@ const QuotePDFPreview = ({
   const navigate = useNavigate();
   const { toast } = useToast();
   const { useReport, getQuotePDFFilename, useDownloader } = useQuotes();
-  //const { download: downloadPDFFile } = useDownloader();
-  const { report, download, isInProgress } = useReport();
+  const { download, ...downloadProps } = useDownloader();
+  const { report, preview, isInProgress } = useReport();
   const [URLReport, setURLReport] = useState<string | undefined>(undefined);
 
   const handleFinishDownload = useCallback(() => {
@@ -43,10 +44,14 @@ const QuotePDFPreview = ({
     });
   }, [toast]);
 
+  const handleDownload = useCallback(() => {
+    if (quote) download(quote.id, getQuotePDFFilename(quote));
+  }, [quote]);
+
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (!isInProgress && quote && quote.id) {
-        download(quote.id);
+      if (quote && quote.id) {
+        preview(quote.id);
       }
     }, 200);
 
@@ -120,14 +125,7 @@ const QuotePDFPreview = ({
                   {t("common.print")}
                 </span>
               </Button>*/}
-              <Button
-                size='sm'
-                variant='outline'
-                className='h-8 gap-1'
-                onClick={() => {
-                  //downloadPDFFile(quote.id, getQuotePDFFilename(quote));
-                }}
-              >
+              <Button size='sm' variant='outline' className='h-8 gap-1' onClick={handleDownload}>
                 <DownloadIcon className='h-3.5 w-3.5' />
                 <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
                   {t("quotes.list.preview.download_quote")}
@@ -170,10 +168,14 @@ const QuotePDFPreview = ({
           )}
         </CardHeader>
         <CardContent className='py-4'>
-          <PDFViewer file={URLReport} className='object-contain' />
+          <PDFViewer
+            file={URLReport}
+            className='object-contain'
+            onThumbnailClick={handleDownload}
+          />
         </CardContent>
       </Card>
-      {/*<DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />*/}
+      <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
     </>
   );
 };

client/src/app/quotes/hooks/useQuotes.tsx

@@ -240,7 +240,7 @@ export const useQuotes = () => {
       const auth = dataSource.getApiAuthorization();
       const [report, setReport] = useState<Blob | undefined>(undefined);
 
-      const downloader = useDownloader({
+      const { download, ...rest } = useDownloader({
         headers: {
           Authorization: auth,
         },
@@ -257,16 +257,16 @@ export const useQuotes = () => {
         ),
       });
 
-      const download = useCallback(
+      const preview = useCallback(
         (id: string) => {
-          return downloader.download(actions.getQuotePDFDownloadURL(id), "");
+          return download(actions.getQuotePDFDownloadURL(id), "");
         },
-        [downloader]
+        [download]
       );
 
       return {
-        ...downloader,
-        download,
+        ...rest,
+        preview,
         report,
       };
     },

client/src/components/PDFViewer/PDFViewer.tsx

@@ -26,10 +26,11 @@ export interface PDFViewerProps {
     | {
         data: Uint8Array;
       };
+  onThumbnailClick?: () => void;
   className?: string;
 }
 
-export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
+export const PDFViewer = ({ file, onThumbnailClick, className }: PDFViewerProps): JSX.Element => {
   const [numPages, setNumPages] = useState<number>(0);
   const [pageNumber, setPageNumber] = useState<number>(1);
   const [renderedPageNumber, setRenderedPageNumber] = useState<number | undefined>(undefined);
@@ -94,9 +95,12 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
         onLoadSuccess={onDocumentLoadSuccess}
         loading={<LoadingSpinner className='w-full mx-auto mt-32' />}
         options={options}
-        className={`w-full aspect-[3/4] relative bg-white shadow w-[${
-          containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth
-        }]`}
+        className={cn(
+          `w-full aspect-[3/4] relative bg-white shadow w-[${
+            containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth
+          }]`,
+          onThumbnailClick ? "cursor-pointer" : ""
+        )}
       >
         {/**
          * IMPORTANT: Keys are necessary so that React will know which Page component
@@ -114,6 +118,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
           pageNumber={renderedPageNumber}
           canvasBackground={"white"}
           width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+          onClick={() => (onThumbnailClick ? onThumbnailClick() : null)}
         />
 
         <Page
@@ -123,6 +128,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
           canvasBackground={"white"}
           onRenderSuccess={onPageRenderSuccess}
           width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+          onClick={() => (onThumbnailClick ? onThumbnailClick() : null)}
         />
       </Document>