Merge pull request #32575 from neonbhai/cancel-task-confirmation-changes

Cancel task confirmation changes
Expensify · Jan 29, 2024 · 4421b47 · 4421b47
2 parents 4bbcca8 + b1e0fa3
commit 4421b47
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1770,6 +1770,8 @@ export default {
         markAsIncomplete: 'Mark as incomplete',
         assigneeError: 'There was an error assigning this task, please try another assignee.',
         genericCreateTaskFailureMessage: 'Unexpected error create task, please try again later.',
+        deleteTask: 'Delete task',
+        deleteConfirmation: 'Are you sure that you want to delete this task?',
     },
     statementPage: {
         title: (year, monthName) => `${monthName} ${year} statement`,

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1795,6 +1795,8 @@ export default {
         markAsIncomplete: 'Marcar como incompleta',
         assigneeError: 'Hubo un error al asignar esta tarea, inténtalo con otro usuario.',
         genericCreateTaskFailureMessage: 'Error inesperado al crear el tarea, por favor, inténtalo más tarde.',
+        deleteTask: 'Eliminar tarea',
+        deleteConfirmation: '¿Estás seguro de que quieres eliminar esta tarea?',
     },
     statementPage: {
         title: (year, monthName) => `Estado de cuenta de ${monthName} ${year}`,

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import GoogleMeetIcon from '@assets/images/google-meet.svg';
 import ZoomIcon from '@assets/images/zoom-icon.svg';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import DisplayNames from '@components/DisplayNames';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -91,6 +92,7 @@ const defaultProps = {
 };
 
 function HeaderView(props) {
+    const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false);
     const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -138,7 +140,7 @@ function HeaderView(props) {
             threeDotMenuItems.push({
                 icon: Expensicons.Trashcan,
                 text: translate('common.delete'),
-                onSelected: Session.checkIfActionIsAllowed(() => Task.deleteTask(props.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)),
+                onSelected: () => setIsDeleteTaskConfirmModalVisible(true),
             });
         }
     }
@@ -317,6 +319,19 @@ function HeaderView(props) {
                                     )}
                                 </View>
                             </View>
+                            <ConfirmModal
+                                isVisible={isDeleteTaskConfirmModalVisible}
+                                onConfirm={() => {
+                                    setIsDeleteTaskConfirmModalVisible(false);
+                                    Session.checkIfActionIsAllowed(Task.deleteTask(props.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum));
+                                }}
+                                onCancel={() => setIsDeleteTaskConfirmModalVisible(false)}
+                                title={translate('task.deleteTask')}
+                                prompt={translate('task.deleteConfirmation')}
+                                confirmText={translate('common.delete')}
+                                cancelText={translate('common.cancel')}
+                                danger
+                            />
                         </>
                     )}
                 </View>