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

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

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

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