From 917b36b7aecbd06c89f276db52cdb90ae0adeab1 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Tue, 14 Nov 2023 12:14:26 -0500 Subject: [PATCH 1/9] Adds rightLabel to MenuItem --- src/components/MenuItem.js | 6 ++++++ src/components/menuItemPropTypes.js | 3 +++ 2 files changed, 9 insertions(+) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 103d063f9024..dc6f389db54e 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -78,6 +78,7 @@ const defaultProps = { shouldGreyOutWhenDisabled: true, error: '', shouldRenderAsHTML: false, + rightLabel: '', rightComponent: undefined, shouldShowRightComponent: false, titleWithTooltips: [], @@ -364,6 +365,11 @@ const MenuItem = React.forwardRef((props, ref) => { /> )} + {Boolean(props.rightLabel) && ( + + {props.rightLabel} + + )} {Boolean(props.shouldShowRightIcon) && ( Date: Wed, 15 Nov 2023 09:18:02 -0500 Subject: [PATCH 2/9] Adds rightLabels to MenuItems to Tags and Category --- src/components/MoneyRequestConfirmationList.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index db70d5a18dfc..aedd725ba7d3 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -705,6 +705,7 @@ function MoneyRequestConfirmationList(props) { titleStyle={styles.flex1} disabled={didConfirm} interactive={!props.isReadOnly} + rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('required') : ''} /> )} {shouldShowTags && ( @@ -717,6 +718,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} disabled={didConfirm} interactive={!props.isReadOnly} + rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresTag) ? translate('required') : ''} /> )} {shouldShowBillable && ( From 21a22aaee6105dfba55e4545a2ddb34294407a52 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Wed, 15 Nov 2023 10:29:32 -0500 Subject: [PATCH 3/9] Adds translations and updates styles --- src/components/MenuItem.js | 2 +- src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/styles/styles.ts | 4 ++++ 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index dc6f389db54e..c4cc7e9a37b1 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -366,7 +366,7 @@ const MenuItem = React.forwardRef((props, ref) => { )} {Boolean(props.rightLabel) && ( - + {props.rightLabel} )} diff --git a/src/languages/en.ts b/src/languages/en.ts index fe867efc27c0..c6ee38166d15 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -266,6 +266,7 @@ export default { tbd: 'TBD', selectCurrency: 'Select a currency', card: 'Card', + required: 'Required', }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index d86b712104fd..d07b6b93813d 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -256,6 +256,7 @@ export default { tbd: 'Por determinar', selectCurrency: 'Selecciona una moneda', card: 'Tarjeta', + required: 'Obligatorio', }, location: { useCurrent: 'Usar ubicación actual', diff --git a/src/styles/styles.ts b/src/styles/styles.ts index ada77e124c38..916b54e220d0 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1463,6 +1463,10 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + rightLabelMenuItem: { + width: 65, + }, + popoverMenuText: { fontSize: variables.fontSizeNormal, color: theme.heading, From 0ce8125f01eceb89000fc946d9fea5be25644f37 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Wed, 15 Nov 2023 10:53:48 -0500 Subject: [PATCH 4/9] Add check for policy and updates translation key --- src/components/MoneyRequestConfirmationList.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index aedd725ba7d3..9108bbcf4168 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -226,7 +226,6 @@ function MoneyRequestConfirmationList(props) { // A flag for showing the categories field const shouldShowCategories = props.isPolicyExpenseChat && (props.iouCategory || OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories))); - // A flag and a toggler for showing the rest of the form fields const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false); @@ -244,7 +243,6 @@ function MoneyRequestConfirmationList(props) { const canUseTags = Permissions.canUseTags(props.betas); // A flag for showing the tags field const shouldShowTags = props.isPolicyExpenseChat && canUseTags && OptionsListUtils.hasEnabledOptions(_.values(policyTagList)); - // A flag for showing the billable field const shouldShowBillable = canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true); @@ -705,7 +703,7 @@ function MoneyRequestConfirmationList(props) { titleStyle={styles.flex1} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('required') : ''} + rightLabel={Permissions.canUseViolations() && props.policy && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} /> )} {shouldShowTags && ( @@ -718,7 +716,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresTag) ? translate('required') : ''} + rightLabel={Permissions.canUseViolations() && props.policy && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} /> )} {shouldShowBillable && ( From 7fe9732556a93205ec327536ef0b2ab5edad5206 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Wed, 15 Nov 2023 11:20:38 -0500 Subject: [PATCH 5/9] Removed unnecessary check --- src/components/MoneyRequestConfirmationList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index f2bb98a921e1..1db725809a9e 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -698,7 +698,7 @@ function MoneyRequestConfirmationList(props) { titleStyle={styles.flex1} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && props.policy && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} + rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} /> )} {shouldShowTags && ( @@ -711,7 +711,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && props.policy && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} + rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} /> )} {shouldShowBillable && ( From fdc123052076b4b800a12f6b12420c0d786172e5 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Fri, 17 Nov 2023 15:50:36 -0500 Subject: [PATCH 6/9] Switch out Permissions for usePermissions --- src/components/MoneyRequestConfirmationList.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 1db725809a9e..7c6023e00781 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -8,6 +8,7 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; +import usePermissions from '@hooks/usePermissions'; import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; @@ -208,6 +209,7 @@ function MoneyRequestConfirmationList(props) { const {onSendMoney, onConfirm, onSelectParticipant} = props; const {translate, toLocaleDigit} = useLocalize(); const transaction = props.isEditingSplitBill ? props.draftTransaction || props.transaction : props.transaction; + const {canUseViolations} = usePermissions(); const isTypeRequest = props.iouType === CONST.IOU.TYPE.REQUEST; const isSplitBill = props.iouType === CONST.IOU.TYPE.SPLIT; @@ -698,7 +700,7 @@ function MoneyRequestConfirmationList(props) { titleStyle={styles.flex1} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} + rightLabel={canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} /> )} {shouldShowTags && ( @@ -711,7 +713,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={Permissions.canUseViolations() && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} + rightLabel={canUseViolations() && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} /> )} {shouldShowBillable && ( From 6ce26d94831095c8a2cfdb89bcb7dfb01512433a Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Fri, 17 Nov 2023 16:00:41 -0500 Subject: [PATCH 7/9] fix canUseViolations --- src/components/MoneyRequestConfirmationList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 7c6023e00781..b24812ba533c 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -700,7 +700,7 @@ function MoneyRequestConfirmationList(props) { titleStyle={styles.flex1} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={canUseViolations() && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} + rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''} /> )} {shouldShowTags && ( @@ -713,7 +713,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} disabled={didConfirm} interactive={!props.isReadOnly} - rightLabel={canUseViolations() && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} + rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''} /> )} {shouldShowBillable && ( From 9bdd9f02dd932e97f5f402a6fe238f3a5666dfde Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Fri, 17 Nov 2023 16:52:05 -0500 Subject: [PATCH 8/9] Fix styles --- src/styles/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 4d05c6a392aa..0804b9944f72 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1443,7 +1443,7 @@ const styles = (theme: ThemeColors) => }, rightLabelMenuItem: { - width: 65, + width: 'auto', }, popoverMenuText: { From ddb4e64b70ef60dcbafb370a0c99122ca747e7d1 Mon Sep 17 00:00:00 2001 From: Daniel Edwards Date: Mon, 20 Nov 2023 09:23:47 -0500 Subject: [PATCH 9/9] Fixed styles after review --- src/components/MenuItem.js | 4 ++-- src/styles/styles.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index c4cc7e9a37b1..9883672976e8 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -366,8 +366,8 @@ const MenuItem = React.forwardRef((props, ref) => { )} {Boolean(props.rightLabel) && ( - - {props.rightLabel} + + {props.rightLabel} )} {Boolean(props.shouldShowRightIcon) && ( diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 0804b9944f72..e597f0ec874e 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1443,7 +1443,8 @@ const styles = (theme: ThemeColors) => }, rightLabelMenuItem: { - width: 'auto', + fontSize: variables.fontSizeLabel, + color: theme.textSupporting, }, popoverMenuText: {