@trii/components 2.0.38 → 2.0.41

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

@@ -1,4 +1,4 @@
-import { IContactTag } from '@trii/types/dist/Contacts';
+import { IContactTag, IContact, IBusiness } from '@trii/types/dist/Contacts/contacts';
 import type { ChangeEvent, RefObject } from 'react';
 type HeaderProps = {
     imgUrl?: string;
@@ -12,6 +12,12 @@ type HeaderProps = {
     isUploadingPhoto: boolean;
     onDeletePhoto: () => void;
     isDeletingPhoto: boolean;
+    contactType?: 'contact' | 'business' | 'unknown';
+    firstName?: string;
+    lastName?: string;
+    name?: string;
+    entityId?: string;
+    onEntityUpdated?: (data: IContact | IBusiness) => void;
 };
-declare const Header: ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, contactType, firstName, lastName, name, entityId, onEntityUpdated, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/cjs/types/components/EditContactModal/components/Header/components/ContactName/ContactName.d.ts

@@ -0,0 +1,12 @@
+import { IContact, IBusiness } from '@trii/types/dist/Contacts/contacts';
+export type ContactNameProps = {
+    displayName: string;
+    contactType?: 'contact' | 'business' | 'unknown';
+    firstName?: string;
+    lastName?: string;
+    name?: string;
+    entityId?: string;
+    onEntityUpdated?: (data: IContact | IBusiness) => void;
+};
+declare const ContactName: ({ displayName, contactType, firstName, lastName, name, entityId, onEntityUpdated, }: ContactNameProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactName;

package/dist/cjs/types/components/EditContactModal/components/Header/components/index.d.ts

@@ -1 +1,2 @@
 export { default as Tags } from './Tags';
+export { default as ContactName } from './ContactName/ContactName';

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

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { useCallback, useEffect, createContext, useContext, useState, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
-import { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, Autocomplete, TextField as TextField$1, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Button as Button$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
+import { styled as styled$5, Box as Box$2, IconButton as IconButton$2, Avatar, Typography as Typography$2, CircularProgress as CircularProgress$2, Tooltip, Chip as Chip$2, Popper as Popper$2, ClickAwayListener, CardContent, Stack as Stack$2, Popover as Popover$2, TextField as TextField$1, Autocomplete, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Button as Button$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, Backdrop as Backdrop$2, Fade as Fade$2 } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
@@ -8998,6 +8998,10 @@ var utils = /*#__PURE__*/Object.freeze({
 	useIsFocusVisible: useIsFocusVisible
 });
 
+var Edit$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
+}), 'Edit');
+
 var Email$1 = createSvgIcon$1( /*#__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');
@@ -9020,6 +9024,10 @@ var PhoneEnabled = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "m17.38 10.79-2.2-2.2c-.28-.28-.36-.67-.25-1.02.37-1.12.57-2.32.57-3.57 0-.55.45-1 1-1H20c.55 0 1 .45 1 1 0 9.39-7.61 17-17 17-.55 0-1-.45-1-1v-3.49c0-.55.45-1 1-1 1.24 0 2.45-.2 3.57-.57.35-.12.75-.03 1.02.24l2.2 2.2c2.83-1.45 5.15-3.76 6.59-6.59"
 }), 'PhoneEnabled');
 
+var Save$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"
+}), 'Save');
+
 var Star = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
 }), 'Star');
@@ -9188,7 +9196,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 +9237,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',
@@ -15383,7 +15391,15 @@ const TranslationProvider = ({ t, 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);
+        return result;
+    };
 };
 
 const Tags = ({ tags, onEditTags }) => {
@@ -15441,6 +15457,87 @@ const Tags = ({ tags, onEditTags }) => {
                                 } }, tag.id))) })] }) })] }));
 };
 
+const EditContactApiContext = createContext(null);
+const EditContactApiProvider = EditContactApiContext.Provider;
+const useEditContactApi = () => {
+    return useContext(EditContactApiContext);
+};
+
+const NameText = styled$5(Typography$2)({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: 360,
+    textAlign: 'center',
+});
+const NameWrapper = styled$5(Box$2)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    width: '100%',
+    '&:hover .edit-icon': {
+        opacity: 1,
+        visibility: 'visible',
+    },
+});
+const EditButton = styled$5(IconButton$2)({
+    opacity: 0,
+    visibility: 'hidden',
+    transition: 'all 0.2s',
+});
+const ContactName = ({ displayName, contactType, firstName, lastName, name, entityId, onEntityUpdated, }) => {
+    const api = useEditContactApi();
+    const [isEditing, setIsEditing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [values, setValues] = useState({
+        firstName: firstName || '',
+        lastName: lastName || '',
+        name: name || '',
+    });
+    useEffect(() => {
+        setValues({
+            firstName: firstName || '',
+            lastName: lastName || '',
+            name: name || '',
+        });
+    }, [firstName, lastName, name]);
+    const handleSave = async () => {
+        if (!api || !entityId || !contactType || contactType === 'unknown')
+            return;
+        setLoading(true);
+        try {
+            let body = {};
+            if (contactType === 'contact') {
+                body = { firstName: values.firstName, lastName: values.lastName };
+            }
+            else if (contactType === 'business') {
+                body = { name: values.name };
+            }
+            const updated = await api.updateEntity({
+                entityType: contactType,
+                entityId,
+                body,
+            });
+            if (updated && onEntityUpdated) {
+                onEntityUpdated(updated);
+            }
+            setIsEditing(false);
+        }
+        catch (err) {
+            console.error('Failed to update name', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const showEdit = contactType === 'contact' || contactType === 'business';
+    if (isEditing) {
+        return (jsxRuntimeExports.jsxs(Box$2, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 1 }, children: [contactType === 'contact' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField$1, { value: values.firstName, onChange: (e) => setValues({ ...values, firstName: e.target.value }), size: "small", placeholder: "First Name", sx: { width: 140 } }), jsxRuntimeExports.jsx(TextField$1, { value: values.lastName, onChange: (e) => setValues({ ...values, lastName: e.target.value }), size: "small", placeholder: "Last Name", sx: { width: 140 } })] })) : (jsxRuntimeExports.jsx(TextField$1, { value: values.name, onChange: (e) => setValues({ ...values, name: e.target.value }), size: "small", placeholder: "Name", sx: { width: 280 } })), jsxRuntimeExports.jsx(IconButton$2, { onClick: handleSave, disabled: loading, color: "primary", children: loading ? jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) : jsxRuntimeExports.jsx(Save$1, {}) })] }));
+    }
+    return (jsxRuntimeExports.jsxs(NameWrapper, { children: [jsxRuntimeExports.jsx(NameText, { variant: "h6", title: displayName, children: displayName }), showEdit && (jsxRuntimeExports.jsx(EditButton, { size: "small", onClick: () => setIsEditing(true), className: "edit-icon", children: jsxRuntimeExports.jsx(Edit$1, { fontSize: "small" }) }))] }));
+};
+
 var Delete = {};
 
 var _interopRequireDefault$c = interopRequireDefaultExports;
@@ -15516,16 +15613,9 @@ const HeaderContainer = styled$5(Box$2)({
     marginBottom: '20px',
     position: 'relative',
 });
-const ContactName = styled$5(Typography$2)({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    maxWidth: 360,
-    textAlign: 'center',
-});
-const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
+const Header = ({ imgUrl, displayName, onError, tags, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, contactType, firstName, lastName, name, entityId, onEntityUpdated, }) => {
     const avatarAlt = `Avatar for ${displayName}`;
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx("input", { ref: photoInputRef, type: "file", accept: "image/*", onChange: onPhotoFileChange, style: { display: 'none' } }), jsxRuntimeExports.jsx(AvatarWithActions, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')), onUpload: onUploadPhoto, isUploading: isUploadingPhoto, onDelete: onDeletePhoto, isDeleting: isDeletingPhoto }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName }), jsxRuntimeExports.jsx(Tags, { tags: tags, onEditTags: onEditTags })] }));
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx("input", { ref: photoInputRef, type: "file", accept: "image/*", onChange: onPhotoFileChange, style: { display: 'none' } }), jsxRuntimeExports.jsx(AvatarWithActions, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')), onUpload: onUploadPhoto, isUploading: isUploadingPhoto, onDelete: onDeletePhoto, isDeleting: isDeletingPhoto }), jsxRuntimeExports.jsx(ContactName, { displayName: displayName, contactType: contactType, firstName: firstName, lastName: lastName, name: name, entityId: entityId, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(Tags, { tags: tags, onEditTags: onEditTags })] }));
 };
 
 var ArrowBack = {};
@@ -26296,12 +26386,6 @@ const useEditEntity = () => {
     return ctx;
 };
 
-const EditContactApiContext = createContext(null);
-const EditContactApiProvider = EditContactApiContext.Provider;
-const useEditContactApi = () => {
-    return useContext(EditContactApiContext);
-};
-
 const resolveUserLabel = ({ userId, users, currentUser, }) => {
     if (!userId)
         return null;
@@ -52425,7 +52509,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': {
@@ -52441,7 +52525,7 @@ const StyledSaveCancelButton$1 = styled$5(IconButton$2)({
     },
 });
 const EntityInfoLabel = (props) => {
-    const { title, value, isNotEditable, displayValue, baseUrl, spaceId, minWidth, onEntityUpdated, } = props;
+    const { title, value, isNotEditable, displayValue, baseUrl, spaceId, minWidth, onEntityUpdated } = props;
     const t = useTranslationContext();
     const inputType = props.inputType ?? 'text';
     const [isEditing, setIsEditing] = useState(false);
@@ -52555,9 +52639,12 @@ 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('conversations.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) || '-' })) })] }));
+                                : 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) || '-' })) })] }));
 };
 
 const ContactInfoLabel = (props) => {
@@ -54363,7 +54450,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 +54652,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') {
@@ -54691,9 +54778,9 @@ const ContactGeneral = (props) => {
         }
         return age;
     };
-    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.contactOwner'), displayValue: owner || '-', value: entityData.owner, inputType: "select", options: users, constructUpdateObject: (value) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.contactDetails.contactOwner'), displayValue: owner || '-', value: entityData.owner, inputType: "select", options: users, constructUpdateObject: (value) => ({
                         owner: typeof value === 'string' ? value : '',
-                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.business'), displayValue: entityData.businessName || '-', value: entityData.businessId, inputType: "selectBusiness", businessId: entityData.businessId, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('global.birthdate'), inputType: "birthday", displayValue: birthDate ? `${dateOnlyString} (${calculateAge(birthDate.toDate())})` : '-', value: birthDate ? birthDate.toISOString() : '', constructUpdateObject: (value) => ({
+                    }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.contactDetails.business'), displayValue: entityData.businessName || '-', value: entityData.businessId, inputType: "selectBusiness", businessId: entityData.businessId, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('conversations.contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true, contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id }), jsxRuntimeExports.jsx(ContactInfoLabel, { title: t('global.birthdate'), inputType: "birthday", displayValue: birthDate ? `${dateOnlyString} (${calculateAge(birthDate.toDate())})` : '-', value: birthDate ? birthDate.toISOString() : '', constructUpdateObject: (value) => ({
                         birthDate: value,
                     }), contact: editContact, baseUrl: baseUrl, spaceId: spaceId, contactId: entityData.id, dateFormat: dateFormat, onEntityUpdated: onEntityUpdated }), editContact.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editContact, entityType: "contact", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
 };
@@ -54768,9 +54855,9 @@ const BusinessGeneral = (props) => {
             controller.abort();
         };
     }, [api, entityData, users, currentUser]);
-    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('businessDetails.businessOwner'), value: entityData.owner, displayValue: owner || '-', inputType: "select", options: users, constructUpdateObject: (value) => ({
+    return (jsxRuntimeExports.jsx(Section, { title: "General", children: jsxRuntimeExports.jsxs(SectionContent, { children: [jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.businessDetails.businessOwner'), value: entityData.owner, displayValue: owner || '-', inputType: "select", options: users, constructUpdateObject: (value) => ({
                         owner: typeof value === 'string' ? value : '',
-                    }), baseUrl: baseUrl, spaceId: spaceId, businessId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true }), editBusiness.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editBusiness, entityType: "business", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
+                    }), baseUrl: baseUrl, spaceId: spaceId, businessId: entityData.id, onEntityUpdated: onEntityUpdated }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.contactDetails.createdBy'), value: createdBy || '-', isNotEditable: true }), jsxRuntimeExports.jsx(BusinessInfoLabel, { title: t('conversations.contactDetails.modifiedBy'), value: updatedBy || '-', isNotEditable: true }), editBusiness.field.customProperties.map((property) => (jsxRuntimeExports.jsx(EntityCustomFieldLabel, { property: property, entity: editBusiness, entityType: "business", entityId: String(entityData.id), customContactFields: customContactFields, userTrii: currentUser, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: onEntityUpdated }, property.nameKey)))] }) }));
 };
 
 const General = (props) => {
@@ -54798,7 +54885,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 +54952,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 +56212,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 +56221,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 +56284,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 +56295,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 +56329,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 +57013,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('conversations.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('conversations.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,49 +57085,18 @@ 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) => ({
-                            address1: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.city'), value: entityData.address1?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.state'), value: entityData.address1?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.postcode'), value: entityData.address1?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.country'), value: entityData.address1?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { country: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "contact", title: t('contactDetails.anotherCountry'), value: entityData.address2?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { country: value },
-                        }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.street'), value: entityData.address1?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherStreet'), value: entityData.address2?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { street: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.city'), value: entityData.address1?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherCity'), value: entityData.address2?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { city: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.state'), value: entityData.address1?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherState'), value: entityData.address2?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { state: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.postcode'), value: entityData.address1?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherPostcode'), value: entityData.address2?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { zipcode: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.country'), value: entityData.address1?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address1: { country: value },
-                        }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: "business", title: t('contactDetails.anotherCountry'), value: entityData.address2?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
-                            address2: { country: value },
-                        }) })] })) }) }));
+    const AddressGroup = ({ addressNumber, title, }) => (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-gray-100 bg-gray-50/50 p-4", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-gray-700", children: title }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-3", children: [jsxRuntimeExports.jsx("div", { className: "col-span-2", children: jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.street'), value: entityData[addressNumber]?.street ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                                [addressNumber]: { street: value },
+                            }), minWidth: "100%" }) }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.city'), value: entityData[addressNumber]?.city ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { city: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.state'), value: entityData[addressNumber]?.state ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { state: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.postcode'), value: entityData[addressNumber]?.zipcode ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { zipcode: value },
+                        }), minWidth: "100%" }), jsxRuntimeExports.jsx(EntityInfoLabel, { entityType: entityType, title: t('conversations.contactDetails.country'), value: entityData[addressNumber]?.country ?? '', ...commonProps, constructUpdateObject: (value) => ({
+                            [addressNumber]: { country: value },
+                        }), minWidth: "100%" })] })] }));
+    return (jsxRuntimeExports.jsx(Section, { title: t('conversations.contactDetails.addressInformation'), children: jsxRuntimeExports.jsx(SectionContent, { children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address1", title: t('conversations.contactDetails.primaryAddress') || 'Primary Address' }), jsxRuntimeExports.jsx(AddressGroup, { addressNumber: "address2", title: t('conversations.contactDetails.secondaryAddress') || 'Secondary Address' })] }) }) }));
 };
 
 const useEntityUpdateSync = ({ entity, setEntity }) => {
@@ -57184,7 +57267,7 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t })
                                 minHeight: 220,
                             }, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box$2, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(EditEntityProvider, { entityType: selectors.contactType === 'business' ? 'business' : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, children: jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(Fade$2, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Header, { imgUrl: image.imageUrl, displayName: selectors.displayName, tags: selectors.tags, onEditTags: () => {
                                                         setView('tags');
-                                                    }, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsxs(Box$2, { sx: { px: 1, pb: 2 }, children: [jsxRuntimeExports.jsx(General, { dateFormat: selectors.userTrii?.regCon_dateFormat || 'MM/dd/yyyy', entityType: selectors.contactType === 'contact' ||
+                                                    }, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting, contactType: selectors.contactType, entityId: state.contactData?.id, firstName: selectors.isContact ? state.contactData.firstName : undefined, lastName: selectors.isContact ? state.contactData.lastName : undefined, name: selectors.isBusiness ? state.contactData.name : undefined, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsxs(Box$2, { sx: { px: 1, pb: 2 }, children: [jsxRuntimeExports.jsx(General, { dateFormat: selectors.userTrii?.regCon_dateFormat || 'MM/dd/yyyy', entityType: selectors.contactType === 'contact' ||
                                                                 selectors.contactType === 'business'
                                                                 ? selectors.contactType
                                                                 : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }), jsxRuntimeExports.jsx(AddressInformation, { entityType: selectors.contactType === 'contact' ||