From c07e8fb8d382476d2cc8ca892c0a91f81d554e19 Mon Sep 17 00:00:00 2001
From: shred86 <32663154+shred86@users.noreply.github.com>
Date: Thu, 9 Apr 2020 03:05:01 -0700
Subject: [PATCH] [MM-23584][MM-23675] Add first and last name to user profile
 view & language support (#4092)

* Add name to profile view

* Add first and last name fields

* Styling update

* Update snapshot

* Add language support and change ordering
---
 .../__snapshots__/user_profile.test.js.snap   | 38 ++++++++++++++++---
 app/screens/user_profile/user_profile.js      | 29 ++++++++++++--
 2 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/app/screens/user_profile/__snapshots__/user_profile.test.js.snap b/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
index db0501f58..d0778a0d8 100644
--- a/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
+++ b/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
@@ -146,13 +146,12 @@ exports[`user_profile should match snapshot 1`] = `
                 "fontWeight": "600",
                 "marginBottom": 10,
                 "marginTop": 25,
+                "textTransform": "uppercase",
               },
               null,
             ]
           }
-        >
-          USERNAME
-        </Text>
+        />
         <Text
           style={
             Array [
@@ -164,7 +163,7 @@ exports[`user_profile should match snapshot 1`] = `
             ]
           }
         >
-          fred
+          test
         </Text>
       </View>
       <View>
@@ -177,13 +176,42 @@ exports[`user_profile should match snapshot 1`] = `
                 "fontWeight": "600",
                 "marginBottom": 10,
                 "marginTop": 25,
+                "textTransform": "uppercase",
+              },
+              null,
+            ]
+          }
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#3d3c40",
+                "fontSize": 15,
               },
               null,
             ]
           }
         >
-          NICKNAME
+          fake
         </Text>
+      </View>
+      <View>
+        <Text
+          style={
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 13,
+                "fontWeight": "600",
+                "marginBottom": 10,
+                "marginTop": 25,
+                "textTransform": "uppercase",
+              },
+              null,
+            ]
+          }
+        />
         <Text
           style={
             Array [
diff --git a/app/screens/user_profile/user_profile.js b/app/screens/user_profile/user_profile.js
index 516a990b5..e74062ec1 100644
--- a/app/screens/user_profile/user_profile.js
+++ b/app/screens/user_profile/user_profile.js
@@ -140,13 +140,32 @@ export default class UserProfile extends PureComponent {
     };
 
     buildDisplayBlock = (property) => {
+        const {formatMessage} = this.context.intl;
         const {theme, user, isLandscape} = this.props;
         const style = createStyleSheet(theme);
+        let label;
+
+        if (Object.prototype.hasOwnProperty.call(user, property) && user[property].length > 0) {
+            switch (property) {
+            case 'first_name':
+                label = formatMessage({id: 'user.settings.general.firstName', defaultMessage: 'First Name'});
+                break;
+            case 'last_name':
+                label = formatMessage({id: 'user.settings.general.lastName', defaultMessage: 'Last Name'});
+                break;
+            case 'email':
+                label = formatMessage({id: 'user.settings.general.email', defaultMessage: 'Email'});
+                break;
+            case 'nickname':
+                label = formatMessage({id: 'user.settings.general.nickname', defaultMessage: 'Nickname'});
+                break;
+            case 'position':
+                label = formatMessage({id: 'user.settings.general.position', defaultMessage: 'Position'});
+            }
 
-        if (user.hasOwnProperty(property) && user[property].length > 0) {
             return (
                 <View>
-                    <Text style={[style.header, padding(isLandscape)]}>{property.toUpperCase()}</Text>
+                    <Text style={[style.header, padding(isLandscape)]}>{label}</Text>
                     <Text style={[style.text, padding(isLandscape)]}>{user[property]}</Text>
                 </View>
             );
@@ -284,11 +303,12 @@ export default class UserProfile extends PureComponent {
 
         return (
             <View style={style.content}>
-                {this.props.enableTimezone && this.buildTimezoneBlock()}
-                {this.buildDisplayBlock('username')}
+                {this.buildDisplayBlock('first_name')}
+                {this.buildDisplayBlock('last_name')}
                 {this.props.config.ShowEmailAddress === 'true' && this.buildDisplayBlock('email')}
                 {this.buildDisplayBlock('nickname')}
                 {this.buildDisplayBlock('position')}
+                {this.props.enableTimezone && this.buildTimezoneBlock()}
             </View>
         );
     }
@@ -351,6 +371,7 @@ const createStyleSheet = makeStyleSheetFromTheme((theme) => {
         header: {
             fontSize: 13,
             fontWeight: '600',
+            textTransform: 'uppercase',
             color: changeOpacity(theme.centerChannelColor, 0.5),
             marginTop: 25,
             marginBottom: 10,