General implementation profile page

src/ONYXKEYS.ts

@@ -391,6 +391,7 @@ type AllOnyxKeys = DeepValueOf<typeof ONYXKEYS>;
 type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: FormTypes.AddDebitCardForm;
     [ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM]: FormTypes.WorkspaceSettingsForm;
+    [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM]: FormTypes.WorkspaceProfileDescriptionForm;
     [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM]: FormTypes.WorkspaceRateAndUnitForm;
     [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: FormTypes.CloseAccountForm;
     [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: FormTypes.Form;

src/ROUTES.ts

@@ -450,9 +450,9 @@ const ROUTES = {
         route: 'workspace/:policyID/profile/name',
         getRoute: (policyID: string) => `workspace/${policyID}/profile/name` as const,
     },
-    WORKSPACE_DESCRIPTION: {
-        route: 'workspace/:policyID/description',
-        getRoute: (policyID: string) => `workspace/${policyID}/description` as const,
+    WORKSPACE_PROFILE_DESCRIPTION: {
+        route: 'workspace/:policyID/profile/description',
+        getRoute: (policyID: string) => `workspace/${policyID}/profile/description` as const,
     },
     WORKSPACE_AVATAR: {
         route: 'workspace/:policyID/avatar',

src/SCREENS.ts

@@ -208,8 +208,8 @@ const SCREENS = {
         INVITE: 'Workspace_Invite',
         INVITE_MESSAGE: 'Workspace_Invite_Message',
         CURRENCY: 'Workspace_Profile_Currency',
+        DESCRIPTION: 'Workspace_Profile_Description',
         NAME: 'Workspace_Profile_Name',
-        DESCRIPTION: 'Workspace_Description',
     },
 
     EDIT_REQUEST: {

src/components/Icon/Illustrations.ts

@@ -42,6 +42,7 @@ import HandCard from '@assets/images/simple-illustrations/simple-illustration__h
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
 import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
 import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg';
+import House from '@assets/images/simple-illustrations/simple-illustration__house.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
@@ -130,4 +131,5 @@ export {
     LockClosed,
     Gears,
     QRCode,
+    House,
 };

src/components/ReportWelcomeText.tsx

@@ -69,7 +69,7 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
                                     if (!canEditPolicyDescription) {
                                         return;
                                     }
-                                    Navigation.navigate(ROUTES.WORKSPACE_DESCRIPTION.getRoute(policy.id));
+                                    Navigation.navigate(ROUTES.WORKSPACE_PROFILE_DESCRIPTION.getRoute(policy.id));
                                 }}
                                 style={[styles.renderHTML, canEditPolicyDescription ? styles.cursorPointer : styles.cursorText]}
                                 accessibilityLabel={translate('reportDescriptionPage.roomDescription')}

src/languages/en.ts

@@ -1820,7 +1820,7 @@ 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',
+            descriptionInputLabel: 'Description',
             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

@@ -1845,8 +1845,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',
             nameInputLabel: 'Nombre',
+            descriptionInputLabel: 'Descripción',
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
             currencyInputLabel: 'Moneda por defecto',

src/libs/API/types.ts

@@ -104,6 +104,7 @@ const WRITE_COMMANDS = {
     DELETE_WORKSPACE_AVATAR: 'DeleteWorkspaceAvatar',
     UPDATE_WORKSPACE_GENERAL_SETTINGS: 'UpdateWorkspaceGeneralSettings',
     UPDATE_WORKSPACE_CUSTOM_UNIT_AND_RATE: 'UpdateWorkspaceCustomUnitAndRate',
+    UPDATE_WORKSPACE_DESCRIPTION: 'UpdateWorkspaceDescription',
     CREATE_WORKSPACE: 'CreateWorkspace',
     CREATE_WORKSPACE_FROM_IOU_PAYMENT: 'CreateWorkspaceFromIOUPayment',
     CREATE_TASK: 'CreateTask',
@@ -143,7 +144,6 @@ const WRITE_COMMANDS = {
     PAY_MONEY_REQUEST: 'PayMoneyRequest',
     CANCEL_PAYMENT: 'CancelPayment',
     ACCEPT_ACH_CONTRACT_FOR_BANK_ACCOUNT: 'AcceptACHContractForBankAccount',
-    UPDATE_WORKSPACE_DESCRIPTION: 'UpdateWorkspaceDescription',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -244,6 +244,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_WORKSPACE_AVATAR]: Parameters.UpdateWorkspaceAvatarParams;
     [WRITE_COMMANDS.DELETE_WORKSPACE_AVATAR]: Parameters.DeleteWorkspaceAvatarParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_GENERAL_SETTINGS]: Parameters.UpdateWorkspaceGeneralSettingsParams;
+    [WRITE_COMMANDS.UPDATE_WORKSPACE_DESCRIPTION]: Parameters.UpdateWorkspaceDescriptionParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_CUSTOM_UNIT_AND_RATE]: Parameters.UpdateWorkspaceCustomUnitAndRateParams;
     [WRITE_COMMANDS.CREATE_WORKSPACE]: Parameters.CreateWorkspaceParams;
     [WRITE_COMMANDS.CREATE_WORKSPACE_FROM_IOU_PAYMENT]: Parameters.CreateWorkspaceFromIOUPaymentParams;

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -245,7 +245,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.DESCRIPTION]: () => require('../../../pages/workspace/WorkspaceProfileDescriptionPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CURRENCY]: () => require('../../../pages/workspace/WorkspaceProfileCurrencyPage').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.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY],
+    [SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION],
     [SCREENS.WORKSPACE.REIMBURSE]: [SCREENS.WORKSPACE.RATE_AND_UNIT, SCREENS.WORKSPACE.RATE_AND_UNIT_RATE, SCREENS.WORKSPACE.RATE_AND_UNIT_UNIT],
     [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE],
 };

src/libs/Navigation/linkingConfig/config.ts

@@ -235,6 +235,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.CURRENCY]: {
                             path: ROUTES.WORKSPACE_PROFILE_CURRENCY.route,
                         },
+                        [SCREENS.WORKSPACE.DESCRIPTION]: {
+                            path: ROUTES.WORKSPACE_PROFILE_DESCRIPTION.route,
+                        },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,
                         },
@@ -261,7 +264,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.KEYBOARD_SHORTCUTS,
                         },
                         [SCREENS.WORKSPACE.NAME]: ROUTES.WORKSPACE_PROFILE_NAME.route,
-                        [SCREENS.WORKSPACE.DESCRIPTION]: ROUTES.WORKSPACE_DESCRIPTION.route,
                     },
                 },
                 [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: {

src/libs/actions/Policy.ts

@@ -923,7 +923,7 @@ function updateGeneralSettings(policyID: string, name: string, currency: string)
     });
 }
 
-function updateDescription(policyID: string, description: string, currentDescription: string) {
+function updateWorkspaceDescription(policyID: string, description: string, currentDescription: string) {
     if (description === currentDescription) {
         return;
     }
@@ -2126,5 +2126,5 @@ export {
     buildOptimisticPolicyRecentlyUsedTags,
     createDraftInitialWorkspace,
     setWorkspaceInviteMessageDraft,
-    updateDescription,
+    updateWorkspaceDescription,
 };

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -21,6 +21,7 @@ import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type {Policy, ReimbursementAccount, User} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type IconAsset from '@src/types/utils/IconAsset';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -69,6 +70,13 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
 
         /** Policy values needed in the component */
         policy: OnyxEntry<Policy>;
+
+        /**
+         * Icon displayed on the left of the title.
+         * If it is passed, the new styling is applied to the component:
+         * taller header on desktop and different font of the title.
+         * */
+        icon?: IconAsset;
     };
 
 function fetchData(skipVBBACal?: boolean) {
@@ -96,6 +104,7 @@ function WorkspacePageWithSections({
     shouldShowLoading = true,
     shouldShowOfflineIndicatorInWideScreen = false,
     shouldShowNonAdmin = false,
+    icon,
 }: WorkspacePageWithSectionsProps) {
     const styles = useThemeStyles();
     useNetwork({onReconnect: () => fetchData(shouldSkipVBBACall)});
@@ -155,6 +164,7 @@ function WorkspacePageWithSections({
                     guidesCallTaskID={guidesCallTaskID}
                     shouldShowBackButton={isSmallScreenWidth || shouldShowBackButton}
                     onBackButtonPress={() => Navigation.goBack(backButtonRoute ?? ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}
+                    icon={icon}
                 />
                 {(isLoading || firstRender.current) && shouldShowLoading ? (
                     <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

src/pages/workspace/WorkspaceDescriptionPage.tsx → src/pages/workspace/WorkspaceProfileDescriptionPage.tsx

@@ -10,6 +10,7 @@ import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import * as Policy from '@userActions/Policy';
@@ -18,21 +19,36 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 
-type WorkspaceDescriptionProps = WithPolicyProps;
+type Props = WithPolicyProps;
 
-function WorkspaceDescriptionPage({policy}: WorkspaceDescriptionProps) {
+const parser = new ExpensiMark();
+
+function WorkspaceProfileDescriptionPage({policy}: Props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const parser = new ExpensiMark();
     const [description, setDescription] = useState(() => parser.htmlToMarkdown(policy?.description ?? ''));
 
+    /**
+     * @param {Object} values - form input values passed by the Form component
+     * @returns {Boolean}
+     */
+    const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM>) => {
+        const errors = {};
+
+        if (values.description.length > CONST.DESCRIPTION_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'description', ['common.error.characterLimitExceedCounter', {length: values.description.length, limit: CONST.DESCRIPTION_LIMIT}]);
+        }
+
+        return errors;
+    }, []);
+
     const submit = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM>) => {
             if (!policy || policy.isPolicyUpdating) {
                 return;
             }
 
-            Policy.updateDescription(policy.id, values.description.trim(), policy.description ?? '');
+            Policy.updateWorkspaceDescription(policy.id, values.description.trim(), policy.description ?? '');
             Keyboard.dismiss();
             Navigation.goBack();
         },
@@ -43,7 +59,7 @@ function WorkspaceDescriptionPage({policy}: WorkspaceDescriptionProps) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID={WorkspaceDescriptionPage.displayName}
+            testID={WorkspaceProfileDescriptionPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.editor.descriptionInputLabel')}
@@ -56,6 +72,7 @@ function WorkspaceDescriptionPage({policy}: WorkspaceDescriptionProps) {
                 style={[styles.flexGrow1, styles.ph5]}
                 scrollContextEnabled
                 onSubmit={submit}
+                validate={validate}
                 enabledWhenOffline
             >
                 <View style={styles.mb4}>
@@ -82,6 +99,6 @@ function WorkspaceDescriptionPage({policy}: WorkspaceDescriptionProps) {
     );
 }
 
-WorkspaceDescriptionPage.displayName = 'WorkspaceDescriptionPage';
+WorkspaceProfileDescriptionPage.displayName = 'WorkspaceProfileDescriptionPage';
 
-export default withPolicy(WorkspaceDescriptionPage);
+export default withPolicy(WorkspaceProfileDescriptionPage);