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

package/src/components/organisms/navigationLayout/navigationBar/NavigationBarMobile.tsx

@@ -1,503 +0,0 @@
-import React from 'react'
-
-import { SehatBadge, LockIcon } from 'assets/svg'
-import { Button } from 'components/atoms/button'
-import { Heading } from 'components/atoms/heading'
-import { Logo } from 'components/atoms/logo'
-import { PureInput } from 'components/atoms/pureInput'
-import { Text } from 'components/atoms/text'
-
-import { useHeaderHeightHook } from '.'
-import { useTranslation } from '../utils'
-import { ArrowLeftPopupIcon } from './ArrowLeftPopupIcon'
-import { ClosePopupIcon } from './ClosePopupIcon'
-import { HamburgerIcon } from './HamburgerIcon'
-import {
-  StyledHeaderContainer,
-  StyledHeaderMenuItem,
-  StyledImageWrapper,
-  StyledMenuContainer,
-  StyledMenuIcon,
-  StyledMenuSearchInput,
-  StyledProfileMenu,
-  StyledAvatar,
-} from './index.styled'
-import { NavigationBarMobileProps } from './NavigationBar.types'
-
-export function NavigationBarMobile({
-  type,
-  isStatic,
-  isAmp,
-  isDisplayed,
-  siteType,
-  isCollapsed,
-  sitewideBannerShown,
-  sitewideBanner,
-  sitewideBannerClosed,
-  setSitewideBannerClosed,
-  isMobile,
-  onMenuClick,
-  menu,
-  isSearchIconDisplayed,
-  statics: { DISCOVER_URL_FE, SSO_URL, HOME_PAGE_URL, CARE_URL_FE },
-  basePath,
-  languageMenu,
-  enabledExperimentalCareHeader,
-  onCareHeaderClick,
-  logoType,
-  locale,
-  isInit,
-  title,
-  sponsorComponent,
-  currentUrl,
-  userInfo,
-  currentPopupType,
-  avatar,
-  profileMenu,
-  isLoginButtonDisplayed,
-  goToLogin,
-  isSearchBarDisplay,
-  searchPlaceholder,
-  onSearchValueChanged,
-  keyPressed,
-}: NavigationBarMobileProps) {
-  const f = useTranslation()
-  const isSponsored = !!sponsorComponent
-  const hasSponsoredBanners = !!sponsorComponent?.props?.sponsoredBy?.length
-  const isSiteWide = !!sitewideBanner && !sitewideBannerClosed
-
-  const isShowingSiteWideBanner =
-    sitewideBannerShown && !!sitewideBanner && !sitewideBannerClosed
-  const { headerRef, headerHeight } = useHeaderHeightHook({
-    isSiteWide,
-    isShowingSiteWideBanner,
-    isSponsored,
-    hasSponsoredBanners,
-    isMobile: true,
-  })
-  return (
-    <>
-      <StyledHeaderContainer
-        data-header-type={type}
-        data-collapsed={isStatic ? false : isCollapsed}
-        data-with-search-input={type !== 'popup-sub-level'}
-        data-is-displayed={isDisplayed}
-        data-is-amp={isAmp}
-        data-sponsored={isSponsored}
-        data-site-type={siteType}
-        data-sitewide-banner-shown={isShowingSiteWideBanner}
-        id="site-header"
-        ref={headerRef}
-      >
-        {/* {type === 'popup' && (
-          // <Link href="/">
-          <a
-            href="/"
-            style={{
-              position: 'absolute',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              height: '100%',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <Logo
-              type={logoType}
-              height={'27px'}
-              width={'104px'}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            />
-          </a>
-          // </Link>
-        )} */}
-        {sitewideBanner
-          ? !React.isValidElement(sitewideBanner)
-            ? sitewideBanner
-            : React.cloneElement<{
-                isCollapsed?: boolean
-                isAmp?: boolean
-                isMobile?: boolean
-                setBannerClosed?: (v: boolean) => void
-              }>(sitewideBanner, {
-                isCollapsed,
-                setBannerClosed: setSitewideBannerClosed,
-                isAmp,
-                isMobile,
-              })
-          : null}
-
-        <div
-          style={{
-            position: 'relative',
-            height: 64,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: siteType === 'helloSites' ? 'center' : 'flex-start',
-            background: 'white',
-            ...(siteType === 'marryBaby'
-              ? {
-                  paddingLeft: 66,
-                }
-              : {}),
-
-            ...(typeof languageMenu !== 'undefined' ||
-            enabledExperimentalCareHeader
-              ? {
-                  paddingLeft: enabledExperimentalCareHeader ? 48 : 64,
-                  gap: 24,
-                  justifyContent: 'unset',
-                }
-              : {}),
-          }}
-        >
-          <StyledMenuContainer>
-            <StyledMenuIcon
-              on="tap:discover-amp-sidebar"
-              role="button"
-              className="menu-handler"
-              tabIndex={0}
-            >
-              <div onClick={() => onMenuClick?.('categories')}>
-                {/* On mobile: Click Humburger icon to open menu popup */}
-                {type === 'home' && (
-                  <a
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label="Hamburger Navigation URL"
-                  >
-                    <HamburgerIcon siteType={siteType} type={type} />
-                  </a>
-                )}
-
-                {/* On mobile: Click a category menu to open sub level and render arrow left popup icon to go back */}
-                {type === 'popup' && <ClosePopupIcon />}
-                {type === 'popup-sub-level' && <ArrowLeftPopupIcon />}
-              </div>
-              {menu}
-            </StyledMenuIcon>
-            {isSearchIconDisplayed &&
-              siteType === 'helloSites' &&
-              type === 'home' && (
-                <StyledMenuIcon style={{ paddingRight: 16 }}>
-                  <a
-                    data-event-category="Search Button"
-                    data-event-action="Click"
-                    style={{
-                      paddingRight: 16,
-                      paddingTop: 8,
-                      position: 'relative',
-                    }}
-                    href={`${HOME_PAGE_URL}/search?s=&page=1`}
-                  >
-                    <img
-                      src={`${basePath}/images/search.svg`}
-                      style={{ width: '24px', height: '24px' }}
-                      alt={type}
-                    />
-                    {/* fake input  */}
-                    <input
-                      style={{
-                        width: '32px',
-                        height: '32px',
-                        position: 'absolute',
-                        left: '-2px',
-                        bottom: '0',
-                        opacity: 0,
-                        zIndex: 10000,
-                      }}
-                    />
-                  </a>
-                </StyledMenuIcon>
-              )}
-          </StyledMenuContainer>
-          {/* profile avatar */}
-          {type !== 'popup' && (
-            <StyledProfileMenu
-              data-is-profile={true}
-              className={!isInit ? 'menu-handler-health-tools' : ''}
-            >
-              <div className="menu-handler-item">
-                {isSearchIconDisplayed &&
-                  siteType === 'marryBaby' &&
-                  type === 'home' && (
-                    <StyledMenuIcon
-                      style={{
-                        justifySelf: 'flex-end',
-                      }}
-                    >
-                      {/* <Link href={`${DISCOVER_URL_FE}/search?s=&page=1`}> */}
-                      <a
-                        data-event-category="Search Button"
-                        data-event-action="Click"
-                        style={{
-                          display: 'flex',
-                        }}
-                        href={`${DISCOVER_URL_FE}/search?s=&page=1`}
-                      >
-                        <svg
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M3.31573 13.7811L3.94855 13.6326L3.31573 13.7811ZM3.31573 8.324L3.94855 8.47244L3.31573 8.324ZM18.7893 8.324L19.4221 8.17556L18.7893 8.324ZM18.7893 13.781L19.4221 13.9295L18.7893 13.781ZM13.781 18.7893L13.6326 18.1565L13.781 18.7893ZM8.324 18.7893L8.17556 19.4221L8.324 18.7893ZM8.324 3.31573L8.17556 2.6829L8.324 3.31573ZM13.781 3.31573L13.9295 2.6829L13.781 3.31573ZM20.5404 21.4596C20.7942 21.7135 21.2058 21.7135 21.4596 21.4596C21.7135 21.2058 21.7135 20.7942 21.4596 20.5404L20.5404 21.4596ZM3.94855 13.6326C3.55048 11.9356 3.55048 10.1695 3.94855 8.47244L2.6829 8.17556C2.23903 10.0679 2.23903 12.0372 2.68291 13.9295L3.94855 13.6326ZM18.1565 8.47244C18.5546 10.1695 18.5546 11.9356 18.1565 13.6326L19.4221 13.9295C19.866 12.0372 19.866 10.0679 19.4221 8.17556L18.1565 8.47244ZM13.6326 18.1565C11.9356 18.5546 10.1695 18.5546 8.47244 18.1565L8.17556 19.4221C10.0679 19.866 12.0372 19.866 13.9295 19.4221L13.6326 18.1565ZM8.47244 3.94855C10.1695 3.55048 11.9356 3.55048 13.6326 3.94855L13.9295 2.6829C12.0372 2.23903 10.0679 2.23903 8.17556 2.6829L8.47244 3.94855ZM8.47244 18.1565C6.22776 17.63 4.47508 15.8773 3.94855 13.6326L2.68291 13.9295C3.32219 16.6549 5.45019 18.7829 8.17556 19.4221L8.47244 18.1565ZM13.9295 19.4221C16.6549 18.7829 18.7829 16.6549 19.4221 13.9295L18.1565 13.6326C17.63 15.8773 15.8773 17.63 13.6326 18.1565L13.9295 19.4221ZM13.6326 3.94855C15.8773 4.47508 17.63 6.22775 18.1565 8.47244L19.4221 8.17556C18.7829 5.45019 16.6549 3.32219 13.9295 2.6829L13.6326 3.94855ZM8.17556 2.6829C5.45019 3.32219 3.32219 5.45018 2.6829 8.17556L3.94855 8.47244C4.47508 6.22775 6.22775 4.47508 8.47244 3.94855L8.17556 2.6829ZM16.8755 17.7948L20.5404 21.4596L21.4596 20.5404L17.7948 16.8755L16.8755 17.7948Z"
-                            fill="#3E3F58"
-                          />
-                        </svg>
-                        {/* fake input  */}
-                        <input
-                          style={{
-                            width: '32px',
-                            height: '32px',
-                            position: 'absolute',
-                            left: '-2px',
-                            bottom: '0',
-                            opacity: 0,
-                            zIndex: 10000,
-                          }}
-                        />
-                      </a>
-                      {/* </Link> */}
-                    </StyledMenuIcon>
-                  )}
-
-                {enabledExperimentalCareHeader && (
-                  <>
-                    {onCareHeaderClick ? (
-                      <Button
-                        size="sm"
-                        color={'primary'}
-                        dataEventCategory="Care"
-                        dataEventAction="Navigation Bar Click"
-                        dataEventLabel={currentUrl}
-                        onClick={onCareHeaderClick}
-                      >
-                        {f('login.booking')}
-                      </Button>
-                    ) : (
-                      <a href={CARE_URL_FE} className="care-button">
-                        <Button
-                          size="sm"
-                          color={'primary'}
-                          dataEventCategory="Care"
-                          dataEventAction="Navigation Bar Click"
-                          dataEventLabel={currentUrl}
-                        >
-                          {f('login.booking')}
-                        </Button>
-                      </a>
-                    )}
-                  </>
-                )}
-
-                {userInfo?.id ? (
-                  <StyledImageWrapper style={{ position: 'relative' }}>
-                    <div onClick={() => onMenuClick && onMenuClick('profile')}>
-                      {currentPopupType === 'profile' ? (
-                        <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>
-                      ) : (
-                        avatar
-                      )}
-                    </div>
-                    {profileMenu}
-                  </StyledImageWrapper>
-                ) : !isAmp ? (
-                  isLoginButtonDisplayed && (
-                    <a
-                      data-event-category="Sign Up"
-                      data-event-action="Button Click"
-                      data-event-label={currentUrl}
-                    >
-                      {enabledExperimentalCareHeader ? (
-                        <StyledAvatar onClick={goToLogin}>
-                          <img src={LockIcon} className="avatar" alt="avatar" />
-                        </StyledAvatar>
-                      ) : siteType === 'helloSites' ? (
-                        <Button
-                          className="login-btn-mobile"
-                          size="sm"
-                          color="secondary"
-                          onClick={goToLogin}
-                        >
-                          {f('navigation.loginJoin')}
-                        </Button>
-                      ) : (
-                        <div
-                          className="login-btn-mobile"
-                          onClick={goToLogin}
-                          style={{
-                            paddingLeft: 16,
-                          }}
-                        >
-                          <Text size="p3">{f('navigation.loginJoin')}</Text>
-                        </div>
-                      )}
-                    </a>
-                  )
-                ) : (
-                  <a
-                    data-vars-event-category="Sign Up"
-                    data-vars-event-action="Button Click"
-                    data-vars-event-label={currentUrl}
-                    href={`${SSO_URL}?returnUrl=${currentUrl.replace(
-                      '?amp=1',
-                      '',
-                    )}`}
-                    style={{ textDecoration: 'none' }}
-                  >
-                    {locale === 'vi-VN' ? (
-                      <StyledAvatar onClick={goToLogin}>
-                        <img src={LockIcon} className="avatar" alt="avatar" />
-                      </StyledAvatar>
-                    ) : (
-                      <Button
-                        className="login-btn-mobile"
-                        size="sm"
-                        color={'secondary'}
-                        onClick={goToLogin}
-                      >
-                        {f('navigation.loginJoin')}
-                      </Button>
-                    )}
-                  </a>
-                )}
-              </div>
-            </StyledProfileMenu>
-          )}
-          {(type === 'home' || type === 'popup') && (
-            <a href={HOME_PAGE_URL || ''}>
-              <Logo
-                type={logoType}
-                height="27px"
-                width="121px"
-                style={{
-                  display: 'flex',
-                }}
-                badge={
-                  locale === 'id-ID' ? (
-                    <img
-                      src={SehatBadge}
-                      style={{ width: 56, height: 23, maxWidth: 56 }}
-                      width="56"
-                      height="23"
-                    />
-                  ) : undefined
-                }
-              />
-            </a>
-          )}
-          {typeof languageMenu !== 'undefined' && (
-            <StyledHeaderMenuItem
-              data-is-active={true}
-              className={!isInit ? 'menu-handler-language' : ''}
-              onClick={() => {
-                onMenuClick && onMenuClick('language')
-              }}
-            >
-              {languageMenu}
-            </StyledHeaderMenuItem>
-          )}
-          {title && (
-            <Heading className="top-bar-header" tag="h5">
-              {title}
-            </Heading>
-          )}
-        </div>
-
-        {sponsorComponent
-          ? !React.isValidElement(sponsorComponent)
-            ? sponsorComponent
-            : React.cloneElement<{
-                isCollapsed?: boolean
-                isMobile?: boolean
-                isAmp?: boolean
-                locale?: string
-              }>(sponsorComponent, {
-                isCollapsed,
-                locale,
-                isMobile,
-                isAmp,
-              })
-          : null}
-      </StyledHeaderContainer>
-      {isSearchBarDisplay ? (
-        <StyledMenuSearchInput
-          data-header-type={type}
-          data-is-displayed={isDisplayed}
-          data-sitewide-banner-shown={sitewideBannerShown && !!sitewideBanner}
-        >
-          <PureInput
-            style={{
-              minHeight: 'auto',
-              minWidth: '100%',
-              padding: '0 16px',
-            }}
-            // value={searchValue}
-            name={'search-input-' + type + (!isInit ? '-temp' : '')}
-            size="md"
-            placeholder={searchPlaceholder}
-            onChange={onSearchValueChanged}
-            onKeyPress={keyPressed}
-            type="search"
-            autoFocus={false}
-            displayIcon={
-              <a data-event-category="Search Button" data-event-action="Click">
-                <svg
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M11 18C14.866 18 18 14.866 18 11C18 7.13401 14.866 4 11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18Z"
-                    stroke="#8C8C8C"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M20 20L16 16"
-                    stroke="#8C8C8C"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </a>
-            }
-          />
-        </StyledMenuSearchInput>
-      ) : (
-        <>
-          {!isAmp && (
-            <div
-              style={{
-                height: headerHeight,
-              }}
-            ></div>
-          )}
-        </>
-      )}
-    </>
-  )
-}

package/src/components/organisms/navigationLayout/navigationBar/SearchIcon.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-const SearchIcon = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.97183 10.8732C3.97183 7.0617 7.0617 3.97183 10.8732 3.97183C14.6848 3.97183 17.7746 7.0617 17.7746 10.8732C17.7746 14.6848 14.6848 17.7746 10.8732 17.7746C7.0617 17.7746 3.97183 14.6848 3.97183 10.8732ZM10.8732 2C5.97268 2 2 5.97268 2 10.8732C2 15.7738 5.97268 19.7465 10.8732 19.7465C12.9683 19.7465 14.8938 19.0204 16.4118 17.8061L20.3169 21.7112C20.702 22.0963 21.3262 22.0963 21.7112 21.7112C22.0963 21.3262 22.0963 20.702 21.7112 20.3169L17.8061 16.4118C19.0204 14.8938 19.7465 12.9683 19.7465 10.8732C19.7465 5.97268 15.7738 2 10.8732 2Z"
-        fill="#8C8C8C"
-      />
-    </svg>
-  )
-}
-
-export { SearchIcon }