Add the NewRoomPage

src/CONST.js

@@ -219,6 +219,7 @@ const CONST = {
             POLICY_ANNOUNCE: 'policyAnnounce',
             POLICY_ADMINS: 'policyAdmins',
             DOMAIN_ALL: 'domainAll',
+            POLICY_ROOM: 'policyRoom',
         },
         STATE_NUM: {
             OPEN: 0,
@@ -230,7 +231,12 @@ const CONST = {
             DAILY: 'daily',
             ALWAYS: 'always',
         },
+        VISIBILITY: {
+            RESTRICTED: 'restricted',
+            PRIVATE: 'private',
+        },
         MAX_PREVIEW_AVATARS: 4,
+        MAX_ROOM_NAME_LENGTH: 80,
     },
     MODAL: {
         MODAL_TYPE: {

src/ONYXKEYS.js

@@ -156,4 +156,7 @@ export default {
 
     // Is report data loading?
     IS_LOADING_REPORT_DATA: 'isLoadingReportData',
+
+    // Are we loading the create policy room command
+    IS_LOADING_CREATE_POLICY_ROOM: 'isLoadingCratePolicyRoom',
 };

src/ROUTES.js

@@ -85,6 +85,7 @@ export default {
     WORKSPACE_TRAVEL: 'workspace/:policyID/travel',
     WORKSPACE_MEMBERS: 'workspace/:policyID/members',
     WORKSPACE_BANK_ACCOUNT: 'workspace/:policyID/bank-account',
+    WORKSPACE_NEW_ROOM: 'workspace/new-room',
     getWorkspaceInitialRoute: policyID => `workspace/${policyID}`,
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
     getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`,

src/components/ExpensiPicker.js

@@ -19,13 +19,17 @@ const propTypes = {
 
     /** Error text to display */
     errorText: PropTypes.string,
+
+    /** Customize the ExpensiPicker container */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
     label: '',
     isDisabled: false,
     hasError: false,
     errorText: '',
+    containerStyles: [],
 };
 
 class ExpensiPicker extends PureComponent {

src/components/Icon/Expensicons.js

@@ -25,6 +25,7 @@ import EyeDisabled from '../../../assets/images/eye-disabled.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
 import Gallery from '../../../assets/images/gallery.svg';
 import Gear from '../../../assets/images/gear.svg';
+import Hashtag from '../../../assets/images/hashtag.svg';
 import Info from '../../../assets/images/info.svg';
 import Invoice from '../../../assets/images/invoice.svg';
 import Link from '../../../assets/images/link.svg';
@@ -92,6 +93,7 @@ export {
     ExpensifyCard,
     Gallery,
     Gear,
+    Hashtag,
     Info,
     Invoice,
     Link,

src/components/TextInputWithLabel.js

@@ -1,11 +1,11 @@
 import _ from 'underscore';
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {View, TextInput} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import ExpensifyText from './ExpensifyText';
 import TextLink from './TextLink';
+import TextInputWithPrefix from './TextInputWithPrefix';
 
 const propTypes = {
     /** Label text */
@@ -14,6 +14,12 @@ const propTypes = {
     /** Text to show if there is an error */
     errorText: PropTypes.string,
 
+    /** Prefix character prepended to the text input */
+    prefixCharacter: PropTypes.string,
+
+    /** Placeholder to display when the text input is empty */
+    placeholder: PropTypes.string,
+
     /** Styles for the outermost container for this component. */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
@@ -25,15 +31,21 @@ const propTypes = {
 
     /** Whether to disable the field and style */
     disabled: PropTypes.bool,
+
+    /** Callback to execute when the text input is modified */
+    onChangeText: PropTypes.func,
 };
 
 const defaultProps = {
     label: '',
     errorText: '',
+    prefixCharacter: '',
     containerStyles: [],
     helpLinkText: '',
     helpLinkURL: '',
     disabled: false,
+    placeholder: '',
+    onChangeText: () => {},
 };
 
 const TextInputWithLabel = props => (
@@ -54,16 +66,8 @@ const TextInputWithLabel = props => (
                 </TextLink>
             )}
         </View>
-        <TextInput
-            style={[
-                styles.textInput,
-                styles.mb1,
-                props.disabled ? styles.inputDisabled : undefined,
-                props.errorText ? styles.errorOutline : undefined,
-            ]}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {..._.omit(props, ['label', 'errorText'])}
-        />
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <TextInputWithPrefix {...(_.omit(props, 'helpLinkText', 'helpLinkURL', 'containerStyles', 'label'))} />
         {props.errorText !== '' && (
             <ExpensifyText style={[styles.formError]}>{props.errorText}</ExpensifyText>
         )}

src/components/TextInputWithPrefix/index.android.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+// eslint-disable-next-line no-restricted-imports
+import {TextInput, View} from 'react-native';
+import _ from 'underscore';
+import React from 'react';
+import ExpensifyText from '../ExpensifyText';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    /** Prefix character */
+    prefixCharacter: PropTypes.string,
+
+    /** Text to show if there is an error */
+    errorText: PropTypes.string,
+
+    /** Whether to disable the field and style */
+    disabled: PropTypes.bool,
+
+    /** Callback to execute the text input is modified */
+    onChangeText: PropTypes.func,
+};
+
+const defaultProps = {
+    errorText: '',
+    prefixCharacter: '',
+    disabled: false,
+    onChangeText: () => {},
+};
+
+const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ? <TextInput {..._.omit(props, ['prefixCharacter', 'errorText'])} />
+    : (
+        <View
+                style={[
+                    styles.textInputWithPrefix.container,
+                    {paddingTop: 0},
+                    props.disabled && styles.inputDisabled,
+                    props.errorText && styles.errorOutline,
+                ]}
+        >
+            <ExpensifyText style={[styles.textInputWithPrefix.prefix, {paddingTop: 10}]}>{props.prefixCharacter}</ExpensifyText>
+            <TextInput
+                style={[
+                    styles.textInputWithPrefix.textInput,
+                    styles.noOutline,
+                    {height: 40},
+                ]}
+                onChangeText={text => props.onChangeText(`${props.prefixCharacter}${text}`)}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])}
+            />
+        </View>
+    ));
+
+TextInputWithPrefix.propTypes = propTypes;
+TextInputWithPrefix.defaultProps = defaultProps;
+export default TextInputWithPrefix;

src/components/TextInputWithPrefix/index.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+// eslint-disable-next-line no-restricted-imports
+import {TextInput, View} from 'react-native';
+import _ from 'underscore';
+import React from 'react';
+import ExpensifyText from '../ExpensifyText';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    /** Prefix character */
+    prefixCharacter: PropTypes.string,
+
+    /** Text to show if there is an error */
+    errorText: PropTypes.string,
+
+    /** Whether to disable the field and style */
+    disabled: PropTypes.bool,
+
+    /** Callback to execute the text input is modified */
+    onChangeText: PropTypes.func,
+};
+
+const defaultProps = {
+    errorText: '',
+    prefixCharacter: '',
+    disabled: false,
+    onChangeText: () => {},
+};
+
+const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ? <TextInput {..._.omit(props, ['prefixCharacter', 'errorText'])} />
+    : (
+        <View
+                style={[
+                    styles.textInputWithPrefix.container,
+                    props.disabled ? styles.inputDisabled : undefined,
+                    props.errorText ? styles.errorOutline : undefined,
+                ]}
+        >
+            <ExpensifyText style={styles.textInputWithPrefix.prefix}>{props.prefixCharacter}</ExpensifyText>
+            <TextInput
+                style={[
+                    styles.textInputWithPrefix.textInput,
+                    styles.noOutline,
+                ]}
+                onChangeText={text => props.onChangeText(`${props.prefixCharacter}${text}`)}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])}
+            />
+        </View>
+    ));
+
+TextInputWithPrefix.propTypes = propTypes;
+TextInputWithPrefix.defaultProps = defaultProps;
+export default TextInputWithPrefix;

src/languages/en.js

@@ -176,6 +176,7 @@ export default {
         fabAction: 'New chat',
         newChat: 'New chat',
         newGroup: 'New group',
+        newRoom: 'New Room',
         headerChat: 'Chats',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
@@ -793,6 +794,18 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Change default skin tone',
     },
+    newRoomPage: {
+        newRoom: 'New Room',
+        roomName: 'Room Name',
+        visibility: 'Visibility',
+        restrictedDescription: 'People in your workspace are able to find this room using Search',
+        privateDescription: 'Only people invited to this room are able to find it',
+        createRoom: 'Create Room',
+        roomAlreadyExists: 'A room with this name already exists',
+        social: 'social',
+        selectAWorkspace: 'Select a workspace',
+        growlMessageOnError: 'Unable to create policy room, please check your connection and try again.',
+    },
     keyboardShortcutModal: {
         title: 'Keyboard Shortcuts',
         subtitle: 'Save time with these handy keyboard shortcuts:',

src/languages/es.js

@@ -176,6 +176,7 @@ export default {
         fabAction: 'Nuevo chat',
         newChat: 'Nuevo chat',
         newGroup: 'Nuevo grupo',
+        newRoom: 'Nueva sala de chat',
         headerChat: 'Chats',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
@@ -795,6 +796,18 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Elige el tono de piel por defecto',
     },
+    newRoomPage: {
+        newRoom: 'Nueva sala de chat',
+        roomName: 'Nombre de la sala',
+        visibility: 'Visibilidad',
+        restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala a través de "Buscar"',
+        privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla',
+        createRoom: 'Crea una sala de chat',
+        roomAlreadyExists: 'Ya existe una sala con este nombre',
+        social: 'social',
+        selectAWorkspace: 'Seleccionar un espacio de trabajo',
+        growlMessageOnError: 'No ha sido posible crear el espacio de trabajo, por favor comprueba tu conexión e inténtalo de nuevo.',
+    },
     keyboardShortcutModal: {
         title: 'Atajos de teclado',
         subtitle: 'Ahorra tiempo con estos atajos de teclado:',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -37,6 +37,7 @@ import WorkspaceBillsPage from '../../../pages/workspace/bills/WorkspaceBillsPag
 import WorkspaceTravelPage from '../../../pages/workspace/travel/WorkspaceTravelPage';
 import WorkspaceMembersPage from '../../../pages/workspace/WorkspaceMembersPage';
 import WorkspaceBankAccountPage from '../../../pages/workspace/WorkspaceBankAccountPage';
+import WorkspaceNewRoomPage from '../../../pages/workspace/WorkspaceNewRoomPage';
 import CONST from '../../../CONST';
 
 const defaultSubRouteOptions = {
@@ -222,6 +223,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         Component: WorkspaceInvitePage,
         name: 'Workspace_Invite',
     },
+    {
+        Component: WorkspaceNewRoomPage,
+        name: 'Workspace_NewRoom',
+    },
     {
         Component: ReimbursementAccountPage,
         name: 'ReimbursementAccount',

src/libs/Navigation/linkingConfig.js

@@ -102,6 +102,9 @@ export default {
                     Workspace_Invite: {
                         path: ROUTES.WORKSPACE_INVITE,
                     },
+                    Workspace_NewRoom: {
+                        path: ROUTES.WORKSPACE_NEW_ROOM,
+                    },
                     ReimbursementAccount: {
                         path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN,
                         exact: true,

src/libs/actions/Report.js

@@ -1451,28 +1451,33 @@ function handleInaccessibleReport() {
 }
 
 /**
- * Creates a policy room and fetches it
+ * Creates a policy room, fetches it, and navigates to it.
  * @param {String} policyID
  * @param {String} reportName
  * @param {String} visibility
  * @return {Promise}
  */
 function createPolicyRoom(policyID, reportName, visibility) {
+    Onyx.set(ONYXKEYS.IS_LOADING_CREATE_POLICY_ROOM, true);
     return API.CreatePolicyRoom({policyID, reportName, visibility})
         .then((response) => {
             if (response.jsonCode !== 200) {
-                Log.hmmm(response.message);
+                Growl.error(response.message);
                 return;
             }
             return fetchChatReportsByIDs([response.reportID]);
         })
         .then(([{reportID}]) => {
             if (!reportID) {
-                Log.hmmm('Unable to grab policy room after creation');
+                Log.error('Unable to grab policy room after creation', reportID);
                 return;
             }
             Navigation.navigate(ROUTES.getReportRoute(reportID));
-        });
+        })
+        .catch(() => {
+            Growl.error(Localize.translateLocal('newRoomPage.growlMessageOnError'));
+        })
+        .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_CREATE_POLICY_ROOM, false));
 }
 
 export {