@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,568 @@
+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());
+    });
+};
+/* 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 { CookiesProvider, useCookies } from 'react-cookie';
+// Icons
+import { Button, Flex, Popover, Spin, Text, Typography } from '../../atoms';
+import { AccountProfile } from '../AccountProfile';
+import CloseIcon from './icons/close';
+import SearchIcon from './icons/search';
+import { InnerCardStyled, InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled, } from './styled';
+// Utils
+import { formatUserId, getObjectPropSafely, removeAppCookieSessionSubdomain, removeAppCookieSessionSubdomainPrefix, setCookieSession, } from '@antscorp/antsomi-ui/es/utils';
+import { translate } from './utils';
+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 '../../..';
+// Constants
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+// const STEP = {
+//   SWITCH_ACCOUNT: 'SWITCH_ACCOUNT',
+//   SELECT_NETWORK: 'SELECT_NETWORK',
+// };
+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" }))));
+};
+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;
+    const selectedNetworkRef = useRef();
+    // const [isShowSearchAccount, setIsShowSearchAccount] = useState(false);
+    const [infoAccount, setInfoAccount] = useState({});
+    const [listAccountSharing, setListAccountSharing] = useState([]);
+    const [listAccountRecent, setListAccountRecent] = useState([]);
+    const [limitAccount, setLimitAccount] = useState(10);
+    const [isShowLoading, setIsShowLoading] = useState(false);
+    const [accountSearch, setAccountSearch] = useState('');
+    const [portalSearch, setPortalSearch] = useState('');
+    const [openAccountProfile, setOpenAccountProfile] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [tab, setTab] = useState('account');
+    const [listNetworks, setListNetworks] = useState([]);
+    const [currentNetwork, setCurrentNetwork] = useState();
+    const [serverTranslateData, setServerTranslateData] = useState({});
+    const [language, setLanguage] = useState(lang || 'en');
+    const debounceSearch = useDebounce(accountSearch, 500);
+    const [, setCookie] = useCookies();
+    const domain = iamDomain.charAt(iamDomain.length - 1) === '/' ? iamDomain : `${iamDomain}/`;
+    const translateLang = useMemo(() => translate(translateData, serverTranslateData, language), [serverTranslateData, language, translateData]);
+    const getInfoAccount = () => {
+        const params = {
+            type: 'user-info',
+            userId: +accountId,
+            networkId: +networkId,
+        };
+        return axios.get(`${domain}api/3rd/info`, { params });
+    };
+    const getTranslateData = () => {
+        if ((translateData && Object.keys(translateData).length > 0) || !permissionDomain) {
+            return true;
+        }
+        const response = axios.get(`${permissionDomain}/api/language/info`, {
+            params: {
+                type: 'get-language-by-code',
+                locale: language,
+            },
+        });
+        if (response) {
+            response.then(res => {
+                if (res && res.data && res.data.data && res.data.data.languages) {
+                    setServerTranslateData(res.data.data.languages);
+                }
+            });
+        }
+        return response;
+    };
+    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) {
+                setInfoAccount(res.data.data);
+            }
+        });
+    };
+    const getListNetworkSelect = () => {
+        if (!token)
+            return;
+        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) {
+                const convertedNetworks = res.data.map(network => ({
+                    networkId: network.network_id,
+                    networkName: network.network_name,
+                    homePage: network.home_page,
+                    logo: network.logo,
+                }));
+                setListNetworks(convertedNetworks);
+                const curNetwork = convertedNetworks.find(item => +item.networkId === +networkId);
+                if (curNetwork) {
+                    setCurrentNetwork(curNetwork);
+                }
+            }
+        });
+    };
+    const getMenuUrl = (menu, userId = '') => {
+        if (!menu || !menu.menu_path) {
+            return '';
+        }
+        const { app_domain: appDomain, app_path: appPath, menu_path: menuPath } = menu;
+        return (appDomain + appPath + menuPath).replaceAll(':user_id', userId);
+    };
+    const redirectFirstMenu = (data, redirectAccountId) => {
+        if (!Array.isArray(data)) {
+            return false;
+        }
+        const arrMenus = getObjectPropSafely(() => [...data].sort((first, second) => first.app_order - second.app_order)[0].childs) || [];
+        if (arrMenus && arrMenus.length) {
+            const firstMenu = arrMenus
+                .filter(menu => +menu.show_hide)
+                .sort((first, second) => first.menu_order - second.menu_order)[0];
+            if (firstMenu) {
+                const redirectUrl = getMenuUrl(firstMenu, redirectAccountId);
+                window.location.href = redirectUrl;
+            }
+        }
+    };
+    const buildListAppMenus = (data, userId) => {
+        if (!Array.isArray(data) || !data.length) {
+            return [];
+        }
+        let arrMenus = [];
+        data.forEach(item => {
+            if (item.menu_id) {
+                arrMenus.push(getMenuUrl(item, userId));
+            }
+            if (item.childs && item.childs.length) {
+                arrMenus = arrMenus.concat(buildListAppMenus(item.childs, userId));
+            }
+        });
+        return arrMenus;
+    };
+    const checkRedirectHomePage = (homePage, data, userId, newNetworkId) => {
+        const convertedHomePage = String(homePage).replace(/:user_id/g, userId);
+        if (!Array.isArray(data) || !data.length) {
+            window.location.href = convertedHomePage;
+            return;
+        }
+        const arrMenus = buildListAppMenus(data, userId);
+        if (!arrMenus.some(url => convertedHomePage.includes(url))) {
+            // Redirect to recommendation
+            if (env !== ENV.DEV) {
+                window.location.assign(`${CDP_ROUTE[env || 'development']}/gen2/${newNetworkId}/dashboard/recommendation`);
+                return;
+            }
+            // return redirectFirstMenu(data, userId);
+        }
+        window.location.href = convertedHomePage;
+    };
+    const getAppsMenus = ({ token, userId, accountId, homePage, newNetworkId }) => {
+        if (permissionDomain && token && userId && accountId) {
+            const apiUrl = permissionDomain + (usePrivilege ? '/api/privilege/index' : '/api/permission/index');
+            return axios({
+                url: apiUrl,
+                params: {
+                    type: 'list-app',
+                    _token: token,
+                    _user_id: userId,
+                    _account_id: accountId,
+                    _lang: 'en',
+                    hasChild: true,
+                    from: 'login',
+                },
+            }).then(res => {
+                if (res && res.data) {
+                    checkRedirectHomePage(homePage, res.data.data, userId, newNetworkId);
+                }
+            });
+        }
+        return null;
+    };
+    const getListAccountSharing = () => {
+        if (isShareAccountAccess) {
+            const params = {
+                type: 'get-list-access',
+                _token: token,
+                _user_id: +accountId,
+                _account_id: +accountId,
+                app_code: appCode,
+                _lang: lang,
+                limit: 1000,
+                search: accountSearch,
+            };
+            setIsShowLoading(true);
+            return axios.get(`${permissionDomain}/api/account/share-access`, {
+                params,
+            });
+        }
+        const params = {
+            type: 'get-list-access-by-app-code',
+            _token: token,
+            _user_id: +accountId,
+            _account_id: +accountId,
+            app_code: appCode,
+            _lang: lang,
+            limit: 1000,
+            search: accountSearch,
+        };
+        setIsShowLoading(true);
+        return axios.get(`${permissionDomain}/api/account/share`, {
+            params,
+        });
+    };
+    useEffect(() => {
+        if (!iamDomain || !accountId || !networkId)
+            return;
+        getTranslateData();
+        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)
+                    setLanguage(e.data.language);
+                if ((_c = e === null || e === void 0 ? void 0 : e.data) === null || _c === void 0 ? void 0 : _c.translateData)
+                    setServerTranslateData(e.data.translateData);
+            }
+        };
+        window.addEventListener('message', handleChangeUserLanguage);
+        return () => {
+            window.removeEventListener('message', handleChangeUserLanguage);
+        };
+    }, []);
+    useEffect(() => {
+        if (!iamDomain || !accountId || !networkId)
+            return;
+        handleInfoAccount();
+    }, [accountId]);
+    useEffect(() => {
+        if (lang && lang !== language) {
+            setLanguage(lang);
+        }
+    }, [lang]);
+    useEffect(() => {
+        if (!permissionDomain || !token || !accountId || !appCode) {
+            return;
+        }
+        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) || []);
+            }
+        });
+    }, [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) || []);
+                }
+            });
+        }
+    }, [limitAccount]);
+    const filterListNetwork = useMemo(() => listNetworks.filter((netWork) => netWork.networkName.toLocaleLowerCase().indexOf(portalSearch.toLocaleLowerCase()) !==
+        -1 ||
+        String(netWork.networkId)
+            .toLocaleLowerCase()
+            .indexOf(portalSearch.toLocaleLowerCase()) !== -1), [listNetworks, portalSearch]);
+    const logAccountSwitch = (switchAccountId) => __awaiter(void 0, void 0, void 0, function* () {
+        // setIsShowLoading(true)
+        if (switchAccountId && isShareAccountAccess) {
+            const params = {
+                type: 'update-recent-shared-access',
+                _token: token,
+                _user_id: +accountId,
+                _account_id: +accountId,
+                access_user_id: switchAccountId,
+            };
+            yield 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
+        removeAppCookieSessionSubdomainPrefix({ name: UOGS_PREFIX, env });
+        removeAppCookieSessionSubdomain({ name: 'c_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'api_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_r_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'user_id', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_email', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_full_name', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_avatar', env });
+        removeAppCookieSessionSubdomain({ name: '_fe_ogs_pid', env });
+        localStorage.removeItem('cdp_decrypt_permission');
+        if (callbackLogout)
+            callbackLogout();
+        // Check if env is dev
+        if (env === ENV.DEV) {
+            window.location.reload();
+            return;
+        }
+        // Handle logout with cdp domain
+        window.location.href = `${CDP_ROUTE[ENV.PROD]}/iam#/login`;
+        // if (urlLogout) {
+        //   window.location.href = urlLogout;
+        // } else {
+        //   window.location.reload();
+        // }
+    }, [callbackLogout, env]);
+    useEffect(() => {
+        const logoutEvent = (event) => {
+            const { data } = event;
+            if ((data === null || data === void 0 ? void 0 : data.type) === 'cdp_request_logout') {
+                onClickButtonLogout();
+            }
+        };
+        window.addEventListener('message', logoutEvent);
+        return () => {
+            window.removeEventListener('message', logoutEvent);
+        };
+    }, [onClickButtonLogout]);
+    function urlDomain(data) {
+        const a = document.createElement('a');
+        a.href = data;
+        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 arrTmp = newUrlObj.hostname.split('.');
+        if (postParam.action === 'ogs-authenticate') {
+            const loginData = Object.assign({}, postParam);
+            if (loginData.full_name) {
+                delete loginData.full_name;
+            }
+            if (loginData.email) {
+                delete loginData.email;
+            }
+            if (loginData.avatar) {
+                delete loginData.avatar;
+            }
+            if (loginData.action) {
+                delete loginData.action;
+            }
+            if (loginData.env) {
+                delete loginData.env;
+            }
+            // if (loginData.hasOwnProperty('account_id')) {
+            //     delete loginData.account_id;
+            // }
+            // if (loginData.hasOwnProperty('conversion_id')) {
+            //     delete loginData.conversion_id;
+            // }
+            // if (loginData.hasOwnProperty('seller_role')) {
+            //     delete loginData.seller_role;
+            // }
+            if (u_ogs && typeof u_ogs === 'string' && u_ogs.trim()) {
+                const index = u_ogs.indexOf(`${networkId}`);
+                let prefix = `${u_ogs}_`;
+                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);
+                if (newUrlObj.protocol !== 'https:') {
+                    if (arrTmp.length < 4) {
+                        setCookie(newU_ogs, JSON.stringify(loginData), {
+                            domain: arrTmp.slice(-2).join('.'),
+                            path: '/; samesite=None',
+                        });
+                    }
+                    else {
+                        setCookie(newU_ogs, JSON.stringify(loginData), {
+                            domain: arrTmp.slice(-3).join('.'),
+                            path: '/; samesite=None',
+                        });
+                    }
+                }
+                else {
+                    if (arrTmp.length < 4) {
+                        setCookie(newU_ogs, JSON.stringify(loginData), {
+                            domain: arrTmp.slice(-2).join('.'),
+                            path: '/; samesite=None; secure',
+                        });
+                    }
+                    else {
+                        setCookie(newU_ogs, JSON.stringify(loginData), {
+                            domain: arrTmp.slice(-3).join('.'),
+                            path: '/; samesite=None; secure',
+                        });
+                    }
+                }
+            }
+        }
+        if (selectedNetworkRef.current && selectedNetworkRef.current.homePage) {
+            getAppsMenus({
+                token: postParam.token,
+                userId: accountId,
+                accountId,
+                homePage: selectedNetworkRef.current.homePage,
+                newNetworkId: selectedNetworkRef.current.networkId,
+            });
+            // window.location.href = selectedNetworkRef.current.homePage.replaceAll(':user_id', accountId);
+        }
+    };
+    const handleLoginData = (data = null) => {
+        if (!data.token) {
+            return;
+        }
+        const postParam = {
+            action: 'ogs-authenticate',
+            user_id: data.personal.user_id,
+            account_id: data.personal.user_id,
+            full_name: data.personal.full_name,
+            role: data.personal.role,
+            seller_role: data.personal.seller_role,
+            conversion_id: data.personal.conversion_id,
+            email: data.personal.email,
+            avatar: data.personal.avatar,
+            token: data.token,
+            language: data.personal.language,
+        };
+        postMessage(postParam);
+    };
+    const loginNetworkWithToken = (networkItem) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!token || !networkItem || !networkItem.networkId) {
+            return;
+        }
+        selectedNetworkRef.current = networkItem;
+        const loginUrl = `${domain}api/account/authenticate`;
+        const { networkId: networkIdSelected } = networkItem;
+        const data = {
+            token,
+            app_id: networkIdSelected,
+        };
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', loginUrl, true);
+        // Send the proper header information along with the request
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.withCredentials = false;
+        xhr.onreadystatechange = function () {
+            // Call a function when the state changes.
+            // if (this.readyState === XMLHttpRequest.DONE) {
+            //   setLoading(false)
+            // }
+            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                const res = JSON.parse(this.responseText);
+                if (res && res.data && res.data.token) {
+                    handleLoginData(res.data);
+                }
+            }
+        };
+        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);
+        if (callbackGetInfoAccount)
+            callbackGetInfoAccount(account);
+        // setLimitAccount(limitAccount + 10)
+        // if (isShowDetail) {
+        //   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) })));
+};

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

@@ -0,0 +1,20 @@
+export declare const appConfig: {
+    DEFAULT_KEY: {
+        KEY_EDIT_PROFILE: string;
+        KEY_LOADING: string;
+        KEY_CHANGE_PORTAL: string;
+        KEY_BACK: string;
+        KEY_SEARCH_PLACEHOLDER: string;
+        KEY_LOGOUT: string;
+        KEY_NO_ACCOUNTS: string;
+        KEY_PLEASE_WAITING: string;
+    };
+};
+export declare const DEFAULT_TRANSLATE_DATA: {
+    KEY_CHANGE_PORTAL: string;
+    KEY_EDIT_PROFILE: string;
+    KEY_SEARCH_PLACEHOLDER: string;
+    KEY_LOADING: string;
+    KEY_LOGOUT: string;
+    KEY_BACK: string;
+};

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

@@ -0,0 +1,20 @@
+export const appConfig = {
+    DEFAULT_KEY: {
+        KEY_EDIT_PROFILE: 'Edit profile',
+        KEY_LOADING: 'Loading',
+        KEY_CHANGE_PORTAL: 'Change Portal',
+        KEY_BACK: 'Back',
+        KEY_SEARCH_PLACEHOLDER: 'Search',
+        KEY_LOGOUT: 'Logout',
+        KEY_NO_ACCOUNTS: 'No accounts',
+        KEY_PLEASE_WAITING: 'Please waiting',
+    },
+};
+export const DEFAULT_TRANSLATE_DATA = {
+    KEY_CHANGE_PORTAL: 'Change Portal',
+    KEY_EDIT_PROFILE: 'Edit profile',
+    KEY_SEARCH_PLACEHOLDER: 'Search',
+    KEY_LOADING: 'loading',
+    KEY_LOGOUT: 'Logout',
+    KEY_BACK: 'Back',
+};

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

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

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

@@ -0,0 +1,5 @@
+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" })));
+export default CloseIcon;

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

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

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

@@ -0,0 +1,5 @@
+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" })));
+export default SearchIcon;

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

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

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

@@ -0,0 +1 @@
+export { AccountSharing } from './AccountSharing';

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

@@ -0,0 +1,4 @@
+export declare const InputSearchStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TriggerPopoverStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PackageSharingStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InnerCardStyled: import("styled-components").StyledComponent<"div", any, {}, never>;