Workspaces list

src/CONST.js

@@ -703,6 +703,7 @@ const CONST = {
         LARGE: 'large',
         DEFAULT: 'default',
         SMALL: 'small',
+        SMALLER: 'smaller',
         SUBSCRIPT: 'subscript',
         SMALL_SUBSCRIPT: 'small-subscript',
     },

src/ROUTES.js

@@ -23,6 +23,7 @@ export default {
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_PREFERENCES: 'settings/preferences',
+    SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',
     SETTINGS_CLOSE: 'settings/security/closeAccount',
     SETTINGS_PASSWORD: 'settings/security/password',

src/components/BlockingViews/BlockingView.js

@@ -35,7 +35,7 @@ const BlockingView = props => (
             width={variables.iconSizeSuperLarge}
             height={variables.iconSizeSuperLarge}
         />
-        <Text style={[styles.headerText, styles.textLarge, styles.mt5]}>{props.title}</Text>
+        <Text style={[styles.headerText, styles.textLarge, styles.mt5, styles.mb2]}>{props.title}</Text>
         <Text style={[styles.w70, styles.textAlignCenter]}>{props.subtitle}</Text>
     </View>
 );

src/components/MenuItem.js

@@ -16,6 +16,7 @@ import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
 import colors from '../styles/colors';
 import variables from '../styles/variables';
+import MultipleAvatars from './MultipleAvatars';
 
 const propTypes = {
     ...menuItemPropTypes,
@@ -46,6 +47,8 @@ const defaultProps = {
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
+    floatRightAvatars: [],
+    shouldStackHorizontally: false,
 };
 
 const MenuItem = (props) => {
@@ -150,8 +153,18 @@ const MenuItem = (props) => {
                                 </Text>
                             </View>
                         )}
+                        {!_.isEmpty(props.floatRightAvatars) && (
+                            <View style={[styles.justifyContentCenter, (props.brickRoadIndicator ? styles.mr4 : styles.mr3)]}>
+                                <MultipleAvatars
+                                    icons={props.floatRightAvatars}
+                                    size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                    fallbackIcon={Expensicons.Workspace}
+                                    shouldStackHorizontally={props.shouldStackHorizontally}
+                                />
+                            </View>
+                        )}
                         {Boolean(props.brickRoadIndicator) && (
-                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l4]}>
                                 <Icon
                                     src={Expensicons.DotIndicator}
                                     fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}

src/components/MultipleAvatars.js

@@ -23,13 +23,21 @@ const propTypes = {
 
     /** Tooltip for the Avatar */
     avatarTooltips: PropTypes.arrayOf(PropTypes.string),
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.func,
+
+    /** Prop to identify if we should load avatars vertically instead of diagonally */
+    shouldStackHorizontally: PropTypes.bool,
 };
 
 const defaultProps = {
     icons: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
     avatarTooltips: [],
+    fallbackIcon: undefined,
+    shouldStackHorizontally: false,
 };
 
 const MultipleAvatars = (props) => {
@@ -39,12 +47,13 @@ const MultipleAvatars = (props) => {
         props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar,
         ...props.secondAvatarStyle,
     ];
+    const horizontalStyles = [styles.horizontalStackedAvatar4, styles.horizontalStackedAvatar3, styles.horizontalStackedAvatar2, styles.horizontalStackedAvatar1];
 
     if (!props.icons.length) {
         return null;
     }
 
-    if (props.icons.length === 1) {
+    if (props.icons.length === 1 && !props.shouldStackHorizontally) {
         return (
             <View style={avatarContainerStyles}>
                 <Tooltip text={props.avatarTooltips[0]}>
@@ -60,41 +69,67 @@ const MultipleAvatars = (props) => {
 
     return (
         <View style={avatarContainerStyles}>
-            <View
-                style={singleAvatarStyles}
-            >
-                <Tooltip text={props.avatarTooltips[0]} absolute>
-                    <Image
-                        source={{uri: props.icons[0]}}
-                        style={singleAvatarStyles}
-                    />
-                </Tooltip>
-                <View
-                    style={secondAvatarStyles}
-                >
-                    {props.icons.length === 2 ? (
-                        <Tooltip text={props.avatarTooltips[1]} absolute>
-                            <Image
-                                source={{uri: props.icons[1]}}
-                                style={singleAvatarStyles}
-                            />
-                        </Tooltip>
-                    ) : (
-                        <Tooltip text={props.avatarTooltips.slice(1).join(', ')} absolute>
+            {props.shouldStackHorizontally ? (
+                <>
+                    {
+                        _.map([...props.icons].splice(0, 4).reverse(), (icon, index) => (
                             <View
-                                style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}
+                                key={`stackedAvatars-${index}`}
+                                style={[styles.horizontalStackedAvatar, styles.alignItemsCenter, horizontalStyles[index]]}
                             >
-                                <Text style={props.size === CONST.AVATAR_SIZE.SMALL
-                                    ? styles.avatarInnerTextSmall
-                                    : styles.avatarInnerText}
-                                >
-                                    {`+${props.icons.length - 1}`}
-                                </Text>
+                                <Avatar
+                                    source={icon || props.fallbackIcon}
+                                    fill={themeColors.iconSuccessFill}
+                                    size={CONST.AVATAR_SIZE.SMALLER}
+                                />
                             </View>
-                        </Tooltip>
+                        ))
+                    }
+                    {props.icons.length > 4 && (
+                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.horizontalStackedAvatar4Overlay]}>
+                            <Text style={styles.avatarInnerTextSmall}>
+                                {`+${props.icons.length - 4}`}
+                            </Text>
+                        </View>
                     )}
+                </>
+            ) : (
+                <View
+                    style={singleAvatarStyles}
+                >
+                    <Tooltip text={props.avatarTooltips[0]} absolute>
+                        <Image
+                            source={{uri: props.icons[0]}}
+                            style={singleAvatarStyles}
+                        />
+                    </Tooltip>
+                    <View
+                        style={secondAvatarStyles}
+                    >
+                        {props.icons.length === 2 ? (
+                            <Tooltip text={props.avatarTooltips[1]} absolute>
+                                <Image
+                                    source={{uri: props.icons[1]}}
+                                    style={singleAvatarStyles}
+                                />
+                            </Tooltip>
+                        ) : (
+                            <Tooltip text={props.avatarTooltips.slice(1).join(', ')} absolute>
+                                <View
+                                    style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}
+                                >
+                                    <Text style={props.size === CONST.AVATAR_SIZE.SMALL
+                                        ? styles.avatarInnerTextSmall
+                                        : styles.avatarInnerText}
+                                    >
+                                        {`+${props.icons.length - 1}`}
+                                    </Text>
+                                </View>
+                            </Tooltip>
+                        )}
+                    </View>
                 </View>
-            </View>
+            )}
         </View>
     );
 };

src/components/menuItemPropTypes.js

@@ -76,8 +76,14 @@ const propTypes = {
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.func,
 
+    /** Avatars to show on the right of the menu item */
+    floatRightAvatars: PropTypes.arrayOf(PropTypes.string),
+
     /** The type of brick road indicator to show. */
     brickRoadIndicator: PropTypes.oneOf([CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR, CONST.BRICK_ROAD_INDICATOR_STATUS.INFO, '']),
+
+    /** Prop to identify if we should load avatars vertically instead of diagonally */
+    shouldStackHorizontally: PropTypes.bool,
 };
 
 export default propTypes;

src/languages/en.js

@@ -19,6 +19,7 @@ export default {
         save: 'Save',
         saveChanges: 'Save changes',
         password: 'Password',
+        workspaces: 'Workspaces',
         profile: 'Profile',
         payments: 'Payments',
         preferences: 'Preferences',
@@ -814,6 +815,10 @@ export default {
             growlMessageOnDeleteError: 'This workspace cannot be deleted right now because reports are actively being processed',
             unavailable: 'Unavailable workspace',
         },
+        emptyWorkspace: {
+            title: 'Create a new workspace',
+            subtitle: 'Workspaces are where you\'ll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more — all in one place.',
+        },
         new: {
             newWorkspace: 'New workspace',
             getTheExpensifyCardAndMore: 'Get the Expensify Card and more',

src/languages/es.js

@@ -19,6 +19,7 @@ export default {
         save: 'Guardar',
         saveChanges: 'Guardar cambios',
         password: 'Contraseña',
+        workspaces: 'Espacios de trabajo',
         profile: 'Perfil',
         payments: 'Pagos',
         preferences: 'Preferencias',
@@ -816,6 +817,10 @@ export default {
             growlMessageOnDeleteError: 'No se puede eliminar el espacio de trabajo porque tiene informes que están siendo procesados',
             unavailable: 'Espacio de trabajo no disponible',
         },
+        emptyWorkspace: {
+            title: 'Crear un nuevo espacio de trabajo',
+            subtitle: 'En los espacios de trabajo es donde puedes chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas y mas — todo en un mismo lugar',
+        },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
             getTheExpensifyCardAndMore: 'Consigue la Tarjeta Expensify y más',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -203,6 +203,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Root',
     },
+    {
+        getComponent: () => {
+            const SettingsWorkspacesPage = require('../../../pages/workspace/WorkspacesListPage').default;
+            return SettingsWorkspacesPage;
+        },
+        name: 'Settings_Workspaces',
+    },
     {
         getComponent: () => {
             const SettingsProfilePage = require('../../../pages/settings/Profile/ProfilePage').default;

src/libs/Navigation/linkingConfig.js

@@ -36,6 +36,10 @@ export default {
                     Settings_Root: {
                         path: ROUTES.SETTINGS,
                     },
+                    Settings_Workspaces: {
+                        path: ROUTES.SETTINGS_WORKSPACES,
+                        exact: true,
+                    },
                     Settings_Preferences: {
                         path: ROUTES.SETTINGS_PREFERENCES,
                         exact: true,