Simplify global create menu material top tab2

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001034802
-        versionName "1.3.48-2"
+        versionCode 1001034803
+        versionName "1.3.48-3"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -32,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.48.2</string>
+	<string>1.3.48.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.48.2</string>
+	<string>1.3.48.3</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.48-2",
+  "version": "1.3.48-3",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -119,7 +119,6 @@
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
     "react-native-onyx": "1.0.52",
-    "react-native-pager-view": "^6.2.0",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",
     "react-native-permissions": "^3.0.1",

src/CONST.js

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

src/ROUTES.js

@@ -58,8 +58,9 @@ export default {
     SETTINGS_2FA_CODES: 'settings/security/two-factor-auth/codes',
     SETTINGS_2FA_VERIFY: 'settings/security/two-factor-auth/verify',
     SETTINGS_2FA_SUCCESS: 'settings/security/two-factor-auth/success',
-    NEW_GROUP: 'new/group',
+    NEW: 'new/:tab',
     NEW_CHAT: 'new/chat',
+    NEW_ROOM: 'new/room',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID?',
@@ -155,7 +156,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/Button/index.js

@@ -49,6 +49,9 @@ const propTypes = {
     /** medium sized button */
     medium: PropTypes.bool,
 
+    /** Center the text and the icon */
+    centered: PropTypes.bool,
+
     /** Indicates whether the button should be disabled and in the loading state */
     isLoading: PropTypes.bool,
 
@@ -96,6 +99,9 @@ const propTypes = {
     /** Whether we should use the danger theme color */
     danger: PropTypes.bool,
 
+    /** Whether the background of the button should be transparent */
+    transparent: PropTypes.bool,
+
     /** Children to replace all inner contents of button */
     children: PropTypes.node,
 
@@ -135,6 +141,7 @@ const defaultProps = {
     small: false,
     large: false,
     medium: false,
+    centered: false,
     onPress: () => {},
     onLongPress: () => {},
     onPressIn: () => {},
@@ -148,6 +155,7 @@ const defaultProps = {
     shouldUseDefaultHover: false,
     success: false,
     danger: false,
+    transparent: false,
     children: null,
     shouldRemoveRightBorderRadius: false,
     shouldRemoveLeftBorderRadius: false,
@@ -225,7 +233,7 @@ class Button extends Component {
 
         if (this.props.icon || this.props.shouldShowRightIcon) {
             return (
-                <View style={[styles.justifyContentBetween, styles.flexRow]}>
+                <View style={[styles.justifyContentBetween, styles.flexRow, this.props.centered && styles.justifyContentCenter]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {this.props.icon && (
                             <View style={[styles.mr1, ...this.props.iconStyles]}>
@@ -292,6 +300,7 @@ class Button extends Component {
                     this.props.large ? styles.buttonLarge : undefined,
                     this.props.success ? styles.buttonSuccess : undefined,
                     this.props.danger ? styles.buttonDanger : undefined,
+                    this.props.transparent ? styles.buttonTransparent : undefined,
                     this.props.isDisabled && (this.props.success || this.props.danger) ? styles.buttonOpacityDisabled : undefined,
                     this.props.isDisabled && !this.props.danger && !this.props.success ? styles.buttonDisabled : undefined,
                     this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,

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,
@@ -149,7 +162,6 @@ class OptionRow extends Component {
                 pendingAction={this.props.option.pendingAction}
                 errors={this.props.option.allReportErrors}
                 shouldShowErrorMessages={false}
-                needsOffscreenAlphaCompositing
             >
                 <Hoverable>
                     {(hovered) => (
@@ -248,7 +260,15 @@ 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}
+                                        >
+                                            <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

@@ -337,6 +337,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

@@ -24,7 +24,20 @@ const defaultProps = {
     onTabPress: () => {},
 };
 
-const getIcon = (route) => (route === CONST.TAB.MANUAL ? Expensicons.Pencil : Expensicons.Receipt);
+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;
+        default:
+            return Expensicons.DotIndicator
+    }
+}
 
 function TabSelector({state, navigation, onTabPress}) {
     const {translate} = useLocalize();
@@ -58,7 +71,7 @@ function TabSelector({state, navigation, onTabPress}) {
                     />
                 );
             })}
-        </View>
+        </View> 
     );
 }
 

src/languages/en.js

@@ -331,13 +331,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',
@@ -346,6 +348,8 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Scan',
+        chat: 'Chat',
+        room: 'Room',
     },
     receipt: {
         upload: 'Upload receipt',
@@ -383,6 +387,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}`,
@@ -835,6 +840,8 @@ export default {
         localTime: 'Local time',
     },
     newChatPage: {
+        addToGroup: 'Add to group',
+        createChat: 'Create chat',
         createGroup: 'Create group',
     },
     yearPickerPage: {
@@ -1372,7 +1379,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',
         },
     },