fix(components): enhance user name handling for multiple surnames

- Add support for two surnames in `getUserFullName` function
- Refactor `AvatarsGroup` component to handle new name format
- Refactor `UserDisplayItem` component to handle new name format

Ticket: task/Transversal-176
Reviewed-by: @MIGUELez11
Refs: #209

packages/components/src/helpers/getUserFullName.js

@@ -1,9 +1,15 @@
-function getUserFullName(user) {
+function getUserFullName(user, options = { singleSurname: false }) {
   const name = user.name?.trim() ?? null;
   const surname = user.surnames?.trim() ?? null;
   const secondSurname = user.secondSurname?.trim() ?? null;
 
-  const surnames = [secondSurname, surname].filter(Boolean).join(' ');
+  if (options.singleSurname && name && surname) {
+    const surnameParts = surname.split(' ');
+    const firstSurname = surnameParts[0];
+    return `${firstSurname}, ${name}`;
+  }
+
+  const surnames = [surname, secondSurname].filter(Boolean).join(', ');
   const fullName = [surnames, name].filter(Boolean).join(', ');
 
   return fullName.trim();

packages/components/src/informative/AvatarsGroup/AvatarsGroup.js

@@ -6,6 +6,7 @@ import { Box } from '../../layout/Box';
 import { Avatar } from '../Avatar/Avatar';
 import { AvatarsGroupStyles } from './AvatarsGroup.styles';
 import { AVATARS_GROUP_DEFAULT_PROPS, AVATARS_GROUP_PROP_TYPES } from './AvatarsGroup.constants';
+import { getUserFullName } from '../../helpers';
 
 const AvatarsGroup = ({
   data,
@@ -35,7 +36,7 @@ const AvatarsGroup = ({
         if (item.surnames && item.name) {
           return {
             ...item,
-            fullName: `${item.surnames}, ${item.name}`,
+            fullName: getUserFullName(item, { singleSurname: true }),
           };
         }
         return item;

packages/components/src/informative/UserDisplayItem/UserDisplayItem.js

@@ -92,7 +92,7 @@ const UserDisplayItem = (properties) => {
     return name;
   }, [name, surnames, variant]);
 
-  const userFullName = getUserFullName(properties);
+  const userFullName = getUserFullName(properties, { singleSurname: true });
 
   const Icon = (
     <>