Merge pull request Expensify#89914 from callstack-internal/refactor/option-row-onboarding-badge

[No QA] refactor: extract OptionRow.OnboardingBadge leaf

Author: mountiny

src/components/LHNOptionsList/OptionRowLHN/OptionRow/OnboardingBadge.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {OptionData} from '@libs/ReportUtils';
+import {isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils} from '@libs/ReportUtils';
+import FreeTrial from '@pages/settings/Subscription/FreeTrial';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type OnboardingBadgeProps = {
+    /** The option data for the report row this badge belongs to. Used to determine whether the report is the onboarding chat. */
+    optionItem: OptionData;
+};
+
+function OnboardingBadge({optionItem}: OnboardingBadgeProps) {
+    const styles = useThemeStyles();
+    const {onboarding, onboardingPurpose} = useLHNTooltipContext();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+
+    if (!isChatUsedForOnboardingReportUtils(optionItem, onboarding, conciergeReportID, onboardingPurpose)) {
+        return null;
+    }
+
+    return <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.flexShrink1]} />;
+}
+
+OnboardingBadge.displayName = 'OptionRow.OnboardingBadge';
+
+export default OnboardingBadge;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -12,20 +12,17 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 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 DateUtils from '@libs/DateUtils';
 import {shouldUseBoldText} from '@libs/OptionsListUtils';
-import {isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils} from '@libs/ReportUtils';
-import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import DescriptiveText from './OptionRow/DescriptiveText';
 import DraftIndicator from './OptionRow/DraftIndicator';
 import ErrorBadge from './OptionRow/ErrorBadge';
+import OnboardingBadge from './OptionRow/OnboardingBadge';
 import Subtitle from './OptionRow/Subtitle';
 import Title from './OptionRow/Title';
 import OptionRowAvatar from './OptionRowAvatar';
@@ -41,9 +38,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
     const StyleUtils = useStyleUtils();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pin']);
 
-    const {onboardingPurpose, onboarding, isScreenFocused} = useLHNTooltipContext();
-    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const isChatUsedForOnboarding = isChatUsedForOnboardingReportUtils(optionItem, onboarding, conciergeReportID, onboardingPurpose);
+    const {isScreenFocused} = useLHNTooltipContext();
 
     const {translate} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -135,7 +130,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
                                             displayNameStyle={displayNameStyle}
                                             testID={testID}
                                         />
-                                        {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.flexShrink1]} />}
+                                        <OnboardingBadge optionItem={optionItem} />
                                         {isStatusVisible && (
                                             <Tooltip
                                                 text={statusContent}