Fix/27634: Improve private notes flow

src/libs/ReportUtils.ts

@@ -1,6 +1,7 @@
 import {format} from 'date-fns';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
+import {isEmpty} from 'lodash';
 import lodashEscape from 'lodash/escape';
 import lodashFindLastIndex from 'lodash/findLastIndex';
 import lodashIntersection from 'lodash/intersection';
@@ -14,7 +15,7 @@ import CONST from '@src/CONST';
 import {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Transaction} from '@src/types/onyx';
+import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
 import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {ChangeLog, IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
 import {Message, ReportActions} from '@src/types/onyx/ReportAction';
@@ -4216,6 +4217,21 @@ function shouldDisableWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntr
     return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
 }
 
+/**
+ * Navigates to the appropriate screen based on the presence of a private note for the current user.
+ */
+function navigateToPrivateNotes(report: Report, session: Session) {
+    if (isEmpty(report) || isEmpty(session)) {
+        return;
+    }
+    const currentUserPrivateNote = report.privateNotes?.[String(session.accountID)]?.note ?? '';
+    if (isEmpty(currentUserPrivateNote)) {
+        Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, String(session.accountID)));
+        return;
+    }
+    Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -4380,6 +4396,7 @@ export {
     getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
+    navigateToPrivateNotes,
     canEditWriteCapability,
 };
 

src/pages/PrivateNotes/PrivateNotesEditPage.js

@@ -18,6 +18,7 @@ import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
@@ -94,19 +95,21 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
 
     const savePrivateNote = () => {
         const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
-
+        let editedNote = '';
         if (privateNote.trim() !== originalNote.trim()) {
-            const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
+            editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
             Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote);
         }
 
         // We want to delete saved private note draft after saving the note
         debouncedSavePrivateNote('');
 
         Keyboard.dismiss();
-
-        // Take user back to the PrivateNotesView page
-        Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID));
+        if (!_.some({...report.privateNotes, [route.params.accountID]: {note: editedNote}}, (item) => item.note)) {
+            ReportUtils.navigateToDetailsPage(report);
+        } else {
+            Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+        }
     };
 
     return (
@@ -117,7 +120,6 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         >
             <HeaderWithBackButton
                 title={translate('privateNotes.title')}
-                subtitle={translate('privateNotes.myNote')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID))}
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}

src/pages/PrivateNotes/PrivateNotesListPage.js

@@ -1,19 +1,20 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import * as UserUtils from '@libs/UserUtils';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -57,6 +58,20 @@ const defaultProps = {
 function PrivateNotesListPage({report, personalDetailsList, session}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const isFocused = useIsFocused();
+
+    useEffect(() => {
+        const navigateToEditPageTimeout = setTimeout(() => {
+            if (_.some(report.privateNotes, (item) => item.note) || !isFocused) {
+                return;
+            }
+            Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, session.accountID));
+        }, CONST.ANIMATED_TRANSITION);
+
+        return () => {
+            clearTimeout(navigateToEditPageTimeout);
+        };
+    }, [report.privateNotes, report.reportID, session.accountID, isFocused]);
 
     /**
      * Gets the menu item for each workspace
@@ -67,7 +82,6 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
      */
     function getMenuItem(item, index) {
         const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
-
         return (
             <OfflineWithFeedback
                 key={`${keyTitle}_${index}`}
@@ -76,14 +90,16 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 onClose={item.dismissError}
                 errors={item.errors}
             >
-                <MenuItem
-                    title={keyTitle}
-                    icon={item.icon}
-                    iconType={CONST.ICON_TYPE_WORKSPACE}
+                <MenuItemWithTopDescription
+                    description={item.title}
+                    title={item.note}
                     onPress={item.action}
-                    shouldShowRightIcon
-                    fallbackIcon={item.fallbackIcon}
+                    shouldShowRightIcon={!item.disabled}
+                    numberOfLinesTitle={0}
+                    shouldRenderAsHTML
                     brickRoadIndicator={item.brickRoadIndicator}
+                    disabled={item.disabled}
+                    shouldGreyOutWhenDisabled={false}
                 />
             </OfflineWithFeedback>
         );
@@ -98,10 +114,10 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
         return _.chain(lodashGet(report, 'privateNotes', {}))
             .map((privateNote, accountID) => ({
                 title: Number(lodashGet(session, 'accountID', null)) === Number(accountID) ? translate('privateNotes.myNote') : lodashGet(personalDetailsList, [accountID, 'login'], ''),
-                icon: UserUtils.getAvatar(lodashGet(personalDetailsList, [accountID, 'avatar'], UserUtils.getDefaultAvatar(accountID)), accountID),
-                iconType: CONST.ICON_TYPE_AVATAR,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, accountID)),
+                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, accountID)),
                 brickRoadIndicator: privateNoteBrickRoadIndicator(accountID),
+                note: lodashGet(privateNote, 'note', ''),
+                disabled: Number(session.accountID) !== Number(accountID),
             }))
             .value();
     }, [report, personalDetailsList, session, translate]);
@@ -116,6 +132,7 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
             />
+            <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
             <ScrollView contentContainerStyle={styles.flexGrow1}>{_.map(privateNotes, (item, index) => getMenuItem(item, index))}</ScrollView>
         </ScreenWrapper>
     );
@@ -132,6 +149,9 @@ export default compose(
         personalDetailsList: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
     withNetwork(),
 )(PrivateNotesListPage);

src/pages/ProfilePage.js

@@ -254,7 +254,7 @@ function ProfilePage(props) {
                                 title={`${props.translate('privateNotes.title')}`}
                                 titleStyle={styles.flex1}
                                 icon={Expensicons.Pencil}
-                                onPress={() => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID))}
+                                onPress={() => ReportUtils.navigateToPrivateNotes(props.report, props.session)}
                                 wrapperStyle={styles.breakAll}
                                 shouldShowRightIcon
                                 brickRoadIndicator={Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}

src/pages/ReportDetailsPage.js

@@ -137,13 +137,13 @@ function ReportDetailsPage(props) {
                 translationKey: 'privateNotes.title',
                 icon: Expensicons.Pencil,
                 isAnonymousAction: false,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID)),
+                action: () => ReportUtils.navigateToPrivateNotes(props.report, props.session),
                 brickRoadIndicator: Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
             });
         }
 
         return items;
-    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom]);
+    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom, props.session]);
 
     const displayNamesWithTooltips = useMemo(() => {
         const hasMultipleParticipants = participants.length > 1;
@@ -260,5 +260,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ReportDetailsPage);

src/types/onyx/Report.ts

@@ -139,6 +139,7 @@ type Report = {
     isChatRoom?: boolean;
     participantsList?: Array<Partial<PersonalDetails>>;
     text?: string;
+    privateNotes?: Record<string, {note: string}>;
 };
 
 export default Report;