@trii/components 2.0.44 → 2.0.47

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

@@ -1,14 +1,15 @@
 import { IBusiness, IContact } from '@trii/types/dist/Contacts';
 import { SxProps, Theme } from '@mui/material';
+import '../../i18n/config';
 export interface ContactInfoPopupProps {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
-    t?: (key: string) => string;
+    language?: 'en' | 'es';
     contactData?: IContact | IBusiness;
     avatarImgUrl?: string;
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactInfoPopup;

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

@@ -1,13 +1,14 @@
 import { SxProps, Theme } from '@mui/material';
+import '../../i18n/config';
 export interface Props {
     open: boolean;
     onClose: () => void;
     baseUrl?: string;
     spaceId?: string;
     contactId?: string;
-    t: (key: string) => string;
+    language?: 'en' | 'es';
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const EditContactModal: ({ open, onClose, baseUrl, spaceId, contactId, sx, t, navigate, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditContactModal: ({ open, onClose, baseUrl, spaceId, contactId, sx, language, navigate, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default EditContactModal;

package/dist/cjs/types/i18n/config.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;

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

@@ -0,0 +1,2 @@
+export { default as i18n } from './config';
+export { useTranslation } from 'react-i18next';

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

@@ -1 +1,2 @@
 export * from './components';
+export { i18n } from './i18n';

package/dist/esm/index.js

@@ -2,6 +2,9 @@ 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, 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 { initReactI18next, useTranslation } from 'react-i18next';
+import i18n from 'i18next';
+export { default as i18n } from 'i18next';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -4718,11 +4721,11 @@ var createStyled$2 = function createStyled(tag, options) {
   };
 };
 
-var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+var tags$2 = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
 
 var newStyled = createStyled$2.bind();
-tags.forEach(function (tagName) {
+tags$2.forEach(function (tagName) {
   // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
 });
@@ -6409,7 +6412,7 @@ function memoize(fn) {
   };
 }
 
-const properties = {
+const properties$2 = {
   m: 'margin',
   p: 'padding'
 };
@@ -6441,7 +6444,7 @@ const getCssProperties = memoize(prop => {
     }
   }
   const [a, b] = prop.split('');
-  const property = properties[a];
+  const property = properties$2[a];
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
@@ -15234,7 +15237,7 @@ function isBusiness$1(obj) {
 }
 
 const MemberItem = ({ name, memberId, navigate }) => {
-    const url = `/a/contacts/contacts/${memberId}`;
+    const url = `/a/conversations/conversations&conversationId=${memberId}`;
     const handleNavigation = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -15269,6 +15272,146 @@ const MembersSection = ({ contactData, title, navigate }) => {
     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)))] }));
 };
 
+var labels$1 = "Labels";
+var phone$1 = "Phone";
+var business$1 = "Business";
+var businessMembers$1 = "Business Members";
+var properties$1 = "Properties";
+var view$1 = "View";
+var email$1 = "Email";
+var tags$1 = "Tags";
+var global$2 = {
+	back: "Back",
+	save: "Save",
+	noOptions: "No options",
+	noValue: "No value",
+	birthdate: "Birthdate"
+};
+var avatar$1 = {
+	upload: "Upload photo",
+	"delete": "Delete photo"
+};
+var contactEdit$1 = {
+	from: "From",
+	to: "To"
+};
+var conversations$1 = {
+	contactDetails: {
+		contactOwner: "Contact Owner",
+		business: "Business",
+		createdBy: "Created By",
+		modifiedBy: "Modified By",
+		street: "Street",
+		city: "City",
+		state: "State",
+		postcode: "Postcode",
+		country: "Country",
+		addressInformation: "Address Information",
+		primaryAddress: "Primary Address",
+		secondaryAddress: "Secondary Address",
+		contactInformation: "Contact Information",
+		phones: "Phones",
+		contactInfo: {
+			emptySelection: "No selection"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Business Owner"
+	}
+};
+var en = {
+	labels: labels$1,
+	phone: phone$1,
+	business: business$1,
+	businessMembers: businessMembers$1,
+	properties: properties$1,
+	view: view$1,
+	email: email$1,
+	tags: tags$1,
+	global: global$2,
+	avatar: avatar$1,
+	contactEdit: contactEdit$1,
+	conversations: conversations$1
+};
+
+var labels = "Etiquetas";
+var phone = "Teléfono";
+var business = "Empresa";
+var businessMembers = "Miembros de la empresa";
+var properties = "Propiedades";
+var view = "Ver";
+var email = "Correo Electrónico";
+var tags = "Etiquetas";
+var global$1 = {
+	back: "Atrás",
+	save: "Guardar",
+	noOptions: "Sin opciones",
+	noValue: "Sin valor",
+	birthdate: "Fecha de nacimiento"
+};
+var avatar = {
+	upload: "Subir foto",
+	"delete": "Eliminar foto"
+};
+var contactEdit = {
+	from: "Desde",
+	to: "Hasta"
+};
+var conversations = {
+	contactDetails: {
+		contactOwner: "Propietario del contacto",
+		business: "Empresa",
+		createdBy: "Creado por",
+		modifiedBy: "Modificado por",
+		street: "Calle",
+		city: "Ciudad",
+		state: "Estado",
+		postcode: "Código postal",
+		country: "País",
+		addressInformation: "Información de dirección",
+		primaryAddress: "Dirección principal",
+		secondaryAddress: "Dirección secundaria",
+		contactInformation: "Información de contacto",
+		phones: "Teléfonos",
+		contactInfo: {
+			emptySelection: "Sin selección"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Propietario de la empresa"
+	}
+};
+var es = {
+	labels: labels,
+	phone: phone,
+	business: business,
+	businessMembers: businessMembers,
+	properties: properties,
+	view: view,
+	email: email,
+	tags: tags,
+	global: global$1,
+	avatar: avatar,
+	contactEdit: contactEdit,
+	conversations: conversations
+};
+
+const resources = {
+    en: { translation: en },
+    es: { translation: es },
+};
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false,
+    },
+    react: {
+        useSuspense: false,
+    },
+});
+
 const PopupContainer = styled$5(Box$2)(({ theme }) => ({
     //@ts-ignore
     backgroundColor: theme.palette.background.panel,
@@ -15296,15 +15439,14 @@ const PopupContainer = styled$5(Box$2)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t = (key) => ({
-    labels: 'Etiquetas',
-    phone: 'Teléfono',
-    business: 'Empresa',
-    businessMembers: 'Miembros de la empresa',
-    properties: 'Propiedades',
-    view: 'Ver',
-    email: 'Correo Electrónico',
-}[key] || key), }) => {
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
+    const { t: i18nT, i18n } = useTranslation();
+    useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = i18nT;
     const dataIsBusiness = isBusiness$1(contactData);
     const dataIsContact = isContact$1(contactData);
     const contactMethods = [
@@ -15355,7 +15497,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(Popper$2, { 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$1, { 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$2, { 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$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
 var Edit = {};
@@ -57288,7 +57430,14 @@ const useModalCloseHandler = ({ onClose }) => {
     return handleClose;
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, navigate, }) => {
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
+    const { t: i18nT, i18n } = useTranslation();
+    useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = (key) => i18nT(key);
     const api = useMemo(() => {
         if (!baseUrl || !spaceId)
             return null;