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

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

@@ -1,293 +0,0 @@
-/* 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/src/together/components/organisms/cardPost/index.stories.tsx

@@ -1,212 +0,0 @@
-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/src/together/components/organisms/cardPost/index.styled.tsx

@@ -1,181 +0,0 @@
-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;
-    }
-  }
-`