Simplify global create menu

.gitignore

@@ -84,6 +84,7 @@ storybook-static
 
 # GitHub GPG Keys
 .github/workflows/OSBotify-private-key.asc
+.gitconfig
 *.asc
 
 # Jest coverage report

src/CONST.js

@@ -274,8 +274,8 @@ const CONST = {
             },
             type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
-        NEW_GROUP: {
-            descriptionKey: 'newGroup',
+        NEW_CHAT: {
+            descriptionKey: 'newChat',
             shortcutKey: 'K',
             modifiers: ['CTRL', 'SHIFT'],
             trigger: {
@@ -2530,6 +2530,9 @@ const CONST = {
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',
         SCAN: 'scan',
+        NEW_CHAT_TAB_ID: 'NewChatTab',
+        NEW_CHAT: 'chat',
+        NEW_ROOM: 'room',
         DISTANCE: 'distance',
     },
 };

src/ROUTES.js

@@ -7,7 +7,6 @@ import * as Url from './libs/Url';
 
 const REPORT = 'r';
 const IOU_REQUEST = 'request/new';
-const IOU_BILL = 'split/new';
 const IOU_SEND = 'send/new';
 const NEW_TASK = 'new/task';
 const SETTINGS_PERSONAL_DETAILS = 'settings/profile/personal-details';
@@ -62,8 +61,9 @@ export default {
     SETTINGS_2FA_SUCCESS: 'settings/security/two-factor-auth/success',
     SETTINGS_STATUS,
     SETTINGS_STATUS_SET,
-    NEW_GROUP: 'new/group',
+    NEW: 'new',
     NEW_CHAT: 'new/chat',
+    NEW_ROOM: 'new/room',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID?',
@@ -79,7 +79,6 @@ export default {
     CONCIERGE: 'concierge',
 
     IOU_REQUEST,
-    IOU_BILL,
     IOU_SEND,
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
@@ -160,7 +159,6 @@ export default {
     WORKSPACE_INVOICES: 'workspace/:policyID/invoices',
     WORKSPACE_TRAVEL: 'workspace/:policyID/travel',
     WORKSPACE_MEMBERS: 'workspace/:policyID/members',
-    WORKSPACE_NEW_ROOM: 'workspace/new-room',
     getWorkspaceInitialRoute: (policyID) => `workspace/${policyID}`,
     getWorkspaceInviteRoute: (policyID) => `workspace/${policyID}/invite`,
     getWorkspaceInviteMessageRoute: (policyID) => `workspace/${policyID}/invite-message`,

src/components/OptionRow.js

@@ -6,6 +6,7 @@ import {View, StyleSheet, InteractionManager} from 'react-native';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import optionPropTypes from './optionPropTypes';
+import Button from './Button';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import MultipleAvatars from './MultipleAvatars';
@@ -39,6 +40,15 @@ const propTypes = {
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a tickbox */
+    shouldShowSelectedStateAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    selectedStateButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onSelectedStatePressed: PropTypes.func,
+
     /** Whether this item is selected */
     isSelected: PropTypes.bool,
 
@@ -65,6 +75,9 @@ const propTypes = {
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     showSelectedState: false,
+    shouldShowSelectedStateAsButton: false,
+    selectedStateButtonText: 'Select',
+    onSelectedStatePressed: undefined,
     isSelected: false,
     boldStyle: false,
     showTitleTooltip: false,
@@ -248,7 +261,21 @@ class OptionRow extends Component {
                                             />
                                         </View>
                                     )}
-                                    {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
+                                    {this.props.showSelectedState && (
+                                        <>
+                                            {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
+                                                <Button text={this.props.selectedStateButtonText} onPress={() => this.props.onSelectedStatePressed(this.props.option)} small />
+                                            ) : (
+                                                <PressableWithFeedback
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                    accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                >
+                                                    <SelectCircle isChecked={this.props.isSelected} />
+                                                </PressableWithFeedback>
+                                            )}
+                                        </>
+                                    )}
                                 </View>
                             </View>
                             {Boolean(this.props.option.customIcon) && (

src/components/OptionsList/BaseOptionsList.js

@@ -170,6 +170,9 @@ class BaseOptionsList extends Component {
                 onSelectRow={this.props.onSelectRow}
                 isSelected={Boolean(_.find(this.props.selectedOptions, (option) => option.accountID === item.accountID))}
                 showSelectedState={this.props.canSelectMultipleOptions}
+                shouldShowSelectedStateAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                selectedStateButtonText={this.props.multipleOptionSelectorButtonText}
+                onSelectedStatePressed={this.props.onAddToSelection}
                 boldStyle={this.props.boldStyle}
                 isDisabled={isDisabled}
                 shouldHaveOptionSeparator={index > 0 && this.props.shouldHaveOptionSeparator}

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -350,6 +350,9 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
+                onAddToSelection={this.props.onAddToSelection}
                 hideSectionHeaders={this.props.hideSectionHeaders}
                 headerMessage={this.props.headerMessage}
                 boldStyle={this.props.boldStyle}

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -53,6 +53,15 @@ const propTypes = {
     /** Whether we can select multiple options */
     canSelectMultipleOptions: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a standard tickbox */
+    shouldShowMultipleOptionSelectorAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    multipleOptionSelectorButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onAddToSelection: PropTypes.func,
+
     /** Whether any section headers should be visible */
     hideSectionHeaders: PropTypes.bool,
 

src/components/TabSelector/TabSelector.js

@@ -29,14 +29,20 @@ const defaultProps = {
 
 const getIcon = (route) => {
     switch (route) {
+        case CONST.TAB.MANUAL:
+            return Expensicons.Pencil;
         case CONST.TAB.SCAN:
             return Expensicons.Receipt;
+        case CONST.TAB.NEW_CHAT:
+            return Expensicons.User;
+        case CONST.TAB.NEW_ROOM:
+            return Expensicons.Hashtag;
         case CONST.TAB.DISTANCE:
             return Expensicons.Car;
         default:
-            return Expensicons.Pencil;
+            throw new Error(`Route ${route} has no icon set.`);
     }
-};
+}
 
 function TabSelector({state, navigation, onTabPress}) {
     const {translate} = useLocalize();

src/components/WalletStatementModal/index.js

@@ -37,7 +37,7 @@ class WalletStatementModal extends React.Component {
         }
 
         if (e.data.type === 'STATEMENT_NAVIGATE' && e.data.url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => e.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);

src/components/WalletStatementModal/index.native.js

@@ -37,7 +37,7 @@ class WalletStatementModal extends React.Component {
         }
 
         if (type === 'STATEMENT_NAVIGATE' && url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => url.includes(iouRoute));
             if (navigateToIOURoute) {
                 this.webview.stopLoading();

src/languages/en.js

@@ -334,13 +334,15 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'New chat',
+        chat: 'Chat',
+        room: 'Room',
         newChat: 'New chat',
         newGroup: 'New group',
         newRoom: 'New room',
+        fabNewChat: 'Send message',
+        fabNewChatExplained: 'Send message (Floating action)',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
-        fabNewChat: 'New chat (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
         listOfChatMessages: 'List of chat messages',
@@ -349,6 +351,8 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Scan',
+        chat: 'Chat',
+        room: 'Room',
         distance: 'Distance',
     },
     receipt: {
@@ -389,6 +393,7 @@ export default {
         payElsewhere: 'Pay elsewhere',
         settlePaypalMe: ({formattedAmount}) => `Pay ${formattedAmount} with PayPal.me`,
         requestAmount: ({amount}) => `request ${amount}`,
+        addToSplit: 'Add to split',
         splitAmount: ({amount}) => `split ${amount}`,
         amountEach: ({amount}) => `${amount} each`,
         payerOwesAmount: ({payer, amount}) => `${payer} owes ${amount}`,
@@ -842,6 +847,8 @@ export default {
         localTime: 'Local time',
     },
     newChatPage: {
+        addToGroup: 'Add to group',
+        createChat: 'Create chat',
         createGroup: 'Create group',
     },
     yearPickerPage: {
@@ -1388,7 +1395,7 @@ export default {
             openShortcutDialog: 'Opens the keyboard shortcuts dialog',
             escape: 'Escape dialogs',
             search: 'Open search dialog',
-            newGroup: 'New group screen',
+            newChat: 'New chat screen',
             copy: 'Copy comment',
         },
     },

src/languages/es.js

@@ -333,13 +333,16 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'Nuevo chat',
-        newChat: 'Nuevo chat',
+        chat: 'Chat',
+        room: 'Sala',
+        fabAction: 'Enviar mensaje',
+        newChat: 'Enviar mensaje',
         newGroup: 'Nuevo grupo',
         newRoom: 'Nueva sala de chat',
+        fabNewChat: 'Enviar mensaje',
+        fabNewChatExplained: 'Enviar mensaje',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
-        fabNewChat: 'Nuevo chat',
         chatPinned: 'Chat fijado',
         draftedMessage: 'Mensaje borrador',
         listOfChatMessages: 'Lista de mensajes del chat',
@@ -348,6 +351,8 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Escanear',
+        chat: 'Chat',
+        room: 'Sala',
         distance: 'Distancia',
     },
     receipt: {
@@ -388,6 +393,7 @@ export default {
         payElsewhere: 'Pagar de otra forma',
         settlePaypalMe: ({formattedAmount}) => `Pagar ${formattedAmount} con PayPal.me`,
         requestAmount: ({amount}) => `solicitar ${amount}`,
+        addToSplit: 'TODO: TRANSLATION NEEDED',
         splitAmount: ({amount}) => `dividir ${amount}`,
         amountEach: ({amount}) => `${amount} cada uno`,
         payerOwesAmount: ({payer, amount}) => `${payer} debe ${amount}`,
@@ -846,6 +852,8 @@ export default {
         localTime: 'Hora local',
     },
     newChatPage: {
+        addToGroup: 'Añadir al grupo',
+        createChat: 'Creat chat',
         createGroup: 'Crear grupo',
     },
     yearPickerPage: {
@@ -1400,7 +1408,7 @@ export default {
             openShortcutDialog: 'Abre el cuadro de diálogo de métodos abreviados de teclado',
             escape: 'Diálogos de escape',
             search: 'Abrir diálogo de búsqueda',
-            newGroup: 'Nueva pantalla de grupo',
+            newGroup: 'Nueva pantalla de chat',
             copy: 'Copiar comentario',
         },
     },

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -153,7 +153,7 @@ class AuthScreens extends React.Component {
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
 
         const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH;
-        const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
+        const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT;
 
         // Listen for the key K being pressed so that focus can be given to
         // the chat switcher, or new group chat
@@ -173,17 +173,17 @@ class AuthScreens extends React.Component {
             true,
         );
         this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
-            groupShortcutConfig.shortcutKey,
+            chatShortcutConfig.shortcutKey,
             () => {
                 Modal.close(() => {
-                    if (Navigation.isActiveRoute(ROUTES.NEW_GROUP)) {
+                    if (Navigation.isActiveRoute(ROUTES.NEW_CHAT)) {
                         return;
                     }
-                    Navigation.navigate(ROUTES.NEW_GROUP);
+                    Navigation.navigate(ROUTES.NEW_CHAT);
                 });
             },
-            groupShortcutConfig.descriptionKey,
-            groupShortcutConfig.modifiers,
+            chatShortcutConfig.descriptionKey,
+            chatShortcutConfig.modifiers,
             true,
         );
     }

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -231,21 +231,11 @@ const SearchModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
-const NewGroupModalStackNavigator = createModalStackNavigator([
-    {
-        getComponent: () => {
-            const NewGroupPage = require('../../../pages/NewGroupPage').default;
-            return NewGroupPage;
-        },
-        name: 'NewGroup_Root',
-    },
-]);
-
 const NewChatModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
-            const NewChatPage = require('../../../pages/NewChatPage').default;
-            return NewChatPage;
+            const NewChatSelectorPage = require('../../../pages/NewChatSelectorPage').default;
+            return NewChatSelectorPage;
         },
         name: 'NewChat_Root',
     },
@@ -606,13 +596,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Workspace_Invite_Message',
     },
-    {
-        getComponent: () => {
-            const WorkspaceNewRoomPage = require('../../../pages/workspace/WorkspaceNewRoomPage').default;
-            return WorkspaceNewRoomPage;
-        },
-        name: 'Workspace_NewRoom',
-    },
     {
         getComponent: () => {
             const ReimbursementAccountPage = require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default;
@@ -736,7 +719,6 @@ export {
     ReportWelcomeMessageModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     SearchModalStackNavigator,
-    NewGroupModalStackNavigator,
     NewChatModalStackNavigator,
     NewTaskModalStackNavigator,
     SettingsModalStackNavigator,

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js

@@ -17,14 +17,6 @@ function RightModalNavigator() {
                 name="NewChat"
                 component={ModalStackNavigators.NewChatModalStackNavigator}
             />
-            <Stack.Screen
-                name="NewGroup"
-                component={ModalStackNavigators.NewGroupModalStackNavigator}
-                options={{
-                    // Disable animation for this screen because it causes an animation glitch when using shortcuts
-                    animationEnabled: false,
-                }}
-            />
             <Stack.Screen
                 name="Search"
                 component={ModalStackNavigators.SearchModalStackNavigator}