From 84eab1a1113600fa9e461722dab0f921a7c56b8a Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Sun, 5 Nov 2023 10:42:34 +0700 Subject: [PATCH 1/8] Add CurrencySelectionList component and use it in IOU and WS currency settings Signed-off-by: Tsaqif --- src/components/CurrencySelectionList.js | 92 +++++++++++++++++++ src/pages/iou/IOUCurrencySelection.js | 74 ++------------- .../WorkspaceSettingsCurrencyPage.js | 67 ++------------ 3 files changed, 106 insertions(+), 127 deletions(-) create mode 100644 src/components/CurrencySelectionList.js diff --git a/src/components/CurrencySelectionList.js b/src/components/CurrencySelectionList.js new file mode 100644 index 000000000000..1c0733ae9927 --- /dev/null +++ b/src/components/CurrencySelectionList.js @@ -0,0 +1,92 @@ +import Str from 'expensify-common/lib/str'; +import PropTypes from 'prop-types'; +import React, {useMemo, useState} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import compose from '@libs/compose'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; +import ONYXKEYS from '@src/ONYXKEYS'; +import SelectionList from './SelectionList'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; + +const propTypes = { + /** Label for the search text input */ + textInputLabel: PropTypes.string.isRequired, + + /** Callback to fire when a currency is selected */ + onSelect: PropTypes.func.isRequired, + + /** Currency item to be selected initially */ + initiallySelectedCurrencyCode: PropTypes.string.isRequired, + + // The curency list constant object from Onyx + currencyList: PropTypes.objectOf( + PropTypes.shape({ + // Symbol for the currency + symbol: PropTypes.string, + + // Name of the currency + name: PropTypes.string, + + // ISO4217 Code for the currency + ISO4217: PropTypes.string, + }), + ), + + ...withLocalizePropTypes, +}; + +const defaultProps = { + currencyList: {}, +}; + +function CurrencySelectionList(props) { + const [searchValue, setSearchValue] = useState(''); + const {translate, currencyList} = props; + + const {sections, headerMessage} = useMemo(() => { + const currencyOptions = _.map(currencyList, (currencyInfo, currencyCode) => { + const isSelectedCurrency = currencyCode === props.initiallySelectedCurrencyCode; + return { + currencyName: currencyInfo.name, + text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`, + currencyCode, + keyForList: currencyCode, + isSelected: isSelectedCurrency, + }; + }); + + const searchRegex = new RegExp(Str.escapeForRegExp(searchValue.trim()), 'i'); + const filteredCurrencies = _.filter(currencyOptions, (currencyOption) => searchRegex.test(currencyOption.text) || searchRegex.test(currencyOption.currencyName)); + const isEmpty = searchValue.trim() && !filteredCurrencies.length; + + return { + sections: isEmpty ? [] : [{data: filteredCurrencies, indexOffset: 0}], + headerMessage: isEmpty ? translate('common.noResultsFound') : '', + }; + }, [currencyList, searchValue, translate, props.initiallySelectedCurrencyCode]); + + return ( + + ); +} + +CurrencySelectionList.displayName = 'CurrencySelectionList'; +CurrencySelectionList.propTypes = propTypes; +CurrencySelectionList.defaultProps = defaultProps; + +export default compose( + withLocalize, + withOnyx({ + currencyList: {key: ONYXKEYS.CURRENCY_LIST}, + }), +)(CurrencySelectionList); diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index c7b5885865df..a18929061f1f 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -1,17 +1,15 @@ -import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useEffect} from 'react'; import {Keyboard} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import CurrencySelectionList from '@components/CurrencySelectionList'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {withNetwork} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import compose from '@libs/compose'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -42,20 +40,6 @@ const propTypes = { }), }).isRequired, - // The currency list constant object from Onyx - currencyList: PropTypes.objectOf( - PropTypes.shape({ - // Symbol for the currency - symbol: PropTypes.string, - - // Name of the currency - name: PropTypes.string, - - // ISO4217 Code for the currency - ISO4217: PropTypes.string, - }), - ), - /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ iou: iouPropTypes, @@ -63,13 +47,10 @@ const propTypes = { }; const defaultProps = { - currencyList: {}, iou: iouDefaultProps, }; function IOUCurrencySelection(props) { - const [searchValue, setSearchValue] = useState(''); - const optionsSelectorRef = useRef(); const selectedCurrencyCode = (lodashGet(props.route, 'params.currency', props.iou.currency) || CONST.CURRENCY.USD).toUpperCase(); const iouType = lodashGet(props.route, 'params.iouType', CONST.IOU.TYPE.REQUEST); const reportID = lodashGet(props.route, 'params.reportID', ''); @@ -113,59 +94,19 @@ function IOUCurrencySelection(props) { [props.route, props.navigation], ); - const {translate, currencyList} = props; - const {sections, headerMessage, initiallyFocusedOptionKey} = useMemo(() => { - const currencyOptions = _.map(currencyList, (currencyInfo, currencyCode) => { - const isSelectedCurrency = currencyCode === selectedCurrencyCode; - return { - currencyName: currencyInfo.name, - text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`, - currencyCode, - keyForList: currencyCode, - isSelected: isSelectedCurrency, - }; - }); - - const searchRegex = new RegExp(Str.escapeForRegExp(searchValue.trim()), 'i'); - const filteredCurrencies = _.filter(currencyOptions, (currencyOption) => searchRegex.test(currencyOption.text) || searchRegex.test(currencyOption.currencyName)); - const isEmpty = searchValue.trim() && !filteredCurrencies.length; - - return { - initiallyFocusedOptionKey: _.get( - _.find(filteredCurrencies, (currency) => currency.currencyCode === selectedCurrencyCode), - 'keyForList', - ), - sections: isEmpty - ? [] - : [ - { - data: filteredCurrencies, - indexOffset: 0, - }, - ], - headerMessage: isEmpty ? translate('common.noResultsFound') : '', - }; - }, [currencyList, searchValue, selectedCurrencyCode, translate]); - return ( optionsSelectorRef.current && optionsSelectorRef.current.focus()} testID={IOUCurrencySelection.displayName} > Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID))} /> - ); @@ -178,7 +119,6 @@ IOUCurrencySelection.defaultProps = defaultProps; export default compose( withLocalize, withOnyx({ - currencyList: {key: ONYXKEYS.CURRENCY_LIST}, iou: {key: ONYXKEYS.IOU}, }), withNetwork(), diff --git a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js index ce1e1d7b8966..a20e8e272e4e 100644 --- a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js +++ b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js @@ -1,73 +1,30 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useState} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import React, {useCallback} from 'react'; import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import CurrencySelectionList from '@components/CurrencySelectionList'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; import useLocalize from '@hooks/useLocalize'; -import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as Policy from '@userActions/Policy'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; const propTypes = { - /** Constant, list of available currencies */ - currencyList: PropTypes.objectOf( - PropTypes.shape({ - /** Symbol of the currency */ - symbol: PropTypes.string.isRequired, - }), - ), isLoadingReportData: PropTypes.bool, ...policyPropTypes, }; const defaultProps = { - currencyList: {}, isLoadingReportData: true, ...policyDefaultProps, }; -const getDisplayText = (currencyCode, currencySymbol) => `${currencyCode} - ${currencySymbol}`; - -function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportData}) { +function WorkspaceSettingsCurrencyPage({policy, isLoadingReportData}) { const {translate} = useLocalize(); - const [searchText, setSearchText] = useState(''); - const trimmedText = searchText.trim().toLowerCase(); - const currencyListKeys = _.keys(currencyList); - - const filteredItems = _.filter(currencyListKeys, (currencyCode) => { - const currency = currencyList[currencyCode]; - return getDisplayText(currencyCode, currency.symbol).toLowerCase().includes(trimmedText); - }); - - let initiallyFocusedOptionKey; - - const currencyItems = _.map(filteredItems, (currencyCode) => { - const currency = currencyList[currencyCode]; - const isSelected = policy.outputCurrency === currencyCode; - - if (isSelected) { - initiallyFocusedOptionKey = currencyCode; - } - - return { - text: getDisplayText(currencyCode, currency.symbol), - keyForList: currencyCode, - isSelected, - }; - }); - - const sections = [{data: currencyItems, indexOffset: 0}]; - - const headerMessage = searchText.trim() && !currencyItems.length ? translate('common.noResultsFound') : ''; - const onBackButtonPress = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)), [policy.id]); const onSelectCurrency = (item) => { @@ -90,15 +47,10 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat onBackButtonPress={onBackButtonPress} /> - @@ -109,9 +61,4 @@ WorkspaceSettingsCurrencyPage.displayName = 'WorkspaceSettingsCurrencyPage'; WorkspaceSettingsCurrencyPage.propTypes = propTypes; WorkspaceSettingsCurrencyPage.defaultProps = defaultProps; -export default compose( - withPolicyAndFullscreenLoading, - withOnyx({ - currencyList: {key: ONYXKEYS.CURRENCY_LIST}, - }), -)(WorkspaceSettingsCurrencyPage); +export default withPolicyAndFullscreenLoading(WorkspaceSettingsCurrencyPage); From 87c644c9f65a5d9845a92aa0a6531ace1855ddb4 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Wed, 8 Nov 2023 20:19:09 +0700 Subject: [PATCH 2/8] Add currency url parameter for WorkspaceSettingsCurrencyPage Signed-off-by: Tsaqif --- src/ROUTES.ts | 2 +- src/components/CurrencySelectionList.js | 5 ++++- src/pages/iou/IOUCurrencySelection.js | 1 + .../workspace/WorkspaceSettingsCurrencyPage.js | 18 +++++++++++++++++- src/pages/workspace/WorkspaceSettingsPage.js | 2 +- 5 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index bcc4685368cb..0902309514fc 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -328,7 +328,7 @@ export default { }, WORKSPACE_SETTINGS_CURRENCY: { route: 'workspace/:policyID/settings/currency', - getRoute: (policyID: string) => `workspace/${policyID}/settings/currency`, + getRoute: (policyID: string, currency: string) => `workspace/${policyID}/settings/currency?currency=${currency}`, }, WORKSPACE_CARD: { route: 'workspace/:policyID/card', diff --git a/src/components/CurrencySelectionList.js b/src/components/CurrencySelectionList.js index 795e8477a523..ba3cc9f7d7ed 100644 --- a/src/components/CurrencySelectionList.js +++ b/src/components/CurrencySelectionList.js @@ -20,6 +20,9 @@ const propTypes = { /** Currency item to be selected initially */ initiallySelectedCurrencyCode: PropTypes.string.isRequired, + /** Currency item to be focused initially */ + initiallyFocusedCurrencyCode: PropTypes.string.isRequired, + // The curency list constant object from Onyx currencyList: PropTypes.objectOf( PropTypes.shape({ @@ -79,7 +82,7 @@ function CurrencySelectionList(props) { onChangeText={setSearchValue} onSelectRow={props.onSelect} headerMessage={headerMessage} - initiallyFocusedOptionKey={props.initiallySelectedCurrencyCode} + initiallyFocusedOptionKey={props.initiallyFocusedCurrencyCode} showScrollIndicator /> ); diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index a18929061f1f..3fce092abda0 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -106,6 +106,7 @@ function IOUCurrencySelection(props) { diff --git a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js index a20e8e272e4e..2bb2a283acbc 100644 --- a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js +++ b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js @@ -1,3 +1,4 @@ +import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; import _ from 'underscore'; @@ -6,6 +7,7 @@ import CurrencySelectionList from '@components/CurrencySelectionList'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as Policy from '@userActions/Policy'; @@ -19,12 +21,25 @@ const propTypes = { }; const defaultProps = { + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** Focused currency code */ + currency: PropTypes.string, + + /** ID of a policy */ + policyID: PropTypes.string, + }), + }).isRequired, isLoadingReportData: true, ...policyDefaultProps, }; -function WorkspaceSettingsCurrencyPage({policy, isLoadingReportData}) { +function WorkspaceSettingsCurrencyPage({route, policy, isLoadingReportData}) { const {translate} = useLocalize(); + const currencyParam = lodashGet(route, 'params.currency', '').toUpperCase(); + const focusedCurrencyCode = CurrencyUtils.isValidCurrencyCode(currencyParam) ? currencyParam : policy.outputCurrency; const onBackButtonPress = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)), [policy.id]); const onSelectCurrency = (item) => { @@ -50,6 +65,7 @@ function WorkspaceSettingsCurrencyPage({policy, isLoadingReportData}) { diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index d913ae26c170..287f31305164 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -87,7 +87,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { return errors; }, []); - const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS_CURRENCY.getRoute(policy.id)), [policy.id]); + const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS_CURRENCY.getRoute(policy.id, policy.outputCurrency)), [policy.id, policy.outputCurrency]); const policyName = lodashGet(policy, 'name', ''); From 1e508c14374e7d0809770031c7fd455eb593edf9 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Fri, 24 Nov 2023 07:45:11 +0700 Subject: [PATCH 3/8] Don't automatically save ws default currency when selecting currency in selection list Signed-off-by: Tsaqif --- src/ROUTES.ts | 2 +- src/components/CurrencySelectionList.js | 5 +---- .../workspace/WorkspaceSettingsCurrencyPage.js | 11 ++++------- src/pages/workspace/WorkspaceSettingsPage.js | 16 +++++++++++----- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 0902309514fc..9545a7ab5008 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -324,7 +324,7 @@ export default { }, WORKSPACE_SETTINGS: { route: 'workspace/:policyID/settings', - getRoute: (policyID: string) => `workspace/${policyID}/settings`, + getRoute: (policyID: string, currency: string) => `workspace/${policyID}/settings?currency=${currency}`, }, WORKSPACE_SETTINGS_CURRENCY: { route: 'workspace/:policyID/settings/currency', diff --git a/src/components/CurrencySelectionList.js b/src/components/CurrencySelectionList.js index ba3cc9f7d7ed..795e8477a523 100644 --- a/src/components/CurrencySelectionList.js +++ b/src/components/CurrencySelectionList.js @@ -20,9 +20,6 @@ const propTypes = { /** Currency item to be selected initially */ initiallySelectedCurrencyCode: PropTypes.string.isRequired, - /** Currency item to be focused initially */ - initiallyFocusedCurrencyCode: PropTypes.string.isRequired, - // The curency list constant object from Onyx currencyList: PropTypes.objectOf( PropTypes.shape({ @@ -82,7 +79,7 @@ function CurrencySelectionList(props) { onChangeText={setSearchValue} onSelectRow={props.onSelect} headerMessage={headerMessage} - initiallyFocusedOptionKey={props.initiallyFocusedCurrencyCode} + initiallyFocusedOptionKey={props.initiallySelectedCurrencyCode} showScrollIndicator /> ); diff --git a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js index 2bb2a283acbc..b86ee9e34404 100644 --- a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js +++ b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js @@ -10,7 +10,6 @@ import useLocalize from '@hooks/useLocalize'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; -import * as Policy from '@userActions/Policy'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; @@ -39,12 +38,11 @@ const defaultProps = { function WorkspaceSettingsCurrencyPage({route, policy, isLoadingReportData}) { const {translate} = useLocalize(); const currencyParam = lodashGet(route, 'params.currency', '').toUpperCase(); - const focusedCurrencyCode = CurrencyUtils.isValidCurrencyCode(currencyParam) ? currencyParam : policy.outputCurrency; - const onBackButtonPress = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)), [policy.id]); + const selectedCurrencyCode = CurrencyUtils.isValidCurrencyCode(currencyParam) ? currencyParam : policy.outputCurrency; + const onBackButtonPress = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id, selectedCurrencyCode)), [policy.id, selectedCurrencyCode]); const onSelectCurrency = (item) => { - Policy.updateGeneralSettings(policy.id, policy.name, item.keyForList); - Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)); + Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id, item.currencyCode)); }; return ( @@ -65,8 +63,7 @@ function WorkspaceSettingsCurrencyPage({route, policy, isLoadingReportData}) { diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 287f31305164..df43145d6ffd 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -16,6 +16,7 @@ import TextInput from '@components/TextInput'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useLocalize from '@hooks/useLocalize'; import compose from '@libs/compose'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; @@ -42,6 +43,9 @@ const propTypes = { params: PropTypes.shape({ /** The policyID that is being configured */ policyID: PropTypes.string.isRequired, + + /** Selected currency code */ + currency: PropTypes.string, }).isRequired, }).isRequired, @@ -56,8 +60,10 @@ const defaultProps = { function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { const {translate} = useLocalize(); + const currencyParam = lodashGet(route, 'params.currency', '').toUpperCase(); + const currencyCode = CurrencyUtils.isValidCurrencyCode(currencyParam) ? currencyParam : policy.outputCurrency; - const formattedCurrency = !_.isEmpty(policy) && !_.isEmpty(currencyList) ? `${policy.outputCurrency} - ${currencyList[policy.outputCurrency].symbol}` : ''; + const formattedCurrency = !_.isEmpty(policy) && !_.isEmpty(currencyList) ? `${currencyCode} - ${currencyList[currencyCode].symbol}` : ''; const submit = useCallback( (values) => { @@ -65,11 +71,11 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { return; } - Policy.updateGeneralSettings(policy.id, values.name.trim(), policy.outputCurrency); + Policy.updateGeneralSettings(policy.id, values.name.trim(), currencyCode); Keyboard.dismiss(); - Navigation.goBack(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)); + Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)); }, - [policy.id, policy.isPolicyUpdating, policy.outputCurrency], + [policy.id, policy.isPolicyUpdating, currencyCode], ); const validate = useCallback((values) => { @@ -87,7 +93,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { return errors; }, []); - const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS_CURRENCY.getRoute(policy.id, policy.outputCurrency)), [policy.id, policy.outputCurrency]); + const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS_CURRENCY.getRoute(policy.id, currencyCode)), [policy.id, currencyCode]); const policyName = lodashGet(policy, 'name', ''); From 81dc4ec8a8ef6feb66e8e685857ad738b1eab33f Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Fri, 24 Nov 2023 09:43:02 +0700 Subject: [PATCH 4/8] Fix adding currency parameter to worksapace_settings get route calls Signed-off-by: Tsaqif --- src/pages/workspace/WorkspaceInitialPage.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 77e831e62b63..1e27c89b405c 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -53,10 +53,10 @@ const defaultProps = { }; /** - * @param {string} policyID + * @param {Object} policy */ -function openEditor(policyID) { - Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policyID)); +function openEditor(policy) { + Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id, policy.outputCurrency)); } /** @@ -152,7 +152,7 @@ function WorkspaceInitialPage(props) { { translationKey: 'workspace.common.settings', icon: Expensicons.Gear, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id, policy.outputCurrency)))), brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', }, { @@ -269,7 +269,7 @@ function WorkspaceInitialPage(props) { openEditor(policy.id)))} + onPress={singleExecution(waitForNavigate(() => openEditor(policy)))} accessibilityLabel={translate('workspace.common.settings')} role={CONST.ACCESSIBILITY_ROLE.BUTTON} > @@ -289,7 +289,7 @@ function WorkspaceInitialPage(props) { openEditor(policy.id)))} + onPress={singleExecution(waitForNavigate(() => openEditor(policy)))} accessibilityLabel={translate('workspace.common.settings')} role={CONST.ACCESSIBILITY_ROLE.BUTTON} > From 6c4c5b0cc041e57c020cf1c0efaa5976cd0f5e78 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Sun, 3 Dec 2023 15:54:49 +0700 Subject: [PATCH 5/8] Change display text format of currency selection list Signed-off-by: Tsaqif --- src/components/CurrencySelectionList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CurrencySelectionList.js b/src/components/CurrencySelectionList.js index 795e8477a523..7d43b09c8d66 100644 --- a/src/components/CurrencySelectionList.js +++ b/src/components/CurrencySelectionList.js @@ -50,7 +50,7 @@ function CurrencySelectionList(props) { const isSelectedCurrency = currencyCode === props.initiallySelectedCurrencyCode; return { currencyName: currencyInfo.name, - text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`, + text: `${currencyCode} - ${CurrencyUtils.getCurrencySymbol(currencyCode)}`, currencyCode, keyForList: currencyCode, isSelected: isSelectedCurrency, From 3cc506d9a4d779f2c4c3a0eec12e74b46878d911 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Tue, 16 Apr 2024 17:08:19 +0700 Subject: [PATCH 6/8] revert ROUTES Signed-off-by: Tsaqif --- src/ROUTES.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 13f094e3e7fe..8e4c84f24965 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -475,10 +475,6 @@ const ROUTES = { route: 'settings/workspaces/:policyID/invite-message', getRoute: (policyID: string) => `settings/workspaces/${policyID}/invite-message` as const, }, - WORKSPACE_SETTINGS: { - route: 'workspace/:policyID/settings', - getRoute: (policyID: string) => `workspace/${policyID}/settings` as const, - }, WORKSPACE_PROFILE: { route: 'settings/workspaces/:policyID/profile', getRoute: (policyID: string) => `settings/workspaces/${policyID}/profile` as const, @@ -508,8 +504,8 @@ const ROUTES = { getRoute: (policyID: string, inviterEmail: string) => `settings/workspaces/${policyID}/join?email=${inviterEmail}` as const, }, WORKSPACE_SETTINGS_CURRENCY: { - route: 'workspace/:policyID/settings/currency', - getRoute: (policyID: string) => `workspace/${policyID}/settings/currency` as const, + route: 'settings/workspaces/:policyID/settings/currency', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/settings/currency` as const, }, WORKSPACE_WORKFLOWS: { route: 'settings/workspaces/:policyID/workflows', From 15554f20e15c2428426545cc63c2f718926c25e2 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Tue, 16 Apr 2024 17:37:43 +0700 Subject: [PATCH 7/8] Change display text format of currency selection list and pretify a file Signed-off-by: Tsaqif --- src/components/CurrencySelectionList/index.tsx | 2 +- src/pages/iou/request/step/IOURequestStepCurrency.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CurrencySelectionList/index.tsx b/src/components/CurrencySelectionList/index.tsx index 4546ddfc1bad..70edaabeb551 100644 --- a/src/components/CurrencySelectionList/index.tsx +++ b/src/components/CurrencySelectionList/index.tsx @@ -17,7 +17,7 @@ function CurrencySelectionList({textInputLabel, initiallySelectedCurrencyCode, o const isSelectedCurrency = currencyCode === initiallySelectedCurrencyCode; return { currencyName: currencyInfo?.name ?? '', - text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`, + text: `${currencyCode} - ${CurrencyUtils.getCurrencySymbol(currencyCode)}`, currencyCode, keyForList: currencyCode, isSelected: isSelectedCurrency, diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.tsx b/src/pages/iou/request/step/IOURequestStepCurrency.tsx index efab449b6eac..d3e1efd04fa0 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.tsx +++ b/src/pages/iou/request/step/IOURequestStepCurrency.tsx @@ -5,6 +5,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import CurrencySelectionList from '@components/CurrencySelectionList'; import type {CurrencyListItem} from '@components/CurrencySelectionList/types'; import useLocalize from '@hooks/useLocalize'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as IOU from '@userActions/IOU'; @@ -14,7 +15,6 @@ import ROUTES, {getUrlWithBackToParam} from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Transaction} from '@src/types/onyx'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; import StepScreenWrapper from './StepScreenWrapper'; import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; import type {WithFullTransactionOrNotFoundProps} from './withFullTransactionOrNotFound'; From dd2b879c46762f1d86a42645bd2b7a9a21ae362c Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Tue, 30 Apr 2024 06:35:59 +0700 Subject: [PATCH 8/8] Modify textInputLabel property name into searchInputLabel Signed-off-by: Tsaqif --- src/components/CurrencySelectionList/index.tsx | 4 ++-- src/components/CurrencySelectionList/types.ts | 4 ++-- src/pages/iou/request/step/IOURequestStepCurrency.tsx | 2 +- src/pages/workspace/WorkspaceProfileCurrencyPage.tsx | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/CurrencySelectionList/index.tsx b/src/components/CurrencySelectionList/index.tsx index 70edaabeb551..361d82140326 100644 --- a/src/components/CurrencySelectionList/index.tsx +++ b/src/components/CurrencySelectionList/index.tsx @@ -8,7 +8,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import type {CurrencyListItem, CurrencySelectionListOnyxProps, CurrencySelectionListProps} from './types'; -function CurrencySelectionList({textInputLabel, initiallySelectedCurrencyCode, onSelect, currencyList}: CurrencySelectionListProps) { +function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode, onSelect, currencyList}: CurrencySelectionListProps) { const [searchValue, setSearchValue] = useState(''); const {translate} = useLocalize(); @@ -44,7 +44,7 @@ function CurrencySelectionList({textInputLabel, initiallySelectedCurrencyCode, o ; }; type CurrencySelectionListProps = CurrencySelectionListOnyxProps & { /** Label for the search text input */ - textInputLabel: string; + searchInputLabel: string; /** Currency item to be selected initially */ initiallySelectedCurrencyCode?: string; diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.tsx b/src/pages/iou/request/step/IOURequestStepCurrency.tsx index 12e47c4219c7..8669563f3b9f 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.tsx +++ b/src/pages/iou/request/step/IOURequestStepCurrency.tsx @@ -74,7 +74,7 @@ function IOURequestStepCurrency({ > {({didScreenTransitionEnd}) => ( { if (!didScreenTransitionEnd) { return; diff --git a/src/pages/workspace/WorkspaceProfileCurrencyPage.tsx b/src/pages/workspace/WorkspaceProfileCurrencyPage.tsx index 4940bceee0e1..85da1edfcab6 100644 --- a/src/pages/workspace/WorkspaceProfileCurrencyPage.tsx +++ b/src/pages/workspace/WorkspaceProfileCurrencyPage.tsx @@ -12,9 +12,9 @@ import AdminPolicyAccessOrNotFoundWrapper from './AdminPolicyAccessOrNotFoundWra import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -type WorkspaceProfileCurrentPageProps = WithPolicyAndFullscreenLoadingProps; +type WorkspaceProfileCurrencyPageProps = WithPolicyAndFullscreenLoadingProps; -function WorkspaceProfileCurrencyPage({policy}: WorkspaceProfileCurrentPageProps) { +function WorkspaceProfileCurrencyPage({policy}: WorkspaceProfileCurrencyPageProps) { const {translate} = useLocalize(); const onSelectCurrency = (item: CurrencyListItem) => { @@ -38,7 +38,7 @@ function WorkspaceProfileCurrencyPage({policy}: WorkspaceProfileCurrentPageProps />