@trii/components 2.0.39 → 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/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');
@@ -15379,7 +15387,6 @@ 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 = () => {
@@ -15391,7 +15398,6 @@ const useTranslationContext = () => {
     return (...args) => {
         const [key, ...rest] = args;
         const result = t(key, ...rest);
-        console.log('[useTranslationContext] key:', key, 'args:', rest, 'result:', result);
         return result;
     };
 };
@@ -15451,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;
@@ -15526,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 = {};
@@ -26306,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;
@@ -52451,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);
@@ -52565,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$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'
+        }, 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) => {
@@ -54701,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)))] }) }));
 };
@@ -54778,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) => {
@@ -56939,7 +57016,7 @@ const ContactInformation = ({ ownerData }) => {
     const contactMethods = [
         {
             key: 'phones',
-            title: t('contactDetails.phones'),
+            title: t('conversations.contactDetails.phones'),
             items: phones,
             isPhone: true,
             modalTitle: 'Phones',
@@ -56995,7 +57072,7 @@ const ContactInformation = ({ ownerData }) => {
             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
+    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 })] }));
 };
@@ -57008,47 +57085,18 @@ const AddressInformation = ({ entityType, entityData, baseUrl, spaceId, onEntity
         onEntityUpdated,
     };
     const t = useTranslationContext();
-    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 },
-                        }) }), 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 }) => {
@@ -57162,7 +57210,6 @@ 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,
@@ -57220,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' ||