replaced localizeMessage calls with FormattedMessage components (#4570)

* replaced localizeMessage calls with FormattedMessage components

localized file updates

* updated localization files

* updated localization files

webapp/components/create_team/components/display_name.jsx

@@ -27,10 +27,24 @@ export default class TeamSignupDisplayNamePage extends React.Component {
 
         var displayName = ReactDOM.findDOMNode(this.refs.name).value.trim();
         if (!displayName) {
-            this.setState({nameError: Utils.localizeMessage('create_team.display_name.required', 'This field is required')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.display_name.required'
+                    defaultMessage='This field is required'
+                />)
+            });
             return;
         } else if (displayName.length < Constants.MIN_TEAMNAME_LENGTH || displayName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.display_name.charLength', 'Name must be 2 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.display_name.charLength'
+                    defaultMessage='Name must be {min} or more characters up to a maximum of {max}'
+                    values={{
+                        min: Constants.MIN_TEAMNAME_LENGTH,
+                        max: Constants.MAX_TEAMNAME_LENGTH
+                    }}
+                />)
+            });
             return;
         }
 

webapp/components/create_team/components/team_url.jsx

@@ -42,26 +42,47 @@ export default class TeamUrl extends React.Component {
         const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
 
         if (!name) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.required', 'This field is required')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.required'
+                    defaultMessage='This field is required'
+                />)
+            });
             return;
         }
 
         if (cleanedName.length < Constants.MIN_TEAMNAME_LENGTH || cleanedName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.charLength', 'Name must be 4 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.charLength'
+                    defaultMessage='Name must be {min} or more characters up to a maximum of {max}'
+                    values={{
+                        min: Constants.MIN_TEAMNAME_LENGTH,
+                        max: Constants.MAX_TEAMNAME_LENGTH
+                    }}
+                />)
+            });
             return;
         }
 
         if (cleanedName !== name || !urlRegex.test(name)) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.regex', "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash.")});
-            return;
-        } else if (cleanedName.length < Constants.MIN_TEAMNAME_LENGTH || cleanedName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.charLength', 'Name must be 2 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.regex'
+                    defaultMessage="Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."
+                />)
+            });
             return;
         }
 
         for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
             if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
-                this.setState({nameError: Utils.localizeMessage('create_team.team_url.taken', 'URL is taken or contains a reserved word')});
+                this.setState({nameError: (
+                    <FormattedMessage
+                        id='create_team.team_url.taken'
+                        defaultMessage='URL is taken or contains a reserved word'
+                    />)
+                });
                 return;
             }
         }
@@ -74,7 +95,12 @@ export default class TeamUrl extends React.Component {
         checkIfTeamExists(name,
             (foundTeam) => {
                 if (foundTeam) {
-                    this.setState({nameError: Utils.localizeMessage('create_team.team_url.unavailable', 'This URL is unavailable. Please try another.')});
+                    this.setState({nameError: (
+                        <FormattedMessage
+                            id='create_team.team_url.unavailable'
+                            defaultMessage='This URL is unavailable. Please try another.'
+                        />)
+                    });
                     this.setState({isLoading: false});
                     return;
                 }

webapp/i18n/en.json

@@ -1117,7 +1117,7 @@
   "create_team.display_name.required": "This field is required",
   "create_team.display_name.teamName": "Team Name",
   "create_team.team_url.back": "Back to previous step",
-  "create_team.team_url.charLength": "Name must be 2 or more characters up to a maximum of 15",
+  "create_team.team_url.charLength": "Name must be {min} or more characters up to a maximum of {max}",
   "create_team.team_url.creatingTeam": "Creating team...",
   "create_team.team_url.finish": "Finish",
   "create_team.team_url.hint": "<li>Short and memorable is best</li><li>Use lowercase letters, numbers and dashes</li><li>Must start with a letter and can't end in a dash</li>",