Add workspace description

src/CONST.ts

@@ -604,6 +604,7 @@ const CONST = {
                     UPDATE_MAX_EXPENSE_AMOUNT: 'POLICYCHANGELOG_UPDATE_MAX_EXPENSE_AMOUNT',
                     UPDATE_MAX_EXPENSE_AMOUNT_NO_RECEIPT: 'POLICYCHANGELOG_UPDATE_MAX_EXPENSE_AMOUNT_NO_RECEIPT',
                     UPDATE_NAME: 'POLICYCHANGELOG_UPDATE_NAME',
+                    UPDATE_DESCRIPTION: 'POLICYCHANGELOG_UPDATE_DESCRIPTION',
                     UPDATE_OWNERSHIP: 'POLICYCHANGELOG_UPDATE_OWNERSHIP',
                     UPDATE_REIMBURSEMENT_CHOICE: 'POLICYCHANGELOG_UPDATE_REIMBURSEMENT_CHOICE',
                     UPDATE_REPORT_FIELD: 'POLICYCHANGELOG_UPDATE_REPORT_FIELD',

src/ONYXKEYS.ts

@@ -303,6 +303,8 @@ const ONYXKEYS = {
         ADD_DEBIT_CARD_FORM_DRAFT: 'addDebitCardFormDraft',
         WORKSPACE_SETTINGS_FORM: 'workspaceSettingsForm',
         WORKSPACE_SETTINGS_FORM_DRAFT: 'workspaceSettingsFormDraft',
+        WORKSPACE_DESCRIPTION_FORM: 'workspaceDescriptionForm',
+        WORKSPACE_DESCRIPTION_FORM_DRAFT: 'workspaceDescriptionFormDraft',
         WORKSPACE_RATE_AND_UNIT_FORM: 'workspaceRateAndUnitForm',
         WORKSPACE_RATE_AND_UNIT_FORM_DRAFT: 'workspaceRateAndUnitFormDraft',
         CLOSE_ACCOUNT_FORM: 'closeAccount',
@@ -491,6 +493,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM_DRAFT]: OnyxTypes.AddDebitCardForm;
     [ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM]: OnyxTypes.WorkspaceSettingsForm;
     [ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM_DRAFT]: OnyxTypes.WorkspaceSettingsForm;
+    [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM]: OnyxTypes.WorkspaceDescriptionForm;
+    [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM_DRAFT]: OnyxTypes.WorkspaceDescriptionForm;
     [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: OnyxTypes.CloseAccountForm;

src/ROUTES.ts

@@ -445,6 +445,10 @@ const ROUTES = {
         route: 'workspace/:policyID/overview/name',
         getRoute: (policyID: string) => `workspace/${policyID}/overview/name` as const,
     },
+    WORKSPACE_DESCRIPTION: {
+        route: 'workspace/:policyID/description',
+        getRoute: (policyID: string) => `workspace/${policyID}/description` as const,
+    },
     WORKSPACE_AVATAR: {
         route: 'workspace/:policyID/avatar',
         getRoute: (policyID: string) => `workspace/${policyID}/avatar` as const,

src/SCREENS.ts

@@ -209,6 +209,7 @@ const SCREENS = {
         INVITE_MESSAGE: 'Workspace_Invite_Message',
         CURRENCY: 'Workspace_Overview_Currency',
         NAME: 'Workspace_Overview_Name',
+        DESCRIPTION: 'Workspace_Description',
     },
 
     EDIT_REQUEST: {

src/components/ReportWelcomeText.tsx

@@ -61,13 +61,31 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
             </View>
             <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>
+                    <>
+                        {policy?.description ? (
+                            <PressableWithoutFeedback
+                                onPress={() => {
+                                    if (ReportUtils.canEditPolicyDescription(policy)) {
+                                        Navigation.navigate(ROUTES.WORKSPACE_DESCRIPTION.getRoute(policy.id));
+                                        return;
+                                    }
+                                    Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id));
+                                }}
+                                style={styles.renderHTML}
+                                accessibilityLabel={translate('reportDescriptionPage.roomDescription')}
+                            >
+                                <RenderHTML html={policy.description} />
+                            </PressableWithoutFeedback>
+                        ) : (
+                            <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 && (
                     <>

src/languages/en.ts

@@ -1667,6 +1667,8 @@ export default {
                 `You have been invited to ${workspaceName || 'a workspace'}! Download the Expensify mobile app at use.expensify.com/download to start tracking your expenses.`,
         },
         editor: {
+            descriptionInputLabel: 'Workspace description',
+            descriptionInputHelpText: 'This is a brief description of your workspace.',
             nameInputLabel: 'Name',
             nameInputHelpText: 'This is the name you will see on your workspace.',
             nameIsRequiredError: 'You need to define a name for your workspace.',

src/languages/es.ts

@@ -1690,6 +1690,8 @@ export default {
                 `¡Has sido invitado a ${workspaceName}! Descargue la aplicación móvil Expensify en use.expensify.com/download para comenzar a rastrear sus gastos.`,
         },
         editor: {
+            descriptionInputLabel: 'Descripción del espacio de trabajo',
+            descriptionInputHelpText: 'Esta es una breve descripción de su espacio de trabajo.',
             nameInputLabel: 'Nombre',
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',

src/libs/API/parameters/UpdateWorkspaceDescriptionParams.ts

@@ -0,0 +1,6 @@
+type UpdateWorkspaceDescriptionParams = {
+    policyID: string;
+    description: string;
+};
+
+export default UpdateWorkspaceDescriptionParams;

src/libs/API/parameters/index.ts

@@ -139,3 +139,4 @@ export type {default as ReplaceReceiptParams} from './ReplaceReceiptParams';
 export type {default as SubmitReportParams} from './SubmitReportParams';
 export type {default as DetachReceiptParams} from './DetachReceiptParams';
 export type {default as PayMoneyRequestParams} from './PayMoneyRequestParams';
+export type {default as UpdateWorkspaceDescriptionParams} from './UpdateWorkspaceDescriptionParams';

src/libs/API/types.ts

@@ -141,6 +141,7 @@ const WRITE_COMMANDS = {
     DETACH_RECEIPT: 'DetachReceipt',
     PAY_MONEY_REQUEST_WITH_WALLET: 'PayMoneyRequestWithWallet',
     PAY_MONEY_REQUEST: 'PayMoneyRequest',
+    UPDATE_WORKSPACE_DESCRIPTION: 'UpdateWorkspaceDescription',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -279,6 +280,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.DETACH_RECEIPT]: Parameters.DetachReceiptParams;
     [WRITE_COMMANDS.PAY_MONEY_REQUEST_WITH_WALLET]: Parameters.PayMoneyRequestParams;
     [WRITE_COMMANDS.PAY_MONEY_REQUEST]: Parameters.PayMoneyRequestParams;
+    [WRITE_COMMANDS.UPDATE_WORKSPACE_DESCRIPTION]: Parameters.UpdateWorkspaceDescriptionParams;
 };
 
 const READ_COMMANDS = {

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -236,6 +236,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.INVITE]: () => require('../../../pages/workspace/WorkspaceInvitePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.INVITE_MESSAGE]: () => require('../../../pages/workspace/WorkspaceInviteMessagePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.NAME]: () => require('../../../pages/workspace/WorkspaceNamePage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.DESCRIPTION]: () => require('../../../pages/workspace/WorkspaceDescriptionPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CURRENCY]: () => require('../../../pages/workspace/WorkspaceOverviewCurrencyPage').default as React.ComponentType,
     [SCREENS.REIMBURSEMENT_ACCOUNT]: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default as React.ComponentType,
     [SCREENS.GET_ASSISTANCE]: () => require('../../../pages/GetAssistancePage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -2,7 +2,7 @@ import type {CentralPaneName} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
 
 const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> = {
-    [SCREENS.WORKSPACE.OVERVIEW]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY],
+    [SCREENS.WORKSPACE.OVERVIEW]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION],
     [SCREENS.WORKSPACE.REIMBURSE]: [SCREENS.WORKSPACE.RATE_AND_UNIT],
     [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE],
 };

src/libs/Navigation/linkingConfig/config.ts

@@ -250,6 +250,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.KEYBOARD_SHORTCUTS,
                         },
                         [SCREENS.WORKSPACE.NAME]: ROUTES.WORKSPACE_OVERVIEW_NAME.route,
+                        [SCREENS.WORKSPACE.DESCRIPTION]: ROUTES.WORKSPACE_DESCRIPTION.route,
                     },
                 },
                 [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: {

src/libs/Navigation/types.ts

@@ -125,6 +125,7 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_TIME]: undefined;
     [SCREENS.WORKSPACE.CURRENCY]: undefined;
     [SCREENS.WORKSPACE.NAME]: undefined;
+    [SCREENS.WORKSPACE.DESCRIPTION]: undefined;
     [SCREENS.WORKSPACE.RATE_AND_UNIT]: undefined;
     [SCREENS.WORKSPACE.INVITE]: {
         policyID: string;

src/libs/ReportUtils.ts

@@ -2608,6 +2608,15 @@ function getReportDescriptionText(report: Report): string {
     return parser.htmlToText(report.description);
 }
 
+function getPolicyDescriptionText(policy: Policy): string {
+    if (!policy.description) {
+        return '';
+    }
+
+    const parser = new ExpensiMark();
+    return parser.htmlToText(policy.description);
+}
+
 function buildOptimisticAddCommentReportAction(text?: string, file?: File, actorAccountID?: number): OptimisticReportAction {
     const parser = new ExpensiMark();
     const commentText = getParsedComment(text ?? '');
@@ -4590,6 +4599,10 @@ function canEditReportDescription(report: OnyxEntry<Report>, policy: OnyxEntry<P
     );
 }
 
+function canEditPolicyDescription(policy: OnyxEntry<Policy>): boolean {
+    return PolicyUtils.isPolicyAdmin(policy);
+}
+
 /**
  * Checks if report action has error when smart scanning
  */
@@ -4967,6 +4980,8 @@ export {
     isReportFieldDisabled,
     getAvailableReportFields,
     getAllAncestorReportActionIDs,
+    canEditPolicyDescription,
+    getPolicyDescriptionText,
 };
 
 export type {

src/libs/actions/Policy.ts

@@ -21,6 +21,7 @@ import type {
     OpenWorkspaceReimburseViewParams,
     UpdateWorkspaceAvatarParams,
     UpdateWorkspaceCustomUnitAndRateParams,
+    UpdateWorkspaceDescriptionParams,
     UpdateWorkspaceGeneralSettingsParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
@@ -891,6 +892,62 @@ function updateGeneralSettings(policyID: string, name: string, currency: string)
     });
 }
 
+function updateDescription(policyID: string, description: string, currentDescription: string) {
+    if (description === currentDescription) {
+        return;
+    }
+    const parsedDescription = ReportUtils.getParsedComment(description);
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                description: parsedDescription,
+                pendingFields: {
+                    description: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                },
+                errorFields: {
+                    description: null,
+                },
+            },
+        },
+    ];
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                pendingFields: {
+                    description: null,
+                },
+            },
+        },
+    ];
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                errorFields: {
+                    description: ErrorUtils.getMicroSecondOnyxError('workspace.editor.genericFailureMessage'),
+                },
+            },
+        },
+    ];
+
+    const params: UpdateWorkspaceDescriptionParams = {
+        policyID,
+        description: parsedDescription,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_WORKSPACE_DESCRIPTION, params, {
+        optimisticData,
+        finallyData,
+        failureData,
+    });
+}
+
 function clearWorkspaceGeneralSettingsErrors(policyID: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
         errorFields: {
@@ -2018,4 +2075,5 @@ export {
     buildOptimisticPolicyRecentlyUsedTags,
     createDraftInitialWorkspace,
     setWorkspaceInviteMessageDraft,
+    updateDescription,
 };

src/pages/home/HeaderView.js

@@ -69,6 +69,9 @@ const propTypes = {
 
         /** The URL for the policy avatar */
         avatar: PropTypes.string,
+
+        /** The id of the policy */
+        id: PropTypes.number,
     }),
 
     /** The reportID of the request */
@@ -116,6 +119,20 @@ function HeaderView(props) {
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
     const reportDescription = ReportUtils.getReportDescriptionText(props.report);
     const policyName = ReportUtils.getPolicyName(props.report);
+    const policyDescription = ReportUtils.getPolicyDescriptionText(props.policy);
+    const isPersonalExpenseChat = isPolicyExpenseChat && ReportUtils.isCurrentUserSubmitter(props.report.reportID);
+    const shouldShowSubtitle = () => {
+        if (_.isEmpty(subtitle)) {
+            return false;
+        }
+        if (isChatRoom) {
+            return _.isEmpty(reportDescription);
+        }
+        if (isPolicyExpenseChat) {
+            return _.isEmpty(policyDescription);
+        }
+        return true;
+    };
 
     // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact
     // these users via alternative means. It is possible to request a call with Concierge so we leave the option for them.
@@ -181,7 +198,7 @@ function HeaderView(props) {
     );
 
     const renderAdditionalText = () => {
-        if (_.isEmpty(policyName) || _.isEmpty(reportDescription) || !_.isEmpty(parentNavigationSubtitleData)) {
+        if (shouldShowSubtitle() || isPersonalExpenseChat || _.isEmpty(policyName) || !_.isEmpty(parentNavigationSubtitleData)) {
             return null;
         }
         return (
@@ -299,15 +316,15 @@ function HeaderView(props) {
                                                 pressableStyles={[styles.alignSelfStart, styles.mw100]}
                                             />
                                         )}
-                                        {!_.isEmpty(subtitle) && _.isEmpty(reportDescription) && (
+                                        {shouldShowSubtitle() && (
                                             <Text
                                                 style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
                                                 numberOfLines={1}
                                             >
                                                 {subtitle}
                                             </Text>
                                         )}
-                                        {!_.isEmpty(reportDescription) && _.isEmpty(parentNavigationSubtitleData) && (
+                                        {isChatRoom && !_.isEmpty(reportDescription) && _.isEmpty(parentNavigationSubtitleData) && (
                                             <PressableWithoutFeedback
                                                 onPress={() => {
                                                     if (ReportUtils.canEditReportDescription(props.report, props.policy)) {
@@ -327,6 +344,26 @@ function HeaderView(props) {
                                                 </Text>
                                             </PressableWithoutFeedback>
                                         )}
+                                        {isPolicyExpenseChat && !_.isEmpty(policyDescription) && _.isEmpty(parentNavigationSubtitleData) && (
+                                            <PressableWithoutFeedback
+                                                onPress={() => {
+                                                    if (ReportUtils.canEditPolicyDescription(props.policy)) {
+                                                        Navigation.navigate(ROUTES.WORKSPACE_DESCRIPTION.getRoute(props.report.policyID));
+                                                        return;
+                                                    }
+                                                    Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(props.policy.id));
+                                                }}
+                                                style={[styles.alignSelfStart, styles.mw100]}
+                                                accessibilityLabel={translate('workspace.editor.descriptionInputLabel')}
+                                            >
+                                                <Text
+                                                    style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                                                    numberOfLines={1}
+                                                >
+                                                    {policyDescription}
+                                                </Text>
+                                            </PressableWithoutFeedback>
+                                        )}
                                     </View>
                                     {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
                                         <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
@@ -390,7 +427,7 @@ export default memo(
         },
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
-            selector: (policy) => _.pick(policy, ['name', 'avatar', 'pendingAction']),
+            // selector: (policy) => _.pick(policy, ['name', 'avatar', 'pendingAction, description']),
         },
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,

src/pages/home/report/ReportActionItemCreated.tsx

@@ -117,6 +117,7 @@ export default withOnyx<ReportActionItemCreatedProps, ReportActionItemCreatedOny
             prevProps.report?.statusNum === nextProps.report?.statusNum &&
             prevProps.report?.lastReadTime === nextProps.report?.lastReadTime &&
             prevProps.report?.description === nextProps.report?.description &&
-            prevProps.personalDetails === nextProps.personalDetails,
+            prevProps.personalDetails === nextProps.personalDetails &&
+            prevProps.policy?.description === nextProps.policy?.description,
     ),
 );