diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 2014a105b4d1..2e240e9bbb26 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -986,6 +986,7 @@ const CONST = {
RILLET: 'rillet',
RULES_REVAMP: 'rulesRevamp',
COMMUTER_EXCLUSIONS: 'commuterExclusions',
+ DEFAULT_LETTER_AVATARS: 'defaultLetterAvatars',
},
BUTTON_STATES: {
DEFAULT: 'default',
diff --git a/src/components/AvatarSelector.tsx b/src/components/AvatarSelector.tsx
index 58b47ea2c330..4489718037e0 100644
--- a/src/components/AvatarSelector.tsx
+++ b/src/components/AvatarSelector.tsx
@@ -1,5 +1,6 @@
import useLetterAvatars from '@hooks/useLetterAvatars';
import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
@@ -43,6 +44,7 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {avatarList} = useLetterAvatars(name, size);
+ const {isBetaEnabled} = usePermissions();
const iconSize = StyleUtils.getAvatarSize(size);
@@ -74,28 +76,29 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
);
})}
- {avatarList.map(({id, StyledLetterAvatar}) => {
- const isSelected = selectedID === id;
-
- return (
- onSelect(id)}
- style={[styles.avatarSelectorWrapper, isSelected && styles.avatarSelected]}
- >
-
-
- );
- })}
+ {isBetaEnabled(CONST.BETAS.DEFAULT_LETTER_AVATARS) &&
+ avatarList.map(({id, StyledLetterAvatar}) => {
+ const isSelected = selectedID === id;
+
+ return (
+ onSelect(id)}
+ style={[styles.avatarSelectorWrapper, isSelected && styles.avatarSelected]}
+ >
+
+
+ );
+ })}
{/* We need to add several invisible items at the end of the avatar list to guarantee that the last row avatars are aligned properly */}
{[...Array(SPACER_SIZE).keys()].map((i) => (
({
return {avatarList, avatarMap: {}};
},
}));
+
+const mockIsBetaEnabled = jest.fn();
+jest.mock('@hooks/usePermissions', () => ({
+ __esModule: true,
+ default: () => ({isBetaEnabled: mockIsBetaEnabled}),
+}));
+
const mockName = 'Alice';
describe('AvatarSelector', () => {
@@ -50,6 +57,7 @@ describe('AvatarSelector', () => {
beforeEach(() => {
jest.clearAllMocks();
+ mockIsBetaEnabled.mockReturnValue(false);
});
const renderAvatarSelector = (props = {}) => {
@@ -130,6 +138,10 @@ describe('AvatarSelector', () => {
describe('avatarList (letter avatars)', () => {
const firstChar = getFirstAlphaNumericCharacter(mockName).toLowerCase();
+ beforeEach(() => {
+ mockIsBetaEnabled.mockReturnValue(true);
+ });
+
it('letter avatars have correct ID format when they are rendered', async () => {
renderAvatarSelector({name: mockName});
await waitForBatchedUpdates();
@@ -207,4 +219,15 @@ describe('AvatarSelector', () => {
expect(letterAvatars.at(0)?.props.testID).toMatch(/^AvatarSelector_letter-avatar-/);
});
});
+
+ describe('when LETTER_AVATARS beta is disabled', () => {
+ it('does not render any letter avatars even with a name', async () => {
+ renderAvatarSelector({name: mockName});
+ await waitForBatchedUpdates();
+
+ const letterAvatars = screen.queryAllByTestId(/^AvatarSelector_letter-avatar/);
+
+ expect(letterAvatars).toHaveLength(0);
+ });
+ });
});