@trii/components 2.0.7 → 2.0.8

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IContact } from '@trii/types/dist/Contacts';
 import { SxProps, Theme } from '@mui/material';
 export interface ContactInfoPopupProps {
@@ -8,8 +7,7 @@ export interface ContactInfoPopupProps {
     t?: (key: string) => string;
     contactData?: IContact;
     avatarImgUrl?: string;
-    handleNavigateToContacts?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     sx?: SxProps<Theme>;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, handleNavigateToContacts, t, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, t, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactInfoPopup;

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

@@ -1,10 +1,7 @@
-/// <reference types="react" />
 type HeaderProps = {
     imgUrl: string | undefined;
     name: string | undefined;
     contactId: string | undefined;
-    t: (key: string) => string;
-    handleNavigateToContacts: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | undefined;
 };
-declare const Header: ({ handleNavigateToContacts, imgUrl, name, contactId, t, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ imgUrl, name, contactId, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import { Button, styled as styled$3, Box, IconButton, Avatar, Typography, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 
@@ -8242,6 +8242,10 @@ function createSvgIcon(path, displayName) {
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
 }
 
+var Email = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"
+}), 'Email');
+
 var Facebook = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
 }), 'Facebook');
@@ -8268,10 +8272,6 @@ var ThreeP = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M20 2H4.01c-1.1 0-2 .9-2 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m4 8H8v-.57c0-.81.48-1.53 1.22-1.85.85-.37 1.79-.58 2.78-.58.99 0 1.93.21 2.78.58.74.32 1.22 1.04 1.22 1.85z"
 }), 'ThreeP');
 
-var Visibility = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
-}), 'Visibility');
-
 var WhatsApp = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"
 }), 'WhatsApp');
@@ -8307,14 +8307,14 @@ const ContactName = styled$3(Typography)({
     maxWidth: 200,
     textAlign: 'center',
 });
-const Header = ({ handleNavigateToContacts, imgUrl, name, contactId, t = (key) => key, }) => {
+const Header = ({ imgUrl, name, contactId, }) => {
     const handleOpenInNewTab = (event) => {
         event.preventDefault();
         event.stopPropagation();
         const url = `/a/contacts/contacts/${contactId}`;
         window.open(url, '_blank');
     };
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(Button, { variant: "outlined", size: "small", startIcon: jsxRuntimeExports.jsx(Visibility, {}), onClick: handleNavigateToContacts, color: "info", children: t('view') }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx(ButtonsContainer, { children: jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: handleOpenInNewTab, children: jsxRuntimeExports.jsx(OpenInNew, { fontSize: "small" }) }) }), jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: "Contact Avatar" }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", children: name })] }));
 };
 
 const Container$1 = styled$3(Box)({
@@ -14265,7 +14265,7 @@ const StyledChip = styled$3(Chip)(({ theme }) => ({
     marginBottom: 8,
     backgroundColor: `${theme.palette.primary.main}b3`
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, handleNavigateToContacts = () => { }, t = (key) => ({
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, t = (key) => ({
     labels: 'Etiquetas',
     phone: 'Teléfono',
     business: 'Empresa',
@@ -14279,6 +14279,12 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             contactList: contactData?.phones || [],
             showTitle: true,
         },
+        {
+            icon: jsxRuntimeExports.jsx(Email, { fontSize: "small" }),
+            title: t('conversations.contactInfo.email'),
+            contactList: contactData?.emails || [],
+            showTitle: true,
+        },
         {
             icon: jsxRuntimeExports.jsx(WhatsApp, { fontSize: "small" }),
             title: 'IM',
@@ -14301,7 +14307,20 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             showTitle: false,
         },
     ];
-    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, { contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, t: t, handleNavigateToContacts: handleNavigateToContacts }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('labels') }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('business') }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName }), 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') })] }) }) }) }));
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (open) {
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            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, { contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('labels') }), jsxRuntimeExports.jsx(TagContainer, { children: contactData?.tags?.map((tag) => (jsxRuntimeExports.jsx(StyledChip, { label: tag.name, color: "primary", size: "small" }, tag.id))) }), jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: t('business') }), jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName }), 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 };