feature: allow program to be restored after deletion

Author: weilu

src/actions.js

@@ -292,6 +292,22 @@ export function deleteBenefitPlan(benefitPlan, clientMutationLabel) {
   );
 }
 
+export function undoDeleteBenefitPlan(benefitPlan, clientMutationLabel) {
+  const benefitPlanUuids = `ids: ["${benefitPlan?.id}"]`;
+  const mutation = formatMutation('undoDeleteBenefitPlan', benefitPlanUuids, clientMutationLabel);
+  const requestedDateTime = new Date();
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.UNDO_DELETE_BENEFIT_PLAN), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.UNDO_DELETE_BENEFIT_PLAN,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
 export function closeBenefitPlan(benefitPlan, clientMutationLabel) {
   const benefitPlanUuids = `ids: ["${benefitPlan?.id}"]`;
   const mutation = formatMutation('closeBenefitPlan', benefitPlanUuids, clientMutationLabel);

src/components/BenefitPlanSearcher.js

@@ -17,13 +17,14 @@ import { connect } from 'react-redux';
 import { IconButton, Tooltip } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
+import UndoIcon from '@material-ui/icons/Undo';
 import {
   DEFAULT_PAGE_SIZE,
   RIGHT_BENEFIT_PLAN_DELETE,
   RIGHT_BENEFIT_PLAN_UPDATE,
   ROWS_PER_PAGE_OPTIONS,
 } from '../constants';
-import { deleteBenefitPlan, fetchBenefitPlans } from '../actions';
+import { deleteBenefitPlan, undoDeleteBenefitPlan, fetchBenefitPlans } from '../actions';
 import BenefitPlanFilter from './BenefitPlanFilter';
 
 function BenefitPlanSearcher({
@@ -39,6 +40,7 @@ function BenefitPlanSearcher({
   mutation,
   fetchBenefitPlans,
   deleteBenefitPlan,
+  undoDeleteBenefitPlan,
   fetchingBenefitPlans,
   errorBenefitPlans,
   benefitPlans,
@@ -49,7 +51,10 @@ function BenefitPlanSearcher({
   beneficiaryStatus,
 }) {
   const [benefitPlanToDelete, setBenefitPlanToDelete] = useState(null);
+  const [benefitPlanToUndo, setBenefitPlanToUndo] = useState(null);
   const [deletedBenefitPlanUuids, setDeletedBenefitPlanUuids] = useState([]);
+  const [undoBenefitPlanUuids, setUndoBenefitPlanUuids] = useState([]);
+  const [activeFilters, setActiveFilters] = useState([]);
   const prevSubmittingMutationRef = useRef();
 
   const openDeleteBenefitPlanConfirmDialog = () => coreConfirm(
@@ -60,7 +65,16 @@ function BenefitPlanSearcher({
     formatMessage(intl, 'socialProtection', 'benefitPlan.delete.confirm.message'),
   );
 
+  const openUndoBenefitPlanConfirmDialog = () => coreConfirm(
+    formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.undo.confirm.title', {
+      code: benefitPlanToUndo.code,
+      name: benefitPlanToUndo.name,
+    }),
+    formatMessage(intl, 'socialProtection', 'benefitPlan.undo.confirm.message'),
+  );
+
   useEffect(() => benefitPlanToDelete && openDeleteBenefitPlanConfirmDialog(), [benefitPlanToDelete]);
+  useEffect(() => benefitPlanToUndo && openUndoBenefitPlanConfirmDialog(), [benefitPlanToUndo]);
 
   useEffect(() => {
     if (benefitPlanToDelete && confirmed) {
@@ -72,9 +86,21 @@ function BenefitPlanSearcher({
       );
       setDeletedBenefitPlanUuids([...deletedBenefitPlanUuids, benefitPlanToDelete.id]);
     }
+    if (benefitPlanToUndo && confirmed) {
+      undoDeleteBenefitPlan(
+        benefitPlanToUndo,
+        formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.undo.mutationLabel', {
+          name: benefitPlanToUndo?.name,
+        }),
+      );
+      setUndoBenefitPlanUuids([...undoBenefitPlanUuids, benefitPlanToUndo.id]);
+    }
     if (benefitPlanToDelete && confirmed !== null) {
       setBenefitPlanToDelete(null);
     }
+    if (benefitPlanToUndo && confirmed !== null) {
+      setBenefitPlanToUndo(null);
+    }
     return () => confirmed && clearConfirm(false);
   }, [confirmed]);
 
@@ -102,6 +128,9 @@ function BenefitPlanSearcher({
     if (rights.includes(RIGHT_BENEFIT_PLAN_UPDATE)) {
       headers.push('emptyLabel');
     }
+    if (rights.includes(RIGHT_BENEFIT_PLAN_DELETE)) {
+      headers.push('emptyLabel');
+    }
     return headers;
   };
 
@@ -115,6 +144,7 @@ function BenefitPlanSearcher({
       && historyPush(modulesManager, history, 'socialProtection.route.benefitPlan', [benefitPlan?.id], newTab);
 
   const onDelete = (benefitPlan) => setBenefitPlanToDelete(benefitPlan);
+  const onUndo = (benefitPlan) => setBenefitPlanToUndo(benefitPlan);
 
   const itemFormatters = () => {
     const formatters = [
@@ -139,16 +169,25 @@ function BenefitPlanSearcher({
       ));
     }
     if (rights.includes(RIGHT_BENEFIT_PLAN_DELETE)) {
-      formatters.push((benefitPlan) => (
-        <Tooltip title={formatMessage(intl, 'benefitPlan', 'deleteButtonTooltip')}>
+      formatters.push((benefitPlan) => (!benefitPlan?.isDeleted ? (
+        <Tooltip title={formatMessage(intl, 'socialProtection', 'deleteButtonTooltip')}>
           <IconButton
             onClick={() => onDelete(benefitPlan)}
             disabled={deletedBenefitPlanUuids.includes(benefitPlan.id)}
           >
             <DeleteIcon />
           </IconButton>
         </Tooltip>
-      ));
+      ) : (
+        <Tooltip title={formatMessage(intl, 'socialProtection', 'undoButtonTooltip')}>
+          <IconButton
+            onClick={() => onUndo(benefitPlan)}
+            disabled={undoBenefitPlanUuids.includes(benefitPlan.id)}
+          >
+            <UndoIcon />
+          </IconButton>
+        </Tooltip>
+      )));
     }
     return formatters;
   };
@@ -164,7 +203,8 @@ function BenefitPlanSearcher({
     ['maxBeneficiaries', true],
   ];
 
-  const isRowDisabled = (_, benefitPlan) => deletedBenefitPlanUuids.includes(benefitPlan.id);
+  const isRowDisabled = (_, benefitPlan) => deletedBenefitPlanUuids.includes(benefitPlan.id)
+    || undoBenefitPlanUuids.includes(benefitPlan.id);
 
   const defaultFilters = () => ({
     isDeleted: {
@@ -201,12 +241,23 @@ function BenefitPlanSearcher({
     />
   );
 
+  const onFiltersApplied = (appliedFilters) => {
+    setActiveFilters(appliedFilters);
+    setDeletedBenefitPlanUuids([]);
+    setUndoBenefitPlanUuids([]);
+  };
+
+  const isDeletedFilterActive = !!activeFilters?.isDeleted?.value;
+  const items = benefitPlans.filter((bp) => (
+    isDeletedFilterActive ? !undoBenefitPlanUuids.includes(bp.id) : !deletedBenefitPlanUuids.includes(bp.id)
+  ));
+
   return (
     <Searcher
       module="socialProtection"
       FilterPane={benefitPlanFilter}
       fetch={fetch}
-      items={benefitPlans}
+      items={items}
       itemsPageInfo={benefitPlansPageInfo}
       fetchedItems={fetchingBenefitPlans}
       errorItems={errorBenefitPlans}
@@ -224,6 +275,7 @@ function BenefitPlanSearcher({
       defaultFilters={defaultFilters()}
       rowDisabled={isRowDisabled}
       rowLocked={isRowDisabled}
+      onFiltersApplied={onFiltersApplied}
     />
   );
 }
@@ -243,6 +295,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators(
   {
     fetchBenefitPlans,
     deleteBenefitPlan,
+    undoDeleteBenefitPlan,
     coreConfirm,
     clearConfirm,
     journalize,

src/pages/BenefitPlanPage.js

@@ -16,13 +16,15 @@ import _ from 'lodash';
 import { withTheme, withStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import PauseIcon from '@material-ui/icons/Pause';
+import UndoIcon from '@material-ui/icons/Undo';
 import {
   BENEFIT_PLAN_BENEFICIARIES_LIST_TAB_VALUE,
   RIGHT_BENEFICIARY_SEARCH,
   RIGHT_BENEFIT_PLAN_UPDATE,
 } from '../constants';
 import {
   fetchBenefitPlan, deleteBenefitPlan, closeBenefitPlan, updateBenefitPlan, clearBenefitPlan, createBenefitPlan,
+  undoDeleteBenefitPlan,
 } from '../actions';
 import BenefitPlanHeadPanel from '../components/BenefitPlanHeadPanel';
 import BenefitPlanTabPanel from '../components/BenefitPlanTabPanel';
@@ -42,6 +44,7 @@ function BenefitPlanPage({
   benefitPlan,
   fetchBenefitPlan,
   deleteBenefitPlan,
+  undoDeleteBenefitPlan,
   closeBenefitPlan,
   updateBenefitPlan,
   coreConfirm,
@@ -78,7 +81,10 @@ function BenefitPlanPage({
   useEffect(() => {
     if (prevSubmittingMutationRef.current && !submittingMutation) {
       journalize(mutation);
-      if (mutation?.actionType === ACTION_TYPE.DELETE_BENEFIT_PLAN) {
+      if ([
+        ACTION_TYPE.DELETE_BENEFIT_PLAN,
+        ACTION_TYPE.UNDO_DELETE_BENEFIT_PLAN,
+      ].includes(mutation?.actionType)) {
         back();
       }
     }
@@ -181,6 +187,24 @@ function BenefitPlanPage({
     );
   };
 
+  const undoDeleteBenefitPlanCallback = () => undoDeleteBenefitPlan(
+    benefitPlan,
+    formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.undo.mutationLabel', {
+      name: benefitPlan?.name,
+    }),
+  );
+
+  const openUndoBenefitPlanConfirmDialog = () => {
+    setConfirmedAction(() => undoDeleteBenefitPlanCallback);
+    coreConfirm(
+      formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.undo.confirm.title', {
+        code: benefitPlan?.code,
+        name: benefitPlan?.name,
+      }),
+      formatMessage(intl, 'socialProtection', 'benefitPlan.undo.confirm.message'),
+    );
+  };
+
   const [childActiveTab, setChildActiveTab] = useState(BENEFIT_PLAN_BENEFICIARIES_LIST_TAB_VALUE);
 
   const getBenefitPlanPanels = () => {
@@ -192,11 +216,17 @@ function BenefitPlanPage({
   };
 
   const actions = [
-    !!benefitPlan && {
-      doIt: openDeleteBenefitPlanConfirmDialog,
-      icon: <DeleteIcon />,
-      tooltip: formatMessage(intl, 'socialProtection', 'deleteButtonTooltip'),
-    }, !!benefitPlan && {
+    !!benefitPlan && (
+      benefitPlan.isDeleted ? {
+        doIt: openUndoBenefitPlanConfirmDialog,
+        icon: <UndoIcon />,
+        tooltip: formatMessage(intl, 'socialProtection', 'undoButtonTooltip'),
+      } : {
+        doIt: openDeleteBenefitPlanConfirmDialog,
+        icon: <DeleteIcon />,
+        tooltip: formatMessage(intl, 'socialProtection', 'deleteButtonTooltip'),
+      }),
+    !!benefitPlan && !benefitPlan.isDeleted && {
       doIt: openStopBenefitPlanConfirmDialog,
       icon: <PauseIcon />,
       tooltip: formatMessage(intl, 'socialProtection', 'stopButtonTooltip'),
@@ -227,7 +257,7 @@ function BenefitPlanPage({
         rights={rights}
         actions={actions}
         setConfirmedAction={setConfirmedAction}
-        readOnly={!!benefitPlanUuid}
+        readOnly={!!benefitPlanUuid || editedBenefitPlan?.isDeleted}
         saveTooltip={formatMessage(
           intl,
           'socialProtection',
@@ -259,6 +289,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   fetchBenefitPlan,
   clearBenefitPlan,
   deleteBenefitPlan,
+  undoDeleteBenefitPlan,
   closeBenefitPlan,
   updateBenefitPlan,
   coreConfirm,

src/reducer.js

@@ -22,6 +22,7 @@ export const ACTION_TYPE = {
   GET_BENEFIT_PLAN: 'BENEFIT_PLAN_BENEFIT_PLAN',
   CREATE_BENEFIT_PLAN: 'BENEFIT_PLAN_CREATE_BENEFIT_PLAN',
   DELETE_BENEFIT_PLAN: 'BENEFIT_PLAN_DELETE_BENEFIT_PLAN',
+  UNDO_DELETE_BENEFIT_PLAN: 'BENEFIT_PLAN_UNDO_DELETE_BENEFIT_PLAN',
   CLOSE_BENEFIT_PLAN: 'BENEFIT_PLAN_CLOSE_BENEFIT_PLAN',
   UPDATE_BENEFIT_PLAN: 'BENEFIT_PLAN_UPDATE_BENEFIT_PLAN',
   BENEFIT_PLAN_CODE_FIELDS_VALIDATION: 'BENEFIT_PLAN_CODE_FIELDS_VALIDATION',
@@ -1000,6 +1001,8 @@ function reducer(
       return dispatchMutationResp(state, 'createBenefitPlan', action);
     case SUCCESS(ACTION_TYPE.DELETE_BENEFIT_PLAN):
       return dispatchMutationResp(state, 'deleteBenefitPlan', action);
+    case SUCCESS(ACTION_TYPE.UNDO_DELETE_BENEFIT_PLAN):
+      return dispatchMutationResp(state, 'undoDeleteBenefitPlan', action);
     case SUCCESS(ACTION_TYPE.UPDATE_BENEFIT_PLAN):
       return dispatchMutationResp(state, 'updateBenefitPlan', action);
     case SUCCESS(ACTION_TYPE.UPDATE_BENEFICIARY):

src/translations/en.json

@@ -3,6 +3,9 @@
   "socialProtection.benefitPlan.delete.confirm.title": "Delete program {code} {name}",
   "socialProtection.benefitPlan.delete.confirm.message": "Are you sure you want to delete the program?",
   "socialProtection.benefitPlan.delete.mutationLabel": "Delete program {id}",
+  "socialProtection.benefitPlan.undo.confirm.title": "Restore program {code} {name}?",
+  "socialProtection.benefitPlan.undo.confirm.message": "This will undo the deletion and make the program active again. Do you want to continue?",
+  "socialProtection.benefitPlan.undo.mutationLabel": "Restore program {name}",
   "socialProtection.benefitPlan.update.mutationLabel": "Update program {id}",
   "socialProtection.benefitPlan.create.mutationLabel": "Create program {id}",
   "socialProtection.benefitPlan.searcherResultsTitle": "{benefitPlansTotalCount} Programs",
@@ -108,7 +111,9 @@
   "socialProtection.benefitPlan.suspend.confirm.title": "Suspend program {code} {name}",
   "socialProtection.benefitPlan.suspend.confirm.message": "Are you sure you want to suspend the program?",
   "socialProtection.benefitPlan.stopButtonTooltip": "Suspend",
+  "socialProtection.deleteButtonTooltip": "Delete",
   "socialProtection.stopButtonTooltip": "Suspend",
+  "socialProtection.undoButtonTooltip": "Restore",
   "socialProtection.benefitPackage.benefitPackageBenefitsTab.label": "Benefits",
   "socialProtection.benefitPlan.benefitPlanBeneficiaries.uploadHistoryTable.user": "User Uploaded",
   "socialProtection.resolveAllRemainingTasks": "Bulk Task Resolve",