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

package/raw/src/together/components/molecules/popupDoctor/index.tsx

@@ -1,271 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { theme } from 'misc/theme'
-import { useId } from 'react-id-generator'
-import { LocaleType } from 'src/interfaces/types'
-import { DoctorInfo } from 'src/together/interfaces/types'
-
-import { CARE_PATHS } from '../../../api/paths'
-import {
-  callApi,
-  domainLocales,
-  getCareDoctorUrl,
-  getCareHospitalUrl,
-  getCarePath,
-} from '../../../api/utils'
-import AvatarDefault from '../../../assets/images/avatar-default.png'
-import CloseLight from '../../../assets/svg/closeLight.svg'
-import ReviewerMedical from '../../../assets/svg/reviewer-medical.svg'
-import { Loading } from '../../atoms/loading'
-import {
-  StyledExperienceList,
-  StyledPopup,
-  StyledPopupWrapper,
-  StyledProfileImage,
-  StyledTitleContainer,
-} from './index.styled'
-
-type DoctorExperience = {
-  content: string
-  year: string | number
-}
-
-export type Props = {
-  isOpen: boolean
-  onClose: () => void
-  enableAnimation?: boolean
-  doctorId: string
-  locale?: LocaleType
-  isMobile?: boolean
-}
-
-const PopupDoctor = ({
-  isOpen = true,
-  onClose,
-  enableAnimation = true,
-  doctorId,
-  locale,
-  isMobile,
-}: Props) => {
-  const { t } = useTranslations()
-  const [doctorInfo, setDoctorInfo] = useState<DoctorInfo | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    if (isOpen && doctorId && String(doctorInfo?.id) !== String(doctorId)) {
-      setIsLoading(true)
-      try {
-        setDoctorInfo(null)
-        callApi(
-          getCarePath(CARE_PATHS.GET_DOCTOR_INFO, {
-            doctorId: doctorId,
-            website_url: domainLocales[locale],
-          }),
-
-          'get',
-        ).then((res) => {
-          setDoctorInfo(res?._data.doctor)
-        })
-      } catch (error) {
-        console.error(error)
-      }
-      setIsLoading(false)
-    }
-  }, [isOpen, doctorId, doctorInfo?.id])
-
-  const experiences = doctorInfo?.experiences || []
-
-  const specialty = doctorInfo?.specialties || []
-  const specialtiesList = specialty
-    .map((specialty: any) => specialty?.name || specialty)
-    .join(' • ')
-
-  const formattedExperiences = experiences
-    .map((experience) => {
-      try {
-        return JSON.parse(experience.description)
-      } catch (e) {
-        return experience.description
-      }
-    })
-    .filter((e: DoctorExperience) => e.content)
-
-  const renderExperienceText = (experience: DoctorExperience) => {
-    if (experience?.year) return `${experience.year} ${experience?.content}`
-    if (experience?.content) return experience.content
-    if (typeof experience === 'string') return experience
-    return ''
-  }
-  const idList = useId(doctorInfo?.experiences?.length)
-  return (
-    <>
-      <StyledPopup
-        data-open={isOpen}
-        data-animation={enableAnimation}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {isLoading || !doctorInfo ? (
-          <Loading />
-        ) : (
-          <div className="popup-content">
-            <div className="close-button" onClick={onClose}>
-              <img
-                src={CloseLight}
-                style={{ width: 20, height: 20 }}
-                alt="close-icon"
-              />
-            </div>
-            <div className="main-info">
-              <div className="border-banner"></div>
-              <div className="avatar-title">
-                <StyledProfileImage>
-                  <div className="image-container">
-                    <div style={{ position: 'relative' }}>
-                      <img
-                        src={
-                          doctorInfo?.avatar
-                            ? doctorInfo?.avatar
-                            : AvatarDefault
-                        }
-                        className="profile-image"
-                        alt="avatar"
-                      />
-                      <img
-                        className="badge-avatar"
-                        src={ReviewerMedical}
-                        alt="badge"
-                      />
-                    </div>
-                  </div>
-                </StyledProfileImage>
-                <StyledTitleContainer>
-                  <Text size="s3" type="semiBold" className="full-name">
-                    {doctorInfo?.name}
-                  </Text>
-                  <div className="specialty">
-                    {specialtiesList && (
-                      <>
-                        <Text size="p4" color={theme.colors.gray800}>
-                          {specialtiesList}
-                          {' • '}
-                        </Text>
-                      </>
-                    )}
-
-                    <a
-                      href={getCareHospitalUrl({
-                        id: doctorInfo?.organization?.id,
-                        name: doctorInfo?.organization?.name,
-                        slug: doctorInfo?.organization?.slug,
-                        locale,
-                      })}
-                      className="organisation"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      <Text
-                        size="p4"
-                        className="organisation"
-                        color={theme.colors.gray800}
-                        style={{ textDecoration: 'underline' }}
-                      >
-                        {doctorInfo?.organization.name}
-                      </Text>
-                    </a>
-                  </div>
-                </StyledTitleContainer>
-              </div>
-              {!isMobile && (
-                <div className="btn-wrapper">
-                  <a
-                    href={getCareDoctorUrl({
-                      name: doctorInfo.name,
-                      id: doctorInfo.id,
-                      locale: locale as LocaleType,
-                    })}
-                  >
-                    <Button color="primary" size="md" className="btn-booking">
-                      {t('careBooking.bookAnAppointment')}
-                    </Button>
-                  </a>
-                </div>
-              )}
-            </div>
-            {formattedExperiences && (
-              <StyledTitleContainer>
-                <div className="experience">
-                  <Text
-                    type="bold"
-                    size="s3"
-                    color={theme.colors.gray800}
-                    style={{ paddingBottom: 16 }}
-                  >
-                    {t('expert.content.description').toUpperCase()}
-                  </Text>
-                  <StyledExperienceList>
-                    {formattedExperiences.map(
-                      (experience: DoctorExperience, i: number) => (
-                        <li key={idList[i]}>
-                          <Text size="p2">
-                            {renderExperienceText(experience)}
-                          </Text>
-                        </li>
-                      ),
-                    )}
-                  </StyledExperienceList>
-                  {isMobile ? (
-                    <div className="btn-wrapper">
-                      <a
-                        href={getCareDoctorUrl({
-                          name: doctorInfo.name,
-                          id: doctorInfo.id,
-                          locale: locale as LocaleType,
-                        })}
-                      >
-                        <Button
-                          color="primary"
-                          size="md"
-                          className="btn-booking"
-                        >
-                          {t('careBooking.bookAnAppointment')}
-                        </Button>
-                      </a>
-                    </div>
-                  ) : (
-                    <a
-                      href={getCareDoctorUrl({
-                        name: doctorInfo.name,
-                        id: doctorInfo.id,
-                        locale: locale as LocaleType,
-                      })}
-                    >
-                      <Text
-                        size="s4"
-                        color="#2D87F3"
-                        style={{ paddingTop: 24 }}
-                      >
-                        {t('home.seeExpert')}
-                      </Text>
-                    </a>
-                  )}
-                </div>
-              </StyledTitleContainer>
-            )}
-          </div>
-        )}
-      </StyledPopup>
-      <StyledPopupWrapper
-        data-open={isOpen}
-        onClick={(e) => {
-          e.stopPropagation()
-          onClose()
-        }}
-      />
-    </>
-  )
-}
-
-export { PopupDoctor }

package/raw/src/together/components/molecules/popupExpert/index.styled.tsx

@@ -1,175 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopup = styled.div`
-  position: fixed;
-  left: 50%;
-  width: 343px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 6px;
-  box-shadow: 0px 0px 4px ${(props: ThemeProps) => props.theme.colors.gray200};
-  transform: translate(-50%, -50%);
-  transition: all 0.5s ease-in-out;
-
-  ${MediaQueries.tdUp} {
-    width: 750px;
-  }
-
-  &[data-animation='true'] {
-    transition: all 0.5s ease-in-out;
-  }
-
-  &[data-open='true'] {
-    z-index: 200;
-    top: 50%;
-    opacity: 1;
-    visibility: visible;
-  }
-
-  &[data-open='false'] {
-    top: -50%;
-  }
-
-  .popup-content {
-    ${MediaQueries.mbDown} {
-      display: block;
-    }
-    display: flex;
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    .button-see-more {
-      margin: 32px 0;
-      padding: 0;
-      > * {
-        display: inline-block;
-      }
-    }
-    .close-button {
-      position: absolute;
-      z-index: 100;
-      top: 10px;
-      right: 10px;
-      cursor: pointer;
-      width: unset;
-      height: unset;
-      img {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .main-info {
-    padding-bottom: 32px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-    border-radius: 6px;
-
-    .avatar-title {
-      position: relative;
-      width: 100%;
-      padding-top: 46px;
-      text-align: center;
-    }
-  }
-`
-
-export const StyledPopupWrapper = styled.div`
-  position: fixed;
-  z-index: 110;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  background: rgba(38, 38, 38, 0.3);
-
-  &[data-open='false'] {
-    display: none;
-  }
-`
-
-export const StyledProfileImage = styled.div`
-  .image-container {
-    .badge-avatar {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-    }
-  }
-  display: flex;
-  justify-content: center;
-  padding-bottom: 15px;
-  text-align: center;
-  .profile-image {
-    width: 100px;
-    min-width: 100px;
-    height: 100px;
-    min-height: 100px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-  .badge-avatar {
-    width: 24px;
-    height: 24px;
-  }
-`
-
-export const StyledTitleContainer = styled.div`
-  position: relative;
-  z-index: 9;
-  .specialty {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  padding: 0px 16px;
-  text-align: center;
-  .specialty {
-    justify-content: center;
-  }
-
-  .experience {
-    padding: 16px 0px 32px;
-    text-align: left;
-    .btn-wrapper {
-      margin-top: 24px;
-    }
-  }
-  p {
-    max-width: 100%;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`
-export const StyledSeparator = styled.span`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 0 0.4em;
-  color: ${(props: ThemeProps) => props.theme.colors.neutral300};
-`
-export const StyledDotSeparator = styled.div`
-  display: inline-block;
-  width: 3px;
-  height: 3px;
-  margin: 0;
-  background-color: ${(props: ThemeProps) => props.theme.colors.gray400};
-  border-radius: 50%;
-`
-
-export const StyledItem = styled.div`
-  display: flex;
-  margin-top: 8px;
-
-  .bullet-point {
-    width: 24px;
-    height: 24px;
-  }
-`

package/raw/src/together/components/molecules/popupExpert/index.tsx

@@ -1,216 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Heading } from 'components/atoms/heading'
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { theme } from 'misc/theme'
-
-import { DISCOVER_PATHS } from '../../../api/paths'
-import { callApi, getDiscoverApiPath } from '../../../api/utils'
-import AvatarDefault from '../../../assets/images/avatar-default.png'
-import BulletPoint from '../../../assets/svg/bullet-point.svg'
-import CloseLight from '../../../assets/svg/closeLight.svg'
-import ReviewerAuthor from '../../../assets/svg/reviewer-author.svg'
-import ReviewerEditor from '../../../assets/svg/reviewer-editor.svg'
-import ReviewerExpert from '../../../assets/svg/reviewer-expert.svg'
-import ReviewerFactCheck from '../../../assets/svg/reviewer-fact-check.svg'
-import ReviewerMedical from '../../../assets/svg/reviewer-medical.svg'
-import { Loading } from '../../atoms/loading'
-import {
-  StyledItem,
-  StyledPopup,
-  StyledPopupWrapper,
-  StyledProfileImage,
-  StyledTitleContainer,
-} from './index.styled'
-
-const ReviewerIconMap = {
-  author: ReviewerAuthor,
-  edtior: ReviewerEditor,
-  expert: ReviewerExpert,
-  'fact-check': ReviewerFactCheck,
-  medical: ReviewerMedical,
-}
-
-export type Experience = {
-  title: string
-  organization: string
-  duration: string
-}
-export type ExpertInfo = {
-  avatar?: string
-  role?: string
-  display_name: string
-  specialty: string
-  organisation: string
-  experiences: Array<Experience>
-  organisation_url: string
-  profile_url: string
-  user_id: number
-}
-export type Props = {
-  isOpen: boolean
-  onClose: () => void
-  enableAnimation?: boolean
-  expertId: string
-}
-
-const PopupExpert = ({
-  isOpen = true,
-  onClose,
-  enableAnimation = true,
-  expertId,
-}: Props) => {
-  const { t } = useTranslations()
-  const [expertInfo, setExpertInfo] = useState<ExpertInfo | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    if (
-      isOpen &&
-      expertId &&
-      String(expertInfo?.user_id) !== String(expertId)
-    ) {
-      setIsLoading(true)
-      try {
-        setExpertInfo(null)
-        callApi(
-          getDiscoverApiPath(DISCOVER_PATHS.GET_EXPERT_BY_ID, {
-            id: expertId,
-          }),
-          'get',
-        ).then((res) => {
-          setExpertInfo(res?.data)
-        })
-      } catch (error) {
-        console.error(error)
-      }
-      setIsLoading(false)
-    }
-  }, [isOpen, expertId, expertInfo?.user_id])
-
-  return (
-    <>
-      <StyledPopup
-        data-open={isOpen}
-        data-animation={enableAnimation}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {isLoading || !expertInfo ? (
-          <Loading />
-        ) : (
-          <div className="popup-content">
-            <div className="close-button" onClick={onClose}>
-              <img
-                src={CloseLight}
-                style={{ width: 20, height: 20 }}
-                alt="close-icon"
-              />
-            </div>
-            <div className="main-info">
-              <div className="border-banner"></div>
-              <div className="avatar-title">
-                <StyledProfileImage>
-                  <div className="image-container">
-                    <div style={{ position: 'relative' }}>
-                      <img
-                        src={
-                          expertInfo?.avatar
-                            ? expertInfo?.avatar
-                            : AvatarDefault
-                        }
-                        className="profile-image"
-                        alt="avatar"
-                      />
-                      <img
-                        className="badge-avatar"
-                        src={ReviewerIconMap[expertInfo?.role]}
-                        alt="badge"
-                      />
-                    </div>
-                  </div>
-                </StyledProfileImage>
-                <StyledTitleContainer>
-                  <Text size="s3" className="full-name" type="semiBold">
-                    {expertInfo?.display_name}
-                  </Text>
-                  <div>
-                    <Text size="p4" color={theme.colors.gray800}>
-                      {expertInfo?.specialty}
-                      {' • '}
-                    </Text>
-                    <a
-                      href={expertInfo?.organisation_url}
-                      className="organisation"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      <Text
-                        size="p4"
-                        className="organisation"
-                        color={theme.colors.gray800}
-                        style={{ textDecoration: 'underline' }}
-                      >
-                        {expertInfo?.organisation}
-                      </Text>
-                    </a>
-                  </div>
-                </StyledTitleContainer>
-              </div>
-            </div>
-            <StyledTitleContainer>
-              <div className="experience">
-                <Text
-                  type="bold"
-                  size="p4"
-                  color={theme.colors.gray800}
-                  style={{ paddingBottom: 16 }}
-                >
-                  {t('expert.content.description').toUpperCase()}
-                </Text>
-                <div className="list-items">
-                  {expertInfo?.experiences
-                    ? expertInfo.experiences
-                        .filter((e) => !!(e && (e.title || e.organization)))
-                        .slice(0, 3)
-                        .map((experience, index) => (
-                          <StyledItem key={index}>
-                            <img
-                              className="bullet-point"
-                              src={BulletPoint}
-                              alt="point"
-                            />
-                            <div className="text-contain">
-                              <Heading tag="h6" color={theme.colors.gray800}>
-                                {experience?.title}
-                              </Heading>
-                              <Text size="p2" color={theme.colors.gray500}>
-                                {experience?.organization}
-                              </Text>
-                            </div>
-                          </StyledItem>
-                        ))
-                    : false}
-                </div>
-                <a href={expertInfo?.profile_url}>
-                  <Text size="s4" color="#2D87F3" style={{ paddingTop: 24 }}>
-                    {t('home.seeExpert')}
-                  </Text>
-                </a>
-              </div>
-            </StyledTitleContainer>
-          </div>
-        )}
-      </StyledPopup>
-      <StyledPopupWrapper
-        data-open={isOpen}
-        onClick={(e) => {
-          e.stopPropagation()
-          onClose()
-        }}
-      />
-    </>
-  )
-}
-
-export { PopupExpert }