diff --git a/src/CONST.ts b/src/CONST.ts index 8a76f7f431b5..77e03855a9d8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -6699,6 +6699,8 @@ const CONST = { LHN_WORKSPACE_CHAT_TOOLTIP: 'workspaceChatLHNTooltip', GLOBAL_CREATE_TOOLTIP: 'globalCreateTooltip', SCAN_TEST_TOOLTIP: 'scanTestTooltip', + SCAN_TEST_TOOLTIP_MANAGER: 'scanTestTooltipManager', + SCAN_TEST_CONFIRMATION: 'scanTestConfirmation', }, SMART_BANNER_HEIGHT: 152, diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 050f2a6e403b..40204c423b15 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -31,7 +31,8 @@ import {calculateAmount, insertTagIntoTransactionTagsString, isMovingTransaction import Log from '@libs/Log'; import {validateAmount} from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; -import {getIOUConfirmationOptionsFromPayeePersonalDetail, hasEnabledOptions} from '@libs/OptionsListUtils'; +import {getIOUConfirmationOptionsFromPayeePersonalDetail, hasEnabledOptions, isSelectedManagerMcTest} from '@libs/OptionsListUtils'; +import Permissions from '@libs/Permissions'; import {getDistanceRateCustomUnitRate, getTagLists, isTaxTrackingEnabled} from '@libs/PolicyUtils'; import type {OptionData} from '@libs/ReportUtils'; import playSound, {SOUNDS} from '@libs/Sound'; @@ -65,11 +66,13 @@ import FormHelpMessage from './FormHelpMessage'; import MoneyRequestAmountInput from './MoneyRequestAmountInput'; import MoneyRequestConfirmationListFooter from './MoneyRequestConfirmationListFooter'; import {PressableWithFeedback} from './Pressable'; +import {useProductTrainingContext} from './ProductTrainingContext'; import SelectionList from './SelectionList'; import type {SectionListDataType} from './SelectionList/types'; import UserListItem from './SelectionList/UserListItem'; import SettlementButton from './SettlementButton'; import Text from './Text'; +import EducationalTooltip from './Tooltip/EducationalTooltip'; type MoneyRequestConfirmationListProps = { /** Callback to inform parent modal of success */ @@ -215,6 +218,11 @@ function MoneyRequestConfirmationList({ const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES); const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST); + const [betas] = useOnyx(ONYXKEYS.BETAS); + const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext( + CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_CONFIRMATION, + Permissions.canUseManagerMcTest(betas) && selectedParticipantsProp.some((participant) => isSelectedManagerMcTest(participant.login)), + ); const policy = policyReal ?? policyDraft; const policyCategories = policyCategoriesReal ?? policyCategoriesDraft; @@ -967,10 +975,37 @@ function MoneyRequestConfirmationList({ /> )} - {button} + + {button} + ); - }, [isReadOnly, iouType, confirm, isConfirmed, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, styles.ph1, styles.mb2, errorMessage]); + }, [ + isReadOnly, + iouType, + confirm, + bankAccountRoute, + iouCurrencyCode, + policyID, + isConfirmed, + splitOrRequestOptions, + errorMessage, + styles.ph1, + styles.mb2, + styles.productTrainingTooltipWrapper, + shouldShowProductTrainingTooltip, + renderProductTrainingTooltip, + ]); const listFooterContent = ( ; @@ -119,18 +121,34 @@ const TOOLTIPS: Record = { content: [ {text: 'productTrainingTooltip.scanTestTooltip.part1', isBold: false}, {text: 'productTrainingTooltip.scanTestTooltip.part2', isBold: true}, + ], + onHideTooltip: () => dismissProductTraining(SCAN_TEST_TOOLTIP), + name: SCAN_TEST_TOOLTIP, + priority: 900, + shouldShow: () => true, + shouldRenderActionButtons: true, + }, + [SCAN_TEST_TOOLTIP_MANAGER]: { + content: [ {text: 'productTrainingTooltip.scanTestTooltip.part3', isBold: false}, {text: 'productTrainingTooltip.scanTestTooltip.part4', isBold: true}, {text: 'productTrainingTooltip.scanTestTooltip.part5', isBold: false}, + ], + onHideTooltip: () => dismissProductTraining(SCAN_TEST_TOOLTIP_MANAGER), + name: SCAN_TEST_TOOLTIP_MANAGER, + priority: 1000, + shouldShow: () => true, + }, + [SCAN_TEST_CONFIRMATION]: { + content: [ {text: 'productTrainingTooltip.scanTestTooltip.part6', isBold: false}, {text: 'productTrainingTooltip.scanTestTooltip.part7', isBold: true}, {text: 'productTrainingTooltip.scanTestTooltip.part8', isBold: false}, ], - onHideTooltip: () => dismissProductTraining(SCAN_TEST_TOOLTIP), - name: SCAN_TEST_TOOLTIP, - priority: 900, - shouldShow: () => false, - shouldRenderActionButtons: true, + onHideTooltip: () => dismissProductTraining(SCAN_TEST_CONFIRMATION), + name: SCAN_TEST_CONFIRMATION, + priority: 1100, + shouldShow: () => true, }, }; diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx index 820552901452..b802859f78ae 100644 --- a/src/components/ProductTrainingContext/index.tsx +++ b/src/components/ProductTrainingContext/index.tsx @@ -101,7 +101,13 @@ function ProductTrainingContextProvider({children}: ChildrenProps) { } // We need to make an exception for the QAB tooltip because it is shown in a modal, otherwise it would be hidden if a modal is visible - if (tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.QUICK_ACTION_BUTTON && isModalVisible) { + if ( + tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.QUICK_ACTION_BUTTON && + tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP && + tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP_MANAGER && + tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_CONFIRMATION && + isModalVisible + ) { return false; } @@ -211,7 +217,7 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou {!!tooltip?.shouldRenderActionButtons && ( - +