show receipt previews whilst editing

Author: walker-sean

src/frontend/src/pages/FinancePage/CreateReimbursementRequest.tsx

@@ -11,8 +11,9 @@ import ReimbursementRequestForm, {
 } from './ReimbursementRequestForm/ReimbursementRequestForm';
 
 const CreateReimbursementRequestPage: React.FC = () => {
-  const { mutateAsync: createReimbursementRequest } = useCreateReimbursementRequest();
-  const { mutateAsync: uploadReceipts } = useUploadManyReceipts();
+  const { isLoading: createReimbursementRequestIsLoading, mutateAsync: createReimbursementRequest } =
+    useCreateReimbursementRequest();
+  const { isLoading: receiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
   const history = useHistory();
 
   const onSubmit = async (data: ReimbursementRequestDataSubmission): Promise<string> => {
@@ -28,12 +29,19 @@ const CreateReimbursementRequestPage: React.FC = () => {
     history.goBack();
   };
 
+  const isSubmitting = createReimbursementRequestIsLoading || receiptsIsLoading;
+
   return (
     <PageLayout
       title="Create Reimbursement Request"
       previousPages={[{ name: 'Reimbursement Requests', route: routes.REIMBURSEMENT_REQUESTS }]}
     >
-      <ReimbursementRequestForm onFormExit={onCancel} submitText="Submit" submitData={onSubmit} />
+      <ReimbursementRequestForm
+        onFormExit={onCancel}
+        submitText="Submit"
+        submitData={onSubmit}
+        isSubmitting={isSubmitting}
+      />
     </PageLayout>
   );
 };

src/frontend/src/pages/FinancePage/EditReimbursementRequest/EditReimbursementRequest.tsx

@@ -23,20 +23,19 @@ const EditReimbursementRequestPage: React.FC<{}> = () => {
   const { id } = useParams<{ id: string }>();
   const history = useHistory();
 
-  const { isLoading: editReimbursementRequestIsLoading } = useEditReimbursementRequest(id);
-  const { isLoading: uploadReceiptsIsLoading } = useUploadManyReceipts();
+  const { isLoading: editReimbursementRequestIsLoading, mutateAsync: editReimbursementRequest } = useEditReimbursementRequest(id);
+  const { isLoading: uploadReceiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
   const { isLoading: getIsLoading, isError, error, data: reimbursementRequest } = useSingleReimbursementRequest(id);
-  const { mutateAsync: editReimbursementRequest } = useEditReimbursementRequest(id);
-  const { mutateAsync: uploadReceipts } = useUploadManyReceipts();
   const { mutateAsync: markPendingFinance } = useMarkPendingFinance(id);
   const { mutateAsync: leadershipApproveReimbursementRequest } = useLeadershipApproveReimbursementRequest(id);
   const user = useCurrentUser();
   const toast = useToast();
 
   if (isError) return <ErrorPage error={error} />;
 
-  if (getIsLoading || editReimbursementRequestIsLoading || uploadReceiptsIsLoading || !reimbursementRequest)
-    return <LoadingIndicator />;
+  if (getIsLoading || !reimbursementRequest) return <LoadingIndicator />;
+
+  const isSubmitting = editReimbursementRequestIsLoading || uploadReceiptsIsLoading;
 
   const onCancel = () => {
     history.goBack();
@@ -90,6 +89,7 @@ const EditReimbursementRequestPage: React.FC<{}> = () => {
       onSubmitData={onSubmitEditData}
       onExitEditPage={onCancel}
       onSubmitToFinance={onSubmitToFinance}
+      isSubmitting={isSubmitting}
     />
   );
 };

src/frontend/src/pages/FinancePage/EditReimbursementRequest/EditReimbursementRequestRenderedDefaultValues.tsx

@@ -12,7 +12,8 @@ const EditReimbursementRequestRenderedDefaultValues: React.FC<{
   onSubmitData: (data: ReimbursementRequestDataSubmission) => Promise<string>;
   onExitEditPage: () => void;
   onSubmitToFinance?: (data: ReimbursementRequestDataSubmission) => Promise<void>;
-}> = ({ reimbursementRequest, onSubmitData, onExitEditPage, onSubmitToFinance }) => {
+  isSubmitting?: boolean;
+}> = ({ reimbursementRequest, onSubmitData, onExitEditPage, onSubmitToFinance, isSubmitting }) => {
   const previousPage = `${routes.REIMBURSEMENT_REQUESTS}/my-requests/${reimbursementRequest.reimbursementRequestId}`;
   const isLeadershipApproved = isReimbursementRequestLeadershipApproved(reimbursementRequest);
 
@@ -35,6 +36,7 @@ const EditReimbursementRequestRenderedDefaultValues: React.FC<{
         submitData={onSubmitData}
         isLeadershipApproved={isLeadershipApproved}
         onSubmitToFinance={onSubmitToFinance}
+        isSubmitting={isSubmitting}
         defaultValues={{
           vendorId: reimbursementRequest.vendor.vendorId,
           indexCodeId: reimbursementRequest.indexCode.indexCodeId,

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx

@@ -52,6 +52,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { routes } from '../../../utils/routes';
 import { wbsNumComparator } from 'shared/src/validate-wbs';
 import { codeAndRefundSourceName, accountCodePipe } from '../../../utils/pipes';
+import { imagePreviewUrl } from '../../../utils/reimbursement-request.utils';
 import { useCreateVendor } from '../../../hooks/finance.hooks';
 import { useGetFinanceDelegates } from '../../../hooks/organizations.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
@@ -85,6 +86,7 @@ interface ReimbursementRequestFormViewProps {
   isEditing?: boolean;
   isLeadershipApproved?: boolean;
   onSubmitToFinance?: (data: ReimbursementRequestFormInput) => void;
+  isSubmitting?: boolean;
 }
 
 const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps> = ({
@@ -109,7 +111,8 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
   onFormExit,
   isEditing = false,
   isLeadershipApproved = false,
-  onSubmitToFinance
+  onSubmitToFinance,
+  isSubmitting = false
 }) => {
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [showAddRefundSourceModal, setShowAddRefundSourceModal] = useState(false);
@@ -742,8 +745,11 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                     <Grid container spacing={2}>
                       {receiptFiles.map((receiptFile, index) => {
                         let previewUrl = '';
+                        // if file is newly uploaded, show local preview, else show google drive preview
                         if (receiptFile.file) {
                           previewUrl = URL.createObjectURL(receiptFile.file);
+                        } else if (receiptFile.googleFileId) {
+                          previewUrl = imagePreviewUrl(receiptFile.googleFileId);
                         }
 
                         return (
@@ -784,6 +790,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                                 </IconButton>
                               </Box>
                               {previewUrl &&
+                                receiptFile.file &&
                                 (receiptFile.name.toLowerCase().endsWith('.png') ||
                                   receiptFile.name.toLowerCase().endsWith('.jpg') ||
                                   receiptFile.name.toLowerCase().endsWith('.jpeg')) && (
@@ -803,7 +810,21 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                                     }}
                                   />
                                 )}
-                              {!previewUrl && !receiptFile.googleFileId && (
+                              {previewUrl && receiptFile.googleFileId && (
+                                <Box
+                                  component="iframe"
+                                  src={previewUrl}
+                                  title={receiptFile.name}
+                                  sx={{
+                                    width: '100%',
+                                    height: '150px',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    bgcolor: 'rgba(0,0,0,0.2)'
+                                  }}
+                                />
+                              )}
+                              {!previewUrl && (
                                 <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
                                   Preview not available
                                 </Typography>
@@ -871,19 +892,19 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
           <NERSuccessButton
             variant="contained"
             type="submit"
-            disabled={!hasSecureSettingsSet}
+            disabled={!hasSecureSettingsSet || isSubmitting}
             sx={{ background: '#dd524c', color: 'white', borderRadius: '10px' }}
           >
-            {submitText}
+            {isSubmitting ? 'Submitting...' : submitText}
           </NERSuccessButton>
           {(isHead(user.role) || (isEditing && isLeadershipApproved)) && onSubmitToFinance && (
             <NERSuccessButton
               variant="contained"
               onClick={handleSubmit(onSubmitToFinance)}
-              disabled={!hasSecureSettingsSet}
+              disabled={!hasSecureSettingsSet || isSubmitting}
               sx={{ background: '#dd524c', color: 'white', borderRadius: '10px' }}
             >
-              Save and Submit to Finance
+              {isSubmitting ? 'Submitting...' : 'Save and Submit to Finance'}
             </NERSuccessButton>
           )}
         </Box>

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx

@@ -48,6 +48,7 @@ interface ReimbursementRequestFormProps {
   defaultValues?: ReimbursementRequestFormInput;
   isLeadershipApproved?: boolean;
   onSubmitToFinance?: (data: ReimbursementRequestDataSubmission) => Promise<void>;
+  isSubmitting?: boolean;
 }
 
 const RECEIPTS_REQUIRED = import.meta.env.VITE_RR_RECEIPT_REQUIREMENT || 'disabled';
@@ -138,7 +139,8 @@ const ReimbursementRequestForm: React.FC<ReimbursementRequestFormProps> = ({
   submitData,
   onFormExit,
   isLeadershipApproved = false,
-  onSubmitToFinance
+  onSubmitToFinance,
+  isSubmitting = false
 }) => {
   const {
     handleSubmit,
@@ -363,6 +365,7 @@ const ReimbursementRequestForm: React.FC<ReimbursementRequestFormProps> = ({
       isEditing={!!defaultValues}
       isLeadershipApproved={isLeadershipApproved}
       onSubmitToFinance={onSubmitToFinanceWrapper}
+      isSubmitting={isSubmitting}
     />
   );
 };