@hhgtech/hhg-components 1.29.255-beta-1 → 1.29.255-beta-3

package/build/esm/{index-6577c177.js → index-e466cbf4.js}

@@ -1,59 +1,57 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-a8899474.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-59e6c9c3.js';
-import { H as Heading } from './index-43894578.js';
-import { u as useTranslations } from './index-c244d627.js';
+import { B as Button } from './index-f993926f.js';
+import { H as Heading } from './index-55d2ff10.js';
+import { u as useTranslations } from './index-8ca04504.js';
 import innertext from 'innertext';
-import { S as SharePopup, P as PopupDanger, i as deletePost, j as IconAlertCircle, b as SubmitReportForm, k as deleteComment, l as decodeCommentBody, m as likeUnlikeComment, I as InputCommentBar, c as SocialLinkPreview, n as likeUnlikePost, g as getDefaultFailNoti } from './index-d7c755b0.js';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-63e3976e.js';
-import { PATHS, DISCOVER_PATHS, CARE_PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, b as callApiWithAuth, d as getApiPath, c as callApi, p as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, q as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-a30adc88.js';
+import { S as SharePopup, P as PopupDanger, i as deletePost, j as IconAlertCircle, b as SubmitReportForm, k as deleteComment, l as decodeCommentBody, m as likeUnlikeComment, I as InputCommentBar, c as SocialLinkPreview, n as likeUnlikePost, g as getDefaultFailNoti } from './index-a60a7164.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-5d7dd1df.js';
 import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-f50ac599.js';
+import { T as TogetherComponentGlobalContext, c as callApi, q as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, r as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-d7a79b14.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-55dd0cf6.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-45fdcf7b.js';
+import { M as MediaQueries } from './utils-bc4ce115.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-9db75e68.js';
-import { C as CardLink } from './index-520d2095.js';
-import { C as CardAuthor, L as Loading, c as ProfileDetailModal } from './index-01a221d1.js';
-import { a as ProfileDetail, P as PostContent } from './index-e7672482.js';
-import { a as PostImagePreview } from './index-52d845a4.js';
-import { D as Divider } from './index-e15f4ebc.js';
-import './index-c673db76.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-04bb1b6b.js';
+import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
+import { C as CardLink } from './index-f7477ebe.js';
+import { C as CardAuthor, L as Loading, c as ProfileDetailModal } from './index-1279323a.js';
+import { a as ProfileDetail, P as PostContent } from './index-233a4b0d.js';
+import { a as PostImagePreview } from './index-b6896227.js';
+import { D as Divider } from './index-935a1f87.js';
+import './index-057f2d1e.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-64ceb47f.js';
-import { T as Text } from './index-1898da73.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-4b5bf175.js';
+import { I as Input } from './index-d63e0760.js';
+import { T as Text } from './index-6d78a8a7.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-5aca6bda.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
-var img$8 = "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$8;
+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$7 = "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$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$6 = "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$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$5 = "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$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='%23595959' stroke-linecap='round' stroke-linejoin='round' d='M12 5.333a2 2 0 1 0 0-4 2 2 0 0 0 0 4M4 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4M12 14.667a2 2 0 1 0 0-4 2 2 0 0 0 0 4M5.727 9.007l4.553 2.653M10.273 4.34 5.727 6.993'/%3e%3c/svg%3e";
-var IconShareOnMedia = img$4;
-
-var img$3 = "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$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='%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$2;
+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 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);
@@ -88,11 +86,11 @@ const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, classN
                     isShowheader: false,
                     type: 'list',
                     list: [
-                        {
-                            icon: IconShareOnMedia,
-                            label: t('morePopover.share'),
-                            onClick: () => setIsOpenSharePopup(true),
-                        },
+                        // {
+                        //   icon: IconShareOnMedia,
+                        //   label: t('morePopover.share'),
+                        //   onClick: () => setIsOpenSharePopup(true),
+                        // },
                         {
                             icon: IconTabEdit,
                             label: t('actionPopover.edit'),
@@ -111,76 +109,80 @@ const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, classN
                     isShowheader: false,
                     type: 'list',
                     list: [
-                        {
-                            icon: IconShareOnMedia,
-                            label: t('morePopover.share'),
-                            onClick: () => setIsOpenSharePopup(true),
-                        },
-                        {
-                            icon: !!(post === null || post === void 0 ? void 0 : post.bookmarked) ? IconBookmarkFill : IconBookmark,
-                            label: !!(post === null || post === void 0 ? void 0 : post.bookmarked)
-                                ? t('morePopover.unsavePost')
-                                : t('morePopover.savePost'),
-                            onClick: () => {
-                                authActionWrapper(() => __awaiter(void 0, void 0, void 0, function* () {
-                                    if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) || !(post === null || post === void 0 ? void 0 : post.id))
-                                        return;
-                                    if (post === null || post === void 0 ? void 0 : post.bookmarked) {
-                                        const res = yield callApiWithAuth(getApiPath(PATHS.BOOKMARK.DELETE, {
-                                            _locale: locale,
-                                        }), 'DELETE', {
-                                            data: {
-                                                post_id: String(post.id),
-                                            },
-                                        });
-                                        if ((res === null || res === void 0 ? void 0 : 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 = yield callApiWithAuth(getApiPath(PATHS.BOOKMARK.CREATE, {
-                                            _locale: locale,
-                                        }), 'POST', {
-                                            data: {
-                                                user_id: togetherUserId || userInfo.id,
-                                                post_id: post.id,
-                                            },
-                                        });
-                                        if ((res === null || res === void 0 ? void 0 : 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: 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
@@ -417,6 +419,12 @@ const StyledCardPost$1 = styled.div `
   }
 `;
 
+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;
 
@@ -1184,12 +1192,13 @@ const getMostEngagingComment = (postId, locale) => __awaiter(void 0, void 0, voi
     }), 'GET');
     return (_c = (_b = (_a = commentsRes === null || commentsRes === void 0 ? void 0 : commentsRes.data) === null || _a === void 0 ? void 0 : _a.comments) === null || _b === void 0 ? void 0 : _b.map(formatComment)) === null || _c === void 0 ? void 0 : _c[0];
 });
-const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onCommentClick, onCommentCountClick, onMostEngagingCommentClick, onPostCommentSuccess: onPostCommentSuccessProp, disableCardLink, disableShortenContent, onDeletePost, onEditPost, post: postProp, mostEngagingComment: mostEngagingCommentProp, onDeleteComment: onDeleteCommentProp, showInputComment: propsShowInputComment, InlineCommentsComponent, hasQuickBookingEnable, handleMakeAppointment, cardAuthorProps, }) => {
+const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onCommentClick, onCommentCountClick, onMostEngagingCommentClick, onPostCommentSuccess: onPostCommentSuccessProp, disableCardLink, disableShortenContent, onDeletePost, onEditPost, post: postProp, mostEngagingComment: mostEngagingCommentProp, onDeleteComment: onDeleteCommentProp, showInputComment: propsShowInputComment, InlineCommentsComponent, hasQuickBookingEnable, handleMakeAppointment, cardAuthorProps, verticalReactions = false, }) => {
     const [post, setPost] = useState(postProp);
     const [isOpenSharePopup, setIsOpenSharePopup] = useState(false);
     const [mostEngagingComment, setMostEngagingComment] = useState(mostEngagingCommentProp);
     const { community, topics, author, slug, isPin, liked, photos, mentions, title, description, previewUrl, likesCount, commentsCount, id, commented, } = post;
-    const { data: { locale, env: { isMarryBaby, togetherBasePath }, }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const { data: { locale, togetherUserId, userInfo, env: { isMarryBaby, togetherBasePath }, }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const isLoggedIn = Boolean(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id);
     const { t } = useTranslations();
     const [showInputComment, setShowInputComment] = useState(propsShowInputComment);
     const postRelativeHref = `${togetherBasePath}/${(community === null || community === void 0 ? void 0 : community.slug) || '_'}/${slug || ''}`;
@@ -1300,7 +1309,7 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
                 React__default.createElement(PostImagePreview, { images: photos, authorName: author === null || author === void 0 ? void 0 : author.name }))) : null),
             React__default.createElement("div", { key: "link-preview" }, !(post === null || post === void 0 ? void 0 : post.introUrl) && !(photos === null || photos === void 0 ? void 0 : photos.length) && (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) ? (React__default.createElement("div", { className: "link-preview-wrapper" },
                 React__default.createElement(CardLink, { title: previewUrl.title, url: previewUrl.url, image: previewUrl.image }))) : null),
-            React__default.createElement(CardReactions, { isMarryBaby: isMarryBaby, type: CardReactionType.post, loveCount: likesCount, replyCount: commentsCount, className: `post-reaction ${(photos === null || photos === void 0 ? void 0 : photos.length) || (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) ? 'hide-top-border' : ''}`, liked: isLikeLoading ? !liked : liked, isReplied: commented, onCommentClick: () => authActionWrapper(() => {
+            React__default.createElement(CardReactions, { isMarryBaby: isMarryBaby, type: CardReactionType.post, loveCount: likesCount, replyCount: commentsCount, className: `post-reaction ${(photos === null || photos === void 0 ? void 0 : photos.length) || (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) ? 'hide-top-border' : ''}`, liked: isLikeLoading ? !liked : liked, isReplied: commented, isSaved: (post === null || post === void 0 ? void 0 : post.bookmarked) || false, onCommentClick: () => authActionWrapper(() => {
                     onCommentClick ? onCommentClick() : setShowInputComment((v) => !v);
                 }), onCommentCountClick: () => {
                     authActionWrapper(() => {
@@ -1313,26 +1322,98 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
                 }, onShareClick: () => {
                     setIsOpenSharePopup(true);
                 }, onLikeClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                    if (!id || isLikeLoading)
-                        return;
-                    setIsLikeLoading(true);
-                    try {
-                        const res = yield likeUnlikePost({
-                            id,
-                            locale,
-                        });
-                        if ((res === null || res === void 0 ? void 0 : res.status) !== 1) {
+                    authActionWrapper(() => __awaiter(void 0, void 0, void 0, function* () {
+                        if (!id || isLikeLoading)
+                            return;
+                        setIsLikeLoading(true);
+                        try {
+                            const res = yield likeUnlikePost({
+                                id,
+                                locale,
+                            });
+                            if ((res === null || res === void 0 ? void 0 : res.status) !== 1) {
+                                pushNotifications(getDefaultFailNoti(t));
+                            }
+                            else {
+                                setPost((p) => (Object.assign(Object.assign({}, p), { likesCount: (p.likesCount || 0) + (!p.liked ? 1 : -1), liked: !p.liked })));
+                            }
+                        }
+                        catch (_a) {
                             pushNotifications(getDefaultFailNoti(t));
                         }
+                        setIsLikeLoading(false);
+                    }));
+                }), onSaveClick: () => {
+                    authActionWrapper(() => __awaiter(void 0, void 0, void 0, function* () {
+                        if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) || !(post === null || post === void 0 ? void 0 : post.id))
+                            return;
+                        if (post === null || post === void 0 ? void 0 : post.bookmarked) {
+                            const res = yield callApiWithAuth(getApiPath(PATHS.BOOKMARK.DELETE, {
+                                _locale: locale,
+                            }), 'DELETE', {
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                data: {
+                                    post_id: String(post.id),
+                                },
+                            });
+                            if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
+                                pushNotifications({
+                                    title: '',
+                                    message: 'Removed saved post',
+                                    type: 'success',
+                                    displayIcon: IconBookmark,
+                                });
+                            }
+                            else {
+                                pushNotifications({
+                                    title: '',
+                                    message: 'Remove failed',
+                                    type: 'danger',
+                                    displayIcon: IconBookmark,
+                                });
+                            }
+                        }
                         else {
-                            setPost((p) => (Object.assign(Object.assign({}, p), { likesCount: (p.likesCount || 0) + (!p.liked ? 1 : -1), liked: !p.liked })));
+                            const res = yield callApiWithAuth(getApiPath(PATHS.BOOKMARK.CREATE, {
+                                _locale: locale,
+                            }), 'POST', {
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                data: {
+                                    user_id: togetherUserId || userInfo.id,
+                                    post_id: post.id,
+                                },
+                            });
+                            if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
+                                pushNotifications({
+                                    title: '',
+                                    message: 'Post saved',
+                                    type: 'success',
+                                    displayIcon: IconBookmarkFill,
+                                });
+                            }
+                            else {
+                                pushNotifications({
+                                    title: '',
+                                    message: 'Post saved failed',
+                                    type: 'danger',
+                                    displayIcon: IconBookmark,
+                                });
+                            }
                         }
+                    }));
+                }, onGoToUrl: (params) => {
+                    const urlDetailPost = params ? `${postHref}${params}` : postHref;
+                    if (!isLoggedIn) {
+                        authActionWrapper(() => (window.location.href = urlDetailPost));
                     }
-                    catch (_a) {
-                        pushNotifications(getDefaultFailNoti(t));
+                    else {
+                        window.location.href = urlDetailPost;
                     }
-                    setIsLikeLoading(false);
-                }), showingMostEngaging: !!(showMostEngaging && (mostEngagingComment === null || mostEngagingComment === void 0 ? void 0 : mostEngagingComment.id)) }),
+                }, showingMostEngaging: !!(showMostEngaging && (mostEngagingComment === null || mostEngagingComment === void 0 ? void 0 : mostEngagingComment.id)), isVertical: verticalReactions }),
             showInputComment && (React__default.createElement(InputCommentBar, { isMainCmt: !propsShowInputComment, onClose: () => setShowInputComment(false), onPostSuccess: onPostCommentSuccess, post: post })),
             showMostEngaging && (mostEngagingComment === null || mostEngagingComment === void 0 ? void 0 : mostEngagingComment.id) ? (React__default.createElement("div", { className: "most-engaging-wrapper", onClick: (e) => {
                     if (onMostEngagingCommentClick) {

package/build/esm/{index-d10a5a55.js → index-e57c93fa.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-45fdcf7b.js';
+import { t as toggleNoScroll } from './utils-bc4ce115.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-26ededa5.js';
-import { T as Text } from './index-1898da73.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-b5fb6e1a.js';
+import { T as Text } from './index-6d78a8a7.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {

package/build/esm/{index-41e2e754.js → index-e5c5350b.js}

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MarryBabyText } from './index-1b795ea9.js';
-import { T as Text } from './index-e9050315.js';
+import { M as MarryBabyText } from './index-7e8aa571.js';
+import { T as Text } from './index-14226fb8.js';
 
 const StyledRadioImageGroup = styled.div `
   display: flex;

package/build/esm/{index-485a662c.js → index-e92c278a.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-d5632995.js';
+import './index-afea9eed.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-e09202bf.js';
-import { T as Text } from './index-e9050315.js';
-import { L as LOCALE } from './Locale-ca77b0a8.js';
-import { c as CentralCarousel } from './index-de634c83.js';
+import { I as ImageWrap } from './useScreenSize-72a6e414.js';
+import { T as Text } from './index-14226fb8.js';
+import { L as LOCALE } from './Locale-e3bf3674.js';
+import { c as CentralCarousel } from './index-a595566d.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-5ec12ba9.js → index-f0fa0bcd.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-1238c5b2.js';
+import { B as Button } from './index-0756189f.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-520d2095.js → index-f7477ebe.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-1ac4ffe8.js';
+import { a as __awaiter } from './tslib.es6-a8899474.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-43894578.js';
-import { T as Text } from './index-1898da73.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-a30adc88.js';
+import { H as Heading } from './index-55d2ff10.js';
+import { T as Text } from './index-6d78a8a7.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-d7a79b14.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-63e3976e.js';
+import { D as DEFAULT_IMG } from './constants-5d7dd1df.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-59e6c9c3.js → index-f993926f.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-1238c5b2.js';
+import { B as Button$1 } from './index-0756189f.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'