From f6546a888454d1dd75f244a51d1e806ae3966d7c Mon Sep 17 00:00:00 2001
From: Jeremy Walters <jeremywa@proton.me>
Date: Tue, 28 Oct 2025 13:43:49 -0400
Subject: [PATCH]  fix: use standardized removal modal for custom sections

  Replace simple confirmation modal with RemoveSectionItemModal to allow
  editors to select from standardized removal reasons instead of always
  defaulting to Other. This aligns custom section removal flow with ML
  sections.
---
 .../CustomSectionDetails.tsx                  | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/curated-corpus/components/CustomSectionDetails/CustomSectionDetails.tsx b/src/curated-corpus/components/CustomSectionDetails/CustomSectionDetails.tsx
index 0aef19ce..77c3ed2a 100644
--- a/src/curated-corpus/components/CustomSectionDetails/CustomSectionDetails.tsx
+++ b/src/curated-corpus/components/CustomSectionDetails/CustomSectionDetails.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
+import { FormikHelpers, FormikValues } from 'formik';
 import {
   Box,
   Typography,
@@ -23,8 +24,6 @@ import {
   SectionStatus,
   CreateSectionItemInput,
   CreateApprovedCorpusItemInput,
-  RemoveSectionItemInput,
-  SectionItemRemovalReason,
   useGetSectionsWithSectionItemsQuery,
   useCreateSectionItemMutation,
   useCreateApprovedCorpusItemMutation,
@@ -43,7 +42,7 @@ import {
   DuplicateProspectModal,
   EditCustomSectionModal,
   DeleteConfirmationModal,
-  RemoveItemConfirmationModal,
+  RemoveSectionItemModal,
 } from '..';
 import { HandleApiResponse } from '../../../_shared/components';
 import { useToggle, useRunMutation } from '../../../_shared/hooks';
@@ -686,43 +685,41 @@ export const CustomSectionDetails: React.FC<CustomSectionDetailsProps> = ({
         }}
       />
 
-      {/* Remove Item Confirmation Modal */}
-      <RemoveItemConfirmationModal
-        open={removeItemModalOpen}
-        onClose={() => {
-          toggleRemoveItemModal();
-          setItemToRemove(undefined);
-        }}
-        onConfirm={async () => {
-          if (itemToRemove) {
-            // TODO(HNT-1126): Align this removal flow with the ML section modal so editors
-            // can pick from the standardized removal reasons instead of defaulting to Other.
-            const input: RemoveSectionItemInput = {
-              externalId: itemToRemove.externalId,
-              deactivateReasons: [SectionItemRemovalReason.Other],
-            };
-
-            await runMutation(
+      {/* Remove Item Modal - reuses the same modal as ML sections */}
+      {itemToRemove && (
+        <RemoveSectionItemModal
+          itemTitle={itemToRemove.approvedItem.title}
+          isOpen={removeItemModalOpen}
+          onSave={(values: FormikValues, formikHelpers: FormikHelpers<any>) => {
+            // Run the mutation with the selected removal reasons from the form
+            runMutation(
               removeItemMutation,
               {
                 variables: {
-                  data: input,
+                  data: {
+                    externalId: itemToRemove.externalId,
+                    deactivateReasons: values.removalReasons,
+                  },
                 },
               },
               'Item removed from section successfully',
               () => {
                 toggleRemoveItemModal();
                 setItemToRemove(undefined);
+                formikHelpers.setSubmitting(false);
                 refetch();
               },
               () => {
-                toggleRemoveItemModal();
+                formikHelpers.setSubmitting(false);
               },
             );
-          }
-        }}
-        itemTitle={itemToRemove?.approvedItem?.title}
-      />
+          }}
+          toggleModal={() => {
+            toggleRemoveItemModal();
+            setItemToRemove(undefined);
+          }}
+        />
+      )}
     </Box>
   );
 };