@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -1,19 +1,17 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-this-in-sfc */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import axios from 'axios';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
+import { useInView } from 'react-intersection-observer';
 // Icons
-import { Button, Flex, Popover, Spin, Text, Typography } from '../../atoms';
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms/Spin';
 import { AccountProfile } from '../AccountProfile';
 import CloseIcon from './icons/close';
 import SearchIcon from './icons/search';
@@ -25,7 +23,7 @@ import Icon from '@antscorp/icons';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { DEFAULT_TRANSLATE_DATA } from './constant';
 import { CDP_ROUTE, THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
-import { useAppConfigContext } from '../../..';
+import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider/selector';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 // const STEP = {
@@ -34,12 +32,16 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 // };
 const InputSearch = props => {
     const { value, onChange, className, onClickRemove } = props;
-    return (React.createElement(InputSearchStyled, { className: className || '' },
-        React.createElement("input", { className: "input-search-account", placeholder: "Search...", value: value, onChange: e => onChange(e.target.value) }),
-        value ? (React.createElement(CloseIcon, { className: "remove-icon", onClick: onClickRemove })) : (React.createElement(SearchIcon, { className: "search-icon" }))));
+    const inputRef = useRef(null);
+    const { ref: wrapperRef, inView: componentInView } = useInView();
+    useEffect(() => {
+        if (componentInView) {
+            inputRef.current?.focus();
+        }
+    }, [componentInView]);
+    return (_jsxs(InputSearchStyled, { className: className || '', ref: wrapperRef, children: [_jsx("input", { className: "input-search-account", placeholder: "Search...", value: value, onChange: e => onChange(e.target.value), ref: inputRef }), value ? (_jsx(CloseIcon, { className: "remove-icon", onClick: onClickRemove })) : (_jsx(SearchIcon, { className: "search-icon" }))] }));
 };
 export const AccountSharing = props => {
-    var _a;
     const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, usePrivilege = true, } = props;
     const { appConfig } = useAppConfigContext();
     const { env } = appConfig;
@@ -62,6 +64,7 @@ export const AccountSharing = props => {
     const debounceSearch = useDebounce(accountSearch, 500);
     const [, setCookie] = useCookies();
     const domain = iamDomain.charAt(iamDomain.length - 1) === '/' ? iamDomain : `${iamDomain}/`;
+    const formatDomain = iamDomain.endsWith('/') ? iamDomain.slice(0, -1) : iamDomain;
     const translateLang = useMemo(() => translate(translateData, serverTranslateData, language), [serverTranslateData, language, translateData]);
     const getInfoAccount = () => {
         const params = {
@@ -92,8 +95,7 @@ export const AccountSharing = props => {
     };
     const handleInfoAccount = () => {
         getInfoAccount().then(res => {
-            var _a;
-            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) {
+            if (res?.data?.data) {
                 setInfoAccount(res.data.data);
             }
         });
@@ -104,8 +106,7 @@ export const AccountSharing = props => {
         fetch(`${domain}api/network/info?type=get-list-network&token=${token}`)
             .then(response => response.json())
             .then(res => {
-            var _a;
-            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.length) {
+            if (res?.data?.length) {
                 const convertedNetworks = res.data.map(network => ({
                     networkId: network.network_id,
                     networkName: network.network_name,
@@ -235,11 +236,10 @@ export const AccountSharing = props => {
         handleInfoAccount();
         getListNetworkSelect();
         const handleChangeUserLanguage = (e) => {
-            var _a, _b, _c;
-            if (((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.action) === 'change-user-language') {
-                if ((_b = e === null || e === void 0 ? void 0 : e.data) === null || _b === void 0 ? void 0 : _b.language)
+            if (e?.data?.action === 'change-user-language') {
+                if (e?.data?.language)
                     setLanguage(e.data.language);
-                if ((_c = e === null || e === void 0 ? void 0 : e.data) === null || _c === void 0 ? void 0 : _c.translateData)
+                if (e?.data?.translateData)
                     setServerTranslateData(e.data.translateData);
             }
         };
@@ -264,22 +264,20 @@ export const AccountSharing = props => {
         }
         setIsShowLoading(true);
         getListAccountSharing().then(res => {
-            var _a, _b, _c, _d, _e;
             setIsShowLoading(false);
-            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) {
-                setListAccountSharing(((_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.list_access) || []);
-                setListAccountRecent(((_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.recent_access) || []);
+            if (res?.data?.data) {
+                setListAccountSharing(res?.data?.data?.list_access || []);
+                setListAccountRecent(res?.data?.data?.recent_access || []);
             }
         });
     }, [debounceSearch]);
     useEffect(() => {
         if (limitAccount > 10) {
             getListAccountSharing().then(res => {
-                var _a, _b, _c, _d, _e;
                 setIsShowLoading(false);
-                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) {
-                    setListAccountSharing(((_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.list_access) || []);
-                    setListAccountRecent(((_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.recent_access) || []);
+                if (res?.data?.data) {
+                    setListAccountSharing(res?.data?.data?.list_access || []);
+                    setListAccountRecent(res?.data?.data?.recent_access || []);
                 }
             });
         }
@@ -289,7 +287,7 @@ export const AccountSharing = props => {
         String(netWork.networkId)
             .toLocaleLowerCase()
             .indexOf(portalSearch.toLocaleLowerCase()) !== -1), [listNetworks, portalSearch]);
-    const logAccountSwitch = (switchAccountId) => __awaiter(void 0, void 0, void 0, function* () {
+    const logAccountSwitch = async (switchAccountId) => {
         // setIsShowLoading(true)
         if (switchAccountId && isShareAccountAccess) {
             const params = {
@@ -299,14 +297,14 @@ export const AccountSharing = props => {
                 _account_id: +accountId,
                 access_user_id: switchAccountId,
             };
-            yield axios.get(`${permissionDomain}/api/account/share-access`, {
+            await axios.get(`${permissionDomain}/api/account/share-access`, {
                 params,
             });
             // await delay(2000)
             // setIsShowLoading(false)
             // .then((res) => console.log('LOG DONE', res))
         }
-    });
+    };
     // const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
     const onClickButtonLogout = useCallback(() => {
         // Handle remove cookie and redirect to login
@@ -339,7 +337,7 @@ export const AccountSharing = props => {
     useEffect(() => {
         const logoutEvent = (event) => {
             const { data } = event;
-            if ((data === null || data === void 0 ? void 0 : data.type) === 'cdp_request_logout') {
+            if (data?.type === 'cdp_request_logout') {
                 onClickButtonLogout();
             }
         };
@@ -354,13 +352,12 @@ export const AccountSharing = props => {
         return a;
     }
     const postMessage = postParam => {
-        var _a, _b;
         if (postParam.error && postParam.error !== '')
             return;
-        const newUrlObj = urlDomain((_a = selectedNetworkRef === null || selectedNetworkRef === void 0 ? void 0 : selectedNetworkRef.current) === null || _a === void 0 ? void 0 : _a.homePage);
+        const newUrlObj = urlDomain(selectedNetworkRef?.current?.homePage);
         const arrTmp = newUrlObj.hostname.split('.');
         if (postParam.action === 'ogs-authenticate') {
-            const loginData = Object.assign({}, postParam);
+            const loginData = { ...postParam };
             if (loginData.full_name) {
                 delete loginData.full_name;
             }
@@ -391,7 +388,7 @@ export const AccountSharing = props => {
                 if (index >= 0) {
                     prefix = u_ogs.slice(0, index);
                 }
-                const newU_ogs = prefix + ((_b = selectedNetworkRef === null || selectedNetworkRef === void 0 ? void 0 : selectedNetworkRef.current) === null || _b === void 0 ? void 0 : _b.networkId);
+                const newU_ogs = prefix + selectedNetworkRef?.current?.networkId;
                 if (newUrlObj.protocol !== 'https:') {
                     if (arrTmp.length < 4) {
                         setCookie(newU_ogs, JSON.stringify(loginData), {
@@ -452,7 +449,7 @@ export const AccountSharing = props => {
         };
         postMessage(postParam);
     };
-    const loginNetworkWithToken = (networkItem) => __awaiter(void 0, void 0, void 0, function* () {
+    const loginNetworkWithToken = async (networkItem) => {
         if (!token || !networkItem || !networkItem.networkId) {
             return;
         }
@@ -483,15 +480,15 @@ export const AccountSharing = props => {
         xhr.send(JSON.stringify(data));
         // Set cookie and session
         setCookieSession({ name: 'api_pid', value: networkIdSelected });
-    });
+    };
     const selectNetwork = network => {
         if (+networkId === +network.networkId) {
             return;
         }
         loginNetworkWithToken(network);
     };
-    const handleSwitchAccount = (account) => __awaiter(void 0, void 0, void 0, function* () {
-        yield logAccountSwitch(account.user_id);
+    const handleSwitchAccount = async (account) => {
+        await logAccountSwitch(account.user_id);
         if (callbackGetInfoAccount)
             callbackGetInfoAccount(account);
         // setLimitAccount(limitAccount + 10)
@@ -499,70 +496,29 @@ export const AccountSharing = props => {
         //   setIsShowDetail(false);
         // }
         setLimitAccount(limitAccount + 1);
-    });
-    const renderAccounts = (listAccountsRender) => listAccountsRender === null || listAccountsRender === void 0 ? void 0 : listAccountsRender.map((account) => (React.createElement("li", { key: account.user_id, onClick: () => handleSwitchAccount(account) },
-        React.createElement(Typography.Text, { className: "account-name", ellipsis: { tooltip: true } }, account.full_name),
-        React.createElement(Text, { className: "account-number" }, formatUserId(account.user_id)))));
-    return (React.createElement(CookiesProvider, null,
-        React.createElement(Popover, { open: open, onOpenChange: () => setOpen(p => !p), content: React.createElement(PackageSharingStyled, null,
-                React.createElement("div", { className: "info-account" }, infoAccount ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "current-account-avatar" },
-                        React.createElement("img", { src: infoAccount.avatar, alt: "" }),
-                        React.createElement("div", { className: "edit-profile", onClick: () => {
-                                setOpen(p => !p);
-                                setOpenAccountProfile(true);
-                            } },
-                            React.createElement(Icon, { type: "icon-ants-edit-2", style: { color: '#aaa' } }))),
-                    React.createElement("p", { style: { fontWeight: 600 } }, infoAccount.full_name),
-                    React.createElement("p", { style: { color: '#aaa', marginTop: 2 } }, infoAccount.email))) : (React.createElement("div", null,
-                    translateLang('KEY_LOADING'),
-                    "..."))),
-                React.createElement(InnerCardStyled, null,
-                    React.createElement("div", { className: "network-block" }, tab === 'account' ? (React.createElement("div", { className: "current-network" },
-                        (currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.logo) ? (React.createElement("div", null,
-                            React.createElement("img", { src: currentNetwork.logo, style: {
-                                    maxHeight: 28,
-                                    maxWidth: 200,
-                                    borderRadius: 0,
-                                    border: 'none',
-                                    boxShadow: 'none',
-                                }, alt: "network-logo" }))) : null,
-                        React.createElement(Button, { type: "text", className: "change-network-btn", onClick: () => setTab('network'), icon: React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '12px' } }) }, translateLang('KEY_CHANGE_PORTAL')))) : (React.createElement(React.Fragment, null,
-                        React.createElement(Flex, { gap: 10 },
-                            React.createElement(Button, { type: "text", onClick: () => setTab('account'), icon: React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '12px' } }) }, translateLang('KEY_BACK')),
-                            React.createElement(InputSearch, { className: "--portal", value: portalSearch, onChange: value => setPortalSearch(value), onClickRemove: () => setPortalSearch('') })),
-                        React.createElement("div", { className: "network-select" }, filterListNetwork === null || filterListNetwork === void 0 ? void 0 : filterListNetwork.map((network) => (React.createElement("div", { key: network.networkId, className: `network-item ${+networkId === +network.networkId ||
-                                +(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.networkId) === +network.networkId
-                                ? 'disabled'
-                                : ''}`, onClick: () => selectNetwork(network) },
-                            React.createElement("div", { className: "image-wrapper" },
-                                React.createElement("img", { src: network.logo, style: {
-                                        borderRadius: 0,
-                                        border: 'none',
-                                        boxShadow: 'none',
-                                    }, alt: "logo" })),
-                            React.createElement("p", { className: "network-name" }, network.networkName))))),
-                        React.createElement("div", { className: "no-network-title" },
-                            React.createElement("span", null, "No networks"))))),
-                    tab === 'account' ? (isShowSharing ? (React.createElement("div", { className: "div-cover-account" },
-                        isShowLoading ? React.createElement(Spin, null) : null,
-                        React.createElement(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
-                                setAccountSearch('');
-                            } }),
-                        React.createElement("span", { className: "recent-title" }, "Recent accounts"),
-                        isShowLoading ? null : (React.createElement("div", { className: "no-account-title" },
-                            React.createElement("span", null, translateLang('KEY_NO_ACCOUNTS')))),
-                        React.createElement("ul", { style: { opacity: `${isShowLoading ? 0.2 : 1}` } },
-                            renderAccounts(listAccountRecent),
-                            renderAccounts(listAccountSharing)))) : (React.createElement("hr", { style: { margin: '10px 0 20px', background: '#E3EEF1' } }))) : null),
-                React.createElement(Flex, { align: "center", justify: "center" },
-                    React.createElement(Button, { onClick: () => onClickButtonLogout(), icon: React.createElement(Icon, { type: "icon-ants-logout" }) }, translateLang('KEY_LOGOUT')))), arrow: false, trigger: ['click'], placement: "bottomRight", overlayInnerStyle: {
-                backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_2,
-                padding: '20px 15px',
-                width: '400px',
-            } },
-            React.createElement(TriggerPopoverStyled, null,
-                React.createElement("div", { className: "brand-logo" }, (currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.logo) ? React.createElement("img", { src: currentNetwork.logo, alt: "" }) : null),
-                React.createElement("div", { className: "avatar" }, infoAccount ? React.createElement("img", { src: infoAccount.avatar, alt: "" }) : null))),
-        React.createElement(AccountProfile, { accountId: accountId, iamDomain: iamDomain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })));
+    };
+    const renderAccounts = (listAccountsRender) => listAccountsRender?.map((account) => (_jsxs("li", { onClick: () => handleSwitchAccount(account), children: [_jsx(Typography.Text, { className: "account-name", ellipsis: { tooltip: true }, children: account.full_name }), _jsx(Text, { className: "account-number", children: formatUserId(account.user_id) })] }, account.user_id)));
+    return (_jsxs(CookiesProvider, { children: [_jsx(Popover, { open: open, onOpenChange: () => setOpen(p => !p), content: _jsxs(PackageSharingStyled, { children: [_jsx("div", { className: "info-account", children: infoAccount ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "current-account-avatar", children: [_jsx("img", { src: infoAccount.avatar, alt: "" }), _jsx("div", { className: "edit-profile", onClick: () => {
+                                                    setOpen(p => !p);
+                                                    setOpenAccountProfile(true);
+                                                }, children: _jsx(Icon, { type: "icon-ants-edit-2", style: { color: '#aaa' } }) })] }), _jsx("p", { style: { fontWeight: 600 }, children: infoAccount.full_name }), _jsx("p", { style: { color: '#aaa', marginTop: 2 }, children: infoAccount.email })] })) : (_jsxs("div", { children: [translateLang('KEY_LOADING'), "..."] })) }), _jsxs(InnerCardStyled, { children: [_jsx("div", { className: "network-block", children: tab === 'account' ? (_jsxs("div", { className: "current-network", children: [currentNetwork?.logo ? (_jsx("div", { children: _jsx("img", { src: currentNetwork.logo, style: {
+                                                        maxHeight: 28,
+                                                        maxWidth: 200,
+                                                        borderRadius: 0,
+                                                        border: 'none',
+                                                        boxShadow: 'none',
+                                                    }, alt: "network-logo" }) })) : null, _jsx(Button, { type: "text", className: "change-network-btn", onClick: () => setTab('network'), icon: _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '12px' } }), children: translateLang('KEY_CHANGE_PORTAL') })] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 10, children: [_jsx(Button, { type: "text", onClick: () => setTab('account'), icon: _jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '12px' } }), children: translateLang('KEY_BACK') }), _jsx(InputSearch, { className: "--portal", value: portalSearch, onChange: value => setPortalSearch(value), onClickRemove: () => setPortalSearch('') })] }), _jsx("div", { className: "network-select", children: filterListNetwork?.map((network) => (_jsxs("div", { className: `network-item ${+networkId === +network.networkId ||
+                                                        +currentNetwork?.networkId === +network.networkId
+                                                        ? 'disabled'
+                                                        : ''}`, onClick: () => selectNetwork(network), children: [_jsx("div", { className: "image-wrapper", children: _jsx("img", { src: network.logo, style: {
+                                                                    borderRadius: 0,
+                                                                    border: 'none',
+                                                                    boxShadow: 'none',
+                                                                }, alt: "logo" }) }), _jsx("p", { className: "network-name", children: network.networkName })] }, network.networkId))) }), _jsx("div", { className: "no-network-title", children: _jsx("span", { children: "No networks" }) })] })) }), tab === 'account' ? (isShowSharing ? (_jsxs("div", { className: "div-cover-account", children: [isShowLoading ? _jsx(Spin, {}) : null, _jsx(InputSearch, { value: accountSearch, onChange: value => setAccountSearch(value), onClickRemove: () => {
+                                                setAccountSearch('');
+                                            } }), _jsx("span", { className: "recent-title", children: "Recent accounts" }), isShowLoading ? null : (_jsx("div", { className: "no-account-title", children: _jsx("span", { children: translateLang('KEY_NO_ACCOUNTS') }) })), _jsxs("ul", { style: { opacity: `${isShowLoading ? 0.2 : 1}` }, children: [renderAccounts(listAccountRecent), renderAccounts(listAccountSharing)] })] })) : (_jsx("hr", { style: { margin: '10px 0 20px', background: '#E3EEF1' } }))) : null] }), _jsx(Flex, { align: "center", justify: "center", children: _jsx(Button, { onClick: () => onClickButtonLogout(), icon: _jsx(Icon, { type: "icon-ants-logout" }), children: translateLang('KEY_LOGOUT') }) })] }), arrow: false, trigger: ['click'], placement: "bottomRight", overlayInnerStyle: {
+                    backgroundColor: THEME.token?.blue1_2,
+                    padding: '20px 15px',
+                    width: '400px',
+                }, children: _jsxs(TriggerPopoverStyled, { children: [_jsx("div", { className: "brand-logo", children: currentNetwork?.logo ? _jsx("img", { src: currentNetwork.logo, alt: "" }) : null }), _jsx("div", { className: "avatar", children: infoAccount ? _jsx("img", { src: infoAccount.avatar, alt: "" }) : null })] }) }), _jsx(AccountProfile, { accountId: accountId, iamDomain: formatDomain, token: token, isDisabledEdit: false, open: openAccountProfile, onClose: () => setOpenAccountProfile(false) })] }));
 };

package/es/components/organism/AccountSharing/icons/close.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const CloseIcon: (props: any) => React.JSX.Element;
+declare const CloseIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default CloseIcon;

package/es/components/organism/AccountSharing/icons/close.js

@@ -1,5 +1,3 @@
-import React from 'react';
-const CloseIcon = props => (React.createElement("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "31", height: "32", viewBox: "0 0 31 32" }, props),
-    React.createElement("title", null, "close"),
-    React.createElement("path", { d: "M30.719 3.733l-12.267 12.267 12.267 12.267-3.093 3.093-12.267-12.267-12.267 12.267-3.092-3.093 12.267-12.267-12.267-12.267 3.092-3.092 12.267 12.267 12.267-12.267z" })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CloseIcon = props => (_jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "31", height: "32", viewBox: "0 0 31 32", ...props, children: [_jsx("title", { children: "close" }), _jsx("path", { d: "M30.719 3.733l-12.267 12.267 12.267 12.267-3.093 3.093-12.267-12.267-12.267 12.267-3.092-3.093 12.267-12.267-12.267-12.267 3.092-3.092 12.267 12.267 12.267-12.267z" })] }));
 export default CloseIcon;

package/es/components/organism/AccountSharing/icons/search.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const SearchIcon: (props: any) => React.JSX.Element;
+declare const SearchIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default SearchIcon;

package/es/components/organism/AccountSharing/icons/search.js

@@ -1,5 +1,3 @@
-import React from 'react';
-const SearchIcon = props => (React.createElement("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "31", height: "32", viewBox: "0 0 31 32" }, props),
-    React.createElement("title", null, "search"),
-    React.createElement("path", { d: "M5.847 17.688q2.306 2.306 5.6 2.306t5.6-2.306 2.306-5.6-2.306-5.6-5.6-2.306-5.6 2.306-2.306 5.6 2.306 5.6zM21.989 19.994l8.73 8.73-2.635 2.635-8.73-8.73v-1.4l-0.494-0.494q-3.13 2.718-7.412 2.718-4.777 0-8.153-3.294-3.294-3.294-3.294-8.071t3.294-8.071q3.377-3.377 8.153-3.377t8.071 3.377q3.294 3.294 3.294 8.071 0 1.729-0.824 3.953-0.824 2.141-1.894 3.459l0.494 0.494z" })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SearchIcon = props => (_jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "31", height: "32", viewBox: "0 0 31 32", ...props, children: [_jsx("title", { children: "search" }), _jsx("path", { d: "M5.847 17.688q2.306 2.306 5.6 2.306t5.6-2.306 2.306-5.6-2.306-5.6-5.6-2.306-5.6 2.306-2.306 5.6 2.306 5.6zM21.989 19.994l8.73 8.73-2.635 2.635-8.73-8.73v-1.4l-0.494-0.494q-3.13 2.718-7.412 2.718-4.777 0-8.153-3.294-3.294-3.294-3.294-8.071t3.294-8.071q3.377-3.377 8.153-3.377t8.071 3.377q3.294 3.294 3.294 8.071 0 1.729-0.824 3.953-0.824 2.141-1.894 3.459l0.494 0.494z" })] }));
 export default SearchIcon;

package/es/components/organism/AccountSharing/index.d.ts

@@ -1 +1,2 @@
-export { AccountSharing, type AccountSharingProps } from './AccountSharing';
+export { AccountSharing } from './AccountSharing';
+export type { AccountSharingProps } from './AccountSharing';

package/es/components/organism/AccountSharing/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputSearchStyled = styled.div `
@@ -45,7 +44,7 @@ export const InputSearchStyled = styled.div `
 
   svg {
     position: absolute;
-    fill: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    fill: ${THEME?.token?.bw8};
     right: 5px;
     width: 20px;
     height: 20px;
@@ -70,7 +69,7 @@ export const TriggerPopoverStyled = styled.div `
   justify-content: space-between;
   gap: 15px;
   padding: 3px 3px 3px 10px;
-  border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  border: 1px solid ${THEME.token?.bw3};
   background-color: white;
   border-radius: 999px;
 
@@ -105,10 +104,10 @@ export const PackageSharingStyled = styled.div `
   font-size: 13px;
   color: #666;
 
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
+  background-color: ${THEME.token?.blue1_2};
 
-  min-width: 400px;
-  max-width: 400px;
+  /* min-width: 400px;
+  max-width: 400px; */
 
   .info-account {
     display: flex;
@@ -203,14 +202,14 @@ export const PackageSharingStyled = styled.div `
       li {
         cursor: pointer;
         padding: 8px 5px;
-        border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
+        border-radius: ${THEME.token?.borderRadius}px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
 
         &:hover {
-          background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue};
+          background-color: ${THEME.token?.blue};
         }
 
         .account-name {
@@ -257,7 +256,7 @@ export const PackageSharingStyled = styled.div `
         height: 42px;
         padding: 10px;
         border-radius: 10px;
-        border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw4};
+        border: 1px solid ${THEME.token?.bw4};
 
         & img {
           width: 100%;
@@ -281,15 +280,15 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
         &:hover {
           .image-wrapper {
-            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue};
-            border-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue3};
+            background-color: ${THEME.token?.blue};
+            border-color: ${THEME.token?.blue3};
           }
         }
         &.disabled {
           cursor: default;
           .image-wrapper {
-            background: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1};
-            border-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7};
+            background: ${THEME.token?.blue1_1};
+            border-color: ${THEME.token?.blue7};
             img {
               cursor: default;
             }
@@ -298,7 +297,7 @@ export const PackageSharingStyled = styled.div `
         .image-wrapper {
           border: 1px solid #ddd;
           padding: 10px;
-          border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
+          border-radius: ${THEME.token?.borderRadius}px;
           transition: all 0.2s ease-in-out;
           /* width: 108px;
           height: 45px; */
@@ -307,7 +306,7 @@ export const PackageSharingStyled = styled.div `
           }
         }
         .network-name {
-          color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw8};
+          color: ${THEME.token?.bw8};
           font-size: 11px;
           margin-top: 5px;
           margin-bottom: 0;
@@ -337,7 +336,7 @@ export const PackageSharingStyled = styled.div `
 export const InnerCardStyled = styled.div `
   width: 370px;
   background-color: white;
-  border-radius: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.borderRadius}px;
+  border-radius: ${THEME.token?.borderRadius}px;
   padding: 10px;
   margin-bottom: 15px;
 `;

package/es/components/organism/ActivityTimeline/ActivityTimeline.d.ts

@@ -0,0 +1,2 @@
+import { ActivityTimeLineProps } from './types';
+export declare const ActivityTimeline: (props: ActivityTimeLineProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-underscore-dangle */
+import { useMemo } from 'react';
+import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
+import { Flex, Spin } from '../../atoms';
+import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
+import { useInView } from 'react-intersection-observer';
+import { translate, translations } from '@antscorp/antsomi-locales';
+import { isEmpty } from 'lodash';
+import { differenceInMonths, formatUTCDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
+import { getPortalTimeZone } from '@antscorp/antsomi-ui/es/utils/portal';
+import { EmptyData } from '../../molecules';
+import clsx from 'clsx';
+export const ActivityTimeline = (props) => {
+    const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = getPortalTimeZone(), objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
+    let { timelineAvailable } = props;
+    timelineAvailable = (timelines.length > 0 && !!timelineAvailable) || false;
+    const eventTracking = useMemo(() => {
+        const list = [...eventTrackingProp];
+        const map = Object.fromEntries(list.map(item => [`${item.eventCategoryId}@@${item.eventActionId}`, item]));
+        return { list, map };
+    }, [eventTrackingProp]);
+    const [bottomRef] = useInView({
+        threshold: 0.7,
+        onChange: inView => {
+            if (!inView || isLoading || !timelineAvailable || !onFetchMore)
+                return;
+            onFetchMore();
+        },
+    });
+    const showBottomComponent = () => {
+        if (isEmpty(timelines) || isLoading)
+            return null;
+        return (_jsx(TimelineBottom, { align: "center", justify: "center", children: timelineAvailable && onFetchMore ? (_jsx(Flex, { ref: bottomRef, children: _jsx(Spin, { indicatorSize: 24 }) })) : (translate(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!')) }));
+    };
+    const showMainContent = (timelines, customerName) => {
+        const result = [];
+        if (timelines.length > 0) {
+            const startDate = startOfMonth(new Date()).getTime();
+            let firstDateEvent = startOfMonth(new Date(formatUTCDateTZ(timelines[0].trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+            let diffTempt = differenceInMonths(new Date(startDate), new Date(firstDateEvent));
+            if (diffTempt === 0) {
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--${startDate}`));
+            }
+            else if (diffTempt === 1) {
+                result.push(_jsx(TimeLineTitle, { type: "nodata-single", data: { date: startDate } }, `time-heading--${startDate}`));
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--v2-${firstDateEvent}`));
+            }
+            else {
+                const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), -1)).getTime();
+                result.push(_jsx(TimeLineTitle, { type: "nodata-multi", data: { startDate, endDate: dateNextMonthEvent } }, `time-heading--${startDate}`));
+                result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEvent } }, `time-heading--v2-${firstDateEvent}`));
+            }
+            timelines.forEach((item, index) => {
+                const firstDateEventTempt = startOfMonth(new Date(formatUTCDateTZ(item.trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+                if (firstDateEvent !== firstDateEventTempt) {
+                    diffTempt = differenceInMonths(new Date(firstDateEvent), new Date(firstDateEventTempt));
+                    if (diffTempt === 0) {
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading--${item.timestamp}`));
+                    }
+                    else if (diffTempt === 1) {
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading--${item.timestamp}`));
+                    }
+                    else if (diffTempt === 2) {
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(_jsx(TimeLineTitle, { type: "nodata-single", data: { date: dateNextMonthEvent } }, `time-heading--${item.timestamp}`));
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading-v2-${item.timestamp}`));
+                    }
+                    else {
+                        const datePrevMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), 1)).getTime();
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(_jsx(TimeLineTitle, { type: "nodata-multi", data: {
+                                startDate: datePrevMonthEvent,
+                                endDate: dateNextMonthEvent,
+                            } }, `time-heading--${item.timestamp}`));
+                        result.push(_jsx(TimeLineTitle, { type: "label", data: { date: firstDateEventTempt } }, `time-heading-v2-${item.timestamp}`));
+                    }
+                    firstDateEvent = firstDateEventTempt;
+                }
+                const key = `${item.etype}-${item.timestamp}-${item.sectionKey}-${index}`;
+                if (item.data.totalActivityCount === 1) {
+                    result.push(_jsx(ItemEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                }
+                else if (item.data.totalActivityCount > 1) {
+                    result.push(_jsx(ItemGroupEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                }
+            });
+        }
+        return result;
+    };
+    const renderContent = () => {
+        if (isLoading) {
+            return (_jsxs(_Fragment, { children: [header, _jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) })] }));
+        }
+        if (!timelines.length) {
+            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) })] }));
+        }
+        return (_jsxs(_Fragment, { children: [header, showMainContent(timelines, objectName), showBottomComponent()] }));
+    };
+    return (_jsxs(StyledRoot, { className: clsx(className, 'activity-timeline'), children: [_jsx(StyldTitle, { children: title }), renderContent()] }));
+};