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

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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,314 @@
+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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,73 @@
+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%;
+  }
+`