Merge pull request #3984 from Northeastern-Electric-Racing/#3893-add-create-rr-button-for-unlinked-materials

#3893: added create RR button for materials wout linked RR

Author: chpy04

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

@@ -2,14 +2,23 @@
  * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
  * See the LICENSE file in the repository root folder for details.
  */
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
+import { WbsNumber, CreateRefundSourceArgs, ReimbursementReceiptUploadArgs } from 'shared';
+import { ReimbursementRequestFormInput } from './ReimbursementRequestForm/ReimbursementRequestForm';
 import PageLayout from '../../components/PageLayout';
 import { useCreateReimbursementRequest, useUploadManyReceipts } from '../../hooks/finance.hooks';
 import { routes } from '../../utils/routes';
 import ReimbursementRequestForm, {
   ReimbursementRequestDataSubmission
 } from './ReimbursementRequestForm/ReimbursementRequestForm';
 
+type CreateRRPrefillState = {
+  projectWbsNum: WbsNumber;
+  materialId: string;
+  materialName: string;
+  prefillCost?: number;
+};
+
 const CreateReimbursementRequestPage: React.FC = () => {
   const { isLoading: createReimbursementRequestIsLoading, mutateAsync: createReimbursementRequest } =
     useCreateReimbursementRequest();
@@ -31,6 +40,31 @@ const CreateReimbursementRequestPage: React.FC = () => {
 
   const isSubmitting = createReimbursementRequestIsLoading || receiptsIsLoading;
 
+  // for pre-filling the form when user clicks "Create Reimbursement Request" from a material in the BOM table
+  const location = useLocation<CreateRRPrefillState | undefined>();
+  const prefill = location.state;
+
+  const defaultValues: ReimbursementRequestFormInput | undefined =
+    prefill?.projectWbsNum && prefill?.materialId
+      ? {
+          vendorId: '',
+          dateOfExpense: undefined,
+          accountCodeId: '',
+          indexCodeId: '',
+          secondaryAccount: undefined,
+          receiptFiles: [] as ReimbursementReceiptUploadArgs[],
+          reimbursementProducts: [
+            {
+              name: prefill.materialName,
+              materialId: prefill.materialId,
+              reason: prefill.projectWbsNum,
+              cost: prefill.prefillCost ?? 0,
+              refundSources: [] as CreateRefundSourceArgs[]
+            }
+          ]
+        }
+      : undefined;
+
   return (
     <PageLayout
       title="Create Reimbursement Request"
@@ -41,6 +75,7 @@ const CreateReimbursementRequestPage: React.FC = () => {
         submitText="Submit"
         submitData={onSubmit}
         isSubmitting={isSubmitting}
+        defaultValues={defaultValues}
       />
     </PageLayout>
   );

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx

@@ -11,7 +11,7 @@ import { useToast } from '../../../../hooks/toasts.hooks';
 import { useAssignMaterialToAssembly, useDeleteAssembly, useDeleteMaterial } from '../../../../hooks/bom.hooks';
 import LoadingIndicator from '../../../../components/LoadingIndicator';
 import EditMaterialModal from './MaterialForm/EditMaterialModal';
-import { Link, Typography } from '@mui/material';
+import { Button, Link, Typography } from '@mui/material';
 import { bomBaseColDef } from '../../../../utils/bom.utils';
 import NERModal from '../../../../components/NERModal';
 import { renderStatusBOM } from './BOMTableCustomCells';
@@ -217,20 +217,54 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       hide: hideColumn[0],
       renderCell: (params) => {
         const material = materials.find((m) => m.materialId === params.row.materialId);
-        const reimbursementRequest = material?.reimbursementRequest;
+        if (!material) return null;
 
-        if (!reimbursementRequest) return null;
+        const { reimbursementRequest } = material;
+
+        // case 1 (if reimbursement request exists): link to the reimbursement request page
+        if (reimbursementRequest) {
+          return (
+            <Link
+              component={RouterLink}
+              to={`${routes.REIMBURSEMENT_REQUESTS}/view/${reimbursementRequest.reimbursementRequestId}`}
+              underline="hover"
+              sx={{ color: '#dd514c', fontWeight: 'bold', cursor: 'pointer' }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {reimbursementRequest.identifier}
+            </Link>
+          );
+        }
+
+        // case 2 (if reimbursement request does not exist): link to the create reimbursement request page with pre-filled info
+        const { quantity, price } = material;
+
+        const prefillCost = quantity != null && price != null ? (Number(quantity) * Number(price)) / 100 : undefined;
 
         return (
-          <Link
+          <Button
             component={RouterLink}
-            to={`${routes.REIMBURSEMENT_REQUESTS}/view/${reimbursementRequest.reimbursementRequestId}`}
-            underline="hover"
-            sx={{ color: '#dd514c', fontWeight: 'bold', cursor: 'pointer' }}
-            onClick={(e) => e.stopPropagation()}
+            to={{
+              pathname: routes.NEW_REIMBURSEMENT_REQUEST,
+              state: {
+                projectWbsNum: project.wbsNum,
+                materialId: material.materialId,
+                materialName: material.name,
+                prefillCost
+              }
+            }}
+            variant="contained"
+            size="small"
+            onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
+            sx={{
+              backgroundColor: '#dd514c',
+              textTransform: 'none',
+              fontWeight: 600,
+              '&:hover': { backgroundColor: '#c7443f' }
+            }}
           >
-            {reimbursementRequest.identifier}
-          </Link>
+            Create RR
+          </Button>
         );
       }
     },