refactor: OptionRow.ErrorBadge owns its own translation

Author: BartekObudzinski

…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

@@ -26,9 +26,9 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import ErrorBadge from './OptionRow/ErrorBadge';
 import OptionRowAlternateText from './OptionRowAlternateText';
 import OptionRowAvatar from './OptionRowAvatar';
-import OptionRowErrorBadge from './OptionRowErrorBadge';
 import OptionRowInfoBadge from './OptionRowInfoBadge';
 import OptionRowPressable from './OptionRowPressable';
 import OptionRowTooltipLayer from './OptionRowTooltipLayer';
@@ -193,9 +193,9 @@ function OptionRowLHN({
                                         <Text style={[styles.textLabel]}>{optionItem.descriptiveText}</Text>
                                     </View>
                                 ) : null}
-                                <OptionRowErrorBadge
+                                <ErrorBadge
                                     brickRoadIndicator={brickRoadIndicator}
-                                    actionBadgeText={actionBadgeText}
+                                    actionBadge={optionItem.actionBadge}
                                 />
                             </View>
                         </View>