From a790c0e15a138457f8a182781121484c248d7389 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 6 Dec 2023 03:59:23 +0530 Subject: [PATCH 1/6] Add confirmation modal when user cancels a task --- src/pages/home/HeaderView.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 5b57419c8530..8cb504a0c4b0 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -19,6 +19,7 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton'; import Text from '@components/Text'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import Tooltip from '@components/Tooltip'; +import ConfirmModal from '@components/ConfirmModal'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {getGroupChatName} from '@libs/GroupChatUtils'; @@ -80,6 +81,7 @@ const defaultProps = { }; function HeaderView(props) { + const [isCancelTaskConfirmModalVisible, setIsCancelTaskConfirmModalVisible] = React.useState(false); const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); const {translate} = useLocalize(); const theme = useTheme(); @@ -128,7 +130,7 @@ function HeaderView(props) { threeDotMenuItems.push({ icon: Expensicons.Trashcan, text: translate('common.cancel'), - onSelected: Session.checkIfActionIsAllowed(() => Task.cancelTask(props.report.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)), + onSelected: () => setIsCancelTaskConfirmModalVisible(true), }); } } @@ -283,6 +285,19 @@ function HeaderView(props) { )} + { + setIsCancelTaskConfirmModalVisible(false); + Session.checkIfActionIsAllowed(Task.cancelTask(props.report.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)); + }} + onCancel={() => setIsCancelTaskConfirmModalVisible(false)} + title={translate('task.cancelTask')} + prompt={translate('task.cancelConfirmation')} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} + danger + /> )} From 5a4037cdc37ef1982040258faf53537b4ee96538 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 6 Dec 2023 03:59:54 +0530 Subject: [PATCH 2/6] Add text strings to language files --- src/languages/en.ts | 2 ++ src/languages/es.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index 817f06f6b344..30f87c625044 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1679,6 +1679,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.', + cancelTask: 'Cancel task', + cancelConfirmation: 'Are you sure that you want to cancel this task?', }, statementPage: { title: (year, monthName) => `${monthName} ${year} statement`, diff --git a/src/languages/es.ts b/src/languages/es.ts index b219021daa0f..3f7e24602124 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1703,6 +1703,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.', + cancelTask: 'Cancelar tarea', + cancelConfirmation: '¿Estás seguro de que quieres cancelar esta tarea?', }, statementPage: { title: (year, monthName) => `Estado de cuenta de ${monthName} ${year}`, From 8e85d34d0b7525509132d4a730deca89bc46561d Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 6 Dec 2023 04:04:16 +0530 Subject: [PATCH 3/6] Prettier changes --- src/pages/home/HeaderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 8cb504a0c4b0..f0c6a44fca8e 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import GoogleMeetIcon from '@assets/images/google-meet.svg'; import ZoomIcon from '@assets/images/zoom-icon.svg'; +import ConfirmModal from '@components/ConfirmModal'; import DisplayNames from '@components/DisplayNames'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -19,7 +20,6 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton'; import Text from '@components/Text'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import Tooltip from '@components/Tooltip'; -import ConfirmModal from '@components/ConfirmModal'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {getGroupChatName} from '@libs/GroupChatUtils'; From 375597ed47f98bcdeade201685450f422c26d36f Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 06:58:15 +0530 Subject: [PATCH 4/6] Reorder imports --- src/pages/home/HeaderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index f0f97a1c7e1a..4dad55f0aad1 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -6,8 +6,8 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import GoogleMeetIcon from '@assets/images/google-meet.svg'; import ZoomIcon from '@assets/images/zoom-icon.svg'; -import ConfirmModal from '@components/ConfirmModal'; 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'; From 3398196cabff8abf05dd7589496a1a41bdec6f24 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 07:11:06 +0530 Subject: [PATCH 5/6] Change copy to use the 'Delete' keyword --- src/languages/en.ts | 4 ++-- src/languages/es.ts | 4 ++-- src/pages/home/HeaderView.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index f3c5437bacad..7159198c84f0 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1745,8 +1745,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.', - cancelTask: 'Cancel task', - cancelConfirmation: 'Are you sure that you want to cancel this task?', + 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 index 7b33a2b1e428..8c4e99c24d34 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1771,8 +1771,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.', - cancelTask: 'Cancelar tarea', - cancelConfirmation: '¿Estás seguro de que quieres cancelar esta tarea?', + 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 index 4dad55f0aad1..3ab0a2798eb7 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -325,8 +325,8 @@ function HeaderView(props) { Session.checkIfActionIsAllowed(Task.deleteTask(props.report.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)); }} onCancel={() => setIsCancelTaskConfirmModalVisible(false)} - title={translate('task.cancelTask')} - prompt={translate('task.cancelConfirmation')} + title={translate('task.deleteTask')} + prompt={translate('task.deleteConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} danger From b1e0fa3d3d7d133c5d644be7a8d91a1f7ca74fdd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Thu, 25 Jan 2024 02:48:23 +0530 Subject: [PATCH 6/6] Update state name We update modal state to say Delete instead of Cancel to better reflect the action being taken --- src/pages/home/HeaderView.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 46e0ce180b76..59f682b74488 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -92,7 +92,7 @@ const defaultProps = { }; function HeaderView(props) { - const [isCancelTaskConfirmModalVisible, setIsCancelTaskConfirmModalVisible] = React.useState(false); + const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); const {translate} = useLocalize(); const theme = useTheme(); @@ -140,7 +140,7 @@ function HeaderView(props) { threeDotMenuItems.push({ icon: Expensicons.Trashcan, text: translate('common.delete'), - onSelected: () => setIsCancelTaskConfirmModalVisible(true), + onSelected: () => setIsDeleteTaskConfirmModalVisible(true), }); } } @@ -320,12 +320,12 @@ function HeaderView(props) { { - setIsCancelTaskConfirmModalVisible(false); + setIsDeleteTaskConfirmModalVisible(false); Session.checkIfActionIsAllowed(Task.deleteTask(props.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)); }} - onCancel={() => setIsCancelTaskConfirmModalVisible(false)} + onCancel={() => setIsDeleteTaskConfirmModalVisible(false)} title={translate('task.deleteTask')} prompt={translate('task.deleteConfirmation')} confirmText={translate('common.delete')}