@hhgtech/hhg-components
Version:
Hello Health Group common components
1,122 lines (1,082 loc) • 78.4 kB
JavaScript
import { a as __awaiter, _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { useContext, useState, useEffect, useMemo } from 'react';
import { B as Button } from './index-6351bdee.js';
import { H as Heading } from './index-dcc517ff.js';
import { u as useTranslations } from './index-9d21b711.js';
import innertext from 'innertext';
import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-c70f9263.js';
import { C as CommonGAssets } from './index-ebe66e27.js';
import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-f4091ce6.js';
import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-40e61585.js';
import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-37143f6b.js';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-cb7242c7.js';
import { theme } from './miscTheme.js';
import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-8b19f5d4.js';
import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
import { C as CardLink } from './index-d3ac3302.js';
import { C as CardAuthor, c as ProfileDetailModal } from './index-7dcfaf94.js';
import { a as ProfileDetail, P as PostContent } from './index-95966b6b.js';
import { a as PostImagePreview } from './index-a3bb8a23.js';
import { S as SocialLinkPreview } from './index-c1c6d511.js';
import { D as Divider } from './index-3848bb59.js';
import './index-5e947517.js';
import { Plus } from '@hhgtech/icons/core';
import { ArrowRight, ArrowDown, Trash, Endorse } from '@hhgtech/icons/other';
import { Accordion } from '@mantine/core';
import { I as Input } from './index-cf3c860d.js';
import { T as Text } from './index-9f5659e8.js';
import { L as Loading } from './index-b94d1262.js';
import { g as getCurrentBaseUrl } from './normalizeLink-593b397a.js';
import { domainLocales } from './constantsDomainLocales.js';
var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath fill='%233E3F58' d='M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M19 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3e%3c/svg%3e";
var MBMoreSolid = img$7;
var img$6 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='3' height='13' fill='none'%3e%3ccircle cx='1.583' cy='6.417' r='1.25' fill='%23595959' transform='rotate(90 1.583 6.417)'/%3e%3ccircle cx='1.583' cy='1.417' r='1.25' fill='%23595959' transform='rotate(90 1.583 1.417)'/%3e%3ccircle cx='1.583' cy='11.417' r='1.25' fill='%23595959' transform='rotate(90 1.583 11.417)'/%3e%3c/svg%3e";
var IconKebab = img$6;
var img$5 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' d='M7.17 3.236H2.995a1.193 1.193 0 0 0-1.193 1.192v8.35a1.193 1.193 0 0 0 1.193 1.192h8.35a1.193 1.193 0 0 0 1.192-1.192V8.603'/%3e%3cpath stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' d='M11.643 2.341a1.265 1.265 0 0 1 1.789 1.79L7.766 9.795l-2.385.596.596-2.385z'/%3e%3c/svg%3e";
var IconTabEdit = img$5;
var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M2 4h12'/%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.333 4V2.667a1.333 1.333 0 0 1 1.334-1.334h2.666a1.334 1.334 0 0 1 1.334 1.334V4m2 0v9.333a1.334 1.334 0 0 1-1.334 1.334H4.667a1.334 1.334 0 0 1-1.334-1.334V4zM6.667 7.333v4M9.333 7.333v4'/%3e%3c/svg%3e";
var IconTrashBin = img$4;
// import IconBellOff from '../../../assets/svg/icon-bell-off.svg'
// import IconBellOn from '../../../assets/svg/icon-bell-on.svg'
const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, className = '', popoverClassName = '',
// onBookmark,
// onRemoveBookmark,
onEditPost, }) => {
const { data: { locale, userInfo,
// togetherUserId,
env: { isMarryBaby }, },
// action: { pushNotifications },
} = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
// const [localHasNoti, setLocalHasNoti] = useState(false)
const [loading, setLoading] = useState(false);
const [isOpenLeavePopup, setIsOpenLeavePopup] = useState(false);
const [isOpenSharePopup, setIsOpenSharePopup] = useState(false);
const { authActionWrapper } = useTogetherAuthRequiredAction();
const isAuthor = authorEmail && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && authorEmail === String(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email);
return (React__default.createElement("div", { className: className, onClick: (e) => {
e.preventDefault();
e.stopPropagation();
} },
isOpenSharePopup && (React__default.createElement(SharePopup, { url: shareUrl, text: post === null || post === void 0 ? void 0 : post.title, onClose: () => setIsOpenSharePopup(false) })),
isOpenLeavePopup && (React__default.createElement(PopupDanger, { thumbnail: CommonGAssets.getAssetPath('trash-bin.svg'), isThumbnailIcon: true, title: t('popup.deletePost.title'), description: t('popup.deletePost.description'), acceptText: t('popup.deletePost.accept'), cancelText: t('popup.deletePost.cancel'), onAccept: () => __awaiter(void 0, void 0, void 0, function* () {
if (!(post === null || post === void 0 ? void 0 : post.id) || loading)
return;
setLoading(true);
try {
const res = yield deletePost({
id: post.id,
locale,
});
if ((res === null || res === void 0 ? void 0 : res.status) === 1)
onDeletePost === null || onDeletePost === void 0 ? void 0 : onDeletePost();
}
catch (_a) { }
setLoading(false);
}), onClose: () => setIsOpenLeavePopup(false) })),
React__default.createElement(TreePopoverMenu, { className: popoverClassName, toggleButtonContent: React__default.createElement("img", { src: isMarryBaby ? MBMoreSolid : IconKebab, loading: "lazy" }), position: "bottom", align: "end", buttonProps: {
isLoading: loading,
}, data: isAuthor
? {
isShowheader: false,
type: 'list',
list: [
// {
// icon: IconShareOnMedia,
// label: t('morePopover.share'),
// onClick: () => setIsOpenSharePopup(true),
// },
{
icon: IconTabEdit,
label: t('actionPopover.edit'),
onClick: onEditPost,
},
{
icon: IconTrashBin,
label: t('actionPopover.delete'),
onClick: () => {
authActionWrapper(() => setIsOpenLeavePopup(true));
},
},
],
}
: {
isShowheader: false,
type: 'list',
list: [
// {
// icon: IconShareOnMedia,
// label: t('morePopover.share'),
// onClick: () => setIsOpenSharePopup(true),
// },
// {
// icon: !!post?.bookmarked ? IconBookmarkFill : IconBookmark,
// label: !!post?.bookmarked
// ? t('morePopover.unsavePost')
// : t('morePopover.savePost'),
// onClick: () => {
// authActionWrapper(async () => {
// if (!userInfo?.id || !post?.id) return
// if (post?.bookmarked) {
// const res = await callApiWithAuth(
// getApiPath(PATHS.BOOKMARK.DELETE, {
// _locale: locale,
// }),
// 'DELETE',
// {
// data: {
// post_id: String(post.id),
// },
// },
// )
// if (res?.status === 1) {
// pushNotifications({
// title: '',
// message: 'Removed saved post',
// type: 'success',
// displayIcon: IconBookmark,
// })
// onRemoveBookmark && onRemoveBookmark()
// } else {
// pushNotifications({
// title: '',
// message: 'Remove failed',
// type: 'danger',
// displayIcon: IconBookmark,
// })
// }
// } else {
// const res = await callApiWithAuth(
// getApiPath(PATHS.BOOKMARK.CREATE, {
// _locale: locale,
// }),
// 'POST',
// {
// data: {
// user_id: togetherUserId || userInfo.id,
// post_id: post.id,
// },
// },
// )
// if (res?.status === 1) {
// pushNotifications({
// title: '',
// message: 'Post saved',
// type: 'success',
// displayIcon: IconBookmarkFill,
// })
// onBookmark && onBookmark()
// } else {
// pushNotifications({
// title: '',
// message: 'Post saved failed',
// type: 'danger',
// displayIcon: IconBookmark,
// })
// }
// }
// })
// },
// },
// {
// icon: togetherBasePath + '/svg/icon-bell-on.svg',
// label: !localHasNoti
// ? t( 'morePopover.turnOnNotifications' })
// : t( 'morePopover.turnOffNotifications' }),
// onClick: () => {
// authActionWrapper(async () => {
// if (!post?.id || loading) return
// setLoading(true)
// try {
// const res = await followUnfollowPost({
// id: post?.id,
// locale,
// })
// if (res?.status === 1) {
// pushNotifications({
// message: !localHasNoti
// ? 'Notification on'
// : 'Notification off',
// type: !localHasNoti ? 'success' : 'danger',
// displayIcon: !localHasNoti ? IconBellOn : IconBellOff,
// })
// setLocalHasNoti((v) => !v)
// }
// } catch {}
// setLoading(false)
// })
// },
// },
{
icon: IconAlertCircle,
label: t('morePopover.report'),
subTree: {
title: t('morePopover.report.title'),
description: t('morePopover.report.description'),
isShowheader: true,
type: 'list',
list: Object.keys(REPORT_REASON_MAP)
.map((k) => ({
label: REPORT_REASON_MAP[k].label,
reason: REPORT_REASON_MAP[k].reportReasonText,
reasonValue: k,
}))
.map((item) => ({
label: t(item.label),
subTree: {
title: t('morePopover.reportSubmit.title'),
description: t('morePopover.reportSubmit.description'),
isShowheader: true,
type: 'jsx',
jsxRenderer: (setShow) => (React__default.createElement(SubmitReportForm, { reason: item.reasonValue, reasonText: t(item.reason), postId: post === null || post === void 0 ? void 0 : post.id, onClose: () => setShow && setShow(false) })),
},
})),
},
},
],
} })));
};
const StyledCardPost$1 = styled.div `
position: relative;
margin-bottom: 24px;
background: white;
border-radius: ${theme.borderRadius};
a {
text-decoration: none;
}
${MediaQueries.mbDown} {
margin-bottom: 8px;
}
&.flat-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.post-pin {
padding: 0.5rem 1rem;
border-radius: ${theme.borderRadius} 6px 0 0;
}
.post-author {
display: flex;
align-items: center;
justify-content: space-between;
&.comment {
padding-right: 2.6rem;
}
.author-avatar-wrapper {
width: 40px;
height: 40px;
font-size: 20px;
${MediaQueries.mbDown} {
width: 32px;
height: 32px;
font-size: 16px;
}
}
}
.post-content-link-wrapper {
color: inherit;
cursor: pointer;
.post-content-title {
padding: 1rem 1rem 0;
word-break: break-word;
}
}
.social-preview-wrapper.has-image {
margin-bottom: 5px;
}
.social-preview-wrapper,
.image-preview-wrapper,
.link-preview-wrapper {
width: 100%;
&[data-is-reply='true'] {
padding-right: 1rem;
padding-left: 1rem;
}
}
.post-topics {
padding: 0 1rem;
}
.post-reaction {
background: none;
border-radius: 0 0 6px 6px;
&.hide-top-border {
::before {
display: none;
}
}
}
.most-engaging-wrapper {
padding: 1rem;
cursor: pointer;
.author-avatar-wrapper {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.see-more-comments {
width: 100%;
padding: 12px 0 0;
text-align: unset;
}
}
&[data-most-engaging='true'] {
border: none;
${MediaQueries.mbDown} {
margin: 1rem;
border: 1px solid #e4e8ec;
}
}
.top-divider {
border-color: #e4e8ec;
}
.popover {
.popover-menu__btn {
display: flex;
width: 1.5rem;
height: 1rem;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
&:hover {
background-color: transparent;
}
}
.popover-menu__content {
&.--position-bottom {
&.--align-end {
&::before {
right: 12.5px;
}
}
}
}
}
&[data-is-marrybaby='true'] {
border: 1px solid #f3f3f3;
border-radius: 1rem;
/* shadow */
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
.image-preview-wrapper,
.link-preview-wrapper {
padding-right: 1rem;
padding-left: 1rem;
}
.popover {
.popover-menu__btn {
width: 24px;
height: 24px;
${MediaQueries.mbDown} {
width: 18px;
height: 18px;
}
}
.popover-menu__content {
&.--position-bottom {
&.--align-end {
&::before {
right: 1rem;
}
width: 350px;
${MediaQueries.mbDown} {
max-width: calc(320px - 2rem);
}
}
}
}
}
.most-engaging-wrapper {
position: relative;
padding: 0;
&::before {
position: absolute;
z-index: 5;
top: 0;
left: 50%;
width: calc(100% - 2rem);
height: 1px;
background: #f3f3f3;
content: ' ';
transform: translateX(-50%);
}
}
${MediaQueries.mbDown} {
margin-bottom: 12px;
}
}
`;
var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23595959'%3e%3cpath stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' d='M12 13.333 8 10.37l-4 2.963V3.852c0-.314.12-.616.335-.838.214-.222.505-.347.808-.347h5.714c.303 0 .594.125.808.347s.335.524.335.838z'/%3e%3c/svg%3e";
var IconBookmarkFill = img$3;
var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' d='M12 13.333 8 10.37l-4 2.963V3.852c0-.314.12-.616.335-.838.214-.222.505-.347.808-.347h5.714c.303 0 .594.125.808.347s.335.524.335.838z'/%3e%3c/svg%3e";
var IconBookmark = img$2;
var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cg stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' clip-path='url(%23a)'%3e%3cpath d='M2 4.008h12m-8.667 0V2.675a1.333 1.333 0 0 1 1.334-1.333h2.666a1.333 1.333 0 0 1 1.334 1.333v1.333m2 0v9.334a1.333 1.333 0 0 1-1.334 1.333H4.667a1.333 1.333 0 0 1-1.334-1.333V4.008zm-6 3.334v4m2.666-4v4'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 .008h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
var IconDelete = img$1;
const CardReplyPopover = ({ onDeleteComment, commentId, className = '', popoverClassName = '', }) => {
const { data: { env: { isMarryBaby }, locale, }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
const [isOpenLeavePopup, setIsOpenLeavePopup] = useState(false);
const { authActionWrapper } = useTogetherAuthRequiredAction();
return (React__default.createElement("div", { className: className, onClick: (e) => {
e.preventDefault();
e.stopPropagation();
} },
isOpenLeavePopup && (React__default.createElement(PopupDanger, { thumbnail: IconDelete, isThumbnailIcon: true, title: t('popup.deleteComment.title'), description: t('popup.deleteComment.description'), acceptText: t('popup.deletePost.accept'), cancelText: t('popup.deletePost.cancel'), onAccept: () => __awaiter(void 0, void 0, void 0, function* () {
var _a;
if (!commentId)
return;
const res = yield deleteComment({ id: commentId, locale });
if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
onDeleteComment && onDeleteComment();
pushNotifications({
title: '',
message: t('notification.success'),
type: 'success',
});
}
else {
pushNotifications({
title: '',
message: ((_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a[0]) || t('notification.failure'),
type: 'danger',
});
}
}), onClose: () => setIsOpenLeavePopup(false) })),
React__default.createElement(TreePopoverMenu, { position: "bottom", align: "end", data: {
isShowheader: false,
type: 'list',
list: [
// {
// icon: _href('/svg/icon-share-on-media.svg'),
// label: f({ id: 'morePopover.share' }),
// subTree: {
// title: f({ id: 'morePopover.shareOn' }),
// isShowheader: true,
// type: 'jsx',
// jsxType: TreeJSXType.share,
// data: {
// shareUrl: shareUrl,
// shareTitle: shareTitle,
// },
// },
// },
// {
// icon: _href('/svg/icon-tab-edit-2.svg'),
// label: f({ id: 'actionPopover.edit' }),
// onClick: onEditPost,
// },
{
icon: IconTrashBin,
label: t('actionPopover.delete'),
onClick: () => {
authActionWrapper(() => {
setIsOpenLeavePopup(true);
});
},
},
],
}, className: popoverClassName, toggleButtonContent: React__default.createElement("img", { src: isMarryBaby ? MBMoreSolid : IconKebab, loading: "lazy" }), buttonProps: {
// isLoading: loading,
} })));
};
const StyledContainer$1 = styled.div `
.add-link {
color: ${theme.colors.primaryBase};
}
`;
const StyledAlertTag = styled.div `
margin: 16px 0;
background: ${theme.colors.yellow50};
padding: 5px 10px;
border-radius: 2px;
.icon {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
`;
const StyledSourceItemWrapper = styled.div `
display: flex;
align-items: center;
gap: 8px;
`;
const StyledListItems$1 = styled.div `
padding: 8px 16px;
`;
const StyledInputWrapper = styled.div `
margin-bottom: 12px;
width: 100%;
`;
const StyledContainer = styled.div ``;
const StyledHeader = styled.div `
margin-bottom: 16px;
`;
const StyledListItems = styled.div `
display: flex;
flex-wrap: wrap;
row-gap: 16px;
${MediaQueries.tdUp} {
align-items: center;
column-gap: 24px;
}
`;
const StyledItem$1 = styled.a `
display: flex;
align-items: center;
gap: 16px;
${MediaQueries.mbDown} {
width: 100%;
justify-content: space-between;
}
`;
const StyledItemInfo = styled.div `
display: flex;
align-items: center;
gap: 16px;
`;
const StyledThumb = styled.div `
border-radius: ${theme.borderRadius};
overflow: hidden;
width: 48px;
height: 48px;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
`;
const RecommentCategories = ({ categories }) => {
const { t } = useTranslations();
const { data: { locale, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
const url = getCurrentBaseUrl(locale, isMarryBaby);
return (React__default.createElement(StyledContainer, null,
React__default.createElement(StyledHeader, null,
React__default.createElement(Heading, { tag: "h6", as: "h5" }, t('cardReply.recommentCategories.heading'))),
React__default.createElement(StyledListItems, null, categories.map((i) => (React__default.createElement(StyledItem$1, { href: url + i.permalink, key: String(i.termId), target: "_blank" },
React__default.createElement(StyledItemInfo, null,
React__default.createElement(StyledThumb, null,
React__default.createElement("img", { src: i.featureImage ||
CommonGAssets.getAssetPath(isMarryBaby ? 'mb-logo.svg' : '/logo/logomark.png'), alt: i.displayName, loading: "lazy" })),
React__default.createElement(Text, { size: "s3", weight: "bold" }, i.displayName)),
React__default.createElement(ArrowRight, { size: 20, color: theme.colors.gray400 })))))));
};
const StyledItem = styled.a `
padding: 12px 0;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid ${theme.colors.neutral100};
text-decoration: none;
&:first-child {
border-top: 0;
}
`;
const SourceItem = ({ postTitle, articleReviewed, modifiedTime, href, }) => {
const { t } = useTranslations();
const getDetail = (() => {
const { expert, editor, is_author } = articleReviewed;
if (expert) {
const result = {
name: expert.display_name,
role: 'expert',
avatar: expert.avatar,
};
if (is_author) {
return Object.assign({ title: t('articleAuthor.title.written-by') }, result);
}
else {
if (expert.role === 'expert') {
// Is Expert
return Object.assign({ title: t('articleAuthor.title.expert') }, result);
}
else {
// Is medical
return Object.assign({ title: t('articleAuthor.title.medical') }, result);
}
}
}
else if (editor) {
return {
title: t('articleAuthor.title.fact-check'),
name: editor.display_name,
avatar: editor.avatar,
};
}
})();
return (React__default.createElement(StyledItem, { href: href, title: postTitle, target: "_blank" },
React__default.createElement(Text, { size: "s3", as: "h5", weight: "bold" }, postTitle),
React__default.createElement("div", null,
React__default.createElement(CardAuthor, { avatar: getDetail === null || getDetail === void 0 ? void 0 : getDetail.avatar, avatarProps: {
size: 32,
}, name: getDetail === null || getDetail === void 0 ? void 0 : getDetail.name, role: getDetail === null || getDetail === void 0 ? void 0 : getDetail.role, hideBackground: true },
React__default.createElement(CardAuthor.SubTextRow, null,
React__default.createElement(CardAuthor.SubText, null, getDetail === null || getDetail === void 0 ? void 0 :
getDetail.title,
' ',
React__default.createElement("span", { style: { color: theme.colors.gray800 } }, getDetail === null || getDetail === void 0 ? void 0 : getDetail.name)),
React__default.createElement(CardAuthor.SubDivider, null),
React__default.createElement(CardAuthor.SubText, null, modifiedTime))))));
};
var styles$1 = {"accordion":"CnNZq8D","header":"F4mmgSy","heading":"_8jLruY3","headingIcon":"FE8w-fe","panel":"Yd2a9Nj","chevron":"A7QrQ7A"};
const SourceList = (_a) => {
var { listUrl: listUrlInit, hideSourceList, categorySlug, editMode, collapseSource, onListChange, isMarryBaby } = _a, rest = __rest(_a, ["listUrl", "hideSourceList", "categorySlug", "editMode", "collapseSource", "onListChange", "isMarryBaby"]);
const { t } = useTranslations();
const [listUrl, setListUrl] = useState(listUrlInit || []);
const [data, setData] = useState([]);
const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
!hideSourceList &&
(() => __awaiter(void 0, void 0, void 0, function* () {
setLoading(true);
const listPaths = listUrl.map((i) => {
const url = new URL(i);
const pathArr = String(url.pathname)
.split('/')
.filter((i) => i != '');
const origin = url.origin;
const isMarrySite = origin.search('marrybaby.vn') !== -1;
return {
isMarrySite,
path: pathArr[pathArr.length - 1],
href: i,
};
});
const listApi = [
...listPaths.map((i) => callApi(i.isMarrySite
? getMarryBabyApiPath(DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
fullSlug: i.path,
}, true)
: getDiscoverApiPath(DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
fullSlug: i.path,
}, true), 'GET')),
];
const res = yield Promise.all(listApi);
setData(res
.map((i, index) => {
var _a, _b;
return ((_a = i === null || i === void 0 ? void 0 : i.data) === null || _a === void 0 ? void 0 : _a.post) && Object.assign(Object.assign({}, formatArticle((_b = i === null || i === void 0 ? void 0 : i.data) === null || _b === void 0 ? void 0 : _b.post)), { href: listPaths[index].href });
})
.filter(Boolean));
setLoading(false);
}))();
}, []);
useEffect(() => {
!hideSourceList &&
(data === null || data === void 0 ? void 0 : data.length) === 0 &&
categorySlug &&
(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
const res = yield callApi(isMarryBaby
? getMarryBabyApiPath(DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
fullSlug: categorySlug,
}, true)
: getDiscoverApiPath(DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
fullSlug: categorySlug,
}, true), 'GET');
(res === null || res === void 0 ? void 0 : res.data) && setCategories([formatCategory((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.category)]);
}))();
}, [data]);
const handleRemoveItem = (idx) => {
setListUrl((old) => {
const tmp = [...old];
tmp.splice(idx, 1);
return tmp;
});
setData((old) => {
const tmp = [...old];
tmp.splice(idx, 1);
return tmp;
});
};
useEffect(() => {
onListChange === null || onListChange === void 0 ? void 0 : onListChange(listUrl);
}, [listUrl]);
return (React__default.createElement("div", Object.assign({}, rest),
!editMode && (React__default.createElement(StyledAlertTag, null,
React__default.createElement("img", { className: "icon", src: CommonGAssets.getAssetPath('warning.svg'), alt: "warning", style: { marginBottom: '3px', width: '18px' }, loading: "lazy" }),
React__default.createElement(Text, { size: "s3", as: "span", dangerouslySetInnerHTML: {
__html: t('cardReply.disclaimer'),
} }))),
!hideSourceList ? (loading ? (React__default.createElement(Loading, null)) : data.length > 0 || editMode ? (React__default.createElement(StyledContainer$1, null,
React__default.createElement(Accordion, { defaultValue: !collapseSource && 'accordion', styles: {
control: {
borderRadius: 'inherit',
'&[aria-expanded="false"]': {
borderBottom: 0,
},
},
chevron: {
width: '32px',
height: '32px',
},
content: {
padding: 0,
borderBottom: 0,
borderTop: `1px solid ${theme.colors.neutral100}`,
},
item: {
marginBottom: '16px',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
border: `1px solid ${theme.colors.neutral100}`,
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
'&[data-active]': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
},
}, chevron: React__default.createElement("div", { className: styles$1.chevron },
React__default.createElement(ArrowDown, { color: theme.colors.gray600, size: 20 })) },
React__default.createElement(Accordion.Item, { value: "accordion" },
React__default.createElement(Accordion.Control, null,
React__default.createElement("div", { className: styles$1.header },
React__default.createElement(Heading, { as: "h4", tag: "h6" }, t('cardReply.source')))),
React__default.createElement(Accordion.Panel, null,
React__default.createElement(StyledListItems$1, null,
(data || []).map((i, idx) => (React__default.createElement(StyledSourceItemWrapper, { key: String(idx) },
typeof i === 'object' ? (React__default.createElement(SourceItem, Object.assign({}, i))) : (React__default.createElement(StyledInputWrapper, null,
React__default.createElement(Input, { style: { width: '100%' }, name: "source-list", value: i || '', size: "sm", onChange: (v) => {
setListUrl((old) => {
const tmp = [...old];
tmp[idx] = v;
return tmp;
});
setData((old) => {
const tmp = [...old];
tmp[idx] = v;
return tmp;
});
} }))),
editMode && (React__default.createElement(Button, { size: "md", color: "transparent", icon: React__default.createElement(Trash, null), onClick: () => handleRemoveItem(idx) }))))),
editMode && (React__default.createElement(Button, { className: "add-link", color: "transparent", size: "md", icon: React__default.createElement(Plus, { color: theme.colors.primaryBase, size: 18 }), onClick: () => {
setListUrl((old) => [...old, '']);
setData((old) => [...old, '']);
} }, "Add source")))))))) : (React__default.createElement(RecommentCategories, { categories: categories }))) : null));
};
const StyledCardPost = styled.div `
position: relative;
margin-bottom: 0;
background: white;
border-radius: ${theme.borderRadius};
.verify-tag {
margin-top: 12px;
}
.post-author {
&.with-popover {
padding-right: 2.6rem;
}
.author-avatar-wrapper {
width: 40px;
height: 40px;
font-size: 20px;
${MediaQueries.mbDown} {
width: 32px;
height: 32px;
font-size: 16px;
}
}
}
.image-preview-wrapper,
.link-preview-wrapper {
width: 100%;
&[data-is-reply='true'] {
padding-right: 1rem;
padding-left: 1rem;
}
}
.post-reaction {
background: none;
border-radius: 0 0 6px 6px;
}
&[data-is-reply='true'] {
> .post-author .author-avatar-wrapper {
width: 20px;
height: 20px;
font-size: 10px;
}
}
&[data-is-reply='false'] {
border: 1px solid #e4e8ec;
}
.expert-wrapper {
width: 100%;
}
&[data-has-booking='true'] {
display: grid;
.post-author {
background-color: ${theme.colors.primary50};
}
.btn-wrapper {
padding: 0 16px;
.btn-booking {
width: 100%;
margin: 12px 0;
}
}
}
.comment-reply-wrapper {
padding: 0 1rem;
.more-cmt {
.chevron-right {
height: 1rem;
width: 1rem;
vertical-align: middle;
}
}
}
.top-divider {
border-color: #e4e8ec;
}
.popover {
position: absolute;
top: 1.5rem;
right: 1rem;
.popover-menu__btn {
display: flex;
width: 1rem;
height: 1rem;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
&:hover {
background-color: transparent;
}
.popover-menu__content {
&.--position-bottom {
&.--align-end {
&::before {
right: 12.5px;
}
}
}
}
}
}
&[data-is-marrybaby='true'] {
&[data-is-reply='false'] {
border: none;
}
.image-preview-wrapper,
.link-preview-wrapper {
padding-right: 1rem;
padding-left: 1rem;
}
.popover {
.popover-menu__btn {
width: 24px;
height: 24px;
}
}
margin-left: 56px;
${MediaQueries.mbDown} {
margin-left: 40px;
}
> .post-author {
margin-left: -56px;
${MediaQueries.mbDown} {
margin-left: -40px;
}
.author-info {
align-items: center;
display: flex;
align-items: center;
.author-info-top {
width: 100%;
}
.author-info-text-wrapper {
justify-content: space-between;
}
}
.author-avatar-wrapper {
width: 40px;
height: 40px;
font-size: 20px;
${MediaQueries.mbDown} {
width: 24px;
height: 24px;
font-size: 12px;
}
}
}
&[data-is-reply] {
> .post-author {
.author-avatar-wrapper {
width: 40px;
height: 40px;
font-size: 20px;
${MediaQueries.mbDown} {
width: 24px;
height: 24px;
font-size: 12px;
}
}
}
}
.comment-reply-wrapper {
padding-right: 0;
padding-left: 0;
}
.post-reaction {
&::after {
position: absolute;
bottom: 0;
left: 50%;
width: calc(100% - 2rem);
height: 1px;
background: #f3f3f3;
content: ' ';
transform: translateX(-50%);
}
}
.post-content-wrapper {
padding-top: 0;
padding-bottom: 0;
${MediaQueries.mbDown} {
padding-left: 0.5rem;
}
}
${MediaQueries.mbDown} {
margin-bottom: 12px;
}
}
`;
const StyledSourceList = styled(SourceList) `
margin-top: 12px;
padding: 0.5rem 1rem 1rem;
`;
var styles = {"button":"-dzIuHr"};
const VerifiedTag = ({ userId, avatar, name, role, title, className, }) => {
const { t } = useTranslations();
const [openPopup, setOpenPopup] = useState(false);
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Button, { className: `${styles.button} ${className}`, color: "success", size: "xs", onClick: () => setOpenPopup(true), style: {
padding: '5px 8px',
marginBottom: '12px',
borderRadius: '4px',
} },
React__default.createElement("span", { className: "text" },
React__default.createElement(Endorse, { isSolid: true, size: 18, color: theme.colors.green800, className: "icon" }),
t('cardReply.verifyBy', {
name: `${name || ''}`,
}))),
React__default.createElement(ProfileDetailModal, { open: openPopup, onClose: () => setOpenPopup(false), profileModalProps: { zIndex: 1000 } },
React__default.createElement(ProfileDetail, { authorProps: {
userId,
avatar: avatar,
name,
role,
title,
}, hideQuestionTab: true }))));
};
var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 12 4-4-4-4'/%3e%3c/svg%3e";
var ChevronRightActive = img;
const COMMENT_LIMIT = 4;
const CardReply = ({ className, style, comment: CommentProps, type = 'comment', level = 0, replyingId, onPostCommentSuccess, post, onDeleteComment, refetchComment, hasQuickBookingEnable, handleMakeAppointment, cardAuthorProps, maxChars = 600, disableShortenContent, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
const { data: { locale, userInfo, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
const [comment, setComment] = useState(CommentProps || null);
const { id, countLikes, content, replies = [], images = [], author, liked, link, mentionedUser, mentions, } = comment;
const { text, replyingTo } = decodeCommentBody(content);
const { authActionWrapper } = useTogetherAuthRequiredAction({
_joinCommunityIds: [(_a = post === null || post === void 0 ? void 0 : post.community) === null || _a === void 0 ? void 0 : _a.id],
_joinTopicIds: (_b = post === null || post === void 0 ? void 0 : post.topics) === null || _b === void 0 ? void 0 : _b.map((t) => t.id),
});
const [maxRepliesShow, setMaxRepliesShow] = useState(COMMENT_LIMIT);
const isCommented = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id)
? replies === null || replies === void 0 ? void 0 : replies.some((c) => c.author.id === userInfo.id)
: false;
const addNewReply = (comment) => {
setComment((old) => {
// somehow this set state run twice
// => we need to check unique comment id before add to array
if (!old.replies.find((c) => c.id === comment.id)) {
old.replies.unshift(comment);
const newComment = Object.assign(Object.assign({}, old), { replies: old.replies.slice(), countReplies: old.countReplies + 1 });
refetchComment && refetchComment(newComment);
return newComment;
}
return old;
});
};
const [showInputComment, setShowInputComment] = useState(false);
const sortedReplies = useMemo(() => {
if (type !== 'comment' || !replies || replies.length == 0)
return replies;
return replies.sort((a, b) => {
const timeA = new Date(a.createdAt).getTime();
const timeB = new Date(b.createdAt).getTime();
if (timeA > timeB)
return -1;
if (timeA < timeB)
return 1;
return 0;
});
}, [type, replies]);
const mergeCountReplies = (replies === null || replies === void 0 ? void 0 : replies.length) || 0;
const hasPopover = String(author === null || author === void 0 ? void 0 : author.email) &&
(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) &&
String(author === null || author === void 0 ? void 0 : author.email) === String(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email);
// const isAnonymousOfCurAuthor =
// post?.isAnonymous && post?.author?.username === author?.username
// const name = isAnonymousOfCurAuthor
// ? t('cardPost.anonymous')
// : author?.name || author?.username || ''
// const avatar = isAnonymousOfCurAuthor ? DEFAULT_AVATAR_IMG : author?.avatar
// const username = isAnonymousOfCurAuthor
// ? t('cardPost.anonymous')
// : author?.username || author?.name || ''
const name = (author === null || author === void 0 ? void 0 : author.name) || (author === null || author === void 0 ? void 0 : author.username) || '';
const username = (author === null || author === void 0 ? void 0 : author.username) || (author === null || author === void 0 ? void 0 : author.name) || '';
const avatar = author === null || author === void 0 ? void 0 : author.avatar;
const authorRole = (post === null || post === void 0 ? void 0 : post.isAnonymous) ? undefined : author === null || author === void 0 ? void 0 : author.role;
const listMentions = [
...((post === null || post === void 0 ? void 0 : post.isAnonymous)
? [
{
id: ((_c = post === null || post === void 0 ? void 0 : post.author) === null || _c === void 0 ? void 0 : _c.id) || 0,
name: t('cardPost.anonymous'),
},
]
: []),
...(mentions || []),
];
const [hospitalInfo, setHospitalInfo] = useState(null);
const [doctorInfo, setDoctorInfo] = useState(null);
useEffect(() => {
if (author === null || author === void 0 ? void 0 : author.hospitalId) {
const fetchHospitalDetail = (hospitalId) => __awaiter(void 0, void 0, void 0, function* () {
var _a;
const response = yield callApi(getCarePath(CARE_PATHS.GET_HOSPITAL_INFO, {
hospital_branch_id: hospitalId,
website_url: domainLocales[locale],
}), 'get');
if ((_a = response === null || response === void 0 ? void 0 : response._data) === null || _a === void 0 ? void 0 : _a.branch) {
setHospitalInfo(response === null || response === void 0 ? void 0 : response._data.branch);
}
});
fetchHospitalDetail(author.hospitalId);
}
if (author === null || author === void 0 ? void 0 : author.doctorId) {
const fetchDoctorDetail = (doctorId) => __awaiter(void 0, void 0, void 0, function* () {
var _b;
const response = yield callApi(getCarePath(CARE_PATHS.GET_DOCTOR_INFO, {
doctorId: doctorId,
website_url: domainLocales[locale],
}), 'get');
if ((_b = response === null || response === void 0 ? void 0 : response._data) === null || _b === void 0 ? void 0 : _b.doctor) {
setDoctorInfo(response === null || response === void 0 ? void 0 : response._data.doctor);
}
});
fetchDoctorDetail(author.doctorId);
}
}, [author.hospitalId, author.doctorId]);
const isDoctorAvailable = (doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.valid_outpatient) || (doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.valid_telemedicine);
const isHospitalAvailable = ((hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.total_available_service) ||
(hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.total_available_doctor)) > 0;
const hasQuickBooking = hasQuickBookingEnable && (isDoctorAvailable || isHospitalAvailable);
const isChatbotAuthor = ((_d = comment === null || comment === void 0 ? void 0 : comment.author) === null || _d === void 0