@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/together/components/organisms/cardPost/cardPostPopover.tsx

@@ -0,0 +1,293 @@
+/* eslint-disable react/display-name */
+import React, { useContext, useState } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+import { TranslationsKey } from 'i18n/translations'
+import { REPORT_REASON_MAP } from 'together/interfaces/constants'
+
+import { PATHS } from '../../../api/paths'
+import { callApiWithAuth, getApiPath } from '../../../api/utils'
+import MBMoreSolid from '../../../assets/marrybaby/svg/moreSolid.svg'
+import IconDelete from '../../../assets/svg/delete.svg'
+import IconAlertCircle from '../../../assets/svg/icon-alert-circle.svg'
+import IconBookmarkFill from '../../../assets/svg/icon-bookmark-fill.svg'
+import IconBookmark from '../../../assets/svg/icon-bookmark.svg'
+import IconKebab from '../../../assets/svg/icon-kebab.svg'
+import IconShareOnMedia from '../../../assets/svg/icon-share-on-media.svg'
+import IconTabEdit from '../../../assets/svg/icon-tab-edit-2.svg'
+import IconTrashBin from '../../../assets/svg/icon-trash-bin.svg'
+import { useTogetherAuthRequiredAction } from '../../../hooks/useTogetherAuthRequiredAction'
+import { Post } from '../../../interfaces/types'
+import { TogetherComponentGlobalContext } from '../../../togetherComponentGlobalContext'
+import { deletePost } from '../../../utils/apiActions/post'
+import { PopupDanger } from '../../molecules/popupDanger'
+import { SharePopup } from '../../molecules/popupFrame/popupShare'
+import { SubmitReportForm } from '../../molecules/submitReportForm/index'
+import { TreePopoverMenu } from '../popoverMenu/treePopoverMenu'
+
+// import IconBellOff from '../../../assets/svg/icon-bell-off.svg'
+// import IconBellOn from '../../../assets/svg/icon-bell-on.svg'
+
+export const CardPostPopoverMore = ({
+  authorEmail,
+  onDeletePost,
+  shareUrl,
+  post,
+  className = '',
+  popoverClassName = '',
+  onBookmark,
+  onRemoveBookmark,
+  onEditPost,
+}: {
+  className?: string
+  popoverClassName?: string
+  authorId?: string
+  authorEmail?: string
+  onDeletePost?: () => void
+  shareUrl?: string
+  post?: Post
+  onBookmark?: () => void
+  onRemoveBookmark?: () => void
+  onEditPost?: () => void
+}) => {
+  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?.email && authorEmail === String(userInfo?.email)
+  return (
+    <div
+      className={className}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      {isOpenSharePopup && (
+        <SharePopup
+          url={shareUrl}
+          text={post?.title}
+          onClose={() => setIsOpenSharePopup(false)}
+        />
+      )}
+      {isOpenLeavePopup && (
+        <PopupDanger
+          thumbnail={'./svg/delete.svg'}
+          isThumbnailIcon
+          title={t('popup.deletePost.title')}
+          description={t('popup.deletePost.description')}
+          acceptText={t('popup.deletePost.accept')}
+          cancelText={t('popup.deletePost.cancel')}
+          onAccept={async () => {
+            if (!post?.id || loading) return
+            setLoading(true)
+            try {
+              const res = await deletePost({
+                id: post.id,
+                locale,
+              })
+              if (res?.status === 1) onDeletePost?.()
+            } catch {}
+            setLoading(false)
+          }}
+          onClose={() => setIsOpenLeavePopup(false)}
+        />
+      )}
+      <TreePopoverMenu
+        className={popoverClassName}
+        toggleButtonContent={
+          <img src={isMarryBaby ? MBMoreSolid : IconKebab} />
+        }
+        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'), //'Report this post',
+                      description: t('morePopover.report.description'), // 'Help us understand what’s happening with this post. How would you describe it?',
+                      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 as TranslationsKey),
+                          subTree: {
+                            title: t('morePopover.reportSubmit.title'), //'Submit report?',
+                            description: t(
+                              'morePopover.reportSubmit.description',
+                            ), //'We won’t tell them who reported it. Please check these details:',
+                            isShowheader: true,
+                            type: 'jsx',
+                            jsxRenderer: (setShow) => (
+                              <SubmitReportForm
+                                reason={item.reasonValue}
+                                reasonText={t(item.reason as TranslationsKey)}
+                                postId={post?.id}
+                                onClose={() => setShow && setShow(false)}
+                              />
+                            ),
+                          },
+                        })),
+                    },
+                  },
+                ],
+              }
+        }
+      />
+    </div>
+  )
+}

package/raw/together/components/organisms/cardPost/index.stories.tsx

@@ -0,0 +1,212 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+import styled from 'styled-components'
+
+import {
+  TogetherComponentGlobalContextProvider,
+  Props as ComponentGlobalProps,
+} from '../../../togetherComponentGlobalContext'
+import { CardPost, Props as PostProps } from './index'
+
+export default {
+  component: CardPost,
+  title: 'Projects/Together/Organisms/CardPost',
+}
+
+import 'react-quill/dist/quill.snow.css'
+
+const StoryWrapper = styled.div`
+  width: 368px;
+  padding: 16px;
+  border: 1px solid gray;
+`
+
+type Props = PostProps & {
+  global?: ComponentGlobalProps
+}
+
+const Template: Story<Props> = (
+  { global, ...rest }: Props,
+  { globals: { locale } },
+) => {
+  return (
+    <TogetherComponentGlobalContextProvider
+      {...global}
+      locale={locale}
+      router={{
+        ...global?.router,
+        locale,
+      }}
+    >
+      <StoryWrapper>
+        <CardPost {...rest} />
+      </StoryWrapper>
+    </TogetherComponentGlobalContextProvider>
+  )
+}
+
+const baseProps = {
+  post: {
+    id: '2882',
+    topics: [
+      {
+        id: '6',
+        name: 'Chuẩn bị mang thai',
+        slug: 'chuan-bi-mang-thai',
+        url: '/mang-thai/chuan-bi-mang-thai',
+        communityId: '1',
+        communitySlug: 'mang-thai',
+        communityName: 'Mang thai',
+      },
+    ],
+    community: {
+      id: '1',
+      name: 'Mang thai',
+      slug: 'mang-thai',
+      isActive: true,
+    },
+    slug: 'this-post-is-for-testing-pinned-post-is-automatically-unpin-after-a-day-reconfirm',
+    author: {
+      id: 1,
+      username: 'admin',
+      email: 'admin@hellohealthgroup.com',
+      name: '',
+      avatar: '',
+      role: 'moderator',
+      type: 'moderator',
+      partnerId: '',
+    },
+    previewUrl: { title: '', url: '', image: '', description: '' },
+    createdAt: '2022-03-11T01:06:34.000000Z',
+    scheduleDateTime: '',
+    photos: [],
+    description:
+      '<ol><li>The previous testing pinned post created on 10-Mar, and is unpinned in 11-Mar</li><li>Add this new post to double-check the number of days that pinned post is automatically unpinned </li></ol><p>\\t\\t\\t\\ta. created in 11-Mar-8:05AM</p><p>           \\t\\tb. Schedule Post: false</p>',
+    commentCount: 3,
+    likesCount: 0,
+    title:
+      'This post is for testing, pinned post is automatically unpin after a day [reconfirm]',
+    isPin: true,
+    pinDate: '2022-03-14 03:12:49',
+    liked: false,
+    bookmarked: false,
+    mentions: [],
+    commented: false,
+  },
+  style: {
+    marginBottom: 0,
+  },
+  // onCommentClick: () => console.log('onCommentClick'),
+  onMostEngagingCommentClick: () => console.log('onMostEngagingCommentClick'),
+  onCommentCountClick: () => console.log('onCommentCountClick'),
+  onPostCommentSuccess: (c: Comment) => console.log('onPostCommentSuccess', c),
+  onDeletePost: () => console.log('onDeletePost'),
+  onEditPost: () => console.log('onEditPost'),
+  showMostEngaging: true,
+  onDeleteComment: (c: Comment) => console.log('onDeleteComment', c),
+}
+
+export const NotLoggedIn = Template.bind({})
+NotLoggedIn.args = {
+  ...baseProps,
+}
+export const LoggedIn = Template.bind({})
+LoggedIn.args = {
+  ...baseProps,
+  global: {
+    userInfo: {
+      id: 12798,
+      uid: '6fdbc5c8-bd12-11eb-9276-42010a940004',
+      website_id: 5,
+      provider: 'google',
+      social_id: '110850299647659967554',
+      name: 'Tung Vu',
+      username: 'vmtung93',
+      email: 'vmtung93@gmail.com',
+      avatar:
+        'https://cdn-sso-stag.hellobacsi.com/2021/11/72b32a1f754ba1c09b3695e0cb6cde7f.jpg',
+      birthday: '1993-09-29',
+      gender: 1,
+      status: 1,
+      referrer: 'https://discover.hellobacsi.com/',
+      is_new: 0,
+      notify_number: 0,
+      last_login_at: '2022-03-17 22:48:07',
+      first_time_bookmark: false,
+      is_active: 1,
+      is_suspend: 0,
+      communities_interacted: 1,
+      first_time_login: 0,
+      bookmarks: [],
+      edit_email: false,
+      total_bookmark: 0,
+    },
+    locale: 'vi-VN',
+    router: {
+      basePath: '',
+      pathname: '/[...slug]',
+      asPath:
+        '/benh-truyen-nhiem/coronavirus/nguoi-benh-covid-19-co-nen-xong-hoi/',
+      locale: 'vi-VN',
+    },
+    pushNotifications: (s) => console.log('notification', s),
+    sanitizeFunction: (s) => 'sanitized: ' + s,
+    env: {
+      togetherBasePath: '/community',
+      publicSSO: 'https://staging-id.hellobacsi.com/',
+      togetherBaseApiUrl: 'https://staging-together.hellohealthgroup.com/',
+      discoverBaseApiUrl: 'https://staging.hellosehat.com/',
+    },
+  },
+}
+export const LoggedInIsPostAuthor = Template.bind({})
+LoggedInIsPostAuthor.args = {
+  ...baseProps,
+  global: {
+    userInfo: {
+      id: 2439339,
+      username: 'p3heo2810199651-sJl',
+      email: 'p3heo28101996@gmail.com',
+      name: 'Huỳnh Thị Cẩm Nhung',
+      avatar: '',
+      role: '',
+      type: 'member',
+      uid: '6fdbc5c8-bd12-11eb-9276-42010a940004',
+      website_id: 5,
+      provider: 'google',
+      social_id: '110850299647659967554',
+      birthday: '1993-09-29',
+      gender: 1,
+      status: 1,
+      referrer: 'https://discover.hellobacsi.com/',
+      is_new: 0,
+      notify_number: 0,
+      last_login_at: '2022-03-17 22:48:07',
+      first_time_bookmark: false,
+      is_active: 1,
+      is_suspend: 0,
+      communities_interacted: 1,
+      first_time_login: 0,
+      bookmarks: [],
+      edit_email: false,
+      total_bookmark: 0,
+    },
+    locale: 'vi-VN',
+    router: {
+      basePath: '',
+      pathname: '/[...slug]',
+      asPath:
+        '/benh-truyen-nhiem/coronavirus/nguoi-benh-covid-19-co-nen-xong-hoi/',
+      locale: 'vi-VN',
+    },
+    pushNotifications: (s) => console.log('notification', s),
+    sanitizeFunction: (s) => 'sanitized: ' + s,
+    env: {
+      togetherBasePath: '/community',
+      publicSSO: 'https://staging-id.hellobacsi.com/',
+      togetherBaseApiUrl: 'https://staging-together.hellohealthgroup.com/',
+      discoverBaseApiUrl: 'https://staging.hellosehat.com/',
+    },
+  },
+}

package/raw/together/components/organisms/cardPost/index.styled.tsx

@@ -0,0 +1,181 @@
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledCardPost = styled.div`
+  position: relative;
+  margin-bottom: 24px;
+  background: white;
+  border-radius: 6px;
+
+  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: 6px 6px 0 0;
+  }
+  .post-author {
+    padding-top: 1rem;
+    &.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;
+    margin-bottom: 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 {
+    position: absolute;
+    top: 1.2rem;
+    right: 1rem;
+    .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;
+    }
+  }
+`