Merge branch 'Expensify:main' into arrow-feature-signed

.github/workflows/testBuild.yml

@@ -267,6 +267,6 @@ jobs:
           | ![Android](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${{fromJson(steps.set_var.outputs.android_paths).html_path}}) | ![iOS](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${{fromJson(steps.set_var.outputs.ios_paths).html_path}}) |
           | desktop :computer: | web :spider_web: |
           | https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/$PULL_REQUEST_NUMBER/NewExpensify.dmg | https://$PULL_REQUEST_NUMBER.pr-testing.expensify.com |
-          | ![desktop](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/$PULL_REQUEST_NUMBER/NewExpensify.dmg) | ![web](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://$(PULL_REQUEST_NUMBER).pr-testing.expensify.com) |"
+          | ![desktop](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/$PULL_REQUEST_NUMBER/NewExpensify.dmg) | ![web](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://$PULL_REQUEST_NUMBER.pr-testing.expensify.com) |"
         env:
           GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }}

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001024103
-        versionName "1.2.41-3"
+        versionCode 1001024201
+        versionName "1.2.42-1"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

android/app/src/main/java/com/expensify/chat/customairshipextender/CustomNotificationProvider.java

@@ -1,5 +1,10 @@
 package com.expensify.chat.customairshipextender;
 
+import static androidx.core.app.NotificationCompat.PRIORITY_MAX;
+
+import android.app.NotificationChannel;
+import android.app.NotificationChannelGroup;
+import android.app.NotificationManager;
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
@@ -8,11 +13,13 @@
 import android.graphics.Bitmap.Config;
 import android.graphics.PorterDuffXfermode;
 import android.graphics.PorterDuff.Mode;
+import android.os.Build;
 import android.util.DisplayMetrics;
 import android.util.Log;
 import android.util.TypedValue;
 import android.view.WindowManager;
 import androidx.annotation.NonNull;
+import androidx.annotation.RequiresApi;
 import androidx.core.app.NotificationCompat;
 import androidx.core.app.NotificationManagerCompat;
 import androidx.core.app.Person;
@@ -48,6 +55,12 @@ public class CustomNotificationProvider extends ReactNotificationProvider {
     // Logging
     private static final String TAG = "NotificationProvider";
 
+    // Define notification channel
+    public static final String CHANNEL_MESSAGES_ID = "CHANNEL_MESSAGES";
+    public static final String CHANNEL_MESSAGES_NAME = "Message Notifications";
+    public static final String CHANNEL_GROUP_ID = "CHANNEL_GROUP_CHATS";
+    public static final String CHANNEL_GROUP_NAME = "Chats";
+
     // Conversation JSON keys
     private static final String PAYLOAD_KEY = "payload";
     private static final String TYPE_KEY = "type";
@@ -58,6 +71,9 @@ public class CustomNotificationProvider extends ReactNotificationProvider {
 
     public CustomNotificationProvider(@NonNull Context context, @NonNull AirshipConfigOptions configOptions) {
         super(context, configOptions);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            createAndRegisterNotificationChannel(context);
+        }
     }
 
     @NonNull
@@ -66,6 +82,13 @@ protected NotificationCompat.Builder onExtendBuilder(@NonNull Context context, @
         super.onExtendBuilder(context, builder, arguments);
         PushMessage message = arguments.getMessage();
 
+        // Configure the notification channel or priority to ensure it shows in foreground
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            builder.setChannelId(CHANNEL_MESSAGES_ID);
+        } else {
+            builder.setPriority(PRIORITY_MAX);
+        }
+
         if (message.containsKey(PAYLOAD_KEY)) {
             try {
                 JsonMap payload = JsonValue.parseString(message.getExtra(PAYLOAD_KEY)).optMap();
@@ -82,6 +105,17 @@ protected NotificationCompat.Builder onExtendBuilder(@NonNull Context context, @
         return builder;
     }
 
+    @RequiresApi(api = Build.VERSION_CODES.O)
+    private void createAndRegisterNotificationChannel(@NonNull Context context) {
+        NotificationChannelGroup channelGroup = new NotificationChannelGroup(CHANNEL_GROUP_ID, CHANNEL_GROUP_NAME);
+        NotificationChannel channel = new NotificationChannel(CHANNEL_MESSAGES_ID, CHANNEL_MESSAGES_NAME, NotificationManager.IMPORTANCE_HIGH);
+        channel.setGroup(CHANNEL_GROUP_ID);
+
+        NotificationManager notificationManager = context.getSystemService(NotificationManager.class);
+        notificationManager.createNotificationChannelGroup(channelGroup);
+        notificationManager.createNotificationChannel(channel);
+    }
+
     /**
      * Creates a canvas to draw a circle and then draws the bitmap avatar within that circle
      * to clip off the area of the bitmap outside the circular path and returns a circular

docs/README.md

@@ -41,6 +41,14 @@ ln -sf universal-darwin22 universal-darwin21
     - _Note: If you see an error like `Unable to load the EventMachine C Extension...`, try running `gem uninstall eventmachine && bundle install`. If that doesn't work just removing the `--livereload` flag should work._
 1. Modify a `.html` or `.md` file and save your changes, and the browser should quickly auto-refresh.
 
+## Troubleshooting
+
+### Android Chrome emulator
+To visit the site on the Android emulator, go to `10.0.2.2:4000`.
+
+If you're getting an error page that says "Refused to connect", try running `adb reverse tcp:4000 tcp:4000` with your emulator open. 
+
+
 # How the project is structured
 
 The [docs](https://github.com/Expensify/App/tree/main/docs) folder will contain the following main folders:

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.41</string>
+	<string>1.2.42</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.41.3</string>
+	<string>1.2.42.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
@@ -65,8 +65,8 @@
 	</dict>
 	<key>NSCameraUsageDescription</key>
 	<string>Your camera is used to create chat attachments, documents, and facial capture.</string>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string>Your location is used to determine your default currency.</string>
+	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
+	<string>Your location is used to determine your default currency and timezone.</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Required for video capture</string>
 	<key>NSPhotoLibraryAddUsageDescription</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.41</string>
+	<string>1.2.42</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.41.3</string>
+	<string>1.2.42.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.41-3",
+  "version": "1.2.42-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.",

src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js

@@ -38,6 +38,7 @@ class CheckboxWithTooltipForMobileWebAndNative extends React.Component {
                 <Checkbox
                     isChecked={this.props.isChecked}
                     onPress={this.showGrowlOrTriggerOnPress}
+                    disabled={this.props.disabled}
                 />
             </View>
         );

src/components/CheckboxWithTooltip/checkboxWithTooltipPropTypes.js

@@ -22,6 +22,9 @@ const propTypes = {
     /** Container styles */
     style: stylePropTypes,
 
+    /** Wheter the checkbox is disabled */
+    disabled: PropTypes.bool,
+
     /** Props inherited from withWindowDimensions */
     ...windowDimensionsPropTypes,
 };

src/components/CheckboxWithTooltip/index.js

@@ -15,14 +15,15 @@ const CheckboxWithTooltip = (props) => {
                 onPress={props.onPress}
                 text={props.text}
                 toggleTooltip={props.toggleTooltip}
+                disabled={props.disabled}
             />
         );
     }
     const checkbox = (
         <Checkbox
             isChecked={props.isChecked}
             onPress={props.onPress}
-            disabled={props.toggleTooltip}
+            disabled={props.disabled}
         />
     );
     return (

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -101,6 +101,7 @@ class EmojiPickerMenu extends Component {
                 end: 0,
             },
             isFocused: false,
+            isUsingKeyboardMovement: false,
         };
     }
 
@@ -245,7 +246,10 @@ class EmojiPickerMenu extends Component {
             ) {
                 return;
             }
+
+            // Blur the input and change the highlight type to keyboard
             this.searchInput.blur();
+            this.setState({isUsingKeyboardMovement: 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
@@ -313,9 +317,9 @@ class EmojiPickerMenu extends Component {
                 break;
         }
 
-        // Actually highlight the new emoji and scroll to it if the index was changed
+        // Actually highlight the new emoji, apply keyboard movement styles, and scroll to it if the index was changed
         if (newIndex !== this.state.highlightedIndex) {
-            this.setState({highlightedIndex: newIndex});
+            this.setState({highlightedIndex: newIndex, isUsingKeyboardMovement: true});
             this.scrollToHighlightedIndex();
         }
     }
@@ -440,7 +444,7 @@ class EmojiPickerMenu extends Component {
         return (
             <EmojiPickerMenuItem
                 onPress={emoji => this.addToFrequentAndSelectEmoji(emoji, item)}
-                onHoverIn={() => this.setState({highlightedIndex: index})}
+                onHoverIn={() => this.setState({highlightedIndex: index, isUsingKeyboardMovement: false})}
                 onHoverOut={() => {
                     if (this.state.arePointerEventsDisabled) {
                         return;
@@ -449,6 +453,7 @@ class EmojiPickerMenu extends Component {
                 }}
                 emoji={emojiCode}
                 isHighlighted={index === this.state.highlightedIndex}
+                isUsingKeyboardMovement={this.state.isUsingKeyboardMovement}
             />
         );
     }
@@ -472,7 +477,7 @@ class EmojiPickerMenu extends Component {
                             autoFocus
                             selectTextOnFocus={this.state.selectTextOnFocus}
                             onSelectionChange={this.onSelectionChange}
-                            onFocus={() => this.setState({isFocused: true})}
+                            onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
                             onBlur={() => this.setState({isFocused: false})}
                         />
                     </View>

src/components/EmojiPicker/EmojiPickerMenuItem.js

@@ -21,6 +21,9 @@ const propTypes = {
 
     /** Whether this menu item is currently highlighted or not */
     isHighlighted: PropTypes.bool,
+
+    /** Whether the emoji is highlighted by the keyboard/mouse */
+    isUsingKeyboardMovement: PropTypes.bool,
 };
 
 const EmojiPickerMenuItem = props => (
@@ -32,7 +35,8 @@ const EmojiPickerMenuItem = props => (
             pressed,
         }) => ([
             StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-            props.isHighlighted ? styles.emojiItemHighlighted : {},
+            props.isHighlighted && props.isUsingKeyboardMovement ? styles.emojiItemKeyboardHighlighted : {},
+            props.isHighlighted && !props.isUsingKeyboardMovement ? styles.emojiItemHighlighted : {},
             styles.emojiItem,
         ])}
     >
@@ -46,6 +50,7 @@ EmojiPickerMenuItem.propTypes = propTypes;
 EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem';
 EmojiPickerMenuItem.defaultProps = {
     isHighlighted: false,
+    isUsingKeyboardMovement: false,
     onHoverIn: () => {},
     onHoverOut: () => {},
 };
@@ -55,5 +60,6 @@ EmojiPickerMenuItem.defaultProps = {
 export default React.memo(
     EmojiPickerMenuItem,
     (prevProps, nextProps) => prevProps.isHighlighted === nextProps.isHighlighted
-                                && prevProps.emoji === nextProps.emoji,
+        && prevProps.emoji === nextProps.emoji
+        && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
 );