diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f8116710869b..765813b7aa22 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -147,6 +147,7 @@ function BaseSelectionList( shouldUseDefaultRightHandSideCheckmark, selectedItems = [], isSelected, + canShowProductTrainingTooltip, }: SelectionListProps, ref: ForwardedRef, ) { @@ -190,6 +191,10 @@ function BaseSelectionList( [isSelected, selectedItems, canSelectMultiple], ); + const canShowProductTrainingTooltipMemo = useMemo(() => { + return canShowProductTrainingTooltip && isFocused; + }, [canShowProductTrainingTooltip, isFocused]); + /** * Iterates through the sections and items inside each section, and builds 4 arrays along the way: * - `allOptions`: Contains all the items in the list, flattened, regardless of section @@ -618,6 +623,7 @@ function BaseSelectionList( titleStyles={listItemTitleStyles} singleExecution={singleExecution} titleContainerStyles={listItemTitleContainerStyles} + canShowProductTrainingTooltip={canShowProductTrainingTooltipMemo} /> ); diff --git a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx index fa96e7c02db5..22ff401ed756 100644 --- a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx +++ b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx @@ -7,7 +7,7 @@ import {isTransactionGroupListItemType} from '@libs/SearchUIUtils'; import type {BaseListItemProps, ExtendedTargetedEvent, ListItem, SelectionListProps} from './types'; type BaseSelectionListItemRendererProps = Omit, 'onSelectRow'> & - Pick, 'ListItem' | 'shouldIgnoreFocus' | 'shouldSingleExecuteRowSelect'> & { + Pick, 'ListItem' | 'shouldIgnoreFocus' | 'shouldSingleExecuteRowSelect' | 'canShowProductTrainingTooltip'> & { index: number; selectRow: (item: TItem, indexToFocus?: number) => void; setFocusedIndex: ReturnType[1]; @@ -44,6 +44,7 @@ function BaseSelectionListItemRenderer({ singleExecution, titleContainerStyles, shouldUseDefaultRightHandSideCheckmark, + canShowProductTrainingTooltip = true, }: BaseSelectionListItemRendererProps) { const handleOnCheckboxPress = () => { if (isTransactionGroupListItemType(item)) { @@ -94,6 +95,7 @@ function BaseSelectionListItemRenderer({ titleStyles={titleStyles} titleContainerStyles={titleContainerStyles} shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} + canShowProductTrainingTooltip={canShowProductTrainingTooltip} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx index 8b459378ed16..07f965545c58 100644 --- a/src/components/SelectionList/InviteMemberListItem.tsx +++ b/src/components/SelectionList/InviteMemberListItem.tsx @@ -42,15 +42,21 @@ function InviteMemberListItem({ onFocus, shouldSyncFocus, wrapperStyle, + canShowProductTrainingTooltip = true, }: InviteMemberListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {isBetaEnabled} = usePermissions(); + const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext( CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP_MANAGER, - !getIsUserSubmittedExpenseOrScannedReceipt() && isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && isSelectedManagerMcTest(item.login) && !item.isSelected, + canShowProductTrainingTooltip && + !getIsUserSubmittedExpenseOrScannedReceipt() && + isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && + isSelectedManagerMcTest(item.login) && + !item.isSelected, ); const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 7b400f1b4c70..c5bf7c2ef225 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -212,6 +212,9 @@ type ListItem = { /** Boolean whether to display the right icon */ shouldShowRightIcon?: boolean; + + /** Whether product training tooltips can be displayed */ + canShowProductTrainingTooltip?: boolean; }; type TransactionListItemType = ListItem & @@ -433,7 +436,10 @@ type SplitListItemProps = ListItemProps; type TransactionSelectionListItem = ListItemProps & Transaction; -type InviteMemberListItemProps = UserListItemProps; +type InviteMemberListItemProps = UserListItemProps & { + /** Whether product training tooltips can be displayed */ + canShowProductTrainingTooltip?: boolean; +}; type UserSelectionListItemProps = UserListItemProps; @@ -810,6 +816,9 @@ type SelectionListProps = Partial & { /** Whether to show the default right hand side checkmark */ shouldUseDefaultRightHandSideCheckmark?: boolean; + + /** Whether product training tooltips can be displayed */ + canShowProductTrainingTooltip?: boolean; } & TRightHandSideComponent; type SelectionListHandle = { diff --git a/src/pages/Share/ShareRootPage.tsx b/src/pages/Share/ShareRootPage.tsx index 2fe2d73e4138..962b47df7daa 100644 --- a/src/pages/Share/ShareRootPage.tsx +++ b/src/pages/Share/ShareRootPage.tsx @@ -158,6 +158,7 @@ function ShareRootPage() { {() => } diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 850dfefd32f7..82d2c035a655 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -130,6 +130,7 @@ function MoneyRequestParticipantsSelector( const isCategorizeOrShareAction = [CONST.IOU.ACTION.CATEGORIZE, CONST.IOU.ACTION.SHARE].some((option) => option === action); const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT, {canBeMissing: true}); const hasBeenAddedToNudgeMigration = !!tryNewDot?.nudgeMigration?.timestamp; + const canShowManagerMcTest = useMemo(() => !hasBeenAddedToNudgeMigration && action !== CONST.IOU.ACTION.SUBMIT, [hasBeenAddedToNudgeMigration, action]); const importAndSaveContacts = useCallback(() => { contactImport().then(({contactList, permissionStatus}: ContactImportResult) => { @@ -191,7 +192,7 @@ function MoneyRequestParticipantsSelector( shouldSeparateSelfDMChat: iouType !== CONST.IOU.TYPE.INVOICE, shouldSeparateWorkspaceChat: true, includeSelfDM: !isMovingTransactionFromTrackExpense(action) && iouType !== CONST.IOU.TYPE.INVOICE, - canShowManagerMcTest: !hasBeenAddedToNudgeMigration && action !== CONST.IOU.ACTION.SUBMIT, + canShowManagerMcTest, isPerDiemRequest, showRBR: false, }, @@ -215,7 +216,7 @@ function MoneyRequestParticipantsSelector( options.reports, participants, isPerDiemRequest, - hasBeenAddedToNudgeMigration, + canShowManagerMcTest, ]); const chatOptions = useMemo(() => { @@ -615,6 +616,7 @@ function MoneyRequestParticipantsSelector( shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} onSelectRow={onSelectRow} shouldSingleExecuteRowSelect + canShowProductTrainingTooltip={canShowManagerMcTest} headerContent={