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

package/src/together/components/organisms/cardReply/index.styled.tsx

@@ -1,199 +0,0 @@
-import { MediaQueries } from 'misc/utils'
-import { ThemeProps } from 'src/misc/theme'
-import styled from 'styled-components'
-
-export const StyledCardPost = styled.div`
-  position: relative;
-  margin-bottom: 0;
-  background: white;
-  border-radius: 6px;
-
-  .post-author {
-    padding-top: 1rem;
-    padding-right: 2rem;
-    &.with-popover {
-      padding-right: 2.6rem;
-    }
-    .author-avatar-wrapper {
-      width: 40px;
-      height: 40px;
-      font-size: 20px;
-      ${MediaQueries.mbDown} {
-        width: 32px;
-        height: 32px;
-        font-size: 16px;
-      }
-    }
-  }
-  .image-preview-wrapper,
-  .link-preview-wrapper {
-    width: 100%;
-    &[data-is-reply='true'] {
-      padding-right: 1rem;
-      padding-left: 1rem;
-    }
-  }
-  .post-reaction {
-    background: none;
-    border-radius: 0 0 6px 6px;
-  }
-  &[data-is-reply='true'] {
-    > .post-author .author-avatar-wrapper {
-      width: 20px;
-      height: 20px;
-      font-size: 10px;
-    }
-  }
-  &[data-is-reply='false'] {
-    border: 1px solid #e4e8ec;
-  }
-  .expert-wrapper {
-    width: 100%;
-  }
-  &[data-has-booking='true'] {
-    display: grid;
-    .post-author {
-      background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-    }
-    .btn-wrapper {
-      padding: 0 16px;
-      .btn-booking {
-        width: 100%;
-        margin: 12px 0;
-      }
-    }
-  }
-
-  .comment-reply-wrapper {
-    padding: 0 1rem;
-    .more-cmt {
-      .chevron-right {
-        height: 1rem;
-        width: 1rem;
-        vertical-align: middle;
-      }
-    }
-  }
-  .top-divider {
-    border-color: #e4e8ec;
-  }
-  .popover {
-    position: absolute;
-    top: 1.5rem;
-    right: 1rem;
-    .popover-menu__btn {
-      display: flex;
-      width: 1rem;
-      height: 1rem;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      background: transparent;
-
-      &:hover {
-        background-color: transparent;
-      }
-
-      .popover-menu__content {
-        &.--position-bottom {
-          &.--align-end {
-            &::before {
-              right: 12.5px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &[data-is-marrybaby='true'] {
-    &[data-is-reply='false'] {
-      border: none;
-    }
-    .image-preview-wrapper,
-    .link-preview-wrapper {
-      padding-right: 1rem;
-      padding-left: 1rem;
-    }
-    .popover {
-      .popover-menu__btn {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    margin-left: 56px;
-    ${MediaQueries.mbDown} {
-      margin-left: 40px;
-    }
-    > .post-author {
-      margin-left: -56px;
-      ${MediaQueries.mbDown} {
-        margin-left: -40px;
-      }
-      .author-info {
-        align-items: center;
-        display: flex;
-        align-items: center;
-        .author-info-top {
-          width: 100%;
-        }
-        .author-info-text-wrapper {
-          justify-content: space-between;
-        }
-      }
-      .author-avatar-wrapper {
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-        ${MediaQueries.mbDown} {
-          width: 24px;
-          height: 24px;
-          font-size: 12px;
-        }
-      }
-    }
-    &[data-is-reply] {
-      > .post-author {
-        .author-avatar-wrapper {
-          width: 40px;
-          height: 40px;
-          font-size: 20px;
-          ${MediaQueries.mbDown} {
-            width: 24px;
-            height: 24px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-
-    .comment-reply-wrapper {
-      padding-right: 0;
-      padding-left: 0;
-    }
-    .post-reaction {
-      &::after {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        width: calc(100% - 2rem);
-        height: 1px;
-        background: #f3f3f3;
-        content: ' ';
-        transform: translateX(-50%);
-      }
-    }
-    .post-content-wrapper {
-      padding-top: 0;
-      padding-bottom: 0;
-      ${MediaQueries.mbDown} {
-        padding-left: 0.5rem;
-      }
-    }
-
-    ${MediaQueries.mbDown} {
-      margin-bottom: 12px;
-    }
-  }
-`

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

@@ -1,362 +0,0 @@
-import React, {
-  CSSProperties,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Divider } from 'components/atoms/divider'
-import { useTranslations } from 'hooks/useTranslations'
-import { domainLocales } from 'src/interfaces/constants'
-import { CARE_PATHS } from 'src/together/api/paths'
-import { callApi, getCarePath } from 'src/together/api/utils'
-import {
-  decodeCommentBody,
-  likeUnlikeComment,
-} from 'together/utils/apiActions/comment'
-
-import ChevronRightActive from '../../../assets/svg/chevronRightActive.svg'
-import {
-  TogetherAuthConfigContextProvider,
-  useTogetherAuthRequiredAction,
-} from '../../../hooks/useTogetherAuthRequiredAction'
-import { Comment, DoctorInfo, Post } from '../../../interfaces/types'
-import { TogetherComponentGlobalContext } from '../../../togetherComponentGlobalContext'
-import { CardLink } from '../../atoms/cardLink'
-import { CardReactions } from '../../atoms/cardReactions'
-import { CardReactionType } from '../../atoms/cardReactions/index'
-import { CardAuthor } from '../../molecules/cardAuthor'
-import { InputCommentBar } from '../../molecules/inputCommentBar'
-import { HospitalInfo } from '../../molecules/popupHospital'
-import { PostContent } from '../../molecules/postContent'
-import { PostImagePreview } from '../../molecules/postImagePreview'
-import { CardReplyPopover } from './cardReplyPopover'
-import { StyledCardPost } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  type?: 'comment' | 'reply' | 'most-engaging'
-  level?: number
-  replyingId?: string
-  comment: Comment
-  onPostCommentSuccess?: (c: Comment) => void
-  refetchComment?: (c: Comment) => void
-  post?: Post
-  onDeleteComment?: () => void
-  hasQuickBookingEnable?: boolean
-  handleMakeAppointment?: (doctorId?: string, hospitalId?: string) => void
-}
-
-const COMMENT_LIMIT = 4
-
-const CardReply = ({
-  className,
-  style,
-  comment: CommentProps,
-  type = 'comment',
-  level = 0,
-  replyingId,
-  onPostCommentSuccess,
-  post,
-  onDeleteComment,
-  refetchComment,
-  hasQuickBookingEnable,
-  handleMakeAppointment,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      userInfo,
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [comment, setComment] = useState<Comment>(CommentProps || null)
-  const {
-    id,
-    countReplies,
-    countLikes,
-    content,
-    createdAt,
-    replies = [],
-    images = [],
-    author,
-    liked,
-    link,
-    mentionedUser,
-    mentions,
-  } = comment
-
-  const { text, replyingTo } = decodeCommentBody(content)
-  const { authActionWrapper } = useTogetherAuthRequiredAction({
-    _joinCommunityIds: [post?.community?.id],
-    _joinTopicIds: post?.topics?.map((t) => t.id),
-  })
-  const [maxRepliesShow, setMaxRepliesShow] = useState(COMMENT_LIMIT)
-  const isCommented = userInfo?.id
-    ? replies?.some((c) => c.author.id === userInfo.id)
-    : false
-
-  const addNewReply = (comment: Comment) => {
-    setComment((old) => {
-      old.replies.unshift(comment)
-      const newComment = {
-        ...old,
-        replies: old.replies.slice(),
-        countReplies: old.countReplies + 1,
-      }
-      refetchComment && refetchComment(newComment)
-      return newComment
-    })
-  }
-  const [showInputComment, setShowInputComment] = useState(false)
-
-  const sortedReplies = useMemo(() => {
-    if (type !== 'comment' || !replies || replies.length == 0) return replies
-    return replies.sort((a, b) => {
-      const timeA = new Date(a.createdAt).getTime()
-      const timeB = new Date(b.createdAt).getTime()
-      if (timeA > timeB) return -1
-      if (timeA < timeB) return 1
-
-      return 0
-    })
-  }, [type, replies])
-
-  const mergeCountReplies = replies?.length || 0
-  const hasPopover =
-    String(author?.email) &&
-    userInfo?.email &&
-    String(author?.email) === String(userInfo?.email)
-
-  const name = author?.name || author?.username || ''
-  const avatar = author?.avatar
-  const username = author?.username || author?.name || ''
-
-  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)
-
-  return (
-    <TogetherAuthConfigContextProvider
-      defaultParams={{
-        _joinCommunityIds: [post?.community?.id],
-        _joinTopicIds: post?.topics?.map((t) => t.id),
-      }}
-    >
-      <StyledCardPost
-        className={className}
-        style={style}
-        data-is-reply={!!level}
-        data-is-marrybaby={isMarryBaby}
-        data-has-booking={hasQuickBooking}
-      >
-        {type === 'reply' && <Divider className="top-divider" type="solid" />}
-        <CardAuthor
-          avatar={avatar}
-          name={name}
-          username={username}
-          email={author?.email}
-          time={createdAt}
-          // community={community}
-          // miniIcon="./svg/icon-tag.svg"
-          // authorLabelType={getAuthorLabelFromRoles(author?.role || [])}
-          className={`post-author ${hasPopover ? 'with-popover' : ''}`}
-          type={type}
-          userId={author?.id}
-          role={author?.role}
-          expertId={author?.partnerId}
-          title={author?.title}
-          doctorId={author?.doctorId}
-          hospitalId={author?.hospitalId}
-          hasQuickBooking={hasQuickBooking}
-          handleMakeAppointment={handleMakeAppointment}
-        />
-        <PostContent
-          className="post-content-wrapper"
-          replyingTo={replyingTo}
-          mentionedUser={mentionedUser}
-          description={text}
-          mentions={mentions}
-        />
-        <span></span>
-        <span></span>
-        {images && images.length > 0 ? (
-          <div
-            key="image-preview"
-            className="image-preview-wrapper"
-            data-is-reply={true}
-          >
-            <PostImagePreview images={images} authorName={author?.username} />
-          </div>
-        ) : null}
-        {(!images || images.length === 0) && link ? (
-          <div
-            key="link-preview"
-            className="link-preview-wrapper"
-            data-is-reply={true}
-          >
-            <CardLink url={link} />
-          </div>
-        ) : null}
-
-        {type !== 'most-engaging' ? (
-          <>
-            <CardReactions
-              type={CardReactionType.reply}
-              loveCount={countLikes}
-              replyCount={mergeCountReplies}
-              className="post-reaction"
-              liked={liked}
-              isReplied={isCommented}
-              hideCommentIcon={type === 'reply'}
-              onCommentClick={() =>
-                authActionWrapper(() => setShowInputComment((v) => !v))
-              }
-              onCommentCountClick={() =>
-                authActionWrapper(() => {
-                  setShowInputComment(true)
-                })
-              }
-              onLikeClick={() =>
-                authActionWrapper(async () => {
-                  if (id) {
-                    const res = await likeUnlikeComment({
-                      commentId: id,
-                      setLike: !liked,
-                      locale,
-                    })
-                    if (res.status === 1) {
-                      setComment((old) => {
-                        return {
-                          ...old,
-                          liked: !liked,
-                          countLikes: old.countLikes + (!liked ? 1 : -1),
-                        }
-                      })
-                    }
-                  }
-                })
-              }
-            />
-            {showInputComment && (
-              <InputCommentBar
-                replyingId={replyingId || comment.id}
-                replyToName={author.name || author.username || ''}
-                isReply
-                onClose={() => setShowInputComment(false)}
-                onPostSuccess={(comment) => {
-                  if (type === 'reply') {
-                    onPostCommentSuccess && onPostCommentSuccess(comment)
-                  } else {
-                    addNewReply(comment)
-                  }
-                }}
-                post={post}
-                replyingUser={author}
-              />
-            )}
-            {type === 'comment' && replies && replies.length > 0 ? (
-              <div className="comment-reply-wrapper">
-                {sortedReplies?.slice(0, maxRepliesShow)?.map((reply) => (
-                  <CardReply
-                    key={reply.id}
-                    comment={reply}
-                    type="reply"
-                    className="comment-reply-item"
-                    level={level + 1}
-                    replyingId={id}
-                    onPostCommentSuccess={addNewReply}
-                    post={post}
-                    onDeleteComment={() => {
-                      setComment((old) => {
-                        return {
-                          ...old,
-                          replies: old.replies.filter((r) => r.id !== reply.id),
-                          countReplies: old.countReplies - 1,
-                        }
-                      })
-                    }}
-                    handleMakeAppointment={handleMakeAppointment}
-                    hasQuickBookingEnable={hasQuickBookingEnable}
-                  />
-                ))}
-                {mergeCountReplies > maxRepliesShow && (
-                  <>
-                    <Divider className="top-divider" type="solid" />
-                    <Button
-                      className="more-cmt"
-                      size="lg"
-                      color="ghost"
-                      onClick={() =>
-                        setMaxRepliesShow((m) => m + COMMENT_LIMIT)
-                      }
-                    >
-                      {t('comment.seeMoreReplies', {
-                        count: mergeCountReplies - maxRepliesShow,
-                      })}
-                      <img className="chevron-right" src={ChevronRightActive} />
-                    </Button>
-                  </>
-                )}
-              </div>
-            ) : null}
-          </>
-        ) : null}
-
-        {hasPopover && (
-          <CardReplyPopover
-            onDeleteComment={onDeleteComment}
-            className="popover"
-            commentId={comment.id}
-          />
-        )}
-      </StyledCardPost>
-    </TogetherAuthConfigContextProvider>
-  )
-}
-
-export { CardReply }

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

@@ -1,5 +0,0 @@
-export { CardPost } from './cardPost'
-export { CardPostPopoverMore } from './cardPost/cardPostPopover'
-export { CardReply } from './cardReply'
-export { CardReplyPopover } from './cardReply/cardReplyPopover'
-export { PopoverMenu } from './popoverMenu'