From 7fd48ee507b34736605168ee8bd3d15104b995aa Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 30 Apr 2024 13:26:17 +0300 Subject: [PATCH 1/8] Menu item changes --- src/components/MenuItem.tsx | 394 +++++++++++++++++++----------------- src/styles/index.ts | 8 +- src/styles/utils/sizing.ts | 4 + 3 files changed, 220 insertions(+), 186 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 2bfb78cf9340..c6e7c9e991e7 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -150,6 +150,9 @@ type MenuItemBaseProps = { /** Error to display at the bottom of the component */ errorText?: MaybePhraseKey; + /** Hint to display at the bottom of the component */ + hintText?: MaybePhraseKey; + /** A boolean flag that gives the icon a green fill if true */ success?: boolean; @@ -295,6 +298,7 @@ function MenuItem( description, error, errorText, + hintText, success = false, focused = false, disabled = false, @@ -443,7 +447,6 @@ function MenuItem( style={({pressed}) => [ containerStyle, - errorText ? styles.pb5 : {}, combinedStyle, !interactive && styles.cursorDefault, StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true), @@ -461,206 +464,227 @@ function MenuItem( onFocus={onFocus} > {({pressed}) => ( - <> - - {!!label && isLabelHoverable && ( - - - {label} - - - )} - - {!!icon && Array.isArray(icon) && ( - + + + + {!!label && isLabelHoverable && ( + + + {label} + + )} - {!icon && shouldPutLeftPaddingWhenNoIcon && } - {icon && !Array.isArray(icon) && ( - - {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && ( + + {!!icon && Array.isArray(icon) && ( + + )} + {!icon && shouldPutLeftPaddingWhenNoIcon && } + {icon && !Array.isArray(icon) && ( + + {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && ( + + )} + {icon && iconType === CONST.ICON_TYPE_WORKSPACE && ( + + )} + {iconType === CONST.ICON_TYPE_AVATAR && ( + + )} + + )} + {secondaryIcon && ( + - )} - {icon && iconType === CONST.ICON_TYPE_WORKSPACE && ( - - )} - {iconType === CONST.ICON_TYPE_AVATAR && ( - - )} - - )} - {secondaryIcon && ( - - - - )} - - {!!description && shouldShowDescriptionOnTop && ( - - {description} - + )} - - {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && ( - - - - )} - {!shouldRenderAsHTML && !shouldParseTitle && !!title && ( + + {!!description && shouldShowDescriptionOnTop && ( - {renderTitleContent()} + {description} )} - {shouldShowTitleIcon && titleIcon && ( - - - - )} - - {!!description && !shouldShowDescriptionOnTop && ( - - {description} - - )} - {!!error && ( - - {error} - - )} - {!!furtherDetails && ( - - {!!furtherDetailsIcon && ( - + + {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && ( + + + + )} + {!shouldRenderAsHTML && !shouldParseTitle && !!title && ( + + {renderTitleContent()} + + )} + {shouldShowTitleIcon && titleIcon && ( + + + )} + + {!!description && !shouldShowDescriptionOnTop && ( - {furtherDetails} + {description} - - )} + )} + {!!error && ( + + {error} + + )} + {!!furtherDetails && ( + + {!!furtherDetailsIcon && ( + + )} + + {furtherDetails} + + + )} + - - - {badgeText && ( - - )} - {/* Since subtitle can be of type number, we should allow 0 to be shown */} - {(subtitle === 0 || subtitle) && ( - - {subtitle} - - )} - {floatRightAvatars?.length > 0 && ( - - {shouldShowSubscriptRightAvatar ? ( - + {badgeText && ( + + )} + {/* Since subtitle can be of type number, we should allow 0 to be shown */} + {(subtitle === 0 || subtitle) && ( + + {subtitle} + + )} + {floatRightAvatars?.length > 0 && ( + + {shouldShowSubscriptRightAvatar ? ( + + ) : ( + + )} + + )} + {!!brickRoadIndicator && ( + + - ) : ( - + )} + {!title && !!rightLabel && ( + + {rightLabel} + + )} + {shouldShowRightIcon && ( + + - )} - - )} - {!!brickRoadIndicator && ( - - - - )} - {!title && !!rightLabel && ( - - {rightLabel} - - )} - {shouldShowRightIcon && ( - - - - )} - {shouldShowRightComponent && rightComponent} - {shouldShowSelectedState && } + + )} + {shouldShowRightComponent && rightComponent} + {shouldShowSelectedState && } + {!!errorText && ( )} - + {!!hintText && ( + + )} + )} )} diff --git a/src/styles/index.ts b/src/styles/index.ts index 3b4402252822..54f9997a701f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1382,7 +1382,7 @@ const styles = (theme: ThemeColors) => formHelp: { color: theme.textSupporting, fontSize: variables.fontSizeLabel, - lineHeight: variables.lineHeightLarge, + lineHeight: variables.lineHeightNormal, marginBottom: 4, }, @@ -4458,10 +4458,8 @@ const styles = (theme: ThemeColors) => width: '100%', }, menuItemError: { - position: 'absolute', - bottom: -4, - left: 20, - right: 20, + marginTop: 4, + marginBottom: 0, }, formHelperMessage: { height: 32, diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index 371860a59efc..d794feff8d24 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -38,6 +38,10 @@ export default { minHeight: '100%', }, + mnhAuto: { + minHeight: 'auto', + }, + mnw2: { minWidth: 8, }, From f8f536c3991a409223cc20bd208db66d51892b0a Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 30 Apr 2024 16:05:40 +0300 Subject: [PATCH 2/8] updates for styles --- src/components/MenuItem.tsx | 2 +- src/styles/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index c6e7c9e991e7..7365968ea40f 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -662,7 +662,7 @@ function MenuItem( )} {!!brickRoadIndicator && ( - + formError: { color: theme.textError, fontSize: variables.fontSizeLabel, - lineHeight: variables.formErrorLineHeight, + lineHeight: variables.lineHeightNormal, marginBottom: 4, }, From bd6595f9c5c09999882135b49816a15427d553df Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Mon, 6 May 2024 15:52:34 +0300 Subject: [PATCH 3/8] Refactoring all places to use errorText instead of error for menu items --- src/components/AmountPicker/index.tsx | 9 ++-- src/components/CountrySelector.tsx | 35 ++++++++-------- .../MoneyRequestConfirmationList.tsx | 6 +-- .../ReportActionItem/MoneyRequestView.tsx | 14 +++---- src/components/StateSelector.tsx | 41 +++++++++---------- src/components/TextPicker/index.tsx | 7 ++-- src/components/ValuePicker/index.tsx | 9 ++-- .../TypeBusiness/BusinessTypePicker/index.tsx | 7 ++-- src/pages/workspace/WorkspaceProfilePage.tsx | 5 +-- .../qbo/advanced/QuickbooksAdvancedPage.tsx | 5 +-- ...uickbooksCompanyCardExpenseAccountPage.tsx | 12 ++---- .../QuickbooksExportConfigurationPage.tsx | 12 +++--- ...oksOutOfPocketExpenseConfigurationPage.tsx | 14 +++---- 13 files changed, 76 insertions(+), 100 deletions(-) diff --git a/src/components/AmountPicker/index.tsx b/src/components/AmountPicker/index.tsx index 45e511f24748..014932f7736b 100644 --- a/src/components/AmountPicker/index.tsx +++ b/src/components/AmountPicker/index.tsx @@ -1,17 +1,15 @@ import React, {forwardRef, useState} from 'react'; import type {ForwardedRef} from 'react'; import {View} from 'react-native'; -import FormHelpMessage from '@components/FormHelpMessage'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useStyleUtils from '@hooks/useStyleUtils'; -import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; +import CONST from '@src/CONST'; import callOrReturn from '@src/types/utils/callOrReturn'; import AmountSelectorModal from './AmountSelectorModal'; import type {AmountPickerProps} from './types'; function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ...rest}: AmountPickerProps, forwardedRef: ForwardedRef) { - const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [isPickerVisible, setIsPickerVisible] = useState(false); @@ -43,11 +41,10 @@ function AmountPicker({value, description, title, errorText = '', onInputChange, description={description} onPress={showPickerModal} furtherDetails={furtherDetails} + brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} rightLabel={rightLabel} + errorText={errorText} /> - - - - { - const activeRoute = Navigation.getActiveRouteWithoutParams(); - didOpenContrySelector.current = true; - Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute)); - }} - /> - - - - + { + const activeRoute = Navigation.getActiveRouteWithoutParams(); + didOpenContrySelector.current = true; + Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute)); + }} + /> ); } diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 4c5bb4d45318..85fb95814fe3 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -730,7 +730,7 @@ function MoneyRequestConfirmationList({ titleStyle={styles.moneyRequestConfirmationAmount} disabled={didConfirm} brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction ?? null) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction ?? null) ? translate('common.error.enterAmount') : ''} + errorText={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction ?? null) ? translate('common.error.enterAmount') : ''} /> ), shouldShow: shouldShowSmartScanFields, @@ -826,7 +826,7 @@ function MoneyRequestConfirmationList({ disabled={didConfirm} interactive={!isReadOnly} brickRoadIndicator={shouldDisplayMerchantError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={shouldDisplayMerchantError ? translate('common.error.fieldRequired') : ''} + errorText={shouldDisplayMerchantError ? translate('common.error.fieldRequired') : ''} rightLabel={isMerchantRequired ? translate('common.required') : ''} /> ), @@ -849,7 +849,7 @@ function MoneyRequestConfirmationList({ disabled={didConfirm} interactive={!isReadOnly} brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''} + errorText={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''} /> ), shouldShow: shouldShowDate, diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 9b7bfb2c2f17..73d3bfd19626 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -406,7 +406,7 @@ function MoneyRequestView({ shouldShowRightIcon={canEditAmount} onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_AMOUNT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))} brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('amount')} + errorText={getErrorForField('amount')} /> @@ -420,7 +420,7 @@ function MoneyRequestView({ onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))} wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} brickRoadIndicator={getErrorForField('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('comment')} + errorText={getErrorForField('comment')} numberOfLinesTitle={0} /> @@ -438,7 +438,7 @@ function MoneyRequestView({ Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID)) } brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('merchant')} + errorText={getErrorForField('merchant')} /> )} @@ -451,7 +451,7 @@ function MoneyRequestView({ titleStyle={styles.flex1} onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))} brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('date')} + errorText={getErrorForField('date')} /> {shouldShowCategory && ( @@ -466,7 +466,7 @@ function MoneyRequestView({ Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID)) } brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('category')} + errorText={getErrorForField('category')} /> )} @@ -495,7 +495,7 @@ function MoneyRequestView({ ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined } - error={getErrorForField('tag', {tagListIndex: index, tagListName: name})} + errorText={getErrorForField('tag', {tagListIndex: index, tagListName: name})} /> ))} @@ -521,7 +521,7 @@ function MoneyRequestView({ Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID)) } brickRoadIndicator={getErrorForField('tax') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('tax')} + errorText={getErrorForField('tax')} /> )} diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx index 18e6f45ed9e5..8cae007679ff 100644 --- a/src/components/StateSelector.tsx +++ b/src/components/StateSelector.tsx @@ -2,14 +2,14 @@ import {useIsFocused} from '@react-navigation/native'; import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST'; import React, {useEffect, useRef} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import type {View} from 'react-native'; import useGeographicalStateFromRoute from '@hooks/useGeographicalStateFromRoute'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import type {MaybePhraseKey} from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; -import FormHelpMessage from './FormHelpMessage'; import type {MenuItemProps} from './MenuItem'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; @@ -79,26 +79,23 @@ function StateSelector( const descStyle = title.length === 0 ? styles.textNormal : null; return ( - - { - const activeRoute = Navigation.getActiveRoute(); - didOpenStateSelector.current = true; - Navigation.navigate(stateSelectorRoute.getRoute(stateCode, activeRoute, label)); - }} - wrapperStyle={wrapperStyle} - /> - - - - + { + const activeRoute = Navigation.getActiveRoute(); + didOpenStateSelector.current = true; + Navigation.navigate(stateSelectorRoute.getRoute(stateCode, activeRoute, label)); + }} + wrapperStyle={wrapperStyle} + /> ); } diff --git a/src/components/TextPicker/index.tsx b/src/components/TextPicker/index.tsx index 00c22e8b75ee..0900884d874c 100644 --- a/src/components/TextPicker/index.tsx +++ b/src/components/TextPicker/index.tsx @@ -1,11 +1,11 @@ import React, {forwardRef, useState} from 'react'; import type {ForwardedRef} from 'react'; import {View} from 'react-native'; -import FormHelpMessage from '@components/FormHelpMessage'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; +import CONST from '@src/CONST'; import TextSelectorModal from './TextSelectorModal'; import type {TextPickerProps} from './types'; @@ -42,11 +42,10 @@ function TextPicker({value, description, placeholder = '', errorText = '', onInp onPress={showPickerModal} furtherDetails={furtherDetails} rightLabel={rightLabel} + brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + errorText={errorText} style={[styles.moneyRequestMenuItem]} /> - - - ) { - const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [isPickerVisible, setIsPickerVisible] = useState(false); @@ -44,10 +42,9 @@ function ValuePicker({value, label, items, placeholder = '', errorText = '', onI description={label} onPress={showPickerModal} furtherDetails={furtherDetails} + brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + errorText={errorText} /> - - - - - - - - {hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')} - {canUseSpotnanaTravel && ( diff --git a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAdvancedPage.tsx b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAdvancedPage.tsx index a356b82a0c2b..3239be6f61b7 100644 --- a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAdvancedPage.tsx +++ b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAdvancedPage.tsx @@ -50,11 +50,10 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) { description={translate('workspace.qbo.advancedConfig.qboBillPaymentAccount')} wrapperStyle={[styles.sectionMenuItemTopDescription]} onPress={waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR.getRoute(policyID)))} - error={errorFields?.reimbursementAccountID ? translate('common.genericErrorMessage') : undefined} + errorText={errorFields?.reimbursementAccountID ? translate('common.genericErrorMessage') : undefined} brickRoadIndicator={errorFields?.reimbursementAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} /> - Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR.getRoute(policyID)))} - error={errorFields?.collectionAccountID ? translate('common.genericErrorMessage') : undefined} + errorText={errorFields?.collectionAccountID ? translate('common.genericErrorMessage') : undefined} brickRoadIndicator={errorFields?.collectionAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} /> diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx index b3fd41d9a342..e589cee0087b 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx @@ -42,24 +42,20 @@ function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyConnections Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_SELECT.getRoute(policyID))} brickRoadIndicator={errorFields?.nonReimbursableExpensesExportDestination ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} shouldShowRightIcon + hintText={nonReimbursableExpensesExportDestination ? translate(`workspace.qbo.accounts.${nonReimbursableExpensesExportDestination}Description`) : undefined} /> - {!!nonReimbursableExpensesExportDestination && ( - - {translate(`workspace.qbo.accounts.${nonReimbursableExpensesExportDestination}Description`)} - - )} {isVendorSelected && ( <> Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT_PAYABLE_SELECT.getRoute(policyID))} brickRoadIndicator={errorFields?.nonReimbursableExpensesAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} shouldShowRightIcon @@ -83,7 +79,7 @@ function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyConnections onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_NON_REIMBURSABLE_DEFAULT_VENDOR_SELECT.getRoute(policyID))} brickRoadIndicator={errorFields?.nonReimbursableBillDefaultVendor ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} shouldShowRightIcon - error={errorFields?.nonReimbursableBillDefaultVendor ? translate('common.genericErrorMessage') : undefined} + errorText={errorFields?.nonReimbursableBillDefaultVendor ? translate('common.genericErrorMessage') : undefined} /> diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx index 527a55d41b30..e49536c33306 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx @@ -41,7 +41,7 @@ function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) brickRoadIndicator: errorFields?.exporter ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: exportConfiguration?.exporter ?? policyOwner, pendingAction: pendingFields?.export, - error: errorFields?.exporter ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.exporter ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.qbo.date'), @@ -49,7 +49,7 @@ function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) brickRoadIndicator: errorFields?.exportDate ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: exportDate ? translate(`workspace.qbo.exportDate.values.${exportDate}.label`) : undefined, pendingAction: pendingFields?.exportDate, - error: errorFields?.exportDate ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.exportDate ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.qbo.exportExpenses'), @@ -65,7 +65,7 @@ function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) brickRoadIndicator: errorFields?.receivableAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: receivableAccount?.name, pendingAction: pendingFields?.receivableAccount, - error: errorFields?.receivableAccount ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.receivableAccount ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.qbo.exportCompany'), @@ -73,7 +73,7 @@ function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) brickRoadIndicator: errorFields?.exportCompanyCard ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: nonReimbursableExpensesExportDestination ? translate(`workspace.qbo.accounts.${nonReimbursableExpensesExportDestination}`) : undefined, pendingAction: pendingFields?.nonReimbursableExpensesExportDestination, - error: errorFields?.nonReimbursableExpensesExportDestination ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.nonReimbursableExpensesExportDestination ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.qbo.exportExpensifyCard'), @@ -108,9 +108,7 @@ function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) shouldShowRightIcon={menuItem?.shouldShowRightIcon ?? true} onPress={menuItem?.onPress} brickRoadIndicator={menuItem?.brickRoadIndicator} - // TODO uncomment when errorText will be fixed - // errorText={menuItem?.errorText} - error={menuItem?.error} + errorText={menuItem?.errorText} /> ))} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx index bc4741e00b48..c04a8ece794f 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx @@ -42,15 +42,17 @@ function QuickbooksOutOfPocketExpenseConfigurationPage({policy}: WithPolicyConne Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT_OUT_OF_POCKET_EXPENSES_SELECT.getRoute(policyID))} brickRoadIndicator={hasErrors ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} shouldShowRightIcon + hintText={ + reimbursableExpensesExportDestination === CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.VENDOR_BILL && !isLocationEnabled + ? translate('workspace.qbo.exportVendorBillDescription') + : undefined + } /> - {reimbursableExpensesExportDestination === CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.VENDOR_BILL && !isLocationEnabled && ( - {translate('workspace.qbo.exportVendorBillDescription')} - )} {isLocationEnabled && {translate('workspace.qbo.outOfPocketLocationEnabledDescription')}} {!isLocationEnabled && ( @@ -60,9 +62,7 @@ function QuickbooksOutOfPocketExpenseConfigurationPage({policy}: WithPolicyConne onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT_OUT_OF_POCKET_EXPENSES_ACCOUNT_SELECT.getRoute(policyID))} brickRoadIndicator={errorFields?.exportAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} shouldShowRightIcon - error={errorFields?.exportAccount ? translate('common.genericErrorMessage') : undefined} - // TODO uncomment when errorText will be fixed - // errorText={errors?.exportAccount} + errorText={errorFields?.exportAccount ? translate('common.genericErrorMessage') : undefined} /> )} From fc6455c92bed46df0497bfb76e3bb2f17658f193 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 7 May 2024 14:35:57 +0300 Subject: [PATCH 4/8] update after design review --- src/components/AmountPicker/index.tsx | 2 +- src/components/MoneyRequestConfirmationList.tsx | 2 +- src/components/TextPicker/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AmountPicker/index.tsx b/src/components/AmountPicker/index.tsx index 014932f7736b..9563cec1be27 100644 --- a/src/components/AmountPicker/index.tsx +++ b/src/components/AmountPicker/index.tsx @@ -42,7 +42,7 @@ function AmountPicker({value, description, title, errorText = '', onInputChange, onPress={showPickerModal} furtherDetails={furtherDetails} brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - rightLabel={rightLabel} + rightLabel={!errorText ? rightLabel : undefined} errorText={errorText} /> ), shouldShow: shouldShowMerchant, diff --git a/src/components/TextPicker/index.tsx b/src/components/TextPicker/index.tsx index 0900884d874c..8311d47f490c 100644 --- a/src/components/TextPicker/index.tsx +++ b/src/components/TextPicker/index.tsx @@ -41,7 +41,7 @@ function TextPicker({value, description, placeholder = '', errorText = '', onInp description={description} onPress={showPickerModal} furtherDetails={furtherDetails} - rightLabel={rightLabel} + rightLabel={!errorText ? rightLabel : undefined} brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} errorText={errorText} style={[styles.moneyRequestMenuItem]} From c96c61abe1566ab8a1bee64ee457254ca3a20122 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Wed, 8 May 2024 13:00:03 +0300 Subject: [PATCH 5/8] remove redundant error prop --- src/components/MenuItem.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index e4755f3595ff..b8578eaf528a 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -144,9 +144,6 @@ type MenuItemBaseProps = { /** Should the description be shown above the title (instead of the other way around) */ shouldShowDescriptionOnTop?: boolean; - /** Error to display below the title */ - error?: string; - /** Error to display at the bottom of the component */ errorText?: MaybePhraseKey; @@ -299,7 +296,6 @@ function MenuItem( furtherDetailsIcon, furtherDetails, description, - error, errorText, hintText, success = false, @@ -597,11 +593,6 @@ function MenuItem( {description} )} - {!!error && ( - - {error} - - )} {!!furtherDetails && ( {!!furtherDetailsIcon && ( From 22556b5506bf3c82b17af33c16c9af3ccbc49f28 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Wed, 8 May 2024 13:23:34 +0300 Subject: [PATCH 6/8] updates after merge conflicts --- src/components/MenuItem.tsx | 1 - .../xero/export/XeroExportConfigurationPage.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 80c7dd092fb3..daf77df1f995 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -304,7 +304,6 @@ function MenuItem( description, helperText, helperTextStyle, - error, errorText, hintText, success = false, diff --git a/src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx b/src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx index 934c41dab614..f78e7abd69e5 100644 --- a/src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx @@ -26,7 +26,7 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) { brickRoadIndicator: errorFields?.exporter ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: exportConfiguration?.exporter ?? policyOwner, pendingAction: pendingFields?.export, - error: errorFields?.exporter ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.exporter ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.xero.exportExpenses'), @@ -40,14 +40,14 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) { brickRoadIndicator: errorFields?.billDate ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: exportConfiguration?.billDate, pendingAction: pendingFields?.export, - error: errorFields?.billDate ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.billDate ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.xero.advancedConfig.purchaseBillStatusTitle'), onPress: () => {}, title: exportConfiguration?.billStatus?.purchase, pendingAction: pendingFields?.export, - error: errorFields?.purchase ? translate('common.genericErrorMessage') : undefined, + errorText: errorFields?.purchase ? translate('common.genericErrorMessage') : undefined, }, { description: translate('workspace.xero.exportInvoices'), @@ -69,7 +69,7 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) { brickRoadIndicator: errorFields?.nonReimbursableAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, title: undefined, pendingAction: pendingFields?.export, - error: undefined, + errorText: undefined, }, ]; @@ -97,7 +97,7 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) { onPress={menuItem?.onPress} brickRoadIndicator={menuItem?.brickRoadIndicator} helperText={menuItem?.helperText} - error={menuItem?.error} + errorText={menuItem?.errorText} /> ))} From 99ae6f0a0dbfb076220993d6702b729f4d3db5b2 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Wed, 8 May 2024 16:07:16 +0300 Subject: [PATCH 7/8] updates after design review --- src/components/MenuItem.tsx | 20 +++----------------- src/styles/utils/sizing.ts | 4 ---- 2 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index daf77df1f995..a58fe1ab7e2a 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -553,14 +553,7 @@ function MenuItem( /> )} - + {!!description && shouldShowDescriptionOnTop && ( - + {badgeText && ( )} {!!hintText && ( diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index 48779e803697..ec9aa1ce4c5c 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -38,10 +38,6 @@ export default { minHeight: '100%', }, - mnhAuto: { - minHeight: 'auto', - }, - mnw2: { minWidth: 8, }, From 730f2721b88f5ad6033066e9b8c3e73611661140 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Thu, 9 May 2024 10:58:08 +0300 Subject: [PATCH 8/8] updates after c+ review --- src/components/AmountPicker/index.tsx | 2 +- src/components/MenuItem.tsx | 6 +++--- src/components/TextPicker/index.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AmountPicker/index.tsx b/src/components/AmountPicker/index.tsx index 9563cec1be27..014932f7736b 100644 --- a/src/components/AmountPicker/index.tsx +++ b/src/components/AmountPicker/index.tsx @@ -42,7 +42,7 @@ function AmountPicker({value, description, title, errorText = '', onInputChange, onPress={showPickerModal} furtherDetails={furtherDetails} brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - rightLabel={!errorText ? rightLabel : undefined} + rightLabel={rightLabel} errorText={errorText} /> )} - {!title && !!rightLabel && ( + {!title && !!rightLabel && !errorText && ( {rightLabel} @@ -680,7 +680,7 @@ function MenuItem( isError shouldShowRedDotIndicator={false} message={errorText} - style={[styles.menuItemError, styles.mt1]} + style={styles.menuItemError} /> )} {!!hintText && ( @@ -688,7 +688,7 @@ function MenuItem( isError={false} shouldShowRedDotIndicator={false} message={hintText} - style={[styles.menuItemError, !!errorText && styles.mt1]} + style={styles.menuItemError} /> )} diff --git a/src/components/TextPicker/index.tsx b/src/components/TextPicker/index.tsx index 8311d47f490c..0900884d874c 100644 --- a/src/components/TextPicker/index.tsx +++ b/src/components/TextPicker/index.tsx @@ -41,7 +41,7 @@ function TextPicker({value, description, placeholder = '', errorText = '', onInp description={description} onPress={showPickerModal} furtherDetails={furtherDetails} - rightLabel={!errorText ? rightLabel : undefined} + rightLabel={rightLabel} brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} errorText={errorText} style={[styles.moneyRequestMenuItem]}