refactor: OptionRowFreeTrialBadge owns onboarding lookup

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 <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.flexShrink1]} />;
+}
+
+OptionRowFreeTrialBadge.displayName = 'OptionRowFreeTrialBadge';
+
+export default OptionRowFreeTrialBadge;

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}
                                     />
                                     <OptionRowAlternateText
                                         alternateText={optionItem.alternateText}

src/components/LHNOptionsList/OptionRowLHN/OptionRowTitleWithStatus.tsx

@@ -10,10 +10,10 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {isGroupChat, isOneOnOneChat, isSystemChat} from '@libs/ReportUtils';
-import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import CONST from '@src/CONST';
 import type {Report} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import OptionRowFreeTrialBadge from './OptionRowFreeTrialBadge';
 
 type OptionRowTitleWithStatusProps = {
     /** Option row data used for the title, tooltips, and status emoji */
@@ -27,13 +27,10 @@ type OptionRowTitleWithStatusProps = {
 
     /** Row test id forwarded to DisplayNames */
     testID: number;
-
-    /** Whether this chat is part of the onboarding flow (shows Free Trial badge) */
-    isChatUsedForOnboarding: boolean;
 };
 
 /** DisplayNames, onboarding FreeTrial badge, and 1:1 status emoji for an LHN row */
-function OptionRowTitleWithStatus({optionItem, report, displayNameStyle, testID, isChatUsedForOnboarding}: OptionRowTitleWithStatusProps) {
+function OptionRowTitleWithStatus({optionItem, report, displayNameStyle, testID}: OptionRowTitleWithStatusProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -71,7 +68,7 @@ function OptionRowTitleWithStatus({optionItem, report, displayNameStyle, testID,
                 }
                 testID={testID}
             />
-            {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.flexShrink1]} />}
+            <OptionRowFreeTrialBadge report={report} />
             {isStatusVisible && (
                 <Tooltip
                     text={statusContent}