Fix/27634: Improve private notes flow

src/libs/ReportUtils.js

@@ -2,6 +2,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 lodashGet from 'lodash/get';
 import lodashIntersection from 'lodash/intersection';
 import Onyx from 'react-native-onyx';
@@ -4284,6 +4285,19 @@ function shouldDisableWelcomeMessage(report, policy) {
     return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
 }
 
+/**
+ * @param {Object} report
+ * @param {Object} session
+ */
+function navigateToPrivateNotes(report, session) {
+    const currentUserPrivateNote = lodashGet(report, ['privateNotes', session.accountID, 'note'], '');
+    if (isEmpty(currentUserPrivateNote)) {
+        Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, session.accountID));
+        return;
+    }
+    Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -4447,5 +4461,6 @@ 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';
@@ -67,7 +68,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 +76,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,14 +100,30 @@ 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]);
+    const isFocused = useIsFocused();
 
+    const navigateToEditPageTimeoutRef = React.useRef(null);
+    useEffect(() => {
+        navigateToEditPageTimeoutRef.current = 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 () => {
+            if (!navigateToEditPageTimeoutRef.current) {
+                return;
+            }
+            clearTimeout(navigateToEditPageTimeoutRef.current);
+        };
+    }, [report.privateNotes, report.reportID, session.accountID, isFocused]);
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -116,6 +134,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 +151,9 @@ export default compose(
         personalDetailsList: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
     withNetwork(),
 )(PrivateNotesListPage);

src/pages/ProfilePage.js

@@ -258,7 +258,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

@@ -138,13 +138,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;
@@ -262,5 +262,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ReportDetailsPage);