diff --git a/client/views/InfoPanel/Field.tsx b/client/views/InfoPanel/Field.tsx index 2b8f8bb5d64..64651ba2405 100644 --- a/client/views/InfoPanel/Field.tsx +++ b/client/views/InfoPanel/Field.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; import React, { FC } from 'react'; -const Field: FC = ({ children }) => {children}; +const Field: FC = ({ children }) => {children}; export default Field; diff --git a/client/views/InfoPanel/Title.tsx b/client/views/InfoPanel/Title.tsx index a9209f3e930..8fdfa8966bc 100644 --- a/client/views/InfoPanel/Title.tsx +++ b/client/views/InfoPanel/Title.tsx @@ -17,7 +17,7 @@ const Title: FC = ({ title, icon }) => ( withTruncatedText > {typeof icon === 'string' ? : icon} - + {title} diff --git a/client/views/omnichannel/directory/chats/contextualBar/CustomField.js b/client/views/omnichannel/components/CustomField.js similarity index 67% rename from client/views/omnichannel/directory/chats/contextualBar/CustomField.js rename to client/views/omnichannel/components/CustomField.js index 10881491392..87b05f280f7 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/CustomField.js +++ b/client/views/omnichannel/components/CustomField.js @@ -1,10 +1,11 @@ import { Box } from '@rocket.chat/fuselage'; import React from 'react'; -import { useTranslation } from '../../../../../contexts/TranslationContext'; -import { useEndpointData } from '../../../../../hooks/useEndpointData'; -import { AsyncStatePhase } from '../../../../../lib/asyncState'; -import { FormSkeleton } from '../../Skeleton'; +import { useTranslation } from '../../../contexts/TranslationContext'; +import { AsyncStatePhase } from '../../../hooks/useAsyncState'; +import { useEndpointData } from '../../../hooks/useEndpointData'; +import { FormSkeleton } from '../directory/Skeleton'; +import Field from './Field'; import Info from './Info'; import Label from './Label'; @@ -20,10 +21,10 @@ const CustomField = ({ id, value }) => { const { label } = data.customField; return ( label && ( - <> + {value} - + ) ); }; diff --git a/client/views/omnichannel/components/Field.js b/client/views/omnichannel/components/Field.js new file mode 100644 index 00000000000..d45043ae5e6 --- /dev/null +++ b/client/views/omnichannel/components/Field.js @@ -0,0 +1,6 @@ +import { Box } from '@rocket.chat/fuselage'; +import React from 'react'; + +const Field = ({ children }) => {children}; + +export default Field; diff --git a/client/views/omnichannel/directory/contacts/contextualBar/Info.js b/client/views/omnichannel/components/Info.js similarity index 82% rename from client/views/omnichannel/directory/contacts/contextualBar/Info.js rename to client/views/omnichannel/components/Info.js index 0e5da5de698..da4b473039f 100644 --- a/client/views/omnichannel/directory/contacts/contextualBar/Info.js +++ b/client/views/omnichannel/components/Info.js @@ -1,7 +1,7 @@ import { css } from '@rocket.chat/css-in-js'; import React from 'react'; -import UserCard from '../../../../../components/UserCard'; +import UserCard from '../../../components/UserCard'; const wordBreak = css` word-break: break-word; diff --git a/client/views/omnichannel/directory/chats/contextualBar/Label.js b/client/views/omnichannel/components/Label.js similarity index 53% rename from client/views/omnichannel/directory/chats/contextualBar/Label.js rename to client/views/omnichannel/components/Label.js index c6e3f503b2c..80c1fb2353b 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/Label.js +++ b/client/views/omnichannel/components/Label.js @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; import React from 'react'; -const Label = (props) => ; +const Label = (props) => ; export default Label; diff --git a/client/views/omnichannel/directory/ChatsContextualBar.js b/client/views/omnichannel/directory/ChatsContextualBar.js index d517a1613f3..496a13d0109 100644 --- a/client/views/omnichannel/directory/ChatsContextualBar.js +++ b/client/views/omnichannel/directory/ChatsContextualBar.js @@ -1,4 +1,3 @@ -import { Icon, Box } from '@rocket.chat/fuselage'; import React from 'react'; import VerticalBar from '../../../components/VerticalBar'; @@ -29,9 +28,8 @@ const ChatsContextualBar = ({ chatReload }) => { {context === 'info' && ( <> - - {t('Room_Info')} - + + {t('Room_Info')} { )} {context === 'edit' && ( - - {t('edit-room')} - + <> + + {t('edit-room')} + )} diff --git a/client/views/omnichannel/directory/ContactContextualBar.js b/client/views/omnichannel/directory/ContactContextualBar.js index 3962cccc150..aeff08c24f3 100644 --- a/client/views/omnichannel/directory/ContactContextualBar.js +++ b/client/views/omnichannel/directory/ContactContextualBar.js @@ -1,4 +1,3 @@ -import { Icon, Box } from '@rocket.chat/fuselage'; import React from 'react'; import VerticalBar from '../../../components/VerticalBar'; @@ -23,19 +22,22 @@ const ContactContextualBar = ({ contactReload }) => { {context === 'new' && ( - - {t('New_Contact')} - + <> + + {t('New_Contact')} + )} {context === 'info' && ( - - {t('Contact_Info')} - + <> + + {t('New_Contact')} + )} {context === 'edit' && ( - - {t('Edit_Contact_Profile')} - + <> + + {t('Edit_Contact_Profile')} + )} diff --git a/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index 34c6891216d..e71eb93f47f 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -7,9 +7,10 @@ import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { useTranslation } from '../../../../../contexts/TranslationContext'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; const AgentField = ({ agent }) => { const t = useTranslation(); @@ -27,7 +28,7 @@ const AgentField = ({ agent }) => { const displayName = name || username; return ( - <> + @@ -38,7 +39,7 @@ const AgentField = ({ agent }) => { )} - + ); }; diff --git a/client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js b/client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js index dbc5949fa89..dcd3e67945b 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js +++ b/client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js @@ -13,13 +13,14 @@ import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime'; import { useFormatDuration } from '../../../../../hooks/useFormatDuration'; +import CustomField from '../../../components/CustomField'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; import AgentField from './AgentField'; import ContactField from './ContactField'; -import CustomField from './CustomField'; import DepartmentField from './DepartmentField'; -import Info from './Info'; -import Label from './Label'; import PriorityField from './PriorityField'; import VisitorClientInfo from './VisitorClientInfo'; @@ -93,7 +94,11 @@ function ChatInfo({ id, route }) { }); if (state === AsyncStatePhase.LOADING) { - return ; + return ( + + + + ); } if (error || !data || !data.room) { @@ -109,7 +114,7 @@ function ChatInfo({ id, route }) { {servedBy && } {departmentId && } {tags && tags.length > 0 && ( - <> + {tags.map((tag) => ( @@ -120,59 +125,59 @@ function ChatInfo({ id, route }) { ))} - + )} {topic && ( - <> + {topic} - + )} {ts && ( - <> + {servedBy ? ( {moment(servedBy.ts).from(moment(ts), true)} ) : ( {moment(ts).fromNow(true)} )} - + )} {closedAt && ( - <> + {moment(closedAt).from(moment(ts), true)} - + )} {ts && ( - <> + {formatDateAndTime(ts)} - + )} {closedAt && ( - <> + {formatDateAndTime(closedAt)} - + )} {servedBy?.ts && ( - <> + {formatDateAndTime(servedBy.ts)} - + )} {metrics?.response?.avg && formatDuration(metrics.response.avg) && ( - <> + {formatDuration(metrics.response.avg)} - + )} {!waitingResponse && responseBy?.lastMessageTs && ( - <> + {moment(responseBy.lastMessageTs).fromNow(true)} - + )} {canViewCustomFields() && livechatData && diff --git a/client/views/omnichannel/directory/chats/contextualBar/ChatsContextualBar.js b/client/views/omnichannel/directory/chats/contextualBar/ChatsContextualBar.js index af3bb328c05..7332d9ebd4b 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/ChatsContextualBar.js +++ b/client/views/omnichannel/directory/chats/contextualBar/ChatsContextualBar.js @@ -1,4 +1,3 @@ -import { Icon, Box } from '@rocket.chat/fuselage'; import React from 'react'; import VerticalBar from '../../../../../components/VerticalBar'; @@ -27,9 +26,8 @@ const ChatsContextualBar = ({ rid }) => { return ( <> - - {t('Room_Info')} - + + {t('Room_Info')} {context === 'edit' ? ( diff --git a/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 7cd8c5a4e55..9546b78fa3d 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -7,9 +7,10 @@ import { UserStatus } from '../../../../../components/UserStatus'; import { useTranslation } from '../../../../../contexts/TranslationContext'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; const ContactField = ({ contact, room }) => { const t = useTranslation(); @@ -36,7 +37,7 @@ const ContactField = ({ contact, room }) => { const displayName = name || username; return ( - <> + @@ -47,7 +48,7 @@ const ContactField = ({ contact, room }) => { )} - + ); }; diff --git a/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.js b/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.js index 88418aa54a0..473a884dca3 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.js +++ b/client/views/omnichannel/directory/chats/contextualBar/DepartmentField.js @@ -3,9 +3,10 @@ import React from 'react'; import { useTranslation } from '../../../../../contexts/TranslationContext'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; const DepartmentField = ({ departmentId }) => { const t = useTranslation(); @@ -17,10 +18,10 @@ const DepartmentField = ({ departmentId }) => { department: { name }, } = data || { department: {} }; return ( - <> + {name} - + ); }; diff --git a/client/views/omnichannel/directory/chats/contextualBar/Info.js b/client/views/omnichannel/directory/chats/contextualBar/Info.js deleted file mode 100644 index 0e5da5de698..00000000000 --- a/client/views/omnichannel/directory/chats/contextualBar/Info.js +++ /dev/null @@ -1,14 +0,0 @@ -import { css } from '@rocket.chat/css-in-js'; -import React from 'react'; - -import UserCard from '../../../../../components/UserCard'; - -const wordBreak = css` - word-break: break-word; -`; - -const Info = ({ className, ...props }) => ( - -); - -export default Info; diff --git a/client/views/omnichannel/directory/chats/contextualBar/PriorityField.js b/client/views/omnichannel/directory/chats/contextualBar/PriorityField.js index 58ac1fb99c2..26f02eed06a 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/PriorityField.js +++ b/client/views/omnichannel/directory/chats/contextualBar/PriorityField.js @@ -4,9 +4,10 @@ import React from 'react'; import { useTranslation } from '../../../../../contexts/TranslationContext'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; const PriorityField = ({ id }) => { const t = useTranslation(); @@ -21,10 +22,10 @@ const PriorityField = ({ id }) => { } const { name } = data; return ( - <> + {name} - + ); }; diff --git a/client/views/omnichannel/directory/chats/contextualBar/VisitorClientInfo.js b/client/views/omnichannel/directory/chats/contextualBar/VisitorClientInfo.js index 68b14f18c6d..9eee1b2b4ad 100644 --- a/client/views/omnichannel/directory/chats/contextualBar/VisitorClientInfo.js +++ b/client/views/omnichannel/directory/chats/contextualBar/VisitorClientInfo.js @@ -4,9 +4,10 @@ import UAParser from 'ua-parser-js'; import { useTranslation } from '../../../../../contexts/TranslationContext'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; const VisitorClientInfo = ({ uid }) => { const t = useTranslation(); @@ -30,16 +31,16 @@ const VisitorClientInfo = ({ uid }) => { return ( <> {clientData.os && ( - <> + {clientData.os} - + )} {clientData.browser && ( - <> + {clientData.browser} - + )} ); diff --git a/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index be5d5d11f91..a7fb61443f3 100644 --- a/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -14,12 +14,13 @@ import { useTranslation } from '../../../../../contexts/TranslationContext'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; +import CustomField from '../../../components/CustomField'; +import Field from '../../../components/Field'; +import Info from '../../../components/Info'; +import Label from '../../../components/Label'; import { FormSkeleton } from '../../Skeleton'; -import CustomField from './CustomField'; -import Info from './Info'; -import Label from './Label'; -function ContactInfo({ id, rid, route }) { +const ContactInfo = ({ id, rid, route }) => { const t = useTranslation(); const routePath = useRoute(route || 'omnichannel-directory'); @@ -73,7 +74,11 @@ function ContactInfo({ id, rid, route }) { contact: { name, username, visitorEmails, phone, livechatData, ts, lastChat, contactManager }, } = data || { contact: {} }; if (state === AsyncStatePhase.LOADING) { - return ; + return ( + + + + ); } if (error || !data || !data.contact) { @@ -102,7 +107,7 @@ function ContactInfo({ id, rid, route }) { {displayName && ( - <> + @@ -117,32 +122,32 @@ function ContactInfo({ id, rid, route }) { )} - + )} {visitorEmails && visitorEmails.length && ( - <> + {visitorEmails[0].address} - + )} {phone && phone.length && ( - <> + {phone[0].phoneNumber} - + )} {ts && ( - <> + {formatDate(ts)} - + )} {lastChat && ( - <> + {formatDate(lastChat.ts)} - + )} {canViewCustomFields() && livechatData && @@ -152,10 +157,10 @@ function ContactInfo({ id, rid, route }) { livechatData[key] && , )} {contactManager && ( - <> + - + )} @@ -173,6 +178,6 @@ function ContactInfo({ id, rid, route }) { ); -} +}; export default ContactInfo; diff --git a/client/views/omnichannel/directory/contacts/contextualBar/ContactsContextualBar.js b/client/views/omnichannel/directory/contacts/contextualBar/ContactsContextualBar.js index 19a61572c32..7f51cc58f44 100644 --- a/client/views/omnichannel/directory/contacts/contextualBar/ContactsContextualBar.js +++ b/client/views/omnichannel/directory/contacts/contextualBar/ContactsContextualBar.js @@ -1,4 +1,3 @@ -import { Icon, Box } from '@rocket.chat/fuselage'; import React from 'react'; import VerticalBar from '../../../../../components/VerticalBar'; @@ -34,9 +33,8 @@ const ContactsContextualBar = ({ rid }) => { return ( <> - - {t('Contact_Info')} - + + {t('Contact_Info')} {context === 'edit' ? ( diff --git a/client/views/omnichannel/directory/contacts/contextualBar/CustomField.js b/client/views/omnichannel/directory/contacts/contextualBar/CustomField.js deleted file mode 100644 index 1264629fae4..00000000000 --- a/client/views/omnichannel/directory/contacts/contextualBar/CustomField.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React from 'react'; - -import { useTranslation } from '../../../../../contexts/TranslationContext'; -import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; -import { useEndpointData } from '../../../../../hooks/useEndpointData'; -import { FormSkeleton } from '../../Skeleton'; -import Info from './Info'; -import Label from './Label'; - -const CustomField = ({ id, value }) => { - const t = useTranslation(); - const { value: data, phase: state, error } = useEndpointData(`livechat/custom-fields/${id}`); - if (state === AsyncStatePhase.LOADING) { - return ; - } - if (error || !data || !data.customField) { - return {t('Custom_Field_Not_Found')}; - } - const { label } = data.customField; - return ( - label && ( - - - {value} - - ) - ); -}; - -export default CustomField; diff --git a/client/views/omnichannel/directory/contacts/contextualBar/Label.js b/client/views/omnichannel/directory/contacts/contextualBar/Label.js deleted file mode 100644 index c6e3f503b2c..00000000000 --- a/client/views/omnichannel/directory/contacts/contextualBar/Label.js +++ /dev/null @@ -1,6 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React from 'react'; - -const Label = (props) => ; - -export default Label; diff --git a/client/views/room/contextualBar/Info/RoomInfo/RoomInfoWithData.js b/client/views/room/contextualBar/Info/RoomInfo/RoomInfoWithData.js index 0906b695bef..8b7224eeb42 100644 --- a/client/views/room/contextualBar/Info/RoomInfo/RoomInfoWithData.js +++ b/client/views/room/contextualBar/Info/RoomInfo/RoomInfoWithData.js @@ -195,9 +195,11 @@ const RoomInfoWithData = ({ rid, openEditing, onClickBack, onEnterRoom, resetSta onClickConvertToTeam={!room.teamId && canConvertRoomToTeam && onConvertToTeam} onClickEnterRoom={onEnterRoom && onClickEnterRoom} {...room} - announcement={room.announcement && } - description={room.description && } - topic={room.topic && } + announcement={ + room.announcement && + } + description={room.description && } + topic={room.topic && } /> ); };