Merge branch 'main' into vit-fixInconsistentPunctuation

.github/PULL_REQUEST_TEMPLATE.md

@@ -82,6 +82,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)
+      - [ ] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
     - [ ] I verified all numbers, amounts, dates and phone numbers shown in the product are using the [localization methods](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60-L68)
     - [ ] I verified any copy / text that was added to the app is correct English and approved by marketing by adding the `Waiting for Copy` label for a copy review on the original GH to get the correct copy.
     - [ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001025400
-        versionName "1.2.54-0"
+        versionCode 1001025402
+        versionName "1.2.54-2"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

assets/emojis.js

@@ -2259,6 +2259,13 @@ const emojis = [
             'meeting',
             'shake',
         ],
+        types: [
+            '🤝🏿',
+            '🤝🏾',
+            '🤝🏽',
+            '🤝🏼',
+            '🤝🏻',
+        ],
     },
     {
         name: 'pray',

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.54.0</string>
+	<string>1.2.54.2</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.2.54.0</string>
+	<string>1.2.54.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.54-0",
+  "version": "1.2.54-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.",
@@ -69,7 +69,7 @@
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#55c208315e04246b548a4009d35466c100d9de7c",
+    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#6657a014d9c295c998d98562806b4df8bc9fd17e",
     "fbjs": "^3.0.2",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
@@ -99,7 +99,7 @@
     "react-native-image-picker": "^4.10.2",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#6b5ab5110dc3ed554f8eafbc38d7d87c17147972",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.32",
+    "react-native-onyx": "1.0.35",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",
     "react-native-permissions": "^3.0.1",

src/CONST.js

@@ -46,6 +46,7 @@ const CONST = {
     DATE: {
         MOMENT_FORMAT_STRING: 'YYYY-MM-DD',
         UNIX_EPOCH: '1970-01-01 00:00:00.000',
+        MAX_DATE: '9999-12-31',
     },
     SMS: {
         DOMAIN: '@expensify.sms',
@@ -253,6 +254,7 @@ const CONST = {
     FEES_URL: `${USE_EXPENSIFY_URL}/fees`,
     CFPB_PREPAID_URL: 'https://cfpb.gov/prepaid',
     STAGING_NEW_EXPENSIFY_URL: 'https://staging.new.expensify.com',
+    NEWHELP_URL: 'https://help.expensify.com',
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'http://localhost:',

src/components/AutoUpdateTime.js

@@ -89,7 +89,7 @@ class AutoUpdateTime extends PureComponent {
     render() {
         return (
             <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
+                <Text style={[styles.textLabelSupporting, styles.mb2]} numberOfLines={1}>
                     {this.props.translate('detailsPage.localTime')}
                 </Text>
                 <Text numberOfLines={1}>

src/components/DatePicker/index.ios.js

@@ -4,17 +4,20 @@ import {Button, View, Keyboard} from 'react-native';
 import RNDatePicker from '@react-native-community/datetimepicker';
 import moment from 'moment';
 import _ from 'underscore';
+import compose from '../../libs/compose';
 import TextInput from '../TextInput';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Popover from '../Popover';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import {propTypes, defaultProps} from './datepickerPropTypes';
+import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState';
 
 const datepickerPropTypes = {
     ...propTypes,
     ...withLocalizePropTypes,
+    ...keyboardStatePropTypes,
 };
 
 class DatePicker extends React.Component {
@@ -36,9 +39,18 @@ class DatePicker extends React.Component {
      * @param {Event} event
      */
     showPicker(event) {
+        // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS
+        // See https://github.com/Expensify/App/issues/14084 for more context
+        if (!this.props.isKeyboardShown) {
+            this.setState({isPickerVisible: true});
+            return;
+        }
+        const listener = Keyboard.addListener('keyboardDidHide', () => {
+            this.setState({isPickerVisible: true});
+            listener.remove();
+        });
         Keyboard.dismiss();
         this.initialValue = this.state.selectedDate;
-        this.setState({isPickerVisible: true});
         event.preventDefault();
     }
 
@@ -134,7 +146,10 @@ DatePicker.defaultProps = defaultProps;
  * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens
  * that the modal buttons are in one locale (app) while the (spinner) month names are another (system)
  */
-export default withLocalize(React.forwardRef((props, ref) => (
+export default compose(
+    withLocalize,
+    withKeyboardState,
+)(React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
     <DatePicker {...props} innerRef={ref} />
 )));

src/components/DatePicker/index.js

@@ -30,6 +30,7 @@ class DatePicker extends React.Component {
     componentDidMount() {
         // Adds nice native datepicker on web/desktop. Not possible to set this through props
         this.inputRef.setAttribute('type', 'date');
+        this.inputRef.setAttribute('max', CONST.DATE.MAX_DATE);
         this.inputRef.classList.add('expensify-datepicker');
     }
 
@@ -43,7 +44,7 @@ class DatePicker extends React.Component {
             return;
         }
 
-        const asMoment = moment(text);
+        const asMoment = moment(text, true);
         if (asMoment.isValid()) {
             this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING));
         }

src/components/IOUConfirmationList.js

@@ -203,7 +203,7 @@ class IOUConfirmationList extends Component {
                 }));
 
             sections.push({
-                title: this.props.translate('common.to').toUpperCase(),
+                title: this.props.translate('common.to'),
                 data: formattedParticipants,
                 shouldShow: true,
                 indexOffset: 0,

src/components/OptionsList/BaseOptionsList.js

@@ -190,7 +190,7 @@ class BaseOptionsList extends Component {
                 // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
                 // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
                 <View style={styles.optionsListSectionHeader}>
-                    <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading, styles.textUppercase]}>
+                    <Text style={[styles.p5, styles.textLabelSupporting]}>
                         {title}
                     </Text>
                 </View>

src/components/RNTextInput.js

@@ -22,11 +22,6 @@ const RNTextInput = props => (
             }
             props.forwardedRef(ref);
         }}
-
-        // By default, align input to the left to override right alignment in RTL mode which is not yet supported in the App.
-        // eslint-disable-next-line react/jsx-props-no-multi-spaces
-        textAlign="left"
-
         // eslint-disable-next-line
         {...props}
     />

src/components/RoomHeaderAvatars.js

@@ -76,7 +76,7 @@ const RoomHeaderAvatars = (props) => {
                             <>
                                 <View
                                     style={[
-                                        styles.roomHeaderAvatar,
+                                        ...iconStyle,
                                         styles.roomHeaderAvatarOverlay,
                                     ]}
                                 />

src/components/TestToolMenu.js

@@ -37,7 +37,7 @@ const defaultProps = {
 
 const TestToolMenu = props => (
     <>
-        <Text style={[styles.formLabel]} numberOfLines={1}>
+        <Text style={[styles.textLabelSupporting, styles.mb2, styles.mt6]} numberOfLines={1}>
             Test Preferences
         </Text>
 

src/components/TextInput/BaseTextInput.js

@@ -285,7 +285,10 @@ class BaseTextInput extends Component {
                                             (!hasLabel || this.props.multiline) && styles.pv0,
                                             this.props.prefixCharacter && StyleUtils.getPaddingLeft(this.state.prefixWidth + styles.pl1.paddingLeft),
                                             this.props.secureTextEntry && styles.secureInput,
-                                            !this.props.multiline && {height: this.state.height},
+
+                                            // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
+                                            // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
+                                            !this.props.multiline && {height: this.state.height, lineHeight: undefined},
                                         ]}
                                         multiline={this.props.multiline}
                                         maxLength={this.props.maxLength}

src/languages/en.js

@@ -146,13 +146,13 @@ export default {
         openLinkInBrowser: 'open this link in your browser',
     },
     iOUConfirmationList: {
-        whoPaid: 'WHO PAID?',
-        whoWasThere: 'WHO WAS THERE?',
+        whoPaid: 'Who paid?',
+        whoWasThere: 'Who was there?',
         whatsItFor: 'What\'s it for?',
     },
     iOUCurrencySelection: {
         selectCurrency: 'Select a currency',
-        allCurrencies: 'ALL CURRENCIES',
+        allCurrencies: 'All currencies',
     },
     optionsSelector: {
         nameEmailOrPhoneNumber: 'Name, email, or phone number',
@@ -239,11 +239,11 @@ export default {
         fabAction: 'New chat',
         newChat: 'New chat',
         newGroup: 'New group',
-        newRoom: 'New Room',
+        newRoom: 'New room',
         headerChat: 'Chats',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
-        fabNewChat: 'New chat(Floating Action)',
+        fabNewChat: 'New chat (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
     },
@@ -385,6 +385,7 @@ export default {
             phrase3: 'and',
             phrase4: 'privacy policy',
         },
+        help: 'Help',
     },
     closeAccountPage: {
         closeAccount: 'Close account',
@@ -979,6 +980,7 @@ export default {
         chatWithConcierge: 'Chat with Concierge',
         requestSetupCall: 'Request a setup call',
         questionMarkButtonTooltip: 'Get assistance from our team',
+        exploreHelpDocs: 'Explore help docs',
     },
     requestCallPage: {
         title: 'Request a call',
@@ -1027,12 +1029,12 @@ export default {
         },
     },
     newRoomPage: {
-        newRoom: 'New Room',
-        roomName: 'Room Name',
+        newRoom: 'New room',
+        roomName: 'Room name',
         visibility: 'Visibility',
         restrictedDescription: 'People in your workspace can find this room',
         privateDescription: 'People invited to this room can find it',
-        createRoom: 'Create Room',
+        createRoom: 'Create room',
         roomAlreadyExistsError: 'A room with this name already exists',
         roomNameReservedError: 'A room on this workspace already uses this name',
         roomNameInvalidError: 'Room names can only contain letters, numbers and hyphens',
@@ -1051,11 +1053,11 @@ export default {
         generatingPDF: 'We\'re generating your PDF right now. Please come back later!',
     },
     keyboardShortcutModal: {
-        title: 'Keyboard Shortcuts',
+        title: 'Keyboard shortcuts',
         subtitle: 'Save time with these handy keyboard shortcuts:',
         shortcuts: {
             openShortcutDialog: 'Opens the keyboard shortcuts dialog',
-            escape: 'Escape Dialogs',
+            escape: 'Escape dialogs',
             search: 'Open search dialog',
             newGroup: 'New group screen',
             copy: 'Copy comment',