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

package/src/care/components/organisms/bookingSearchBar/resultSection/index.stories.tsx

@@ -1,155 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { ResultSection, Props } from '.'
-import { TranslationsProvider } from '../../../../../i18n/translationsProvider'
-import { initialState } from '../reducer'
-
-export default {
-  component: ResultSection,
-  title: 'Projects/Care/Organisms/BookingSearchBar/ResultSection',
-}
-
-const Template: Story<Props> = (args) => (
-  <TranslationsProvider locale={'en-PH'}>
-    <ResultSection {...args} />
-  </TranslationsProvider>
-)
-
-const baseProps: Partial<Props> = {
-  state: initialState,
-  dispatch: (action) => console.log('dispatch', action),
-}
-
-export const Service = Template.bind({})
-Service.args = {
-  ...baseProps,
-  type: 'services',
-}
-
-export const Specialty = Template.bind({})
-Specialty.args = {
-  ...baseProps,
-  type: 'specialties',
-}
-
-const clinicArgs = {
-  ...baseProps,
-  type: 'hospitals',
-  itemsToShow: 2,
-  keyword: 'Clin',
-  itemsToShowDesktop: 4,
-  data: [
-    {
-      id: 1390,
-      name: 'Las Pi\u00f1as District Hospital',
-      slug: 'las-pinas-district-hospital',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/las-pinas-district-hospital20220211.png',
-    },
-    {
-      id: 1343,
-      name: 'A Zarate General Hospital',
-      slug: 'a-zarate-general-hospital',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/a-zarate-general-hospital20220211.png',
-    },
-    {
-      id: 1314,
-      name: 'Perpetual Help Medical Center - Las Pi\u00f1as Hospital',
-      slug: 'perpetual-help-medical-center-las-pinas-hospital',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/perpetual-help-medical-center-las-pinas-hospital20220211.png',
-    },
-    {
-      id: 1391,
-      name: 'Las Pi\u00f1as Doctors Hospital',
-      slug: 'las-pinas-doctors-hospital',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/las-pinas-doctors-hospital20220211.png',
-    },
-    {
-      id: 1282,
-      name: 'Las Pi\u00f1as Doctors Hospital, Inc.',
-      slug: 'las-pinas-doctors-hospital-inc',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/las-pinas-doctors-hospital-inc20220211.png',
-    },
-    {
-      id: 313,
-      name: 'Gat Andres Bonifacio Memorial Medical Center',
-      slug: 'gat-andres-bonifacio-memorial-medical-center',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/gat-andres-bonifacio-memorial-medical-center20220211.png',
-    },
-    {
-      id: 1288,
-      name: 'Mary Johnston Hospital, Inc.',
-      slug: 'mary-johnston-hospital-inc',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/mary-johnston-hospital-inc20220211.png',
-    },
-    {
-      id: 1492,
-      name: 'Tondo Medical Center',
-      slug: 'tondo-medical-center',
-      logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/ph/tondo-medical-center20220211.png',
-    },
-  ],
-}
-
-export const ClinicDesktop = Template.bind({})
-ClinicDesktop.args = {
-  ...baseProps,
-  ...clinicArgs,
-  isMobile: false,
-}
-
-export const ClinicMobile = Template.bind({})
-ClinicMobile.args = {
-  ...baseProps,
-  ...clinicArgs,
-  isMobile: true,
-}
-
-export const DoctorsDesktop = Template.bind({})
-DoctorsDesktop.args = {
-  ...baseProps,
-  data: [
-    {
-      id: 347,
-      name: 'BS.CKI Nguy\u1ec5n Th\u1ecb H\u1ed3ng Th\u00ea',
-      slug: 'bscki-nguyen-thi-hong-the',
-      avatar: 'https://unsplash.it/64',
-    },
-    {
-      id: 348,
-      name: 'BS.CKI Nguy\u1ec5n Th\u1ecb Kim Tr\u00e2n',
-      slug: 'bscki-nguyen-thi-kim-tran',
-      avatar: 'https://unsplash.it/64',
-    },
-    {
-      id: 343,
-      name: 'ThS.BS Nguy\u1ec5n Ch\u00ed Th\u00e0nh',
-      slug: 'thsbs-nguyen-chi-thanh',
-      avatar: 'https://unsplash.it/64',
-    },
-    {
-      id: 340,
-      name: 'BS.CKI Nguy\u1ec5n Th\u00e0nh \u0110\u00f4ng',
-      slug: 'bscki-nguyen-thanh-dong',
-      avatar: 'https://unsplash.it/64',
-    },
-    {
-      id: 531,
-      name: 'BS Nguy\u1ec5n \u0110\u0103ng Khoa',
-      slug: 'bs-nguyen-dang-khoa',
-      avatar: 'https://unsplash.it/64',
-    },
-    {
-      id: 367,
-      name: 'BS.Nguy\u1ec5n Th\u1ecb Ki\u1ec1u Ti\u00ean',
-      slug: 'bsnguyen-thi-kieu-tien',
-      avatar: 'https://unsplash.it/64',
-    },
-  ],
-  type: 'doctors',
-  isMobile: false,
-  itemsToShow: 2,
-  itemsToShowDesktop: 4,
-  keyword: 'Doc',
-}

package/src/care/components/organisms/bookingSearchBar/resultSection/index.styled.ts

@@ -1,89 +0,0 @@
-import { Text } from 'components/atoms'
-import { theme } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledTypeHeader = styled.header`
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 24px;
-  background-color: ${theme.colors.neutral50};
-  box-shadow: inset 0px 1px 0px #e4e8ec;
-`
-
-export const StyledInfoWrapper = styled.div`
-  display: grid;
-  flex: 2;
-  align-items: center;
-  gap: 16px;
-  grid-template-columns: 16px 1fr;
-`
-
-export const StyledTypeName = styled.p`
-  color: ${theme.colors.neutral800};
-  font-size: 14px;
-  font-weight: ${theme.sizes.fwSemiBold};
-  letter-spacing: -0.2px;
-  line-height: 22px;
-`
-
-export const StyledSeeMoreButton = styled.button`
-  flex: 1;
-  cursor: pointer;
-  text-align: end;
-`
-
-export const StyledResultsContainer = styled.section`
-  padding: 12px 16px;
-  --rowGap: 16px;
-  --graphicSize: 32px;
-
-  ${MediaQueries.tdUp} {
-    --rowGap: 8px;
-  }
-`
-
-export const StyledItemsWrapper = styled.ul<{
-  isShown?: boolean
-  isMore?: boolean
-}>`
-  --gap: 16px;
-  ${MediaQueries.tdUp} {
-    --gap: 8px;
-  }
-
-  display: grid;
-  overflow: hidden;
-  gap: var(--gap);
-  transition: max-height 0.8s ease-out;
-
-  ${({ isMore }) =>
-    isMore &&
-    `
-     height: auto;
-     max-height: 0;
-     margin-top: var(--gap);
-   `}
-
-  ${({ isShown }) =>
-    isShown &&
-    `
-     max-height: 600px;
-    `}
-
-@media (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  ${MediaQueries.tdUp} {
-    grid-template-columns: 1fr 1fr;
-  } ;
-`
-
-export const StyledSeeMore = styled(Text)`
-  margin-top: 12px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  text-align: start;
-  text-transform: capitalize;
-`

package/src/care/components/organisms/bookingSearchBar/resultSection/index.tsx

@@ -1,234 +0,0 @@
-import React, { useState, Dispatch, useMemo } from 'react'
-
-import {
-  Action,
-  ActionTypes,
-  ReducerState,
-} from 'care/components/organisms/bookingSearchBar/reducer'
-import { LOCALIZED_SLUGS } from 'care/interfaces/constants'
-import { Text } from 'components/atoms'
-import { useTranslations } from 'hooks/useTranslations'
-import { theme } from 'misc/theme'
-import Skeleton from 'react-loading-skeleton'
-
-import { SearchBarSectionItemApi } from '../../../../interfaces/types'
-import { SEARCH_KEYWORD_MIN_LENGTH } from '../constants'
-import { ResultSectionItem } from '../resultSectionItem'
-import {
-  StyledImageSkeletonWrapper,
-  StyledPictureWrapper,
-  StyledResult,
-} from '../resultSectionItem/index.styled'
-import { DoctorIcon, HospitalIcon, ServiceIcon, SpecialtyIcon } from './icons'
-import {
-  StyledInfoWrapper,
-  StyledItemsWrapper,
-  StyledResultsContainer,
-  StyledSeeMore,
-  StyledSeeMoreButton,
-  StyledTypeHeader,
-  StyledTypeName,
-} from './index.styled'
-
-export type Props = {
-  type: 'specialties' | 'services' | 'hospitals' | 'doctors'
-  data: SearchBarSectionItemApi[]
-  state: ReducerState
-  dispatch: Dispatch<Action>
-  itemsToShow: number
-  itemsToShowDesktop: number
-  keyword: string
-  isMobile: boolean
-  isLoading?: boolean
-}
-
-const ResultSection = ({
-  type,
-  data,
-  state,
-  dispatch,
-  itemsToShow,
-  itemsToShowDesktop,
-  isMobile,
-  isLoading,
-  keyword,
-}: Props) => {
-  const [seeMoreOpen, setSeeMoreOpen] = useState(false)
-  const { t, locale } = useTranslations()
-  const { selectedLocation, searchKeywords } = state
-
-  const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale])
-
-  const typeInformation: {
-    [key in Props['type']]: {
-      name: string
-      icon: React.ReactNode
-      slug: string
-    }
-  } = useMemo(() => {
-    return {
-      doctors: {
-        name: t('booking.searchPopup.doctors'),
-        icon: <DoctorIcon />,
-        slug: slugs.DOCTOR,
-      },
-      services: {
-        name: t('booking.searchPopup.services'),
-        icon: <ServiceIcon />,
-        slug: slugs.SERVICE,
-      },
-      hospitals: {
-        name: t('booking.searchPopup.hospitals'),
-        icon: <HospitalIcon />,
-        slug: slugs.HOSPITAL,
-      },
-      specialties: {
-        name: t('booking.searchPopup.specialties'),
-        icon: <SpecialtyIcon />,
-        slug: slugs.SPECIALTIES,
-      },
-    }
-  }, [type, slugs])
-
-  const typeSlug = useMemo(() => typeInformation[type].slug, [typeInformation])
-
-  const showItemCount = isMobile ? itemsToShow : itemsToShowDesktop
-
-  function onClickItem(item: SearchBarSectionItemApi) {
-    let url = ''
-    switch (type) {
-      case 'specialties':
-        url = `/${selectedLocation.slug}/${typeInformation.doctors.slug}/${item.slug}`
-        break
-      case 'services':
-        url = `/${selectedLocation.slug}/${typeSlug}/${item.slug}`
-        break
-      case 'doctors':
-      case 'hospitals':
-        url = `/${typeSlug}/${item.slug}-${item.id}`
-        break
-    }
-    if (url) {
-      dispatch({
-        type: ActionTypes.SelectSearchResult,
-        payload: { name: item.name, url },
-      })
-    }
-  }
-
-  function renderItem(item: SearchBarSectionItemApi) {
-    return (
-      <ResultSectionItem
-        key={item.id}
-        item={item}
-        type={type}
-        imageUrl={item.logo || item.avatar || item.thumbnail}
-        onClickItem={onClickItem}
-      />
-    )
-  }
-
-  function onSeeAllClick() {
-    let url = ''
-    switch (type) {
-      case 'specialties':
-        url = `/${typeSlug}`
-        break
-      case 'services':
-      case 'doctors':
-      case 'hospitals':
-        url = `/${selectedLocation.slug}/${typeSlug}`
-        break
-    }
-    if (url) {
-      dispatch({ type: ActionTypes.NavigateTo, payload: url })
-    }
-  }
-
-  function onClickSearchByKeyword() {
-    const { slug: typeSlug } = typeInformation[type]
-    const url = `/${selectedLocation.slug}/${typeSlug}?q=${searchKeywords}`
-    dispatch({ type: ActionTypes.NavigateTo, payload: url })
-  }
-
-  return (
-    <section>
-      <StyledTypeHeader>
-        <StyledInfoWrapper>
-          {typeInformation[type].icon}
-          <StyledTypeName>{typeInformation[type].name}</StyledTypeName>
-        </StyledInfoWrapper>
-        <StyledSeeMoreButton onClick={onSeeAllClick}>
-          <Text size="p3" color={theme.colors.primaryBase}>
-            {t('booking.searchPopup.seeAll')}
-          </Text>
-        </StyledSeeMoreButton>
-      </StyledTypeHeader>
-
-      {(isLoading || (data && data.length > 0)) && (
-        <StyledResultsContainer>
-          <StyledItemsWrapper>
-            {isLoading &&
-              Array(2)
-                .fill(undefined)
-                .map((_, i) => (
-                  <StyledResult key={type + 'loading' + i}>
-                    <StyledPictureWrapper>
-                      <StyledImageSkeletonWrapper>
-                        <Skeleton
-                          height={14}
-                          width={type === 'hospitals' ? 12 : 32}
-                          style={{
-                            maxWidth: 'var(--graphicSize)',
-                            minHeight: 'var(--graphicSize)',
-                          }}
-                        />
-                      </StyledImageSkeletonWrapper>
-                    </StyledPictureWrapper>
-                    <Skeleton width={120} height={24} />
-                  </StyledResult>
-                ))}
-            {!isLoading &&
-              data &&
-              data.length > 0 &&
-              data.slice(0, showItemCount).map(renderItem)}
-          </StyledItemsWrapper>
-
-          <StyledItemsWrapper isShown={seeMoreOpen} isMore>
-            {data.slice(showItemCount, -1).map(renderItem)}
-          </StyledItemsWrapper>
-          {type === 'specialties' && showItemCount < data.length && !isLoading && (
-            <button onClick={() => setSeeMoreOpen(!seeMoreOpen)}>
-              <StyledSeeMore size="p3" color={theme.colors.primaryBase}>
-                {seeMoreOpen
-                  ? t('booking.searchPopup.seeLessSpecialties')
-                  : t('booking.searchPopup.seeMoreSpecialties')}
-              </StyledSeeMore>
-            </button>
-          )}
-          {type !== 'specialties' &&
-            showItemCount < data.length &&
-            !isLoading &&
-            keyword.trim().length > SEARCH_KEYWORD_MIN_LENGTH[locale] && (
-              <button onClick={onClickSearchByKeyword}>
-                <StyledSeeMore size="p3" color={theme.colors.primaryBase}>
-                  {t(`booking.searchPopup.searchIn.${type}`, {
-                    name: keyword,
-                  })}
-                </StyledSeeMore>
-              </button>
-            )}
-        </StyledResultsContainer>
-      )}
-      {!isLoading && data?.length === 0 && (
-        <StyledResultsContainer>
-          <Text size="sm" color={theme.colors.gray400}>
-            {t('booking.searchBar.noResults')}
-          </Text>
-        </StyledResultsContainer>
-      )}
-    </section>
-  )
-}
-
-export { ResultSection }

package/src/care/components/organisms/bookingSearchBar/resultSectionItem/index.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
-
-import { ResultSectionItem, Props } from '.'
-import { MediaQueries } from '../../../../../misc/utils'
-
-export default {
-  component: ResultSectionItem,
-  title: 'Projects/Care/Organisms/BookingSearchBar/ResultSectionItem',
-}
-
-// CSS Variables are always coming from the parent. In this case I will mock them with this stylesheet.
-const StyledMockVariablesWrapper = styled.div`
-  --rowGap: 16px;
-  --graphicSize: 32px;
-
-  ${MediaQueries.tdUp} {
-    --rowGap: 8px;
-  }
-`
-
-const Template: Story<Props> = (args) => (
-  <StyledMockVariablesWrapper>
-    <ResultSectionItem {...args} />
-  </StyledMockVariablesWrapper>
-)
-
-export const Doctor = Template.bind({})
-Doctor.args = {
-  type: 'doctors',
-  item: { id: 1, name: 'Dr. John Doe', slug: '/doctor/john' },
-  imageUrl: 'https://source.unsplash.com/random/74x74',
-} as Props
-
-export const Service = Template.bind({})
-Service.args = {
-  type: 'services',
-  item: { id: 2, name: 'Vaccination', slug: '/services/vaccination' },
-  imageUrl: 'https://source.unsplash.com/random/74x74',
-} as Props
-
-export const Specialty = Template.bind({})
-Specialty.args = {
-  type: 'specialties',
-  item: { id: 2, name: 'General Practitioner', slug: '/spec/general' },
-  imageUrl: 'https://source.unsplash.com/random/74x74',
-} as Props
-
-export const Clinic = Template.bind({})
-Clinic.args = {
-  type: 'hospitals',
-  item: { id: 3, name: 'FV Hospital', slug: '/hospital/fv' },
-} as Props

package/src/care/components/organisms/bookingSearchBar/resultSectionItem/index.styled.ts

@@ -1,75 +0,0 @@
-import { SearchBarSectionApi } from 'care/interfaces/types'
-import { Text } from 'components/atoms/text'
-import { theme } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledResult = styled.li`
-  display: flex;
-  align-items: center;
-  gap: var(--rowGap);
-  cursor: pointer;
-`
-
-export const StyledRoundedIconWrapper = styled.div<{
-  type: SearchBarSectionApi['type']
-}>`
-  --wrapper-size: var(--graphicSize);
-  border-radius: calc(var(--wrapper-size) / 2);
-  background-color: var(--neutral50);
-  width: var(--wrapper-size);
-  height: var(--wrapper-size);
-  aspect-ratio: 1/1;
-  overflow: hidden;
-
-  ${({ type }) =>
-    type &&
-    type === 'doctors' &&
-    `
-    border-radius: calc(var(--graphicSize) / 2);
-    `}
-
-  img {
-    width: var(--graphicSize);
-    height: var(--graphicSize);
-    ${({ type }) =>
-      type && type === 'doctors'
-        ? `
-
-        object-fit: cover;  
-      `
-        : `
-        object-fit: contain;
-      `}
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${theme.colors.gray600};
-  }
-`
-
-export const StyledText = styled(Text)`
-  line-height: 22px;
-  letter-spacing: -0.2px;
-
-  ${MediaQueries.tdUp} {
-    &[data-size='p3'] {
-      font-size: 14px;
-    }
-  }
-`
-
-export const StyledPictureWrapper = styled.figure`
-  max-width: var(--graphicSize);
-  min-width: var(--graphicSize);
-`
-
-export const StyledLocationPin = styled.svg`
-  margin: 0 auto;
-  display: block;
-`
-
-export const StyledImageSkeletonWrapper = styled.div`
-  display: grid;
-  place-items: center;
-`

package/src/care/components/organisms/bookingSearchBar/resultSectionItem/index.tsx

@@ -1,86 +0,0 @@
-import React, { useMemo } from 'react'
-
-import {
-  DefaultThumbnailAny,
-  DefaultThumbnailDoctor,
-  DefaultThumbnailService,
-} from 'care/components/atoms/icons'
-import {
-  SearchBarSectionApi,
-  SearchBarSectionItemApi,
-} from 'care/interfaces/types'
-import { theme } from 'misc/theme'
-
-import {
-  StyledResult,
-  StyledRoundedIconWrapper,
-  StyledText,
-  StyledPictureWrapper,
-  StyledLocationPin,
-} from './index.styled'
-
-const defaultThumbnailByType: { [k in SearchBarSectionApi['type']]?: any } = {
-  doctors: DefaultThumbnailDoctor,
-  services: DefaultThumbnailService,
-}
-
-export type Props = {
-  type: SearchBarSectionApi['type']
-  item: SearchBarSectionItemApi
-  imageUrl?: string
-  onClickItem?: (item: SearchBarSectionItemApi) => void
-}
-
-const ResultSectionItem = ({ type, item, imageUrl, onClickItem }: Props) => {
-  const onKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
-    if (e.key === 'Enter' || e.key === 'Space') {
-      if (onClickItem) {
-        onClickItem(item)
-      }
-    }
-  }
-
-  const defaultThumbnail = useMemo(() => {
-    const Cmp: any = defaultThumbnailByType[type] || DefaultThumbnailAny
-    return <Cmp width={32} height={type === 'services' ? 32 : 24} />
-  }, [type])
-
-  return (
-    <StyledResult
-      onClick={() => onClickItem && onClickItem(item)}
-      onKeyDown={onKeyDown}
-      tabIndex={0}
-      role="button"
-    >
-      <StyledPictureWrapper>
-        {type === 'hospitals' ? (
-          <StyledLocationPin width="12" height="16" viewBox="0 0 12 16">
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M0.75 5.94873C0.75 3.04623 3.0975 0.69873 6 0.69873C8.9025 0.69873 11.25 3.04623 11.25 5.94873C11.25 9.07623 7.935 13.3887 6.5775 15.0312C6.2775 15.3912 5.73 15.3912 5.43 15.0312C4.065 13.3887 0.75 9.07623 0.75 5.94873ZM4.125 5.94873C4.125 6.98373 4.965 7.82373 6 7.82373C7.035 7.82373 7.875 6.98373 7.875 5.94873C7.875 4.91373 7.035 4.07373 6 4.07373C4.965 4.07373 4.125 4.91373 4.125 5.94873Z"
-              fill="#9AA2AC"
-            />
-          </StyledLocationPin>
-        ) : (
-          <StyledRoundedIconWrapper type={type}>
-            {imageUrl ? (
-              <img
-                src={imageUrl}
-                width={32}
-                height={type === 'services' ? 32 : 24}
-              />
-            ) : (
-              defaultThumbnail
-            )}
-          </StyledRoundedIconWrapper>
-        )}
-      </StyledPictureWrapper>
-      <StyledText color={theme.colors.gray800} size="p3">
-        {item.name}
-      </StyledText>
-    </StyledResult>
-  )
-}
-
-export { ResultSectionItem }