Fixed conflicts.

.github/ISSUE_TEMPLATE/DesignDoc.md

@@ -27,6 +27,7 @@ labels: Daily, NewFeature
 - [ ] Confirm that the doc has the minimum necessary number of reviews before proceeding
 - [ ] Email `strategy@expensify.com` one last time to let them know the Design Doc is moving into the implementation phase
 - [ ] Implement the changes
+- [ ] Add regression tests so that QA can test your feature with every deploy ([instructions](https://stackoverflowteams.com/c/expensify/questions/363))
 - [ ] Send out a follow up email to `strategy@expensify.com` once everything has been implemented and do a **Project Wrap-Up** retrospective that provides:
     - Summary of what we accomplished with this project
     - What went well?

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001036300
-        versionName "1.3.63-0"
+        versionCode 1001036601
+        versionName "1.3.66-1"
     }
 
     flavorDimensions "default"

fastlane/Fastfile

@@ -224,11 +224,11 @@ platform :ios do
               contact_phone: ENV["APPLE_CONTACT_PHONE"],
               demo_account_name: ENV["APPLE_DEMO_EMAIL"],
               demo_account_password: ENV["APPLE_DEMO_PASSWORD"],
-              notes: "1. Log into the Expensify app using the provided email
-                      2. Now, you have to log in to this gmail account on https://mail.google.com/ so you can retrieve a One-Time-Password
-                      3. To log in to the gmail account, use the password above (That's NOT a password for the Expensify app but for the Gmail account)
-                      4. At the Gmail inbox, you should have received a one-time 6 digit magic code
-                      5. Use that to sign in"
+              notes: "1. In the Expensify app, enter the email 'appletest.expensify@proton.me'. This will trigger a sign-in link to be sent to 'appletest.expensify@proton.me'
+                      2. Navigate to https://account.proton.me/login, log into Proton Mail using 'appletest.expensify@proton.me' as email and the password associated with 'appletest.expensify@proton.me', provided above
+                      3. Once logged into Proton Mail, navigate to your inbox and locate the email triggered in step 1. The email subject should be 'Your magic sign-in link for Expensify'
+                      4. Open the email and copy the 6-digit sign-in code provided within
+                      5. Return to the Expensify app and enter the copied 6-digit code in the designated login field"
           }
       )
     rescue Exception => e

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.63</string>
+	<string>1.3.66</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.63.0</string>
+	<string>1.3.66.1</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.63</string>
+	<string>1.3.66</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.63.0</string>
+	<string>1.3.66.1</string>
 </dict>
 </plist>

ios/Podfile.lock

@@ -591,7 +591,7 @@ PODS:
     - React-Core
   - react-native-pager-view (6.2.0):
     - React-Core
-  - react-native-pdf (6.6.2):
+  - react-native-pdf (6.7.1):
     - React-Core
   - react-native-performance (4.0.0):
     - React-Core
@@ -1254,7 +1254,7 @@ SPEC CHECKSUMS:
   react-native-key-command: c2645ec01eb1fa664606c09480c05cb4220ef67b
   react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
-  react-native-pdf: 33c622cbdf776a649929e8b9d1ce2d313347c4fa
+  react-native-pdf: 7c0e91ada997bac8bac3bb5bea5b6b81f5a3caae
   react-native-performance: 224bd53e6a835fda4353302cf891d088a0af7406
   react-native-plaid-link-sdk: 9eb0f71dad94b3bdde649c7a384cba93024af46c
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.63-0",
+  "version": "1.3.66-1",
   "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.",
@@ -125,7 +125,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.70",
+    "react-native-onyx": "1.0.72",
     "react-native-pager-view": "^6.2.0",
     "react-native-pdf": "^6.7.1",
     "react-native-performance": "^4.0.0",

src/CONST.ts

@@ -452,7 +452,7 @@ const CONST = {
     },
     RECEIPT: {
         ICON_SIZE: 164,
-        PERMISSION_AUTHORIZED: 'authorized',
+        PERMISSION_GRANTED: 'granted',
         HAND_ICON_HEIGHT: 152,
         HAND_ICON_WIDTH: 200,
         SHUTTER_SIZE: 90,

src/components/DistanceRequest.js

@@ -37,6 +37,7 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import {iouPropTypes} from '../pages/iou/propTypes';
 import reportPropTypes from '../pages/reportPropTypes';
 import * as IOU from '../libs/actions/IOU';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
@@ -131,8 +132,8 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     );
 
     // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
-    const halfMenuItemHeight = Math.floor(variables.baseMenuItemHeight / 2);
-    const scrollContainerMaxHeight = variables.baseMenuItemHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
+    const halfMenuItemHeight = Math.floor(variables.optionRowHeight / 2);
+    const scrollContainerMaxHeight = variables.optionRowHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
 
     useEffect(() => {
         MapboxToken.init();
@@ -163,7 +164,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 
     return (
-        <ScrollView contentContainerStyle={styles.flex1}>
+        <ScrollView contentContainerStyle={styles.flexGrow1}>
             <View
                 style={styles.distanceRequestContainer(scrollContainerMaxHeight)}
                 onLayout={(event = {}) => setScrollContainerHeight(lodashGet(event, 'nativeEvent.layout.height', 0))}
@@ -176,7 +177,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                         setScrollContentHeight(height);
                     }}
                     onScroll={updateGradientVisibility}
-                    scrollEventThrottle={16}
+                    scrollEventThrottle={variables.distanceScrollEventThrottle}
                     ref={scrollViewRef}
                 >
                     {_.map(waypoints, (waypoint, key) => {
@@ -212,7 +213,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 {shouldShowGradient && (
                     <LinearGradient
                         style={[styles.pAbsolute, styles.b0, styles.l0, styles.r0, {height: halfMenuItemHeight}]}
-                        colors={[theme.transparent, theme.modalBackground]}
+                        colors={[StyleUtils.getTransparentColor(theme.modalBackground), theme.modalBackground]}
                     />
                 )}
                 {hasRouteError && (

src/components/DownloadAppModal.js

@@ -26,13 +26,13 @@ const defaultProps = {
 };
 
 function DownloadAppModal({isAuthenticated, showDownloadAppBanner}) {
-    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && isAuthenticated && showDownloadAppBanner);
+    const [shouldShowBanner, setShouldShowBanner] = useState(Browser.isMobile() && isAuthenticated && showDownloadAppBanner);
 
     const {translate} = useLocalize();
 
     const handleCloseBanner = () => {
         setShowDownloadAppModal(false);
-        setshouldShowBanner(false);
+        setShouldShowBanner(false);
     };
 
     let link = '';
@@ -44,6 +44,8 @@ function DownloadAppModal({isAuthenticated, showDownloadAppBanner}) {
     }
 
     const handleOpenAppStore = () => {
+        setShowDownloadAppModal(false);
+        setShouldShowBanner(false);
         Link.openExternalLink(link, true);
     };
 

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -65,7 +65,6 @@ class EmojiPickerMenu extends Component {
 
         this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300);
         this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this);
-        this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
         this.setupEventHandlers = this.setupEventHandlers.bind(this);
         this.cleanupEventHandlers = this.cleanupEventHandlers.bind(this);
         this.renderItem = this.renderItem.bind(this);
@@ -76,7 +75,6 @@ class EmojiPickerMenu extends Component {
         this.getItemLayout = this.getItemLayout.bind(this);
         this.scrollToHeader = this.scrollToHeader.bind(this);
 
-        this.currentScrollOffset = 0;
         this.firstNonHeaderIndex = 0;
 
         const {filteredEmojis, headerEmojis, headerRowIndices} = this.getEmojisAndHeaderRowIndices();
@@ -299,9 +297,9 @@ class EmojiPickerMenu extends Component {
                 return;
             }
 
-            // Blur the input and change the highlight type to keyboard
+            // Blur the input, change the highlight type to keyboard, and disable pointer events
             this.searchInput.blur();
-            this.setState({isUsingKeyboardMovement: true});
+            this.setState({isUsingKeyboardMovement: true, arePointerEventsDisabled: true});
 
             // We only want to hightlight the Emoji if none was highlighted already
             // If we already have a highlighted Emoji, lets just skip the first navigation
@@ -311,10 +309,9 @@ class EmojiPickerMenu extends Component {
         }
 
         // If nothing is highlighted and an arrow key is pressed
-        // select the first emoji
+        // select the first emoji, apply keyboard movement styles, and disable pointer events
         if (this.state.highlightedIndex === -1) {
-            this.setState({highlightedIndex: this.firstNonHeaderIndex});
-            this.scrollToHighlightedIndex();
+            this.setState({highlightedIndex: this.firstNonHeaderIndex, isUsingKeyboardMovement: true, arePointerEventsDisabled: true});
             return;
         }
 
@@ -368,10 +365,9 @@ class EmojiPickerMenu extends Component {
                 break;
         }
 
-        // Actually highlight the new emoji, apply keyboard movement styles, and scroll to it if the index was changed
+        // Actually highlight the new emoji, apply keyboard movement styles, and disable pointer events
         if (newIndex !== this.state.highlightedIndex) {
-            this.setState({highlightedIndex: newIndex, isUsingKeyboardMovement: true});
-            this.scrollToHighlightedIndex();
+            this.setState({highlightedIndex: newIndex, isUsingKeyboardMovement: true, arePointerEventsDisabled: true});
         }
     }
 
@@ -381,36 +377,6 @@ class EmojiPickerMenu extends Component {
         this.emojiList.scrollToOffset({offset: calculatedOffset, animated: true});
     }
 
-    /**
-     * Calculates the required scroll offset (aka distance from top) and scrolls the FlatList to the highlighted emoji
-     * if any portion of it falls outside of the window.
-     * Doing this because scrollToIndex doesn't work as expected.
-     */
-    scrollToHighlightedIndex() {
-        // Calculate the number of rows above the current row, then add 1 to include the current row
-        const numRows = Math.floor(this.state.highlightedIndex / CONST.EMOJI_NUM_PER_ROW) + 1;
-
-        // The scroll offsets at the top and bottom of the highlighted emoji
-        const offsetAtEmojiBottom = numRows * CONST.EMOJI_PICKER_HEADER_HEIGHT;
-        const offsetAtEmojiTop = offsetAtEmojiBottom - CONST.EMOJI_PICKER_ITEM_HEIGHT;
-
-        // Scroll to fit the entire highlighted emoji into the window if we need to
-        let targetOffset = this.currentScrollOffset;
-        if (offsetAtEmojiBottom - this.currentScrollOffset >= CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT) {
-            targetOffset = offsetAtEmojiBottom - CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT;
-        } else if (offsetAtEmojiTop - CONST.EMOJI_PICKER_HEADER_HEIGHT <= this.currentScrollOffset) {
-            // There is always a sticky header on the top, subtract the EMOJI_PICKER_HEADER_HEIGHT from offsetAtEmojiTop to get the correct scroll position.
-            targetOffset = offsetAtEmojiTop - CONST.EMOJI_PICKER_HEADER_HEIGHT;
-        }
-        if (targetOffset !== this.currentScrollOffset) {
-            // Disable pointer events so that onHover doesn't get triggered when the items move while we're scrolling
-            if (!this.state.arePointerEventsDisabled) {
-                this.setState({arePointerEventsDisabled: true});
-            }
-            this.emojiList.scrollToOffset({offset: targetOffset, animated: false});
-        }
-    }
-
     /**
      * Filter the entire list of emojis to only emojis that have the search term in their keywords
      *
@@ -530,6 +496,7 @@ class EmojiPickerMenu extends Component {
         return (
             <View
                 style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
+                // Disable pointer events so that onHover doesn't get triggered when the items move while we're scrolling
                 pointerEvents={this.state.arePointerEventsDisabled ? 'none' : 'auto'}
             >
                 <View style={[styles.ph4, styles.pb3, styles.pt2]}>
@@ -566,10 +533,11 @@ class EmojiPickerMenu extends Component {
                         {overscrollBehaviorY: 'contain'},
                         // Set overflow to hidden to prevent elastic scrolling when there are not enough contents to scroll in FlatList
                         {overflowY: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'},
+                        // Set scrollPaddingTop to consider sticky headers while scrolling
+                        {scrollPaddingTop: isFiltered ? 0 : CONST.EMOJI_PICKER_ITEM_HEIGHT},
                     ]}
                     extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}
                     stickyHeaderIndices={this.state.headerIndices}
-                    onScroll={(e) => (this.currentScrollOffset = e.nativeEvent.contentOffset.y)}
                     getItemLayout={this.getItemLayout}
                     contentContainerStyle={styles.flexGrow1}
                     ListEmptyComponent={<Text style={[styles.textLabel, styles.colorMuted]}>{this.props.translate('common.noResultsFound')}</Text>}

src/components/EmojiPicker/EmojiPickerMenuItem/index.js

@@ -42,13 +42,14 @@ class EmojiPickerMenuItem extends PureComponent {
         super(props);
 
         this.ref = null;
+        this.focusAndScroll = this.focusAndScroll.bind(this);
     }
 
     componentDidMount() {
         if (!this.props.isFocused) {
             return;
         }
-        this.ref.focus();
+        this.focusAndScroll();
     }
 
     componentDidUpdate(prevProps) {
@@ -58,7 +59,12 @@ class EmojiPickerMenuItem extends PureComponent {
         if (!this.props.isFocused) {
             return;
         }
-        this.ref.focus();
+        this.focusAndScroll();
+    }
+
+    focusAndScroll() {
+        this.ref.focus({preventScroll: true});
+        this.ref.scrollIntoView({block: 'nearest'});
     }
 
     render() {