diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRowFreeTrialBadge.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRowFreeTrialBadge.tsx new file mode 100644 index 000000000000..3386fe8eefed --- /dev/null +++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRowFreeTrialBadge.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils} from '@libs/ReportUtils'; +import FreeTrial from '@pages/settings/Subscription/FreeTrial'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {Report} from '@src/types/onyx'; + +type OptionRowFreeTrialBadgeProps = { + /** Report backing this row, used to decide if the badge should appear */ + report?: Report; +}; + +/** + * FreeTrial badge for an LHN row. Self-subscribes to the onboarding context and conciergeReportID + * so the row's parent does not have to compute or pass this state down. + */ +function OptionRowFreeTrialBadge({report}: OptionRowFreeTrialBadgeProps) { + const styles = useThemeStyles(); + const {onboarding, onboardingPurpose} = useLHNTooltipContext(); + const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); + + if (!isChatUsedForOnboardingReportUtils(report, onboarding, conciergeReportID, onboardingPurpose)) { + return null; + } + + return ; +} + +OptionRowFreeTrialBadge.displayName = 'OptionRowFreeTrialBadge'; + +export default OptionRowFreeTrialBadge; diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx index a984c1210359..d8c22015bcd8 100644 --- a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx @@ -10,16 +10,13 @@ import getContextMenuAccessibilityProps from '@components/utils/getContextMenuAc import useEnvironment from '@hooks/useEnvironment'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; -import useOnyx from '@hooks/useOnyx'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import FS from '@libs/Fullstory'; import {shouldUseBoldText} from '@libs/OptionsListUtils'; -import {isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils} from '@libs/ReportUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import OptionRowAlternateText from './OptionRowAlternateText'; import OptionRowAvatar from './OptionRowAvatar'; import OptionRowErrorBadge from './OptionRowErrorBadge'; @@ -47,9 +44,7 @@ function OptionRowLHN({ const StyleUtils = useStyleUtils(); const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pencil', 'Pin']); - const {onboardingPurpose, onboarding, isScreenFocused} = useLHNTooltipContext(); - const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); - const isChatUsedForOnboarding = isChatUsedForOnboardingReportUtils(report, onboarding, conciergeReportID, onboardingPurpose); + const {isScreenFocused} = useLHNTooltipContext(); const {translate} = useLocalize(); const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT; @@ -133,7 +128,6 @@ function OptionRowLHN({ report={report} displayNameStyle={displayNameStyle} testID={testID} - isChatUsedForOnboarding={isChatUsedForOnboarding} /> - {isChatUsedForOnboarding && } + {isStatusVisible && (