@hhgtech/hhg-components 1.29.88 → 1.29.90

package/build/index-5cc887da.js

@@ -0,0 +1,870 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5d65f18f.js');
+var React = require('react');
+var dayjs = require('dayjs');
+var index$4 = require('./index-67fa5818.js');
+var useTranslations = require('./useTranslations-4fb7a5ac.js');
+var index = require('./index-3c6a1bfc.js');
+var dataTransform = require('./dataTransform-27a22c74.js');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var togetherComponentGlobalContext = require('./utils-1b9bc7e0.js');
+var core$1 = require('@hhgtech/icons/core');
+var core = require('@mantine/core');
+var index$2 = require('./index-0e1519d2.js');
+var index$1 = require('./index-f373b62b.js');
+var togetherMoleculesCardAuthor = require('./index-137b351f.js');
+var index$3 = require('./index-1b1ac8fe.js');
+var miscTheme = require('./miscTheme.js');
+var other = require('@hhgtech/icons/other');
+require('@mantine/dates');
+require('./index-330e16a8.js');
+require('./useMantineLocale-b8eca90b.js');
+var index$6 = require('./index-6266a5df.js');
+var index$5 = require('./index-fa8957ac.js');
+require('./index.styles-07f26519.js');
+require('@mantine/hooks');
+require('./utils-97ffdcb1.js');
+require('./other-5c1524b3.js');
+var styled = require('@emotion/styled');
+var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
+var post = require('./post-0759bdca.js');
+require('./translationsContext-9b528bb0.js');
+require('string-format');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledPostContent = styled__default["default"].div `
+  padding: 0.5rem 1rem 1rem;
+  line-height: 1.5;
+  word-break: break-word;
+  .post-content-replying {
+    margin-right: 5px;
+    cursor: pointer;
+    display: inline-block;
+    &.tag-only {
+      margin-right: 0;
+    }
+  }
+  .post-content {
+    display: inline;
+    white-space: pre-wrap;
+    /* > *:first-child, */
+    > mention:first-child ~ * {
+      &:not(ul),
+      &:not(ol) {
+        display: inline-block;
+      }
+    }
+    > mention:first-child {
+      margin-right: 5px;
+    }
+    &.has-see-more {
+      *:last-child {
+        &:not(ul),
+        &:not(ol) {
+          display: inline;
+        }
+      }
+    }
+    img {
+      width: 100%;
+      height: unset;
+    }
+    ul,
+    ol {
+      list-style-position: inside;
+      padding-left: 1rem;
+      display: block;
+    }
+    ol {
+      list-style-type: decimal;
+    }
+    ul {
+      list-style-type: disc;
+    }
+    mention {
+      color: ${(props) => props.mentionColor || '#1890ff'};
+      padding-right: 4px;
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+var useStyles = core.createStyles((theme) => {
+    return {
+        root: {
+            mention: {
+                color: theme.fn.primaryColor(),
+            },
+            a: {
+                '&,&:visited,&:focus': {
+                    color: theme.fn.primaryColor(),
+                },
+            },
+            '.create-post-link': {
+                display: 'inline',
+                color: theme.fn.primaryColor(),
+                cursor: 'pointer',
+            },
+        },
+    };
+});
+
+const PostContent = (_a) => {
+    var { trackingCategory, url, className, style, replyingTo, mentionedUser, description: rawDescription, disableShortenContent, mentions = [], maxChars = 1000, hideShowAllBtn, styles, onClickCreatePostLink } = _a, rest = tslib_es6.__rest(_a, ["trackingCategory", "url", "className", "style", "replyingTo", "mentionedUser", "description", "disableShortenContent", "mentions", "maxChars", "hideShowAllBtn", "styles", "onClickCreatePostLink"]);
+    const { classes, theme: _theme } = useStyles(undefined, 
+    // Second argument is responsible for styles api integration
+    { name: 'PostContent', styles });
+    const [showAll, setShowAll] = React.useState(false);
+    const { t } = useTranslations.useTranslations();
+    const { authActionWrapper } = useTogetherAuthRequiredAction.useTogetherAuthRequiredAction();
+    const [openPopupExpert, setOpenPopupExpert] = React.useState(false);
+    const description = post.decodeMention(post.decodePostUrl(rawDescription || '', 'display'), mentions);
+    const { action: { sanitizeFunction }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const shortenSanitizedContentData = React.useMemo(() => {
+        const sanitizedContent = sanitizeFunction(description || '');
+        if (disableShortenContent || showAll)
+            return {
+                showContent: sanitizedContent,
+                hasSeeMore: false,
+            };
+        const firstRound = sanitizedContent.slice(0, maxChars);
+        const newLineCompensateLength = maxChars - ((firstRound.match(/<\/div>/g) || []).length - 1) * 27;
+        const shortenFirstRound = (firstRound || '').slice(0, newLineCompensateLength < 40 ? 40 : newLineCompensateLength);
+        // remove < if we cut off right before start of a new html tag
+        const secondRound = sanitizeFunction(shortenFirstRound.replace(/(<|<\/)( +|[a-zA-Z]*)$/gi, ''));
+        // don't show see more if not much difference
+        const hasSeeMore = secondRound.length < sanitizedContent.length - 10;
+        return {
+            showContent: hasSeeMore ? secondRound : sanitizedContent,
+            hasSeeMore,
+        };
+    }, [disableShortenContent, showAll, description]);
+    const replyName = (mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.name) || replyingTo;
+    const hasExpert = (mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.role) === 'expert' && !!(mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.partnerId);
+    const contentRef = React.useRef(null);
+    const handleCreatePostClick = (e) => {
+        e.preventDefault();
+        onClickCreatePostLink === null || onClickCreatePostLink === void 0 ? void 0 : onClickCreatePostLink();
+    };
+    React.useEffect(() => {
+        var _a;
+        (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-create-post]').forEach((dom) => {
+            dom.addEventListener('click', handleCreatePostClick, {
+                passive: true,
+            });
+        });
+        return () => {
+            var _a;
+            (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-create-post]').forEach((dom) => {
+                dom.removeEventListener('click', handleCreatePostClick, false);
+            });
+        };
+    }, [disableShortenContent, showAll, description]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        hasExpert && (React__default["default"].createElement(togetherMoleculesCardAuthor.PopupExpert, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), expertId: String(mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.partnerId) })),
+        React__default["default"].createElement(StyledPostContent, Object.assign({ ref: contentRef, className: `${classes.root} ${className} no-replace-click`, style: style, mentionColor: _theme.fn.primaryColor() }, rest),
+            replyName && (React__default["default"].createElement(core.Anchor, { onClick: () => hasExpert && setOpenPopupExpert(true), className: "post-content-replying" },
+                "@",
+                replyName)),
+            (rawDescription === null || rawDescription === void 0 ? void 0 : rawDescription.startsWith('[mention+id=')) && (React__default["default"].createElement("span", { className: "post-content-replying tag-only", style: {
+                    color: _theme.fn.primaryColor(),
+                } }, "@")),
+            React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
+                    __html: shortenSanitizedContentData.showContent,
+                }, className: `post-content ${shortenSanitizedContentData.hasSeeMore ? 'has-see-more' : ''}` }),
+            shortenSanitizedContentData.hasSeeMore && !showAll && (React__default["default"].createElement("span", null,
+                `... `,
+                !hideShowAllBtn && (React__default["default"].createElement(core.Anchor, Object.assign({ onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        authActionWrapper(() => setShowAll(true));
+                    }, className: "see-more-text" }, (trackingCategory
+                    ? {
+                        'data-event-category': trackingCategory,
+                        'data-event-action': 'See More Post Click',
+                        'data-event-label': url,
+                    }
+                    : {})), t('post.seeMore'))))))));
+};
+
+var styles$c = {"loading":"PD6nRZX"};
+
+const Loading = ({ className, size = 'md' }) => {
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement("div", { className: `${styles$c.loading} ${className}` },
+        React__default["default"].createElement(index.Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
+};
+
+var styles$b = {"category":"l5fL1xL","title":"L-aGKo7"};
+
+const CategoryText = ({ children, className = '' }) => {
+    return React__default["default"].createElement("div", { className: `${styles$b.category} ${className}` }, children);
+};
+const Title = ({ children, className = '' }) => {
+    return React__default["default"].createElement("div", { className: `${styles$b.title} ${className}` }, children);
+};
+
+var styles$a = {"container":"eaR8ATZ","info":"xM-7K0a"};
+
+var styles$9 = {"inner":"DZmf3s7"};
+
+const Thumbnail = ({ src, defaultSrc = index$2.CommonGAssets.getAssetPath('logo/logomark.png'), ratio = 1, size = 80, radius = 8, alt, className = '', }) => {
+    return (React__default["default"].createElement("div", { className: className },
+        React__default["default"].createElement("div", { className: styles$9.inner, style: {
+                width: `${size}px`,
+                height: `${size * ratio}px`,
+                borderRadius: `${radius}px`,
+            } },
+            React__default["default"].createElement(index$1.ImageWrap, { src: src, backupSrc: defaultSrc, alt: alt }))));
+};
+
+const CardArticle = ({ category, title, src, children, className = '', }) => {
+    return (React__default["default"].createElement("div", { className: `${styles$a.container} ${className}` },
+        React__default["default"].createElement(Thumbnail, { src: src }),
+        React__default["default"].createElement("div", { className: styles$a.info }, children || (React__default["default"].createElement("div", null,
+            category && React__default["default"].createElement(CategoryText, null, category),
+            title && React__default["default"].createElement(Title, null, title))))));
+};
+CardArticle.CategoryText = CategoryText;
+CardArticle.Title = Title;
+
+const ArticleCard = ({ featureImage, postTitle, author, categories, isReview, className = '', }) => {
+    var _a;
+    const note = isReview
+        ? 'Medically reviewed by Jobelle Ann Dela Cruz Bigalbal, MD'
+        : 'Written by Jobelle Ann Dela Cruz Bigalbal, MD';
+    return (React__default["default"].createElement(CardArticle, { src: featureImage, className: className },
+        React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(CardArticle.CategoryText, null, (_a = categories === null || categories === void 0 ? void 0 : categories[0]) === null || _a === void 0 ? void 0 : _a.name),
+            React__default["default"].createElement(CardArticle.Title, null, postTitle),
+            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor$1, { avatarProps: Object.assign(Object.assign({}, author), { size: 32 }), subTitle: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    note,
+                    React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor$1.SubDivider, null),
+                    'Dec 12, 2022') }))));
+};
+
+var styles$8 = {"container":"SFSgnOz","header":"Tf3aoVa","heading":"TOt4QXl","headingIcon":"_5XYN1KT","accBodyGroup":"yE-tZRj","accBodyGroupItem":"LXiGuGT","accBodyGroupDesc":"r4rx-6v","subTitle":"XrHh8-C","subIcon":"c5-Yecd","group":"UBj6nWr","groupBody":"_2vptVBd","articleCardLink":"ZPDAwiR","relatedList":"_6wJn-NR","socialItem":"_21XDdFv","mbChevronWrapper":"LSyr3Zo"};
+
+const ProfileDetailContext = React.createContext({});
+
+const About = ({ className = '' }) => {
+    var _a, _b, _c, _d, _e;
+    const { t } = useTranslations.useTranslations();
+    const { info, isMarryBaby, currentPageUrl } = React.useContext(ProfileDetailContext);
+    const authorProps = info === null || info === void 0 ? void 0 : info.data;
+    const social = [
+        {
+            type: index$3.SocialType.LinkedIn,
+            icon: index$2.CommonGAssets.getAssetPath('linkedin.svg'),
+            url: (_a = info === null || info === void 0 ? void 0 : info.contact) === null || _a === void 0 ? void 0 : _a.linkedin,
+            eventAction: 'Doctor Profile - Linkedin',
+        },
+        {
+            type: index$3.SocialType.Instagram,
+            icon: index$2.CommonGAssets.getAssetPath('instagram.svg'),
+            url: (_b = info === null || info === void 0 ? void 0 : info.contact) === null || _b === void 0 ? void 0 : _b.instagram,
+            eventAction: 'Doctor Profile - Instagram',
+        },
+        {
+            type: index$3.SocialType.Facebook,
+            icon: index$2.CommonGAssets.getAssetPath('facebook.svg'),
+            url: (_c = info === null || info === void 0 ? void 0 : info.contact) === null || _c === void 0 ? void 0 : _c.facebook,
+            eventAction: 'Doctor Profile  - Facebook',
+        },
+        {
+            type: index$3.SocialType.Youtube,
+            icon: index$2.CommonGAssets.getAssetPath('youtube.svg'),
+            url: (_d = info === null || info === void 0 ? void 0 : info.contact) === null || _d === void 0 ? void 0 : _d.youtube,
+            eventAction: 'Doctor Profile  - Youtube',
+        },
+        {
+            type: index$3.SocialType.Tiktok,
+            icon: index$2.CommonGAssets.getAssetPath('tiktok.svg'),
+            url: (_e = info === null || info === void 0 ? void 0 : info.contact) === null || _e === void 0 ? void 0 : _e.tiktok,
+            eventAction: 'Doctor Profile  - TikTok',
+        },
+    ];
+    const accProps = [
+        ...(((info === null || info === void 0 ? void 0 : info.experiences) || []).length > 0
+            ? [
+                {
+                    key: 'experience',
+                    heading: t('profilePanel.experience'),
+                    iconSrc: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'award-doc-mb.svg' : 'award-doc.svg'),
+                    eventAction: 'Doctor Experience Click',
+                    panel: (React__default["default"].createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.experiences.map((i, idx) => (React__default["default"].createElement("div", { className: styles$8.accBodyGroupItem, key: String(idx) },
+                        React__default["default"].createElement("div", { className: styles$8.accBodyGroupTitle }, i.title),
+                        React__default["default"].createElement("div", { className: styles$8.accBodyGroupDesc },
+                            React__default["default"].createElement("p", null, i.organization),
+                            React__default["default"].createElement("p", null, i.duration))))))),
+                },
+            ]
+            : []),
+        ...(((info === null || info === void 0 ? void 0 : info.educations) || []).length > 0
+            ? [
+                {
+                    key: 'education',
+                    heading: t('profilePanel.education'),
+                    iconSrc: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'book-mb.svg' : 'book.svg'),
+                    eventAction: 'Doctor Degree Click',
+                    panel: (React__default["default"].createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.educations.map((i, idx) => (React__default["default"].createElement("div", { className: styles$8.accBodyGroupItem, key: String(idx) },
+                        React__default["default"].createElement("div", { className: styles$8.accBodyGroupTitle }, i.schoolName),
+                        React__default["default"].createElement("div", { className: styles$8.accBodyGroupDesc },
+                            React__default["default"].createElement("p", null, i.study),
+                            React__default["default"].createElement("p", null, i.completedYear))))))),
+                },
+            ]
+            : []),
+        ...(((info === null || info === void 0 ? void 0 : info.awards) || []).length > 0
+            ? [
+                {
+                    key: 'awards',
+                    heading: t('profilePanel.awards'),
+                    iconSrc: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'award-mb.svg' : 'award.svg'),
+                    eventAction: 'Doctor Award Click',
+                    panel: (React__default["default"].createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.awards.map((i, idx) => (React__default["default"].createElement("div", { className: styles$8.accBodyGroupTitle, key: idx }, i.title))))),
+                },
+            ]
+            : []),
+    ];
+    const relatedPost = (info === null || info === void 0 ? void 0 : info.relatedPosts) || [];
+    const socialList = social.filter((i) => i.url);
+    return (React__default["default"].createElement("div", { className: `${styles$8.container} ${className}`, "data-is-marrybaby": isMarryBaby },
+        accProps.length > 0 && (React__default["default"].createElement(core.Accordion, { defaultValue: accProps[0].key, chevron: isMarryBaby ? (React__default["default"].createElement("div", { className: styles$8.mbChevronWrapper },
+                React__default["default"].createElement(core$1.Plus, { size: 12, color: miscTheme.theme.mbColors.midGray }))) : (React__default["default"].createElement(core$1.Plus, { color: miscTheme.theme.colors.gray400 })), styles: {
+                chevron: {
+                    '&[data-rotate]': {
+                        '.minus-path': {
+                            display: 'block',
+                        },
+                        '.plus-path': {
+                            display: 'none',
+                        },
+                    },
+                },
+                content: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '16px',
+                    padding: '0',
+                },
+                item: {
+                    border: 0,
+                },
+                control: {
+                    paddingLeft: 0,
+                    '&:hover': {
+                        background: 'transparent',
+                    },
+                    '*': {
+                        pointerEvents: 'none',
+                    },
+                },
+            } }, accProps.map((i) => (React__default["default"].createElement(core.Accordion.Item, { key: i.key, value: i.key },
+            React__default["default"].createElement(core.Accordion.Control, { "data-event-category": "Together", "data-event-action": i.eventAction, "data-event-label": currentPageUrl },
+                React__default["default"].createElement("div", { className: styles$8.header },
+                    React__default["default"].createElement("div", { className: styles$8.headingIcon },
+                        React__default["default"].createElement("img", { src: i.iconSrc, loading: "lazy" })),
+                    React__default["default"].createElement("div", { className: styles$8.heading }, i.heading))),
+            React__default["default"].createElement(core.Accordion.Panel, null, i.panel)))))),
+        relatedPost.length > 0 && (React__default["default"].createElement("div", { className: styles$8.group },
+            React__default["default"].createElement("div", { className: styles$8.subTitle },
+                React__default["default"].createElement("img", { className: styles$8.subIcon, src: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'mb-logo.svg' : 'logo/circle-solid.svg'), loading: "lazy" }),
+                t('profilePanel.publishedArticles')),
+            React__default["default"].createElement("div", { className: `${styles$8.relatedList}` }, info === null || info === void 0 ? void 0 : info.relatedPosts.map((i) => (React__default["default"].createElement("a", { key: String(i.id), href: `${window.location.origin}${i === null || i === void 0 ? void 0 : i.permalink}`, className: styles$8.articleCardLink },
+                React__default["default"].createElement(ArticleCard, Object.assign({ className: 'article-card' }, Object.assign(Object.assign({}, i), (!i.author && {
+                    author: {
+                        displayName: authorProps === null || authorProps === void 0 ? void 0 : authorProps.name,
+                        avatar: authorProps === null || authorProps === void 0 ? void 0 : authorProps.avatar,
+                    },
+                })), { isReview: true })))))))),
+        socialList.length > 0 && (React__default["default"].createElement("div", { className: styles$8.group },
+            React__default["default"].createElement("div", { className: styles$8.subTitle },
+                React__default["default"].createElement("img", { className: styles$8.subIcon, src: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'social-mb.svg' : 'social.svg'), loading: "lazy" }),
+                t('profilePanel.socialLinks')),
+            React__default["default"].createElement("div", { className: styles$8.groupBody },
+                React__default["default"].createElement(core.Flex, null, social.map((i, idx) => i.url && (React__default["default"].createElement("div", { className: styles$8.socialItem, key: idx },
+                    React__default["default"].createElement("a", { href: i.url, target: "_blank", rel: "noreferrer" },
+                        React__default["default"].createElement("img", { src: i.icon, loading: "lazy", width: "32px", "data-event-category": "Together", "data-event-action": i.eventAction, "data-event-label": currentPageUrl })))))))))));
+};
+
+var styles$7 = {"container":"GYUElSy","question":"_3C6QpT1","questionTitle":"_9M9VYL6","community":"_1RuSyv3","questionCard":"_1IG-eEp"};
+
+const PostCard$1 = ({ post, className = '' }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { t } = useTranslations.useTranslations();
+    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { authActionWrapper, authorProps, currentPageUrl } = React.useContext(ProfileDetailContext);
+    const postHref = `${window.location.origin}${togetherBasePath}/${(_a = post === null || post === void 0 ? void 0 : post.community) === null || _a === void 0 ? void 0 : _a.slug}/${post === null || post === void 0 ? void 0 : post.slug}/`;
+    return (React__default["default"].createElement("div", { className: `${styles$7.container} ${className}` },
+        React__default["default"].createElement("div", { className: styles$7.header },
+            React__default["default"].createElement("div", { className: styles$7.question },
+                t('profilePanel.question'),
+                ' ',
+                React__default["default"].createElement(index$4.Anchor, { className: styles$7.questionTitle, href: "#", onClick: () => {
+                        if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id)) {
+                            authActionWrapper === null || authActionWrapper === void 0 ? void 0 : authActionWrapper(() => (window.location.href = postHref));
+                        }
+                    } },
+                    "#", post === null || post === void 0 ? void 0 :
+                    post.title)),
+            React__default["default"].createElement("div", { className: styles$7.community }, (_b = post === null || post === void 0 ? void 0 : post.community) === null || _b === void 0 ? void 0 :
+                _b.name,
+                " - ", post === null || post === void 0 ? void 0 :
+                post.createdTime)),
+        React__default["default"].createElement("div", { className: styles$7.questionCard },
+            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, Object.assign({ className: "card-author" }, authorProps, { role: "user", avatarIcon: React__default["default"].createElement(other.CrossLogo, null), subLine: React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubTextRow, null,
+                    React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null, (_e = (_d = (_c = post === null || post === void 0 ? void 0 : post.expertAnswer) === null || _c === void 0 ? void 0 : _c.answer) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.createdTime)) })),
+            React__default["default"].createElement(PostContent, { className: "post-content-wrapper", description: ((_h = (_g = (_f = post === null || post === void 0 ? void 0 : post.expertAnswer) === null || _f === void 0 ? void 0 : _f.answer) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.content) || '', 
+                // disableShortenContent={disableShortenContent}
+                mentions: post === null || post === void 0 ? void 0 : post.mentions, "data-testid": "Content of the Post" })),
+        React__default["default"].createElement(index$5.Button, { variant: "secondary", "data-event-category": "Together", "data-event-action": "Doctor Reply Click", "data-event-label": currentPageUrl, size: "md", onClick: () => {
+                if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id)) {
+                    authActionWrapper === null || authActionWrapper === void 0 ? void 0 : authActionWrapper(() => (window.location.href = postHref));
+                }
+                else {
+                    window.location.href = postHref;
+                }
+            } }, t('profilePanel.anserwing.viewFull'))));
+};
+
+var styles$6 = {"container":"MrdoES3"};
+
+var styles$5 = {"container":"_8fd7YMs","thumb":"DomiQfw","content":"-b2qnfL"};
+
+const EmptyMessage = ({ message, buttonTxt, imgSrc, onBtnClick }) => {
+    const { siteType, isMarryBaby } = React.useContext(ProfileDetailContext);
+    return (React__default["default"].createElement("div", { className: styles$5.container },
+        React__default["default"].createElement("div", { className: styles$5.thumb },
+            React__default["default"].createElement("img", { src: imgSrc ||
+                    index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'comments-mb.svg' : 'comments.svg'), loading: "lazy" })),
+        message && React__default["default"].createElement("div", { className: styles$5.content }, message),
+        buttonTxt && (React__default["default"].createElement(index.Button, { size: "md", theme: siteType, color: "secondary", onClick: onBtnClick }, buttonTxt))));
+};
+
+const Answering = ({ id }) => {
+    const { t } = useTranslations.useTranslations();
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { authorProps } = React.useContext(ProfileDetailContext);
+    const [posts, setPosts] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        id &&
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                setLoading(true);
+                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_ANSWERS, {
+                    _locale: locale,
+                    id,
+                }), 'GET');
+                const resData = (((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.replies) || []).map(dataTransform.formatPost);
+                setPosts(resData);
+                setLoading(false);
+            }))();
+    }, []);
+    return (React__default["default"].createElement("div", { className: styles$6.container }, loading ? (React__default["default"].createElement(Loading, null)) : (posts !== null &&
+        (posts.length > 0 ? (posts.map((i) => (React__default["default"].createElement(PostCard$1, { className: "post-card", key: i.id, post: i })))) : (React__default["default"].createElement(EmptyMessage, { message: t('profilePanel.emptyPostMess.content', {
+                name: (authorProps === null || authorProps === void 0 ? void 0 : authorProps.name) || (authorProps === null || authorProps === void 0 ? void 0 : authorProps.username),
+            }) }))))));
+};
+
+var styles$4 = {"container":"toEutn7","title":"drdisHs","actions":"scNwTvv","skipBtn":"HNlhOdx"};
+
+const QuestionCard = (_a) => {
+    var _b, _c, _d, _e;
+    var { post } = _a, rest = tslib_es6.__rest(_a, ["post"]);
+    const { data: { env: { togetherBasePath }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    // const { showSkipQuestionTag } = useContext(ProfileDetailContext)
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", Object.assign({}, rest, { className: `${styles$4.container} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` }),
+            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, { className: "card-author", avatar: (_b = post === null || post === void 0 ? void 0 : post.author) === null || _b === void 0 ? void 0 : _b.avatar, name: ((_c = post === null || post === void 0 ? void 0 : post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post === null || post === void 0 ? void 0 : post.author) === null || _d === void 0 ? void 0 : _d.username), isAnonymous: Boolean(post === null || post === void 0 ? void 0 : post.isAnonymous), subLine: React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubTextRow, null,
+                    React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null, post === null || post === void 0 ? void 0 : post.createdTime)) }),
+            React__default["default"].createElement(index$4.Anchor, { href: `${window.location.origin}${togetherBasePath}/${(_e = post === null || post === void 0 ? void 0 : post.community) === null || _e === void 0 ? void 0 : _e.slug}/${post === null || post === void 0 ? void 0 : post.slug}/`, className: styles$4.title, rel: "noreferrer" }, post === null || post === void 0 ? void 0 : post.title))));
+};
+
+var styles$3 = {"accordion":"I-uIJ6E","header":"_41WRsj2","heading":"AcOGL93","headingIcon":"JD3dWJN","panel":"dKAgnS8","chevron":"L2Q9T6m","container":"h-pSmhX"};
+
+const Care = () => {
+    var _a, _b;
+    const { t } = useTranslations.useTranslations();
+    const { data: { locale, userInfo }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { onSkipQuestion, countValues, setCountValues } = React.useContext(ProfileDetailContext);
+    const [questions, setQuestions] = React.useState();
+    const [communities, setCommunities] = React.useState([]);
+    const [fetchLoading, setFetchLoading] = React.useState(false);
+    const loginId = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
+    React.useEffect(() => {
+        loginId &&
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                setFetchLoading(true);
+                const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_QUESTION_NEED_REPLY, {
+                    _locale: locale,
+                }), 'GET');
+                const tmpCom = [];
+                const tmpQuestionByCom = Object.create({});
+                (((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.communities) || [])
+                    .filter((i) => ((i === null || i === void 0 ? void 0 : i.question) || []).length > 0)
+                    .map((i) => {
+                    tmpQuestionByCom[i.id] = i.question.map(dataTransform.formatPost);
+                    delete i.question;
+                    tmpCom.push(dataTransform.formatCommunity(i));
+                });
+                setCommunities(tmpCom);
+                setQuestions(tmpQuestionByCom);
+                setFetchLoading(false);
+            }))();
+    }, []);
+    const handleSkipQuestion = ({ id, communityId }) => {
+        if (id && communityId && questions) {
+            const newListQuestions = Object.assign(Object.assign({}, questions), { [communityId]: [
+                    ...((questions === null || questions === void 0 ? void 0 : questions[communityId]) || []).filter((i) => i.id !== id),
+                ] });
+            let countLists = 0;
+            Object.keys(newListQuestions).map((idx) => (countLists += newListQuestions[idx].length || 0));
+            setQuestions(newListQuestions);
+            setCountValues(Object.assign(Object.assign({}, countValues), { total_question: countLists }));
+            onSkipQuestion === null || onSkipQuestion === void 0 ? void 0 : onSkipQuestion(countLists);
+        }
+    };
+    return (React__default["default"].createElement("div", { className: styles$3.container }, fetchLoading ? (React__default["default"].createElement(Loading, null)) : (countValues === null || countValues === void 0 ? void 0 : countValues.total_question) > 0 ? (communities.length > 0 && (React__default["default"].createElement(core.Accordion, { className: styles$3.accordion, defaultValue: String(((_b = communities[(_a = Object.keys(communities)) === null || _a === void 0 ? void 0 : _a[0]]) === null || _b === void 0 ? void 0 : _b.id) || ''), styles: (_theme) => ({
+            control: {
+                padding: '16px',
+                border: `1px solid ${_theme.colors.neutral[1]}`,
+                borderTopLeftRadius: '8px',
+                borderTopRightRadius: '8px',
+                '&[aria-expanded="false"]': {
+                    borderBottom: 0,
+                },
+            },
+            chevron: {
+                width: '32px',
+                height: '32px',
+            },
+            content: {
+                padding: 0,
+                border: `1px solid ${_theme.colors.neutral[1]}`,
+                borderTop: 0,
+                borderBottom: 0,
+            },
+            label: {
+                padding: 0,
+            },
+            item: {
+                marginBottom: '16px',
+            },
+        }), chevron: React__default["default"].createElement("div", { className: styles$3.chevron },
+            React__default["default"].createElement(other.ArrowDown, { color: miscTheme.theme.colors.gray600, size: 20 })) }, communities.map((i) => {
+        const listing = (questions && (questions === null || questions === void 0 ? void 0 : questions[i.id])) || [];
+        return (listing.length > 0 && (React__default["default"].createElement(core.Accordion.Item, { key: i.id, value: String(i.id) },
+            React__default["default"].createElement(core.Accordion.Control, null,
+                React__default["default"].createElement("div", { className: styles$3.header },
+                    React__default["default"].createElement("div", { className: styles$3.headingIcon },
+                        React__default["default"].createElement("img", { src: i.thumbnail, loading: "lazy" })),
+                    React__default["default"].createElement("div", { className: styles$3.heading }, i.name))),
+            React__default["default"].createElement(core.Accordion.Panel, null,
+                React__default["default"].createElement("div", { className: styles$3.body }, listing.map((post) => (React__default["default"].createElement(QuestionCard, { className: "question-card", key: post.id, post: post, onSkip: handleSkipQuestion }))))))));
+    })))) : (React__default["default"].createElement(EmptyMessage, { message: t('profilePanel.emptyCareMess.content'), imgSrc: index$2.CommonGAssets.getAssetPath('questions.svg') }))));
+};
+
+var styles$2 = {"container":"GA-zc-O","mainTxt":"A18McWD","question":"yzr0H0N","questionTitle":"_6gVRc3i","community":"xOzLGrD","questionCard":"IB049vj","linkWrapper":"_8I--vEV"};
+
+const PostCard = ({ post, className = '' }) => {
+    var _a;
+    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const { authActionWrapper, authorProps } = React.useContext(ProfileDetailContext);
+    const postHref = `${window.location.origin}${togetherBasePath}/${(_a = post === null || post === void 0 ? void 0 : post.community) === null || _a === void 0 ? void 0 : _a.slug}/${post === null || post === void 0 ? void 0 : post.slug}/`;
+    return (React__default["default"].createElement("div", { className: `${styles$2.container} ${className}` },
+        React__default["default"].createElement("div", { className: styles$2.questionCard },
+            React__default["default"].createElement("a", { "data-event-category": "Together", "data-event-action": "Click Post", "data-event-label": postHref, className: styles$2.linkWrapper, href: postHref, onClick: (e) => {
+                    if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id)) {
+                        e.preventDefault();
+                        authActionWrapper === null || authActionWrapper === void 0 ? void 0 : authActionWrapper(() => (window.location.href = postHref));
+                    }
+                } }),
+            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor$1, { className: "card-author", avatarProps: {
+                    avatar: authorProps === null || authorProps === void 0 ? void 0 : authorProps.avatar,
+                    size: 32,
+                } },
+                React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.MainText, { className: styles$2.mainTxt }, post === null || post === void 0 ? void 0 : post.title),
+                React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubTextRow, null,
+                    React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null, post === null || post === void 0 ? void 0 : post.createdTime))),
+            React__default["default"].createElement(PostContent, { className: "post-content-wrapper", description: post === null || post === void 0 ? void 0 : post.description, mentions: post === null || post === void 0 ? void 0 : post.mentions, maxChars: 200, "data-testid": "Content of the Post", hideShowAllBtn: true }),
+            React__default["default"].createElement(index$6.Text, { size: "p3", color: theme.fn.primaryColor() }, t('post.seeMore')))));
+};
+
+var styles$1 = {"container":"TSMHoEM"};
+
+const Posts = () => {
+    const { t } = useTranslations.useTranslations();
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { authorId: id, authorProps, isAuthorLogin, onCloseFromPost, } = React.useContext(ProfileDetailContext);
+    const [posts, setPosts] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        id &&
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                setLoading(true);
+                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_POST, {
+                    _locale: locale,
+                    id,
+                    isAnonymous: 0,
+                }), 'GET');
+                const resData = (((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.posts) || []).map(dataTransform.formatPost);
+                setPosts(resData);
+                setLoading(false);
+            }))();
+    }, [id]);
+    return (React__default["default"].createElement("div", { className: styles$1.container }, loading ? (React__default["default"].createElement(Loading, null)) : (posts !== null &&
+        (posts.length > 0 ? (posts.map((i) => (React__default["default"].createElement(PostCard, { className: "post-card", key: i.id, post: i })))) : (React__default["default"].createElement(EmptyMessage, { message: t('profilePanel.emptyPostMess.content', {
+                name: (authorProps === null || authorProps === void 0 ? void 0 : authorProps.name) || (authorProps === null || authorProps === void 0 ? void 0 : authorProps.username) || '',
+            }), buttonTxt: isAuthorLogin && t('profilePanel.createPost'), onBtnClick: () => {
+                onCloseFromPost === null || onCloseFromPost === void 0 ? void 0 : onCloseFromPost();
+            } }))))));
+};
+
+var styles = {"container":"_4Vekw96","info":"DIJdGcB","body":"aQSt4-Q"};
+
+const formatExperience = (data) => {
+    if (!data)
+        return {};
+    return {
+        title: data === null || data === void 0 ? void 0 : data.title,
+        organization: data === null || data === void 0 ? void 0 : data.organization,
+        duration: data.duration,
+    };
+};
+const formatEducation = (data) => {
+    if (!data)
+        return {};
+    return {
+        completedYear: data === null || data === void 0 ? void 0 : data.completed_year,
+        schoolName: data.school_name,
+        study: data.study,
+    };
+};
+
+exports.TabName = void 0;
+(function (TabName) {
+    TabName[TabName["About"] = 0] = "About";
+    TabName[TabName["Care"] = 1] = "Care";
+    TabName[TabName["Answer"] = 2] = "Answer";
+    TabName[TabName["Posts"] = 3] = "Posts";
+})(exports.TabName || (exports.TabName = {}));
+exports.UserType = void 0;
+(function (UserType) {
+    UserType[UserType["Expert"] = 0] = "Expert";
+    UserType[UserType["User"] = 1] = "User";
+})(exports.UserType || (exports.UserType = {}));
+const TabDataInit = {
+    experiences: [],
+    relatedPosts: [],
+    educations: [],
+    awards: [],
+    contact: {},
+    data: {},
+};
+const ProfileDetail = (_a) => {
+    var _b;
+    var { authorProps, selectedTab, authActionWrapper, onSkipQuestion, onCloseFromPost, hideQuestionTab, hideAnswerTab, showSkipQuestionTag, rolesToShowQuestionsTab = ['expert'], currentPageUrl } = _a, rest = tslib_es6.__rest(_a, ["authorProps", "selectedTab", "authActionWrapper", "onSkipQuestion", "onCloseFromPost", "hideQuestionTab", "hideAnswerTab", "showSkipQuestionTag", "rolesToShowQuestionsTab", "currentPageUrl"]);
+    const { data: { locale, userInfo, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = useTranslations.useTranslations();
+    const role = authorProps === null || authorProps === void 0 ? void 0 : authorProps.role;
+    const loginRole = userInfo === null || userInfo === void 0 ? void 0 : userInfo.role;
+    const id = String(authorProps === null || authorProps === void 0 ? void 0 : authorProps.userId);
+    const [countValues, setCountValues] = React.useState();
+    const [loading, setLoading] = React.useState(false);
+    const [info, setInfo] = React.useState();
+    const isAuthorLogin = (userInfo === null || userInfo === void 0 ? void 0 : userInfo._togetherUserId) === (authorProps === null || authorProps === void 0 ? void 0 : authorProps.userId);
+    const tabContent = [
+        ...(rolesToShowQuestionsTab.indexOf(role) !== -1
+            ? [
+                {
+                    value: exports.TabName.About,
+                    text: t('profilePanel.tabs.highlight'),
+                    content: React__default["default"].createElement(About, { id: id, info: info }),
+                    dataEventCategory: 'Together',
+                    dataEventAction: 'Doctor Profile Click',
+                    dataEventLabel: currentPageUrl,
+                },
+            ]
+            : []),
+        {
+            value: exports.TabName.Posts,
+            text: t('profilePanel.tabs.posts'),
+            content: React__default["default"].createElement(Posts, null),
+            hasCountResult: true,
+            keyOfCountApi: 'post',
+            keyOfResult: 'total_post',
+        },
+        ...(!hideQuestionTab &&
+            rolesToShowQuestionsTab.indexOf(loginRole) !== -1 &&
+            (userInfo === null || userInfo === void 0 ? void 0 : userInfo._togetherUserId) === (authorProps === null || authorProps === void 0 ? void 0 : authorProps.userId)
+            ? [
+                {
+                    value: exports.TabName.Care,
+                    text: `${t('profilePanel.tabs.care')}`,
+                    content: React__default["default"].createElement(Care, null),
+                    hasCountResult: true,
+                    keyOfCountApi: 'question',
+                    keyOfResult: 'total_question',
+                    dataEventCategory: 'Together',
+                    dataEventAction: 'Doctor Questions Click',
+                    dataEventLabel: currentPageUrl,
+                },
+            ]
+            : []),
+        ...(!hideAnswerTab && rolesToShowQuestionsTab.indexOf(role) !== -1
+            ? [
+                {
+                    value: exports.TabName.Answer,
+                    text: `${t('profilePanel.tabs.expertAnswer')}`,
+                    content: React__default["default"].createElement(Answering, { id: id }),
+                    hasCountResult: true,
+                    keyOfCountApi: 'reply',
+                    keyOfResult: 'total_reply',
+                    dataEventCategory: 'Together',
+                    dataEventAction: 'Doctor Reply Tab Click',
+                    dataEventLabel: currentPageUrl,
+                },
+            ]
+            : []),
+    ];
+    const [finalTabContent, setFinalTabContent] = React.useState(null);
+    const [activeTab, setActiveTab] = React.useState(null);
+    const tabsProps = {
+        value: String(activeTab),
+        dataList: finalTabContent,
+        onTabChange: (n) => setActiveTab(Number(n)),
+    };
+    const listTabsHasCount = tabContent === null || tabContent === void 0 ? void 0 : tabContent.filter((i) => i === null || i === void 0 ? void 0 : i.hasCountResult);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            setLoading(true);
+            const res = yield Promise.all([
+                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.DETAIL, {
+                    _locale: locale,
+                    id,
+                }), 'GET'),
+                ...listTabsHasCount.map((i) => {
+                    return togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.COUNT_TABS, {
+                        _locale: locale,
+                        id,
+                        [i.keyOfCountApi]: 1,
+                    }), 'GET');
+                }),
+            ]);
+            const [restDetail] = res;
+            const resInfo = {
+                data: restDetail === null || restDetail === void 0 ? void 0 : restDetail.data,
+                experiences: (((_b = (_a = restDetail === null || restDetail === void 0 ? void 0 : restDetail.data) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.experiences) || []).map(formatExperience),
+                relatedPosts: (((_c = restDetail === null || restDetail === void 0 ? void 0 : restDetail.data) === null || _c === void 0 ? void 0 : _c.related_post) || []).map((i) => dataTransform.formatArticle(i.post)),
+                educations: (((_e = (_d = restDetail === null || restDetail === void 0 ? void 0 : restDetail.data) === null || _d === void 0 ? void 0 : _d.fields) === null || _e === void 0 ? void 0 : _e.educations) || []).map(formatEducation),
+                awards: ((_g = (_f = restDetail === null || restDetail === void 0 ? void 0 : restDetail.data) === null || _f === void 0 ? void 0 : _f.fields) === null || _g === void 0 ? void 0 : _g.awards_accreditations) || [],
+                contact: ((_j = (_h = restDetail === null || restDetail === void 0 ? void 0 : restDetail.data) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.contact) || {},
+            };
+            (restDetail === null || restDetail === void 0 ? void 0 : restDetail.status) === 1 && setInfo(resInfo);
+            const relatedPost = (resInfo === null || resInfo === void 0 ? void 0 : resInfo.relatedPosts) || [];
+            const socialList = Object.keys(resInfo.contact).map((i) => { var _a; return ((_a = resInfo === null || resInfo === void 0 ? void 0 : resInfo.contact) === null || _a === void 0 ? void 0 : _a[i]) !== ''; });
+            const accInfo = [
+                ...((resInfo === null || resInfo === void 0 ? void 0 : resInfo.experiences) || []),
+                ...((resInfo === null || resInfo === void 0 ? void 0 : resInfo.educations) || []),
+                ...((resInfo === null || resInfo === void 0 ? void 0 : resInfo.awards) || []),
+            ];
+            const showAboutTab = relatedPost.length > 0 || socialList.length > 0 || accInfo.length > 0;
+            const tmp = {};
+            const listToShow = listTabsHasCount
+                .map((i, idx) => {
+                var _a, _b, _c;
+                const countNumber = ((_c = (_b = (_a = res[idx + 1]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.counting) === null || _c === void 0 ? void 0 : _c[i.keyOfResult]) || 0;
+                if (countNumber > 0) {
+                    tmp[i.keyOfResult] = countNumber;
+                    return i;
+                }
+                else {
+                    // ONLY SHOW TAB HAS COUNT > 0
+                    if ([exports.TabName.Care, exports.TabName.Posts].indexOf(i.value) !== -1) {
+                        return i;
+                    }
+                }
+            })
+                .filter(Boolean)
+                .map((i) => i.value);
+            const newTab = tabContent
+                .map((i) => {
+                const newItem = Object.assign(Object.assign({}, i), { text: i.text +
+                        (i.keyOfResult ? ` (${(tmp === null || tmp === void 0 ? void 0 : tmp[i.keyOfResult]) || '0'})` : '') });
+                if (!newItem.hasCountResult) {
+                    if (newItem.value === exports.TabName.About) {
+                        return showAboutTab && newItem;
+                    }
+                    else {
+                        return newItem;
+                    }
+                }
+                else {
+                    if (listToShow.indexOf(newItem.value) !== -1) {
+                        return newItem;
+                    }
+                }
+            })
+                .filter(Boolean);
+            setFinalTabContent(newTab);
+            setActiveTab(selectedTab || ((_k = newTab === null || newTab === void 0 ? void 0 : newTab[0]) === null || _k === void 0 ? void 0 : _k.value));
+            setCountValues(tmp);
+            setLoading(false);
+        }))();
+    }, []);
+    const userData = info === null || info === void 0 ? void 0 : info.data;
+    return (React__default["default"].createElement(ProfileDetailContext.Provider, { value: {
+            isMarryBaby,
+            siteType: isMarryBaby ? 'marryBaby' : 'helloSites',
+            authorId: String((authorProps === null || authorProps === void 0 ? void 0 : authorProps.userId) || ''),
+            authActionWrapper,
+            onSkipQuestion,
+            info,
+            authorProps,
+            onCloseFromPost,
+            countValues,
+            setCountValues,
+            isAuthorLogin,
+            showSkipQuestionTag,
+            currentPageUrl,
+        } },
+        React__default["default"].createElement("div", Object.assign({}, rest, { className: `${styles.container} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}`, "data-is-marrybaby": isMarryBaby }), loading ? (React__default["default"].createElement(Loading, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, Object.assign({}, authorProps, { className: "card-author", showDetailPopup: false, subLine: (authorProps === null || authorProps === void 0 ? void 0 : authorProps.role) === 'expert'
+                    ? (userData === null || userData === void 0 ? void 0 : userData.specialty) &&
+                        (userData === null || userData === void 0 ? void 0 : userData.organisation) && (React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubTextRow, null,
+                        (userData === null || userData === void 0 ? void 0 : userData.specialty) && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null, userData === null || userData === void 0 ? void 0 : userData.specialty),
+                            React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubDivider, null))),
+                        React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null, userData === null || userData === void 0 ? void 0 : userData.organisation)))
+                    : (userData === null || userData === void 0 ? void 0 : userData.created_at) && (React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubTextRow, null,
+                        React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor.SubText, null,
+                            t('profilePanel.joined'),
+                            ' ',
+                            dayjs__default["default"](userData === null || userData === void 0 ? void 0 : userData.created_at).toNow(true)))) })),
+            role === 'expert' && (React__default["default"].createElement("div", { className: styles.info, dangerouslySetInnerHTML: { __html: (_b = info === null || info === void 0 ? void 0 : info.data) === null || _b === void 0 ? void 0 : _b.description } })),
+            finalTabContent !== null &&
+                activeTab !== null &&
+                (finalTabContent.length > 0 ? (React__default["default"].createElement("div", { className: styles.body },
+                    React__default["default"].createElement(index$4.Tabs, Object.assign({}, tabsProps)))) : (React__default["default"].createElement(EmptyMessage, { message: t('profilePanel.emptyPostMess.content', {
+                        text: (authorProps === null || authorProps === void 0 ? void 0 : authorProps.name) || (authorProps === null || authorProps === void 0 ? void 0 : authorProps.username) || '',
+                    }) }))))))));
+};
+
+exports.PostContent = PostContent;
+exports.ProfileDetail = ProfileDetail;
+exports.TabDataInit = TabDataInit;