Merge branch 'Expensify:main' into 37485-fix

.github/workflows/deployExpensifyHelp.yml

@@ -46,6 +46,7 @@ jobs:
       - name: Deploy to Cloudflare Pages
         uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca
         id: deploy
+        if: github.event_name != 'pull_request' || (github.event_name == 'pull_request' && !github.event.pull_request.head.repo.fork)
         with:
           apiToken: ${{ secrets.CLOUDFLARE_PAGES_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

docs/articles/new-expensify/chat/Introducing-Expensify-Chat.md

@@ -12,7 +12,7 @@ For a quick snapshot of how Expensify Chat works, and New Expensify in general,
 
 # What’s Expensify Chat?
 
-Expensify Chat is an instant messaging and payment platform. You can manage all your payments, wether for business or personal, and discuss the transactions themselves. 
+Expensify Chat is an instant messaging and payment platform. You can manage all your payments, whether for business or personal, and discuss the transactions themselves. 
 
 With Expensify Chat, you can start a conversation about that missing receipt your employee forgot to submit or chat about splitting that electric bill with your roommates. Expensify makes sending and receiving money as easy as sending and receiving messages. Chat with anyone directly, in groups, or in rooms. 
 

ios/Podfile.lock

@@ -39,7 +39,7 @@ PODS:
     - React-Core
   - Expo (50.0.4):
     - ExpoModulesCore
-  - ExpoImage (1.10.1):
+  - ExpoImage (1.11.0):
     - ExpoModulesCore
     - SDWebImage (~> 5.17.0)
     - SDWebImageAVIFCoder (~> 0.10.1)
@@ -1790,7 +1790,7 @@ SPEC CHECKSUMS:
   EXAV: 09a4d87fa6b113fbb0ada3aade6799f78271cb44
   EXImageLoader: 55080616b2fe9da19ef8c7f706afd9814e279b6b
   Expo: 1e3bcf9dd99de57a636127057f6b488f0609681a
-  ExpoImage: 1cdaa65a6a70bb01067e21ad1347ff2d973885f5
+  ExpoImage: 390c524542b258f8173f475c1cc71f016444a7be
   ExpoImageManipulator: c1d7cb865eacd620a35659f3da34c70531f10b59
   ExpoModulesCore: 96d1751929ad10622773bb729ab28a8423f0dd0c
   FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4
@@ -1921,7 +1921,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a
-  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
+  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: a431c146e1501391834a2f299a74093bac53b530
 

package.json

@@ -105,7 +105,7 @@
     "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#615f4a8662cd1abea9fdeee4d04847197c5e36ae",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
-    "expo-image": "1.10.1",
+    "expo-image": "1.11.0",
     "expo-image-manipulator": "11.8.0",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",

src/CONST.ts

@@ -359,6 +359,7 @@ const CONST = {
         NOT_INSTALLED: 'not-installed',
     },
     TAX_RATES: {
+        CUSTOM_NAME_MAX_LENGTH: 8,
         NAME_MAX_LENGTH: 50,
     },
     PLATFORM: {

src/components/AvatarWithImagePicker.tsx

@@ -287,11 +287,12 @@ function AvatarWithImagePicker({
 
     return (
         <View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
-            <View style={[styles.pRelative, avatarStyle]}>
+            <View style={styles.w100}>
                 <OfflineWithFeedback
                     pendingAction={pendingAction}
                     errors={errors}
                     errorRowStyles={errorRowStyles}
+                    style={type === CONST.ICON_TYPE_AVATAR && styles.alignItemsCenter}
                     onClose={onErrorClose}
                 >
                     <Tooltip
@@ -310,6 +311,7 @@ function AvatarWithImagePicker({
                             accessibilityLabel={translate('avatarWithImagePicker.editImage')}
                             disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
                             disabledStyle={disabledStyle}
+                            style={[styles.pRelative, avatarStyle]}
                             ref={anchorRef}
                         >
                             <View>

src/components/Form/FormWrapper.tsx

@@ -110,7 +110,7 @@ function FormWrapper({
                         buttonText={submitButtonText}
                         isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
                         isLoading={!!formState?.isLoading}
-                        message={typeof errorMessage === 'string' && isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
+                        message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -54,14 +54,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     const shouldShowGreenDotIndicator = !hasBrickError && ReportUtils.requiresAttentionFromCurrentUser(optionItem, optionItem.parentReportAction);
-
-    const isHidden = optionItem.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
-
-    const shouldOverrideHidden = hasBrickError || isFocused || optionItem.isPinned;
-    if (isHidden && !shouldOverrideHidden) {
-        return null;
-    }
-
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const textStyle = isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
     const textUnreadStyle = optionItem?.isUnread && optionItem.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.MUTE ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];

src/components/Lightbox/index.tsx

@@ -112,7 +112,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                 return;
             }
 
-            setContentSize({width: width * PixelRatio.get(), height: height * PixelRatio.get()});
+            setContentSize({width, height});
         },
         [contentSize, setContentSize],
     );

src/components/TaxPicker.tsx

@@ -53,10 +53,10 @@ function TaxPicker({selectedTaxRate = '', taxRates, insets, onSubmit}: TaxPicker
         ];
     }, [selectedTaxRate, getTaxName]);
 
-    const sections = useMemo(() => {
-        const taxRatesOptions = OptionsListUtils.getTaxRatesSection(taxRates, selectedOptions as OptionsListUtils.Category[], searchValue, selectedTaxRate);
-        return taxRatesOptions;
-    }, [taxRates, searchValue, selectedOptions, selectedTaxRate]);
+    const sections = useMemo(
+        () => OptionsListUtils.getTaxRatesSection(taxRates, selectedOptions as OptionsListUtils.Category[], searchValue, selectedTaxRate),
+        [taxRates, searchValue, selectedOptions, selectedTaxRate],
+    );
 
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(sections[0].data.length > 0, searchValue);
 

src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.js → src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx

@@ -1,44 +1,46 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
+import type {LayoutChangeEvent, ViewStyle} from 'react-native';
+import type {GestureStateChangeEvent, GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-const propTypes = {
-    duration: PropTypes.number.isRequired,
+type ProgressBarProps = {
+    /** Total duration of a video. */
+    duration: number;
 
-    position: PropTypes.number.isRequired,
+    /** Position of progress pointer on the bar. */
+    position: number;
 
-    seekPosition: PropTypes.func.isRequired,
+    /** Function to seek to a specific position in the video. */
+    seekPosition: (newPosition: number) => void;
 };
 
-const defaultProps = {};
-
-function getProgress(currentPosition, maxPosition) {
+function getProgress(currentPosition: number, maxPosition: number): number {
     return Math.min(Math.max((currentPosition / maxPosition) * 100, 0), 100);
 }
 
-function ProgressBar({duration, position, seekPosition}) {
+function ProgressBar({duration, position, seekPosition}: ProgressBarProps) {
     const styles = useThemeStyles();
     const {pauseVideo, playVideo, checkVideoPlaying} = usePlaybackContext();
     const [sliderWidth, setSliderWidth] = useState(1);
     const [isSliderPressed, setIsSliderPressed] = useState(false);
     const progressWidth = useSharedValue(0);
     const wasVideoPlayingOnCheck = useSharedValue(false);
 
-    const onCheckVideoPlaying = (isPlaying) => {
+    const onCheckVideoPlaying = (isPlaying: boolean) => {
         wasVideoPlayingOnCheck.value = isPlaying;
     };
 
-    const progressBarInteraction = (event) => {
+    const progressBarInteraction = (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload> | GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         const progress = getProgress(event.x, sliderWidth);
         progressWidth.value = progress;
         runOnJS(seekPosition)((progress * duration) / 100);
     };
 
-    const onSliderLayout = (e) => {
-        setSliderWidth(e.nativeEvent.layout.width);
+    const onSliderLayout = (event: LayoutChangeEvent) => {
+        setSliderWidth(event.nativeEvent.layout.width);
     };
 
     const pan = Gesture.Pan()
@@ -66,7 +68,7 @@ function ProgressBar({duration, position, seekPosition}) {
         progressWidth.value = getProgress(position, duration);
     }, [duration, isSliderPressed, position, progressWidth]);
 
-    const progressBarStyle = useAnimatedStyle(() => ({width: `${progressWidth.value}%`}));
+    const progressBarStyle: ViewStyle = useAnimatedStyle(() => ({width: `${progressWidth.value}%`}));
 
     return (
         <GestureDetector gesture={pan}>
@@ -85,8 +87,6 @@ function ProgressBar({duration, position, seekPosition}) {
     );
 }
 
-ProgressBar.propTypes = propTypes;
-ProgressBar.defaultProps = defaultProps;
 ProgressBar.displayName = 'ProgressBar';
 
 export default ProgressBar;