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

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

@@ -1,164 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledCardAuthor = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-  a {
-    text-decoration: none;
-  }
-  .button-more {
-    display: flex;
-    width: 20px;
-    height: 20px;
-    align-items: center;
-    justify-content: center;
-    .button-more-icon {
-      height: 13px;
-      vertical-align: middle;
-    }
-  }
-  .temp-avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props: ThemeProps) =>
-      props.theme.colors.secondaryBase};
-    border-radius: 50%;
-    color: white;
-    font-weight: bold;
-  }
-
-  .author-info {
-    flex: 1;
-    margin-left: 0.5rem;
-    .author-info-top {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
-    .author-info-text-wrapper {
-      display: flex;
-      min-width: 0px;
-      flex: 1 1 0%;
-      align-items: center;
-    }
-    .author-name {
-      overflow: hidden;
-      font-weight: 600;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .author-time {
-      flex-shrink: 0;
-    }
-    .author-role {
-      height: 1rem;
-      flex-shrink: 0;
-      padding: 0 0.5rem;
-      margin-left: 4px;
-      border-radius: 1rem;
-      color: white;
-      font-size: 8px;
-      font-weight: 600;
-      line-height: 1rem;
-      &[data-label-type='admin'] {
-        background: ${(props: ThemeProps) => props.theme.colors.blue800};
-      }
-      &[data-label-type='local admin'] {
-        background: ${(props: ThemeProps) => props.theme.colors.blue800};
-      }
-      &[data-label-type='ambassador'] {
-        background: ${(props: ThemeProps) => props.theme.colors.green400};
-      }
-      &[data-label-type='expert'] {
-        background: ${(props: ThemeProps) => props.theme.colors.red400};
-      }
-      &[data-label-type='moderator'] {
-        background: ${(props: ThemeProps) => props.theme.colors.yellow800};
-      }
-      &[data-label-type='sponsor'] {
-        background: ${(props: ThemeProps) => props.theme.colors.teal400};
-      }
-      &[data-label-type='guide'] {
-        background: ${(props: ThemeProps) => props.theme.colors.teal400};
-      }
-      &[data-label-type='influencer'] {
-        background: ${(props: ThemeProps) => props.theme.colors.teal400};
-      }
-    }
-  }
-  .author-community {
-    .text-container {
-      color: ${(props: ThemeProps) => props.theme.colors.gray500};
-      font-weight: 600;
-      font-size: 12px;
-      line-height: 20px;
-      .time-text {
-        font-size: 11px;
-        font-weight: normal;
-      }
-      a {
-        color: inherit;
-      }
-    }
-  }
-  .expert-wrapper {
-    width: 100%;
-  }
-  &[data-is-booking='true'] {
-    display: grid;
-    background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-    .btn-wrapper {
-      padding: 0 16px;
-      .btn-booking {
-        width: 100%;
-        margin: 12px 0;
-      }
-    }
-  }
-  &[data-is-marrybaby='true'] {
-    align-items: unset;
-    .author-info {
-      margin-left: 1rem;
-      ${MediaQueries.mbDown} {
-        margin-left: 0.5rem;
-      }
-      .author-info-text-wrapper {
-        flex-wrap: wrap;
-      }
-      .author-time {
-        margin-left: 0.4rem;
-        font-size: 14px;
-      }
-    }
-    .author-community {
-      .text-container {
-        font-size: 12px;
-        line-height: 20px;
-      }
-      .author-community-name {
-        color: ${(props: ThemeProps) => props.theme.mbColors.cobalt};
-        font-weight: 500;
-      }
-    }
-  }
-`
-export const StyledKebabIcon = styled.img`
-  width: 20px;
-  height: 20px;
-  margin-left: 0.5rem;
-  cursor: pointer;
-  object-fit: contain;
-`
-export const StyledAvatarContainer = styled.div`
-  position: relative;
-  .mini-icon {
-    position: absolute;
-    right: 1.2px;
-    bottom: 1.2px;
-  }
-`

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

@@ -1,314 +0,0 @@
-import React, {
-  CSSProperties,
-  MouseEventHandler,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-
-import { Avatar } from 'components/atoms/avatar'
-import { Button } from 'components/atoms/button'
-import { Text } from 'components/atoms/text'
-import { format, formatDistanceToNow } from 'date-fns'
-import enUS from 'date-fns/locale/en-US'
-import hi from 'date-fns/locale/hi'
-import id from 'date-fns/locale/id'
-import ms from 'date-fns/locale/ms'
-import th from 'date-fns/locale/th'
-import vi from 'date-fns/locale/vi'
-import zhTW from 'date-fns/locale/zh-TW'
-import { useTranslations } from 'hooks/useTranslations'
-import { TranslationsKey } from 'i18n/translations'
-import { toggleNoScroll } from 'misc/utils'
-import { domainLocales } from 'src/interfaces/constants'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { Community, Role } from '../../../interfaces/types'
-import { UserAvatar } from '../../atoms/userAvatar'
-import { PopupDoctor } from '../popupDoctor'
-import { PopupExpert } from '../popupExpert'
-import { PopupHospital } from '../popupHospital'
-import my from './customMMLocale'
-import { StyledAvatarContainer, StyledCardAuthor } from './index.styled'
-
-export const AuthorLabelTextMapping: { [k in Role]?: string } = {
-  admin: 'cardAuthor.admin',
-  moderator: 'cardAuthor.moderator',
-  ambassador: 'cardAuthor.ambassador',
-  expert: 'cardAuthor.expert',
-  sponsor: 'cardAuthor.sponsor',
-  'local-admin': 'cardAuthor.localAdmin',
-  guide: 'cardAuthor.guide',
-  influencer: 'cardAuthor.influencer',
-}
-
-const looselyMatchRole = (role: string): Role | undefined => {
-  const allRoles: Role[] = [
-    'admin',
-    'moderator',
-    'ambassador',
-    'expert',
-    'sponsor',
-    'local-admin',
-    'guide',
-    'influencer',
-  ]
-  return (
-    allRoles.find((r) => r === role) ||
-    allRoles.find((r) => role.includes(r)) ||
-    allRoles.find((r) => r.includes(role))
-  )
-}
-
-export type Props = {
-  userId?: number
-  time?: string
-  miniIcon?: string
-  className?: string
-  style?: CSSProperties
-  name?: string
-  username?: string
-  email?: string
-  url?: string
-  avatar?: string
-  postId?: string
-  community?: Community
-  type?: 'post' | 'comment' | 'reply' | 'most-engaging'
-  role?: Role
-  expertId?: string
-  doctorId?: string
-  hospitalId?: string
-  isMarryBaby?: boolean
-  title?: string
-  hasQuickBooking?: boolean
-  handleMakeAppointment?: (doctorId?: string, hospitalId?: string) => void
-}
-
-export const locales: { [key: string]: Locale } = {
-  'vi-VN': vi,
-  'id-ID': id,
-  'ms-MY': ms,
-  'km-KH': enUS,
-  'en-PH': enUS,
-  'th-TH': th,
-  'my-MM': my,
-  'zh-TW': zhTW,
-  'hi-IN': hi,
-}
-
-const CardAuthor = ({
-  // userId,
-  time,
-  className,
-  community,
-  name,
-  username,
-  url,
-  avatar,
-  miniIcon,
-  role,
-  style,
-  type = 'post',
-  expertId,
-  isMarryBaby: isMarryBabyProp,
-  title,
-  doctorId,
-  hospitalId,
-  hasQuickBooking,
-  handleMakeAppointment,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      router,
-      env: { isMarryBaby: isMarryBabyContext, togetherBasePath },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const isMarryBaby =
-    typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext
-  const displayName = name || username || ''
-  const matchedRole = role ? looselyMatchRole(role) : ''
-  const { t } = useTranslations()
-  const cleanedTimeDate = time
-    ? !isNaN(new Date(time).getTime())
-      ? new Date(time)
-      : null
-    : null
-  const timeText = cleanedTimeDate
-    ? formatDistanceToNow(cleanedTimeDate, {
-        locale: locales[locale],
-      })
-    : time
-  const timeTextTitle = cleanedTimeDate
-    ? format(cleanedTimeDate, 'dd/MM/yyyy HH:mm')
-    : time
-
-  const [openPopupExpert, setOpenPopupExpert] = useState(false)
-
-  const { asPath } = router || {}
-  const currentUrl = `https://${domainLocales[locale]}${asPath}`
-
-  const onAuthorClick: MouseEventHandler<HTMLDivElement> = (e) => {
-    if (role === 'expert' && (expertId || doctorId || hospitalId)) {
-      e.stopPropagation()
-      setOpenPopupExpert(true)
-    } else if (url) {
-      window.location.href = url
-    }
-  }
-
-  useEffect(() => {
-    toggleNoScroll(openPopupExpert)
-  }, [openPopupExpert])
-
-  return (
-    <>
-      {role === 'expert' && expertId ? (
-        <PopupExpert
-          isOpen={openPopupExpert}
-          onClose={() => setOpenPopupExpert(false)}
-          expertId={expertId}
-        ></PopupExpert>
-      ) : null}
-      {role === 'expert' && doctorId ? (
-        <PopupDoctor
-          isOpen={openPopupExpert}
-          onClose={() => setOpenPopupExpert(false)}
-          doctorId={doctorId}
-          locale={locale}
-        ></PopupDoctor>
-      ) : null}
-      {role === 'expert' && hospitalId ? (
-        <PopupHospital
-          isOpen={openPopupExpert}
-          onClose={() => setOpenPopupExpert(false)}
-          hospitalId={hospitalId}
-          locale={locale}
-        ></PopupHospital>
-      ) : null}
-      <StyledCardAuthor
-        data-is-marrybaby={isMarryBaby}
-        className={className}
-        style={style}
-        data-is-booking={hasQuickBooking}
-      >
-        <div style={{ display: 'flex', width: '100%' }}>
-          <a>
-            <StyledAvatarContainer onClick={onAuthorClick}>
-              <UserAvatar
-                className="author-avatar-wrapper"
-                username={displayName}
-                avatar={avatar}
-              />
-              {miniIcon ? (
-                <Avatar
-                  className="mini-icon"
-                  type="rounded"
-                  avatarImg={
-                    <img
-                      src={miniIcon}
-                      style={{
-                        width: '12px',
-                        height: '12px',
-                        objectFit: 'cover',
-                      }}
-                      alt="badge"
-                    />
-                  }
-                />
-              ) : null}
-            </StyledAvatarContainer>
-          </a>
-          <div className="expert-wrapper">
-            <div className="author-info">
-              <div className="author-info-top">
-                <div
-                  onClick={onAuthorClick}
-                  className="author-info-text-wrapper"
-                >
-                  <Text className="author-name" size="p3">
-                    {displayName}
-                  </Text>
-                  {matchedRole && AuthorLabelTextMapping[matchedRole] && (
-                    <div className="author-role" data-label-type={matchedRole}>
-                      {title ||
-                        t(
-                          AuthorLabelTextMapping[
-                            matchedRole
-                          ] as TranslationsKey,
-                        )}
-                    </div>
-                  )}
-                  {isMarryBaby ? (
-                    <Text
-                      size="p4"
-                      type="regular"
-                      color="#9495A0"
-                      title={timeTextTitle}
-                      className="author-time"
-                    >
-                      {`${type === 'post' ? '• ' : ''}${timeText}`}
-                    </Text>
-                  ) : null}
-                </div>
-                {!isMarryBaby && type !== 'post' ? (
-                  <Text
-                    size="p4"
-                    type="regular"
-                    color="#595959"
-                    style={{ lineHeight: '20px' }}
-                    title={timeTextTitle}
-                  >
-                    {timeText}
-                  </Text>
-                ) : null}
-              </div>
-              {type === 'post' ? (
-                <div className="author-community">
-                  <Text className="text-container" size="p4">
-                    <a
-                      href={
-                        community?.slug &&
-                        community.isActive &&
-                        !community.isHidden
-                          ? `${togetherBasePath}/${community?.slug}`
-                          : undefined
-                      }
-                      className="author-community-name"
-                    >
-                      {`${isMarryBaby ? '/' : ''}${community?.name}`}
-                    </a>
-                    {(isMarryBaby ? undefined : timeText) ? ' • ' : ''}
-                    <span className="time-text">
-                      {isMarryBaby ? undefined : timeText}
-                    </span>
-                  </Text>
-                </div>
-              ) : null}
-            </div>
-          </div>
-        </div>
-        {hasQuickBooking && (
-          <div className="btn-wrapper">
-            <Button
-              color="primary"
-              size="md"
-              className="btn-booking"
-              onClick={(e) => {
-                handleMakeAppointment?.(doctorId, hospitalId)
-                e.stopPropagation()
-              }}
-              dataEventCategory="Care"
-              dataEventAction="Comment - Quick Booking"
-              dataEventLabel={currentUrl}
-            >
-              {t('careBooking.bookAnAppointment')}
-            </Button>
-          </div>
-        )}
-      </StyledCardAuthor>
-    </>
-  )
-}
-
-export { CardAuthor }

package/src/together/components/molecules/createNewPostContent/index.stories.tsx

@@ -1,114 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
-
-import { CreateNewPostContent, Props } from '.'
-import {
-  TogetherComponentGlobalContextProvider,
-  Props as ComponentGlobalProps,
-} from '../../../togetherComponentGlobalContext'
-
-import 'react-quill/dist/quill.snow.css'
-
-export default {
-  component: CreateNewPostContent,
-  title: 'Projects/Together/Molecules/CreateNewPost',
-}
-
-const StoryWrapper = styled.div`
-  width: 368px;
-  padding: 16px;
-  border: 1px gray;
-`
-
-type TemplateProps = Props & {
-  global: ComponentGlobalProps
-}
-
-const Template: Story<TemplateProps> = ({ global, ...rest }: TemplateProps) => {
-  // for testing auth
-  // useEffect(() => {
-  //   setCookie(
-  //     BEARER_TOKEN_COOKIE,
-  //     '',
-  //   )
-  // }, [])
-  return (
-    <TogetherComponentGlobalContextProvider {...global}>
-      <StoryWrapper>
-        <CreateNewPostContent {...rest} />
-      </StoryWrapper>
-    </TogetherComponentGlobalContextProvider>
-  )
-}
-
-const 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/',
-    },
-  },
-  forceSelectCommunity: {
-    name: 'test',
-    mappedCategoryId: 56808,
-  },
-  forceSelectTopics: [
-    {
-      name: 'test2',
-      mappedCategoryId: 47381,
-    },
-    // {
-    //   name: 'test3',
-    //   categoryId: String(57418),
-    // },
-  ],
-  articleId: '392692',
-  onClose: () => console.log('close'),
-  optionalTopic: true,
-}
-
-export const HelloSites = Template.bind({})
-HelloSites.args = {
-  ...baseProps,
-}

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

@@ -1,73 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledCreateNewPost = styled.div`
-  position: relative;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  padding: 16px 32px;
-
-  .input-group-container {
-    flex: 1;
-    padding-right: 2px;
-    padding-left: 2px;
-    margin-bottom: 0.5rem;
-    -ms-overflow-style: none; /* IE and Edge */
-    overflow-y: auto;
-    scrollbar-width: none; /* Firefox */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .input-group {
-    :not(:last-child) {
-      margin-bottom: 0.6rem;
-    }
-
-    input:focus,
-    textarea:focus,
-    [contenteditable='true'] {
-      outline: none;
-    }
-
-    label {
-      margin-bottom: 5px;
-      color: ${(props: ThemeProps) => props.theme.colors.gray600};
-      /* font-family: 'Open Sans', sans-serif; */
-      font-size: 13px;
-      font-weight: bold;
-    }
-
-    .input-group-label {
-      margin-bottom: 5px;
-      color: ${(props: ThemeProps) => props.theme.colors.gray600};
-      /* font-family: 'Open Sans', sans-serif; */
-      font-size: 13px;
-      font-weight: bold;
-    }
-
-    .input-notification {
-      display: flex;
-
-      & > img {
-        width: 16px;
-        height: 16px;
-        margin-top: 1.5px;
-        margin-right: 8px;
-      }
-    }
-
-    .tag-list {
-    }
-  }
-
-  .warning {
-    margin-top: 16px;
-  }
-
-  .submit-btn {
-    width: 100%;
-  }
-`