Merge pull request Expensify#89919 from callstack-internal/refactor/option-row-error-badge

[No QA] refactor: OptionRow.ErrorBadge owns its own translation

Author: mountiny

…ist/OptionRowLHN/OptionRowErrorBadge.tsx …st/OptionRowLHN/OptionRow/ErrorBadge.tsxsrc/components/LHNOptionsList/OptionRowLHN/OptionRowErrorBadge.tsx renamed to src/components/LHNOptionsList/OptionRowLHN/OptionRow/ErrorBadge.tsx src/components/LHNOptionsList/OptionRowLHN/OptionRowErrorBadge.tsx renamed to src/components/LHNOptionsList/OptionRowLHN/OptionRow/ErrorBadge.tsx

@@ -2,26 +2,32 @@ import React from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
 import Icon from '@components/Icon';
+import useEnvironment from '@hooks/useEnvironment';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {OptionData} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 
-type OptionRowErrorBadgeProps = {
+type ErrorBadgeProps = {
     brickRoadIndicator: OptionData['brickRoadIndicator'];
-    actionBadgeText: string;
+    actionBadge: OptionData['actionBadge'];
 };
 
-function OptionRowErrorBadge({brickRoadIndicator, actionBadgeText}: OptionRowErrorBadgeProps) {
+function ErrorBadge({brickRoadIndicator, actionBadge}: ErrorBadgeProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isProduction} = useEnvironment();
     const {DotIndicator} = useMemoizedLazyExpensifyIcons(['DotIndicator']);
 
     if (brickRoadIndicator !== CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR) {
         return null;
     }
 
+    const actionBadgeText = !isProduction && actionBadge ? translate(`common.actionBadge.${actionBadge}`) : '';
+
     return (
         <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
             {actionBadgeText ? (
@@ -41,6 +47,6 @@ function OptionRowErrorBadge({brickRoadIndicator, actionBadgeText}: OptionRowErr
     );
 }
 
-OptionRowErrorBadge.displayName = 'OptionRowErrorBadge';
+ErrorBadge.displayName = 'OptionRow.ErrorBadge';
 
-export default OptionRowErrorBadge;
+export default ErrorBadge;

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -25,10 +25,10 @@ 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 Subtitle from './OptionRow/Subtitle';
 import Title from './OptionRow/Title';
 import OptionRowAvatar from './OptionRowAvatar';
-import OptionRowErrorBadge from './OptionRowErrorBadge';
 import OptionRowInfoBadge from './OptionRowInfoBadge';
 import OptionRowPressable from './OptionRowPressable';
 import OptionRowTooltipLayer from './OptionRowTooltipLayer';
@@ -153,9 +153,9 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
                                     />
                                 </View>
                                 <DescriptiveText optionItem={optionItem} />
-                                <OptionRowErrorBadge
+                                <ErrorBadge
                                     brickRoadIndicator={brickRoadIndicator}
-                                    actionBadgeText={actionBadgeText}
+                                    actionBadge={optionItem.actionBadge}
                                 />
                             </View>
                         </View>