Add Welcome message functionality in room settings

src/CONST.js

@@ -1196,6 +1196,7 @@ const CONST = {
         MEMBERS: 'member',
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
+        WELCOME_MESSAGE: 'welcomeMessage',
     },
 
     FOOTER: {

src/ONYXKEYS.js

@@ -198,6 +198,7 @@ export default {
         PROFILE_SETTINGS_FORM: 'profileSettingsForm',
         DISPLAY_NAME_FORM: 'displayNameForm',
         ROOM_NAME_FORM: 'roomNameForm',
+        WELCOME_MESSAGE_FORM: 'welcomeMessageForm',
         LEGAL_NAME_FORM: 'legalNameForm',
         WORKSPACE_INVITE_MESSAGE_FORM: 'workspaceInviteMessageForm',
         DATE_OF_BIRTH_FORM: 'dateOfBirthForm',

src/ROUTES.js

@@ -117,12 +117,14 @@ export default {
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
     getReportDetailsRoute: (reportID) => `r/${reportID}/details`,
     REPORT_SETTINGS: 'r/:reportID/settings',
-    REPORT_SETTINGS_ROOM_NAME: 'r/:reportID/settings/room-name',
-    REPORT_SETTINGS_NOTIFICATION_PREFERENCES: 'r/:reportID/settings/notification-preferences',
-    REPORT_SETTINGS_WRITE_CAPABILITY: 'r/:reportID/settings/who-can-post',
     getReportSettingsRoute: (reportID) => `r/${reportID}/settings`,
+    REPORT_SETTINGS_ROOM_NAME: 'r/:reportID/settings/room-name',
     getReportSettingsRoomNameRoute: (reportID) => `r/${reportID}/settings/room-name`,
+    REPORT_SETTINGS_NOTIFICATION_PREFERENCES: 'r/:reportID/settings/notification-preferences',
     getReportSettingsNotificationPreferencesRoute: (reportID) => `r/${reportID}/settings/notification-preferences`,
+    REPORT_WELCOME_MESSAGE: 'r/:reportID/welcomeMessage',
+    getReportWelcomeMessageRoute: (reportID) => `r/${reportID}/welcomeMessage`,
+    REPORT_SETTINGS_WRITE_CAPABILITY: 'r/:reportID/settings/who-can-post',
     getReportSettingsWriteCapabilityRoute: (reportID) => `r/${reportID}/settings/who-can-post`,
     TRANSITION_FROM_OLD_DOT: 'transition',
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',

src/languages/en.js

@@ -639,6 +639,10 @@ export default {
             },
         },
     },
+    welcomeMessagePage: {
+        welcomeMessage: 'Welcome message',
+        explainerText: 'Set a custom welcome message that will be sent to users when they join this room.',
+    },
     languagePage: {
         language: 'Language',
         languages: {

src/languages/es.js

@@ -640,6 +640,10 @@ export default {
             },
         },
     },
+    welcomeMessagePage: {
+        welcomeMessage: 'Mensaje de bienvenida',
+        explainerText: 'Configura un mensaje de bienvenida privado y personalizado que se enviará cuando los usuarios se unan a esta sala de chat.',
+    },
     languagePage: {
         language: 'Idioma',
         languages: {

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -298,6 +298,12 @@ class AuthScreens extends React.Component {
                     component={ModalStackNavigators.ReportSettingsModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="Report_WelcomeMessage"
+                    options={modalScreenOptions}
+                    component={ModalStackNavigators.ReportWelcomeMessageModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name="Participants"
                     options={modalScreenOptions}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -193,6 +193,16 @@ const TaskModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const ReportWelcomeMessageModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const ReportWelcomeMessagePage = require('../../../pages/ReportWelcomeMessagePage').default;
+            return ReportWelcomeMessagePage;
+        },
+        name: 'Report_WelcomeMessage_Root',
+    },
+]);
+
 const ReportParticipantsModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
@@ -683,6 +693,7 @@ export {
     ReportDetailsModalStackNavigator,
     TaskModalStackNavigator,
     ReportSettingsModalStackNavigator,
+    ReportWelcomeMessageModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     SearchModalStackNavigator,
     NewGroupModalStackNavigator,

src/libs/Navigation/linkingConfig.js

@@ -229,6 +229,11 @@ export default {
                     },
                 },
             },
+            Report_WelcomeMessage: {
+                screens: {
+                    Report_WelcomeMessage_Root: ROUTES.REPORT_WELCOME_MESSAGE,
+                },
+            },
             NewGroup: {
                 screens: {
                     NewGroup_Root: ROUTES.NEW_GROUP,

src/libs/actions/Report.js

@@ -1092,6 +1092,37 @@ function updateNotificationPreferenceAndNavigate(reportID, previousValue, newVal
     Navigation.drawerGoBack(ROUTES.getReportSettingsRoute(reportID));
 }
 
+/**
+ * @param {String} reportID
+ * @param {String} previousValue
+ * @param {String} newValue
+ */
+function updateWelcomeMessage(reportID, previousValue, newValue) {
+    // No change needed, navigate back
+    if (previousValue === newValue) {
+        Navigation.goBack();
+        return;
+    }
+
+    const parsedWelcomeMessage = ReportUtils.getParsedComment(newValue);
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {welcomeMessage: newValue},
+        },
+    ];
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {welcomeMessage: previousValue},
+        },
+    ];
+    API.write('UpdateWelcomeMessage', {reportID, welcomeMessage: parsedWelcomeMessage}, {optimisticData, failureData});
+    Navigation.goBack();
+}
+
 /**
  * @param {Object} report
  * @param {String} newValue
@@ -1642,6 +1673,7 @@ export {
     addComment,
     addAttachment,
     reconnect,
+    updateWelcomeMessage,
     updateWriteCapabilityAndNavigate,
     updateNotificationPreferenceAndNavigate,
     subscribeToReportTypingEvents,

src/pages/ReportWelcomeMessagePage.js

@@ -0,0 +1,94 @@
+import React, {useCallback, useRef, useState} from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {View} from 'react-native';
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import ScreenWrapper from '../components/ScreenWrapper';
+import Navigation from '../libs/Navigation/Navigation';
+import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import styles from '../styles/styles';
+import reportPropTypes from './reportPropTypes';
+import withReportOrNotFound from './home/report/withReportOrNotFound';
+import Text from '../components/Text';
+import TextInput from '../components/TextInput';
+import * as Report from '../libs/actions/Report';
+import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
+import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import Form from '../components/Form';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
+    /** Route params */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            /** Report ID passed via route r/:reportID/welcomeMessage */
+            reportID: PropTypes.string,
+        }),
+    }).isRequired,
+};
+
+function ReportWelcomeMessagePage(props) {
+    const parser = new ExpensiMark();
+    const [welcomeMessage, setWelcomeMessage] = useState(parser.htmlToMarkdown(props.report.welcomeMessage));
+    const welcomeMessageInputRef = useRef(null);
+
+    const handleWelcomeMessageChange = useCallback((value) => {
+        setWelcomeMessage(value);
+    }, []);
+
+    const submitForm = useCallback(() => {
+        Report.updateWelcomeMessage(props.report.reportID, props.report.welcomeMessage, welcomeMessage);
+    }, [props.report.reportID, props.report.welcomeMessage, welcomeMessage]);
+
+    return (
+        <ScreenWrapper
+            onTransitionEnd={() => {
+                if (!welcomeMessageInputRef.current) {
+                    return;
+                }
+                welcomeMessageInputRef.current.focus();
+            }}
+        >
+            <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
+                <HeaderWithCloseButton
+                    title={props.translate('welcomeMessagePage.welcomeMessage')}
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal()}
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM}
+                    onSubmit={submitForm}
+                    validate={() => ({})}
+                    submitButtonText={props.translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <Text style={[styles.mb5]}>{props.translate('welcomeMessagePage.explainerText')}</Text>
+                    <View style={[styles.mb6]}>
+                        <TextInput
+                            inputID="welcomeMessage"
+                            label={props.translate('welcomeMessagePage.welcomeMessage')}
+                            multiline
+                            numberOfLines={10}
+                            maxLength={CONST.MAX_COMMENT_LENGTH}
+                            ref={welcomeMessageInputRef}
+                            value={welcomeMessage}
+                            onChangeText={handleWelcomeMessageChange}
+                            autoCapitalize="none"
+                        />
+                    </View>
+                </Form>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+ReportWelcomeMessagePage.propTypes = propTypes;
+export default compose(withLocalize, withReportOrNotFound)(ReportWelcomeMessagePage);

src/pages/settings/Report/ReportSettingsPage.js

@@ -22,6 +22,8 @@ import withReportOrNotFound from '../../home/report/withReportOrNotFound';
 import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
 import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
 import ROUTES from '../../../ROUTES';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import MenuItem from '../../../components/MenuItem';
 
 const propTypes = {
     /** Route params */
@@ -79,11 +81,22 @@ class ReportSettingsPage extends Component {
         return !Policy.isPolicyOwner(linkedWorkspace) && linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;
     }
 
+    /**
+     * We only want policy owners and admins to be able to modify the welcome message.
+     *
+     * @param {Object|null} linkedWorkspace - the workspace the report is on, null if the user isn't a member of the workspace
+     * @returns {Boolean}
+     */
+    shouldDisableWelcomeMessage(linkedWorkspace) {
+        return !ReportUtils.isArchivedRoom(this.props.report) && !_.isEmpty(linkedWorkspace) && Policy.isPolicyOwner(linkedWorkspace) && linkedWorkspace.role === CONST.POLICY.ROLE.ADMIN;
+    }
+
     render() {
         const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(this.props.report) && !ReportUtils.isThread(this.props.report);
         const linkedWorkspace = _.find(this.props.policies, (policy) => policy && policy.id === this.props.report.policyID);
         const shouldDisableRename = this.shouldDisableRename(linkedWorkspace) || ReportUtils.isThread(this.props.report);
         const notificationPreference = this.props.translate(`notificationPreferencesPage.notificationPreferences.${this.props.report.notificationPreference}`);
+        const shouldDisableWelcomeMessage = this.shouldDisableRename(linkedWorkspace);
         const writeCapability = this.props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL;
         const writeCapabilityText = this.props.translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
         const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN;
@@ -196,6 +209,14 @@ class ReportSettingsPage extends Component {
                             </View>
                         )}
                     </View>
+                    {!shouldDisableWelcomeMessage && (
+                        <MenuItem
+                            title={this.props.translate('welcomeMessagePage.welcomeMessage')}
+                            icon={Expensicons.ChatBubble}
+                            onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(this.props.report.reportID))}
+                            shouldShowRightIcon
+                        />
+                    )}
                 </FullPageNotFoundView>
             </ScreenWrapper>
         );