Merge pull request #2680 from Northeastern-Electric-Racing/#1583-edit-refund-modal

#1583 Abstracted Refund Modal

Author: walker-sean

src/backend/src/services/reimbursement-requests.services.ts

@@ -29,7 +29,8 @@ import {
   updateReimbursementProducts,
   validateReimbursementProducts,
   validateUserEditRRPermissions,
-  validateUserIsPartOfFinanceTeam
+  validateUserIsPartOfFinanceTeam,
+  validateRefund
 } from '../utils/reimbursement-requests.utils';
 import {
   AccessDeniedAdminOnlyException,
@@ -210,26 +211,7 @@ export default class ReimbursementRequestService {
       throw new AccessDeniedException('Guests cannot reimburse a user for their expenses.');
     }
 
-    const totalOwed = await prisma.reimbursement_Request
-      .findMany({
-        where: { recipientId: submitter.userId, dateDeleted: null, accountCode: { organizationId } }
-      })
-      .then((userReimbursementRequests: Reimbursement_Request[]) => {
-        return userReimbursementRequests.reduce((acc: number, curr: Reimbursement_Request) => acc + curr.totalCost, 0);
-      });
-
-    const totalReimbursed = await prisma.reimbursement
-      .findMany({
-        where: { purchaserId: submitter.userId, organizationId },
-        select: { amount: true }
-      })
-      .then((reimbursements: { amount: number }[]) =>
-        reimbursements.reduce((acc: number, curr: { amount: number }) => acc + curr.amount, 0)
-      );
-
-    if (amount > totalOwed - totalReimbursed) {
-      throw new HttpException(400, 'Reimbursement is greater than the total amount owed to the user');
-    }
+    await validateRefund(submitter, amount, organizationId);
 
     // make the date object but add 12 hours so that the time isn't 00:00 to avoid timezone problems
     const dateCreated = new Date(dateReceived.split('T')[0]);
@@ -334,7 +316,7 @@ export default class ReimbursementRequestService {
    * @param amount The new amount of the reimbursement
    * @param dateCreated The new date the reimbursement was created
    * @param organizationId The organization the user is currently in
-   * @returns The updatd reimbursement
+   * @returns The updated reimbursement
    */
   static async editReimbursement(
     reimbursementId: string,
@@ -354,6 +336,10 @@ export default class ReimbursementRequestService {
       );
     if (request.organizationId !== organizationId) throw new InvalidOrganizationException('Reimbursement');
 
+    const difference = amount - request.amount;
+
+    if (difference > 0) await validateRefund(editor, difference, organizationId);
+
     const updatedReimbursement = await prisma.reimbursement.update({
       where: { reimbursementId },
       data: { dateCreated, amount }

src/backend/src/utils/reimbursement-requests.utils.ts

@@ -395,3 +395,32 @@ export const validateUserEditRRPermissions = async (
       throw new AccessDeniedException('Only the creator or finance team can edit a reimbursement request');
   }
 };
+
+/**
+ * Validates that the refund amount is less than the total amount owed to the user
+ * @param user the user reporting or editing a refund
+ * @param refundAmount the amount of the refund
+ * @param organizationId the organization the request pertains to
+ */
+export const validateRefund = async (user: User, refundAmount: number, organizationId: string) => {
+  const totalOwed = await prisma.reimbursement_Request
+    .findMany({
+      where: { recipientId: user.userId, dateDeleted: null, accountCode: { organizationId } }
+    })
+    .then((userReimbursementRequests: Reimbursement_Request[]) => {
+      return userReimbursementRequests.reduce((acc: number, curr: Reimbursement_Request) => acc + curr.totalCost, 0);
+    });
+
+  const totalReimbursed = await prisma.reimbursement
+    .findMany({
+      where: { purchaserId: user.userId, organizationId },
+      select: { amount: true }
+    })
+    .then((reimbursements: { amount: number }[]) =>
+      reimbursements.reduce((acc: number, curr: { amount: number }) => acc + curr.amount, 0)
+    );
+
+  if (refundAmount > totalOwed - totalReimbursed) {
+    throw new HttpException(400, 'Reimbursement is greater than the total amount owed');
+  }
+};

src/frontend/src/apis/finance.api.ts

@@ -6,7 +6,8 @@ import {
   CreateReimbursementRequestPayload,
   EditReimbursementRequestPayload,
   EditVendorPayload,
-  AccountCodePayload
+  AccountCodePayload,
+  RefundPayload
 } from '../hooks/finance.hooks';
 import axios from '../utils/axios';
 import { apiUrls } from '../utils/urls';
@@ -312,6 +313,17 @@ export const reportRefund = (amount: number, dateReceived: string) => {
   return axios.post(apiUrls.financeReportRefund(), { amount, dateReceived });
 };
 
+/**
+ * Edits a refund in the database
+ *
+ * @param id the reimbursement id
+ * @param formData the amount and date to edit the refund with
+ * @returns the updated reimbursement
+ */
+export const editRefund = (id: string, formData: RefundPayload) => {
+  return axios.post(apiUrls.financeEditRefund(id), formData);
+};
+
 /**
  * Edits an expense type in the database
  * @param id id of the expense type

src/frontend/src/hooks/finance.hooks.ts

@@ -29,6 +29,7 @@ import {
   createVendor,
   editVendor,
   getAllAccountCodes,
+  editRefund,
   leadershipApproveReimbursementRequest
 } from '../apis/finance.api';
 import {
@@ -77,6 +78,11 @@ export interface EditVendorPayload {
   name: string;
 }
 
+export interface RefundPayload {
+  amount: number;
+  dateReceived: string;
+}
+
 /**
  * Custom React Hook to upload a new picture.
  */
@@ -438,16 +444,37 @@ export const useSendPendingAdvisorList = () => {
  */
 export const useReportRefund = () => {
   const queryClient = useQueryClient();
-  return useMutation<Reimbursement, Error, { refundAmount: number; dateReceived: string }>(
+  return useMutation<Reimbursement, Error, { amount: number; dateReceived: string }>(
     ['reimbursement'],
-    async (formData: { refundAmount: number; dateReceived: string }) => {
-      const { data } = await reportRefund(formData.refundAmount, formData.dateReceived);
+    async (formData: { amount: number; dateReceived: string }) => {
+      const { data } = await reportRefund(formData.amount, formData.dateReceived);
       queryClient.invalidateQueries(['reimbursement']);
       return data;
     }
   );
 };
 
+/**
+ * Custom react hook to edit a refund
+ * @returns the edited refund
+ */
+export const useEditRefund = (id: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<Reimbursement, Error, { amount: number; dateReceived: string }>(
+    ['reimbursement', 'edit'],
+    async (formData: { amount: number; dateReceived: string }) => {
+      const { data } = await editRefund(id, formData);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['reimbursement']);
+      }
+    }
+  );
+};
+
 /**
  * Custom react hook to update a reimbursement request's SABO number
  *

src/frontend/src/pages/FinancePage/FinanceComponents/EditRefundModal.tsx

@@ -0,0 +1,30 @@
+import { Reimbursement } from 'shared';
+import { useEditRefund } from '../../../hooks/finance.hooks';
+import RefundModal, { RefundModalInputs } from './RefundModal';
+
+interface EditRefundModalProps {
+  refund?: Reimbursement;
+  handleClose: () => void;
+}
+
+const EditRefundModal: React.FC<EditRefundModalProps> = ({ refund, handleClose }: EditRefundModalProps) => {
+  const { mutateAsync, isLoading } = useEditRefund(refund!.reimbursementId);
+
+  const defaultValues: RefundModalInputs | undefined = refund && {
+    amount: (refund.amount / 100).toFixed(2),
+    dateReceived: new Date(refund.dateCreated)
+  };
+
+  return (
+    <RefundModal
+      showModal={!!refund}
+      handleClose={handleClose}
+      mutateAsync={mutateAsync}
+      isLoading={isLoading}
+      defaultValues={defaultValues}
+      title="Edit Refund"
+    />
+  );
+};
+
+export default EditRefundModal;

src/frontend/src/pages/FinancePage/FinanceComponents/RefundModal.tsx

@@ -0,0 +1,140 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import { FormControl, FormLabel } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers';
+import { Controller, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import NERFormModal from '../../../components/NERFormModal';
+import ReactHookTextField from '../../../components/ReactHookTextField';
+import { useToast } from '../../../hooks/toasts.hooks';
+import { Reimbursement } from 'shared';
+import { UseMutateAsyncFunction } from 'react-query';
+
+const schema = yup.object().shape({
+  amount: yup
+    .number()
+    .required('Refund amount is required')
+    .positive('Refund amount must be positive')
+    .test('two decimals', 'Refund amount must have at most two decimal places', (value) => {
+      // technically this allows trailing zeros, but that's fine
+      if (!value) return false;
+
+      const strValue = value.toString();
+      const parts = strValue.split('.');
+      if (parts.length === 1) return true;
+      return parts[1].length <= 2;
+    })
+    .typeError('Refund amount is required'),
+  dateReceived: yup.date().required()
+});
+
+interface RefundModalProps {
+  showModal: boolean;
+  handleClose: () => void;
+  mutateAsync: UseMutateAsyncFunction<
+    Reimbursement,
+    Error,
+    {
+      amount: number;
+      dateReceived: string;
+    },
+    unknown
+  >;
+  isLoading: boolean;
+  defaultValues?: RefundModalInputs;
+  title: string;
+}
+
+export interface RefundModalInputs {
+  amount: string; // this allows us to display default value with 2 decimal places - the type is enforced and casted via the input field and form schema
+  dateReceived: Date;
+}
+
+const RefundModal: React.FC<RefundModalProps> = ({
+  showModal: modalShow,
+  handleClose,
+  mutateAsync,
+  defaultValues,
+  isLoading,
+  title
+}: RefundModalProps) => {
+  const toast = useToast();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isValid },
+    watch,
+    reset
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: defaultValues ?? {
+      amount: '0',
+      dateReceived: new Date()
+    },
+    mode: 'onChange'
+  });
+
+  const handleConfirm = async (data: { amount: number; dateReceived: Date }) => {
+    try {
+      await mutateAsync({
+        amount: Math.round(data.amount * 100),
+        dateReceived: data.dateReceived.toISOString()
+      });
+      toast.success(defaultValues ? 'Account credit updated successfully' : 'New account credit reported successfully');
+      handleClose();
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  return (
+    <NERFormModal
+      open={modalShow}
+      onHide={handleClose}
+      title={title}
+      reset={reset}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={handleConfirm}
+      formId="reimbursement-form"
+      disabled={!isValid || (defaultValues && defaultValues.amount === watch('amount'))}
+    >
+      {isLoading ? (
+        <LoadingIndicator />
+      ) : (
+        <FormControl>
+          <FormLabel>Amount</FormLabel>
+          <ReactHookTextField
+            name="amount"
+            type="number"
+            control={control}
+            sx={{ width: 1 }}
+            startAdornment={<AttachMoneyIcon />}
+            errorMessage={errors.amount}
+          />
+
+          <FormLabel sx={{ paddingTop: 2 }}>Date Received</FormLabel>
+          <Controller
+            name="dateReceived"
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => (
+              <DatePicker
+                format="yyyy-MM-dd"
+                onChange={(e) => onChange(e ?? new Date())}
+                className={'padding: 10'}
+                value={value}
+                slotProps={{ textField: { autoComplete: 'off' } }}
+              />
+            )}
+          />
+        </FormControl>
+      )}
+    </NERFormModal>
+  );
+};
+
+export default RefundModal;