Create the Report Details Page

src/ROUTES.js

@@ -46,6 +46,8 @@ export default {
     getReportParticipantsRoute: reportID => `r/${reportID}/participants`,
     REPORT_PARTICIPANT: 'r/:reportID/participants/:login',
     getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/${login}`,
+    REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
+    getReportDetailsRoute: reportID => `r/${reportID}/details`,
     VALIDATE_LOGIN: 'v',
     VALIDATE_LOGIN_WITH_VALIDATE_CODE: 'v/:accountID/:validateCode',
     ENABLE_PAYMENTS: 'enable-payments',

src/components/MenuItem.js

@@ -51,6 +51,9 @@ const propTypes = {
 
     /** Should we disable this menu item? */
     disabled: PropTypes.bool,
+
+    /** A right-aligned subtitle for this menu option */
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 const defaultProps = {
@@ -66,6 +69,7 @@ const defaultProps = {
     iconFill: undefined,
     focused: false,
     disabled: false,
+    subtitle: undefined,
 };
 
 const MenuItem = ({
@@ -83,6 +87,7 @@ const MenuItem = ({
     iconFill,
     focused,
     disabled,
+    subtitle,
 }) => (
     <Pressable
         onPress={(e) => {
@@ -129,14 +134,26 @@ const MenuItem = ({
                         )}
                     </View>
                 </View>
-                {shouldShowRightIcon && (
-                    <View style={styles.createMenuIcon}>
-                        <Icon
-                            src={iconRight}
-                            fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
-                        />
-                    </View>
-                )}
+                <View style={[styles.flexRow, styles.menuItemTextContainer]}>
+                    {subtitle && (
+                        <View style={[styles.justifyContentCenter, styles.mr1]}>
+                            <Text
+                                style={styles.createMenuDescription}
+                            >
+                                {subtitle}
+                            </Text>
+                        </View>
+                    )}
+                    {shouldShowRightIcon && (
+                        <View style={styles.createMenuIcon}>
+                            <Icon
+                                src={iconRight}
+                                fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
+                            />
+                        </View>
+                    )}
+                </View>
+
             </>
         )}
     </Pressable>

src/languages/en.js

@@ -52,6 +52,7 @@ export default {
         passwordCannotBeBlank: 'Password cannot be blank',
         dateFormat: 'YYYY-MM-DD',
         send: 'Send',
+        notifications: 'Notifications',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -146,6 +147,13 @@ export default {
         split: ({amount}) => `Split ${amount}`,
         choosePaymentMethod: 'Choose payment method:',
     },
+    reportDetailsPage: {
+        notificationPreferencesDescription: 'How often should we notify you when there are new messages to catch up on in this room?',
+        always: 'Always',
+        daily: 'Daily',
+        mute: 'Mute',
+        members: 'Members',
+    },
     loginField: {
         addYourPhoneToSettleViaVenmo: 'Add your phone number to settle up via Venmo.',
         numberHasNotBeenValidated: 'The number has not yet been validated. Click the button to resend the validation link via text.',
@@ -225,7 +233,6 @@ export default {
         mostRecentModeDescription: 'This will display all chats by default, sorted by most recent, with pinned items at the top',
         focus: '#focus',
         focusModeDescription: '#focus – This will only display unread and pinned chats, all sorted alphabetically.',
-        notifications: 'Notifications',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
         priorityMode: 'Priority Mode',
         language: 'Language',

src/languages/es.js

@@ -48,6 +48,7 @@ export default {
         passwordCannotBeBlank: 'La contraseña no puede estar vacía',
         dateFormat: 'AAAA-MM-DD',
         send: 'Enviar',
+        notifications: 'Notificaciones',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -141,6 +142,13 @@ export default {
         split: ({amount}) => `Dividir ${amount}`,
         choosePaymentMethod: 'Elige el método de pago:',
     },
+    reportDetailsPage: {
+        notificationPreferencesDescription: 'Cada cuanto tiempo quieres que te avisemos que hay nuevos mensajes en este canal?',
+        always: 'Siempre',
+        daily: 'Cada día',
+        mute: 'Nunca',
+        members: 'Miembros',
+    },
     loginField: {
         addYourPhoneToSettleViaVenmo: 'Agrega tu número de teléfono para pagar usando Venmo.',
         numberHasNotBeenValidated: 'El número no está validado todavía. Haz click en el botón para reenviar el enlace de confirmación via SMS.',
@@ -221,7 +229,6 @@ export default {
         mostRecentModeDescription: 'Esta opción muestra por defecto todos los chats, ordenados a partir del más reciente, con los chats destacados arriba de todo',
         focus: '#concentración',
         focusModeDescription: '#concentración – Muestra sólo los chats no leídos y destacados ordenados alfabéticamente.',
-        notifications: 'Notificaciones',
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
         priorityMode: 'Modo Prioridad',
         language: 'Idioma',

src/libs/API.js

@@ -607,6 +607,19 @@ function Report_UpdateLastRead(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Number} parameters.reportID
+ * @param {String} parameters.notificationPreference
+ * @returns {Promise}
+ *
+ */
+function Report_UpdateNotificationPreference(parameters) {
+    const commandName = 'Report_UpdateNotificationPreference';
+    requireParameters(['reportID', 'notificationPreference'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.email
@@ -1003,6 +1016,7 @@ export {
     Report_TogglePinned,
     Report_EditComment,
     Report_UpdateLastRead,
+    Report_UpdateNotificationPreference,
     ResendValidateCode,
     ResetPassword,
     SetNameValuePair,

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -55,6 +55,7 @@ import {
     NewWorkspaceStackNavigator,
     WorkspaceInviteModalStackNavigator,
     RequestCallModalStackNavigator,
+    ReportDetailsModalStackNavigator,
 } from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
@@ -272,6 +273,12 @@ class AuthScreens extends React.Component {
                     component={DetailsModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="Report_Details"
+                    options={modalScreenOptions}
+                    component={ReportDetailsModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name="Participants"
                     options={modalScreenOptions}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -25,6 +25,7 @@ import WorkspaceInvitePage from '../../../pages/workspace/WorkspaceInvitePage';
 import ReimbursementAccountPage from '../../../pages/ReimbursementAccount/ReimbursementAccountPage';
 import NewWorkspacePage from '../../../pages/workspace/NewWorkspacePage';
 import RequestCallPage from '../../../pages/RequestCallPage';
+import ReportDetailsPage from '../../../pages/ReportDetailsPage';
 
 const defaultSubRouteOptions = {
     cardStyle: styles.navigationScreenCardStyle,
@@ -85,6 +86,11 @@ const DetailsModalStackNavigator = createModalStackNavigator([{
     name: 'Details_Root',
 }]);
 
+const ReportDetailsModalStackNavigator = createModalStackNavigator([{
+    Component: ReportDetailsPage,
+    name: 'Report_Details_Root',
+}]);
+
 const ReportParticipantsModalStackNavigator = createModalStackNavigator([
     {
         Component: ReportParticipantsPage,
@@ -181,6 +187,7 @@ export {
     IOURequestModalStackNavigator,
     IOUDetailsModalStackNavigator,
     DetailsModalStackNavigator,
+    ReportDetailsModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     SearchModalStackNavigator,
     NewGroupModalStackNavigator,

src/libs/Navigation/linkingConfig.js

@@ -61,6 +61,11 @@ export default {
                     },
                 },
             },
+            Report_Details: {
+                screens: {
+                    Report_Details_Root: ROUTES.REPORT_WITH_ID_DETAILS,
+                },
+            },
             NewGroup: {
                 screens: {
                     NewGroup_Root: ROUTES.NEW_GROUP,

src/libs/actions/Report.js

@@ -1080,7 +1080,7 @@ function deleteReportComment(reportID, reportAction) {
     const sequenceNumber = reportAction.sequenceNumber;
     const reportActionsToMerge = {};
     const oldMessage = {...reportAction.message};
-    reportActionsToMerge[sequenceNumber] = {
+    reportActionsToMerge[reportAction.sequenceNumber] = {
         ...reportAction,
         message: [
             {
@@ -1269,6 +1269,17 @@ function saveReportActionDraft(reportID, reportActionID, draftMessage) {
     Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
 }
 
+/**
+ * Updates a user's notification preferences for a chat room
+ *
+ * @param {Number} reportID
+ * @param {String} notificationPreference
+ */
+function updateNotificationPreference(reportID, notificationPreference) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {notificationPreference});
+    API.Report_UpdateNotificationPreference({reportID, notificationPreference});
+}
+
 export {
     fetchAllReports,
     fetchActions,
@@ -1278,6 +1289,7 @@ export {
     fetchIOUReportByIDAndUpdateChatReport,
     addAction,
     updateLastReadActionID,
+    updateNotificationPreference,
     setNewMarkerPosition,
     subscribeToReportTypingEvents,
     subscribeToUserEvents,