Merge pull request Expensify#89753 from callstack-internal/refactor/option-row-descriptive-text

[No QA] refactor: extract OptionRow.DescriptiveText leaf

Author: srikarparsi

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import FS from '@libs/Fullstory';
+import type {OptionData} from '@libs/ReportUtils';
+
+type DescriptiveTextProps = {
+    optionItem: OptionData;
+};
+
+function DescriptiveText({optionItem}: DescriptiveTextProps) {
+    const styles = useThemeStyles();
+
+    const descriptiveText = optionItem?.descriptiveText;
+    if (!descriptiveText) {
+        return null;
+    }
+
+    return (
+        <View
+            style={[styles.flexWrap]}
+            fsClass={FS.getChatFSClass(optionItem)}
+        >
+            <Text style={[styles.textLabel]}>{descriptiveText}</Text>
+        </View>
+    );
+}
+
+DescriptiveText.displayName = 'OptionRow.DescriptiveText';
+
+export default DescriptiveText;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -17,13 +17,13 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
-import FS from '@libs/Fullstory';
 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 Title from './OptionRow/Title';
 import OptionRowAlternateText from './OptionRowAlternateText';
@@ -152,14 +152,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
                                         style={style}
                                     />
                                 </View>
-                                {optionItem?.descriptiveText ? (
-                                    <View
-                                        style={[styles.flexWrap]}
-                                        fsClass={FS.getChatFSClass(optionItem)}
-                                    >
-                                        <Text style={[styles.textLabel]}>{optionItem.descriptiveText}</Text>
-                                    </View>
-                                ) : null}
+                                <DescriptiveText optionItem={optionItem} />
                                 <OptionRowErrorBadge
                                     brickRoadIndicator={brickRoadIndicator}
                                     actionBadgeText={actionBadgeText}