Merge branch 'main' into fix/10632-when-long-press-on-message-add-spa…

…ce-for-image-squashed-commits

android/app/build.gradle

@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009007802
-        versionName "9.0.78-2"
+        versionCode 1009007905
+        versionName "9.0.79-5"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.78</string>
+	<string>9.0.79</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.79.5</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.78</string>
+	<string>9.0.79</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.79.5</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.78</string>
+	<string>9.0.79</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.79.5</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.0.78-2",
+  "version": "9.0.79-5",
   "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.",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
-    "@expensify/react-native-live-markdown": "0.1.209",
+    "@expensify/react-native-live-markdown": "0.1.210",
     "@expo/metro-runtime": "~3.2.3",
     "@firebase/app": "^0.10.10",
     "@firebase/performance": "^0.6.8",

src/components/AmountTextInput.tsx

@@ -39,7 +39,7 @@ type AmountTextInputProps = {
 
     /** Hide the focus styles on TextInput */
     hideFocusedState?: boolean;
-} & Pick<BaseTextInputProps, 'autoFocus'>;
+} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace'>;
 
 function AmountTextInput(
     {

src/components/EmptySelectionListContent.tsx

@@ -48,7 +48,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
     );
 
     return (
-        <ScrollView>
+        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
             <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
                 <BlockingView
                     icon={Illustrations.ToddWithPhones}

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -48,9 +48,9 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID || -1}`);
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
-    const isActiveWorkspaceChat = ReportUtils.isPolicyExpenseChat(report) && report?.isOwnPolicyExpenseChat && activePolicyID === report?.policyID;
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const session = useSession();
+    const isActiveWorkspaceChat = ReportUtils.isPolicyExpenseChat(report) && activePolicyID === report?.policyID && session?.accountID === report?.ownerAccountID;
     const isOnboardingGuideAssigned = introSelected?.choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
 

src/components/MagicCodeInput.tsx

@@ -114,44 +114,52 @@ function MagicCodeInput(
 ) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const inputRefs = useRef<BaseTextInputRef | null>();
+    const inputRef = useRef<BaseTextInputRef | null>();
     const [input, setInput] = useState(TEXT_INPUT_EMPTY_STATE);
     const [focusedIndex, setFocusedIndex] = useState<number | undefined>(0);
-    const [editIndex, setEditIndex] = useState(0);
+    const editIndex = useRef(0);
     const [wasSubmitted, setWasSubmitted] = useState(false);
     const shouldFocusLast = useRef(false);
     const inputWidth = useRef(0);
     const lastFocusedIndex = useRef(0);
     const lastValue = useRef<string | number>(TEXT_INPUT_EMPTY_STATE);
+    const valueRef = useRef(value);
 
     useEffect(() => {
         lastValue.current = input.length;
     }, [input]);
 
+    useEffect(() => {
+        // Note: there are circumstances where the value state isn't updated yet
+        // when e.g. onChangeText gets called the next time. In those cases its safer to access the value from a ref
+        // to not have outdated values.
+        valueRef.current = value;
+    }, [value]);
+
     const blurMagicCodeInput = () => {
-        inputRefs.current?.blur();
+        inputRef.current?.blur();
         setFocusedIndex(undefined);
     };
 
     const focusMagicCodeInput = () => {
         setFocusedIndex(0);
         lastFocusedIndex.current = 0;
-        setEditIndex(0);
-        inputRefs.current?.focus();
+        editIndex.current = 0;
+        inputRef.current?.focus();
     };
 
     const setInputAndIndex = (index: number) => {
         setInput(TEXT_INPUT_EMPTY_STATE);
         setFocusedIndex(index);
-        setEditIndex(index);
+        editIndex.current = index;
     };
 
     useImperativeHandle(ref, () => ({
         focus() {
             focusMagicCodeInput();
         },
         focusLastSelected() {
-            inputRefs.current?.focus();
+            inputRef.current?.focus();
         },
         resetFocus() {
             setInput(TEXT_INPUT_EMPTY_STATE);
@@ -160,7 +168,7 @@ function MagicCodeInput(
         clear() {
             lastFocusedIndex.current = 0;
             setInputAndIndex(0);
-            inputRefs.current?.focus();
+            inputRef.current?.focus();
             onChangeTextProp('');
         },
         blur() {
@@ -219,7 +227,7 @@ function MagicCodeInput(
             // TapGestureHandler works differently on mobile web and native app
             // On web gesture handler doesn't block interactions with textInput below so there is no need to run `focus()` manually
             if (!Browser.isMobileChrome() && !Browser.isMobileSafari()) {
-                inputRefs.current?.focus();
+                inputRef.current?.focus();
             }
             setInputAndIndex(index);
             lastFocusedIndex.current = index;
@@ -231,6 +239,12 @@ function MagicCodeInput(
      * the focused input on the next empty one, if exists.
      * It handles both fast typing and only one digit at a time
      * in a specific position.
+     *
+     * Note: this works under the assumption that the backing text input will always have a cleared text,
+     * and entering text will exactly call onChangeText with one new character/digit.
+     * When the OS is inserting one time passwords for example it will call this method successively with one more digit each time.
+     * Thus, this method relies on an internal value ref to make sure to always use the latest value (as state updates are async, and
+     * might happen later than the next call to onChangeText).
      */
     const onChangeText = (textValue?: string) => {
         if (!textValue?.length || !ValidationUtils.isNumeric(textValue)) {
@@ -249,16 +263,17 @@ function MagicCodeInput(
         const numbersArr = addedValue
             .trim()
             .split('')
-            .slice(0, maxLength - editIndex);
-        const updatedFocusedIndex = Math.min(editIndex + (numbersArr.length - 1) + 1, maxLength - 1);
+            .slice(0, maxLength - editIndex.current);
+        const updatedFocusedIndex = Math.min(editIndex.current + (numbersArr.length - 1) + 1, maxLength - 1);
 
-        let numbers = decomposeString(value, maxLength);
-        numbers = [...numbers.slice(0, editIndex), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex, maxLength)];
+        let numbers = decomposeString(valueRef.current, maxLength);
+        numbers = [...numbers.slice(0, editIndex.current), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex.current, maxLength)];
 
         setInputAndIndex(updatedFocusedIndex);
 
         const finalInput = composeToString(numbers);
         onChangeTextProp(finalInput);
+        valueRef.current = finalInput;
     };
 
     /**
@@ -275,12 +290,13 @@ function MagicCodeInput(
             // If keyboard is disabled and no input is focused we need to remove
             // the last entered digit and focus on the correct input
             if (isDisableKeyboard && focusedIndex === undefined) {
-                const indexBeforeLastEditIndex = editIndex === 0 ? editIndex : editIndex - 1;
+                const curEditIndex = editIndex.current;
+                const indexBeforeLastEditIndex = curEditIndex === 0 ? curEditIndex : curEditIndex - 1;
 
-                const indexToFocus = numbers.at(editIndex) === CONST.MAGIC_CODE_EMPTY_CHAR ? indexBeforeLastEditIndex : editIndex;
+                const indexToFocus = numbers.at(curEditIndex) === CONST.MAGIC_CODE_EMPTY_CHAR ? indexBeforeLastEditIndex : curEditIndex;
                 if (indexToFocus !== undefined) {
                     lastFocusedIndex.current = indexToFocus;
-                    inputRefs.current?.focus();
+                    inputRef.current?.focus();
                 }
                 onChangeTextProp(value.substring(0, indexToFocus));
 
@@ -292,7 +308,7 @@ function MagicCodeInput(
             if (focusedIndex !== undefined && numbers?.at(focusedIndex) !== CONST.MAGIC_CODE_EMPTY_CHAR) {
                 setInput(TEXT_INPUT_EMPTY_STATE);
                 numbers = [...numbers.slice(0, focusedIndex), CONST.MAGIC_CODE_EMPTY_CHAR, ...numbers.slice(focusedIndex + 1, maxLength)];
-                setEditIndex(focusedIndex);
+                editIndex.current = focusedIndex;
                 onChangeTextProp(composeToString(numbers));
                 return;
             }
@@ -318,17 +334,17 @@ function MagicCodeInput(
 
             if (newFocusedIndex !== undefined) {
                 lastFocusedIndex.current = newFocusedIndex;
-                inputRefs.current?.focus();
+                inputRef.current?.focus();
             }
         }
         if (keyValue === 'ArrowLeft' && focusedIndex !== undefined) {
             const newFocusedIndex = Math.max(0, focusedIndex - 1);
             setInputAndIndex(newFocusedIndex);
-            inputRefs.current?.focus();
+            inputRef.current?.focus();
         } else if (keyValue === 'ArrowRight' && focusedIndex !== undefined) {
             const newFocusedIndex = Math.min(focusedIndex + 1, maxLength - 1);
             setInputAndIndex(newFocusedIndex);
-            inputRefs.current?.focus();
+            inputRef.current?.focus();
         } else if (keyValue === 'Enter') {
             // We should prevent users from submitting when it's offline.
             if (isOffline) {
@@ -340,7 +356,7 @@ function MagicCodeInput(
             const newFocusedIndex = (event as unknown as KeyboardEvent).shiftKey ? focusedIndex - 1 : focusedIndex + 1;
             if (newFocusedIndex >= 0 && newFocusedIndex < maxLength) {
                 setInputAndIndex(newFocusedIndex);
-                inputRefs.current?.focus();
+                inputRef.current?.focus();
                 if (event?.preventDefault) {
                     event.preventDefault();
                 }
@@ -383,7 +399,7 @@ function MagicCodeInput(
                             onLayout={(e) => {
                                 inputWidth.current = e.nativeEvent.layout.width;
                             }}
-                            ref={(inputRef) => (inputRefs.current = inputRef)}
+                            ref={(newRef) => (inputRef.current = newRef)}
                             autoFocus={autoFocus}
                             inputMode="numeric"
                             textContentType="oneTimeCode"

src/components/MoneyRequestAmountInput.tsx

@@ -12,6 +12,7 @@ import CONST from '@src/CONST';
 import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused';
 import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
+import type {TextInputWithCurrencySymbolProps} from './TextInputWithCurrencySymbol/types';
 
 type CurrentMoney = {amount: string; currency: string};
 
@@ -91,7 +92,7 @@ type MoneyRequestAmountInputProps = {
 
     /** The width of inner content */
     contentWidth?: number;
-};
+} & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace'>;
 
 type Selection = {
     start: number;
@@ -126,6 +127,7 @@ function MoneyRequestAmountInput(
         hideFocusedState = true,
         shouldKeepUserInput = false,
         autoGrow = true,
+        autoGrowExtraSpace,
         contentWidth,
         ...props
     }: MoneyRequestAmountInputProps,
@@ -289,6 +291,7 @@ function MoneyRequestAmountInput(
     return (
         <TextInputWithCurrencySymbol
             autoGrow={autoGrow}
+            autoGrowExtraSpace={autoGrowExtraSpace}
             disableKeyboard={disableKeyboard}
             formattedAmount={formattedAmount}
             onChangeAmount={setNewAmount}

src/components/ProductTrainingContext/index.tsx

@@ -205,8 +205,8 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     ]);
 
     const shouldShowProductTrainingTooltip = useMemo(() => {
-        return shouldRenderTooltip(tooltipName);
-    }, [shouldRenderTooltip, tooltipName]);
+        return shouldShow && shouldRenderTooltip(tooltipName);
+    }, [shouldRenderTooltip, tooltipName, shouldShow]);
 
     const hideProductTrainingTooltip = useCallback(() => {
         const tooltip = TOOLTIPS[tooltipName];

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -75,9 +75,9 @@ function MoneyRequestPreviewContent({
     const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || CONST.DEFAULT_NUMBER_ID}`);
     const [session] = useOnyx(ONYXKEYS.SESSION);
-    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID || CONST.DEFAULT_NUMBER_ID}`);
 
     const policy = PolicyUtils.getPolicy(iouReport?.policyID);
     const isMoneyRequestAction = ReportActionsUtils.isMoneyRequestAction(action);