@trii/components 2.0.51 → 2.0.53

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

@@ -1,6 +1,5 @@
 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;
@@ -11,5 +10,5 @@ export interface ContactInfoPopupProps {
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactInfoPopup: (props: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactInfoPopup;

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

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

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

@@ -1,2 +1,2 @@
-import i18n from 'i18next';
-export default i18n;
+declare const i18nInstance: import("i18next").i18n;
+export default i18nInstance;

package/dist/esm/index.js

@@ -2,9 +2,8 @@ import * as React$1 from 'react';
 import React__default, { useCallback, useEffect, createContext, useContext, useState, useMemo, Children, isValidElement, cloneElement, useDeferredValue, createElement, 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, Button as Button$2, Divider, Select as Select$2, MenuItem as MenuItem$2, FormControl as FormControl$2, Menu as Menu$2, ListItemIcon, ListItemText, Modal as Modal$2, Grid, LinearProgress, 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 { initReactI18next, I18nextProvider, 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';
 
@@ -15448,7 +15447,8 @@ const resources = {
     en: { translation: en },
     es: { translation: es },
 };
-i18n.use(initReactI18next).init({
+const i18nInstance = i18n.createInstance();
+i18nInstance.use(initReactI18next).init({
     resources,
     lng: 'en',
     fallbackLng: 'en',
@@ -15487,7 +15487,7 @@ const PopupContainer = styled$5(Box$2)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
+const ContactInfoPopupContent = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
     const { t: i18nT, i18n } = useTranslation();
     useEffect(() => {
         if (language) {
@@ -15547,6 +15547,9 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
     }, [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') })] }) }) }) }));
 };
+const ContactInfoPopup = (props) => {
+    return (jsxRuntimeExports.jsx(I18nextProvider, { i18n: i18nInstance, children: jsxRuntimeExports.jsx(ContactInfoPopupContent, { ...props }) }));
+};
 
 var Close = {};
 
@@ -25380,7 +25383,7 @@ const SearchLocationEditor = ({ baseUrl, spaceId, entityType, entityId, onBack,
         }
     };
     const isDisabled = !canSubmit || isSavingMain || isSavingSecondary;
-    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('searchLocationModal.searchAddress') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveMainAddress, loading: isSavingMain, disabled: isDisabled, sx: { mr: 1 }, children: t('searchLocationModal.saveMainAddress') }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "outlined", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveSecondaryAddress, loading: isSavingSecondary, disabled: isDisabled, children: t('searchLocationModal.saveSecondaryAddress') })] }), jsxRuntimeExports.jsxs(Stack$2, { spacing: 2, children: [jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', zIndex: 1400 }, children: [jsxRuntimeExports.jsx(SearchLocationInput, { onPlaceSelected: handlePlaceSelected, onError: handleError, placeholder: t('searchLocationModal.enterLocation') }), error ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", color: "error", sx: { mt: 0.5, display: 'block' }, children: error })) : null] }), jsxRuntimeExports.jsx(TextField$1, { label: t('conversations.contactDetails.street'), value: draft.street, onChange: handleChange('street'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.city'), value: draft.city, onChange: handleChange('city'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.state'), value: draft.state, onChange: handleChange('state'), fullWidth: true, size: "small" })] }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.postalCode'), value: draft.zipcode, onChange: handleChange('zipcode'), fullWidth: true, size: "small" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.country'), value: draft.country, onChange: handleChange('country'), fullWidth: true, size: "small" })] }), query ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", sx: { opacity: 0.7 }, children: query })) : null] })] }));
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 3 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), children: jsxRuntimeExports.jsx(default_1$c, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "h6", children: t('searchLocationModal.searchAddress') })] }), jsxRuntimeExports.jsxs(Stack$2, { spacing: 3, children: [jsxRuntimeExports.jsxs(Box$2, { sx: { position: 'relative', zIndex: 1400 }, children: [jsxRuntimeExports.jsx(SearchLocationInput, { onPlaceSelected: handlePlaceSelected, onError: handleError, placeholder: t('searchLocationModal.enterLocation') }), error ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", color: "error", sx: { mt: 0.5, display: 'block' }, children: error })) : null] }), jsxRuntimeExports.jsx(TextField$1, { label: t('conversations.contactDetails.street'), value: draft.street, onChange: handleChange('street'), fullWidth: true, size: "medium" }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.city'), value: draft.city, onChange: handleChange('city'), fullWidth: true, size: "medium" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.state'), value: draft.state, onChange: handleChange('state'), fullWidth: true, size: "medium" })] }), jsxRuntimeExports.jsxs(Stack$2, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.postalCode'), value: draft.zipcode, onChange: handleChange('zipcode'), fullWidth: true, size: "medium" }), jsxRuntimeExports.jsx(TextField$1, { label: t('searchLocationModal.country'), value: draft.country, onChange: handleChange('country'), fullWidth: true, size: "medium" })] }), query ? (jsxRuntimeExports.jsx(Typography$2, { variant: "caption", sx: { opacity: 0.7 }, children: query })) : null, jsxRuntimeExports.jsxs(Stack$2, { direction: "row", spacing: 2, justifyContent: "flex-end", sx: { pt: 2 }, children: [jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "large", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveMainAddress, loading: isSavingMain, disabled: isDisabled, children: t('searchLocationModal.saveMainAddress') }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "outlined", size: "large", startIcon: jsxRuntimeExports.jsx(default_1$b, {}), onClick: handleSaveSecondaryAddress, loading: isSavingSecondary, disabled: isDisabled, children: t('searchLocationModal.saveSecondaryAddress') })] })] })] }));
 };
 
 /**
@@ -27027,6 +27030,9 @@ const Section = ({ title, children, enableDirectionSearch = false, onDirectionSe
             borderRadius: 2,
             p: 2,
             mb: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
         }, children: [jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: title }), enableDirectionSearch && (jsxRuntimeExports.jsx(Button$2, { startIcon: jsxRuntimeExports.jsx(default_1$9, { sx: { color: 'primary.main', height: 18, width: 18 } }), size: "small", variant: "outlined", color: "primary", onClick: () => onDirectionSearchClick && onDirectionSearchClick(), children: t('global.searchLocation') })), jsxRuntimeExports.jsx(Divider, { sx: { my: 1.5 } }), children] }));
 };
 
@@ -58295,9 +58301,20 @@ const BusinessSelectEditor = ({ baseUrl, spaceId, contactId, initialBusiness, on
                         } })] })] }));
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
+const EditContactModalContent = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
     const { t: i18nT, i18n } = useTranslation();
     const modalContentRef = useRef(null);
+    useEffect(() => {
+        // Load the google script and append it to the document body
+        const script = document.createElement('script');
+        script.src = 'https://accounts.google.com/gsi/client';
+        script.async = true;
+        script.defer = true;
+        document.body.appendChild(script);
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, []);
     useEffect(() => {
         if (language) {
             i18n.changeLanguage(language);
@@ -58389,6 +58406,9 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, lang
                                                                 }
                                                                 : null, onBack: () => setView('main'), onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }) }) })] }) }) })) : null] }) }) }) }) }) }));
 };
+const EditContactModal = (props) => {
+    return (jsxRuntimeExports.jsx(I18nextProvider, { i18n: i18nInstance, children: jsxRuntimeExports.jsx(EditContactModalContent, { ...props }) }));
+};
 
-export { ContactInfoPopup, EditContactModal };
+export { ContactInfoPopup, EditContactModal, i18nInstance as i18n };
 //# sourceMappingURL=index.js.map