@trii/components 2.0.23 → 2.0.24

package/dist/cjs/types/components/ContactInfoPopup/components/Header/Header.d.ts

@@ -8,5 +8,5 @@ type HeaderProps = {
     onClose: () => void;
     isBusiness?: boolean;
 };
-declare const Header: ({ imgUrl, name, contactId, navigate, isLoading, onError, onClose, isBusiness }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ imgUrl, name, contactId, navigate, isLoading, onError, onClose, isBusiness, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/cjs/types/components/ContactInfoPopup/components/MembersSection/MembersSection.d.ts

@@ -2,6 +2,7 @@ import { IBusiness } from '@trii/types/dist/Contacts';
 interface MembersSectionProps {
     contactData?: IBusiness;
     title: string;
+    navigate: (path: string) => void;
 }
-declare const MembersSection: ({ contactData, title }: MembersSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MembersSection: ({ contactData, title, navigate }: MembersSectionProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MembersSection;

package/dist/cjs/types/components/ContactInfoPopup/components/MembersSection/components/MemberItem/MemberItem.d.ts

@@ -1,4 +1,7 @@
-declare const MemberItem: ({ name }: {
+type MemberItemProps = {
     name: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    memberId: string;
+    navigate: (path: string) => void;
+};
+declare const MemberItem: ({ name, memberId, navigate }: MemberItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MemberItem;

package/dist/esm/index.js

@@ -8814,7 +8814,7 @@ const LoadingContainer = styled$3(Box)({
     height: 60,
     marginBottom: 8,
 });
-const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness }) => {
+const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness = false, }) => {
     const handleNavigation = useCallback((url) => (event) => {
         try {
             event.preventDefault();
@@ -8837,9 +8837,7 @@ const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError,
     const handleNavigateToContacts = handleNavigation(isBusiness
         ? `/a/contacts/business/${contactId}`
         : `/a/contacts/contacts/${contactId}`);
-    const handleNavigateToConversations = handleNavigation(contactId
-        ? `/a/conversations/conversations?${isBusiness ? 'businessId' : 'contactId'}=${contactId}`
-        : '/a/conversations/conversations');
+    const handleNavigateToConversations = handleNavigation('/a/conversations/conversations');
     const displayName = name || 'Unknown Contact';
     const avatarAlt = `Avatar for ${displayName}`;
     return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
@@ -14800,6 +14798,10 @@ const LabelsSection = ({ contactData, title }) => {
  * @returns True if the object is an IContact
  */
 function isContact(obj) {
+    // Si está marcado explícitamente como negocio, no es un contacto regular
+    if (obj?.isBusiness === true) {
+        return false;
+    }
     return (obj !== null &&
         typeof obj === 'object' &&
         typeof obj.id === 'string' &&
@@ -14832,11 +14834,10 @@ const BusinessSection = ({ contactData, title }) => {
  * @returns True if the object is an IBusiness
  */
 function isBusiness(obj) {
-    // Si el objeto tiene explícitamente la propiedad isBusiness como true, lo consideramos un negocio
     if (obj?.isBusiness === true) {
+        // Si se ha marcado explícitamente como negocio con la propiedad isBusiness
         return true;
     }
-    // De lo contrario, realizamos las comprobaciones tradicionales
     return (obj !== null &&
         typeof obj === 'object' &&
         typeof obj.id === 'string' &&
@@ -14851,9 +14852,28 @@ function isBusiness(obj) {
         !('lastName' in obj));
 }
 
-// Components
-const MemberItem = ({ name }) => {
-    return (jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: name }));
+const MemberItem = ({ name, memberId, navigate }) => {
+    const url = `/a/contacts/contacts/${memberId}`;
+    const handleNavigation = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const isNewTab = event.ctrlKey || event.metaKey || event.button === 1; // Ctrl+Click, Cmd+Click, Middle Mouse
+        if (isNewTab) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            navigate(url);
+        }
+    };
+    return (jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", role: "link", tabIndex: 0, sx: { cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }, onClick: handleNavigation, onMouseDown: (e) => {
+            if (e.button === 1) {
+                handleNavigation(e);
+            }
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                handleNavigation(e);
+            }
+        }, children: name }));
 };
 
 const SectionTitle = styled$3(Typography)({
@@ -14862,10 +14882,10 @@ const SectionTitle = styled$3(Typography)({
     marginTop: '16px',
     borderBottom: `1px solid lightgray`,
 });
-const MembersSection = ({ contactData, title }) => {
+const MembersSection = ({ contactData, title, navigate }) => {
     if (!contactData || !isBusiness(contactData) || !contactData.members?.length)
         return null;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { name: member.name }, member.id))) })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
 
 const PopupContainer = styled$3(Box)(({ theme }) => ({
@@ -14954,7 +14974,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers') })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
 export { ContactInfoPopup, TestBox };