Merge pull request #34150 from esh-g/room-description

Migrate welcome message to room description for report
Expensify · Feb 5, 2024 · 7511ec4 · 7511ec4
2 parents 5133c29 + 2df9043
commit 7511ec4
Show file tree

Hide file tree

Showing 44 changed files with 445 additions and 313 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -100,6 +100,10 @@ const CONST = {
         MAX_LENGTH: 40,
     },
 
+    REPORT_DESCRIPTION: {
+        MAX_LENGTH: 1024,
+    },
+
     PULL_REQUEST_NUMBER,
 
     MERCHANT_NAME_MAX_LENGTH: 255,
@@ -1588,7 +1592,6 @@ const CONST = {
         INVITE: 'invite',
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
-        WELCOME_MESSAGE: 'welcomeMessage',
         PRIVATE_NOTES: 'privateNotes',
     },
     EDIT_REQUEST_FIELD: {

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -313,8 +313,8 @@ const ONYXKEYS = {
         DISPLAY_NAME_FORM_DRAFT: 'displayNameFormDraft',
         ROOM_NAME_FORM: 'roomNameForm',
         ROOM_NAME_FORM_DRAFT: 'roomNameFormDraft',
-        WELCOME_MESSAGE_FORM: 'welcomeMessageForm',
-        WELCOME_MESSAGE_FORM_DRAFT: 'welcomeMessageFormDraft',
+        REPORT_DESCRIPTION_FORM: 'reportDescriptionForm',
+        REPORT_DESCRIPTION_FORM_DRAFT: 'reportDescriptionFormDraft',
         LEGAL_NAME_FORM: 'legalNameForm',
         LEGAL_NAME_FORM_DRAFT: 'legalNameFormDraft',
         WORKSPACE_INVITE_MESSAGE_FORM: 'workspaceInviteMessageForm',
@@ -501,8 +501,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM_DRAFT]: OnyxTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.RoomNameForm;
     [ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.RoomNameForm;
-    [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.LEGAL_NAME_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM]: OnyxTypes.Form;

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -214,10 +214,6 @@ const ROUTES = {
         route: 'r/:reportID/settings/who-can-post',
         getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post` as const,
     },
-    REPORT_WELCOME_MESSAGE: {
-        route: 'r/:reportID/welcomeMessage',
-        getRoute: (reportID: string) => `r/${reportID}/welcomeMessage` as const,
-    },
     SPLIT_BILL_DETAILS: {
         route: 'r/:reportID/split/:reportActionID',
         getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const,
@@ -235,7 +231,7 @@ const ROUTES = {
         route: 'r/:reportID/title',
         getRoute: (reportID: string) => `r/${reportID}/title` as const,
     },
-    TASK_DESCRIPTION: {
+    REPORT_DESCRIPTION: {
         route: 'r/:reportID/description',
         getRoute: (reportID: string) => `r/${reportID}/description` as const,
     },

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -100,7 +100,7 @@ const SCREENS = {
         PROFILE: 'Profile',
         REPORT_DETAILS: 'Report_Details',
         REPORT_SETTINGS: 'Report_Settings',
-        REPORT_WELCOME_MESSAGE: 'Report_WelcomeMessage',
+        REPORT_DESCRIPTION: 'Report_Description',
         PARTICIPANTS: 'Participants',
         MONEY_REQUEST: 'MoneyRequest',
         NEW_TASK: 'NewTask',
@@ -183,7 +183,6 @@ const SCREENS = {
 
     TASK: {
         TITLE: 'Task_Title',
-        DESCRIPTION: 'Task_Description',
         ASSIGNEE: 'Task_Assignee',
     },
 
@@ -242,7 +241,7 @@ const SCREENS = {
     DETAILS_ROOT: 'Details_Root',
     PROFILE_ROOT: 'Profile_Root',
     PROCESS_MONEY_REQUEST_HOLD_ROOT: 'ProcessMoneyRequestHold_Root',
-    REPORT_WELCOME_MESSAGE_ROOT: 'Report_WelcomeMessage_Root',
+    REPORT_DESCRIPTION_ROOT: 'Report_Description_Root',
     REPORT_PARTICIPANTS_ROOT: 'ReportParticipants_Root',
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
     ROOM_INVITE_ROOT: 'RoomInvite_Root',

diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
@@ -11,7 +11,7 @@ import type DisplayNamesProps from './types';
 
 type HTMLElementWithText = HTMLElement & RNText;
 
-function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWithTooltips, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWithTooltips, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
     const styles = useThemeStyles();
     const containerRef = useRef<HTMLElementWithText>(null);
     const childRefs = useRef<HTMLElementWithText[]>([]);
@@ -72,6 +72,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
                           {index < displayNamesWithTooltips.length - 1 && <Text style={textStyles}>,&nbsp;</Text>}
                       </Fragment>
                   ))}
+            {renderAdditionalText?.()}
             {Boolean(isEllipsisActive) && (
                 <View style={styles.displayNameTooltipEllipsis}>
                     <Tooltip text={fullTitle}>

diff --git a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
@@ -12,16 +12,20 @@ type DisplayNamesWithoutTooltipProps = {
 
     /** Number of lines before wrapping */
     numberOfLines?: number;
+
+    /** Additional Text component to render after the displayNames */
+    renderAdditionalText?: () => React.ReactNode;
 };
 
-function DisplayNamesWithoutTooltip({textStyles = [], numberOfLines = 1, fullTitle = ''}: DisplayNamesWithoutTooltipProps) {
+function DisplayNamesWithoutTooltip({textStyles = [], numberOfLines = 1, fullTitle = '', renderAdditionalText}: DisplayNamesWithoutTooltipProps) {
     const styles = useThemeStyles();
     return (
         <Text
             style={[textStyles, numberOfLines === 1 ? styles.pre : styles.preWrap]}
             numberOfLines={numberOfLines}
         >
             {fullTitle}
+            {renderAdditionalText?.()}
         </Text>
     );
 }

diff --git a/src/components/DisplayNames/index.native.tsx b/src/components/DisplayNames/index.native.tsx
@@ -4,7 +4,7 @@ import useLocalize from '@hooks/useLocalize';
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
     const {translate} = useLocalize();
     return (
         <Text
@@ -13,6 +13,7 @@ function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfL
             numberOfLines={numberOfLines}
         >
             {fullTitle || translate('common.hidden')}
+            {renderAdditionalText?.()}
         </Text>
     );
 }

diff --git a/src/components/DisplayNames/index.tsx b/src/components/DisplayNames/index.tsx
@@ -4,7 +4,7 @@ import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
 import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
 import type DisplayNamesProps from './types';
 
-function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips}: DisplayNamesProps) {
+function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips, renderAdditionalText}: DisplayNamesProps) {
     const {translate} = useLocalize();
     const title = fullTitle || translate('common.hidden');
 
@@ -14,6 +14,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
                 textStyles={textStyles}
                 numberOfLines={numberOfLines}
                 fullTitle={title}
+                renderAdditionalText={renderAdditionalText}
             />
         );
     }
@@ -35,6 +36,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
             displayNamesWithTooltips={displayNamesWithTooltips}
             textStyles={textStyles}
             numberOfLines={numberOfLines}
+            renderAdditionalText={renderAdditionalText}
         />
     );
 }

diff --git a/src/components/DisplayNames/types.ts b/src/components/DisplayNames/types.ts
@@ -39,6 +39,9 @@ type DisplayNamesProps = {
 
     /** If the full title needs to be displayed */
     shouldUseFullTitle?: boolean;
+
+    /** Additional Text component to render after the displayNames */
+    renderAdditionalText?: () => React.ReactNode;
 };
 
 export default DisplayNamesProps;

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
@@ -54,6 +54,7 @@ function FormWrapper({
     formID,
     scrollContextEnabled = false,
     shouldHideFixErrorsAlert = false,
+    disablePressOnEnter = true,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
     const formRef = useRef<ScrollView>(null);
@@ -112,7 +113,7 @@ function FormWrapper({
                         containerStyles={[styles.mh0, styles.mt5, styles.flex1, submitButtonStyles]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
-                        disablePressOnEnter
+                        disablePressOnEnter={disablePressOnEnter}
                     />
                 )}
             </FormSubmit>
@@ -137,6 +138,7 @@ function FormWrapper({
             submitButtonText,
             shouldHideFixErrorsAlert,
             onFixTheErrorsLinkPressed,
+            disablePressOnEnter,
         ],
     );
 

diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
@@ -84,6 +84,9 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
 
     /** Custom content to display in the footer after submit button */
     footerContent?: ReactNode;
+
+    /** Disable press on enter for submit button */
+    disablePressOnEnter?: boolean;
 };
 
 type RegisterInput = <TInputProps extends BaseInputProps>(inputID: keyof Form, inputProps: TInputProps) => TInputProps;

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
@@ -142,7 +142,7 @@ function TaskView({report, shouldShowHorizontalRule, ...props}: TaskViewProps) {
                         shouldParseTitle
                         description={translate('task.description')}
                         title={report.description ?? ''}
-                        onPress={() => Navigation.navigate(ROUTES.TASK_DESCRIPTION.getRoute(report.reportID))}
+                        onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID))}
                         shouldShowRightIcon={isOpen}
                         disabled={disableState}
                         wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}

diff --git a/src/components/ReportWelcomeText.tsx b/src/components/ReportWelcomeText.tsx
@@ -12,6 +12,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx';
+import {PressableWithoutFeedback} from './Pressable';
+import RenderHTML from './RenderHTML';
 import Text from './Text';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
@@ -57,29 +59,47 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
                     {isChatRoom ? translate('reportActionsView.welcomeToRoom', {roomName: ReportUtils.getReportName(report)}) : translate('reportActionsView.sayHello')}
                 </Text>
             </View>
-            <Text style={[styles.mt3, styles.mw100]}>
+            <View style={[styles.mt3, styles.mw100]}>
                 {isPolicyExpenseChat && (
-                    <>
+                    <Text>
                         <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')}</Text>
                         <Text style={[styles.textStrong]}>{ReportUtils.getDisplayNameForParticipant(report?.ownerAccountID)}</Text>
                         <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}</Text>
                         <Text style={[styles.textStrong]}>{ReportUtils.getPolicyName(report)}</Text>
                         <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')}</Text>
-                    </>
+                    </Text>
                 )}
                 {isChatRoom && (
                     <>
-                        <Text>{roomWelcomeMessage.phrase1}</Text>
-                        {roomWelcomeMessage.showReportName && (
-                            <Text
-                                style={[styles.textStrong]}
-                                onPress={navigateToReport}
-                                suppressHighlighting
+                        {report?.description ? (
+                            <PressableWithoutFeedback
+                                onPress={() => {
+                                    if (ReportUtils.canEditReportDescription(report, policy)) {
+                                        Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID));
+                                        return;
+                                    }
+                                    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+                                }}
+                                style={styles.renderHTML}
+                                accessibilityLabel={translate('reportDescriptionPage.roomDescription')}
                             >
-                                {ReportUtils.getReportName(report)}
+                                <RenderHTML html={report.description} />
+                            </PressableWithoutFeedback>
+                        ) : (
+                            <Text>
+                                <Text>{roomWelcomeMessage.phrase1}</Text>
+                                {roomWelcomeMessage.showReportName && (
+                                    <Text
+                                        style={[styles.textStrong]}
+                                        onPress={navigateToReport}
+                                        suppressHighlighting
+                                    >
+                                        {ReportUtils.getReportName(report)}
+                                    </Text>
+                                )}
+                                {roomWelcomeMessage.phrase2 !== undefined && <Text>{roomWelcomeMessage.phrase2}</Text>}
                             </Text>
                         )}
-                        {roomWelcomeMessage.phrase2 !== undefined && <Text>{roomWelcomeMessage.phrase2}</Text>}
                     </>
                 )}
                 {isDefault && (
@@ -112,7 +132,7 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
                 {(moneyRequestOptions.includes(CONST.IOU.TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.TYPE.REQUEST)) && (
                     <Text>{translate('reportActionsView.usePlusButton', {additionalText})}</Text>
                 )}
-            </Text>
+            </View>
         </>
     );
 }

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -489,7 +489,7 @@ export default {
         chatWithAccountManager: 'Chat with your account manager here',
         sayHello: 'Say hello!',
         welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `Welcome to ${roomName}!`,
-        usePlusButton: ({additionalText}: UsePlusButtonParams) => `\n\nYou can also use the + button to ${additionalText}, or assign a task!`,
+        usePlusButton: ({additionalText}: UsePlusButtonParams) => `\nYou can also use the + button to ${additionalText}, or assign a task!`,
         iouTypes: {
             send: 'send money',
             split: 'split a bill',
@@ -1054,10 +1054,10 @@ export default {
             },
         },
     },
-    welcomeMessagePage: {
-        welcomeMessage: 'Welcome message',
-        welcomeMessageOptional: 'Welcome message (optional)',
-        explainerText: 'Set a custom welcome message that will be sent to users when they join this room.',
+    reportDescriptionPage: {
+        roomDescription: 'Room description',
+        roomDescriptionOptional: 'Room description (optional)',
+        explainerText: 'Set a custom decription for the room.',
     },
     languagePage: {
         language: 'Language',
@@ -1970,7 +1970,7 @@ export default {
         replies: 'Replies',
         reply: 'Reply',
         from: 'From',
-        in: 'In',
+        in: 'in',
         parentNavigationSummary: ({rootReportName, workspaceName}: ParentNavigationSummaryParams) => `From ${rootReportName}${workspaceName ? ` in ${workspaceName}` : ''}`,
     },
     qrCodes: {

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -481,7 +481,7 @@ export default {
         chatWithAccountManager: 'Chatea con tu gestor de cuenta aquí',
         sayHello: '¡Saluda!',
         welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `¡Bienvenido a ${roomName}!`,
-        usePlusButton: ({additionalText}: UsePlusButtonParams) => `\n\n¡También puedes usar el botón + de abajo para ${additionalText}, o asignar una tarea!`,
+        usePlusButton: ({additionalText}: UsePlusButtonParams) => `\n¡También puedes usar el botón + de abajo para ${additionalText}, o asignar una tarea!`,
         iouTypes: {
             send: 'enviar dinero',
             split: 'dividir una factura',
@@ -1052,10 +1052,10 @@ export default {
             },
         },
     },
-    welcomeMessagePage: {
-        welcomeMessage: 'Mensaje de bienvenida',
-        welcomeMessageOptional: 'Mensaje de bienvenida (opcional)',
-        explainerText: 'Configura un mensaje de bienvenida privado y personalizado que se enviará cuando los usuarios se unan a esta sala de chat.',
+    reportDescriptionPage: {
+        roomDescription: 'Descripción de la sala de chat',
+        roomDescriptionOptional: 'Descripción de la sala de chat (opcional)',
+        explainerText: 'Establece una descripción personalizada para la sala de chat.',
     },
     languagePage: {
         language: 'Idioma',

diff --git a/src/libs/API/parameters/AddWorkspaceRoomParams.ts b/src/libs/API/parameters/AddWorkspaceRoomParams.ts
@@ -9,7 +9,7 @@ type AddWorkspaceRoomParams = {
     reportName?: string;
     visibility?: ValueOf<typeof CONST.REPORT.VISIBILITY>;
     writeCapability?: WriteCapability;
-    welcomeMessage?: string;
+    description?: string;
 };
 
 export default AddWorkspaceRoomParams;
diff --git a/src/libs/API/parameters/UpdateRoomDescriptionParams.ts b/src/libs/API/parameters/UpdateRoomDescriptionParams.ts
@@ -0,0 +1,6 @@
+type UpdateRoomDescriptionParams = {
+    reportID: string;
+    description: string;
+};
+
+export default UpdateRoomDescriptionParams;
diff --git a/src/libs/API/parameters/UpdateWelcomeMessageParams.ts b/src/libs/API/parameters/UpdateWelcomeMessageParams.ts
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
@@ -84,7 +84,7 @@ export type {default as TogglePinnedChatParams} from './TogglePinnedChatParams';
 export type {default as DeleteCommentParams} from './DeleteCommentParams';
 export type {default as UpdateCommentParams} from './UpdateCommentParams';
 export type {default as UpdateReportNotificationPreferenceParams} from './UpdateReportNotificationPreferenceParams';
-export type {default as UpdateWelcomeMessageParams} from './UpdateWelcomeMessageParams';
+export type {default as UpdateRoomDescriptionParams} from './UpdateRoomDescriptionParams';
 export type {default as UpdateReportWriteCapabilityParams} from './UpdateReportWriteCapabilityParams';
 export type {default as AddWorkspaceRoomParams} from './AddWorkspaceRoomParams';
 export type {default as UpdatePolicyRoomNameParams} from './UpdatePolicyRoomNameParams';