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

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

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

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

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

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

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

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