@trii/components 2.0.25 → 2.0.26

package/dist/cjs/index.js

@@ -8661,19 +8661,19 @@ const ButtonsContainer = material.styled(material.Box)(({ theme }) => ({
 const SmallIconButton = material.styled(material.IconButton)({
     padding: 4,
 });
-const HeaderContainer = material.styled(material.Box)({
+const HeaderContainer$1 = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     marginBottom: '16px',
     position: 'relative',
 });
-const ContactAvatar = material.styled(material.Avatar)({
+const ContactAvatar$1 = material.styled(material.Avatar)({
     width: 60,
     height: 60,
     marginBottom: 8,
 });
-const ContactName = material.styled(material.Typography)({
+const ContactName$1 = material.styled(material.Typography)({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -8688,7 +8688,7 @@ const LoadingContainer = material.styled(material.Box)({
     height: 60,
     marginBottom: 8,
 });
-const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness = false, }) => {
+const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onError, onClose, isBusiness = false, }) => {
     const handleNavigation = React.useCallback((url) => (event) => {
         try {
             event.preventDefault();
@@ -8714,7 +8714,7 @@ const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError,
     const handleNavigateToConversations = handleNavigation('/a/conversations/conversations');
     const displayName = name || 'Unknown Contact';
     const avatarAlt = `Avatar for ${displayName}`;
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+    return (jsxRuntimeExports.jsxs(HeaderContainer$1, { children: [jsxRuntimeExports.jsxs(ButtonsContainer, { children: [jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
                             handleNavigateToContacts(e);
                             onClose();
                         }, onMouseDown: (e) => {
@@ -8732,7 +8732,7 @@ const Header = ({ imgUrl, name, contactId, navigate, isLoading = false, onError,
                                 handleNavigateToConversations(e);
                                 onClose();
                             }
-                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(material.CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName })] }));
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(material.CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar$1, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = material.styled(material.Box)({
@@ -14671,7 +14671,7 @@ const LabelsSection = ({ contactData, title }) => {
  * @param obj The object to check
  * @returns True if the object is an IContact
  */
-function isContact(obj) {
+function isContact$1(obj) {
     // Si está marcado explícitamente como negocio, no es un contacto regular
     if (obj?.isBusiness === true) {
         return false;
@@ -14697,7 +14697,7 @@ const SectionTitle$1 = material.styled(material.Typography)({
     borderBottom: `1px solid lightgray`,
 });
 const BusinessSection = ({ contactData, title }) => {
-    if (!contactData || !isContact(contactData))
+    if (!contactData || !isContact$1(contactData))
         return null;
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle$1, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), jsxRuntimeExports.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName })] }));
 };
@@ -14707,7 +14707,7 @@ const BusinessSection = ({ contactData, title }) => {
  * @param obj The object to check
  * @returns True if the object is an IBusiness
  */
-function isBusiness(obj) {
+function isBusiness$1(obj) {
     if (obj?.isBusiness === true) {
         // Si se ha marcado explícitamente como negocio con la propiedad isBusiness
         return true;
@@ -14757,7 +14757,7 @@ const SectionTitle = material.styled(material.Typography)({
     borderBottom: `1px solid lightgray`,
 });
 const MembersSection = ({ contactData, title, navigate }) => {
-    if (!contactData || !isBusiness(contactData) || !contactData.members?.length)
+    if (!contactData || !isBusiness$1(contactData) || !contactData.members?.length)
         return null;
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
@@ -14798,8 +14798,8 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
     view: 'Ver',
     email: 'Correo Electrónico',
 }[key] || key), }) => {
-    const dataIsBusiness = isBusiness(contactData);
-    const dataIsContact = isContact(contactData);
+    const dataIsBusiness = isBusiness$1(contactData);
+    const dataIsContact = isContact$1(contactData);
     const contactMethods = [
         {
             icon: jsxRuntimeExports.jsx(PhoneEnabled, { fontSize: "small" }),
@@ -14848,8 +14848,236 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+};
+
+const HeaderContainer = material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: '16px',
+    position: 'relative',
+});
+const ContactAvatar = material.styled(material.Avatar)({
+    width: 60,
+    height: 60,
+    marginBottom: 8,
+});
+const ContactName = material.styled(material.Typography)({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: 200,
+    textAlign: 'center',
+});
+const Header = ({ imgUrl, displayName = 'Unknown Contact', onError, }) => {
+    const avatarAlt = `Avatar for ${displayName}`;
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName })] }));
+};
+
+class ApiError extends Error {
+    status;
+    body;
+    constructor(message, status, body) {
+        super(message);
+        this.name = 'ApiError';
+        this.status = status;
+        this.body = body;
+    }
+}
+async function requestJson({ url, method = 'GET', headers, body, signal, }) {
+    const res = await globalThis.fetch(url, {
+        method,
+        headers: {
+            ...(body ? { 'Content-Type': 'application/json' } : {}),
+            ...(headers ?? {}),
+        },
+        body: body ? JSON.stringify(body) : undefined,
+        signal,
+    });
+    const contentType = res.headers.get('content-type') || '';
+    const isJson = contentType.includes('application/json');
+    const parsedBody = isJson ? await res.json().catch(() => null) : await res.text().catch(() => null);
+    if (!res.ok) {
+        const message = typeof parsedBody === 'object' && parsedBody && 'message' in parsedBody
+            ? String(parsedBody.message)
+            : `Request failed with status ${res.status}`;
+        throw new ApiError(message, res.status, parsedBody);
+    }
+    return parsedBody;
+}
+
+function joinUrl(baseUrl, path) {
+    const normalizedBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    return `${normalizedBase}${normalizedPath}`;
+}
+async function fetchContact({ baseUrl, contactId, signal }) {
+    const url = joinUrl(baseUrl, `/contacts/${encodeURIComponent(contactId)}`);
+    return requestJson({ url, signal });
+}
+
+/**
+ * Type guard to check if an object is an IBusiness
+ * @param obj The object to check
+ * @returns True if the object is an IBusiness
+ */
+function isBusiness(obj) {
+    if (obj?.isBusiness === true) {
+        // Si se ha marcado explícitamente como negocio con la propiedad isBusiness
+        return true;
+    }
+    return (obj !== null &&
+        typeof obj === 'object' &&
+        typeof obj.id === 'string' &&
+        typeof obj.spaceId === 'string' &&
+        typeof obj.name === 'string' &&
+        Array.isArray(obj.membersId) &&
+        Array.isArray(obj.members) &&
+        Array.isArray(obj.phones) &&
+        Array.isArray(obj.emails) &&
+        typeof obj.imageUrl === 'string' &&
+        !('firstName' in obj) &&
+        !('lastName' in obj));
+}
+
+/**
+ * Type guard to check if an object is an IContact
+ * @param obj The object to check
+ * @returns True if the object is an IContact
+ */
+function isContact(obj) {
+    // Si está marcado explícitamente como negocio, no es un contacto regular
+    if (obj?.isBusiness === true) {
+        return false;
+    }
+    return (obj !== null &&
+        typeof obj === 'object' &&
+        typeof obj.id === 'string' &&
+        typeof obj.spaceId === 'string' &&
+        typeof obj.name === 'string' &&
+        typeof obj.firstName === 'string' &&
+        typeof obj.lastName === 'string' &&
+        Array.isArray(obj.phones) &&
+        Array.isArray(obj.emails) &&
+        'origin' in obj &&
+        typeof obj.isSpam === 'boolean' &&
+        (!obj.businessId || typeof obj.businessId === 'string'));
+}
+
+function useEditContactModalController({ open, baseUrl, contactId, }) {
+    const abortRef = React.useRef(null);
+    const [state, setState] = React.useState({
+        isLoading: false,
+        error: null,
+        contactData: null,
+    });
+    const canFetch = React.useMemo(() => Boolean(open && baseUrl && contactId), [open, baseUrl, contactId]);
+    React.useEffect(() => {
+        if (open)
+            return;
+        abortRef.current?.abort();
+        setState({ isLoading: false, error: null, contactData: null });
+    }, [open]);
+    React.useEffect(() => {
+        if (!canFetch) {
+            return;
+        }
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setState({ isLoading: true, error: null, contactData: null });
+        fetchContact({ baseUrl: baseUrl, contactId: contactId, signal: controller.signal })
+            .then((data) => {
+            setState({ isLoading: false, error: null, contactData: data });
+        })
+            .catch((err) => {
+            if (controller.signal.aborted)
+                return;
+            setState((prev) => ({ ...prev, isLoading: false, error: err }));
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [canFetch, baseUrl, contactId]);
+    const selectors = React.useMemo(() => {
+        const contactData = state.contactData;
+        const business = isBusiness(contactData);
+        const contact = isContact(contactData);
+        let contactType = 'unknown';
+        if (business)
+            contactType = 'business';
+        if (contact)
+            contactType = 'contact';
+        let displayName = 'Unknown Contact';
+        if (business) {
+            displayName = contactData.name;
+        }
+        else if (contact) {
+            displayName = `${contactData.firstName} ${contactData.lastName}`.trim();
+        }
+        return {
+            isBusiness: business,
+            isContact: contact,
+            contactType,
+            displayName,
+        };
+    }, [state.contactData]);
+    return {
+        state,
+        selectors,
+        actions: {
+            setContactData: (contactData) => setState((prev) => ({ ...prev, contactData: contactData ?? null })),
+            clearError: () => setState((prev) => ({ ...prev, error: null })),
+        },
+    };
+}
+
+const EditContactModal = ({ open, onClose, baseUrl, contactId, sx,
+// t
+ }) => {
+    const { state, selectors } = useEditContactModalController({
+        open,
+        baseUrl,
+        contactId,
+    });
+    const handleClose = (event, reason) => {
+        if (reason === 'escapeKeyDown') {
+            const maybeEvent = event;
+            if (typeof maybeEvent?.stopPropagation === 'function') {
+                maybeEvent.stopPropagation();
+            }
+            if (typeof maybeEvent?.preventDefault === 'function') {
+                maybeEvent.preventDefault();
+            }
+        }
+        onClose();
+    };
+    const baseSx = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 'min(600px, calc(100vw - 32px))',
+        bgcolor: 'background.paper',
+        borderRadius: 2,
+        boxShadow: 24,
+        outline: 0,
+        p: 2,
+    };
+    const mergedSx = Array.isArray(sx)
+        ? [baseSx, ...sx]
+        : sx
+            ? [baseSx, sx]
+            : baseSx;
+    return (jsxRuntimeExports.jsx(material.Modal, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: material.Backdrop }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(material.Fade, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(material.Box, { sx: mergedSx, children: state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(material.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: 180,
+                    }, children: jsxRuntimeExports.jsx(material.CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(material.Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Header, { imgUrl: state.contactData.imageUrl, displayName: selectors.displayName }), jsxRuntimeExports.jsx(material.Box, { sx: { minHeight: 120 } })] })) : null }) }) }));
 };
 
 exports.ContactInfoPopup = ContactInfoPopup;
+exports.EditContactModal = EditContactModal;
 //# sourceMappingURL=index.js.map