Merge pull request #36497 from shubham1206agra/fix-currency-ui

Fixed currency pressable ui and padding issues
Expensify · Feb 14, 2024 · af1026e · af1026e
2 parents 7d2eb99 + 605985d
commit af1026e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx
@@ -33,6 +33,9 @@ type AmountFormProps = {
 
     /** Fired when back button pressed, navigates to currency selection page */
     onCurrencyButtonPress?: () => void;
+
+    /** Whether the currency symbol is pressable */
+    isCurrencyPressable?: boolean;
 };
 
 /**
@@ -48,7 +51,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function AmountForm(
-    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress}: AmountFormProps,
+    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true}: AmountFormProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
@@ -210,10 +213,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}
                     />

diff --git a/src/components/CurrencySymbolButton.tsx b/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>
     );
 }
 

diff --git a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx
@@ -19,6 +19,7 @@ function BaseTextInputWithCurrencySymbol(
         selection,
         onSelectionChange = () => {},
         onKeyPress = () => {},
+        isCurrencyPressable = true,
     }: TextInputWithCurrencySymbolProps,
     ref: React.ForwardedRef<BaseTextInputRef>,
 ) {
@@ -31,6 +32,7 @@ function BaseTextInputWithCurrencySymbol(
         <CurrencySymbolButton
             currencySymbol={currencySymbol ?? ''}
             onCurrencyButtonPress={onCurrencyButtonPress}
+            isCurrencyPressable={isCurrencyPressable}
         />
     );
 

diff --git a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js b/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};
diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts
@@ -25,6 +25,9 @@ type TextInputWithCurrencySymbolProps = {
 
     /** 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;
diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx
@@ -101,6 +101,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>
             )}