@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/together/components/organisms/cardPost/index.tsx

@@ -1,458 +0,0 @@
-import React, {
-  CSSProperties,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Heading } from 'components/atoms/heading'
-import { useTranslations } from 'hooks/useTranslations'
-import innertext from 'innertext'
-import { getDefaultFailNoti } from 'together/utils/notification'
-
-import { formatComment } from '../../../api/dataTransform'
-import { CARE_PATHS, PATHS } from '../../../api/paths'
-import {
-  callApi,
-  callApiWithOptionalAuth,
-  domainLocales,
-  getApiPath,
-  getCarePath,
-  getCurrentBaseUrl,
-} from '../../../api/utils'
-import {
-  TogetherAuthConfigContextProvider,
-  useTogetherAuthRequiredAction,
-} from '../../../hooks/useTogetherAuthRequiredAction'
-import { DEFAULT_IMG } from '../../../interfaces/constants'
-import { Comment, DoctorInfo, Post } from '../../../interfaces/types'
-import { TogetherComponentGlobalContext } from '../../../togetherComponentGlobalContext'
-import { likeUnlikePost } from '../../../utils/apiActions/post'
-import { CardLink } from '../../atoms/cardLink'
-import { CardReactions } from '../../atoms/cardReactions'
-import { CardReactionType } from '../../atoms/cardReactions/index'
-import { LabelPin } from '../../atoms/labelSortPin/labelPin'
-import { TagTopic } from '../../atoms/tagTopic'
-import { CardAuthor } from '../../molecules/cardAuthor'
-import { InputCommentBar } from '../../molecules/inputCommentBar'
-import { SharePopup } from '../../molecules/popupFrame/popupShare'
-import { HospitalInfo } from '../../molecules/popupHospital'
-import { PostContent } from '../../molecules/postContent'
-import { PostImagePreview } from '../../molecules/postImagePreview'
-import { SocialLinkPreview } from '../../molecules/socialLinkPreview'
-import { CardReply } from '../cardReply'
-import { CardPostPopoverMore } from './cardPostPopover'
-import { StyledCardPost } from './index.styled'
-
-const getMostEngagingComment = async (postId: number, locale: string) => {
-  const commentsRes = await callApiWithOptionalAuth(
-    getApiPath(PATHS.COMMENT.LIST, {
-      postId: postId,
-      _locale: locale,
-      sort: 'popularity',
-      perPage: 1,
-      withoutReply: 1,
-    }),
-    'GET',
-  )
-  return commentsRes?.data?.comments?.map(formatComment)?.[0]
-}
-
-export type Props = {
-  post: Post
-
-  hideViewMoreComment?: boolean
-  showMostEngaging?: boolean
-  className?: string
-  disableCardLink?: boolean
-  disableShortenContent?: boolean
-  style?: CSSProperties
-  onCommentClick?: () => void
-  onMostEngagingCommentClick?: () => void
-  onCommentCountClick?: () => void
-  onPostCommentSuccess?: (c: Comment) => void
-  onDeletePost?: () => void
-  onEditPost?: () => void
-  mostEngagingComment?: Comment | null
-  onDeleteComment?: (c: Comment) => void
-  showInputComment?: boolean
-  hasQuickBookingEnable?: boolean
-  doctorId?: string
-  hospitalId?: string
-  InlineCommentsComponent?: ReactNode
-  handleMakeAppointment?: (doctorId?: string, hospitalId?: string) => void
-}
-
-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,
-}: Props) => {
-  const [post, setPost] = useState(postProp)
-  const [isOpenSharePopup, setIsOpenSharePopup] = useState(false)
-  const [mostEngagingComment, setMostEngagingComment] = useState(
-    mostEngagingCommentProp,
-  )
-  const {
-    community,
-    topics,
-    author,
-    slug,
-    isPin,
-    liked,
-    scheduleDateTime,
-    createdAt,
-    photos,
-    mentions,
-    title,
-    description,
-    previewUrl,
-    likesCount,
-    commentsCount,
-    id,
-    commented,
-  } = post
-  const {
-    data: {
-      locale,
-      env: { isMarryBaby, togetherBasePath },
-    },
-    action: { pushNotifications },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [showInputComment, setShowInputComment] = useState(
-    propsShowInputComment,
-  )
-
-  const postRelativeHref = `${togetherBasePath}/${community?.slug || '_'}/${
-    slug || ''
-  }`
-  const postHref = `${getCurrentBaseUrl(locale)}${postRelativeHref}`
-  const { authActionWrapper } = useTogetherAuthRequiredAction(
-    community?.slug
-      ? {
-          _joinCommunityIds: [community.id],
-          _joinTopicIds: topics?.map((t) => t.id),
-          // _location: postHref,
-        }
-      : undefined,
-  )
-  const [isLikeLoading, setIsLikeLoading] = useState(false)
-  useEffect(() => {
-    setShowInputComment(propsShowInputComment)
-  }, [propsShowInputComment])
-
-  const name = author?.name || author?.username || ''
-  const username = author?.username || author?.name || ''
-  const avatar = author?.avatar
-  const [hospitalInfo, setHospitalInfo] = useState<HospitalInfo | null>(null)
-  const [doctorInfo, setDoctorInfo] = useState<DoctorInfo | null>(null)
-
-  useEffect(() => {
-    if (author?.hospitalId) {
-      const fetchHospitalDetail = async (hospitalId: string) => {
-        const response = await callApi(
-          getCarePath(CARE_PATHS.GET_HOSPITAL_INFO, {
-            hospital_branch_id: hospitalId,
-            website_url: domainLocales[locale],
-          }),
-          'get',
-        )
-        if (response?._data?.branch) {
-          setHospitalInfo(response?._data.branch)
-        }
-      }
-      fetchHospitalDetail(author.hospitalId)
-    }
-    if (author?.doctorId) {
-      const fetchDoctorDetail = async (doctorId: string) => {
-        const response = await callApi(
-          getCarePath(CARE_PATHS.GET_DOCTOR_INFO, {
-            doctorId: doctorId,
-            website_url: domainLocales[locale],
-          }),
-          'get',
-        )
-        if (response?._data?.doctor) {
-          setDoctorInfo(response?._data.doctor)
-        }
-      }
-      fetchDoctorDetail(author.doctorId)
-    }
-  }, [author.hospitalId, author.doctorId])
-  const isDoctorAvailable =
-    doctorInfo?.valid_outpatient || doctorInfo?.valid_telemedicine
-  const isHospitalAvailable =
-    (hospitalInfo?.total_available_service ||
-      hospitalInfo?.total_available_doctor) > 0
-  const hasQuickBooking =
-    hasQuickBookingEnable && (isDoctorAvailable || isHospitalAvailable)
-
-  useEffect(() => {
-    ;(async () => {
-      if (
-        id &&
-        commentsCount &&
-        showMostEngaging &&
-        !mostEngagingCommentProp?.id
-      ) {
-        const comment = await getMostEngagingComment(id, locale)
-        setMostEngagingComment(comment)
-      }
-    })()
-  }, [id, locale, commentsCount, showMostEngaging, mostEngagingCommentProp?.id])
-  useEffect(() => {
-    setMostEngagingComment(mostEngagingCommentProp)
-  }, [mostEngagingCommentProp?.id])
-  const onPostCommentSuccess = (comment: Comment) => {
-    if (commentsCount === 0 && !mostEngagingComment?.id) {
-      setMostEngagingComment(comment)
-    }
-    setPost((p) => ({
-      ...p,
-      commentsCount: p.commentsCount + 1,
-      commented: true,
-    }))
-    onPostCommentSuccessProp && onPostCommentSuccessProp(comment)
-  }
-
-  const onDeleteComment = async (comment: Comment) => {
-    if (
-      commentsCount > 1 &&
-      mostEngagingComment?.id &&
-      mostEngagingComment?.id === comment?.id
-    ) {
-      const newMostEngaging = await getMostEngagingComment(id, locale)
-      setMostEngagingComment(newMostEngaging)
-    }
-    setPost((p) => ({
-      ...p,
-      commentsCount: p.commentsCount - 1,
-    }))
-    onDeleteCommentProp && onDeleteCommentProp(comment)
-  }
-  return (
-    <TogetherAuthConfigContextProvider
-      defaultParams={
-        community?.slug
-          ? {
-              _joinCommunityIds: [community.id],
-              _joinTopicIds: topics?.map((t) => t.id),
-              // _location: postHref,
-            }
-          : undefined
-      }
-    >
-      {isOpenSharePopup && (
-        <SharePopup
-          url={postHref}
-          avatar={DEFAULT_IMG}
-          text={title}
-          onClose={() => setIsOpenSharePopup(false)}
-        />
-      )}
-      <StyledCardPost
-        className={className}
-        style={style}
-        data-is-marrybaby={isMarryBaby}
-      >
-        {isPin ? <LabelPin className="post-pin" /> : null}
-        <div style={{ position: 'relative' }}>
-          <CardAuthor
-            avatar={avatar}
-            name={name}
-            username={username}
-            url={disableCardLink ? undefined : postRelativeHref}
-            email={author?.email}
-            time={scheduleDateTime || createdAt}
-            community={community}
-            // miniIcon="./svg/icon-tag.svg"
-            className="post-author"
-            role={author?.role}
-            userId={author?.id}
-            expertId={author?.partnerId}
-            doctorId={author?.doctorId}
-            hospitalId={author?.hospitalId}
-            title={author?.title}
-            hasQuickBooking={hasQuickBooking}
-            handleMakeAppointment={handleMakeAppointment}
-          />
-          <CardPostPopoverMore
-            authorEmail={String(author?.email)}
-            onDeletePost={onDeletePost}
-            shareUrl={postHref}
-            post={post}
-            className="popover"
-            onEditPost={onEditPost}
-          />
-        </div>
-        <a
-          href={disableCardLink ? undefined : postRelativeHref}
-          className="post-content-link-wrapper"
-        >
-          {title && (
-            <Heading
-              className="post-content-title"
-              as="h1"
-              tag="h5"
-              fontWeight="bold"
-            >
-              {innertext(title)}
-            </Heading>
-          )}
-          <PostContent
-            className="post-content-wrapper"
-            description={description}
-            disableShortenContent={disableShortenContent}
-            mentions={mentions}
-          />
-        </a>
-        <span></span>
-        <span></span>
-        <div key="tag-topic">
-          {topics && topics.length > 0 ? (
-            <TagTopic topics={topics} className="post-topics" />
-          ) : null}
-        </div>
-        <div key="social-preview">
-          {post?.introUrl ? (
-            <div
-              className={`social-preview-wrapper ${
-                !!photos?.length ? 'has-image' : ''
-              }`}
-            >
-              <SocialLinkPreview url={post.introUrl} image={post.bannerImage} />
-            </div>
-          ) : null}
-        </div>
-        <div key="image-preview">
-          {!!photos?.length ? (
-            <div className="image-preview-wrapper">
-              <PostImagePreview images={photos} authorName={author?.name} />
-            </div>
-          ) : null}
-        </div>
-        <div key="link-preview">
-          {!post?.introUrl && !photos?.length && previewUrl?.url ? (
-            <div className="link-preview-wrapper">
-              <CardLink
-                title={previewUrl.title}
-                url={previewUrl.url}
-                image={previewUrl.image}
-              />
-            </div>
-          ) : null}
-        </div>
-        <CardReactions
-          type={CardReactionType.post}
-          loveCount={likesCount}
-          replyCount={commentsCount}
-          className={`post-reaction ${
-            photos?.length || previewUrl?.url ? 'hide-top-border' : ''
-          }`}
-          liked={isLikeLoading ? !liked : liked}
-          isReplied={commented}
-          onCommentClick={() =>
-            authActionWrapper(() => {
-              onCommentClick ? onCommentClick() : setShowInputComment((v) => !v)
-            })
-          }
-          onCommentCountClick={() => {
-            authActionWrapper(() => {
-              isMarryBaby
-                ? setShowInputComment(true)
-                : onCommentCountClick
-                ? onCommentCountClick()
-                : !disableCardLink && (window.location.href = postRelativeHref)
-            })
-          }}
-          onShareClick={() => {
-            setIsOpenSharePopup(true)
-          }}
-          onLikeClick={async () => {
-            if (!id || isLikeLoading) return
-            setIsLikeLoading(true)
-            try {
-              const res = await likeUnlikePost({
-                id,
-                locale,
-              })
-              if (res?.status !== 1) {
-                pushNotifications(getDefaultFailNoti(t))
-              } else {
-                setPost((p) => ({
-                  ...p,
-                  likesCount: (p.likesCount || 0) + (!p.liked ? 1 : -1),
-                  liked: !p.liked,
-                }))
-              }
-            } catch {
-              pushNotifications(getDefaultFailNoti(t))
-            }
-            setIsLikeLoading(false)
-          }}
-          showingMostEngaging={!!(showMostEngaging && mostEngagingComment?.id)}
-        />
-        {showInputComment && (
-          <InputCommentBar
-            isMainCmt={!propsShowInputComment}
-            onClose={() => setShowInputComment(false)}
-            onPostSuccess={onPostCommentSuccess}
-            post={post}
-          />
-        )}
-        {showMostEngaging && mostEngagingComment?.id ? (
-          <div
-            className="most-engaging-wrapper"
-            onClick={(e) => {
-              if (onMostEngagingCommentClick) {
-                e.stopPropagation()
-                onMostEngagingCommentClick()
-              } else window.location.href = postRelativeHref
-            }}
-          >
-            <CardReply
-              hasQuickBookingEnable={hasQuickBookingEnable}
-              handleMakeAppointment={handleMakeAppointment}
-              comment={mostEngagingComment}
-              onDeleteComment={() => {
-                onDeleteComment && onDeleteComment(mostEngagingComment)
-              }}
-              className="most-engaging-comment"
-              type="most-engaging"
-              key={mostEngagingComment.id}
-            />
-            {commentsCount > 1 && !hideViewMoreComment && (
-              <Button className="see-more-comments" color="ghost" size="md">
-                {t('comment.seeMoreComments', {
-                  count: commentsCount - 1,
-                })}
-              </Button>
-            )}
-          </div>
-        ) : null}
-        {InlineCommentsComponent}
-      </StyledCardPost>
-    </TogetherAuthConfigContextProvider>
-  )
-}
-
-export { CardPost }

package/src/together/components/organisms/cardReply/cardReplyPopover.tsx

@@ -1,122 +0,0 @@
-import React, { useContext, useState } from 'react'
-
-import { useTranslations } from 'hooks/useTranslations'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import MBMoreSolid from '../../../assets/marrybaby/svg/moreSolid.svg'
-import IconDelete from '../../../assets/svg/delete.svg'
-import IconKebab from '../../../assets/svg/icon-kebab.svg'
-import IconTrashBin from '../../../assets/svg/icon-trash-bin.svg'
-import { useTogetherAuthRequiredAction } from '../../../hooks/useTogetherAuthRequiredAction'
-import { deleteComment } from '../../../utils/apiActions/comment'
-import { PopupDanger } from '../../molecules/popupDanger'
-import { TreePopoverMenu } from '../popoverMenu/treePopoverMenu'
-
-export const CardReplyPopover = ({
-  onDeleteComment,
-  commentId,
-  className = '',
-  popoverClassName = '',
-}: {
-  className?: string
-  popoverClassName?: string
-  onDeleteComment?: () => void
-  commentId: string
-}) => {
-  const {
-    data: {
-      env: { isMarryBaby },
-      locale,
-    },
-    action: { pushNotifications },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [isOpenLeavePopup, setIsOpenLeavePopup] = useState(false)
-  const { authActionWrapper } = useTogetherAuthRequiredAction()
-  return (
-    <div
-      className={className}
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-    >
-      {isOpenLeavePopup && (
-        <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={async () => {
-            if (!commentId) return
-            const res = await deleteComment({ id: commentId, locale })
-            if (res?.status === 1) {
-              onDeleteComment && onDeleteComment()
-              pushNotifications({
-                title: '',
-                message: t('notification.success'),
-                type: 'success',
-              })
-            } else {
-              pushNotifications({
-                title: '',
-                message: res?.messages?.[0] || t('notification.failure'),
-                type: 'danger',
-              })
-            }
-          }}
-          onClose={() => setIsOpenLeavePopup(false)}
-        />
-      )}
-      <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={
-          <img src={isMarryBaby ? MBMoreSolid : IconKebab} />
-        }
-        buttonProps={
-          {
-            // isLoading: loading,
-          }
-        }
-      />
-    </div>
-  )
-}