From affa78c916a11f0f1dd449519f37aaca046aa754 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 10:31:55 -0700
Subject: [PATCH 01/87] component skeleton, render component in
 ReportActionList, show GBR on open task report LHN options

---
 src/components/LHNOptionsList/OptionRowLHN.js |  2 +-
 src/components/ReportActionItem/TaskAction.js |  2 +-
 .../ReportActionItem/TaskPreview.js           |  9 +-
 src/components/ReportActionItem/TaskView.js   | 50 ++++++++++
 src/components/TaskHeader.js                  | 98 ++++---------------
 src/languages/en.js                           | 10 +-
 src/languages/es.js                           |  9 +-
 src/libs/ReportUtils.js                       | 49 +++++++++-
 src/libs/SidebarUtils.js                      |  1 +
 src/libs/actions/Task.js                      |  5 -
 src/pages/home/HeaderView.js                  | 13 +--
 src/pages/home/report/ReportActionItem.js     |  4 +
 src/pages/tasks/NewTaskDetailsPage.js         |  2 +-
 src/pages/tasks/NewTaskPage.js                |  8 +-
 src/pages/tasks/NewTaskTitlePage.js           |  4 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js  |  2 +-
 src/pages/tasks/TaskDescriptionPage.js        |  2 +-
 src/pages/tasks/TaskTitlePage.js              |  4 +-
 18 files changed, 156 insertions(+), 118 deletions(-)
 create mode 100644 src/components/ReportActionItem/TaskView.js

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 4d5e19299e5c..db4d8f931d89 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -83,7 +83,7 @@ function OptionRowLHN(props) {
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
-    const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
+    const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isOpenTask || optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
 
     /**
      * Show the ReportActionContextMenu modal popover.
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index bdf8f374dde3..cf1cee86abf4 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -50,7 +50,7 @@ function TaskAction(props) {
             messageLinkText = props.translate('task.messages.reopened');
             break;
         default:
-            messageLinkText = props.translate('newTaskPage.task');
+            messageLinkText = props.translate('task.task');
     }
 
     return (
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 2ddf2def5e89..1e330cacfabe 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -15,7 +15,8 @@ import getButtonState from '../../libs/getButtonState';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
+import * as ReportUtils from '../../libs/ReportUtils';
 import RenderHTML from '../RenderHTML';
 
 const propTypes = {
@@ -70,12 +71,12 @@ function TaskPreview(props) {
                     style={[styles.mr2]}
                     containerStyle={[styles.taskCheckbox]}
                     isChecked={isTaskCompleted}
-                    disabled={TaskUtils.isTaskCanceled(props.taskReport)}
+                    disabled={ReportUtils.isCanceledTaskReport(props.taskReport)}
                     onPress={() => {
                         if (isTaskCompleted) {
-                            TaskUtils.reopenTask(props.taskReportID, taskTitle);
+                            Task.reopenTask(props.taskReportID, taskTitle);
                         } else {
-                            TaskUtils.completeTask(props.taskReportID, taskTitle);
+                            Task.completeTask(props.taskReportID, taskTitle);
                         }
                     }}
                 />
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
new file mode 100644
index 000000000000..b8524bc10afe
--- /dev/null
+++ b/src/components/ReportActionItem/TaskView.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import reportPropTypes from '../../pages/reportPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import participantPropTypes from '../participantPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+import compose from '../../libs/compose';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
+    /** Personal details so we can get the ones for the report participants */
+    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+function TaskView(props) {
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                label={props.translate('task.title')}
+                title={props.report.reportName}
+                // description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                // icon={shareDestination.icons}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
+                shouldShowRightIcon
+            />
+            <MenuItemWithTopDescription
+                label={props.translate('task.description')}
+                title={props.report.description}
+                // description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                // icon={shareDestination.icons}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
+                shouldShowRightIcon
+            />
+        </View>
+    );
+}
+
+TaskView.propTypes = propTypes;
+TaskView.displayName = 'TaskView';
+
+export default compose(withWindowDimensions, withLocalize)(TaskView);
\ No newline at end of file
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index a44c841b87da..eadb03c4b99d 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -1,124 +1,62 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Button from './Button';
-import * as TaskUtils from '../libs/actions/Task';
-import * as UserUtils from '../libs/UserUtils';
+import * as Task from '../libs/actions/Task';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
     ...withLocalizePropTypes,
+
+    ...windowDimensionsPropTypes,
 };
 
 function TaskHeader(props) {
     const title = ReportUtils.getReportName(props.report);
-    const assigneeName = ReportUtils.getDisplayNameForParticipant(props.report.managerID);
-    const assigneeAvatar = UserUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerID, 'avatar']), props.report.managerID);
-    const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN;
-    const isCompleted = props.report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum === CONST.REPORT.STATUS.APPROVED;
+    const isOpen = ReportUtils.isOpenTaskReport(props.report);
+    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
+    const isCanceled = ReportUtils.isCanceledTaskReport(props.report);
 
     useEffect(() => {
-        TaskUtils.setTaskReport(props.report);
+        Task.setTaskReport(props.report);
     }, [props.report]);
 
     return (
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
-                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
                         onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
                         disabled={!isOpen}
                         accessibilityRole="button"
-                        accessibilityLabel={props.translate('newTaskPage.assignee')}
+                        accessibilityLabel={props.translate('task.assignee')}
                         hoverDimmingValue={1}
                         pressDimmingValue={0.2}
                     >
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                {!_.isEmpty(props.report.managerID) && (
-                                    <>
-                                        <Avatar
-                                            source={assigneeAvatar}
-                                            type={CONST.ICON_TYPE_AVATAR}
-                                            name={assigneeName}
-                                            size={CONST.AVATAR_SIZE.HEADER}
-                                        />
-                                        <View style={[styles.flexColumn, styles.ml3]}>
-                                            <Text
-                                                style={[styles.headerText, styles.pre]}
-                                                numberOfLines={1}
-                                            >
-                                                {assigneeName}
-                                            </Text>
-                                        </View>
-                                    </>
-                                )}
-                            </View>
-                            <View style={[styles.flexRow]}>
-                                {isCompleted ? (
-                                    <>
-                                        <Text>{props.translate('task.completed')}</Text>
-                                        <View style={styles.moneyRequestHeaderCheckmark}>
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={themeColors.iconSuccessFill}
-                                            />
-                                        </View>
-                                    </>
-                                ) : (
-                                    <Button
-                                        success
-                                        isDisabled={TaskUtils.isTaskCanceled(props.report)}
-                                        medium
-                                        text={props.translate('newTaskPage.markAsDone')}
-                                        onPress={() => TaskUtils.completeTask(props.report.reportID, title)}
-                                    />
-                                )}
-                            </View>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                            <Button
+                                success
+                                isDisabled={isCanceled}
+                                medium
+                                text={props.translate(isCompleted ? 'newTaskPage.markAsIncomplete' : 'newTaskPage.markAsDone')}
+                                onPress={() => isCompleted ? TaskUtils.reopenTask(props.report.reportID, title) : TaskUtils.completeTask(props.report.reportID, title)}
+                                style={props.isSmallScreenWidth && styles.flex1}
+                            />
                         </View>
                     </PressableWithFeedback>
                 </View>
             </View>
-            <MenuItemWithTopDescription
-                shouldShowHeaderTitle
-                title={props.report.reportName}
-                description={props.translate('newTaskPage.task')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
-            <MenuItemWithTopDescription
-                title={lodashGet(props.report, 'description', '')}
-                description={props.translate('newTaskPage.description')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
         </View>
     );
 }
diff --git a/src/languages/en.js b/src/languages/en.js
index 8cde382c49c8..0794e8dd7db3 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1256,15 +1256,12 @@ export default {
         },
     },
     newTaskPage: {
-        task: 'Task',
         assignTask: 'Assign task',
-        assignee: 'Assignee',
         assigneeError: 'There was an error assigning this task, please try another assignee.',
         assignMe: 'Assign to me',
         confirmTask: 'Confirm task',
         confirmError: 'Please enter a title and select a share destination.',
-        title: 'Title',
-        description: 'Description',
+        
         descriptionOptional: 'Description (optional)',
         shareSomewhere: 'Share somewhere',
         pleaseEnterTaskName: 'Please enter a title',
@@ -1273,6 +1270,11 @@ export default {
         pleaseEnterTaskDestination: 'Please select with whom you want to share.',
     },
     task: {
+        task: 'Task',
+        title: 'Title',
+        description: 'Description',
+        createdBy: 'Created By',
+        assignee: 'Assignee',
         completed: 'Completed',
         messages: {
             completed: 'completed task',
diff --git a/src/languages/es.js b/src/languages/es.js
index 791ec5946c4d..9eb1a5ac8364 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1262,15 +1262,11 @@ export default {
         },
     },
     newTaskPage: {
-        task: 'Tarea',
         assignTask: 'Asignar tarea',
-        assignee: 'Cesionario',
         assigneeError: 'Hubo un error al asignar esta tarea, intente con otro cesionario.',
         assignMe: 'Asignar a mí mismo',
         confirmTask: 'Confirmar tarea',
         confirmError: 'Por favor introduce un título y selecciona un destino de tarea.',
-        title: 'Título',
-        description: 'Descripción',
         descriptionOptional: 'Descripción (opcional)',
         shareSomewhere: 'Compartir en algún lugar',
         pleaseEnterTaskName: 'Por favor introduce un título',
@@ -1279,6 +1275,11 @@ export default {
         pleaseEnterTaskDestination: 'Por favor selecciona con quien deseas compartir.',
     },
     task: {
+        task: 'Tarea',
+        createdBy: '', // TODO:
+        title: 'Título',
+        description: 'Descripción',
+        assignee: 'Cesionario',
         completed: 'Completada',
         messages: {
             completed: 'tarea completada',
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 1af14aa1d2a1..7d130b9d8e5a 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -143,6 +143,37 @@ function isTaskReport(report) {
     return lodashGet(report, 'type') === CONST.REPORT.TYPE.TASK;
 }
 
+/**
+ * Checks if a report is an open task report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isOpenTaskReport(report) {
+    return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS.OPEN;
+}
+
+/**
+ * Checks if a report is a canceled task report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isCanceledTaskReport(report) {
+    return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.CLOSED;
+}
+
+/**
+ * Checks if a report is a completed task report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isCompletedTaskReport(report) {
+    return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.APPROVED;
+}
+
+
 /**
  * Checks if a report is an IOU or expense report.
  *
@@ -541,6 +572,16 @@ function isThreadFirstChat(reportAction, reportID) {
     return !_.isUndefined(reportAction.childReportID) && reportAction.childReportID.toString() === reportID;
 }
 
+/**
+ * Checks if a report is a child report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isChildReport(report) {
+    return isThread(report) || isTaskReport(report);
+}
+
 /**
  * Get welcome message based on room type
  * @param {Object} report
@@ -1033,7 +1074,7 @@ function getReportName(report) {
  * @returns {String|*}
  */
 function getDMRootReportName(report) {
-    if (isThread(report) && !getChatType(report)) {
+    if ((isThread(report) || isTaskReport(report)) && !getChatType(report)) {
         const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
         return getDMRootReportName(parentReport);
     }
@@ -1047,7 +1088,7 @@ function getDMRootReportName(report) {
  * @returns {String}
  */
 function getChatRoomSubtitle(report) {
-    if (isThread(report)) {
+    if (isChildReport(report)) {
         if (!getChatType(report)) {
             return `${Localize.translateLocal('threads.from')} ${getDMRootReportName(report)}`;
         }
@@ -2296,6 +2337,9 @@ export {
     isExpenseReport,
     isIOUReport,
     isTaskReport,
+    isOpenTaskReport,
+    isCanceledTaskReport,
+    isCompletedTaskReport,
     isMoneyRequestReport,
     chatIncludesChronos,
     getNewMarkerReportActionID,
@@ -2310,6 +2354,7 @@ export {
     isThread,
     isThreadParent,
     isThreadFirstChat,
+    isChildReport,
     shouldReportShowSubscript,
     isReportDataReady,
     isSettled,
diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
index 31155a11232e..e834c2565f67 100644
--- a/src/libs/SidebarUtils.js
+++ b/src/libs/SidebarUtils.js
@@ -285,6 +285,7 @@ function getOptionData(reportID) {
     result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs || []);
     result.hasOutstandingIOU = report.hasOutstandingIOU;
     result.parentReportID = report.parentReportID || null;
+    result.isOpenTask = Task.isOpenTask(report);
     const hasMultipleParticipants = participantPersonalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
     const subtitle = ReportUtils.getChatRoomSubtitle(report);
 
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index f60aa051035d..8167b1400c35 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -614,10 +614,6 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
     API.write('CancelTask', {taskReportID, optimisticReportActionID}, {optimisticData, failureData});
 }
 
-function isTaskCanceled(taskReport) {
-    return taskReport.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && taskReport.statusNum === CONST.REPORT.STATUS.CLOSED;
-}
-
 /**
  * Closes the current open task modal and clears out the task info from the store.
  */
@@ -643,6 +639,5 @@ export {
     getAssignee,
     getShareDestination,
     cancelTask,
-    isTaskCanceled,
     dismissModalAndClearOutTaskInfo,
 };
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index b12733f64ef8..d601c6694bb1 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -79,6 +79,7 @@ function HeaderView(props) {
     const isChatRoom = ReportUtils.isChatRoom(props.report);
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const isTaskReport = ReportUtils.isTaskReport(props.report);
+    const isChildReport = ReportUtils.isChildReport(props.report);
     const reportHeaderData = !isTaskReport && !isThread && props.report.parentReportID ? props.parentReport : props.report;
     const title = ReportUtils.getReportName(reportHeaderData);
     const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData);
@@ -91,7 +92,7 @@ function HeaderView(props) {
     const shouldShowCallButton = (isConcierge && guideCalendarLink) || (!isAutomatedExpensifyAccount && !isTaskReport);
     const threeDotMenuItems = [];
     if (isTaskReport) {
-        if (props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN) {
+        if (ReportUtils.isOpenTaskReport(props.report)) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
                 text: props.translate('newTaskPage.markAsDone'),
@@ -100,7 +101,7 @@ function HeaderView(props) {
         }
 
         // Task is marked as completed
-        if (props.report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum === CONST.REPORT.STATUS.APPROVED) {
+        if (ReportUtils.isCompletedTaskReport(props.report)) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
                 text: props.translate('newTaskPage.markAsIncomplete'),
@@ -149,7 +150,7 @@ function HeaderView(props) {
                 {Boolean(props.report && title) && (
                     <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <PressableWithoutFeedback
-                            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+                            onPress={() => !isChildReport && ReportUtils.navigateToDetailsPage(props.report)}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
                             disabled={isTaskReport}
                             accessibilityLabel={title}
@@ -175,11 +176,11 @@ function HeaderView(props) {
                                     tooltipEnabled
                                     numberOfLines={1}
                                     textStyles={[styles.headerText, styles.pre]}
-                                    shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isThread || isTaskReport}
+                                    shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChildReport}
                                 />
-                                {(isChatRoom || isPolicyExpenseChat || isThread) && !_.isEmpty(subtitle) && (
+                                {(isChatRoom || isPolicyExpenseChat || isChildReport) && !_.isEmpty(subtitle) && (
                                     <>
-                                        {isThread ? (
+                                        {isChildReport ? (
                                             <PressableWithoutFeedback
                                                 onPress={() => {
                                                     Navigation.navigate(ROUTES.getReportRoute(props.report.parentReportID));
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 802d0d9aa164..9a239e8b37c7 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -53,6 +53,7 @@ import ReportPreview from '../../../components/ReportActionItem/ReportPreview';
 import ReportActionItemDraft from './ReportActionItemDraft';
 import TaskPreview from '../../../components/ReportActionItem/TaskPreview';
 import TaskAction from '../../../components/ReportActionItem/TaskAction';
+import TaskView from '../../../components/ReportActionItem/TaskView';
 import * as Session from '../../../libs/actions/Session';
 import {hideContextMenu} from './ContextMenu/ReportActionContextMenu';
 
@@ -400,6 +401,9 @@ function ReportActionItem(props) {
     };
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
+        if (ReportUtils.isTaskReport(props.report)) {
+            return <TaskView report={props.report} />;
+        }
         return <ReportActionItemCreated reportID={props.report.reportID} />;
     }
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 5b9773270048..f2bf933c4bca 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -93,7 +93,7 @@ function NewTaskPage(props) {
                     <TextInput
                         ref={(el) => (inputRef.current = el)}
                         inputID="taskTitle"
-                        label={props.translate('newTaskPage.title')}
+                        label={props.translate('task.title')}
                         value={taskTitle}
                         onValueChange={(value) => setTaskTitle(value)}
                     />
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 90d635e43ae9..02cb71a26595 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -80,7 +80,7 @@ function NewTaskPage(props) {
         if (props.task.assignee) {
             const assigneeDetails = lodashGet(OptionsListUtils.getPersonalDetailsForAccountIDs([props.task.assigneeAccountID], props.personalDetails), props.task.assigneeAccountID);
             if (!assigneeDetails) {
-                return setErrorMessage(props.translate('newTaskPage.assigneeError'));
+                return setErrorMessage(props.translate('task.assigneeError'));
             }
             const displayDetails = TaskUtils.getAssignee(assigneeDetails);
             setAssignee(displayDetails);
@@ -153,7 +153,7 @@ function NewTaskPage(props) {
             <View style={[styles.mt5, styles.containerWithSpaceBetween]}>
                 <View style={styles.mb5}>
                     <MenuItemWithTopDescription
-                        description={props.translate('newTaskPage.title')}
+                        description={props.translate('task.title')}
                         title={props.task.title || ''}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
                         shouldShowRightIcon
@@ -165,9 +165,9 @@ function NewTaskPage(props) {
                         shouldShowRightIcon
                     />
                     <MenuItem
-                        label={assignee.displayName ? props.translate('newTaskPage.assignee') : ''}
+                        label={assignee.displayName ? props.translate('task.assignee') : ''}
                         title={assignee.displayName || ''}
-                        description={assignee.displayName ? assignee.subtitle : props.translate('newTaskPage.assignee')}
+                        description={assignee.displayName ? assignee.subtitle : props.translate('task.assignee')}
                         icon={assignee.icons}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
                         shouldShowRightIcon
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index b1e7b689f85d..23018876c589 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -77,7 +77,7 @@ function NewTaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
         >
             <HeaderWithBackButton
-                title={props.translate('newTaskPage.title')}
+                title={props.translate('task.title')}
                 onCloseButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
@@ -95,7 +95,7 @@ function NewTaskTitlePage(props) {
                         defaultValue={props.task.title}
                         ref={(el) => (inputRef.current = el)}
                         inputID="taskTitle"
-                        label={props.translate('newTaskPage.title')}
+                        label={props.translate('task.title')}
                     />
                 </View>
             </Form>
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 8c40cba348c0..1ae051ecccdb 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -192,7 +192,7 @@ function TaskAssigneeSelectorModal(props) {
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
                     <HeaderWithBackButton
-                        title={props.translate('newTaskPage.assignee')}
+                        title={props.translate('task.assignee')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 2791358a912d..223b839063e3 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -64,7 +64,7 @@ function TaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
         >
-            <HeaderWithBackButton title={props.translate('newTaskPage.task')} />
+            <HeaderWithBackButton title={props.translate('task.task')} />
             <Form
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.EDIT_TASK_FORM}
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 2a13033886de..c4da344398fe 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -67,7 +67,7 @@ function TaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
         >
-            <HeaderWithBackButton title={props.translate('newTaskPage.task')} />
+            <HeaderWithBackButton title={props.translate('task.task')} />
             <Form
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.EDIT_TASK_FORM}
@@ -80,7 +80,7 @@ function TaskTitlePage(props) {
                     <TextInput
                         inputID="title"
                         name="title"
-                        label={props.translate('newTaskPage.title')}
+                        label={props.translate('task.title')}
                         defaultValue={(props.task.report && props.task.report.reportName) || ''}
                         ref={(el) => (inputRef.current = el)}
                     />

From 20db2938ac24a6c82dd5181120d6d3853cb0d36b Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 17:40:50 -0700
Subject: [PATCH 02/87] remove gbr logic

---
 src/components/LHNOptionsList/OptionRowLHN.js | 2 +-
 src/libs/SidebarUtils.js                      | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index db4d8f931d89..4d5e19299e5c 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -83,7 +83,7 @@ function OptionRowLHN(props) {
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
-    const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isOpenTask || optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
+    const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
 
     /**
      * Show the ReportActionContextMenu modal popover.
diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
index e834c2565f67..31155a11232e 100644
--- a/src/libs/SidebarUtils.js
+++ b/src/libs/SidebarUtils.js
@@ -285,7 +285,6 @@ function getOptionData(reportID) {
     result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs || []);
     result.hasOutstandingIOU = report.hasOutstandingIOU;
     result.parentReportID = report.parentReportID || null;
-    result.isOpenTask = Task.isOpenTask(report);
     const hasMultipleParticipants = participantPersonalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
     const subtitle = ReportUtils.getChatRoomSubtitle(report);
 

From c86cccf3884eb172794abd01cff3ceba9c68b983 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 18:12:25 -0700
Subject: [PATCH 03/87] rename TaskUtils => Task, allow ReportActionItem to
 respond to report updates for task reports, implement title and description
 menu items in taskview

---
 src/components/MenuItem.js                    | 107 +++++++++++-------
 src/components/ReportActionItem/TaskView.js   |  27 +++--
 src/components/TaskHeader.js                  |   2 +-
 src/components/menuItemPropTypes.js           |   9 ++
 src/languages/en.js                           |   2 +-
 src/libs/ReportUtils.js                       |   1 -
 src/pages/home/report/ReportActionCompose.js  |   4 +-
 src/pages/home/report/ReportActionItem.js     |  10 +-
 src/pages/home/report/ReportActionsList.js    |   2 +-
 src/pages/home/report/ReportActionsView.js    |   8 ++
 .../FloatingActionButtonAndPopover.js         |   4 +-
 src/pages/tasks/NewTaskDescriptionPage.js     |   6 +-
 src/pages/tasks/NewTaskDetailsPage.js         |   8 +-
 src/pages/tasks/NewTaskPage.js                |  14 +--
 src/pages/tasks/NewTaskTitlePage.js           |   6 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js  |   8 +-
 src/pages/tasks/TaskDescriptionPage.js        |   6 +-
 .../TaskShareDestinationSelectorModal.js      |   4 +-
 src/pages/tasks/TaskTitlePage.js              |   6 +-
 19 files changed, 144 insertions(+), 90 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index fed55eb8b5e0..376ed3bcfad2 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -14,6 +14,7 @@ import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
+import Checkbox from './Checkbox';
 import colors from '../styles/colors';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
@@ -33,6 +34,8 @@ const defaultProps = {
     badgeText: undefined,
     shouldShowRightIcon: false,
     shouldShowSelectedState: false,
+    shouldUseSquareSelectedState: false,
+    shouldShowSelectedStateBeforeTitle: false,
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
@@ -67,6 +70,7 @@ const defaultProps = {
     hoverAndPressStyle: [],
     furtherDetails: '',
     furtherDetailsIcon: undefined,
+    onPressSelection: () => {},
 };
 
 function MenuItem(props) {
@@ -97,6 +101,19 @@ function MenuItem(props) {
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
+    const selectedState = props.shouldUseSquareSelectedState ? (
+        <Checkbox
+            onPress={() => props.onPressSelection()}
+            isChecked={props.isSelected}
+            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
+        />
+    ) : (
+        <SelectCircle
+            isChecked={props.isSelected}
+            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
+        />
+    );
+
     return (
         <PressableWithSecondaryInteraction
             onPress={Session.checkIfActionIsAllowed((e) => {
@@ -177,60 +194,64 @@ function MenuItem(props) {
                                     )}
                                 </View>
                             )}
-                            <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
-                                {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
-                                )}
-                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                    {Boolean(props.title) && (
+                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                {props.shouldShowSelectedState && props.shouldShowSelectedStateBeforeTitle && selectedState}
+                                <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
+                                    {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
                                         <Text
-                                            style={titleTextStyle}
-                                            numberOfLines={1}
+                                            style={descriptionTextStyle}
+                                            numberOfLines={2}
                                         >
-                                            {convertToLTR(props.title)}
+                                            {props.description}
                                         </Text>
                                     )}
-                                    {Boolean(props.shouldShowTitleIcon) && (
-                                        <View style={[styles.ml2]}>
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        {Boolean(props.title) && (
+                                            <Text
+                                                style={titleTextStyle}
+                                                numberOfLines={1}
+                                            >
+                                                {convertToLTR(props.title)}
+                                            </Text>
+                                        )}
+                                        {Boolean(props.shouldShowTitleIcon) && (
+                                            <View style={[styles.ml2]}>
+                                                <Icon
+                                                    src={props.titleIcon}
+                                                    fill={themeColors.iconSuccessFill}
+                                                />
+                                            </View>
+                                        )}
+                                    </View>
+                                    {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
+                                        <Text
+                                            style={descriptionTextStyle}
+                                            numberOfLines={2}
+                                        >
+                                            {props.description}
+                                        </Text>
+                                    )}
+                                    {Boolean(props.furtherDetails) && (
+                                        <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
                                             <Icon
-                                                src={props.titleIcon}
-                                                fill={themeColors.iconSuccessFill}
+                                                src={props.furtherDetailsIcon}
+                                                height={variables.iconSizeNormal}
+                                                width={variables.iconSizeNormal}
+                                                inline
                                             />
+                                            <Text
+                                                style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
+                                                numberOfLines={2}
+                                            >
+                                                {props.furtherDetails}
+                                            </Text>
                                         </View>
                                     )}
                                 </View>
-                                {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
-                                )}
-                                {Boolean(props.furtherDetails) && (
-                                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
-                                        <Icon
-                                            src={props.furtherDetailsIcon}
-                                            height={variables.iconSizeNormal}
-                                            width={variables.iconSizeNormal}
-                                            inline
-                                        />
-                                        <Text
-                                            style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
-                                            numberOfLines={2}
-                                        >
-                                            {props.furtherDetails}
-                                        </Text>
-                                    </View>
-                                )}
                             </View>
                         </View>
                     </View>
+
                     <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
                         {Boolean(props.badgeText) && (
                             <Badge
@@ -272,7 +293,7 @@ function MenuItem(props) {
                                 />
                             </View>
                         )}
-                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
+                        {props.shouldShowSelectedState && !props.shouldShowSelectedStateBeforeTitle && selectedState}
                     </View>
                 </>
             )}
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index b8524bc10afe..14e4e411b4cf 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -10,33 +10,42 @@ import compose from '../../libs/compose';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import styles from '../../styles/styles';
+import * as ReportUtils from '../../libs/ReportUtils';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
     ...withLocalizePropTypes,
 };
 
 function TaskView(props) {
+    const taskTitle = props.report.reportName;
     return (
         <View>
             <MenuItemWithTopDescription
                 label={props.translate('task.title')}
-                title={props.report.reportName}
-                // description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
-                // icon={shareDestination.icons}
+                title={taskTitle}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
                 shouldShowRightIcon
+                shouldShowSelectedState
+                shouldShowSelectedStateBeforeTitle
+                shouldUseSquareSelectedState
+                titleStyle={styles.newKansasLarge}
+                isSelected={ReportUtils.isCompletedTaskReport(props.report)}
+                onPressSelection={() => {
+                    if (ReportUtils.isCompletedTaskReport(props.report)) {
+                        Task.reopenTask(props.taskReportID, taskTitle);
+                    } else {
+                        Task.completeTask(props.taskReportID, taskTitle);
+                    }
+                }}
             />
             <MenuItemWithTopDescription
                 label={props.translate('task.description')}
                 title={props.report.description}
-                // description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
-                // icon={shareDestination.icons}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon
             />
@@ -47,4 +56,4 @@ function TaskView(props) {
 TaskView.propTypes = propTypes;
 TaskView.displayName = 'TaskView';
 
-export default compose(withWindowDimensions, withLocalize)(TaskView);
\ No newline at end of file
+export default compose(withWindowDimensions, withLocalize)(TaskView);
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index eadb03c4b99d..85c5966086f5 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -50,7 +50,7 @@ function TaskHeader(props) {
                                 isDisabled={isCanceled}
                                 medium
                                 text={props.translate(isCompleted ? 'newTaskPage.markAsIncomplete' : 'newTaskPage.markAsDone')}
-                                onPress={() => isCompleted ? TaskUtils.reopenTask(props.report.reportID, title) : TaskUtils.completeTask(props.report.reportID, title)}
+                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, title) : Task.completeTask(props.report.reportID, title))}
                                 style={props.isSmallScreenWidth && styles.flex1}
                             />
                         </View>
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 3909f446c907..6100cef675d4 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -48,6 +48,12 @@ const propTypes = {
     /** Should we make this selectable with a checkbox */
     shouldShowSelectedState: PropTypes.bool,
 
+    /** Should the selected state be a square or circular checkbox */
+    shouldUseSquareSelectedState: PropTypes.bool,
+
+    /** Should the selected state display before or after the title */
+    shouldShowSelectedStateBeforeTitle: PropTypes.bool,
+
     /** Should the title show with normal font weight (not bold) */
     shouldShowBasicTitle: PropTypes.bool,
 
@@ -119,6 +125,9 @@ const propTypes = {
 
     /** An icon to display under the main item */
     furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+
+    /** Callback for when the selection state is pressed/changed */
+    onPressSelection: PropTypes.func,
 };
 
 export default propTypes;
diff --git a/src/languages/en.js b/src/languages/en.js
index 0794e8dd7db3..8f7a650d5222 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1261,7 +1261,7 @@ export default {
         assignMe: 'Assign to me',
         confirmTask: 'Confirm task',
         confirmError: 'Please enter a title and select a share destination.',
-        
+
         descriptionOptional: 'Description (optional)',
         shareSomewhere: 'Share somewhere',
         pleaseEnterTaskName: 'Please enter a title',
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 7d130b9d8e5a..70d1aeeb3037 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -173,7 +173,6 @@ function isCompletedTaskReport(report) {
     return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.APPROVED;
 }
 
-
 /**
  * Checks if a report is an IOU or expense report.
  *
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 344b14289c0d..38afc26d3a48 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -50,7 +50,7 @@ import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import * as ComposerUtils from '../../../libs/ComposerUtils';
 import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
-import * as TaskUtils from '../../../libs/actions/Task';
+import * as Task from '../../../libs/actions/Task';
 import * as Browser from '../../../libs/Browser';
 import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 
@@ -424,7 +424,7 @@ class ReportActionCompose extends React.Component {
             {
                 icon: Expensicons.Task,
                 text: this.props.translate('newTaskPage.assignTask'),
-                onSelected: () => TaskUtils.clearOutTaskInfoAndNavigate(this.props.reportID),
+                onSelected: () => Task.clearOutTaskInfoAndNavigate(this.props.reportID),
             },
         ];
     }
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 9a239e8b37c7..d9432c219348 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -530,6 +530,14 @@ export default compose(
             _.isEqual(prevProps.action, nextProps.action) &&
             lodashGet(prevProps.report, 'statusNum') === lodashGet(nextProps.report, 'statusNum') &&
             lodashGet(prevProps.report, 'stateNum') === lodashGet(nextProps.report, 'stateNum') &&
-            prevProps.translate === nextProps.translate,
+            prevProps.translate === nextProps.translate &&
+            // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport
+            ReportUtils.isTaskReport(prevProps.report) &&
+            prevProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
+            ReportUtils.isTaskReport(nextProps.report) &&
+            nextProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
+            prevProps.report.reportName === nextProps.report.reportName &&
+            prevProps.report.description === nextProps.report.description &&
+            ReportUtils.isCompletedTaskReport(prevProps.report) !== ReportUtils.isCompletedTaskReport(nextProps.report),
     ),
 );
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index c3288c3eeb6a..a89943e7ef87 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -141,7 +141,7 @@ function ReportActionsList(props) {
                 />
             );
         },
-        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID],
+        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID, props.report.reportName],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 1b737c2fd8c2..fa2140868cf2 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -180,6 +180,14 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
+        if (lodashGet(this.props, 'report.reportName') !== lodashGet(nextProps, 'report.reportName')) {
+            return true;
+        }
+
+        if (lodashGet(this.props, 'report.description') !== lodashGet(nextProps, 'report.description')) {
+            return true;
+        }
+
         return !_.isEqual(lodashGet(this.props.report, 'icons', []), lodashGet(nextProps.report, 'icons', []));
     }
 
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 4b05411c412c..52adceb32410 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -20,7 +20,7 @@ import ONYXKEYS from '../../../../ONYXKEYS';
 import withNavigation from '../../../../components/withNavigation';
 import * as Welcome from '../../../../libs/actions/Welcome';
 import withNavigationFocus from '../../../../components/withNavigationFocus';
-import * as TaskUtils from '../../../../libs/actions/Task';
+import * as Task from '../../../../libs/actions/Task';
 import * as Session from '../../../../libs/actions/Session';
 
 /**
@@ -216,7 +216,7 @@ class FloatingActionButtonAndPopover extends React.Component {
                                   {
                                       icon: Expensicons.Task,
                                       text: this.props.translate('newTaskPage.assignTask'),
-                                      onSelected: () => this.interceptAnonymousUser(() => TaskUtils.clearOutTaskInfoAndNavigate()),
+                                      onSelected: () => this.interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()),
                                   },
                               ]
                             : []),
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index e18615a34ffe..f8e02d2e8f01 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -13,7 +13,7 @@ import Form from '../../components/Form';
 import TextInput from '../../components/TextInput';
 import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Beta features list */
@@ -52,7 +52,7 @@ function NewTaskDescriptionPage(props) {
     // On submit, we want to call the assignTask function and wait to validate
     // the response
     const onSubmit = (values) => {
-        TaskUtils.setDescriptionValue(values.taskDescription);
+        Task.setDescriptionValue(values.taskDescription);
         Navigation.navigate(ROUTES.NEW_TASK);
     };
 
@@ -73,7 +73,7 @@ function NewTaskDescriptionPage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.description')}
-                onCloseButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
+                onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
             />
             <Form
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index f2bf933c4bca..367c7346dbb0 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -14,7 +14,7 @@ import Form from '../../components/Form';
 import TextInput from '../../components/TextInput';
 import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Beta features list */
@@ -62,7 +62,7 @@ function NewTaskPage(props) {
     // On submit, we want to call the assignTask function and wait to validate
     // the response
     function onSubmit(values) {
-        TaskUtils.setDetailsValue(values.taskTitle, values.taskDescription);
+        Task.setDetailsValue(values.taskTitle, values.taskDescription);
         Navigation.navigate(ROUTES.NEW_TASK);
     }
 
@@ -77,9 +77,9 @@ function NewTaskPage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.assignTask')}
-                onCloseButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
+                onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
                 shouldShowBackButton
-                onBackButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
+                onBackButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
             />
             <Form
                 formID={ONYXKEYS.FORMS.NEW_TASK_FORM}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 02cb71a26595..a5ca1f055dfe 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -16,7 +16,7 @@ import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription';
 import MenuItem from '../../components/MenuItem';
 import reportPropTypes from '../reportPropTypes';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
 
@@ -82,28 +82,28 @@ function NewTaskPage(props) {
             if (!assigneeDetails) {
                 return setErrorMessage(props.translate('task.assigneeError'));
             }
-            const displayDetails = TaskUtils.getAssignee(assigneeDetails);
+            const displayDetails = Task.getAssignee(assigneeDetails);
             setAssignee(displayDetails);
         }
 
         // If we don't have an assignee and we are creating a task from a report
         // this allows us to auto assign a participant of the report.
         if (!props.task.assignee && props.task.parentReportID) {
-            TaskUtils.setAssigneeValueWithParentReportID(props.task.parentReportID);
+            Task.setAssigneeValueWithParentReportID(props.task.parentReportID);
         }
 
         // We only set the parentReportID if we are creating a task from a report
         // this allows us to go ahead and set that report as the share destination
         // and disable the share destination selector
         if (props.task.parentReportID) {
-            TaskUtils.setShareDestinationValue(props.task.parentReportID);
+            Task.setShareDestinationValue(props.task.parentReportID);
         }
 
         // If we have a share destination, we want to set the parent report and
         // the share destination data
         if (props.task.shareDestination) {
             setParentReport(lodashGet(props.reports, `report_${props.task.shareDestination}`, {}));
-            const displayDetails = TaskUtils.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails);
+            const displayDetails = Task.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails);
             setShareDestination(displayDetails);
         }
     }, [props]);
@@ -126,7 +126,7 @@ function NewTaskPage(props) {
             return;
         }
 
-        TaskUtils.createTaskAndNavigate(
+        Task.createTaskAndNavigate(
             props.session.email,
             props.session.accountID,
             parentReport.reportID,
@@ -146,7 +146,7 @@ function NewTaskPage(props) {
         <ScreenWrapper>
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.confirmTask')}
-                onCloseButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
+                onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK_DETAILS)}
             />
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 23018876c589..d49679a6a4a6 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -14,7 +14,7 @@ import Form from '../../components/Form';
 import TextInput from '../../components/TextInput';
 import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Beta features list */
@@ -57,7 +57,7 @@ function NewTaskTitlePage(props) {
     // On submit, we want to call the assignTask function and wait to validate
     // the response
     function onSubmit(values) {
-        TaskUtils.setTitleValue(values.taskTitle);
+        Task.setTitleValue(values.taskTitle);
         Navigation.navigate(ROUTES.getNewTaskRoute());
     }
 
@@ -78,7 +78,7 @@ function NewTaskTitlePage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('task.title')}
-                onCloseButtonPress={() => TaskUtils.dismissModalAndClearOutTaskInfo()}
+                onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
             />
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 1ae051ecccdb..ec9e080ff58b 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -19,7 +19,7 @@ import reportPropTypes from '../reportPropTypes';
 import Performance from '../../libs/Performance';
 import ROUTES from '../../ROUTES';
 
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Beta features list */
@@ -173,7 +173,7 @@ function TaskAssigneeSelectorModal(props) {
         if (!props.route.params && option.accountID) {
             // Clear out the state value, set the assignee and navigate back to the NewTaskPage
             setSearchValue('');
-            TaskUtils.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+            Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
             return Navigation.goBack();
         }
 
@@ -181,9 +181,9 @@ function TaskAssigneeSelectorModal(props) {
         if (props.route.params.reportID && props.task.report.reportID === props.route.params.reportID) {
             // There was an issue where sometimes a new assignee didn't have a DM thread
             // This would cause the app to crash, so we need to make sure we have a DM thread
-            TaskUtils.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+            Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
             // Pass through the selected assignee
-            TaskUtils.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID});
+            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID});
         }
     };
 
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 223b839063e3..6e0856b69d1e 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -11,7 +11,7 @@ import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
 import compose from '../../libs/compose';
 import reportPropTypes from '../reportPropTypes';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Current user session */
@@ -39,9 +39,9 @@ function TaskDescriptionPage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the description of the report in the store and then call TaskUtils.editTaskReport
+            // Set the description of the report in the store and then call Task.editTaskReport
             // to update the description of the report on the server
-            TaskUtils.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {description: values.description});
+            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {description: values.description});
         },
         [props],
     );
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index cb2f500195a0..d2382ebfff16 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -17,7 +17,7 @@ import compose from '../../libs/compose';
 import personalDetailsPropType from '../personalDetailsPropType';
 import reportPropTypes from '../reportPropTypes';
 import Performance from '../../libs/Performance';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 import ROUTES from '../../ROUTES';
 
 const propTypes = {
@@ -132,7 +132,7 @@ function TaskShareDestinationSelectorModal(props) {
         if (option.reportID) {
             // Clear out the state value, set the assignee and navigate back to the NewTaskPage
             setSearchValue('');
-            TaskUtils.setShareDestinationValue(option.reportID);
+            Task.setShareDestinationValue(option.reportID);
             Navigation.goBack();
         }
     };
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index c4da344398fe..18c27a44e658 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -12,7 +12,7 @@ import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
 import reportPropTypes from '../reportPropTypes';
 import compose from '../../libs/compose';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
     /** Task Report Info */
@@ -53,9 +53,9 @@ function TaskTitlePage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the description of the report in the store and then call TaskUtils.editTaskReport
+            // Set the description of the report in the store and then call Task.editTaskReport
             // to update the description of the report on the server
-            TaskUtils.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {title: values.title});
+            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {title: values.title});
         },
         [props],
     );

From 2a512f1f25973d6e6528223ec6456d286da4b9db Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 18:52:59 -0700
Subject: [PATCH 04/87] add and use TaskHeaderActionButton

---
 src/components/ReportActionItem/TaskView.js | 13 ++----
 src/components/TaskHeader.js                | 31 +------------
 src/components/TaskHeaderActionButton.js    | 51 +++++++++++++++++++++
 src/pages/home/HeaderView.js                |  5 +-
 src/pages/home/ReportScreen.js              |  2 +-
 src/pages/home/report/ReportActionItem.js   |  2 +-
 src/pages/home/report/ReportActionsList.js  |  2 +-
 7 files changed, 63 insertions(+), 43 deletions(-)
 create mode 100644 src/components/TaskHeaderActionButton.js

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 14e4e411b4cf..3a8b593e8bfb 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -23,8 +23,9 @@ const propTypes = {
 
 function TaskView(props) {
     const taskTitle = props.report.reportName;
+    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     return (
-        <View>
+        <View style={[styles.borderBottom]}>
             <MenuItemWithTopDescription
                 label={props.translate('task.title')}
                 title={taskTitle}
@@ -34,14 +35,8 @@ function TaskView(props) {
                 shouldShowSelectedStateBeforeTitle
                 shouldUseSquareSelectedState
                 titleStyle={styles.newKansasLarge}
-                isSelected={ReportUtils.isCompletedTaskReport(props.report)}
-                onPressSelection={() => {
-                    if (ReportUtils.isCompletedTaskReport(props.report)) {
-                        Task.reopenTask(props.taskReportID, taskTitle);
-                    } else {
-                        Task.completeTask(props.taskReportID, taskTitle);
-                    }
-                }}
+                isSelected={isCompleted}
+                onPressSelection={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
             />
             <MenuItemWithTopDescription
                 label={props.translate('task.description')}
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 85c5966086f5..7080458fced0 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -2,16 +2,12 @@ import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Button from './Button';
 import * as Task from '../libs/actions/Task';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import TaskHeaderActionButton from './TaskHeaderActionButton';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -23,11 +19,6 @@ const propTypes = {
 };
 
 function TaskHeader(props) {
-    const title = ReportUtils.getReportName(props.report);
-    const isOpen = ReportUtils.isOpenTaskReport(props.report);
-    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
-    const isCanceled = ReportUtils.isCanceledTaskReport(props.report);
-
     useEffect(() => {
         Task.setTaskReport(props.report);
     }, [props.report]);
@@ -36,25 +27,7 @@ function TaskHeader(props) {
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
-                    <PressableWithFeedback
-                        onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                        disabled={!isOpen}
-                        accessibilityRole="button"
-                        accessibilityLabel={props.translate('task.assignee')}
-                        hoverDimmingValue={1}
-                        pressDimmingValue={0.2}
-                    >
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-                            <Button
-                                success
-                                isDisabled={isCanceled}
-                                medium
-                                text={props.translate(isCompleted ? 'newTaskPage.markAsIncomplete' : 'newTaskPage.markAsDone')}
-                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, title) : Task.completeTask(props.report.reportID, title))}
-                                style={props.isSmallScreenWidth && styles.flex1}
-                            />
-                        </View>
-                    </PressableWithFeedback>
+                    <TaskHeaderActionButton report={props.report} />
                 </View>
             </View>
         </View>
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
new file mode 100644
index 000000000000..78c741fc2827
--- /dev/null
+++ b/src/components/TaskHeaderActionButton.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {View} from 'react-native';
+import reportPropTypes from '../pages/reportPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import styles from '../styles/styles';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Button from './Button';
+import * as Task from '../libs/actions/Task';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import * as ReportUtils from '../libs/ReportUtils';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+function TaskHeaderActionButton(props) {
+    return (
+        <PressableWithFeedback
+            onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
+            disabled={!ReportUtils.isOpenTaskReport(props.report)}
+            accessibilityRole="button"
+            accessibilityLabel={props.translate('task.assignee')}
+            hoverDimmingValue={1}
+            pressDimmingValue={0.2}
+        >
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                <Button
+                    success
+                    isDisabled={ReportUtils.isCanceledTaskReport(props.report)}
+                    medium
+                    text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'newTaskPage.markAsIncomplete' : 'newTaskPage.markAsDone')}
+                    onPress={() =>
+                        ReportUtils.isCompletedTaskReport(props.report)
+                            ? Task.reopenTask(props.report.reportID, props.report.reportName)
+                            : Task.completeTask(props.report.reportID, props.report.reportName)
+                    }
+                    style={[styles.flex1]}
+                />
+            </View>
+        </PressableWithFeedback>
+    );
+}
+
+TaskHeaderActionButton.propTypes = propTypes;
+TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
+
+export default withLocalize(TaskHeaderActionButton);
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index d601c6694bb1..38092f53c021 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -31,6 +31,7 @@ import PressableWithoutFeedback from '../../components/Pressable/PressableWithou
 import PinButton from '../../components/PinButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
@@ -150,9 +151,8 @@ function HeaderView(props) {
                 {Boolean(props.report && title) && (
                     <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <PressableWithoutFeedback
-                            onPress={() => !isChildReport && ReportUtils.navigateToDetailsPage(props.report)}
+                            onPress={() => (isTaskReport ? Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID)) : ReportUtils.navigateToDetailsPage(props.report))}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
-                            disabled={isTaskReport}
                             accessibilityLabel={title}
                             accessibilityRole="button"
                         >
@@ -216,6 +216,7 @@ function HeaderView(props) {
                             )}
                         </PressableWithoutFeedback>
                         <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
+                            {isTaskReport && !props.isSmallScreenWidth && <TaskHeaderActionButton report={props.report} />}
                             {shouldShowCallButton && (
                                 <VideoChatButtonAndMenu
                                     isConcierge={isConcierge}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index d3fb665ecb48..9fb14f2511ec 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -278,7 +278,7 @@ class ReportScreen extends React.Component {
                             />
                         )}
 
-                        {ReportUtils.isTaskReport(this.props.report) && (
+                        {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
                             <TaskHeader
                                 report={this.props.report}
                                 personalDetails={this.props.personalDetails}
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index d9432c219348..ee6206379a0f 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -538,6 +538,6 @@ export default compose(
             nextProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
             prevProps.report.reportName === nextProps.report.reportName &&
             prevProps.report.description === nextProps.report.description &&
-            ReportUtils.isCompletedTaskReport(prevProps.report) !== ReportUtils.isCompletedTaskReport(nextProps.report),
+            ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report),
     ),
 );
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index a89943e7ef87..c3288c3eeb6a 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -141,7 +141,7 @@ function ReportActionsList(props) {
                 />
             );
         },
-        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID, props.report.reportName],
+        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.

From 7a6c0514aebb529980ae8fb021b0bdbcfc7aabaa Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 19:50:39 -0700
Subject: [PATCH 05/87] fix translations

---
 src/components/ReportActionItem/TaskView.js |  5 ++++-
 src/components/TaskHeader.js                |  7 +------
 src/languages/en.js                         |  1 -
 src/libs/actions/Task.js                    | 12 +++++++-----
 src/pages/home/report/ReportActionItem.js   |  2 +-
 src/pages/tasks/NewTaskDescriptionPage.js   |  2 +-
 src/pages/tasks/NewTaskPage.js              |  4 ++--
 src/pages/tasks/TaskTitlePage.js            | 17 +++++++----------
 8 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 3a8b593e8bfb..72a19d52cf84 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import participantPropTypes from '../participantPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -13,11 +12,15 @@ import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as Task from '../../libs/actions/Task';
+import personalDetailsPropType from '../../pages/personalDetailsPropType';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
+    /** Personal details of all users */
+    personalDetails: PropTypes.objectOf(personalDetailsPropType).isRequired,
+
     ...withLocalizePropTypes,
 };
 
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 7080458fced0..36257da3fb3c 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -6,7 +6,6 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
-import * as Task from '../libs/actions/Task';
 import TaskHeaderActionButton from './TaskHeaderActionButton';
 
 const propTypes = {
@@ -19,10 +18,6 @@ const propTypes = {
 };
 
 function TaskHeader(props) {
-    useEffect(() => {
-        Task.setTaskReport(props.report);
-    }, [props.report]);
-
     return (
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
diff --git a/src/languages/en.js b/src/languages/en.js
index 8f7a650d5222..08c0eeab81a0 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1261,7 +1261,6 @@ export default {
         assignMe: 'Assign to me',
         confirmTask: 'Confirm task',
         confirmError: 'Please enter a title and select a share destination.',
-
         descriptionOptional: 'Description (optional)',
         shareSomewhere: 'Share somewhere',
         pleaseEnterTaskName: 'Please enter a title',
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 8167b1400c35..bd0872dfa11d 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -321,6 +321,12 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
         }
     }
 
+    const editedReport = {
+        reportName,
+        description: reportDescription,
+        managerID: assigneeAccountID || report.managerID,
+    };
+
     const optimisticData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -330,11 +336,7 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`,
-            value: {
-                reportName,
-                description: reportDescription,
-                managerID: assigneeAccountID || report.managerID,
-            },
+            value: editedReport,
         },
     ];
     const successData = [];
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index ee6206379a0f..653c22c3ae3c 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -402,7 +402,7 @@ function ReportActionItem(props) {
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         if (ReportUtils.isTaskReport(props.report)) {
-            return <TaskView report={props.report} />;
+            return <TaskView report={props.report} personalDetails={props.personalDetails} />;
         }
         return <ReportActionItemCreated reportID={props.report.reportID} />;
     }
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index f8e02d2e8f01..cc8571072eb8 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -72,7 +72,7 @@ function NewTaskDescriptionPage(props) {
             }}
         >
             <HeaderWithBackButton
-                title={props.translate('newTaskPage.description')}
+                title={props.translate('task.description')}
                 onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
             />
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index a5ca1f055dfe..dbf5e0181bca 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -80,7 +80,7 @@ function NewTaskPage(props) {
         if (props.task.assignee) {
             const assigneeDetails = lodashGet(OptionsListUtils.getPersonalDetailsForAccountIDs([props.task.assigneeAccountID], props.personalDetails), props.task.assigneeAccountID);
             if (!assigneeDetails) {
-                return setErrorMessage(props.translate('task.assigneeError'));
+                return setErrorMessage(props.translate('newTaskPage.assigneeError'));
             }
             const displayDetails = Task.getAssignee(assigneeDetails);
             setAssignee(displayDetails);
@@ -159,7 +159,7 @@ function NewTaskPage(props) {
                         shouldShowRightIcon
                     />
                     <MenuItemWithTopDescription
-                        description={props.translate('newTaskPage.description')}
+                        description={props.translate('task.description')}
                         title={props.task.description || ''}
                         onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
                         shouldShowRightIcon
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 18c27a44e658..c1260ebd1acf 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -15,11 +15,8 @@ import compose from '../../libs/compose';
 import * as Task from '../../libs/actions/Task';
 
 const propTypes = {
-    /** Task Report Info */
-    task: PropTypes.shape({
-        /** Title of the Task */
-        report: reportPropTypes,
-    }),
+    /** The report currently being looked at */
+    report: reportPropTypes,
 
     /** Current user session */
     session: PropTypes.shape({
@@ -32,7 +29,7 @@ const propTypes = {
 
 const defaultProps = {
     session: {},
-    task: {},
+    report: {},
 };
 
 function TaskTitlePage(props) {
@@ -55,7 +52,7 @@ function TaskTitlePage(props) {
         (values) => {
             // Set the description of the report in the store and then call Task.editTaskReport
             // to update the description of the report on the server
-            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {title: values.title});
+            Task.editTaskAndNavigate(props.report, props.session.email, props.session.accountID, {title: values.title});
         },
         [props],
     );
@@ -81,7 +78,7 @@ function TaskTitlePage(props) {
                         inputID="title"
                         name="title"
                         label={props.translate('task.title')}
-                        defaultValue={(props.task.report && props.task.report.reportName) || ''}
+                        defaultValue={(props.report && props.report.reportName) || ''}
                         ref={(el) => (inputRef.current = el)}
                     />
                 </View>
@@ -99,8 +96,8 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
-        task: {
-            key: ONYXKEYS.TASK,
+        report: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
         },
     }),
 )(TaskTitlePage);

From 9f292766da59293c8160f33d10e791cc29a5a3e0 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 19:54:07 -0700
Subject: [PATCH 06/87] remove unused

---
 src/components/TaskHeader.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 36257da3fb3c..7080458fced0 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -6,6 +6,7 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
+import * as Task from '../libs/actions/Task';
 import TaskHeaderActionButton from './TaskHeaderActionButton';
 
 const propTypes = {
@@ -18,6 +19,10 @@ const propTypes = {
 };
 
 function TaskHeader(props) {
+    useEffect(() => {
+        Task.setTaskReport(props.report);
+    }, [props.report]);
+
     return (
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>

From 11e24e3cdfcc349b4282b58ad9038d1b250ee38d Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 19:56:37 -0700
Subject: [PATCH 07/87] remove unused

---
 src/libs/actions/Task.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index bd0872dfa11d..8167b1400c35 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -321,12 +321,6 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
         }
     }
 
-    const editedReport = {
-        reportName,
-        description: reportDescription,
-        managerID: assigneeAccountID || report.managerID,
-    };
-
     const optimisticData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -336,7 +330,11 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`,
-            value: editedReport,
+            value: {
+                reportName,
+                description: reportDescription,
+                managerID: assigneeAccountID || report.managerID,
+            },
         },
     ];
     const successData = [];

From 0542182a0be749bd963bccd880767bab1c47d195 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 20:08:00 -0700
Subject: [PATCH 08/87] merge main

---
 src/components/TaskHeader.js | 70 ------------------------------------
 1 file changed, 70 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 778591b7c10c..7080458fced0 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -1,10 +1,5 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
-<<<<<<< HEAD
-=======
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
->>>>>>> 7b00c47ee7debf7137417ac768efe8d4c6b872d0
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import styles from '../styles/styles';
@@ -24,15 +19,6 @@ const propTypes = {
 };
 
 function TaskHeader(props) {
-<<<<<<< HEAD
-=======
-    const title = ReportUtils.getReportName(props.report);
-    const assigneeName = ReportUtils.getDisplayNameForParticipant(props.report.managerID);
-    const assigneeAvatar = UserUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerID, 'avatar']), props.report.managerID);
-    const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN;
-    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
-
->>>>>>> 7b00c47ee7debf7137417ac768efe8d4c6b872d0
     useEffect(() => {
         Task.setTaskReport(props.report);
     }, [props.report]);
@@ -41,63 +27,7 @@ function TaskHeader(props) {
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
-<<<<<<< HEAD
                     <TaskHeaderActionButton report={props.report} />
-=======
-                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
-                    <PressableWithFeedback
-                        onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                        disabled={!isOpen}
-                        accessibilityRole="button"
-                        accessibilityLabel={props.translate('newTaskPage.assignee')}
-                        hoverDimmingValue={1}
-                        pressDimmingValue={0.2}
-                    >
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                {props.report.managerID && props.report.managerID > 0 && (
-                                    <>
-                                        <Avatar
-                                            source={assigneeAvatar}
-                                            type={CONST.ICON_TYPE_AVATAR}
-                                            name={assigneeName}
-                                            size={CONST.AVATAR_SIZE.HEADER}
-                                        />
-                                        <View style={[styles.flexColumn, styles.ml3]}>
-                                            <Text
-                                                style={[styles.headerText, styles.pre]}
-                                                numberOfLines={1}
-                                            >
-                                                {assigneeName}
-                                            </Text>
-                                        </View>
-                                    </>
-                                )}
-                            </View>
-                            <View style={[styles.flexRow]}>
-                                {isCompleted ? (
-                                    <>
-                                        <Text>{props.translate('task.completed')}</Text>
-                                        <View style={styles.moneyRequestHeaderCheckmark}>
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={themeColors.iconSuccessFill}
-                                            />
-                                        </View>
-                                    </>
-                                ) : (
-                                    <Button
-                                        success
-                                        isDisabled={TaskUtils.isTaskCanceled(props.report)}
-                                        medium
-                                        text={props.translate('newTaskPage.markAsDone')}
-                                        onPress={() => TaskUtils.completeTask(props.report.reportID, title)}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    </PressableWithFeedback>
->>>>>>> 7b00c47ee7debf7137417ac768efe8d4c6b872d0
                 </View>
             </View>
         </View>

From 5df849ec109793139958f2c608f3b2ba4a5f1543 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 20:09:39 -0700
Subject: [PATCH 09/87] style

---
 src/pages/home/report/ReportActionItem.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 653c22c3ae3c..06fcc795c321 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -402,7 +402,12 @@ function ReportActionItem(props) {
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         if (ReportUtils.isTaskReport(props.report)) {
-            return <TaskView report={props.report} personalDetails={props.personalDetails} />;
+            return (
+                <TaskView
+                    report={props.report}
+                    personalDetails={props.personalDetails}
+                />
+            );
         }
         return <ReportActionItemCreated reportID={props.report.reportID} />;
     }

From ba7027fa1a25bc1d1f667f54585e051320bdd4e3 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 20:15:43 -0700
Subject: [PATCH 10/87] remove unused

---
 src/components/TaskHeader.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 7080458fced0..36257da3fb3c 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -6,7 +6,6 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
-import * as Task from '../libs/actions/Task';
 import TaskHeaderActionButton from './TaskHeaderActionButton';
 
 const propTypes = {
@@ -19,10 +18,6 @@ const propTypes = {
 };
 
 function TaskHeader(props) {
-    useEffect(() => {
-        Task.setTaskReport(props.report);
-    }, [props.report]);
-
     return (
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>

From a86e4b8c6528706982428c73fa74f3e7fd987e97 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 21:31:10 -0700
Subject: [PATCH 11/87] remove unused

---
 src/components/ReportActionItem/TaskPreview.js | 6 +++---
 src/components/ReportActionItem/TaskView.js    | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 42cb3120a2bf..1e330cacfabe 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -54,7 +54,7 @@ function TaskPreview(props) {
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
     // Other linked reportActions will only contain the taskReportID and we will grab the details from there
-    const isCompletedTaskReport = props.taskReport
+    const isTaskCompleted = props.taskReport
         ? props.taskReport.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.taskReport.statusNum === CONST.REPORT.STATUS.APPROVED
         : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
     const taskTitle = props.taskReport.reportName || props.action.childReportName;
@@ -70,10 +70,10 @@ function TaskPreview(props) {
                 <Checkbox
                     style={[styles.mr2]}
                     containerStyle={[styles.taskCheckbox]}
-                    isChecked={isCompletedTaskReport}
+                    isChecked={isTaskCompleted}
                     disabled={ReportUtils.isCanceledTaskReport(props.taskReport)}
                     onPress={() => {
-                        if (isCompletedTaskReport) {
+                        if (isTaskCompleted) {
                             Task.reopenTask(props.taskReportID, taskTitle);
                         } else {
                             Task.completeTask(props.taskReportID, taskTitle);
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 72a19d52cf84..5c373483ef9d 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
@@ -11,6 +10,7 @@ import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as Task from '../../libs/actions/Task';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';
 
@@ -47,6 +47,12 @@ function TaskView(props) {
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon
             />
+            <MenuItemWithTopDescription
+                label={props.translate('task.createdBy')}
+                title={OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails)}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
+                shouldShowRightIcon
+            />
         </View>
     );
 }

From e47e33e2790b9eafdbb2a552d1b314a3c8564ffd Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 22:26:58 -0700
Subject: [PATCH 12/87] add created by and assignee to task view

---
 src/components/MenuItem.js                   |  5 +--
 src/components/ReportActionItem/TaskView.js  | 32 +++++++++++++++-----
 src/pages/home/report/ReportActionItem.js    |  3 +-
 src/pages/home/report/ReportActionsView.js   |  4 +++
 src/pages/tasks/TaskAssigneeSelectorModal.js |  3 ++
 src/styles/StyleUtils.js                     | 14 +++++++++
 6 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 376ed3bcfad2..e55851e8a38c 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -163,7 +163,7 @@ function MenuItem(props) {
                                 />
                             )}
                             {Boolean(props.icon) && !_.isArray(props.icon) && (
-                                <View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
+                                <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize || CONST.AVATAR_SIZE.DEFAULT)]}>
                                     {props.iconType === CONST.ICON_TYPE_ICON && (
                                         <Icon
                                             src={props.icon}
@@ -187,9 +187,10 @@ function MenuItem(props) {
                                     )}
                                     {props.iconType === CONST.ICON_TYPE_AVATAR && (
                                         <Avatar
-                                            imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
+                                            imageStyles={[styles.alignSelfCenter]}
                                             source={props.icon}
                                             fallbackIcon={props.fallbackIcon}
+                                            size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     )}
                                 </View>
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 5c373483ef9d..ebb299e76f6c 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
@@ -10,23 +9,27 @@ import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as Task from '../../libs/actions/Task';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
-    /** Personal details of all users */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType).isRequired,
-
     ...withLocalizePropTypes,
+
+    personalDetails: personalDetailsPropType.isRequired,
 };
 
 function TaskView(props) {
+    useEffect(() => {
+        Task.setTaskReport(props.report);
+    }, [props.report]);
+
     const taskTitle = props.report.reportName;
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
+
     return (
         <View style={[styles.borderBottom]}>
             <MenuItemWithTopDescription
@@ -49,8 +52,21 @@ function TaskView(props) {
             />
             <MenuItemWithTopDescription
                 label={props.translate('task.createdBy')}
-                title={OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails)}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
+                title={ReportUtils.getDisplayNameForParticipant(props.report.ownerAccountID)}
+                icon={ReportUtils.getIconsForParticipants([props.report.ownerEmail], props.personalDetails)[0].source}
+                iconType={CONST.ICON_TYPE_AVATAR}
+                avatarSize={CONST.AVATAR_SIZE.SMALL}
+                titleStyle={styles.textStrong}
+                interactive={false}
+            />
+            <MenuItemWithTopDescription
+                label={props.translate('task.assignee')}
+                title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
+                icon={ReportUtils.getIconsForParticipants([props.report.managerEmail], props.personalDetails)[0].source}
+                iconType={CONST.ICON_TYPE_AVATAR}
+                avatarSize={CONST.AVATAR_SIZE.SMALL}
+                titleStyle={styles.textStrong}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
                 shouldShowRightIcon
             />
         </View>
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 06fcc795c321..4871c46b07c1 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -543,6 +543,7 @@ export default compose(
             nextProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
             prevProps.report.reportName === nextProps.report.reportName &&
             prevProps.report.description === nextProps.report.description &&
-            ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report),
+            ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
+            prevProps.report.managerID === nextProps.report.managerID,
     ),
 );
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 27971f831516..ddc8718546c7 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -189,6 +189,10 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
+        if (lodashGet(this.props, 'report.managerID') !== lodashGet(nextProps, 'report.managerID')) {
+            return true;
+        }
+
         return !_.isEqual(lodashGet(this.props.report, 'icons', []), lodashGet(nextProps.report, 'icons', []));
     }
 
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index ec9e080ff58b..c0cdd101b92e 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -57,6 +57,8 @@ const propTypes = {
         report: reportPropTypes,
     }),
 
+    onBackButtonPress: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -67,6 +69,7 @@ const defaultProps = {
     session: {},
     route: {},
     task: {},
+    onBackButtonPress: () => {},
 };
 
 function TaskAssigneeSelectorModal(props) {
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 2feed7b9b8d8..3229479c728c 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -93,6 +93,19 @@ function getEmptyAvatarStyle(size) {
     return emptyAvatarStyles[size];
 }
 
+/**
+ * Return the width style from an avatar size constant
+ *
+ * @param {String} size
+ * @returns {Object}
+ */
+function getAvatarWidthStyle(size) {
+    const avatarSize = getAvatarSize(size);
+    return {
+        width: avatarSize,
+    };
+}
+
 /**
  * Return the style from an avatar size constant
  *
@@ -1186,6 +1199,7 @@ function getOuterModalStyle(windowHeight, viewportOffsetTop) {
 
 export {
     getAvatarSize,
+    getAvatarWidthStyle,
     getAvatarStyle,
     getAvatarExtraFontSizeStyle,
     getAvatarBorderWidth,

From 69b505ffc40e664b135cdbd275769b0133433953 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 15 Jun 2023 23:16:09 -0700
Subject: [PATCH 13/87] fix task preview assignee selection

---
 src/components/ReportActionItem/TaskView.js  | 2 +-
 src/libs/actions/Task.js                     | 3 ++-
 src/pages/home/report/ReportActionItem.js    | 3 ++-
 src/pages/home/report/ReportActionsView.js   | 4 ++++
 src/pages/tasks/TaskAssigneeSelectorModal.js | 7 ++-----
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ebb299e76f6c..ca185c4d3aa3 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -24,7 +24,7 @@ const propTypes = {
 
 function TaskView(props) {
     useEffect(() => {
-        Task.setTaskReport(props.report);
+        Task.setTaskReport({...props.report, isExistingTaskReport: true});
     }, [props.report]);
 
     const taskTitle = props.report.reportName;
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 575de680bb22..5fa1f5ed7889 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -297,7 +297,7 @@ function reopenTask(taskReportID, taskTitle) {
  * @param {String} editedTask.assignee
  * @param {Number} editedTask.assigneeAccountID
  */
-function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee, assigneeAccountID = 0}) {
+function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee, assigneeAccountID = 0, assigneeEmail = ''}) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(ownerEmail);
 
@@ -335,6 +335,7 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
                 reportName,
                 description: reportDescription,
                 managerID: assigneeAccountID || report.managerID,
+                managerEmail: assigneeEmail || report.managerEmail,
             },
         },
     ];
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 4871c46b07c1..b034e7baa958 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -544,6 +544,7 @@ export default compose(
             prevProps.report.reportName === nextProps.report.reportName &&
             prevProps.report.description === nextProps.report.description &&
             ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
-            prevProps.report.managerID === nextProps.report.managerID,
+            prevProps.report.managerID === nextProps.report.managerID &&
+            prevProps.report.managerEmail === nextProps.report.managerEmail,
     ),
 );
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index ddc8718546c7..b1731fee9e02 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -193,6 +193,10 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
+        if (lodashGet(this.props, 'report.managerEmail') !== lodashGet(nextProps, 'report.managerEmail')) {
+            return true;
+        }
+
         return !_.isEqual(lodashGet(this.props.report, 'icons', []), lodashGet(nextProps.report, 'icons', []));
     }
 
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index c0cdd101b92e..359248140bd3 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -57,8 +57,6 @@ const propTypes = {
         report: reportPropTypes,
     }),
 
-    onBackButtonPress: PropTypes.func,
-
     ...withLocalizePropTypes,
 };
 
@@ -69,7 +67,6 @@ const defaultProps = {
     session: {},
     route: {},
     task: {},
-    onBackButtonPress: () => {},
 };
 
 function TaskAssigneeSelectorModal(props) {
@@ -186,7 +183,7 @@ function TaskAssigneeSelectorModal(props) {
             // This would cause the app to crash, so we need to make sure we have a DM thread
             Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
             // Pass through the selected assignee
-            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID});
+            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID, assigneeEmail: option.login});
         }
     };
 
@@ -196,7 +193,7 @@ function TaskAssigneeSelectorModal(props) {
                 <>
                     <HeaderWithBackButton
                         title={props.translate('task.assignee')}
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
+                        onBackButtonPress={() => props.task.report.isExistingTaskReport ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK)}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector

From 16df8383aebb9472dd719460a86357c2617a3dbf Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 08:57:26 -0700
Subject: [PATCH 14/87] get correct avatar for each user

---
 src/components/ReportActionItem/TaskView.js  | 18 +++++++++++++-----
 src/pages/home/report/ReportActionItem.js    |  5 +----
 src/pages/tasks/TaskAssigneeSelectorModal.js |  8 ++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ca185c4d3aa3..876650478f58 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -3,14 +3,16 @@ import {View} from 'react-native';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import compose from '../../libs/compose';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
+import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
+import * as UserUtils from '../../libs/UserUtils';
 import * as Task from '../../libs/actions/Task';
-import personalDetailsPropType from '../../pages/personalDetailsPropType';
 import CONST from '../../CONST';
 
 const propTypes = {
@@ -19,7 +21,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 
-    personalDetails: personalDetailsPropType.isRequired,
+    ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 function TaskView(props) {
@@ -53,7 +55,10 @@ function TaskView(props) {
             <MenuItemWithTopDescription
                 label={props.translate('task.createdBy')}
                 title={ReportUtils.getDisplayNameForParticipant(props.report.ownerAccountID)}
-                icon={ReportUtils.getIconsForParticipants([props.report.ownerEmail], props.personalDetails)[0].source}
+                icon={UserUtils.getAvatar(
+                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.ownerAccountID], props.currentUserPersonalDetails.accountID)[0].avatar, 
+                    props.report.ownerAccountID,
+                )}
                 iconType={CONST.ICON_TYPE_AVATAR}
                 avatarSize={CONST.AVATAR_SIZE.SMALL}
                 titleStyle={styles.textStrong}
@@ -62,7 +67,10 @@ function TaskView(props) {
             <MenuItemWithTopDescription
                 label={props.translate('task.assignee')}
                 title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                icon={ReportUtils.getIconsForParticipants([props.report.managerEmail], props.personalDetails)[0].source}
+                icon={UserUtils.getAvatar(
+                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar, 
+                    props.report.managerID,
+                )}
                 iconType={CONST.ICON_TYPE_AVATAR}
                 avatarSize={CONST.AVATAR_SIZE.SMALL}
                 titleStyle={styles.textStrong}
@@ -76,4 +84,4 @@ function TaskView(props) {
 TaskView.propTypes = propTypes;
 TaskView.displayName = 'TaskView';
 
-export default compose(withWindowDimensions, withLocalize)(TaskView);
+export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index b034e7baa958..df9c6a8d09c2 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -403,10 +403,7 @@ function ReportActionItem(props) {
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         if (ReportUtils.isTaskReport(props.report)) {
             return (
-                <TaskView
-                    report={props.report}
-                    personalDetails={props.personalDetails}
-                />
+                <TaskView report={props.report} />
             );
         }
         return <ReportActionItemCreated reportID={props.report.reportID} />;
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 359248140bd3..b60bd8cceacb 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -183,7 +183,11 @@ function TaskAssigneeSelectorModal(props) {
             // This would cause the app to crash, so we need to make sure we have a DM thread
             Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
             // Pass through the selected assignee
-            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID, assigneeEmail: option.login});
+            Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {
+                assignee: option.login,
+                assigneeAccountID: option.accountID,
+                assigneeEmail: option.login,
+            });
         }
     };
 
@@ -193,7 +197,7 @@ function TaskAssigneeSelectorModal(props) {
                 <>
                     <HeaderWithBackButton
                         title={props.translate('task.assignee')}
-                        onBackButtonPress={() => props.task.report.isExistingTaskReport ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK)}
+                        onBackButtonPress={() => (props.task.report.isExistingTaskReport ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK))}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector

From e291f00000ee3a1ddae8fe86de59cea6659c78c1 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 10:26:59 -0700
Subject: [PATCH 15/87] description vertically centers if empty

---
 src/components/ReportActionItem/TaskView.js | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 876650478f58..9bceeda2aae9 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -8,6 +8,7 @@ import compose from '../../libs/compose';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import MenuItem from '../MenuItem';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
@@ -35,7 +36,7 @@ function TaskView(props) {
     return (
         <View style={[styles.borderBottom]}>
             <MenuItemWithTopDescription
-                label={props.translate('task.title')}
+                description={props.translate('task.title')}
                 title={taskTitle}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
                 shouldShowRightIcon
@@ -47,24 +48,12 @@ function TaskView(props) {
                 onPressSelection={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
             />
             <MenuItemWithTopDescription
-                label={props.translate('task.description')}
+                description={props.translate('task.description')}
                 title={props.report.description}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon
             />
-            <MenuItemWithTopDescription
-                label={props.translate('task.createdBy')}
-                title={ReportUtils.getDisplayNameForParticipant(props.report.ownerAccountID)}
-                icon={UserUtils.getAvatar(
-                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.ownerAccountID], props.currentUserPersonalDetails.accountID)[0].avatar, 
-                    props.report.ownerAccountID,
-                )}
-                iconType={CONST.ICON_TYPE_AVATAR}
-                avatarSize={CONST.AVATAR_SIZE.SMALL}
-                titleStyle={styles.textStrong}
-                interactive={false}
-            />
-            <MenuItemWithTopDescription
+            <MenuItem
                 label={props.translate('task.assignee')}
                 title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
                 icon={UserUtils.getAvatar(

From 8e82218293decb3fea07350f054c156a6bf42550 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 13:04:05 -0700
Subject: [PATCH 16/87] lint

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 src/pages/home/report/ReportActionItem.js   | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 9bceeda2aae9..32ef28e76878 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -57,7 +57,7 @@ function TaskView(props) {
                 label={props.translate('task.assignee')}
                 title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
                 icon={UserUtils.getAvatar(
-                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar, 
+                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar,
                     props.report.managerID,
                 )}
                 iconType={CONST.ICON_TYPE_AVATAR}
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 4ce5b0380f32..adba288acf34 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -402,9 +402,7 @@ function ReportActionItem(props) {
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         if (ReportUtils.isTaskReport(props.report)) {
-            return (
-                <TaskView report={props.report} />
-            );
+            return <TaskView report={props.report} />;
         }
         return <ReportActionItemCreated reportID={props.report.reportID} />;
     }

From f6dcbc7037647e356e0ee444c74fd42de7bcf542 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 14:11:56 -0700
Subject: [PATCH 17/87] fix ellipses

---
 src/components/MenuItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index e55851e8a38c..130af4fff76b 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -195,7 +195,7 @@ function MenuItem(props) {
                                     )}
                                 </View>
                             )}
-                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flexShrink1]}>
                                 {props.shouldShowSelectedState && props.shouldShowSelectedStateBeforeTitle && selectedState}
                                 <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
                                     {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
@@ -210,7 +210,7 @@ function MenuItem(props) {
                                         {Boolean(props.title) && (
                                             <Text
                                                 style={titleTextStyle}
-                                                numberOfLines={1}
+                                                numberOfLines={2}
                                             >
                                                 {convertToLTR(props.title)}
                                             </Text>

From 83f3fc7e8de429c87c327ad8b1ccb2bf4522fc10 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:06:02 -0700
Subject: [PATCH 18/87] move title input to its own component

---
 src/components/MenuItem.js                  | 104 +++++++++-----------
 src/components/ReportActionItem/TaskView.js |  80 ++++++++++++---
 src/pages/tasks/TaskTitlePage.js            |   1 +
 3 files changed, 113 insertions(+), 72 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 130af4fff76b..56db8135ea52 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -80,7 +80,7 @@ function MenuItem(props) {
         [
             styles.flexShrink1,
             styles.popoverMenuText,
-            props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
+            props.icon && !_.isArray(props.icon) && (props.avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
             props.shouldShowBasicTitle ? undefined : styles.textStrong,
             props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
             props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,
@@ -101,19 +101,6 @@ function MenuItem(props) {
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
-    const selectedState = props.shouldUseSquareSelectedState ? (
-        <Checkbox
-            onPress={() => props.onPressSelection()}
-            isChecked={props.isSelected}
-            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
-        />
-    ) : (
-        <SelectCircle
-            isChecked={props.isSelected}
-            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
-        />
-    );
-
     return (
         <PressableWithSecondaryInteraction
             onPress={Session.checkIfActionIsAllowed((e) => {
@@ -195,60 +182,57 @@ function MenuItem(props) {
                                     )}
                                 </View>
                             )}
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flexShrink1]}>
-                                {props.shouldShowSelectedState && props.shouldShowSelectedStateBeforeTitle && selectedState}
-                                <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
-                                    {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
-                                        <Text
-                                            style={descriptionTextStyle}
-                                            numberOfLines={2}
-                                        >
-                                            {props.description}
-                                        </Text>
-                                    )}
-                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                        {Boolean(props.title) && (
-                                            <Text
-                                                style={titleTextStyle}
-                                                numberOfLines={2}
-                                            >
-                                                {convertToLTR(props.title)}
-                                            </Text>
-                                        )}
-                                        {Boolean(props.shouldShowTitleIcon) && (
-                                            <View style={[styles.ml2]}>
-                                                <Icon
-                                                    src={props.titleIcon}
-                                                    fill={themeColors.iconSuccessFill}
-                                                />
-                                            </View>
-                                        )}
-                                    </View>
-                                    {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
+                            <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
+                                {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
+                                    <Text
+                                        style={descriptionTextStyle}
+                                        numberOfLines={2}
+                                    >
+                                        {props.description}
+                                    </Text>
+                                )}
+                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                    {Boolean(props.title) && (
                                         <Text
-                                            style={descriptionTextStyle}
-                                            numberOfLines={2}
+                                            style={titleTextStyle}
+                                            numberOfLines={1}
                                         >
-                                            {props.description}
+                                            {convertToLTR(props.title)}
                                         </Text>
                                     )}
-                                    {Boolean(props.furtherDetails) && (
-                                        <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
+                                    {Boolean(props.shouldShowTitleIcon) && (
+                                        <View style={[styles.ml2]}>
                                             <Icon
-                                                src={props.furtherDetailsIcon}
-                                                height={variables.iconSizeNormal}
-                                                width={variables.iconSizeNormal}
-                                                inline
+                                                src={props.titleIcon}
+                                                fill={themeColors.iconSuccessFill}
                                             />
-                                            <Text
-                                                style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
-                                                numberOfLines={2}
-                                            >
-                                                {props.furtherDetails}
-                                            </Text>
                                         </View>
                                     )}
                                 </View>
+                                {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
+                                    <Text
+                                        style={descriptionTextStyle}
+                                        numberOfLines={2}
+                                    >
+                                        {props.description}
+                                    </Text>
+                                )}
+                                {Boolean(props.furtherDetails) && (
+                                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
+                                        <Icon
+                                            src={props.furtherDetailsIcon}
+                                            height={variables.iconSizeNormal}
+                                            width={variables.iconSizeNormal}
+                                            inline
+                                        />
+                                        <Text
+                                            style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
+                                            numberOfLines={2}
+                                        >
+                                            {props.furtherDetails}
+                                        </Text>
+                                    </View>
+                                )}
                             </View>
                         </View>
                     </View>
@@ -294,7 +278,7 @@ function MenuItem(props) {
                                 />
                             </View>
                         )}
-                        {props.shouldShowSelectedState && !props.shouldShowSelectedStateBeforeTitle && selectedState}
+                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
                     </View>
                 </>
             )}
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 32ef28e76878..1352658e6e52 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import _ from 'lodash';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
@@ -13,8 +14,17 @@ import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
 import * as UserUtils from '../../libs/UserUtils';
+import * as StyleUtils from '../../styles/StyleUtils';
 import * as Task from '../../libs/actions/Task';
 import CONST from '../../CONST';
+import Checkbox from '../Checkbox';
+import convertToLTR from '../../libs/convertToLTR';
+import Text from '../Text';
+import Icon from '../Icon';
+import getButtonState from '../../libs/getButtonState';
+import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
+import * as Session from '../../libs/actions/Session';
+import * as Expensicons from '../Icon/Expensicons';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -32,26 +42,70 @@ function TaskView(props) {
 
     const taskTitle = props.report.reportName;
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
+    const isOpen = ReportUtils.isOpenTaskReport(props.report);
+
+    const titleTextStyle = StyleUtils.combineStyles([
+        styles.pre,
+        styles.ltr,
+        styles.newKansasLarge,
+        styles.flexWrap,
+        styles.flex1,
+        {maxWidth: '100%', wordBreak: 'break-word'},
+    ]);
+    const descriptionTextStyle = StyleUtils.combineStyles([styles.textLabelSupporting, styles.lineHeightNormal, styles.mb1, props.descriptionTextStyle]);
 
     return (
         <View style={[styles.borderBottom]}>
-            <MenuItemWithTopDescription
-                description={props.translate('task.title')}
-                title={taskTitle}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
-                shouldShowRightIcon
-                shouldShowSelectedState
-                shouldShowSelectedStateBeforeTitle
-                shouldUseSquareSelectedState
-                titleStyle={styles.newKansasLarge}
-                isSelected={isCompleted}
-                onPressSelection={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
-            />
+            <PressableWithSecondaryInteraction
+                onPress={Session.checkIfActionIsAllowed((e) => {
+                    if (e && e.type === 'click') {
+                        e.currentTarget.blur();
+                    }
+
+                    Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
+                })}
+                style={({hovered, pressed}) => [
+                    styles.ph5,
+                    styles.pv2,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true),
+                ]}
+                ref={props.forwardedRef}
+                disabled={!isOpen}
+            >
+                {({hovered, pressed}) => (
+                    <>
+                        <Text style={descriptionTextStyle}>Title</Text>
+                        <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
+                            <Checkbox
+                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+                                isChecked={isCompleted}
+                                style={[styles.mr3, styles.mt1]}
+                            />
+                            <View style={[styles.flexRow, styles.flex1]}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={titleTextStyle}
+                                >
+                                    {convertToLTR(taskTitle)}
+                                </Text>
+                            </View>
+                            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, {marginLeft: 'auto'}]}>
+                                <Icon
+                                    src={Expensicons.ArrowRight}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                />
+                            </View>
+                        </View>
+                    </>
+                )}
+            </PressableWithSecondaryInteraction>
             <MenuItemWithTopDescription
                 description={props.translate('task.description')}
                 title={props.report.description}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon
+                disabled={!isOpen}
+                wrapperStyle={[styles.pv2]}
             />
             <MenuItem
                 label={props.translate('task.assignee')}
@@ -65,6 +119,8 @@ function TaskView(props) {
                 titleStyle={styles.textStrong}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
                 shouldShowRightIcon
+                disabled={!isOpen}
+                wrapperStyle={[styles.pv2]}
             />
         </View>
     );
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index c1260ebd1acf..a5b7366d4ee8 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -77,6 +77,7 @@ function TaskTitlePage(props) {
                     <TextInput
                         inputID="title"
                         name="title"
+                        autoGrowHeight
                         label={props.translate('task.title')}
                         defaultValue={(props.report && props.report.reportName) || ''}
                         ref={(el) => (inputRef.current = el)}

From 3fb0cb2702d07c0887a2223fae2b093b36a50943 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:08:22 -0700
Subject: [PATCH 19/87] remove unused props

---
 src/components/MenuItem.js          | 4 ----
 src/components/menuItemPropTypes.js | 9 ---------
 2 files changed, 13 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 56db8135ea52..53d4f6e4bd53 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -14,7 +14,6 @@ import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
-import Checkbox from './Checkbox';
 import colors from '../styles/colors';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
@@ -34,8 +33,6 @@ const defaultProps = {
     badgeText: undefined,
     shouldShowRightIcon: false,
     shouldShowSelectedState: false,
-    shouldUseSquareSelectedState: false,
-    shouldShowSelectedStateBeforeTitle: false,
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
@@ -70,7 +67,6 @@ const defaultProps = {
     hoverAndPressStyle: [],
     furtherDetails: '',
     furtherDetailsIcon: undefined,
-    onPressSelection: () => {},
 };
 
 function MenuItem(props) {
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 6100cef675d4..3909f446c907 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -48,12 +48,6 @@ const propTypes = {
     /** Should we make this selectable with a checkbox */
     shouldShowSelectedState: PropTypes.bool,
 
-    /** Should the selected state be a square or circular checkbox */
-    shouldUseSquareSelectedState: PropTypes.bool,
-
-    /** Should the selected state display before or after the title */
-    shouldShowSelectedStateBeforeTitle: PropTypes.bool,
-
     /** Should the title show with normal font weight (not bold) */
     shouldShowBasicTitle: PropTypes.bool,
 
@@ -125,9 +119,6 @@ const propTypes = {
 
     /** An icon to display under the main item */
     furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
-
-    /** Callback for when the selection state is pressed/changed */
-    onPressSelection: PropTypes.func,
 };
 
 export default propTypes;

From e296acc6f333d09a4681060dd280753eac7c59b2 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:08:40 -0700
Subject: [PATCH 20/87] whitespace

---
 src/components/MenuItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 53d4f6e4bd53..5e94f3ebf335 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -232,7 +232,6 @@ function MenuItem(props) {
                             </View>
                         </View>
                     </View>
-
                     <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
                         {Boolean(props.badgeText) && (
                             <Badge

From 4c53e3dd7895b91c4fca6175837c2ecc80d59827 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:09:20 -0700
Subject: [PATCH 21/87] style

---
 src/components/ReportActionItem/TaskView.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 1352658e6e52..f034e87ef8a0 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -44,14 +44,7 @@ function TaskView(props) {
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
-    const titleTextStyle = StyleUtils.combineStyles([
-        styles.pre,
-        styles.ltr,
-        styles.newKansasLarge,
-        styles.flexWrap,
-        styles.flex1,
-        {maxWidth: '100%', wordBreak: 'break-word'},
-    ]);
+    const titleTextStyle = StyleUtils.combineStyles([styles.pre, styles.ltr, styles.newKansasLarge, styles.flexWrap, styles.flex1, {maxWidth: '100%', wordBreak: 'break-word'}]);
     const descriptionTextStyle = StyleUtils.combineStyles([styles.textLabelSupporting, styles.lineHeightNormal, styles.mb1, props.descriptionTextStyle]);
 
     return (
@@ -64,11 +57,7 @@ function TaskView(props) {
 
                     Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
                 })}
-                style={({hovered, pressed}) => [
-                    styles.ph5,
-                    styles.pv2,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true),
-                ]}
+                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true)]}
                 ref={props.forwardedRef}
                 disabled={!isOpen}
             >

From 9e7a13cdc578064ca177082939f104001850c486 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:18:19 -0700
Subject: [PATCH 22/87] move styles into styles.js

---
 src/components/ReportActionItem/TaskView.js |  7 ++-----
 src/styles/styles.js                        | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index f034e87ef8a0..2c8f9c1a69c8 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -44,9 +44,6 @@ function TaskView(props) {
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
-    const titleTextStyle = StyleUtils.combineStyles([styles.pre, styles.ltr, styles.newKansasLarge, styles.flexWrap, styles.flex1, {maxWidth: '100%', wordBreak: 'break-word'}]);
-    const descriptionTextStyle = StyleUtils.combineStyles([styles.textLabelSupporting, styles.lineHeightNormal, styles.mb1, props.descriptionTextStyle]);
-
     return (
         <View style={[styles.borderBottom]}>
             <PressableWithSecondaryInteraction
@@ -63,7 +60,7 @@ function TaskView(props) {
             >
                 {({hovered, pressed}) => (
                     <>
-                        <Text style={descriptionTextStyle}>Title</Text>
+                        <Text style={styles.taskTitleDescription}>Title</Text>
                         <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
                             <Checkbox
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
@@ -73,7 +70,7 @@ function TaskView(props) {
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
                                     numberOfLines={1}
-                                    style={titleTextStyle}
+                                    style={styles.taskTitleMenuItem}
                                 >
                                     {convertToLTR(taskTitle)}
                                 </Text>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c42c1a77c07f..d83b46fbfc11 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3390,6 +3390,25 @@ const styles = {
         width: 16,
     },
 
+    taskTitleMenuItem: {
+        ...writingDirection.ltr,
+        ...headlineFont,
+        ...spacing.flexWrap,
+        ...spacing.flex1,
+        fontSize: variables.fontSizeXLarge,
+        lineHeight: variables.lineHeightXXLarge,
+        maxWidth: '100%',
+        wordBreak: 'break-word',
+    },
+
+    taskTitleDescription: {
+        fontFamily: fontFamily.EXP_NEUE,
+        fontSize: variables.fontSizeLabel,
+        color: themeColors.textSupporting,
+        lineHeight: variables.lineHeightNormal,
+        ...spacing.mb1,
+    },
+
     shareCodePage: {
         paddingHorizontal: 38.5,
     },

From 5c44d6793091fe04bbe169cb481476e847b7afc3 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:20:02 -0700
Subject: [PATCH 23/87] fix header button spacing on small screens

---
 src/components/TaskHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 36257da3fb3c..10b793e8d256 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -21,7 +21,7 @@ function TaskHeader(props) {
     return (
         <View style={styles.borderBottom}>
             <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-                <View style={[styles.ph5, styles.pb5]}>
+                <View style={[styles.ph5, styles.pb3]}>
                     <TaskHeaderActionButton report={props.report} />
                 </View>
             </View>

From 7b53db0dddd8bae1364d424216c957d6a7974885 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:24:41 -0700
Subject: [PATCH 24/87] remove unused import

---
 src/components/ReportActionItem/TaskView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 2c8f9c1a69c8..f838bff5f80e 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,6 +1,5 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import _ from 'lodash';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';

From f5be337ff10a43a464df0312044c5e34589dac76 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 16:31:33 -0700
Subject: [PATCH 25/87] remove unused

---
 src/components/TaskHeader.js   | 35 ----------------------------------
 src/pages/home/ReportScreen.js | 14 +++++++++-----
 2 files changed, 9 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/TaskHeader.js

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
deleted file mode 100644
index 10b793e8d256..000000000000
--- a/src/components/TaskHeader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import reportPropTypes from '../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import compose from '../libs/compose';
-import TaskHeaderActionButton from './TaskHeaderActionButton';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    ...withLocalizePropTypes,
-
-    ...windowDimensionsPropTypes,
-};
-
-function TaskHeader(props) {
-    return (
-        <View style={styles.borderBottom}>
-            <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-                <View style={[styles.ph5, styles.pb3]}>
-                    <TaskHeaderActionButton report={props.report} />
-                </View>
-            </View>
-        </View>
-    );
-}
-
-TaskHeader.propTypes = propTypes;
-TaskHeader.displayName = 'TaskHeader';
-
-export default compose(withWindowDimensions, withLocalize)(TaskHeader);
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 9fb14f2511ec..84e02aacac5f 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -35,10 +35,11 @@ import withNavigationFocus from '../../components/withNavigationFocus';
 import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
 import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import TaskHeader from '../../components/TaskHeader';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
+import themeColors from '../../styles/themes/default';
+import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -279,10 +280,13 @@ class ReportScreen extends React.Component {
                         )}
 
                         {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
-                            <TaskHeader
-                                report={this.props.report}
-                                personalDetails={this.props.personalDetails}
-                            />
+                            <View style={styles.borderBottom}>
+                                <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+                                    <View style={[styles.ph5, styles.pb3]}>
+                                        <TaskHeaderActionButton report={this.props.report} />
+                                    </View>
+                                </View>
+                            </View>
                         )}
                     </OfflineWithFeedback>
                     {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (

From b062f205795d599bdd59ed3507915f0022fc5ede Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 17:27:59 -0700
Subject: [PATCH 26/87] fix title menu item spacing

---
 src/components/ReportActionItem/TaskView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index f838bff5f80e..2b34cb3ca708 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -64,17 +64,17 @@ function TaskView(props) {
                             <Checkbox
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
                                 isChecked={isCompleted}
-                                style={[styles.mr3, styles.mt1]}
+                                style={[styles.mr3, styles.mt2, styles.alignItemsTop]}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
-                                    numberOfLines={1}
+                                    numberOfLines={2}
                                     style={styles.taskTitleMenuItem}
                                 >
                                     {convertToLTR(taskTitle)}
                                 </Text>
                             </View>
-                            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, {marginLeft: 'auto'}]}>
+                            <View style={[styles.mt2, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, {marginLeft: 'auto'}]}>
                                 <Icon
                                     src={Expensicons.ArrowRight}
                                     fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}

From 476c4a5342b1bf05baffdfd6b3801293ada80adc Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 17:29:43 -0700
Subject: [PATCH 27/87] fix title menu item spacing

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 src/styles/styles.js                        | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 2b34cb3ca708..a4ff8ba7b46a 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -74,7 +74,7 @@ function TaskView(props) {
                                     {convertToLTR(taskTitle)}
                                 </Text>
                             </View>
-                            <View style={[styles.mt2, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, {marginLeft: 'auto'}]}>
+                            <View style={styles.taskRightIconContainer}>
                                 <Icon
                                     src={Expensicons.ArrowRight}
                                     fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d83b46fbfc11..f8d74a222977 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3409,6 +3409,13 @@ const styles = {
         ...spacing.mb1,
     },
 
+    taskRightIconContainer: {
+        width: variables.componentSizeNormal,
+        ...spacing.mt2,
+        ...pointerEventsAuto,
+        marginLeft: 'auto',
+    },
+
     shareCodePage: {
         paddingHorizontal: 38.5,
     },

From 207d1531669d95af4d72f588e30e8683a4312581 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 17:31:47 -0700
Subject: [PATCH 28/87] fix title menu item spacing

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index a4ff8ba7b46a..80336b6219f3 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -64,7 +64,7 @@ function TaskView(props) {
                             <Checkbox
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
                                 isChecked={isCompleted}
-                                style={[styles.mr3, styles.mt2, styles.alignItemsTop]}
+                                style={[styles.mr3, props.isSmallScreenWidth ? styles.mt1 : styles.mt2, styles.alignItemsTop]}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text

From 895582e2c84bc2e6a41c2e849cada761d38f9f9c Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 16 Jun 2023 17:35:04 -0700
Subject: [PATCH 29/87] fix title menu item spacing

---
 src/components/ReportActionItem/TaskView.js | 4 ++--
 src/styles/styles.js                        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 80336b6219f3..f98916dacd7f 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -64,11 +64,11 @@ function TaskView(props) {
                             <Checkbox
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
                                 isChecked={isCompleted}
-                                style={[styles.mr3, props.isSmallScreenWidth ? styles.mt1 : styles.mt2, styles.alignItemsTop]}
+                                style={[styles.mr3, styles.mt1]}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
-                                    numberOfLines={2}
+                                    numberOfLines={3}
                                     style={styles.taskTitleMenuItem}
                                 >
                                     {convertToLTR(taskTitle)}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index f8d74a222977..4f376ec7dc85 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3411,7 +3411,7 @@ const styles = {
 
     taskRightIconContainer: {
         width: variables.componentSizeNormal,
-        ...spacing.mt2,
+        ...spacing.mt1,
         ...pointerEventsAuto,
         marginLeft: 'auto',
     },

From 9299adbb94388d0f3c3a8116fbfdd83d7ba1de40 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 21 Jun 2023 16:25:39 -0700
Subject: [PATCH 30/87] style

---
 .../ReportActionItem/TaskPreview.js           |  2 +-
 src/components/ReportActionItem/TaskView.js   | 27 ++++++++++---------
 src/components/TaskHeader.js                  |  4 +--
 src/pages/home/HeaderView.js                  |  4 +--
 src/pages/tasks/NewTaskPage.js                |  2 +-
 src/styles/styles.js                          |  4 ++-
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 73aed96c2cbb..7723580e547a 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -67,7 +67,7 @@ function TaskPreview(props) {
             onPress={() => Navigation.navigate(ROUTES.getReportRoute(props.taskReportID))}
             style={[styles.flexRow, styles.justifyContentBetween]}
             accessibilityRole="button"
-            accessibilityLabel={props.translate('newTaskPage.task')}
+            accessibilityLabel={props.translate('task.task')}
         >
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}>
                 <Checkbox
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index f98916dacd7f..888ece4ca3d7 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -61,21 +61,24 @@ function TaskView(props) {
                     <>
                         <Text style={styles.taskTitleDescription}>Title</Text>
                         <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
-                            <Checkbox
-                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
-                                isChecked={isCompleted}
-                                style={[styles.mr3, styles.mt1]}
-                            />
-                            <View style={[styles.flexRow, styles.flex1]}>
-                                <Text
-                                    numberOfLines={3}
-                                    style={styles.taskTitleMenuItem}
-                                >
-                                    {convertToLTR(taskTitle)}
-                                </Text>
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
+                                <Checkbox
+                                    onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+                                    isChecked={isCompleted}
+                                    style={[styles.mr3]}
+                                />
+                                <View style={[styles.flexRow, styles.flex1]}>
+                                    <Text
+                                        numberOfLines={3}
+                                        style={styles.taskTitleMenuItem}
+                                    >
+                                        {convertToLTR(taskTitle)}
+                                    </Text>
+                                </View>
                             </View>
                             <View style={styles.taskRightIconContainer}>
                                 <Icon
+                                    additionalStyles={[styles.alignItemsCenter]}
                                     src={Expensicons.ArrowRight}
                                     fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
                                 />
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index ce3d010491bb..156c56ba0f3e 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -67,7 +67,7 @@ function TaskHeader(props) {
                         onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
                         disabled={!isOpen}
                         accessibilityRole="button"
-                        accessibilityLabel={props.translate('newTaskPage.assignee')}
+                        accessibilityLabel={props.translate('task.assignee')}
                         hoverDimmingValue={1}
                         pressDimmingValue={0.2}
                     >
@@ -120,7 +120,7 @@ function TaskHeader(props) {
             <MenuItemWithTopDescription
                 shouldShowHeaderTitle
                 title={props.report.reportName}
-                description={props.translate('newTaskPage.task')}
+                description={props.translate('task.task')}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
                 disabled={!isOpen}
                 interactive={isOpen}
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index f41240f2588d..af5e2827e919 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -101,8 +101,8 @@ function HeaderView(props) {
     const shouldShowCallButton = (isConcierge && guideCalendarLink) || (!isAutomatedExpensifyAccount && !isTaskReport);
     const threeDotMenuItems = [];
     if (isTaskReport) {
-    const isTaskAssigneeOrTaskOwner = Task.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID);        
-    if (ReportUtils.isOpenTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
+        const isTaskAssigneeOrTaskOwner = Task.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID);
+        if (ReportUtils.isOpenTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
                 text: props.translate('newTaskPage.markAsDone'),
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index dbf5e0181bca..4f121e4121d4 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -80,7 +80,7 @@ function NewTaskPage(props) {
         if (props.task.assignee) {
             const assigneeDetails = lodashGet(OptionsListUtils.getPersonalDetailsForAccountIDs([props.task.assigneeAccountID], props.personalDetails), props.task.assigneeAccountID);
             if (!assigneeDetails) {
-                return setErrorMessage(props.translate('newTaskPage.assigneeError'));
+                return setErrorMessage(props.translate('task.assigneeError'));
             }
             const displayDetails = Task.getAssignee(assigneeDetails);
             setAssignee(displayDetails);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 5165482e61db..d6360f092c8f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3413,9 +3413,11 @@ const styles = {
 
     taskRightIconContainer: {
         width: variables.componentSizeNormal,
+        marginLeft: 'auto',
         ...spacing.mt1,
         ...pointerEventsAuto,
-        marginLeft: 'auto',
+        ...spacing.dFlex,
+        ...spacing.alignItemsCenter,
     },
 
     shareCodePage: {

From a94c8292ea080ce335e97d7bfe6f6d1fe5de21ba Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 21 Jun 2023 18:41:25 -0700
Subject: [PATCH 31/87] Fix styling of task view (spacing)

---
 src/components/ReportActionItem/TaskView.js  | 26 +++++++++-----------
 src/pages/tasks/TaskAssigneeSelectorModal.js |  1 +
 src/pages/tasks/TaskTitlePage.js             |  4 +--
 src/styles/styles.js                         |  6 ++++-
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 888ece4ca3d7..865a7dc6ca6f 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -61,20 +61,18 @@ function TaskView(props) {
                     <>
                         <Text style={styles.taskTitleDescription}>Title</Text>
                         <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
-                                <Checkbox
-                                    onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
-                                    isChecked={isCompleted}
-                                    style={[styles.mr3]}
-                                />
-                                <View style={[styles.flexRow, styles.flex1]}>
-                                    <Text
-                                        numberOfLines={3}
-                                        style={styles.taskTitleMenuItem}
-                                    >
-                                        {convertToLTR(taskTitle)}
-                                    </Text>
-                                </View>
+                            <Checkbox
+                                onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+                                isChecked={isCompleted}
+                                style={styles.taskMenuItemCheckbox}
+                            />
+                            <View style={[styles.flexRow, styles.flex1]}>
+                                <Text
+                                    numberOfLines={3}
+                                    style={styles.taskTitleMenuItem}
+                                >
+                                    {convertToLTR(taskTitle)}
+                                </Text>
                             </View>
                             <View style={styles.taskRightIconContainer}>
                                 <Icon
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 4a15dd63d508..2d901cbd96d8 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -167,6 +167,7 @@ function TaskAssigneeSelectorModal(props) {
             // There was an issue where sometimes a new assignee didn't have a DM thread
             // This would cause the app to crash, so we need to make sure we have a DM thread
             Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+
             // Pass through the selected assignee
             Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {
                 assignee: option.login,
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index a5b7366d4ee8..f75e2385b876 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -50,8 +50,8 @@ function TaskTitlePage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the description of the report in the store and then call Task.editTaskReport
-            // to update the description of the report on the server
+            // Set the title of the report in the store and then call Task.editTaskReport
+            // to update the title of the report on the server
             Task.editTaskAndNavigate(props.report, props.session.email, props.session.accountID, {title: values.title});
         },
         [props],
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d6360f092c8f..774595281a8c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3398,7 +3398,6 @@ const styles = {
         ...spacing.flexWrap,
         ...spacing.flex1,
         fontSize: variables.fontSizeXLarge,
-        lineHeight: variables.lineHeightXXLarge,
         maxWidth: '100%',
         wordBreak: 'break-word',
     },
@@ -3411,6 +3410,11 @@ const styles = {
         ...spacing.mb1,
     },
 
+    taskMenuItemCheckbox: {
+        height: 24,
+        ...spacing.mr3,
+    },
+
     taskRightIconContainer: {
         width: variables.componentSizeNormal,
         marginLeft: 'auto',

From 0ca36c03d154088f10594ef599475fc5db595ba7 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 22 Jun 2023 20:02:00 -0700
Subject: [PATCH 32/87] fix task action styling on small screens

---
 src/components/ReportActionItem/TaskAction.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index cf1cee86abf4..21a82e576cdc 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -56,8 +56,10 @@ function TaskAction(props) {
     return (
         <>
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                <Text style={styles.chatItemMessageLink}>{messageLinkText}</Text>
-                <Text style={[styles.chatItemMessage]}>{` ${taskReportName}`}</Text>
+                <Text>
+                    <Text style={styles.chatItemMessageLink}>{messageLinkText}</Text>
+                    <Text style={[styles.chatItemMessage]}>{` ${taskReportName}`}</Text>
+                </Text>
             </View>
         </>
     );

From f5428757cd22f3ca0527d9e7294ea19c1f6f5c1b Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 22 Jun 2023 20:02:18 -0700
Subject: [PATCH 33/87] fix title page display on android

---
 src/pages/tasks/TaskTitlePage.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index f75e2385b876..17857f0032e3 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -78,6 +78,8 @@ function TaskTitlePage(props) {
                         inputID="title"
                         name="title"
                         autoGrowHeight
+                        textAlignVertical="top"
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
                         label={props.translate('task.title')}
                         defaultValue={(props.report && props.report.reportName) || ''}
                         ref={(el) => (inputRef.current = el)}

From f110eab7cbc81b34401625105511350d8ea1800e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 22 Jun 2023 20:11:42 -0700
Subject: [PATCH 34/87] fix checkbox height

---
 ios/Podfile.lock     | 2 +-
 src/styles/styles.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 048eeca5f76f..b8cde168d05d 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1141,4 +1141,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.11.3
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 774595281a8c..74e585c09044 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3411,7 +3411,7 @@ const styles = {
     },
 
     taskMenuItemCheckbox: {
-        height: 24,
+        height: 27,
         ...spacing.mr3,
     },
 

From 84115cdcadd46f092106cc8381e2dfd5ebfc4306 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 23 Jun 2023 11:01:57 -0700
Subject: [PATCH 35/87] fix display for multiline titles

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 865a7dc6ca6f..77b83e907a06 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -60,7 +60,7 @@ function TaskView(props) {
                 {({hovered, pressed}) => (
                     <>
                         <Text style={styles.taskTitleDescription}>Title</Text>
-                        <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                             <Checkbox
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
                                 isChecked={isCompleted}

From b88f11cb08479ae09df227173300f68eb94daf15 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 23 Jun 2023 11:45:14 -0700
Subject: [PATCH 36/87] address design review

---
 src/components/MenuItem.js                  |  3 ++-
 src/components/ReportActionItem/TaskView.js | 14 ++++++++++----
 src/components/menuItemPropTypes.js         |  3 +++
 src/pages/home/report/ReportActionItem.js   | 11 ++++++++++-
 src/pages/home/report/ReportActionsList.js  |  3 ++-
 src/styles/StyleUtils.js                    | 12 ++++++++++++
 src/styles/styles.js                        | 13 +++++++++++++
 7 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 5e94f3ebf335..ac11a3982469 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -67,6 +67,7 @@ const defaultProps = {
     hoverAndPressStyle: [],
     furtherDetails: '',
     furtherDetailsIcon: undefined,
+    isSmallAvatarSubscriptMenu: false,
 };
 
 function MenuItem(props) {
@@ -178,7 +179,7 @@ function MenuItem(props) {
                                     )}
                                 </View>
                             )}
-                            <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
+                            <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(props.isSmallAvatarSubscriptMenu)]}>
                                 {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
                                     <Text
                                         style={descriptionTextStyle}
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 77b83e907a06..e47217a43cac 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
@@ -29,6 +30,9 @@ const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
+    /** Whether we should display the horizontal rule below the component */
+    shouldShowHorizontalRule: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
 
     ...withCurrentUserPersonalDetailsPropTypes,
@@ -44,7 +48,7 @@ function TaskView(props) {
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
     return (
-        <View style={[styles.borderBottom]}>
+        <>
             <PressableWithSecondaryInteraction
                 onPress={Session.checkIfActionIsAllowed((e) => {
                     if (e && e.type === 'click') {
@@ -101,14 +105,16 @@ function TaskView(props) {
                     props.report.managerID,
                 )}
                 iconType={CONST.ICON_TYPE_AVATAR}
-                avatarSize={CONST.AVATAR_SIZE.SMALL}
-                titleStyle={styles.textStrong}
+                avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                titleStyle={styles.assigneeTextStyle}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
                 shouldShowRightIcon
                 disabled={!isOpen}
                 wrapperStyle={[styles.pv2]}
+                isSmallAvatarSubscriptMenu
             />
-        </View>
+            <View style={styles.taskHorizontalRule} />
+        </>
     );
 }
 
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 3909f446c907..1e959c2a160c 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -119,6 +119,9 @@ const propTypes = {
 
     /** An icon to display under the main item */
     furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+
+    /**  Whether we should use small avatar subscript sizing the for menu item */
+    isSmallAvatarSubscriptMenu: PropTypes.bool,
 };
 
 export default propTypes;
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 528a8b129d3c..f603e15f95b1 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -94,6 +94,9 @@ const propTypes = {
 
     /** All of the personalDetails */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
+
+    /** Is this the only report action on the report? */
+    isOnlyReportAction: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -102,6 +105,7 @@ const defaultProps = {
     personalDetails: {},
     shouldShowSubscriptAvatar: false,
     hasOutstandingIOU: false,
+    isOnlyReportAction: false,
 };
 
 function ReportActionItem(props) {
@@ -419,7 +423,12 @@ function ReportActionItem(props) {
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         if (ReportUtils.isTaskReport(props.report)) {
-            return <TaskView report={props.report} />;
+            return (
+                <TaskView
+                    report={props.report}
+                    shouldShowHorizontalRule={!props.isOnlyReportAction}
+                />
+            );
         }
         return (
             <ReportActionItemCreated
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index c3288c3eeb6a..23bafa42cc6e 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -138,10 +138,11 @@ function ReportActionsList(props) {
                     isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
                     hasOutstandingIOU={hasOutstandingIOU}
                     index={index}
+                    isOnlyReportAction={props.sortedReportActions.length === 1}
                 />
             );
         },
-        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID],
+        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID, props.sortedReportActions],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index d51cd9af7254..222f0efed22f 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1209,6 +1209,17 @@ function getWrappingStyle(isExtraSmallScreenWidth) {
     };
 }
 
+/**
+ *
+ * @param {Boolean} isSmallAvatarSubscriptMenu
+ * @returns {Number}
+ */
+function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu) {
+    return {
+        minHeight: isSmallAvatarSubscriptMenu ? variables.avatarSizeSubscript : variables.componentSizeNormal,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1277,4 +1288,5 @@ export {
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
     getWrappingStyle,
+    getMenuItemTextContainerStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 74e585c09044..e5b09ea3001a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3415,6 +3415,19 @@ const styles = {
         ...spacing.mr3,
     },
 
+    taskHorizontalRule: {
+        borderBottomWidth: 1,
+        borderColor: themeColors.border,
+        ...spacing.mh5,
+        ...spacing.mv2,
+    },
+
+    assigneeTextStyle: {
+        fontFamily: fontFamily.EXP_NEUE_BOLD,
+        fontWeight: fontWeightBold,
+        minHeight: variables.avatarSizeSubscript,
+    },
+
     taskRightIconContainer: {
         width: variables.componentSizeNormal,
         marginLeft: 'auto',

From 53d07a2f6605fa93675d6d4e90911aa843925a03 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 23 Jun 2023 11:45:35 -0700
Subject: [PATCH 37/87] remove unused

---
 ios/Podfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index b8cde168d05d..048eeca5f76f 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1141,4 +1141,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

From e142642503699aa5ee320b6983be6e1a21f5db52 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 23 Jun 2023 11:47:34 -0700
Subject: [PATCH 38/87] remove unused

---
 src/languages/en.js | 1 -
 src/languages/es.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 93034f8d203b..600f3558bf58 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1278,7 +1278,6 @@ export default {
         task: 'Task',
         title: 'Title',
         description: 'Description',
-        createdBy: 'Created By',
         assignee: 'Assignee',
         completed: 'Completed',
         messages: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 4b27a5107b97..dd51d96e72e5 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1284,7 +1284,6 @@ export default {
     },
     task: {
         task: 'Tarea',
-        createdBy: '', // TODO:
         title: 'Título',
         description: 'Descripción',
         assignee: 'Cesionario',

From 2f1d3a0701bffb997dbdab10619a94eb5029a71f Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 23 Jun 2023 11:54:20 -0700
Subject: [PATCH 39/87] use shouldShowHorizontalRule

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index d0b66e5ad7c2..d59f4ee4dc46 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -113,7 +113,7 @@ function TaskView(props) {
                 wrapperStyle={[styles.pv2]}
                 isSmallAvatarSubscriptMenu
             />
-            <View style={styles.taskHorizontalRule} />
+            {props.shouldShowHorizontalRule && <View style={styles.taskHorizontalRule} />}
         </>
     );
 }

From adff1a122cb2c6e8f08042bd3235488381296dfd Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:13:40 -0700
Subject: [PATCH 40/87] push missing changes

---
 src/components/Checkbox.js                  | 19 ++++++++++++++---
 src/components/ReportActionItem/TaskView.js |  3 +++
 src/styles/StyleUtils.js                    | 23 ++++++++++++++++++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index 0a023b7b4fb4..57f492d6c560 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -6,6 +6,7 @@ import themeColors from '../styles/themes/default';
 import stylePropTypes from '../styles/stylePropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const propTypes = {
     /** Whether checkbox is checked */
@@ -32,6 +33,15 @@ const propTypes = {
     /** Callback that is called when mousedown is triggered. */
     onMouseDown: PropTypes.func,
 
+    /** The size of the checkbox container */
+    containerSize: PropTypes.number,
+
+    /** The border radius of the checkbox container */
+    containerBorderRadius: PropTypes.number,
+
+    /** The size of the caret (checkmark) */
+    caretSize: PropTypes.number,
+
     /** A ref to forward to the Pressable */
     forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
 };
@@ -45,6 +55,9 @@ const defaultProps = {
     forwardedRef: undefined,
     children: null,
     onMouseDown: undefined,
+    containerSize: 20,
+    containerBorderRadius: 4,
+    caretSize: 14,
 };
 
 function Checkbox(props) {
@@ -82,7 +95,7 @@ function Checkbox(props) {
             ) : (
                 <View
                     style={[
-                        styles.checkboxContainer,
+                        StyleUtils.getCheckboxContainerStyle(props.containerSize, props.containerBorderRadius),
                         props.containerStyle,
                         props.isChecked && styles.checkedContainer,
                         props.hasError && styles.borderColorDanger,
@@ -94,8 +107,8 @@ function Checkbox(props) {
                         <Icon
                             src={Expensicons.Checkmark}
                             fill={themeColors.textLight}
-                            height={14}
-                            width={14}
+                            height={props.caretSize}
+                            width={props.caretSize}
                         />
                     )}
                 </View>
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index d59f4ee4dc46..fcf4dc2892aa 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -69,6 +69,9 @@ function TaskView(props) {
                                 onPress={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
                                 isChecked={isCompleted}
                                 style={styles.taskMenuItemCheckbox}
+                                containerSize={24}
+                                containerBorderRadius={8}
+                                caretSize={16}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 5d1099dcdc97..644600868d29 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1211,7 +1211,7 @@ function getWrappingStyle(isExtraSmallScreenWidth) {
 }
 
 /**
- *
+ * Returns the text container styles for menu items depending on if the menu item container a small avatar
  * @param {Boolean} isSmallAvatarSubscriptMenu
  * @returns {Number}
  */
@@ -1238,6 +1238,26 @@ function getDisabledLinkStyles(isDisabled = false) {
     };
 }
 
+/**
+ * Returns the checkbox container style
+ * @param {Number} size 
+ * @param {Number} borderRadius
+ * @returns {Object}
+ */
+function getCheckboxContainerStyle(size, borderRadius) {
+    return {
+        backgroundColor: themeColors.componentBG,
+        height: size,
+        width: size,
+        borderColor: themeColors.borderLighter,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // eslint-disable-next-line object-shorthand 
+        borderRadius: borderRadius,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1308,4 +1328,5 @@ export {
     getWrappingStyle,
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
+    getCheckboxContainerStyle,
 };

From 98635952beea6ae262eff8c7f72fcced6319d448 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:14:05 -0700
Subject: [PATCH 41/87] style

---
 src/styles/StyleUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 644600868d29..460d7fe2db69 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1240,7 +1240,7 @@ function getDisabledLinkStyles(isDisabled = false) {
 
 /**
  * Returns the checkbox container style
- * @param {Number} size 
+ * @param {Number} size
  * @param {Number} borderRadius
  * @returns {Object}
  */
@@ -1253,7 +1253,7 @@ function getCheckboxContainerStyle(size, borderRadius) {
         borderWidth: 2,
         justifyContent: 'center',
         alignItems: 'center',
-        // eslint-disable-next-line object-shorthand 
+        // eslint-disable-next-line object-shorthand
         borderRadius: borderRadius,
     };
 }

From 27764076428cb11cf09f87609bd4c6debb81035e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:16:50 -0700
Subject: [PATCH 42/87] remove unused param

---
 src/libs/actions/Task.js                     | 4 ++--
 src/pages/tasks/TaskAssigneeSelectorModal.js | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 76239bcc02c2..c7039d37fbf7 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -299,7 +299,7 @@ function reopenTask(taskReportID, taskTitle) {
  * @param {String} editedTask.assignee
  * @param {Number} editedTask.assigneeAccountID
  */
-function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee, assigneeAccountID = 0, assigneeEmail = ''}) {
+function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee = '', assigneeAccountID = 0}) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(ownerEmail);
 
@@ -339,7 +339,7 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
                 reportName,
                 description: reportDescription,
                 managerID: assigneeAccountID || report.managerID,
-                managerEmail: assigneeEmail || report.managerEmail,
+                managerEmail: assignee || report.managerEmail,
             },
         },
     ];
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 2d901cbd96d8..6862bc76dac5 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -172,7 +172,6 @@ function TaskAssigneeSelectorModal(props) {
             Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {
                 assignee: option.login,
                 assigneeAccountID: option.accountID,
-                assigneeEmail: option.login,
             });
         }
     };

From de7106e814f11caae7e70891bd4046f3b6c57c3a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:20:34 -0700
Subject: [PATCH 43/87] add/use styles.backgroundBG

---
 src/components/MoneyRequestHeader.js | 2 +-
 src/components/TaskHeader.js         | 2 +-
 src/pages/home/ReportScreen.js       | 2 +-
 src/styles/styles.js                 | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index a0e0fc3b70ad..d5aa92e82fdf 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -91,7 +91,7 @@ function MoneyRequestHeader(props) {
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
     return (
-        <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+        <View style={[styles.backgroundBG, styles.pl0]}>
             <HeaderWithBackButton
                 shouldShowAvatarWithDisplay
                 shouldShowPinButton={props.isSingleTransactionView}
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 156c56ba0f3e..2cf0391603ac 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+            <View style={[styles.backgroundBG, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 84e02aacac5f..d6b68bf7c913 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -281,7 +281,7 @@ class ReportScreen extends React.Component {
 
                         {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
                             <View style={styles.borderBottom}>
-                                <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+                                <View style={[styles.backgroundBG, styles.pl0]}>
                                     <View style={[styles.ph5, styles.pb3]}>
                                         <TaskHeaderActionButton report={this.props.report} />
                                     </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 59b3d58ec8d0..0be1ae109c80 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -245,6 +245,10 @@ const styles = {
         color: themeColors.textMutedReversed,
     },
 
+    backgroundBG: {
+        backgroundColor: themeColors.highlightBG,
+    },
+
     h1: {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEUE_BOLD,

From de58d5e9c7128cb56f75565dc59ef5f71b21f521 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:22:12 -0700
Subject: [PATCH 44/87] move maskAsDone and markAsIncomplete translations to
 task

---
 src/components/TaskHeader.js             | 2 +-
 src/components/TaskHeaderActionButton.js | 2 +-
 src/languages/en.js                      | 4 ++--
 src/languages/es.js                      | 4 ++--
 src/pages/home/HeaderView.js             | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 2cf0391603ac..8fad46378108 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -108,7 +108,7 @@ function TaskHeader(props) {
                                         success
                                         isDisabled={Task.isTaskCanceled(props.report) || !Task.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID)}
                                         medium
-                                        text={props.translate('newTaskPage.markAsDone')}
+                                        text={props.translate('task.markAsDone')}
                                         onPress={() => Task.completeTask(props.report.reportID, title)}
                                     />
                                 )}
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
index 78c741fc2827..cc0c0f1382b2 100644
--- a/src/components/TaskHeaderActionButton.js
+++ b/src/components/TaskHeaderActionButton.js
@@ -32,7 +32,7 @@ function TaskHeaderActionButton(props) {
                     success
                     isDisabled={ReportUtils.isCanceledTaskReport(props.report)}
                     medium
-                    text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'newTaskPage.markAsIncomplete' : 'newTaskPage.markAsDone')}
+                    text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'task.markAsIncomplete' : 'task.markAsDone')}
                     onPress={() =>
                         ReportUtils.isCompletedTaskReport(props.report)
                             ? Task.reopenTask(props.report.reportID, props.report.reportName)
diff --git a/src/languages/en.js b/src/languages/en.js
index 14dca110421a..c20213660cbb 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1278,8 +1278,6 @@ export default {
         descriptionOptional: 'Description (optional)',
         shareSomewhere: 'Share somewhere',
         pleaseEnterTaskName: 'Please enter a title',
-        markAsDone: 'Mark as done',
-        markAsIncomplete: 'Mark as incomplete',
         pleaseEnterTaskDestination: 'Please select with whom you want to share.',
     },
     task: {
@@ -1293,6 +1291,8 @@ export default {
             canceled: 'canceled task',
             reopened: 'reopened task',
         },
+        markAsDone: 'Mark as done',
+        markAsIncomplete: 'Mark as incomplete',
     },
     statementPage: {
         generatingPDF: "We're generating your PDF right now. Please come back later!",
diff --git a/src/languages/es.js b/src/languages/es.js
index 12049e2af2da..dd2e103bc8ca 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1287,8 +1287,6 @@ export default {
         descriptionOptional: 'Descripción (opcional)',
         shareSomewhere: 'Compartir en algún lugar',
         pleaseEnterTaskName: 'Por favor introduce un título',
-        markAsDone: 'Marcar como hecho',
-        markAsIncomplete: 'Marcar como incompleta',
         pleaseEnterTaskDestination: 'Por favor selecciona con quien deseas compartir.',
     },
     task: {
@@ -1302,6 +1300,8 @@ export default {
             canceled: 'tarea cancelada',
             reopened: 'tarea reabrir',
         },
+        markAsDone: 'Marcar como hecho',
+        markAsIncomplete: 'Marcar como incompleta',
     },
     statementPage: {
         generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!',
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index af5e2827e919..640eb4396a99 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -105,7 +105,7 @@ function HeaderView(props) {
         if (ReportUtils.isOpenTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
-                text: props.translate('newTaskPage.markAsDone'),
+                text: props.translate('task.markAsDone'),
                 onSelected: () => Task.completeTask(props.report.reportID, title),
             });
         }
@@ -114,7 +114,7 @@ function HeaderView(props) {
         if (ReportUtils.isCompletedTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
-                text: props.translate('newTaskPage.markAsIncomplete'),
+                text: props.translate('task.markAsIncomplete'),
                 onSelected: () => Task.reopenTask(props.report.reportID, title),
             });
         }

From 0eb8f7245564fac58f15a9b0656920b2720784d4 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 09:23:29 -0700
Subject: [PATCH 45/87] move newassigneeerror to task

---
 src/languages/en.js | 2 +-
 src/languages/es.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index c20213660cbb..c38fe3b0e0ea 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1271,7 +1271,6 @@ export default {
     },
     newTaskPage: {
         assignTask: 'Assign task',
-        assigneeError: 'There was an error assigning this task, please try another assignee.',
         assignMe: 'Assign to me',
         confirmTask: 'Confirm task',
         confirmError: 'Please enter a title and select a share destination.',
@@ -1293,6 +1292,7 @@ export default {
         },
         markAsDone: 'Mark as done',
         markAsIncomplete: 'Mark as incomplete',
+        assigneeError: 'There was an error assigning this task, please try another assignee.',
     },
     statementPage: {
         generatingPDF: "We're generating your PDF right now. Please come back later!",
diff --git a/src/languages/es.js b/src/languages/es.js
index dd2e103bc8ca..820294488c13 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1280,7 +1280,6 @@ export default {
     },
     newTaskPage: {
         assignTask: 'Asignar tarea',
-        assigneeError: 'Hubo un error al asignar esta tarea, intente con otro cesionario.',
         assignMe: 'Asignar a mí mismo',
         confirmTask: 'Confirmar tarea',
         confirmError: 'Por favor introduce un título y selecciona un destino de tarea.',
@@ -1302,6 +1301,7 @@ export default {
         },
         markAsDone: 'Marcar como hecho',
         markAsIncomplete: 'Marcar como incompleta',
+        assigneeError: 'Hubo un error al asignar esta tarea, intente con otro cesionario.',
     },
     statementPage: {
         generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!',

From c7de5ec029bf2b8c9dad74a05e3a7e3eb502cb91 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 11:31:45 -0700
Subject: [PATCH 46/87] fix workspace menu item avatar display

---
 src/components/MenuItem.js                | 3 ++-
 src/components/menuItemPropTypes.js       | 3 +++
 src/pages/settings/InitialSettingsPage.js | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 5c0ad56c860f..0d3c073108ac 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -63,6 +63,7 @@ const defaultProps = {
     floatRightAvatars: [],
     shouldStackHorizontally: false,
     avatarSize: undefined,
+    floatRightAvatarSize: undefined,
     shouldBlockSelection: false,
     hoverAndPressStyle: [],
     furtherDetails: '',
@@ -254,7 +255,7 @@ function MenuItem(props) {
                                     isHovered={hovered}
                                     isPressed={pressed}
                                     icons={props.floatRightAvatars}
-                                    size={props.avatarSize || fallbackAvatarSize}
+                                    size={props.floatRightAvatarSize || fallbackAvatarSize}
                                     fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
                                     shouldStackHorizontally={props.shouldStackHorizontally}
                                 />
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 1e959c2a160c..32db89ee94d4 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -99,6 +99,9 @@ const propTypes = {
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: PropTypes.bool,
 
+    /** Prop to represent the size of the float right avatar images to be shown */
+    floatRightAvatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
     /** Prop to represent the size of the avatar images to be shown */
     avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
 
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index b7364ce623fa..3c549c0b7f71 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -277,7 +277,7 @@ class InitialSettingsPage extends React.Component {
                 brickRoadIndicator={item.brickRoadIndicator}
                 floatRightAvatars={item.floatRightAvatars}
                 shouldStackHorizontally={item.shouldStackHorizontally}
-                avatarSize={item.avatarSize}
+                floatRightAvatarSize={item.avatarSize}
                 ref={this.popoverAnchor}
                 shouldBlockSelection={Boolean(item.link)}
                 onSecondaryInteraction={!_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current) : undefined}

From 983ecc2353d0bae1d2ec60bc0a2f2d365f462820 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 27 Jun 2023 11:32:56 -0700
Subject: [PATCH 47/87] fix warning

---
 src/components/ReportActionItem/TaskView.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index fcf4dc2892aa..c8c2a5d24024 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -43,7 +43,7 @@ function TaskView(props) {
         Task.setTaskReport({...props.report, isExistingTaskReport: true});
     }, [props.report]);
 
-    const taskTitle = props.report.reportName;
+    const taskTitle = convertToLTR(props.report.reportName);
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
@@ -60,6 +60,7 @@ function TaskView(props) {
                 style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true)]}
                 ref={props.forwardedRef}
                 disabled={!isOpen}
+                accessibilityLabel={taskTitle}
             >
                 {({hovered, pressed}) => (
                     <>
@@ -78,7 +79,7 @@ function TaskView(props) {
                                     numberOfLines={3}
                                     style={styles.taskTitleMenuItem}
                                 >
-                                    {convertToLTR(taskTitle)}
+                                    {taskTitle}
                                 </Text>
                             </View>
                             <View style={styles.taskRightIconContainer}>

From 15a8fc62d7a0e7231896d6a8af1cfcdd9a2c2614 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 13:13:14 -0700
Subject: [PATCH 48/87] ensure horizontal rule refreshes correctly

---
 src/pages/home/report/ReportActionItem.js  | 9 +++------
 src/pages/home/report/ReportActionsList.js | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c0b337c3105a..040b3d2905cf 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -93,14 +93,10 @@ const propTypes = {
     preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /** All of the personalDetails */
-<<<<<<< HEAD
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
+    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
 
     /** Is this the only report action on the report? */
     isOnlyReportAction: PropTypes.bool,
-=======
-    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
->>>>>>> 5a713dd3057e1c3bd09ec9687cef93dcdb5900ff
 };
 
 const defaultProps = {
@@ -568,6 +564,7 @@ export default compose(
             prevProps.report.description === nextProps.report.description &&
             ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
             prevProps.report.managerID === nextProps.report.managerID &&
-            prevProps.report.managerEmail === nextProps.report.managerEmail,
+            prevProps.report.managerEmail === nextProps.report.managerEmail &&
+            prevProps.isOnlyReportAction === nextProps.isOnlyReportAction,
     ),
 );
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 245e4e12187b..65d705784811 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -139,11 +139,11 @@ function ReportActionsList(props) {
                     isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
                     hasOutstandingIOU={hasOutstandingIOU}
                     index={index}
-                    isOnlyReportAction={props.sortedReportActions.length === 1}
+                    isOnlyReportAction={sortedReportActions.length === 1}
                 />
             );
         },
-        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID, props.sortedReportActions],
+        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.

From 05ec710083d0721220f7d7db9cf7c4a025fbd805 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:02:26 -0700
Subject: [PATCH 49/87] fix case with empty assignee

---
 src/components/ReportActionItem/TaskView.js | 43 +++++++++++++--------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index c8c2a5d24024..c69eff9f1b45 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -101,22 +101,33 @@ function TaskView(props) {
                 disabled={!isOpen}
                 wrapperStyle={[styles.pv2]}
             />
-            <MenuItem
-                label={props.translate('task.assignee')}
-                title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                icon={UserUtils.getAvatar(
-                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar,
-                    props.report.managerID,
-                )}
-                iconType={CONST.ICON_TYPE_AVATAR}
-                avatarSize={CONST.AVATAR_SIZE.SMALLER}
-                titleStyle={styles.assigneeTextStyle}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                shouldShowRightIcon
-                disabled={!isOpen}
-                wrapperStyle={[styles.pv2]}
-                isSmallAvatarSubscriptMenu
-            />
+            {props.report.managerID ? (
+                <MenuItem
+                    label={props.translate('task.assignee')}
+                    title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
+                    icon={UserUtils.getAvatar(
+                        PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar,
+                        props.report.managerID,
+                    )}
+                    iconType={CONST.ICON_TYPE_AVATAR}
+                    avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                    titleStyle={styles.assigneeTextStyle}
+                    onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
+                    shouldShowRightIcon
+                    disabled={!isOpen}
+                    wrapperStyle={[styles.pv2]}
+                    isSmallAvatarSubscriptMenu
+                />
+            ) : (
+                <MenuItemWithTopDescription
+                    description={props.translate('task.assignee')}
+                    onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
+                    shouldShowRightIcon
+                    disabled={!isOpen}
+                    wrapperStyle={[styles.pv2]}
+                />
+            )}
+            
             {props.shouldShowHorizontalRule && <View style={styles.taskHorizontalRule} />}
         </>
     );

From b2c030f66c85cc6a3465644d7664e1cfb398d943 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:04:36 -0700
Subject: [PATCH 50/87] style

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index c69eff9f1b45..41f60a1a67f3 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -127,7 +127,7 @@ function TaskView(props) {
                     wrapperStyle={[styles.pv2]}
                 />
             )}
-            
+
             {props.shouldShowHorizontalRule && <View style={styles.taskHorizontalRule} />}
         </>
     );

From df00196d5f442391ec6b6ce0eb10b177750b3dcd Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:13:11 -0700
Subject: [PATCH 51/87] fix translations

---
 src/components/ReportActionItem/TaskPreview.js | 2 +-
 src/components/TaskHeader.js                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index efd382f92eb1..46e197daf6c8 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -82,7 +82,7 @@ function TaskPreview(props) {
                             Task.completeTask(props.taskReportID, taskTitle);
                         }
                     }}
-                    accessibilityLabel={props.translate('newTaskPage.task')}
+                    accessibilityLabel={props.translate('task.task')}
                 />
                 <RenderHTML html={htmlForTaskPreview} />
             </View>
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 8fad46378108..0dbb56582d18 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -127,7 +127,7 @@ function TaskHeader(props) {
             />
             <MenuItemWithTopDescription
                 title={lodashGet(props.report, 'description', '')}
-                description={props.translate('newTaskPage.description')}
+                description={props.translate('task.description')}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 disabled={!isOpen}
                 interactive={isOpen}

From 377ccde17eed207be0b4d5570a2a4ddcb8ab7690 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:45:30 -0700
Subject: [PATCH 52/87] remove unused style

---
 src/styles/styles.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 6dd9ba9d0afe..d5ef50471d19 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2466,17 +2466,6 @@ const styles = {
         alignItems: 'center',
     },
 
-    checkboxContainer: {
-        backgroundColor: themeColors.componentBG,
-        borderRadius: 4,
-        height: 20,
-        width: 20,
-        borderColor: themeColors.borderLighter,
-        borderWidth: 2,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-
     checkedContainer: {
         backgroundColor: themeColors.checkBox,
     },

From cab230fd7a7720bc778d79a1da29771be9493179 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:46:15 -0700
Subject: [PATCH 53/87] use utility function

---
 src/libs/ReportUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 014d52edc823..8f4071d00cdb 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1101,7 +1101,7 @@ function getReportName(report) {
  * @returns {String|*}
  */
 function getDMRootReportName(report) {
-    if ((isThread(report) || isTaskReport(report)) && !getChatType(report)) {
+    if (isChildReport(report) && !getChatType(report)) {
         const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
         return getDMRootReportName(parentReport);
     }

From 63e5c6f505623dd35a7592e16650bc0251e32efc Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 30 Jun 2023 14:47:28 -0700
Subject: [PATCH 54/87] add accessibility label

---
 src/components/ReportActionItem/TaskView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 41f60a1a67f3..b261fbca2fbc 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -73,6 +73,7 @@ function TaskView(props) {
                                 containerSize={24}
                                 containerBorderRadius={8}
                                 caretSize={16}
+                                accessibilityLabel={taskTitle}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text

From ef26b0e4ca429c45547e351facbe12710c48d166 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 09:24:09 -0700
Subject: [PATCH 55/87] fix merge conflicts

---
 src/pages/tasks/NewTaskPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index d9ef72afdca1..1994305d674f 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -118,7 +118,7 @@ function NewTaskPage(props) {
             return;
         }
 
-        TaskUtils.createTaskAndNavigate(parentReport.reportID, props.task.title, props.task.description, props.task.assignee, props.task.assigneeAccountID);
+        Task.createTaskAndNavigate(parentReport.reportID, props.task.title, props.task.description, props.task.assignee, props.task.assigneeAccountID);
     }
 
     if (!Permissions.canUseTasks(props.betas)) {

From 1f78014dac2e1ee1109be826bbe4c47255cd5ead Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 11:33:59 -0700
Subject: [PATCH 56/87] fix task header background color

---
 src/components/MoneyRequestHeader.js | 2 +-
 src/components/TaskHeader.js         | 2 +-
 src/pages/home/ReportScreen.js       | 2 +-
 src/styles/styles.js                 | 6 +++++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 2a640ecc663a..23e61490d9a5 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -96,7 +96,7 @@ function MoneyRequestHeader(props) {
         report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], '');
     }
     return (
-        <View style={[styles.backgroundBG, styles.pl0]}>
+        <View style={[styles.highlightBG, styles.pl0]}>
             <HeaderWithBackButton
                 shouldShowAvatarWithDisplay
                 shouldShowPinButton={props.isSingleTransactionView}
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 31990dccc7cd..79474e70e375 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[styles.backgroundBG, styles.pl0]}>
+            <View style={[styles.appBG, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 92d1888f578f..d95b79eebba8 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -295,7 +295,7 @@ class ReportScreen extends React.Component {
 
                             {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
                                 <View style={styles.borderBottom}>
-                                    <View style={[styles.backgroundBG, styles.pl0]}>
+                                    <View style={[styles.highlightBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
                                             <TaskHeaderActionButton report={this.props.report} />
                                         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d85da9c55241..f8a846217fb4 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -245,10 +245,14 @@ const styles = {
         color: themeColors.textMutedReversed,
     },
 
-    backgroundBG: {
+    highlightBG: {
         backgroundColor: themeColors.highlightBG,
     },
 
+    appBG: {
+        backgroundColor: themeColors.appBG,
+    },
+
     h1: {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEUE_BOLD,

From 03dcd2bb23ccb77bf8b69f618d41ae4d8b233345 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 11:38:01 -0700
Subject: [PATCH 57/87] allow description to occupy multiple lines

---
 src/components/MenuItem.js                  | 5 +++--
 src/components/ReportActionItem/TaskView.js | 1 +
 src/components/menuItemPropTypes.js         | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 8697a889768d..9398f7d936a3 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -69,6 +69,7 @@ const defaultProps = {
     furtherDetails: '',
     furtherDetailsIcon: undefined,
     isSmallAvatarSubscriptMenu: false,
+    numberOfLines: 1,
 };
 
 function MenuItem(props) {
@@ -82,7 +83,7 @@ function MenuItem(props) {
             props.shouldShowBasicTitle ? undefined : styles.textStrong,
             props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
             props.interactive && props.disabled ? {...styles.userSelectNone} : undefined,
-            styles.pre,
+            props.numberOfLines === 1 && styles.pre,
             styles.ltr,
             isDeleted ? styles.offlineFeedback.deleted : undefined,
         ],
@@ -196,7 +197,7 @@ function MenuItem(props) {
                                     {Boolean(props.title) && (
                                         <Text
                                             style={titleTextStyle}
-                                            numberOfLines={1}
+                                            numberOfLines={props.numberOfLines}
                                         >
                                             {convertToLTR(props.title)}
                                         </Text>
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index b261fbca2fbc..46f61f53278b 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -101,6 +101,7 @@ function TaskView(props) {
                 shouldShowRightIcon
                 disabled={!isOpen}
                 wrapperStyle={[styles.pv2]}
+                numberOfLines={3}
             />
             {props.report.managerID ? (
                 <MenuItem
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 32db89ee94d4..3ab6afa88f82 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -125,6 +125,9 @@ const propTypes = {
 
     /**  Whether we should use small avatar subscript sizing the for menu item */
     isSmallAvatarSubscriptMenu: PropTypes.bool,
+
+    /** The max number of lines the title text should occupy before ellipses are added */
+    numberOfLines: PropTypes.number,
 };
 
 export default propTypes;

From 6a91367c10efcdfd34c59315a6b4b713fa8f9686 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 12:00:51 -0700
Subject: [PATCH 58/87] fix inverted elements on ios

---
 src/components/ReportActionItem/TaskView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 46f61f53278b..908cfda34e73 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -48,7 +48,7 @@ function TaskView(props) {
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
     return (
-        <>
+        <View>
             <PressableWithSecondaryInteraction
                 onPress={Session.checkIfActionIsAllowed((e) => {
                     if (e && e.type === 'click') {
@@ -131,7 +131,7 @@ function TaskView(props) {
             )}
 
             {props.shouldShowHorizontalRule && <View style={styles.taskHorizontalRule} />}
-        </>
+        </View>
     );
 }
 

From f85dda2b2b22b1b5351a4458bcfcc8510ccb6a3b Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 12:20:02 -0700
Subject: [PATCH 59/87] Update src/styles/styles.js

Co-authored-by: Fedi Rajhi <fedirjh@gmail.com>
---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index f8a846217fb4..e0446b52f611 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3405,7 +3405,7 @@ const styles = {
         ...spacing.flex1,
         fontSize: variables.fontSizeXLarge,
         maxWidth: '100%',
-        wordBreak: 'break-word',
+        ...wordBreak.breakWord,
     },
 
     taskTitleDescription: {

From 9c045b2f5d5b4044d077c83896c1fe90bcb00eaa Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 12:21:13 -0700
Subject: [PATCH 60/87] fix warnings

---
 src/components/MenuItem.js                   | 1 +
 src/components/ReportActionItem/TaskView.js  | 8 ++++----
 src/components/menuItemPropTypes.js          | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js | 3 ++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9398f7d936a3..4819daebefbc 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -70,6 +70,7 @@ const defaultProps = {
     furtherDetailsIcon: undefined,
     isSmallAvatarSubscriptMenu: false,
     numberOfLines: 1,
+    title: '',
 };
 
 function MenuItem(props) {
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 908cfda34e73..09b694608688 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -43,7 +43,7 @@ function TaskView(props) {
         Task.setTaskReport({...props.report, isExistingTaskReport: true});
     }, [props.report]);
 
-    const taskTitle = convertToLTR(props.report.reportName);
+    const taskTitle = convertToLTR(props.report.reportName || '');
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
 
@@ -60,7 +60,7 @@ function TaskView(props) {
                 style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true)]}
                 ref={props.forwardedRef}
                 disabled={!isOpen}
-                accessibilityLabel={taskTitle}
+                accessibilityLabel={taskTitle || props.translate('task.task')}
             >
                 {({hovered, pressed}) => (
                     <>
@@ -73,7 +73,7 @@ function TaskView(props) {
                                 containerSize={24}
                                 containerBorderRadius={8}
                                 caretSize={16}
-                                accessibilityLabel={taskTitle}
+                                accessibilityLabel={taskTitle || props.translate('task.task')}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
@@ -96,7 +96,7 @@ function TaskView(props) {
             </PressableWithSecondaryInteraction>
             <MenuItemWithTopDescription
                 description={props.translate('task.description')}
-                title={props.report.description}
+                title={props.report.description || ''}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon
                 disabled={!isOpen}
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 3ab6afa88f82..d366f457ed9b 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -31,7 +31,7 @@ const propTypes = {
     iconHeight: PropTypes.number,
 
     /** Text to display for the item */
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
 
     /** Text that appears above the title */
     label: PropTypes.string,
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 6862bc76dac5..49759a795254 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -3,6 +3,7 @@ import React, {useState, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -182,7 +183,7 @@ function TaskAssigneeSelectorModal(props) {
                 <>
                     <HeaderWithBackButton
                         title={props.translate('task.assignee')}
-                        onBackButtonPress={() => (props.task.report.isExistingTaskReport ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK))}
+                        onBackButtonPress={() => (lodashGet(props.task.report, 'isExistingTaskReport') ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK))}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector

From 79cdc72b4e8bb88dc6a96a2a2cf9d91485cb2964 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 12:26:15 -0700
Subject: [PATCH 61/87] fix background color for task headers

---
 src/components/TaskHeader.js   | 2 +-
 src/pages/home/HeaderView.js   | 2 +-
 src/pages/home/ReportScreen.js | 2 +-
 src/styles/styles.js           | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 79474e70e375..e72b5602bea6 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[styles.appBG, styles.pl0]}>
+            <View style={[styles.darkBG, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 9831ac95f5da..24fd4aebd4ef 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -135,7 +135,7 @@ function HeaderView(props) {
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
     return (
         <View
-            style={[styles.appContentHeader, isTaskReport && {backgroundColor: themeColors.highlightBG, borderBottomWidth: 0}]}
+            style={[styles.appContentHeader, isTaskReport && {borderBottomWidth: 0}]}
             nativeID="drag-area"
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index d95b79eebba8..90fc075c2261 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -295,7 +295,7 @@ class ReportScreen extends React.Component {
 
                             {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
                                 <View style={styles.borderBottom}>
-                                    <View style={[styles.highlightBG, styles.pl0]}>
+                                    <View style={[styles.darkBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
                                             <TaskHeaderActionButton report={this.props.report} />
                                         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 89433f3c764a..b30e98fdff56 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -253,6 +253,10 @@ const styles = {
         backgroundColor: themeColors.appBG,
     },
 
+    darkBG: {
+        backgroundCOlor: themeColors.splashBG,
+    },
+
     h1: {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEUE_BOLD,

From 4e7356f2b820dfea54a2b527388ee34dcf890bd5 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:32:32 -0700
Subject: [PATCH 62/87] fix review comments

---
 src/pages/home/HeaderView.js   | 1 -
 src/pages/home/ReportScreen.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 24fd4aebd4ef..568b2e474ed2 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
 import Icon from '../../components/Icon';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import compose from '../../libs/compose';
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 90fc075c2261..476801932adf 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -294,7 +294,7 @@ class ReportScreen extends React.Component {
                             )}
 
                             {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
-                                <View style={styles.borderBottom}>
+                                <View style={[styles.borderBottom]}>
                                     <View style={[styles.darkBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
                                             <TaskHeaderActionButton report={this.props.report} />

From e1b21e5f87dd24212b779fa6944bdf1a4624d4aa Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:33:52 -0700
Subject: [PATCH 63/87] typo

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index b30e98fdff56..cd64a67d04d5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -254,7 +254,7 @@ const styles = {
     },
 
     darkBG: {
-        backgroundCOlor: themeColors.splashBG,
+        backgroundColor: themeColors.splashBG,
     },
 
     h1: {

From a032cb69079c2d0034d2a9cae1753a535325e22b Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:34:20 -0700
Subject: [PATCH 64/87] Update src/components/TaskHeaderActionButton.js

Co-authored-by: Fedi Rajhi <fedirjh@gmail.com>
---
 src/components/TaskHeaderActionButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
index cc0c0f1382b2..0ae97d2160d8 100644
--- a/src/components/TaskHeaderActionButton.js
+++ b/src/components/TaskHeaderActionButton.js
@@ -22,7 +22,7 @@ function TaskHeaderActionButton(props) {
         <PressableWithFeedback
             onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
             disabled={!ReportUtils.isOpenTaskReport(props.report)}
-            accessibilityRole="button"
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             accessibilityLabel={props.translate('task.assignee')}
             hoverDimmingValue={1}
             pressDimmingValue={0.2}

From fd127852689f603aa12e07a231f55a03a4b1b450 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:37:28 -0700
Subject: [PATCH 65/87] import const

---
 src/components/TaskHeaderActionButton.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
index 0ae97d2160d8..d1350a9b6168 100644
--- a/src/components/TaskHeaderActionButton.js
+++ b/src/components/TaskHeaderActionButton.js
@@ -9,6 +9,7 @@ import Button from './Button';
 import * as Task from '../libs/actions/Task';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import * as ReportUtils from '../libs/ReportUtils';
+import CONST from '../CONST';
 
 const propTypes = {
     /** The report currently being looked at */

From a21beac67b1a29f939d7a62ec9b2692e4c23ddf3 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:46:16 -0700
Subject: [PATCH 66/87] add missing border bottom styles to task headergis

---
 src/components/TaskHeader.js | 2 +-
 src/pages/home/HeaderView.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index e72b5602bea6..057dc1b45258 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[styles.darkBG, styles.pl0]}>
+            <View style={[styles.darkBG, styles.pl0, styles.borderBottom]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 568b2e474ed2..702bab1bb6db 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -134,7 +134,7 @@ function HeaderView(props) {
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
     return (
         <View
-            style={[styles.appContentHeader, isTaskReport && {borderBottomWidth: 0}]}
+            style={[styles.appContentHeader]}
             nativeID="drag-area"
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>

From 3896e42a9f0fd9cb537c1c951ac941e835e3d804 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 14:46:48 -0700
Subject: [PATCH 67/87] remove unused

---
 src/components/TaskHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index 057dc1b45258..e72b5602bea6 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[styles.darkBG, styles.pl0, styles.borderBottom]}>
+            <View style={[styles.darkBG, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback

From e3e838ff6e1a58090e1d48921b5480f44772ee48 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 15:03:36 -0700
Subject: [PATCH 68/87] fix duplicated border bottom styles, fix display bug
 with incorrect bg color

---
 src/components/TaskHeader.js   | 2 +-
 src/pages/home/HeaderView.js   | 4 +++-
 src/pages/home/ReportScreen.js | 2 +-
 src/styles/styles.js           | 6 ------
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
index e72b5602bea6..79474e70e375 100644
--- a/src/components/TaskHeader.js
+++ b/src/components/TaskHeader.js
@@ -60,7 +60,7 @@ function TaskHeader(props) {
 
     return (
         <View style={styles.borderBottom}>
-            <View style={[styles.darkBG, styles.pl0]}>
+            <View style={[styles.appBG, styles.pl0]}>
                 <View style={[styles.ph5, styles.pb5]}>
                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                     <PressableWithFeedback
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 702bab1bb6db..656d08eeec0b 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -132,9 +132,11 @@ function HeaderView(props) {
     const shouldShowSubscript = ReportUtils.shouldReportShowSubscript(props.report);
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+    const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
+
     return (
         <View
-            style={[styles.appContentHeader]}
+            style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             nativeID="drag-area"
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 476801932adf..0bc8b2f3aa91 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -295,7 +295,7 @@ class ReportScreen extends React.Component {
 
                             {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
                                 <View style={[styles.borderBottom]}>
-                                    <View style={[styles.darkBG, styles.pl0]}>
+                                    <View style={[styles.appBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
                                             <TaskHeaderActionButton report={this.props.report} />
                                         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cd64a67d04d5..12cab67e6ae5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -253,10 +253,6 @@ const styles = {
         backgroundColor: themeColors.appBG,
     },
 
-    darkBG: {
-        backgroundColor: themeColors.splashBG,
-    },
-
     h1: {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEUE_BOLD,
@@ -1443,8 +1439,6 @@ const styles = {
     },
 
     appContentHeader: {
-        borderBottomWidth: 1,
-        borderColor: themeColors.border,
         height: variables.contentHeaderHeight,
         justifyContent: 'center',
         display: 'flex',

From 4db3cf0c555587095ed45ca1796984566713c5d9 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 15:03:56 -0700
Subject: [PATCH 69/87] remove unused

---
 src/components/TaskHeader.js | 151 -----------------------------------
 1 file changed, 151 deletions(-)
 delete mode 100644 src/components/TaskHeader.js

diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
deleted file mode 100644
index 79474e70e375..000000000000
--- a/src/components/TaskHeader.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, {useEffect} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
-import reportPropTypes from '../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import Button from './Button';
-import * as Task from '../libs/actions/Task';
-import * as UserUtils from '../libs/UserUtils';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import ONYXKEYS from '../ONYXKEYS';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
-    /** Current user session */
-    session: PropTypes.shape({
-        accountID: PropTypes.number,
-    }),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    session: {
-        accountID: 0,
-    },
-};
-
-function TaskHeader(props) {
-    const title = ReportUtils.getReportName(props.report);
-    const assigneeAccountID = Task.getTaskAssigneeAccountID(props.report);
-    const assigneeName = ReportUtils.getDisplayNameForParticipant(assigneeAccountID);
-    const assigneeAvatar = UserUtils.getAvatar(lodashGet(props.personalDetails, [assigneeAccountID, 'avatar']), assigneeAccountID);
-    const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN;
-    const isCompleted = ReportUtils.isTaskCompleted(props.report);
-
-    useEffect(() => {
-        Task.setTaskReport(props.report);
-    }, [props.report]);
-
-    return (
-        <View style={styles.borderBottom}>
-            <View style={[styles.appBG, styles.pl0]}>
-                <View style={[styles.ph5, styles.pb5]}>
-                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
-                    <PressableWithFeedback
-                        onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                        disabled={!isOpen}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        accessibilityLabel={props.translate('task.assignee')}
-                        hoverDimmingValue={1}
-                        pressDimmingValue={0.2}
-                    >
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                {assigneeAccountID && assigneeAccountID > 0 && (
-                                    <>
-                                        <Avatar
-                                            source={assigneeAvatar}
-                                            type={CONST.ICON_TYPE_AVATAR}
-                                            name={assigneeName}
-                                            size={CONST.AVATAR_SIZE.HEADER}
-                                        />
-                                        <View style={[styles.flexColumn, styles.ml3]}>
-                                            <Text
-                                                style={[styles.headerText, styles.pre]}
-                                                numberOfLines={1}
-                                            >
-                                                {assigneeName}
-                                            </Text>
-                                        </View>
-                                    </>
-                                )}
-                            </View>
-                            <View style={[styles.flexRow]}>
-                                {isCompleted ? (
-                                    <>
-                                        <Text>{props.translate('task.completed')}</Text>
-                                        <View style={styles.defaultCheckmarkWrapper}>
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={themeColors.iconSuccessFill}
-                                            />
-                                        </View>
-                                    </>
-                                ) : (
-                                    <Button
-                                        success
-                                        isDisabled={Task.isTaskCanceled(props.report) || !Task.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID)}
-                                        medium
-                                        text={props.translate('task.markAsDone')}
-                                        onPress={() => Task.completeTask(props.report.reportID, title)}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    </PressableWithFeedback>
-                </View>
-            </View>
-            <MenuItemWithTopDescription
-                shouldShowHeaderTitle
-                title={props.report.reportName}
-                description={props.translate('task.task')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
-            <MenuItemWithTopDescription
-                title={lodashGet(props.report, 'description', '')}
-                description={props.translate('task.description')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
-        </View>
-    );
-}
-
-TaskHeader.propTypes = propTypes;
-TaskHeader.defaultProps = defaultProps;
-TaskHeader.displayName = 'TaskHeader';
-
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(TaskHeader);

From cbecf45d8fc76d4cb4913e1dc21b3fdfb2211885 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 15:05:29 -0700
Subject: [PATCH 70/87] remove unused

---
 ios/Podfile.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 6075ab1ef4c6..a5d043331453 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1024,7 +1024,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Airship: c70eed50e429f97f5adb285423c7291fb7a032ae
   AirshipFrameworkProxy: 7bc4130c668c6c98e2d4c60fe4c9eb61a999be99
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f
@@ -1067,7 +1067,7 @@ SPEC CHECKSUMS:
   Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
   Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be
   RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30
   React: a71c8e1380f07e01de721ccd52bcf9c03e81867d
@@ -1141,4 +1141,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 69f576e475be6d130ee96103b131f71bfdbf8a6e
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1

From 9713f9cd8f4ef6042dadb312c49bc2fab8fbee4c Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Wed, 5 Jul 2023 16:49:32 -0700
Subject: [PATCH 71/87] disable picking assignee via header for closed tasks

---
 src/pages/home/HeaderView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 656d08eeec0b..38e50ed9e06e 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -163,6 +163,7 @@ function HeaderView(props) {
                         <PressableWithoutFeedback
                             onPress={() => (isTaskReport ? Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID)) : ReportUtils.navigateToDetailsPage(props.report))}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
+                            disabled={isTaskReport && !ReportUtils.isOpenTaskReport(props.report)}
                             accessibilityLabel={title}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >

From aca68bde18763faa55221d7a778b5efb1b7da65d Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 11:38:53 -0700
Subject: [PATCH 72/87] disable checkbox for canceled tasks

---
 src/components/ReportActionItem/TaskView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 09b694608688..5f5daee62a43 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -74,6 +74,8 @@ function TaskView(props) {
                                 containerBorderRadius={8}
                                 caretSize={16}
                                 accessibilityLabel={taskTitle || props.translate('task.task')}
+                                disabled={ReportUtils.isCanceledTaskReport(props.report)}
+
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text

From 629f6a2a47df486c1abd108d461d39413e2ce3f7 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 11:39:30 -0700
Subject: [PATCH 73/87] style

---
 src/components/ReportActionItem/TaskView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 5f5daee62a43..b855a35a4ddc 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -75,7 +75,6 @@ function TaskView(props) {
                                 caretSize={16}
                                 accessibilityLabel={taskTitle || props.translate('task.task')}
                                 disabled={ReportUtils.isCanceledTaskReport(props.report)}
-
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text

From 87744a15bb3582e9f7c7f4f829df08ac8636c37a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 11:58:00 -0700
Subject: [PATCH 74/87] fix merge conflicts

---
 .../ReportActionItem/TaskPreview.js           |   2 +-
 src/components/TaskHeader.js                  | 159 ------------------
 2 files changed, 1 insertion(+), 160 deletions(-)
 delete mode 100644 src/components/TaskHeader.js

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 5ebd083b94ab..cb3b947cd004 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -66,7 +66,7 @@ function TaskPreview(props) {
         ? props.taskReport.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.taskReport.statusNum === CONST.REPORT.STATUS.APPROVED
         : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
     const taskTitle = props.taskReport.reportName || props.action.childReportName;
-    const taskAssigneeAccountID = TaskUtils.getTaskAssigneeAccountID(props.taskReport);
+    const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(props.taskReport);
     const taskAssignee = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], ''));
     const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
 
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
deleted file mode 100644
index 2301ba7eb376..000000000000
--- a/src/components/TaskHeader.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, {useEffect} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
-import reportPropTypes from '../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import Button from './Button';
-import * as TaskUtils from '../libs/actions/Task';
-import * as UserUtils from '../libs/UserUtils';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import ONYXKEYS from '../ONYXKEYS';
-import withNavigationFocus from './withNavigationFocus';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
-    /** Current user session */
-    session: PropTypes.shape({
-        accountID: PropTypes.number,
-    }),
-
-    /** Whether the screen is focused */
-    isFocused: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    session: {
-        accountID: 0,
-    },
-};
-
-function TaskHeader(props) {
-    const title = ReportUtils.getReportName(props.report);
-    const assigneeAccountID = TaskUtils.getTaskAssigneeAccountID(props.report);
-    const assigneeName = ReportUtils.getDisplayNameForParticipant(assigneeAccountID);
-    const assigneeAvatar = UserUtils.getAvatar(lodashGet(props.personalDetails, [assigneeAccountID, 'avatar']), assigneeAccountID);
-    const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN;
-    const isCompleted = ReportUtils.isTaskCompleted(props.report);
-
-    useEffect(() => {
-        if (!props.isFocused) {
-            return;
-        }
-        TaskUtils.setTaskReport(props.report);
-    }, [props.report, props.isFocused]);
-
-    return (
-        <View style={styles.borderBottom}>
-            <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-                <View style={[styles.ph5, styles.pb5]}>
-                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
-                    <PressableWithFeedback
-                        onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                        disabled={!isOpen}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        accessibilityLabel={props.translate('task.assignee')}
-                        hoverDimmingValue={1}
-                        pressDimmingValue={0.2}
-                    >
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                {assigneeAccountID && assigneeAccountID > 0 && (
-                                    <>
-                                        <Avatar
-                                            source={assigneeAvatar}
-                                            type={CONST.ICON_TYPE_AVATAR}
-                                            name={assigneeName}
-                                            size={CONST.AVATAR_SIZE.HEADER}
-                                        />
-                                        <View style={[styles.flexColumn, styles.ml3]}>
-                                            <Text
-                                                style={[styles.headerText, styles.pre]}
-                                                numberOfLines={1}
-                                            >
-                                                {assigneeName}
-                                            </Text>
-                                        </View>
-                                    </>
-                                )}
-                            </View>
-                            <View style={[styles.flexRow]}>
-                                {isCompleted ? (
-                                    <>
-                                        <Text>{props.translate('task.completed')}</Text>
-                                        <View style={styles.defaultCheckmarkWrapper}>
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={themeColors.iconSuccessFill}
-                                            />
-                                        </View>
-                                    </>
-                                ) : (
-                                    <Button
-                                        success
-                                        isDisabled={TaskUtils.isTaskCanceled(props.report) || !TaskUtils.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID)}
-                                        medium
-                                        text={props.translate('newTaskPage.markAsDone')}
-                                        onPress={() => TaskUtils.completeTask(props.report.reportID, title)}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    </PressableWithFeedback>
-                </View>
-            </View>
-            <MenuItemWithTopDescription
-                shouldShowHeaderTitle
-                title={props.report.reportName}
-                description={props.translate('task.task')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
-            <MenuItemWithTopDescription
-                title={lodashGet(props.report, 'description', '')}
-                description={props.translate('task.description')}
-                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
-                disabled={!isOpen}
-                interactive={isOpen}
-            />
-        </View>
-    );
-}
-
-TaskHeader.propTypes = propTypes;
-TaskHeader.defaultProps = defaultProps;
-TaskHeader.displayName = 'TaskHeader';
-
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-    withNavigationFocus,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(TaskHeader);

From 3be5ff2a6594abdcf90a00cf333e8f2852753bcc Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 13:39:29 -0700
Subject: [PATCH 75/87] remove unused

---
 src/components/ReportActionItem/TaskPreview.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index cb3b947cd004..db28a804b2ac 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -18,7 +18,6 @@ import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import * as Task from '../../libs/actions/Task';
-import * as ReportUtils from '../../libs/ReportUtils';
 import RenderHTML from '../RenderHTML';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';

From fb21771e1b676a5e4510beff461445f8998fc69e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 13:55:17 -0700
Subject: [PATCH 76/87] fix crash from merge

---
 src/components/ReportActionItem/TaskPreview.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index db28a804b2ac..1c7aafd84ecc 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -18,6 +18,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import * as Task from '../../libs/actions/Task';
+import * as ReportUtils from '../../libs/ReportUtils';
 import RenderHTML from '../RenderHTML';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';
@@ -82,7 +83,7 @@ function TaskPreview(props) {
                         style={[styles.mr2]}
                         containerStyle={[styles.taskCheckbox]}
                         isChecked={isTaskCompleted}
-                        disabled={Task.isTaskCanceled(props.taskReport)}
+                        disabled={ReportUtils.isCanceledTaskReport(props.taskReport)}
                         onPress={() => {
                             if (isTaskCompleted) {
                                 Task.reopenTask(props.taskReportID, taskTitle);

From c91e7891ed8dfe0024a8a8ccb9a62ec4d558863a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 15:20:59 -0700
Subject: [PATCH 77/87] disable title menu for canceled tasks

---
 src/components/ReportActionItem/TaskView.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index b855a35a4ddc..8e8e899a0a6c 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -46,6 +46,7 @@ function TaskView(props) {
     const taskTitle = convertToLTR(props.report.reportName || '');
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
+    const isCanceled = ReportUtils.isCanceledTaskReport(props.report);
 
     return (
         <View>
@@ -57,7 +58,7 @@ function TaskView(props) {
 
                     Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
                 })}
-                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true)]}
+                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true)]}
                 ref={props.forwardedRef}
                 disabled={!isOpen}
                 accessibilityLabel={taskTitle || props.translate('task.task')}
@@ -74,7 +75,7 @@ function TaskView(props) {
                                 containerBorderRadius={8}
                                 caretSize={16}
                                 accessibilityLabel={taskTitle || props.translate('task.task')}
-                                disabled={ReportUtils.isCanceledTaskReport(props.report)}
+                                disabled={isCanceled}
                             />
                             <View style={[styles.flexRow, styles.flex1]}>
                                 <Text

From 4c6e442d1135f1234fef63e9857c1ccbc75977dc Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 15:21:31 -0700
Subject: [PATCH 78/87] disable title menu for canceled tasks

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 8e8e899a0a6c..1769f575fbcb 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -89,7 +89,7 @@ function TaskView(props) {
                                 <Icon
                                     additionalStyles={[styles.alignItemsCenter]}
                                     src={Expensicons.ArrowRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, isCanceled))}
                                 />
                             </View>
                         </View>

From 3626cab170cc5d8e73ff898830b5891688d0a1b3 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 15:26:39 -0700
Subject: [PATCH 79/87] disable title menu for canceled tasks

---
 src/components/ReportActionItem/TaskView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 1769f575fbcb..0f36d56f2e11 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -58,9 +58,9 @@ function TaskView(props) {
 
                     Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
                 })}
-                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true)]}
+                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true), isCanceled && styles.buttonOpacityDisabled]}
                 ref={props.forwardedRef}
-                disabled={!isOpen}
+                disabled={!isOpen || isCanceled}
                 accessibilityLabel={taskTitle || props.translate('task.task')}
             >
                 {({hovered, pressed}) => (

From 5d5296ee7c003542f17483c7fd19f8360f775ca0 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 15:38:25 -0700
Subject: [PATCH 80/87] linter

---
 src/components/ReportActionItem/TaskView.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 0f36d56f2e11..777f25231195 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -58,7 +58,12 @@ function TaskView(props) {
 
                     Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
                 })}
-                style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true), isCanceled && styles.buttonOpacityDisabled]}
+                style={({hovered, pressed}) => [
+                    styles.ph5,
+                    styles.pv2,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true),
+                    isCanceled && styles.buttonOpacityDisabled,
+                ]}
                 ref={props.forwardedRef}
                 disabled={!isOpen || isCanceled}
                 accessibilityLabel={taskTitle || props.translate('task.task')}

From 58f3eebd1bd1b69aee049ef1377f029a7f5e81f0 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 15:41:46 -0700
Subject: [PATCH 81/87] fix conflicts

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 777f25231195..a86d8d1fe1a7 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -108,7 +108,7 @@ function TaskView(props) {
                 shouldShowRightIcon
                 disabled={!isOpen}
                 wrapperStyle={[styles.pv2]}
-                numberOfLines={3}
+                numberOfLinesTitle={3}
             />
             {props.report.managerID ? (
                 <MenuItem

From e7a85ae0e0cbc3f085e9a15da202e7313e89851a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 17:48:38 -0700
Subject: [PATCH 82/87] disable hovered/pressed styles for task title menu item
 for completed tasks

---
 src/components/ReportActionItem/TaskView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index a86d8d1fe1a7..d224e2a1cd06 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -61,11 +61,11 @@ function TaskView(props) {
                 style={({hovered, pressed}) => [
                     styles.ph5,
                     styles.pv2,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, isCanceled), true),
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, !isOpen), true),
                     isCanceled && styles.buttonOpacityDisabled,
                 ]}
                 ref={props.forwardedRef}
-                disabled={!isOpen || isCanceled}
+                disabled={!isOpen}
                 accessibilityLabel={taskTitle || props.translate('task.task')}
             >
                 {({hovered, pressed}) => (
@@ -94,7 +94,7 @@ function TaskView(props) {
                                 <Icon
                                     additionalStyles={[styles.alignItemsCenter]}
                                     src={Expensicons.ArrowRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, isCanceled))}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, !isOpen))}
                                 />
                             </View>
                         </View>

From 02da6af1bc867d7f40caca4d849b25900054566a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 17:51:09 -0700
Subject: [PATCH 83/87] apply disabled styles to title text for completed task

---
 src/components/ReportActionItem/TaskView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index d224e2a1cd06..371e16a9401e 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -82,7 +82,7 @@ function TaskView(props) {
                                 accessibilityLabel={taskTitle || props.translate('task.task')}
                                 disabled={isCanceled}
                             />
-                            <View style={[styles.flexRow, styles.flex1]}>
+                            <View style={[styles.flexRow, styles.flex1, !isOpen && styles.buttonOpacityDisabled]}>
                                 <Text
                                     numberOfLines={3}
                                     style={styles.taskTitleMenuItem}

From ee378e59c34eb7fee442c2a3b8eb8aa8a5070838 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 6 Jul 2023 20:11:03 -0700
Subject: [PATCH 84/87] pass cancelledTaskReportActionID

---
 src/libs/actions/Task.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 33abb605d435..c2ed633cfd67 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -625,7 +625,7 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
         },
     ];
 
-    API.write('CancelTask', {taskReportID, optimisticReportActionID}, {optimisticData, failureData});
+    API.write('CancelTask', {, cancelledTaskReportActionID: optimisticReportActionID, taskReportID}, {optimisticData, failureData});
 }
 
 /**

From c5e01bc37e3b441308517d5c3a4cc62b8cfd8705 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 7 Jul 2023 10:47:42 -0700
Subject: [PATCH 85/87] Update Task.js

---
 src/libs/actions/Task.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index c2ed633cfd67..6e60c68c1507 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -625,7 +625,7 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
         },
     ];
 
-    API.write('CancelTask', {, cancelledTaskReportActionID: optimisticReportActionID, taskReportID}, {optimisticData, failureData});
+    API.write('CancelTask', {cancelledTaskReportActionID: optimisticReportActionID, taskReportID}, {optimisticData, failureData});
 }
 
 /**

From c0aca3912204274e714db9fa4a663b654fe2d225 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 7 Jul 2023 11:16:31 -0700
Subject: [PATCH 86/87] don't grey out menu items when canceled/closed

---
 src/components/MenuItem.js                  |  3 ++-
 src/components/ReportActionItem/TaskView.js | 29 ++++++++++++---------
 src/components/TaskHeaderActionButton.js    |  4 ++-
 src/components/menuItemPropTypes.js         |  3 +++
 src/pages/home/ReportScreen.js              | 15 ++++++-----
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 8ba3a16f2008..ff26c0f6e7e4 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -71,6 +71,7 @@ const defaultProps = {
     isSmallAvatarSubscriptMenu: false,
     title: '',
     numberOfLinesTitle: 1,
+    shouldGreyOutWhenDisabled: true,
 };
 
 function MenuItem(props) {
@@ -123,7 +124,7 @@ function MenuItem(props) {
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 (hovered || pressed) && props.hoverAndPressStyle,
                 ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
-                props.disabled && styles.buttonOpacityDisabled,
+                props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
             ]}
             disabled={props.disabled}
             ref={props.forwardedRef}
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 371e16a9401e..393b104cfecd 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -62,7 +62,6 @@ function TaskView(props) {
                     styles.ph5,
                     styles.pv2,
                     StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, !isOpen), true),
-                    isCanceled && styles.buttonOpacityDisabled,
                 ]}
                 ref={props.forwardedRef}
                 disabled={!isOpen}
@@ -82,7 +81,7 @@ function TaskView(props) {
                                 accessibilityLabel={taskTitle || props.translate('task.task')}
                                 disabled={isCanceled}
                             />
-                            <View style={[styles.flexRow, styles.flex1, !isOpen && styles.buttonOpacityDisabled]}>
+                            <View style={[styles.flexRow, styles.flex1]}>
                                 <Text
                                     numberOfLines={3}
                                     style={styles.taskTitleMenuItem}
@@ -90,13 +89,16 @@ function TaskView(props) {
                                     {taskTitle}
                                 </Text>
                             </View>
-                            <View style={styles.taskRightIconContainer}>
-                                <Icon
-                                    additionalStyles={[styles.alignItemsCenter]}
-                                    src={Expensicons.ArrowRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, !isOpen))}
-                                />
-                            </View>
+                            {isOpen && (
+                                <View style={styles.taskRightIconContainer}>
+                                    <Icon
+                                        additionalStyles={[styles.alignItemsCenter]}
+                                        src={Expensicons.ArrowRight}
+                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, !isOpen))}
+                                    />
+                                </View>
+                            )}
+                            
                         </View>
                     </>
                 )}
@@ -105,10 +107,11 @@ function TaskView(props) {
                 description={props.translate('task.description')}
                 title={props.report.description || ''}
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
-                shouldShowRightIcon
+                shouldShowRightIcon={isOpen}
                 disabled={!isOpen}
                 wrapperStyle={[styles.pv2]}
                 numberOfLinesTitle={3}
+                shouldGreyOutWhenDisabled={false}
             />
             {props.report.managerID ? (
                 <MenuItem
@@ -122,18 +125,20 @@ function TaskView(props) {
                     avatarSize={CONST.AVATAR_SIZE.SMALLER}
                     titleStyle={styles.assigneeTextStyle}
                     onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                    shouldShowRightIcon
+                    shouldShowRightIcon={isOpen}
                     disabled={!isOpen}
                     wrapperStyle={[styles.pv2]}
                     isSmallAvatarSubscriptMenu
+                    shouldGreyOutWhenDisabled={false}
                 />
             ) : (
                 <MenuItemWithTopDescription
                     description={props.translate('task.assignee')}
                     onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
-                    shouldShowRightIcon
+                    shouldShowRightIcon={isOpen}
                     disabled={!isOpen}
                     wrapperStyle={[styles.pv2]}
+                    shouldGreyOutWhenDisabled={false}
                 />
             )}
 
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
index 11360479d7b7..0ecc93ee24ab 100644
--- a/src/components/TaskHeaderActionButton.js
+++ b/src/components/TaskHeaderActionButton.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import reportPropTypes from '../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import styles from '../styles/styles';
@@ -11,6 +13,7 @@ import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import * as ReportUtils from '../libs/ReportUtils';
 import CONST from '../CONST';
 import compose from '../libs/compose';
+import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -25,7 +28,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    disabled: false,
     session: {
         accountID: 0,
     },
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index d366f457ed9b..b8b28d15ddc6 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -128,6 +128,9 @@ const propTypes = {
 
     /** The max number of lines the title text should occupy before ellipses are added */
     numberOfLines: PropTypes.number,
+
+    /** Should we grey out the menu item when it is disabled? */
+    shouldGreyOutWhenDisabled: PropTypes.bool,
 };
 
 export default propTypes;
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 8b4d3ee894fd..968e4ba97a6d 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -34,11 +34,11 @@ import personalDetailsPropType from '../personalDetailsPropType';
 import withNavigationFocus from '../../components/withNavigationFocus';
 import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import TaskHeader from '../../components/TaskHeader';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
 import ReportScreenContext from './ReportScreenContext';
+import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -292,11 +292,14 @@ class ReportScreen extends React.Component {
                                 />
                             )}
 
-                            {ReportUtils.isTaskReport(this.props.report) && (
-                                <TaskHeader
-                                    report={this.props.report}
-                                    personalDetails={this.props.personalDetails}
-                                />
+                            {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
+                                <View style={[styles.borderBottom]}>
+                                    <View style={[styles.appBG, styles.pl0]}>
+                                        <View style={[styles.ph5, styles.pb3]}>
+                                            <TaskHeaderActionButton report={this.props.report} />
+                                        </View>
+                                    </View>
+                                </View>
                             )}
                         </OfflineWithFeedback>
                         {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (

From e2d7eca033884721dff77fe58647924505bbdc63 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 7 Jul 2023 11:27:19 -0700
Subject: [PATCH 87/87] prettier

---
 src/pages/home/HeaderView.js   |  2 +-
 src/pages/home/ReportScreen.js | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index c3d1c453c67a..bf616870fc48 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -224,7 +224,7 @@ function HeaderView(props) {
                             )}
                         </PressableWithoutFeedback>
                         <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                            {isTaskReport && !props.isSmallScreenWidth && <TaskHeaderActionButton report={props.report} />}
+                            {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
                             {shouldShowCallButton && (
                                 <VideoChatButtonAndMenu
                                     isConcierge={isConcierge}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 968e4ba97a6d..8464c7a85e70 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -292,15 +292,17 @@ class ReportScreen extends React.Component {
                                 />
                             )}
 
-                            {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && (
-                                <View style={[styles.borderBottom]}>
-                                    <View style={[styles.appBG, styles.pl0]}>
-                                        <View style={[styles.ph5, styles.pb3]}>
-                                            <TaskHeaderActionButton report={this.props.report} />
+                            {ReportUtils.isTaskReport(this.props.report) &&
+                                this.props.isSmallScreenWidth &&
+                                ReportUtils.isOpenTaskReport(this.props.report)(
+                                    <View style={[styles.borderBottom]}>
+                                        <View style={[styles.appBG, styles.pl0]}>
+                                            <View style={[styles.ph5, styles.pb3]}>
+                                                <TaskHeaderActionButton report={this.props.report} />
+                                            </View>
                                         </View>
-                                    </View>
-                                </View>
-                            )}
+                                    </View>,
+                                )}
                         </OfflineWithFeedback>
                         {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
                             <Banner