[Feat #23131] Display status on user page

src/CONST.js

@@ -2532,6 +2532,7 @@ const CONST = {
         SCAN: 'scan',
         DISTANCE: 'distance',
     },
+    STATUS_TEXT_MAX_LENGTH: 100,
 };
 
 export default CONST;

src/pages/ProfilePage.js

@@ -36,6 +36,7 @@ import * as Illustrations from '../components/Icon/Illustrations';
 import variables from '../styles/variables';
 import ROUTES from '../ROUTES';
 import * as ValidationUtils from '../libs/ValidationUtils';
+import Permissions from '../libs/Permissions';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -133,6 +134,11 @@ function ProfilePage(props) {
     // If the API returns an error for some reason there won't be any details and isLoading will get set to false, so we want to show a blocking screen
     const shouldShowBlockingView = !hasMinimumDetails && !isLoading;
 
+    const statusEmojiCode = lodashGet(details, 'status.emojiCode', '');
+    const statusText = lodashGet(details, 'status.text', '');
+    const hasStatus = !!statusEmojiCode && Permissions.canUseCustomStatus(props.betas);
+    const statusContent = `${statusEmojiCode}  ${statusText}`;
+
     return (
         <ScreenWrapper>
             <HeaderWithBackButton
@@ -178,6 +184,18 @@ function ProfilePage(props) {
                                     {displayName}
                                 </Text>
                             )}
+                            {hasStatus && (
+                                <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.mw100]}>
+                                    <Text
+                                        style={[styles.textLabelSupporting, styles.mb1]}
+                                        numberOfLines={1}
+                                    >
+                                        {props.translate('statusPage.status')}
+                                    </Text>
+                                    <Text>{statusContent}</Text>
+                                </View>
+                            )}
+
                             {login ? (
                                 <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
                                     <Text
@@ -248,5 +266,8 @@ export default compose(
         isLoadingReportData: {
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,
         },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
     }),
 )(ProfilePage);

src/pages/settings/Profile/CustomStatus/StatusPage.js

@@ -33,16 +33,16 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
     const draftText = lodashGet(draftStatus, 'text');
 
     const defaultEmoji = draftEmojiCode || currentUserEmojiCode;
-    const defaultText = draftText || currentUserStatusText;
-    const customStatus = defaultEmoji ? `${defaultEmoji} ${defaultText}` : '';
+    const defaultText = draftEmojiCode ? draftText : currentUserStatusText;
+    const customStatus = draftEmojiCode ? `${draftEmojiCode} ${draftText}` : `${currentUserEmojiCode || ''} ${currentUserStatusText || ''}`;
     const hasDraftStatus = !!draftEmojiCode || !!draftText;
 
     const updateStatus = useCallback(() => {
         const endOfDay = moment().endOf('day').toDate();
         User.updateCustomStatus({text: defaultText, emojiCode: defaultEmoji, clearAfter: endOfDay.toISOString()});
 
         User.clearDraftCustomStatus();
-        Navigation.goBack(ROUTES.SETTINGS);
+        Navigation.goBack(ROUTES.SETTINGS_PROFILE);
     }, [defaultText, defaultEmoji]);
 
     const clearStatus = () => {
@@ -78,7 +78,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
             </View>
             <MenuItemWithTopDescription
                 title={customStatus}
-                description="Status"
+                description={localize.translate('statusPage.status')}
                 shouldShowRightIcon
                 inputID="test"
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_STATUS_SET)}

src/pages/settings/Profile/CustomStatus/StatusSetPage.js

@@ -42,7 +42,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
     const defaultText = lodashGet(draftStatus, 'text') || lodashGet(currentUserPersonalDetails, 'status.text', '');
 
     const onSubmit = (value) => {
-        User.updateDraftCustomStatus({text: value.statusText, emojiCode: value.emojiCode});
+        User.updateDraftCustomStatus({text: value.statusText.trim(), emojiCode: value.emojiCode});
         Navigation.goBack(ROUTES.SETTINGS_STATUS);
     };
 
@@ -55,7 +55,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
             <Form
                 formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
                 style={[styles.flexGrow1, styles.ph5]}
-                submitButtonText="Save"
+                submitButtonText={translate('statusPage.save')}
                 onSubmit={onSubmit}
                 enabledWhenOffline
             >
@@ -74,7 +74,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
                             accessibilityLabel={INPUT_IDS.STATUS_TEXT}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             defaultValue={defaultText}
-                            maxLength={100}
+                            maxLength={CONST.STATUS_TEXT_MAX_LENGTH}
                             autoFocus
                             shouldDelayFocus
                         />