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

package/src/together/components/molecules/popupFrame/index.styled.tsx

@@ -1,76 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopupFrame = styled.div`
-  [data-type='confirm'] {
-    max-width: 468px;
-    height: 486px;
-    padding: 0;
-
-    .popup-content {
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-
-      .close-button {
-        top: 16px;
-        right: 16px;
-        width: 24px;
-        height: 24px;
-        z-index: 5;
-      }
-
-      .header {
-        display: flex;
-        height: 56px;
-        align-items: center;
-        padding: 16px 56px 16px 32px;
-        border-bottom: 1px solid
-          ${(props: ThemeProps) => props.theme.colors.neutral100};
-        font-weight: 900;
-      }
-
-      .content {
-        overflow: auto;
-        flex: 1;
-        .topic-list-wrapper {
-          padding: 1rem;
-        }
-      }
-    }
-  }
-
-  &.create-post-popup-frame {
-    & > [data-type='confirm'] {
-      height: 80vh;
-      min-height: 486px;
-      transition: all 0.3s ease-in-out;
-      ${MediaQueries.mbDown} {
-        top: 0;
-        left: 0;
-        transform: unset;
-        width: 100vw;
-        max-width: 100vw;
-        min-height: unset;
-        height: 100%;
-      }
-      &[data-open='false'] {
-        transform: translate(-50%, calc(-100vh - 150%));
-      }
-    }
-
-    &.center {
-      .header {
-        justify-content: center;
-      }
-    }
-  }
-
-  > div&[data-open='true'] {
-    z-index: 250;
-    &:last-child {
-      z-index: 200;
-    }
-  }
-`

package/src/together/components/molecules/popupFrame/index.tsx

@@ -1,43 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import { Heading } from 'components/atoms/heading'
-import { Popup } from 'components/molecules/popup'
-
-import IconClose from '../../../assets/svg/icon-close.svg'
-import { StyledPopupFrame } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  closeIcon?: JSX.Element
-  heading?: ReactNode
-  children?: ReactNode
-  isOpen?: boolean
-  onClose?: () => void
-}
-
-export const PopupFrame = ({
-  className,
-  style,
-  closeIcon,
-  heading = '',
-  children,
-  isOpen = false,
-  onClose = () => null,
-}: Props) => {
-  return (
-    <StyledPopupFrame className={className} style={style}>
-      <Popup
-        type="confirm"
-        onClose={onClose}
-        isOpen={isOpen}
-        closeIcon={closeIcon || <img src={IconClose} />}
-      >
-        <div className="header">
-          <Heading tag="h5">{heading}</Heading>
-        </div>
-        <div className="content">{children}</div>
-      </Popup>
-    </StyledPopupFrame>
-  )
-}

package/src/together/components/molecules/popupFrame/popupShare.tsx

@@ -1,178 +0,0 @@
-import React, { CSSProperties, useContext, useEffect, useState } from 'react'
-
-import { Heading } from 'components/atoms/heading'
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries, toggleNoScroll } from 'misc/utils'
-import * as ReactDOM from 'react-dom'
-import styled from 'styled-components'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { PopupFrame } from '.'
-import { ShareBox } from '../shareBox'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  url?: string
-  avatar?: string
-  text?: string
-  onClose?: () => void
-}
-
-export const SharePopup = ({
-  className,
-  style,
-  url,
-  avatar,
-  text,
-  onClose,
-}: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [isOpen, setIsOpen] = useState(false)
-
-  useEffect(() => {
-    toggleNoScroll(true)
-    setTimeout(() => setIsOpen(true), 0)
-    return () => toggleNoScroll(false)
-  }, [])
-  return ReactDOM.createPortal(
-    <StyledSharePopup
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-    >
-      <PopupFrame
-        className="share-popup"
-        isOpen={isOpen}
-        onClose={onClose}
-        heading={t('bottomBar.share')}
-      >
-        {isMarryBaby ? (
-          <Text className="share-mb-text" size="sm">
-            {t('article.shareOn')}
-          </Text>
-        ) : (
-          <div className="custom-share__header">
-            {avatar && (
-              <div className="custom-share__header-image">
-                <img src={avatar} />
-              </div>
-            )}
-            <div className="custom-share__header-info">
-              <Heading tag="h4">{text}</Heading>
-              <Text className="desc" size="md">
-                {url}
-              </Text>
-            </div>
-          </div>
-        )}
-
-        {isOpen && (
-          <ShareBox
-            shareUrl={
-              url || (typeof window !== 'undefined' ? window.location.href : '')
-            }
-            title={text}
-          />
-        )}
-      </PopupFrame>
-    </StyledSharePopup>,
-    document.body,
-  )
-}
-
-export const StyledSharePopup = styled.div`
-  .share-popup {
-    > div:first-child {
-      height: unset;
-    }
-    .close-button {
-      display: none;
-    }
-    .popup-content .header {
-      display: none;
-    }
-  }
-  .custom-share__header {
-    display: flex;
-    flex-wrap: no-wrap;
-    align-items: center;
-    padding: 1rem;
-    border-bottom: 1px solid
-      ${(props: ThemeProps) => props.theme.colors.neutral100};
-    margin-bottom: 16px;
-
-    .custom-share__header-image {
-      width: 38px;
-      height: 38px;
-      flex-shrink: 0;
-      & > img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-      }
-    }
-
-    .custom-share__header-info {
-      flex: 1;
-      padding: 0 8px;
-      word-break: break-word;
-
-      [data-tag='h4'] {
-        margin-bottom: 8px;
-        font-size: 14px;
-        font-weight: bold;
-        line-height: 14px;
-      }
-
-      [data-size='md'] {
-        color: #a5a5a5;
-        font-size: 14px;
-        line-height: 14px;
-      }
-    }
-  }
-
-  &[data-is-marrybaby='true'] {
-    .share-popup {
-      > div:first-child {
-        overflow: hidden;
-        border-radius: 1rem;
-        &[data-open='true'] {
-          ${MediaQueries.mbDown} {
-            max-width: unset;
-            width: 100%;
-            top: 100%;
-            transform: translate(-50%, -100%);
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-      }
-      .close-button {
-        display: block;
-      }
-      .popup-content {
-        .header {
-          display: block;
-          padding: 1rem;
-          background-color: rgb(243, 243, 243);
-        }
-        .content {
-          padding-bottom: 1rem;
-        }
-      }
-      .share-mb-text {
-        margin: 1rem 1rem 0.5rem;
-      }
-    }
-  }
-`

package/src/together/components/molecules/popupHospital/index.styled.tsx

@@ -1,173 +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;
-    .btn-booking {
-      display: flex;
-      margin: 12px auto;
-    }
-    .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: block;
-    min-width: 240px;
-  }
-
-  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%;
-  }
-`
-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/src/together/components/molecules/popupHospital/index.tsx

@@ -1,249 +0,0 @@
-import React, { useEffect, useMemo, 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 { LocaleType } from 'src/interfaces/types'
-
-import { CARE_PATHS } from '../../../api/paths'
-import {
-  callApi,
-  domainLocales,
-  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 {
-  StyledPopup,
-  StyledPopupWrapper,
-  StyledProfileImage,
-  StyledTitleContainer,
-} from './index.styled'
-
-export type Specialy = {
-  id: string
-  name: string
-  slug: string
-  thumbnail?: string
-}
-
-export type HospitalInfo = {
-  name: string
-  about?: string
-  specialties?: Array<Specialy>
-  logo?: string
-  address?: string
-  city_id?: number
-  total_available_doctor?: number
-  total_available_service?: number
-  slug: string
-  id: number
-}
-export type Props = {
-  isOpen: boolean
-  onClose: () => void
-  enableAnimation?: boolean
-  hospitalId: string
-  locale?: LocaleType
-  isMobile?: boolean
-}
-
-const PopupHospital = ({
-  isOpen = true,
-  onClose,
-  enableAnimation = true,
-  hospitalId,
-  locale,
-  isMobile,
-}: Props) => {
-  const { t } = useTranslations()
-  const [hospitalInfo, setHospitalInfo] = useState<HospitalInfo | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    if (
-      isOpen &&
-      hospitalId &&
-      String(hospitalInfo?.id) !== String(hospitalId)
-    ) {
-      setIsLoading(true)
-      try {
-        setHospitalInfo(null)
-        callApi(
-          getCarePath(CARE_PATHS.GET_HOSPITAL_INFO, {
-            hospital_branch_id: hospitalId,
-            website_url: domainLocales[locale],
-          }),
-          'get',
-        ).then((res) => {
-          setHospitalInfo(res?._data.branch)
-        })
-      } catch (error) {
-        console.error(error)
-      }
-      setIsLoading(false)
-    }
-  }, [isOpen, hospitalId, hospitalInfo?.id])
-  const specialties = hospitalInfo?.specialties || []
-  const formatSpecialties: string[] = useMemo(
-    () => specialties.map((specialty: any) => specialty.name),
-    [specialties],
-  )
-
-  return (
-    <>
-      <StyledPopup
-        data-open={isOpen}
-        data-animation={enableAnimation}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {isLoading || !hospitalInfo ? (
-          <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={
-                          hospitalInfo?.logo
-                            ? hospitalInfo?.logo
-                            : 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">
-                    {hospitalInfo?.name}
-                  </Text>
-                  <div className="specialty">
-                    {specialties && (
-                      <Text size="p4" color={theme.colors.gray800}>
-                        {formatSpecialties.join(' • ')}
-                        {'•'}
-                      </Text>
-                    )}
-
-                    <a
-                      href={getCareHospitalUrl({
-                        id: hospitalInfo.id,
-                        name: hospitalInfo.name,
-                        slug: hospitalInfo.slug,
-                        locale,
-                      })}
-                      className="organisation"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      <Text
-                        size="p4"
-                        className="organisation"
-                        color={theme.colors.gray800}
-                        style={{ textDecoration: 'underline' }}
-                      >
-                        {hospitalInfo?.name}
-                      </Text>
-                    </a>
-                  </div>
-                </StyledTitleContainer>
-              </div>
-              {!isMobile && (
-                <a
-                  href={getCareHospitalUrl({
-                    id: hospitalInfo.id,
-                    name: hospitalInfo.name,
-                    slug: hospitalInfo.slug,
-                    locale,
-                  })}
-                >
-                  <div className="btn-wrapper">
-                    <Button color="primary" size="md" className="btn-booking">
-                      {t('careBooking.bookAnAppointment')}
-                    </Button>
-                  </div>
-                </a>
-              )}
-            </div>
-
-            <StyledTitleContainer>
-              <div className="experience">
-                <Text
-                  type="bold"
-                  size="s3"
-                  color={theme.colors.gray800}
-                  style={{ paddingBottom: 16 }}
-                >
-                  {t('hospital.content.description').toUpperCase()}
-                </Text>
-                <Text size="p2" color={theme.colors.gray500}>
-                  {hospitalInfo.about}
-                </Text>
-                {isMobile ? (
-                  <a
-                    href={getCareHospitalUrl({
-                      id: hospitalInfo.id,
-                      name: hospitalInfo.name,
-                      slug: hospitalInfo.slug,
-                      locale,
-                    })}
-                  >
-                    <div className="btn-wrapper">
-                      <Button color="primary" size="md" className="btn-booking">
-                        {t('careBooking.bookAnAppointment')}
-                      </Button>
-                    </div>
-                  </a>
-                ) : (
-                  <a
-                    href={getCareHospitalUrl({
-                      id: hospitalInfo.id,
-                      name: hospitalInfo.name,
-                      slug: hospitalInfo.slug,
-                      locale,
-                    })}
-                  >
-                    <Text size="s4" color="#2D87F3" style={{ paddingTop: 24 }}>
-                      {t('home.seeHospital')}
-                    </Text>
-                  </a>
-                )}
-              </div>
-            </StyledTitleContainer>
-          </div>
-        )}
-      </StyledPopup>
-      <StyledPopupWrapper
-        data-open={isOpen}
-        onClick={(e) => {
-          e.stopPropagation()
-          onClose()
-        }}
-      />
-    </>
-  )
-}
-
-export { PopupHospital }