@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/components/organisms/navigationLayout/menuCareList/index.tsx

@@ -0,0 +1,266 @@
+import React from 'react'
+
+import { LOCALIZED_SLUGS } from 'care/interfaces/constants'
+import { Container } from 'components/atoms/container'
+import { Heading } from 'components/atoms/heading'
+import { LocaleType } from 'interfaces/types'
+import { theme } from 'misc/theme'
+
+import { DesktopMenuPopup, SiteType, Specialty } from '../types'
+import { getCareSearchUrl, useTranslation } from '../utils'
+import CategorySkeleton from './categorySkeleton'
+import {
+  StyledCategory,
+  StyledCategoryContainer,
+  StyledCategoryIcon,
+  StyledCategoryItemAll,
+  StyledCloseWrapper,
+  StyledContainer,
+  StyledHealthToolItem,
+  StyledImageWrapper,
+  StyledInnerMenuPopupContainer,
+  StyledMenuPopupContainer,
+  StyledMenuPopupWrapper,
+} from './index.styled'
+
+export type Props = {
+  careSpecialties: Specialty[]
+  onSelectCareSpecialty: (c: Specialty) => void
+  onClosePopup: () => void
+  isLoading: boolean
+  isMobile: boolean
+  basePath: string
+  locale: LocaleType
+  desktopPopupType: DesktopMenuPopup
+  siteType: SiteType
+  CARE_URL_FE: string
+}
+
+const MenuCareList = ({
+  careSpecialties,
+  onSelectCareSpecialty,
+  isLoading,
+  desktopPopupType,
+  onClosePopup,
+  basePath,
+  locale,
+  isMobile,
+  siteType,
+  CARE_URL_FE,
+}: Props) => {
+  const f = useTranslation()
+
+  return isMobile ? (
+    <>
+      {isLoading ? (
+        <StyledContainer>
+          <CategorySkeleton />
+        </StyledContainer>
+      ) : (
+        <StyledContainer data-category-list-type={'main'}>
+          <Heading
+            style={{
+              marginTop: 16,
+            }}
+            tag="h5"
+          >
+            {f('menu.care.searchBySpecialties')}
+          </Heading>
+          {careSpecialties.map((careSpecialty, index) => (
+            <a key={'tool-' + index}>
+              <StyledCategoryContainer
+                data-event-category="Hamburger Navigation"
+                data-event-action="Click"
+                data-event-label={`${CARE_URL_FE}${getCareSearchUrl({
+                  type: 'DOCTOR',
+                  specialtySlug: careSpecialty.slug,
+                  locale,
+                })}`}
+                onClick={() => {
+                  onSelectCareSpecialty(careSpecialty)
+                }}
+              >
+                <StyledCategoryIcon>
+                  <img
+                    alt="health-tool-icon"
+                    src={
+                      careSpecialty.thumbnail || `${basePath}/images/avatar.jpg`
+                    }
+                    style={{ width: '32px', height: '32px' }}
+                  />
+                </StyledCategoryIcon>
+                <StyledCategory>{careSpecialty.name}</StyledCategory>
+              </StyledCategoryContainer>
+            </a>
+          ))}
+          <a
+            style={{ textDecoration: 'none' }}
+            href={`${CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`}
+          >
+            <StyledCategoryItemAll
+              // onClick={closePopup}
+              key={'all-categories'}
+              data-theme={siteType}
+              data-event-category="Hamburger Navigation"
+              data-event-action="Click"
+              data-event-label={`${CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`}
+            >
+              {f('home.navigator.menuItem.allSpecialties')}
+              <StyledImageWrapper>
+                {siteType === 'helloSites' ? (
+                  <img
+                    src={`${basePath}/svg/chevronRightActive.svg`}
+                    style={{ width: '16px', height: '16px' }}
+                    alt={f('home.navigator.menuItem.allSpecialties')}
+                  />
+                ) : (
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6.5 12H17.5M17.5 12L12.9118 8M17.5 12L12.9118 16"
+                      stroke="#3E3F58"
+                      strokeWidth="1.3"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                )}
+              </StyledImageWrapper>
+            </StyledCategoryItemAll>
+          </a>
+        </StyledContainer>
+      )}
+    </>
+  ) : (
+    <StyledMenuPopupWrapper
+      className="top-menu-care-specialties"
+      onClick={onClosePopup}
+      data-is-display={desktopPopupType === 'care'}
+    >
+      <StyledMenuPopupContainer>
+        <Container style={{ padding: '0 16px' }} type={siteType}>
+          <StyledInnerMenuPopupContainer
+            data-popup-type={desktopPopupType}
+            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              e.stopPropagation()
+            }}
+          >
+            <>
+              {careSpecialties.map((careSpecialty: Specialty) => (
+                <StyledHealthToolItem
+                  key={`care-specialty-${careSpecialty.id}`}
+                  onClick={onClosePopup}
+                >
+                  <a
+                    data-event-category="Hamburger Navigation"
+                    data-event-action="Click"
+                    data-event-label={`${CARE_URL_FE}${getCareSearchUrl({
+                      type: 'DOCTOR',
+                      specialtySlug: careSpecialty.slug,
+                      locale,
+                    })}`}
+                    style={{
+                      textDecoration: 'none',
+                      color: theme.colors.gray800,
+                    }}
+                    className="iconMenu no-replace-click"
+                    href={`${CARE_URL_FE}${getCareSearchUrl({
+                      type: 'DOCTOR',
+                      specialtySlug: careSpecialty.slug,
+                      locale,
+                    })}`}
+                  >
+                    <div
+                      style={{
+                        display: 'flex',
+                      }}
+                    >
+                      <img
+                        alt="care-specialty-icon"
+                        src={
+                          careSpecialty.thumbnail ||
+                          `${basePath}/images/avatar.jpg`
+                        }
+                        style={{ width: '32px', height: '32px' }}
+                      />
+                    </div>
+                    <p>{careSpecialty.name}</p>
+                  </a>
+                </StyledHealthToolItem>
+              ))}
+              <a
+                style={{ textDecoration: 'none' }}
+                href={`${CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`}
+              >
+                <StyledCategoryItemAll
+                  onClick={onClosePopup}
+                  key={'all-care-specialties'}
+                  data-theme={siteType}
+                  data-event-category="Hamburger Navigation"
+                  data-event-action="Click"
+                  data-event-label={`${CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`}
+                >
+                  {f('home.navigator.menuItem.allSpecialties')}
+                  <StyledImageWrapper>
+                    {siteType === 'helloSites' ? (
+                      <img
+                        src={`${basePath}/svg/chevronRightActive.svg`}
+                        style={{ width: '16px', height: '16px' }}
+                        alt={f('home.navigator.menuItem.allSpecialties')}
+                      />
+                    ) : (
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6.5 12H17.5M17.5 12L12.9118 8M17.5 12L12.9118 16"
+                          stroke="#3E3F58"
+                          strokeWidth="1.3"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    )}
+                  </StyledImageWrapper>
+                </StyledCategoryItemAll>
+              </a>
+            </>
+            {/* )} */}
+            <StyledCloseWrapper onClick={onClosePopup}>
+              {/* <img
+                    src={`${basePath}/svg/close.svg`}
+                    style={{ width: '24px', height: '24px' }}
+                    alt={'close'}
+                  /> */}
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18 6L6 18M18 18L6 6"
+                  stroke="#3E3F58"
+                  strokeWidth="1.3"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </StyledCloseWrapper>
+          </StyledInnerMenuPopupContainer>
+        </Container>
+      </StyledMenuPopupContainer>
+    </StyledMenuPopupWrapper>
+  )
+}
+
+export { MenuCareList }

package/raw/components/organisms/navigationLayout/menuCategoriesList/categorySkeleton.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Skeleton from 'react-loading-skeleton'
+
+import { StyledCardSkeleton } from './index.styled'
+
+const CategorySkeleton = () => (
+  <StyledCardSkeleton
+    style={{
+      marginTop: '16px',
+    }}
+  >
+    <div>
+      <Skeleton height={46} />
+    </div>
+    <div>
+      <Skeleton height={46} />
+    </div>
+    <div>
+      <Skeleton height={46} />
+    </div>
+  </StyledCardSkeleton>
+)
+
+export default CategorySkeleton