diff --git a/src/components/Picker/Picker.js b/src/components/Picker/Picker.js
index 98aba4e630c3..fc52a45ff97e 100644
--- a/src/components/Picker/Picker.js
+++ b/src/components/Picker/Picker.js
@@ -78,12 +78,16 @@ const propTypes = {
/** Additional events passed to the core Picker for specific platforms such as web */
additionalPickerEvents: PropTypes.func,
+
+ /** Hint text that appears below the picker */
+ hintText: PropTypes.string,
};
const defaultProps = {
label: '',
isDisabled: false,
errorText: '',
+ hintText: '',
containerStyles: [],
backgroundColor: undefined,
inputID: undefined,
@@ -172,6 +176,27 @@ class Picker extends PureComponent {
render() {
const hasError = !_.isEmpty(this.props.errorText);
+ if (this.props.isDisabled) {
+ return (
+
+ {this.props.label && (
+
+ {this.props.label}
+
+ )}
+
+ {this.props.value}
+
+ {this.props.hintText
+ && (
+
+ {this.props.hintText}
+
+ )}
+
+ );
+ }
+
return (
<>
+ {this.props.hintText
+ && (
+
+ {this.props.hintText}
+
+ )}
>
);
}
diff --git a/src/languages/en.js b/src/languages/en.js
index 225dc35af0ab..9af978e6a1e2 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1031,6 +1031,7 @@ export default {
nameIsRequiredError: 'You need to define a name for your workspace.',
currencyInputLabel: 'Default currency',
currencyInputHelpText: 'All expenses on this workspace will be converted to this currency.',
+ currencyInputDisabledText: 'The default currency can\'t be changed because this workspace is linked to a USD bank account.',
save: 'Save',
genericFailureMessage: 'An error occurred updating the workspace, please try again.',
avatarUploadFailureMessage: 'An error occurred uploading the avatar, please try again.',
diff --git a/src/languages/es.js b/src/languages/es.js
index 3a6eb53ae40e..99f30f929179 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1032,6 +1032,7 @@ export default {
nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
currencyInputLabel: 'Moneda por defecto',
currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.',
+ currencyInputDisabledText: 'La moneda predeterminada no se puede cambiar porque este espacio de trabajo está vinculado a una cuenta bancaria en USD.',
save: 'Guardar',
genericFailureMessage: 'Se produjo un error al guardar el espacio de trabajo. Por favor, inténtalo de nuevo.',
avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.',
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index dd31c56d2884..d212e3a75a0e 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -7,7 +7,6 @@ import lodashGet from 'lodash/get';
import ONYXKEYS from '../../ONYXKEYS';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import styles from '../../styles/styles';
-import Text from '../../components/Text';
import compose from '../../libs/compose';
import * as Policy from '../../libs/actions/Policy';
import * as Expensicons from '../../components/Icon/Expensicons';
@@ -143,11 +142,13 @@ class WorkspaceSettingsPage extends React.Component {
items={this.getCurrencyItems()}
isDisabled={hasVBA}
defaultValue={this.props.policy.outputCurrency}
+ hintText={
+ hasVBA
+ ? this.props.translate('workspace.editor.currencyInputDisabledText')
+ : this.props.translate('workspace.editor.currencyInputHelpText')
+ }
/>
-
- {this.props.translate('workspace.editor.currencyInputHelpText')}
-
)}
diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js
index 9a7a0ea88c4b..8b9904416bec 100644
--- a/src/stories/Picker.stories.js
+++ b/src/stories/Picker.stories.js
@@ -31,6 +31,7 @@ const Default = Template.bind({});
Default.args = {
label: 'Default picker',
name: 'Default',
+ hintText: 'Default hint text',
items: [
{
label: 'Orange',
@@ -48,6 +49,7 @@ PickerWithValue.args = {
label: 'Picker with defined value',
name: 'Picker with defined value',
value: 'apple',
+ hintText: 'Picker with hint text',
items: [
{
label: 'Orange',
@@ -64,6 +66,7 @@ const ErrorStory = Template.bind({});
ErrorStory.args = {
label: 'Picker with error',
name: 'PickerWithError',
+ hintText: 'Picker hint text',
errorText: 'This field has an error.',
items: [
{
@@ -81,7 +84,9 @@ const Disabled = Template.bind({});
Disabled.args = {
label: 'Picker disabled',
name: 'Disabled',
+ value: 'orange',
isDisabled: true,
+ hintText: 'Picker hint text',
items: [
{
label: 'Orange',