@hhgtech/hhg-components
Version:
Hello Health Group common components
850 lines (816 loc) • 54.9 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-00ab44b2.js';
import React__default, { useState, useContext, useMemo, useRef, useCallback, useEffect, createContext } from 'react';
import dayjs from 'dayjs';
import { T as Tabs } from './index-04505e35.js';
import { L as Loading } from './index-072ae440.js';
import { a as formatPost, f as formatCommunity, b as formatArticle } from './dataTransform-60f9d527.js';
import { PATHS } from './togetherApiPaths.js';
import { T as TogetherComponentGlobalContext, c as callApi, f as getApiPath, e as callApiWithAuth } from './utils-5e9c89a7.js';
import { Plus } from '@hhgtech/icons/core';
import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
import { C as CommonGAssets } from './index-7adf994c.js';
import { I as ImageWrap } from './index-50aea2c8.js';
import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-677d3a78.js';
import { S as SocialType } from './index-fe4471f4.js';
import { u as useTranslations } from './index-09d9e570.js';
import { theme } from './miscTheme.js';
import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
import { b as Anchor$1 } from './index-bd44bcb2.js';
import '@mantine/dates';
import './index-8c40504a.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import { B as Button } from './index-2d25b0f0.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import '@mantine/hooks';
import './utils-538169b3.js';
import styled from '@emotion/styled';
import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
import { d as decodeMention, b as decodePostUrl } from './post-e5fb69aa.js';
import { B as Button$1 } from './index-67429eb2.js';
import './translationsContext-18f7b7e0.js';
const StyledPostContent = styled.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;
}
}
.markdown {
white-space: normal;
p,
ul,
ol {
margin-top: 1em;
&:first-child {
margin-top: 0;
}
}
li {
margin-top: 0.5em;
&:first-child {
margin-top: 0;
}
}
}
}
`;
const StyledPostContentLimitLine = styled.span `
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: ${(props) => props.line || 1};
display: -webkit-box;
-webkit-box-orient: vertical;
&.post-content-show-all {
display: block;
}
`;
const StyleSeeMoreBtn = styled.span `
padding-left: 2px;
background-color: ${theme.colors.white};
bottom: 8px;
position: absolute;
right: 0;
z-index: 10;
cursor: pointer;
`;
var useStyles = 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, maxLines, hideShowAllBtn, styles, onClickCreatePostLink } = _a, rest = __rest(_a, ["trackingCategory", "url", "className", "style", "replyingTo", "mentionedUser", "description", "disableShortenContent", "mentions", "maxChars", "maxLines", "hideShowAllBtn", "styles", "onClickCreatePostLink"]);
const { classes, theme: _theme } = useStyles(undefined,
// Second argument is responsible for styles api integration
{ name: 'PostContent', styles });
const [showAll, setShowAll] = useState(false);
const [hasMoreContent, setHasMoreContent] = useState(false);
const { t } = useTranslations();
const { authActionWrapper } = useTogetherAuthRequiredAction();
const [openPopupExpert, setOpenPopupExpert] = useState(false);
const description = decodeMention(decodePostUrl(rawDescription || '', 'display'), mentions);
const { action: { sanitizeFunction }, } = useContext(TogetherComponentGlobalContext);
const shortenSanitizedContentData = 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 = useRef(null);
const contentLineRef = useRef(null);
const contentSeeMore = useCallback(() => {
return (React__default.createElement(React__default.Fragment, null,
`... `,
!hideShowAllBtn && (React__default.createElement(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')))));
}, [hideShowAllBtn, url, trackingCategory]);
const handleCreatePostClick = (e) => {
e.preventDefault();
onClickCreatePostLink === null || onClickCreatePostLink === void 0 ? void 0 : onClickCreatePostLink();
};
const isEllipsisActive = (el) => {
return el.scrollHeight > el.clientHeight;
};
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]);
useEffect(() => {
if (!contentLineRef.current || !description || !maxLines)
return;
if (isEllipsisActive(contentLineRef.current)) {
setHasMoreContent(true);
}
else {
setHasMoreContent(false);
}
}, [description, maxLines]);
return (React__default.createElement(React__default.Fragment, null,
hasExpert && (React__default.createElement(PopupExpert, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), expertId: String(mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.partnerId) })),
React__default.createElement(StyledPostContent, Object.assign({ ref: contentRef, className: `${classes.root} ${className} no-replace-click`, style: style, mentionColor: _theme.fn.primaryColor() }, rest),
replyName && (React__default.createElement(Anchor, { onClick: () => hasExpert && setOpenPopupExpert(true), className: "post-content-replying" },
"@",
replyName)),
(rawDescription === null || rawDescription === void 0 ? void 0 : rawDescription.startsWith('[mention+id=')) && (React__default.createElement("span", { className: "post-content-replying tag-only", style: {
color: _theme.fn.primaryColor(),
} }, "@")),
maxLines ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledPostContentLimitLine, { dangerouslySetInnerHTML: {
__html: description,
}, className: `post-content-line ${showAll ? 'post-content-show-all' : ''}`, line: maxLines, ref: contentLineRef }),
hasMoreContent && !showAll && (React__default.createElement(StyleSeeMoreBtn, null, contentSeeMore())))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: shortenSanitizedContentData.showContent,
}, className: `post-content ${shortenSanitizedContentData.hasSeeMore ? 'has-see-more' : ''}` }),
shortenSanitizedContentData.hasSeeMore && !showAll && (React__default.createElement("span", null, contentSeeMore())))))));
};
var styles$b = {"category":"l5fL1xL","title":"L-aGKo7"};
const CategoryText = ({ children, className = '' }) => {
return React__default.createElement("div", { className: `${styles$b.category} ${className}` }, children);
};
const Title = ({ children, className = '' }) => {
return React__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 = CommonGAssets.getAssetPath('logo/logomark.png'), ratio = 1, size = 80, radius = 8, alt, className = '', }) => {
return (React__default.createElement("div", { className: className },
React__default.createElement("div", { className: styles$9.inner, style: {
width: `${size}px`,
height: `${size * ratio}px`,
borderRadius: `${radius}px`,
} },
React__default.createElement(ImageWrap, { src: src, backupSrc: defaultSrc, alt: alt }))));
};
const CardArticle = ({ category, title, src, children, className = '', }) => {
return (React__default.createElement("div", { className: `${styles$a.container} ${className}` },
React__default.createElement(Thumbnail, { src: src }),
React__default.createElement("div", { className: styles$a.info }, children || (React__default.createElement("div", null,
category && React__default.createElement(CategoryText, null, category),
title && React__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.createElement(CardArticle, { src: featureImage, className: className },
React__default.createElement(React__default.Fragment, null,
React__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.createElement(CardArticle.Title, null, postTitle),
React__default.createElement(CardAuthor, { avatarProps: Object.assign(Object.assign({}, author), { size: 32 }), subTitle: React__default.createElement(React__default.Fragment, null,
note,
React__default.createElement(CardAuthor.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 = createContext({});
const About = ({ className = '' }) => {
var _a, _b, _c, _d, _e;
const { t } = useTranslations();
const { info, isMarryBaby, currentPageUrl } = useContext(ProfileDetailContext);
const authorProps = info === null || info === void 0 ? void 0 : info.data;
const social = [
{
type: SocialType.LinkedIn,
icon: 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: SocialType.Instagram,
icon: 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: SocialType.Facebook,
icon: 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: SocialType.Youtube,
icon: 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: SocialType.Tiktok,
icon: 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: CommonGAssets.getAssetPath(isMarryBaby ? 'award-doc-mb.svg' : 'award-doc.svg'),
eventAction: 'Doctor Experience Click',
panel: (React__default.createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.experiences.map((i, idx) => (React__default.createElement("div", { className: styles$8.accBodyGroupItem, key: String(idx) },
React__default.createElement("div", { className: styles$8.accBodyGroupTitle }, i.title),
React__default.createElement("div", { className: styles$8.accBodyGroupDesc },
React__default.createElement("p", null, i.organization),
React__default.createElement("p", null, i.duration))))))),
},
]
: []),
...(((info === null || info === void 0 ? void 0 : info.educations) || []).length > 0
? [
{
key: 'education',
heading: t('profilePanel.education'),
iconSrc: CommonGAssets.getAssetPath(isMarryBaby ? 'book-mb.svg' : 'book.svg'),
eventAction: 'Doctor Degree Click',
panel: (React__default.createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.educations.map((i, idx) => (React__default.createElement("div", { className: styles$8.accBodyGroupItem, key: String(idx) },
React__default.createElement("div", { className: styles$8.accBodyGroupTitle }, i.schoolName),
React__default.createElement("div", { className: styles$8.accBodyGroupDesc },
React__default.createElement("p", null, i.study),
React__default.createElement("p", null, i.completedYear))))))),
},
]
: []),
...(((info === null || info === void 0 ? void 0 : info.awards) || []).length > 0
? [
{
key: 'awards',
heading: t('profilePanel.awards'),
iconSrc: CommonGAssets.getAssetPath(isMarryBaby ? 'award-mb.svg' : 'award.svg'),
eventAction: 'Doctor Award Click',
panel: (React__default.createElement("div", { className: styles$8.accBodyGroup }, info === null || info === void 0 ? void 0 : info.awards.map((i, idx) => (React__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.createElement("div", { className: `${styles$8.container} ${className}`, "data-is-marrybaby": isMarryBaby },
accProps.length > 0 && (React__default.createElement(Accordion, { defaultValue: accProps[0].key, chevron: isMarryBaby ? (React__default.createElement("div", { className: styles$8.mbChevronWrapper },
React__default.createElement(Plus, { size: 12, color: theme.mbColors.midGray }))) : (React__default.createElement(Plus, { color: 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.createElement(Accordion.Item, { key: i.key, value: i.key },
React__default.createElement(Accordion.Control, { "data-event-category": "Together", "data-event-action": i.eventAction, "data-event-label": currentPageUrl },
React__default.createElement("div", { className: styles$8.header },
React__default.createElement("div", { className: styles$8.headingIcon },
React__default.createElement("img", { src: i.iconSrc, loading: "lazy" })),
React__default.createElement("div", { className: styles$8.heading }, i.heading))),
React__default.createElement(Accordion.Panel, null, i.panel)))))),
relatedPost.length > 0 && (React__default.createElement("div", { className: styles$8.group },
React__default.createElement("div", { className: styles$8.subTitle },
React__default.createElement("img", { className: styles$8.subIcon, src: CommonGAssets.getAssetPath(isMarryBaby ? 'mb-logo.svg' : 'logo/circle-solid.svg'), loading: "lazy" }),
t('profilePanel.publishedArticles')),
React__default.createElement("div", { className: `${styles$8.relatedList}` }, info === null || info === void 0 ? void 0 : info.relatedPosts.map((i) => (React__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.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.createElement("div", { className: styles$8.group },
React__default.createElement("div", { className: styles$8.subTitle },
React__default.createElement("img", { className: styles$8.subIcon, src: CommonGAssets.getAssetPath(isMarryBaby ? 'social-mb.svg' : 'social.svg'), loading: "lazy" }),
t('profilePanel.socialLinks')),
React__default.createElement("div", { className: styles$8.groupBody },
React__default.createElement(Flex, null, social.map((i, idx) => i.url && (React__default.createElement("div", { className: styles$8.socialItem, key: idx },
React__default.createElement("a", { href: i.url, target: "_blank", rel: "noreferrer" },
React__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();
const { data: { userInfo, env: { togetherBasePath }, }, } = useContext(TogetherComponentGlobalContext);
const { authActionWrapper, authorProps, currentPageUrl } = 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.createElement("div", { className: `${styles$7.container} ${className}` },
React__default.createElement("div", { className: styles$7.header },
React__default.createElement("div", { className: styles$7.question },
t('profilePanel.question'),
' ',
React__default.createElement(Anchor$1, { 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), {
_location: postHref,
});
}
} },
"#", post === null || post === void 0 ? void 0 :
post.title)),
React__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.createElement("div", { className: styles$7.questionCard },
React__default.createElement(CardAuthor$1, Object.assign({ className: "card-author" }, authorProps, { role: "user", avatarIcon: React__default.createElement(CrossLogo, null), subLine: React__default.createElement(CardAuthor$1.SubTextRow, null,
React__default.createElement(CardAuthor$1.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.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.createElement(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), {
_location: 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 } = useContext(ProfileDetailContext);
return (React__default.createElement("div", { className: styles$5.container },
React__default.createElement("div", { className: styles$5.thumb },
React__default.createElement("img", { src: imgSrc ||
CommonGAssets.getAssetPath(isMarryBaby ? 'comments-mb.svg' : 'comments.svg'), loading: "lazy" })),
message && React__default.createElement("div", { className: styles$5.content }, message),
buttonTxt && (React__default.createElement(Button$1, { size: "md", theme: siteType, color: "secondary", onClick: onBtnClick }, buttonTxt))));
};
const Answering = ({ id }) => {
const { t } = useTranslations();
const { data: { locale }, } = useContext(TogetherComponentGlobalContext);
const { authorProps } = useContext(ProfileDetailContext);
const [posts, setPosts] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
id &&
(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setLoading(true);
const res = yield callApi(getApiPath(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(formatPost);
setPosts(resData);
setLoading(false);
}))();
}, []);
return (React__default.createElement("div", { className: styles$6.container }, loading ? (React__default.createElement(Loading, null)) : (posts !== null &&
(posts.length > 0 ? (posts.map((i) => (React__default.createElement(PostCard$1, { className: "post-card", key: i.id, post: i })))) : (React__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 = __rest(_a, ["post"]);
const { data: { env: { togetherBasePath }, }, } = useContext(TogetherComponentGlobalContext);
// const { showSkipQuestionTag } = useContext(ProfileDetailContext)
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", Object.assign({}, rest, { className: `${styles$4.container} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` }),
React__default.createElement(CardAuthor$1, { 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.createElement(CardAuthor$1.SubTextRow, null,
React__default.createElement(CardAuthor$1.SubText, null, post === null || post === void 0 ? void 0 : post.createdTime)) }),
React__default.createElement(Anchor$1, { 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();
const { data: { locale, userInfo }, } = useContext(TogetherComponentGlobalContext);
const { onSkipQuestion, countValues, setCountValues } = useContext(ProfileDetailContext);
const [questions, setQuestions] = useState();
const [communities, setCommunities] = useState([]);
const [fetchLoading, setFetchLoading] = useState(false);
const loginId = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
useEffect(() => {
loginId &&
(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setFetchLoading(true);
const res = yield callApiWithAuth(getApiPath(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(formatPost);
delete i.question;
tmpCom.push(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.createElement("div", { className: styles$3.container }, fetchLoading ? (React__default.createElement(Loading, null)) : (countValues === null || countValues === void 0 ? void 0 : countValues.total_question) > 0 ? (communities.length > 0 && (React__default.createElement(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.createElement("div", { className: styles$3.chevron },
React__default.createElement(ArrowDown, { color: 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.createElement(Accordion.Item, { key: i.id, value: String(i.id) },
React__default.createElement(Accordion.Control, null,
React__default.createElement("div", { className: styles$3.header },
React__default.createElement("div", { className: styles$3.headingIcon },
React__default.createElement("img", { src: i.thumbnail, loading: "lazy" })),
React__default.createElement("div", { className: styles$3.heading }, i.name))),
React__default.createElement(Accordion.Panel, null,
React__default.createElement("div", { className: styles$3.body }, listing.map((post) => (React__default.createElement(QuestionCard, { className: "question-card", key: post.id, post: post, onSkip: handleSkipQuestion }))))))));
})))) : (React__default.createElement(EmptyMessage, { message: t('profilePanel.emptyCareMess.content'), imgSrc: 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 }, }, } = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
const theme = useMantineTheme();
const { authActionWrapper, authorProps } = 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.createElement("div", { className: `${styles$2.container} ${className}` },
React__default.createElement("div", { className: styles$2.questionCard },
React__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), {
_location: postHref,
});
}
} }),
React__default.createElement(CardAuthor, { className: "card-author", avatarProps: {
avatar: authorProps === null || authorProps === void 0 ? void 0 : authorProps.avatar,
size: 32,
} },
React__default.createElement(CardAuthor$1.MainText, { className: styles$2.mainTxt }, post === null || post === void 0 ? void 0 : post.title),
React__default.createElement(CardAuthor$1.SubTextRow, null,
React__default.createElement(CardAuthor$1.SubText, null, post === null || post === void 0 ? void 0 : post.createdTime))),
React__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.createElement(Text, { size: "p3", color: theme.fn.primaryColor() }, t('post.seeMore')))));
};
var styles$1 = {"container":"TSMHoEM"};
const Posts = () => {
const { t } = useTranslations();
const { data: { locale }, } = useContext(TogetherComponentGlobalContext);
const { authorId: id, authorProps, isAuthorLogin, onCloseFromPost, } = useContext(ProfileDetailContext);
const [posts, setPosts] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
id &&
(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setLoading(true);
const res = yield callApi(getApiPath(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(formatPost);
setPosts(resData);
setLoading(false);
}))();
}, [id]);
return (React__default.createElement("div", { className: styles$1.container }, loading ? (React__default.createElement(Loading, null)) : (posts !== null &&
(posts.length > 0 ? (posts.map((i) => (React__default.createElement(PostCard, { className: "post-card", key: i.id, post: i })))) : (React__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,
};
};
var TabName;
(function (TabName) {
TabName[TabName["About"] = 0] = "About";
TabName[TabName["Care"] = 1] = "Care";
TabName[TabName["Answer"] = 2] = "Answer";
TabName[TabName["Posts"] = 3] = "Posts";
})(TabName || (TabName = {}));
var UserType;
(function (UserType) {
UserType[UserType["Expert"] = 0] = "Expert";
UserType[UserType["User"] = 1] = "User";
})(UserType || (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 = __rest(_a, ["authorProps", "selectedTab", "authActionWrapper", "onSkipQuestion", "onCloseFromPost", "hideQuestionTab", "hideAnswerTab", "showSkipQuestionTag", "rolesToShowQuestionsTab", "currentPageUrl"]);
const { data: { locale, userInfo, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
const { t } = 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] = useState();
const [loading, setLoading] = useState(false);
const [info, setInfo] = 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: TabName.About,
text: t('profilePanel.tabs.highlight'),
content: React__default.createElement(About, { id: id, info: info }),
dataEventCategory: 'Together',
dataEventAction: 'Doctor Profile Click',
dataEventLabel: currentPageUrl,
},
]
: []),
{
value: TabName.Posts,
text: t('profilePanel.tabs.posts'),
content: React__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: TabName.Care,
text: `${t('profilePanel.tabs.care')}`,
content: React__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: TabName.Answer,
text: `${t('profilePanel.tabs.expertAnswer')}`,
content: React__default.createElement(Answering, { id: id }),
hasCountResult: true,
keyOfCountApi: 'reply',
keyOfResult: 'total_reply',
dataEventCategory: 'Together',
dataEventAction: 'Doctor Reply Tab Click',
dataEventLabel: currentPageUrl,
},
]
: []),
];
const [finalTabContent, setFinalTabContent] = useState(null);
const [activeTab, setActiveTab] = 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);
useEffect(() => {
(() => __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([
callApi(getApiPath(PATHS.USER.DETAIL, {
_locale: locale,
id,
}), 'GET'),
...listTabsHasCount.map((i) => {
return callApi(getApiPath(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) => 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;
}
el