Merge branch 'main' into amechler-remove-geometric-shapes-fonts

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030101
-        versionName "1.3.1-1"
+        versionCode 1001030202
+        versionName "1.3.2-2"
     }
 
     splits {

contributingGuides/CONTRIBUTING.md

@@ -111,7 +111,7 @@ Additionally if you want to discuss an idea with the open source community witho
 3. If you cannot reproduce the problem, pause on this step and add a comment to the issue explaining where you are stuck or that you don't think the issue can be reproduced.
 
 #### Propose a solution for the job
-4. Do not propose solutions to jobs without the `Help Wanted` label applied. Any proposals submitted when that label is not present will not be reviewed.
+4. You can propose solutions on any issue at at any time, but if you propose solutions to jobs before the `Help Wanted` label is applied, you do so at your own risk. Proposals will not be reviewed until the label is added and there is always a chance that we might not add the label or hire an external contributor for the job.
 5. After you reproduce the issue, complete the [proposal template here](./PROPOSAL_TEMPLATE.md) and post it as a comment in the corresponding GitHub issue (linked in the Upwork job).
     - Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. ALL NEW PROPOSALS MUST BE DIFFERENT FROM EXISTING PROPOSALS. The *difference* should be important, meaningful or considerable.
 6. Refrain from leaving additional comments until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet).

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.1</string>
+	<string>1.3.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.1</string>
+	<string>1.3.2.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.1</string>
+	<string>1.3.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.1</string>
+	<string>1.3.2.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.1-1",
+  "version": "1.3.2-2",
   "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.",
@@ -65,6 +65,7 @@
     "@react-navigation/native": "6.0.13",
     "@react-navigation/stack": "6.3.1",
     "@ua/react-native-airship": "^15.2.0",
+    "awesome-phonenumber": "^5.4.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",

src/CONST.js

@@ -191,6 +191,7 @@ const CONST = {
         POLICY_ROOMS: 'policyRooms',
         POLICY_EXPENSE_CHAT: 'policyExpenseChat',
         PASSWORDLESS: 'passwordless',
+        TASKS: 'tasks',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/ONYXKEYS.js

@@ -188,6 +188,7 @@ export default {
         HOME_ADDRESS_FORM: 'homeAddressForm',
         NEW_ROOM_FORM: 'newRoomForm',
         ROOM_SETTINGS_FORM: 'roomSettingsForm',
+        NEW_TASK_FORM: 'newTaskForm',
         MONEY_REQUEST_DESCRIPTION_FORM: 'moneyRequestDescriptionForm',
     },
 

src/ROUTES.js

@@ -13,6 +13,7 @@ const IOU_DETAILS = 'iou/details';
 const IOU_REQUEST_CURRENCY = `${IOU_REQUEST}/currency`;
 const IOU_BILL_CURRENCY = `${IOU_BILL}/currency`;
 const IOU_SEND_CURRENCY = `${IOU_SEND}/currency`;
+const NEW_TASK = 'new/task';
 const SETTINGS_PERSONAL_DETAILS = 'settings/profile/personal-details';
 const SETTINGS_CONTACT_METHODS = 'settings/profile/contact-methods';
 
@@ -55,6 +56,7 @@ export default {
     SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`,
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
+    NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID',
     getReportRoute: reportID => `r/${reportID}`,
@@ -89,6 +91,9 @@ export default {
     IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`,
     IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`,
     getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`,
+    getNewTaskRoute: reportID => `${NEW_TASK}/${reportID}`,
+    NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`,
+    getTaskDetailsRoute: taskID => `task/details/${taskID}`,
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -494,7 +494,7 @@ class EmojiPickerMenu extends Component {
                 pointerEvents={this.state.arePointerEventsDisabled ? 'none' : 'auto'}
             >
                 {!this.props.isSmallScreenWidth && (
-                    <View style={[styles.ph4, styles.pb1, styles.pt2]}>
+                    <View style={[styles.ph4, styles.pb2, styles.pt2]}>
                         <TextInput
                             label={this.props.translate('common.search')}
                             onChangeText={this.filterEmojis}
@@ -520,10 +520,8 @@ class EmojiPickerMenu extends Component {
                             style={[
                                 styles.disabledText,
                                 styles.emojiPickerList,
-                                styles.dFlex,
-                                styles.alignItemsCenter,
-                                styles.justifyContentCenter,
-                                styles.flexGrow1,
+                                styles.textLabel,
+                                styles.colorMuted,
                                 this.isMobileLandscape() && styles.emojiPickerListLandscape,
                             ]}
                         >

src/components/Icon/Expensicons.js

@@ -109,6 +109,7 @@ import Podcast from '../../../assets/images/social-podcast.svg';
 import Linkedin from '../../../assets/images/social-linkedin.svg';
 import Instagram from '../../../assets/images/social-instagram.svg';
 import AddReaction from '../../../assets/images/add-reaction.svg';
+import Task from '../../../assets/images/task.svg';
 
 export {
     ActiveRoomAvatar,
@@ -204,6 +205,7 @@ export {
     Send,
     Shield,
     Sync,
+    Task,
     ThreeDots,
     Transfer,
     Trashcan,

src/components/MenuItem.js

@@ -1,6 +1,8 @@
 import _ from 'underscore';
 import React from 'react';
-import {View} from 'react-native';
+import {
+    View, Pressable,
+} from 'react-native';
 import Text from './Text';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
@@ -16,14 +18,9 @@ import colors from '../styles/colors';
 import variables from '../styles/variables';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
-import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
-import ControlSelection from '../libs/ControlSelection';
 
 const propTypes = {
     ...menuItemPropTypes,
-    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -49,13 +46,11 @@ const defaultProps = {
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
-    onSecondaryInteraction: undefined,
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
     floatRightAvatars: [],
     shouldStackHorizontally: false,
-    shouldBlockSelection: false,
 };
 
 const MenuItem = (props) => {
@@ -76,7 +71,7 @@ const MenuItem = (props) => {
     ]);
 
     return (
-        <PressableWithSecondaryInteraction
+        <Pressable
             onPress={(e) => {
                 if (props.disabled) {
                     return;
@@ -88,17 +83,13 @@ const MenuItem = (props) => {
 
                 props.onPress(e);
             }}
-            onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={ControlSelection.unblock}
-            onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => ([
                 props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
                 styles.popoverMaxWidth,
             ])}
             disabled={props.disabled}
-            ref={props.forwardedRef}
         >
             {({hovered, pressed}) => (
                 <>
@@ -221,14 +212,12 @@ const MenuItem = (props) => {
                     </View>
                 </>
             )}
-        </PressableWithSecondaryInteraction>
+        </Pressable>
     );
 };
 
 MenuItem.propTypes = propTypes;
 MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
-export default withWindowDimensions(React.forwardRef((props, ref) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <MenuItem {...props} forwardedRef={ref} />
-)));
+
+export default MenuItem;

src/components/MenuItemList.js

@@ -3,8 +3,6 @@ import _ from 'underscore';
 import PropTypes from 'prop-types';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
-import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
-import {CONTEXT_MENU_TYPES} from '../pages/home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
@@ -14,38 +12,17 @@ const defaultProps = {
     menuItems: [],
 };
 
-const MenuItemList = (props) => {
-    let popoverAnchor;
-
-    /**
-     * Handle the secondary interaction for a menu item.
-     *
-     * @param {*} link the menu item link or function to get the link
-     * @param {Event} e the interaction event
-     */
-    const secondaryInteraction = (link, e) => {
-        if (typeof link === 'function') {
-            link().then(url => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, url, popoverAnchor));
-        } else if (!_.isEmpty(link)) {
-            ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, link, popoverAnchor);
-        }
-    };
-
-    return (
-        <>
-            {_.map(props.menuItems, menuItemProps => (
-                <MenuItem
-                    key={menuItemProps.title}
-                    onSecondaryInteraction={!_.isUndefined(menuItemProps.link) ? e => secondaryInteraction(menuItemProps.link, e) : undefined}
-                    ref={el => popoverAnchor = el}
-                    shouldBlockSelection={Boolean(menuItemProps.link)}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...menuItemProps}
-                />
-            ))}
-        </>
-    );
-};
+const MenuItemList = props => (
+    <>
+        {_.map(props.menuItems, menuItemProps => (
+            <MenuItem
+                key={menuItemProps.title}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...menuItemProps}
+            />
+        ))}
+    </>
+);
 
 MenuItemList.displayName = 'MenuItemList';
 MenuItemList.propTypes = propTypes;

src/components/Modal/BaseModal.js

@@ -155,6 +155,7 @@ class BaseModal extends PureComponent {
                             modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
                             modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
                             modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
+                            insets,
                         });
 
                         return (

src/components/MoneyRequestConfirmationList.js

@@ -135,9 +135,11 @@ class MoneyRequestConfirmationList extends Component {
      * @returns {Array}
      */
     getParticipantsWithAmount(participants) {
+        const iouAmount = IOUUtils.calculateAmount(participants, this.props.iouAmount, this.props.iou.selectedCurrencyCode);
+
         return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(
             participants,
-            this.props.numberFormat(IOUUtils.calculateAmount(participants, this.props.iouAmount) / 100, {
+            this.props.numberFormat(iouAmount / 100, {
                 style: 'currency',
                 currency: this.props.iou.selectedCurrencyCode,
             }),
@@ -169,9 +171,10 @@ class MoneyRequestConfirmationList extends Component {
             const formattedUnselectedParticipants = this.getParticipantsWithoutAmount(unselectedParticipants);
             const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
+            const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants, this.props.iouAmount, this.props.iou.selectedCurrencyCode, true);
             const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
                 this.props.currentUserPersonalDetails,
-                this.props.numberFormat(IOUUtils.calculateAmount(selectedParticipants, this.props.iouAmount, true) / 100, {
+                this.props.numberFormat(myIOUAmount / 100, {
                     style: 'currency',
                     currency: this.props.iou.selectedCurrencyCode,
                 }),