Fix dynamic name length

src/common/utils.ts

@@ -204,4 +204,7 @@ export const getAddOrRemoveRoleIds = (roles: any, payload: any) => {
 // lg breakpoint is 1200px for MUI
 export const isGreaterThanLgBreakpoint = () => window.innerWidth > 1200;
 
+export const slicedString = (string: string, length: number) =>
+  string?.length > length ? `${string.slice(0, length)}...` : string;
+
 export default getObject;

src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx

@@ -11,6 +11,7 @@ import { WhatsAppToJsx } from 'common/RichEditor';
 import { MessageType } from '../MessageType/MessageType';
 import styles from './ChatConversation.module.css';
 import Track from 'services/TrackService';
+import { slicedString } from 'common/utils';
 
 export interface ChatConversationProps {
   contactId: number;
@@ -152,7 +153,7 @@ const ChatConversation = ({
     chatBubble = [styles.ChatBubble, styles.ChatBubbleUnread];
   }
 
-  const name = contactName?.length > 20 ? `${contactName.slice(0, 20)}...` : contactName;
+  const name = slicedString(contactName, 20);
 
   const { type, body } = lastMessage;
   const isTextType = type === 'TEXT';

src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx

@@ -10,7 +10,7 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown';
 import { Input } from 'components/UI/Form/Input/Input';
 import { MessageType } from 'containers/Chat/ChatConversations/MessageType/MessageType';
 import { MEDIA_MESSAGE_TYPES } from 'common/constants';
-import { validateMedia } from 'common/utils';
+import { slicedString, validateMedia } from 'common/utils';
 import setLogs from 'config/logs';
 import { UPLOAD_MEDIA } from 'graphql/mutations/Chat';
 import CrossIcon from 'assets/images/icons/Cross.svg?react';
@@ -167,7 +167,7 @@ export const AddAttachment = ({
     if (media) {
       const mediaName = media.name;
       const extension = mediaName.slice((Math.max(0, mediaName.lastIndexOf('.')) || Infinity) + 1);
-      const shortenedName = mediaName.length > 15 ? `${mediaName.slice(0, 15)}...` : mediaName;
+      const shortenedName = slicedString(mediaName, 15);
       setFileName(shortenedName);
       setUploading(true);
       uploadMedia({

src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx

@@ -49,6 +49,7 @@ import { DialogBox } from '../../../../components/UI/DialogBox/DialogBox';
 import { Tooltip } from '../../../../components/UI/Tooltip/Tooltip';
 import { CLEAR_MESSAGES } from '../../../../graphql/mutations/Chat';
 import { showChats } from '../../../../common/responsive';
+import { slicedString } from 'common/utils';
 import { CollectionInformation } from '../../../Collection/CollectionInformation/CollectionInformation';
 import AddContactsToCollection from '../AddContactsToCollection/AddContactsToCollection';
 
@@ -617,7 +618,7 @@ export const ContactBar = ({
                   noWrap
                   data-testid="beneficiaryName"
                 >
-                  {displayName}
+                  {slicedString(displayName, 40)}
                 </Typography>
               </div>
               {contactCollections}

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx

@@ -11,7 +11,7 @@
 import { setNotification } from 'common/notification';
 import { listIcon } from '../SuperAdminContactManagement/SuperAdminContactManagement';
 import styles from './AdminContactManagement.module.css';
-import { exportCsvFile } from 'common/utils';
+import { exportCsvFile, slicedString } from 'common/utils';
 
 export const AdminContactManagement = () => {
   const [fileName, setFileName] = useState<string>('');
@@ -49,7 +49,7 @@
       if (extension !== 'csv') {
         setErrors([{ message: 'Please make sure the file format matches the sample' }]);
       } else {
-        const shortenedName = mediaName.length > 10 ? `${mediaName.slice(0, 10)}...` : mediaName;
+        const shortenedName = slicedString(mediaName, 10);
         setFileName(shortenedName);
         setCsvContent(reader.result);
       }

src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx

@@ -13,6 +13,7 @@
 import CrossIcon from 'assets/images/icons/Cross.svg?react';
 import { UPLOAD_CONTACTS_SAMPLE } from 'config';
 import { IMPORT_CONTACTS } from 'graphql/mutations/Contact';
+import { slicedString } from 'common/utils';
 import { setNotification } from 'common/notification';
 import styles from './UploadContactsDialog.module.css';
 
@@ -76,7 +77,7 @@
       if (extension !== 'csv') {
         setError(true);
       } else {
-        const shortenedName = mediaName.length > 15 ? `${mediaName.slice(0, 15)}...` : mediaName;
+        const shortenedName = slicedString(mediaName, 15);
         setFileName(shortenedName);
         setCsvContent(reader.result);
       }

src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx

@@ -10,7 +10,7 @@ import { List } from 'containers/List/List';
 import Menu from 'components/UI/Menu/Menu';
 import { Button } from 'components/UI/Form/Button/Button';
 import { FILTER_WEBHOOK_LOGS, GET_WEBHOOK_LOGS_COUNT } from 'graphql/queries/WebhookLogs';
-import { copyToClipboard } from 'common/utils';
+import { copyToClipboard, slicedString } from 'common/utils';
 import { DATE_TIME_FORMAT } from 'common/constants';
 import styles from './WebhookLogsList.module.css';
 
@@ -121,7 +121,7 @@ export const WebhookLogsList = () => {
           onKeyDown={handleClick}
           aria-hidden="true"
         >
-          {newtext.length > 21 ? `${newtext.slice(0, 21)}...` : newtext}
+          {slicedString(newtext, 21)}
         </div>
       </Menu>
     );