@trii/components 2.0.38 → 2.0.39

package/dist/cjs/types/components/EditContactModal/components/Section/ContactInformation/components/EditModal/layout/SubsectionHeaderWithButton/SubsectionHeaderWithButton.d.ts

@@ -1,7 +1,6 @@
 type Props = {
     title: string;
     handleAdd: () => void;
-    t?: (key: string) => string;
 };
-declare const SubsectionHeaderWithButton: ({ title, handleAdd, t }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SubsectionHeaderWithButton: ({ title, handleAdd }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SubsectionHeaderWithButton;

package/dist/esm/index.js

@@ -9188,7 +9188,7 @@ const TitleBox = styled$5(Box$2)({
     width: '100%',
     borderBottom: `1px solid lightgray`,
 });
-const StyledBox$3 = styled$5(Box$2)({
+const StyledBox$2 = styled$5(Box$2)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -9229,7 +9229,7 @@ const NoteText$2 = styled$5(Typography$2)({
     left: 40,
 });
 const ContactMethod$1 = ({ icon, contactList, title, showTitle = true, }) => {
-    const renderContactInfo = (contact) => (jsxRuntimeExports.jsx(StyledBox$3, { children: jsxRuntimeExports.jsxs(InfoContainer, { children: [jsxRuntimeExports.jsx(IconBox, { children: icon }), jsxRuntimeExports.jsxs(AddressContainer, { children: [jsxRuntimeExports.jsx(Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", fontWeight: "semi-bold", fontSize: 14, color: "text.primary", sx: {
+    const renderContactInfo = (contact) => (jsxRuntimeExports.jsx(StyledBox$2, { children: jsxRuntimeExports.jsxs(InfoContainer, { children: [jsxRuntimeExports.jsx(IconBox, { children: icon }), jsxRuntimeExports.jsxs(AddressContainer, { children: [jsxRuntimeExports.jsx(Tooltip, { title: contact.address, arrow: true, placement: "top", children: jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", fontWeight: "semi-bold", fontSize: 14, color: "text.primary", sx: {
                                     whiteSpace: 'nowrap',
                                     textOverflow: 'ellipsis',
                                     overflow: 'hidden',
@@ -15379,11 +15379,21 @@ default_1$e = Label.default = (0, _createSvgIcon$d.default)( /*#__PURE__*/(0, _j
 const noop$3 = (key) => key;
 const TranslationContext = createContext(noop$3);
 const TranslationProvider = ({ t, children }) => {
+    console.log('[TranslationProvider] t fn:', t?.name || 'anonymous', t);
     return jsxRuntimeExports.jsx(TranslationContext.Provider, { value: t, children: children });
 };
 const useTranslationContext = () => {
     const t = useContext(TranslationContext);
-    return t || noop$3;
+    if (!t) {
+        console.warn('[useTranslationContext] using noop, context value is falsy');
+        return noop$3;
+    }
+    return (...args) => {
+        const [key, ...rest] = args;
+        const result = t(key, ...rest);
+        console.log('[useTranslationContext] key:', key, 'args:', rest, 'result:', result);
+        return result;
+    };
 };
 
 const Tags = ({ tags, onEditTags }) => {
@@ -52425,7 +52435,7 @@ default_1$8 = Cancel.default = (0, _createSvgIcon$8.default)( /*#__PURE__*/(0, _
 
 const isUserInfo = (option) => 'email' in option;
 const isContactBirthdayProps = (p) => p.entityType === 'contact' && p.inputType === 'birthday';
-const StyledIconButton$3 = styled$5(IconButton$2)({
+const StyledIconButton$2 = styled$5(IconButton$2)({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -52555,7 +52565,7 @@ const EntityInfoLabel = (props) => {
             '&:hover .edit-icon': {
                 opacity: 1,
             },
-        }, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(Typography$2, { letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, children: title }), isNotEditable ? null : isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$3, { className: "edit-icon", size: "small", onClick: handleEditClick, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(TextField$1, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(Select$2, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(MenuItem$2, { value: "", children: t('contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
+        }, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: '25px', children: [jsxRuntimeExports.jsx(Typography$2, { letterSpacing: -0.5, fontWeight: '600', alignSelf: 'center', flexGrow: isEditing ? 1 : 0, color: (theme) => theme.palette.text.primary, children: title }), isNotEditable ? null : isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton$1, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$2, { className: "edit-icon", size: "small", onClick: handleEditClick, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing ? '100%' : '50%', position: "relative", children: isEditing && inputType === 'text' ? (jsxRuntimeExports.jsx(TextField$1, { value: textValue, onChange: handleInputChange, variant: "standard", size: "small", sx: { width: '100%' } })) : isEditing && (inputType === 'select' || inputType === 'selectMembers') ? (jsxRuntimeExports.jsxs(Select$2, { value: selectValue, onChange: handleSelectChange, variant: "standard", size: "small", sx: { width: '100%' }, children: [props.entityType === 'contact' ? (jsxRuntimeExports.jsx(MenuItem$2, { value: "", children: t('contactDetails.contactInfo.emptySelection') })) : null, options.map((option, index) => (jsxRuntimeExports.jsx(MenuItem$2, { value: option.id, children: props.entityType === 'contact'
                                 ? option.name?.trim() || (isUserInfo(option) ? option.email : '') || 'Sin nombre'
                                 : option.name?.trim() || option.email || 'Sin nombre' }, index)))] })) : isEditing && isContactBirthdayProps(props) ? (jsxRuntimeExports.jsx(DateSelect, { birthDate: props.contact.field.birthDate, setBirthDate: props.contact.action.setBirthDate, dateFormat: props.dateFormat })) : !isEditing && props.entityType === 'contact' && inputType === 'selectBusiness' && props.businessId ? (jsxRuntimeExports.jsx(Box$2, { display: "flex", alignItems: "center", children: "Popover" })) : (jsxRuntimeExports.jsx(Typography$2, { fontWeight: '400', sx: { padding: '2.5px 14px 8.5px 0px' }, color: (theme) => theme.palette.text.primary, children: displayValue || (typeof value === 'string' && value) || '-' })) })] }));
 };
@@ -54363,7 +54373,7 @@ const CustomPropertyDateRangePicker = ({ value, handleChange, userDateFormat })
                 }, value: value || initDates, onChange: (newValue) => handleChange(newValue), format: dateFormat }) }) }));
 };
 
-const StyledIconButton$2 = styled$5(IconButton$2)(() => ({
+const StyledIconButton$1 = styled$5(IconButton$2)(() => ({
     opacity: 0,
     transition: 'opacity 0.3s ease-in-out',
     '& .MuiSvgIcon-root': {
@@ -54565,7 +54575,7 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         else
             return (jsxRuntimeExports.jsx(CustomPropertyInput, { type: type, nameKey: nameKey, value: value, onChange: handleInputChange }));
     };
-    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", children: [jsxRuntimeExports.jsx(FieldName, { flexGrow: isEditing ? 1 : 0, children: getPropertyName(property.nameKey) }), isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$2, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing || property.type === Contacts.ContactField_type.LONGTEXT ? '100%' : '50%', position: "relative", children: isEditing ? (EditField()) : (jsxRuntimeExports.jsx(FieldValue, { children: hasValue(property?.value)
+    return (jsxRuntimeExports.jsxs(ContactBox, { className: `fadein ${property.type === Contacts.ContactField_type.LONGTEXT ? 'contacts-col-12' : 'contacts-col-5'}`, children: [jsxRuntimeExports.jsxs(Box$2, { display: "flex", position: "relative", minHeight: "25px", children: [jsxRuntimeExports.jsx(FieldName, { flexGrow: isEditing ? 1 : 0, children: getPropertyName(property.nameKey) }), isEditing ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleSave, children: isSaving ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(default_1$a, {}) }), jsxRuntimeExports.jsx(StyledSaveCancelButton, { size: "small", onClick: handleCancel, children: jsxRuntimeExports.jsx(default_1$8, {}) })] })) : (jsxRuntimeExports.jsx(StyledIconButton$1, { className: "edit-icon", size: "small", onClick: toggleEdit, children: jsxRuntimeExports.jsx(default_1$f, {}) }))] }), jsxRuntimeExports.jsx(Box$2, { width: isEditing || property.type === Contacts.ContactField_type.LONGTEXT ? '100%' : '50%', position: "relative", children: isEditing ? (EditField()) : (jsxRuntimeExports.jsx(FieldValue, { children: hasValue(property?.value)
                         ? property.type === Contacts.ContactField_type.DATERANGE
                             ? (() => {
                                 if (typeof property.value === 'string') {
@@ -54798,7 +54808,7 @@ const useEditModal = () => {
     return { isOpen, title, openModal, closeModal };
 };
 
-const StyledBox$2 = styled$1(Box$2)(({ theme }) => ({
+const StyledBox$1 = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -54865,7 +54875,7 @@ const ContactMethodItem = ({ item }) => {
     const { imageUrl } = useImage({
         initialImageUrl: avatarUrlWithoutAccess,
     });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$2, { children: [jsxRuntimeExports.jsx(LeftSection$1, { children: jsxRuntimeExports.jsxs(ContactDetails$1, { children: [jsxRuntimeExports.jsx(Tooltip, { title: item.address || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText$1, { children: item.address }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.profileName || '', arrow: true, children: jsxRuntimeExports.jsx(ProfileNameText, { sx: {
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$1, { children: [jsxRuntimeExports.jsx(LeftSection$1, { children: jsxRuntimeExports.jsxs(ContactDetails$1, { children: [jsxRuntimeExports.jsx(Tooltip, { title: item.address || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText$1, { children: item.address }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.profileName || '', arrow: true, children: jsxRuntimeExports.jsx(ProfileNameText, { sx: {
                                         marginTop: '-10px',
                                         marginLeft: '5px',
                                         fontSize: '10px',
@@ -56125,7 +56135,7 @@ const formatPhoneForDisplay = (number) => {
     }
 };
 
-const StyledIconButton$1 = styled$1(IconButton$2)(({ theme }) => ({
+const StyledIconButton = styled$1(IconButton$2)(({ theme }) => ({
     padding: theme.spacing(0.5),
     marginTop: '-5px',
 }));
@@ -56134,7 +56144,7 @@ const StyledLocalPhoneIcon = styled$1(default_1$7)(({ theme }) => ({
     width: 16,
     color: theme.palette.secondary.main
 }));
-const StyledBox$1 = styled$1(Box$2)(({ theme }) => ({
+const StyledBox = styled$1(Box$2)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
@@ -56197,7 +56207,7 @@ const ContactMethodPhoneItem = ({ item }) => {
         window.dispatchEvent(event);
     };
     const formattedPhone = useMemo(() => formatPhoneForDisplay(item.address || ''), [item.address]);
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox$1, { children: [jsxRuntimeExports.jsxs(LeftSection, { children: [jsxRuntimeExports.jsx(StyledIconButton$1, { onClick: handleCallContact, color: "primary", size: "small", children: jsxRuntimeExports.jsx(StyledLocalPhoneIcon, {}) }), jsxRuntimeExports.jsxs(ContactDetails, { children: [jsxRuntimeExports.jsx(Tooltip, { title: formattedPhone || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText, { children: formattedPhone }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText, { children: item.note }) })] })] }), jsxRuntimeExports.jsx(RightSection, { children: jsxRuntimeExports.jsx(Box$2, { sx: {
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(LeftSection, { children: [jsxRuntimeExports.jsx(StyledIconButton, { onClick: handleCallContact, color: "primary", size: "small", children: jsxRuntimeExports.jsx(StyledLocalPhoneIcon, {}) }), jsxRuntimeExports.jsxs(ContactDetails, { children: [jsxRuntimeExports.jsx(Tooltip, { title: formattedPhone || '', arrow: true, children: jsxRuntimeExports.jsx(PhoneText, { children: formattedPhone }) }), jsxRuntimeExports.jsx(Tooltip, { title: item.note || '', arrow: true, children: jsxRuntimeExports.jsx(NoteText, { children: item.note }) })] })] }), jsxRuntimeExports.jsx(RightSection, { children: jsxRuntimeExports.jsx(Box$2, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'flex-end',
@@ -56208,47 +56218,13 @@ const ContactMethodPhoneItem = ({ item }) => {
                                 } })) }) }) })] }) }));
 };
 
-const StyledBox = styled$1(Box$2)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(1, 0, 2, 0),
-    width: '100%',
-    gap: theme.spacing(1),
-    '&:hover .edit-icon': {
-        opacity: 1,
-    },
-}));
-const StyledTypography = styled$1(Typography$2)(({}) => ({
-    letterSpacing: -0.5,
-    fontSize: 14,
-    fontWeight: 600,
-}));
-const HeaderBox = styled$1(Box$2)(({}) => ({
-    display: 'flex',
-    alignItems: 'center',
-}));
-const MethodItemsBox = styled$1(Box$2)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    width: '100%',
-}));
-const StyledIconButton = styled$1(IconButton$2)({
-    opacity: 0,
-    transition: 'opacity 0.3s ease-in-out',
-    '& .MuiSvgIcon-root': {
-        width: '0.8em',
-        height: '0.8em',
-    },
-    marginLeft: '15px',
-});
 const ContactMethod = ({ title, methodItems, isPhone, handleEdit, owner }) => {
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(StyledBox, { children: [jsxRuntimeExports.jsxs(HeaderBox, { children: [jsxRuntimeExports.jsx(StyledTypography, { children: title }), jsxRuntimeExports.jsx(StyledIconButton, { className: "edit-icon", size: "small", onClick: handleEdit, children: jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx(MethodItemsBox, { children: methodItems.map((item, index) => {
-                        if (isPhone) {
-                            return jsxRuntimeExports.jsx(ContactMethodPhoneItem, { item: item }, index);
-                        }
-                        return jsxRuntimeExports.jsx(ContactMethodItem, { item: item, owner: owner }, index);
-                    }) })] }) }));
+    return (jsxRuntimeExports.jsxs("div", { className: "w-full rounded-xl border border-gray-200 bg-white/60 p-3 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-semibold text-gray-800", children: title }), jsxRuntimeExports.jsx(IconButton$2, { "aria-label": `Edit ${title}`, size: "small", onClick: handleEdit, className: "edit-icon text-gray-500 transition hover:text-gray-800", children: jsxRuntimeExports.jsx(default_1$f, { fontSize: "small" }) })] }), jsxRuntimeExports.jsx("div", { className: "mt-3 space-y-2", children: methodItems.map((item, index) => {
+                    if (isPhone) {
+                        return jsxRuntimeExports.jsx(ContactMethodPhoneItem, { item: item }, index);
+                    }
+                    return jsxRuntimeExports.jsx(ContactMethodItem, { item: item, owner: owner }, index);
+                }) })] }));
 };
 
 const SubsectionHeader = ({ title }) => {
@@ -56276,10 +56252,10 @@ default_1$6 = Add.default = (0, _createSvgIcon$6.default)( /*#__PURE__*/(0, _jsx
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
 }), 'Add');
 
-const SubsectionHeaderWithButton = ({ title, handleAdd, t }) => {
-    const tFromContext = useTranslationContext();
-    const translate = t || tFromContext;
-    return (jsxRuntimeExports.jsxs(Box$2, { sx: subsectionHeaderWithButtonStyle.container, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", children: title }), jsxRuntimeExports.jsx(Button$2, { onClick: handleAdd, size: "small", startIcon: jsxRuntimeExports.jsx(default_1$6, {}), variant: "text", color: "primary", children: translate('global.add') })] }));
+const SubsectionHeaderWithButton = ({ title, handleAdd }) => {
+    const t = useTranslationContext();
+    console.log('[SubsectionHeaderWithButton] title:', title, 't fn:', t?.name || 'anonymous');
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: subsectionHeaderWithButtonStyle.container, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle2", children: title }), jsxRuntimeExports.jsx(Button$2, { onClick: handleAdd, size: "small", startIcon: jsxRuntimeExports.jsx(default_1$6, {}), variant: "text", color: "primary", children: t('global.add') })] }));
 };
 
 const informationItemContainerStyle = {
@@ -56960,7 +56936,68 @@ const ContactInformation = ({ ownerData }) => {
     const webchat = editEntity.field.imsWebchats;
     const instagram = editEntity.field.imsInstagrams;
     const rcs = editEntity.field.imsRCS;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Section, { title: "Contact Information", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Phones'), title: t('contactDetails.phones'), methodItems: phones, isPhone: true, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Emails'), title: t('Emails'), methodItems: emails, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Facebook'), title: t('Facebook'), methodItems: facebook, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Whatsapp'), title: t('Whatsapp'), methodItems: whatsapp, owner: ownerData }), rcs.length > 0 ? (jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('RCS'), title: t('RCS'), methodItems: rcs, owner: ownerData })) : null, jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Mercado libre'), title: t('Mercado libre'), methodItems: mercadolibre, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Webchat'), title: t('Webchat'), methodItems: webchat, owner: ownerData }), jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal('Instagram'), title: t('Instagram'), methodItems: instagram, owner: ownerData })] }) }), jsxRuntimeExports.jsx(EditModal, { open: isOpen, onClose: closeModal, title: title })] }));
+    const contactMethods = [
+        {
+            key: 'phones',
+            title: t('contactDetails.phones'),
+            items: phones,
+            isPhone: true,
+            modalTitle: 'Phones',
+            visible: true,
+        },
+        {
+            key: 'emails',
+            title: 'Emails',
+            items: emails,
+            modalTitle: 'Emails',
+            visible: true,
+        },
+        {
+            key: 'facebook',
+            title: 'Facebook',
+            items: facebook,
+            modalTitle: 'Facebook',
+            visible: true,
+        },
+        {
+            key: 'whatsapp',
+            title: 'Whatsapp',
+            items: whatsapp,
+            modalTitle: 'Whatsapp',
+            visible: true,
+        },
+        {
+            key: 'rcs',
+            title: 'RCS',
+            items: rcs,
+            modalTitle: 'RCS',
+            visible: rcs.length > 0,
+        },
+        {
+            key: 'mercado-libre',
+            title: 'Mercado libre',
+            items: mercadolibre,
+            modalTitle: 'Mercado libre',
+            visible: true,
+        },
+        {
+            key: 'webchat',
+            title: 'Webchat',
+            items: webchat,
+            modalTitle: 'Webchat',
+            visible: true,
+        },
+        {
+            key: 'instagram',
+            title: 'Instagram',
+            items: instagram,
+            modalTitle: 'Instagram',
+            visible: true,
+        },
+    ];
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Section, { title: t('contactDetails.contactInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3", children: contactMethods
+                            .filter((method) => method.visible)
+                            .map((method) => (jsxRuntimeExports.jsx(ContactMethod, { handleEdit: () => openModal(method.modalTitle), title: method.title, methodItems: method.items, isPhone: method.isPhone, owner: ownerData }, method.key))) }) }) }), jsxRuntimeExports.jsx(EditModal, { open: isOpen, onClose: closeModal, title: title })] }));
 };
 
 const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntityUpdated, }) => {
@@ -56971,9 +57008,7 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
         onEntityUpdated,
     };
     const t = useTranslationContext();
-    const maybeTitle = t('contactDetails.addressInformation');
-    const sectionTitle = maybeTitle === 'contactDetails.addressInformation' ? 'Address Information' : maybeTitle;
-    return (jsxRuntimeExports.jsx(Section, { title: sectionTitle, children: jsxRuntimeExports.jsx(SectionContent, { children: entityType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: t('contactDetails.addressInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: entityType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address1: { street: value },
                         }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
                             address2: { street: value },
@@ -57127,6 +57162,7 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t })
             return null;
         return createEditContactApi(baseUrl, spaceId);
     }, [baseUrl, spaceId]);
+    console.log('[EditContactModal] t fn:', t?.name || 'anonymous', t);
     const { state, selectors, actions } = useEditContactModalController({
         open,
         baseUrl,