🍒 Cherry pick PR #36497 to staging 🍒

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001044109
-        versionName "1.4.41-9"
+        versionCode 1001044111
+        versionName "1.4.41-11"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.41.9</string>
+	<string>1.4.41.11</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.4.41.9</string>
+	<string>1.4.41.11</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.41</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.41.9</string>
+	<string>1.4.41.11</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.41-9",
+  "version": "1.4.41-11",
   "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/AmountForm.tsx

@@ -32,6 +32,9 @@ type AmountFormProps = {
 
     /** Fired when back button pressed, navigates to currency selection page */
     onCurrencyButtonPress?: () => void;
+
+    /** Whether the currency symbol is pressable */
+    isCurrencyPressable?: boolean;
 };
 
 /**
@@ -47,8 +50,13 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function AmountForm(
+<<<<<<< HEAD
     {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress}: AmountFormProps,
     forwardedRef: ForwardedRef<TextInput>,
+=======
+    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true}: AmountFormProps,
+    forwardedRef: ForwardedRef<BaseTextInputRef>,
+>>>>>>> af1026e (Merge pull request #36497 from shubham1206agra/fix-currency-ui)
 ) {
     const styles = useThemeStyles();
     const {toLocaleDigit, numberFormat} = useLocalize();
@@ -210,10 +218,11 @@ function AmountForm(
                         setSelection(e.nativeEvent.selection);
                     }}
                     onKeyPress={textInputKeyPress}
+                    isCurrencyPressable={isCurrencyPressable}
                 />
                 {!!errorText && (
                     <FormHelpMessage
-                        style={[styles.pAbsolute, styles.b0, styles.mb0, styles.w100]}
+                        style={[styles.pAbsolute, styles.b0, canUseTouchScreen ? styles.mb0 : styles.mb3, styles.ph5, styles.w100]}
                         isError
                         message={errorText}
                     />

src/components/CurrencySymbolButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,13 +16,16 @@ type CurrencySymbolButtonProps = {
 
     /** Function to call when currency button is pressed */
     onCurrencyButtonPress: () => void;
+
+    /** Whether the currency button is pressable or not */
+    isCurrencyPressable?: boolean;
 };
 
-function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}: CurrencySymbolButtonProps) {
+function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, isCurrencyPressable = true}: CurrencySymbolButtonProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
-    return (
+    return isCurrencyPressable ? (
         <Tooltip text={translate('common.selectCurrency')}>
             <PressableWithoutFeedback
                 onPress={onCurrencyButtonPress}
@@ -37,6 +41,10 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}: CurrencyS
                 <Text style={styles.iouAmountText}>{currencySymbol}</Text>
             </PressableWithoutFeedback>
         </Tooltip>
+    ) : (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+            <Text style={styles.iouAmountText}>{currencySymbol}</Text>
+        </View>
     );
 }
 

src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import AmountTextInput from '@components/AmountTextInput';
+import CurrencySymbolButton from '@components/CurrencySymbolButton';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
+import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types';
+import type TextInputWithCurrencySymbolProps from './types';
+
+function BaseTextInputWithCurrencySymbol(
+    {
+        selectedCurrencyCode,
+        onCurrencyButtonPress = () => {},
+        onChangeAmount = () => {},
+        formattedAmount,
+        placeholder,
+        selection,
+        onSelectionChange = () => {},
+        onKeyPress = () => {},
+        isCurrencyPressable = true,
+    }: TextInputWithCurrencySymbolProps,
+    ref: React.ForwardedRef<BaseTextInputRef>,
+) {
+    const {fromLocaleDigit} = useLocalize();
+    const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(selectedCurrencyCode);
+    const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(selectedCurrencyCode);
+    const styles = useThemeStyles();
+
+    const currencySymbolButton = (
+        <CurrencySymbolButton
+            currencySymbol={currencySymbol ?? ''}
+            onCurrencyButtonPress={onCurrencyButtonPress}
+            isCurrencyPressable={isCurrencyPressable}
+        />
+    );
+
+    /**
+     * Set a new amount value properly formatted
+     *
+     * @param text - Changed text from user input
+     */
+    const setFormattedAmount = (text: string) => {
+        const newAmount = MoneyRequestUtils.addLeadingZero(MoneyRequestUtils.replaceAllDigits(text, fromLocaleDigit));
+        onChangeAmount(newAmount);
+    };
+
+    const amountTextInput = (
+        <AmountTextInput
+            formattedAmount={formattedAmount}
+            onChangeAmount={setFormattedAmount}
+            placeholder={placeholder}
+            ref={ref}
+            selection={selection}
+            onSelectionChange={(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                onSelectionChange(event);
+            }}
+            onKeyPress={onKeyPress}
+            style={styles.pr1}
+        />
+    );
+
+    if (isCurrencySymbolLTR) {
+        return (
+            <>
+                {currencySymbolButton}
+                {amountTextInput}
+            </>
+        );
+    }
+
+    return (
+        <>
+            {amountTextInput}
+            {currencySymbolButton}
+        </>
+    );
+}
+
+BaseTextInputWithCurrencySymbol.displayName = 'BaseTextInputWithCurrencySymbol';
+
+export default React.forwardRef(BaseTextInputWithCurrencySymbol);

src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js

@@ -31,6 +31,9 @@ const propTypes = {
 
     /** Function to call to handle key presses in the text input */
     onKeyPress: PropTypes.func,
+
+    /** Whether the currency symbol is pressable */
+    isCurrencyPressable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -40,6 +43,7 @@ const defaultProps = {
     selection: undefined,
     onSelectionChange: () => {},
     onKeyPress: () => {},
+    isCurrencyPressable: true,
 };
 
 export {propTypes, defaultProps};

src/components/TextInputWithCurrencySymbol/types.ts

@@ -0,0 +1,33 @@
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import type {TextSelection} from '@components/Composer/types';
+
+type TextInputWithCurrencySymbolProps = {
+    /** Formatted amount in local currency  */
+    formattedAmount: string;
+
+    /** Function to call when amount in text input is changed */
+    onChangeAmount?: (value: string) => void;
+
+    /** Function to call when currency button is pressed */
+    onCurrencyButtonPress?: () => void;
+
+    /** Placeholder value for amount text input */
+    placeholder: string;
+
+    /** Currency code of user's selected currency */
+    selectedCurrencyCode: string;
+
+    /** Selection Object */
+    selection?: TextSelection;
+
+    /** Function to call when selection in text input is changed */
+    onSelectionChange?: (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+
+    /** Function to call to handle key presses in the text input */
+    onKeyPress?: (event: NativeSyntheticEvent<KeyboardEvent>) => void;
+
+    /** Whether the currency symbol is pressable */
+    isCurrencyPressable: boolean;
+};
+
+export default TextInputWithCurrencySymbolProps;

src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx

@@ -100,6 +100,7 @@ function WorkspaceRatePage(props: WorkspaceRatePageProps) {
                         defaultValue={(
                             (typeof props.workspaceRateAndUnit?.rate === 'string' ? parseFloat(props.workspaceRateAndUnit.rate) : defaultValue) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET
                         ).toFixed(3)}
+                        isCurrencyPressable={false}
                     />
                 </FormProvider>
             )}