SDP-1453 Delete Draft Disbursement

src/api/deleteDisbursementDraft.ts

@@ -0,0 +1,20 @@
+import { handleApiResponse } from "api/handleApiResponse";
+import { API_URL } from "constants/envVariables";
+import { getSdpTenantName } from "helpers/getSdpTenantName";
+import { ApiDisbursement } from "types";
+
+export const deleteDisbursementDraft = async (
+  token: string,
+  draftId: string,
+): Promise<ApiDisbursement> => {
+  const response = await fetch(`${API_URL}/disbursements/${draftId}`, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+      "SDP-Tenant-Name": getSdpTenantName(),
+    },
+  });
+
+  return handleApiResponse(response);
+};

src/pages/DisbursementDraftDetails.tsx

@@ -1,6 +1,14 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Badge, Heading, Link, Notification } from "@stellar/design-system";
+import {
+  Badge,
+  Heading,
+  Link,
+  Notification,
+  Button,
+  Icon,
+  Modal,
+} from "@stellar/design-system";
 import { useDispatch } from "react-redux";
 import { useRedux } from "hooks/useRedux";
 import { useDownloadCsvFile } from "hooks/useDownloadCsvFile";
@@ -15,6 +23,7 @@ import {
 import {
   clearCsvUpdatedAction,
   clearDisbursementDraftsErrorAction,
+  deleteDisbursementDraftAction,
   resetDisbursementDraftsAction,
   saveNewCsvFileAction,
   setDraftIdAction,
@@ -61,6 +70,8 @@ export const DisbursementDraftDetails = () => {
   const [isResponseSuccess, setIsResponseSuccess] = useState<boolean>(false);
   const [futureBalance, setFutureBalance] = useState<number>(0);
 
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+
   const dispatch: AppDispatch = useDispatch();
   const navigate = useNavigate();
   const { isLoading: csvDownloadIsLoading } = useDownloadCsvFile(
@@ -259,6 +270,31 @@ export const DisbursementDraftDetails = () => {
     );
   };
 
+  const handleDeleteDraft = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    event.preventDefault();
+    if (draftId) {
+      dispatch(deleteDisbursementDraftAction(draftId));
+      setIsDeleteModalVisible(false);
+      navigate(Routes.DISBURSEMENT_DRAFTS);
+    }
+  };
+
+  const showDeleteModal = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    event.preventDefault();
+    setIsDeleteModalVisible(true);
+  };
+
+  const hideDeleteModal = (
+    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    event?.preventDefault();
+    setIsDeleteModalVisible(false);
+  };
+
   const renderButtons = (variant: DisbursementStep) => {
     const canUserSubmit = organization.data.isApprovalRequired
       ? // If approval is required, a different user must submit the draft
@@ -437,6 +473,15 @@ export const DisbursementDraftDetails = () => {
             >
               <Badge variant="pending">Changes saved</Badge>
             </Toast>
+            <Button
+              variant="error"
+              size="sm"
+              icon={<Icon.Delete />}
+              onClick={showDeleteModal}
+              isLoading={disbursementDrafts.status === "PENDING"}
+            >
+              Delete Draft
+            </Button>
           </SectionHeader.Content>
         </SectionHeader.Row>
       </SectionHeader>
@@ -460,6 +505,34 @@ export const DisbursementDraftDetails = () => {
       ) : null}
 
       {renderContent()}
+
+      <Modal visible={isDeleteModalVisible} onClose={hideDeleteModal}>
+        <Modal.Heading>Delete draft permanently?</Modal.Heading>
+        <Modal.Body>
+          <div>
+            Clicking 'Delete draft' will permanently remove this draft and
+            cannot be undone.
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={hideDeleteModal}
+            isLoading={disbursementDrafts.status === "PENDING"}
+          >
+            Not now
+          </Button>
+          <Button
+            size="sm"
+            variant="error"
+            onClick={(event) => handleDeleteDraft(event)}
+            isLoading={disbursementDrafts.status === "PENDING"}
+          >
+            Delete draft
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </>
   );
 };

src/store/ducks/disbursementDrafts.ts

@@ -1,5 +1,6 @@
 import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { RootState } from "store";
+import { deleteDisbursementDraft } from "api/deleteDisbursementDraft";
 import { getDisbursementDrafts } from "api/getDisbursementDrafts";
 import { postDisbursement } from "api/postDisbursement";
 import { postDisbursementFile } from "api/postDisbursementFile";
@@ -223,6 +224,31 @@ export const submitDisbursementSavedDraftAction = createAsyncThunk<
   },
 );
 
+export const deleteDisbursementDraftAction = createAsyncThunk<
+  void,
+  string,
+  { rejectValue: RejectMessage; state: RootState }
+>(
+  "disbursementDrafts/deleteDisbursementDraftAction",
+  async (draftId, { rejectWithValue, getState, dispatch }) => {
+    const { token } = getState().userAccount;
+
+    try {
+      await deleteDisbursementDraft(token, draftId);
+      refreshSessionToken(dispatch);
+      return;
+    } catch (error: unknown) {
+      const apiError = normalizeApiError(error as ApiError);
+      const errorString = apiError.message;
+      endSessionIfTokenInvalid(errorString, dispatch);
+
+      return rejectWithValue({
+        errorString: `Error deleting draft: ${errorString}`,
+      });
+    }
+  },
+);
+
 const initialState: DisbursementDraftsInitialState = {
   items: [],
   status: undefined,
@@ -357,6 +383,20 @@ const disbursementDraftsSlice = createSlice({
         state.newDraftId = action.payload?.newDraftId;
       },
     );
+    // Delete disbursement draft
+    builder.addCase(deleteDisbursementDraftAction.pending, (state) => {
+      state.status = "PENDING";
+      state.actionType = "delete";
+    });
+    builder.addCase(deleteDisbursementDraftAction.fulfilled, (state) => {
+      state.status = "SUCCESS";
+      state.actionType = "delete";
+    });
+    builder.addCase(deleteDisbursementDraftAction.rejected, (state, action) => {
+      state.status = "ERROR";
+      state.actionType = "delete";
+      state.errorString = action.payload?.errorString;
+    });
   },
 });
 

src/types/index.ts

@@ -219,7 +219,7 @@ export const VerificationFieldMap: Record<
   NATIONAL_ID_NUMBER: "National ID Number",
 };
 
-export type DisbursementDraftAction = "save" | "submit";
+export type DisbursementDraftAction = "save" | "submit" | "delete";
 
 export interface DisbursementInstructions {
   csvName?: string;