@trii/components 2.0.25 → 2.0.26

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

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

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { useCallback, useEffect } from 'react';
-import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress, Tooltip, Chip, Popper, ClickAwayListener, CardContent } from '@mui/material';
+import React__default, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress, Tooltip, Chip, Popper, ClickAwayListener, CardContent, Modal, Backdrop, Fade } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -8641,19 +8641,19 @@ const ButtonsContainer = styled$3(Box)(({ theme }) => ({
 const SmallIconButton = styled$3(IconButton)({
     padding: 4,
 });
-const HeaderContainer = styled$3(Box)({
+const HeaderContainer$1 = styled$3(Box)({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     marginBottom: '16px',
     position: 'relative',
 });
-const ContactAvatar = styled$3(Avatar)({
+const ContactAvatar$1 = styled$3(Avatar)({
     width: 60,
     height: 60,
     marginBottom: 8,
 });
-const ContactName = styled$3(Typography)({
+const ContactName$1 = styled$3(Typography)({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -8668,7 +8668,7 @@ const LoadingContainer = styled$3(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 = useCallback((url) => (event) => {
         try {
             event.preventDefault();
@@ -8694,7 +8694,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) => {
@@ -8712,7 +8712,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(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(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 = styled$3(Box)({
@@ -14651,7 +14651,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;
@@ -14677,7 +14677,7 @@ const SectionTitle$1 = styled$3(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(Typography, { variant: "body2", color: "text.secondary", children: contactData?.businessName })] }));
 };
@@ -14687,7 +14687,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;
@@ -14737,7 +14737,7 @@ const SectionTitle = styled$3(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)))] }));
 };
@@ -14778,8 +14778,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" }),
@@ -14828,8 +14828,235 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header, { 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(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header$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 = styled$3(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: '16px',
+    position: 'relative',
+});
+const ContactAvatar = styled$3(Avatar)({
+    width: 60,
+    height: 60,
+    marginBottom: 8,
+});
+const ContactName = styled$3(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 = useRef(null);
+    const [state, setState] = useState({
+        isLoading: false,
+        error: null,
+        contactData: null,
+    });
+    const canFetch = useMemo(() => Boolean(open && baseUrl && contactId), [open, baseUrl, contactId]);
+    useEffect(() => {
+        if (open)
+            return;
+        abortRef.current?.abort();
+        setState({ isLoading: false, error: null, contactData: null });
+    }, [open]);
+    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 = 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(Modal, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: Backdrop }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(Fade, { in: open, timeout: 200, children: jsxRuntimeExports.jsx(Box, { sx: mergedSx, children: state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: 180,
+                    }, children: jsxRuntimeExports.jsx(CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(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(Box, { sx: { minHeight: 120 } })] })) : null }) }) }));
 };
 
-export { ContactInfoPopup };
+export { ContactInfoPopup, EditContactModal };
 //# sourceMappingURL=index.js.map