Merge pull request #1716 from Northeastern-Electric-Racing/#1577-receipt-display-update

#1577 receipt display update

Author: RChandler234

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -9,7 +9,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
 import DeleteIcon from '@mui/icons-material/Delete';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Grid, Typography, useTheme, Link, IconButton } from '@mui/material';
 import { Box } from '@mui/system';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -30,14 +30,16 @@ import {
   undefinedPipe
 } from '../../../utils/pipes';
 import {
-  imagePreviewUrl,
+  imageDownloadUrl,
+  imageFileUrl,
   isReimbursementRequestAdvisorApproved,
   isReimbursementRequestSaboSubmitted
 } from '../../../utils/reimbursement-request.utils';
 import { routes } from '../../../utils/routes';
 import AddSABONumberModal from './AddSABONumberModal';
 import ReimbursementProductsView from './ReimbursementProductsView';
 import SubmitToSaboModal from './SubmitToSaboModal';
+import DownloadIcon from '@mui/icons-material/Download';
 
 interface ReimbursementRequestDetailsViewProps {
   reimbursementRequest: ReimbursementRequest;
@@ -145,7 +147,7 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
             <Grid item xs={6} textAlign={'center'} mt={-2}>
               <Typography fontSize={50}>Total Cost</Typography>
             </Grid>
-            <Grid xs={6} mt={-2} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Grid xs={6} mt={-2} sx={{ display: 'flex', alignItems: 'center' }}>
               <Typography fontSize={50}>{`$${centsToDollar(reimbursementRequest.totalCost)}`}</Typography>
             </Grid>
           </Grid>
@@ -172,14 +174,19 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
   const ReceiptsView = () => {
     return (
       <Box sx={{ maxHeight: `250px`, overflow: reimbursementRequest.receiptPictures.length > 0 ? 'auto' : 'none' }}>
-        <Typography variant="h5">Receipts</Typography>
+        <Box sx={{ position: 'sticky', top: 0, background: theme.palette.background.default, pb: 1, zIndex: 1 }}>
+          <Typography variant="h5">Receipts</Typography>
+        </Box>
         {reimbursementRequest.receiptPictures.map((receipt) => {
           return (
-            <iframe
-              style={{ height: `200px`, width: '50%' }}
-              src={imagePreviewUrl(receipt.googleFileId)}
-              title={receipt.name}
-            />
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <Link href={imageFileUrl(receipt.googleFileId)} target="_blank" underline="hover" sx={{ mr: 1, fontSize: 30 }}>
+                {receipt.name}
+              </Link>
+              <IconButton href={imageDownloadUrl(receipt.googleFileId)}>
+                <DownloadIcon sx={{ fontSize: 30 }} />
+              </IconButton>
+            </Box>
           );
         })}
       </Box>

src/frontend/src/utils/reimbursement-request.utils.ts

@@ -95,6 +95,10 @@ export const getReimbursementRequestDateSubmittedToSabo = (reimbursementRequest:
 
 export const imagePreviewUrl = (googleFileId: string) => `https://drive.google.com/file/d/${googleFileId}/preview`;
 
+export const imageFileUrl = (googleFileId: string) => `https://drive.google.com/file/d/${googleFileId}`;
+
+export const imageDownloadUrl = (googleFileId: string) => `https://drive.google.com/uc?export=download&id=${googleFileId}`;
+
 export const getRefundRowData = (refund: Reimbursement) => {
   return { date: refund.dateCreated, amount: refund.amount, recipient: refund.userSubmitted };
 };