web/apps/scandic-web/components/Current/Header/MainMenu/index.tsx

/* eslint-disable formatjs/no-literal-string-in-jsx */

"use client"
import { usePathname } from "next/navigation"
import { useIntl } from "react-intl"

import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
import Link from "@scandic-hotels/design-system/Link"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

import { logout } from "@/constants/routes/handleAuth"
import { env } from "@/env/client"
import useDropdownStore from "@/stores/main-menu"

import Image from "@/components/Image"
import LoginButton from "@/components/LoginButton"
import Avatar from "@/components/MyPages/Avatar"
import useLang from "@/hooks/useLang"
import { trackClick } from "@/utils/tracking"

import BookingButton from "../BookingButton"

import styles from "./mainMenu.module.css"

import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"

export function MainMenu({
  frontpageLinkText,
  homeHref,
  links,
  logo,
  topMenuMobileLinks,
  languageSwitcher,
  myPagesMobileDropdown,
  bookingHref,
  user,
}: MainMenuProps) {
  const intl = useIntl()
  const lang = useLang()
  const pathname = usePathname()
  const baseUrl = env.NEXT_PUBLIC_PUBLIC_URL || "https://www.scandichotels.com"

  const isThreeStaticPagesPathnames = [
    "/de/sponsoring",
    "/en/sponsoring",
    "/da/sponsorering",
    "/fi/sponsorointi",
    "/no/vi-sponser",
    "/sv/vi-sponsrar",
    "/de/scandic-entdecken/wlan",
    "/en/explore-scandic/wifi",
    "/da/oplev-scandic/wifi",
    "/fi/koe-scandic/maksuton-internetyhteys",
    "/no/utforsk-scandic/wifi",
    "/sv/utforska-scandic/wi-fi",
    "/de/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite",
    "/en/customer-service/frequently-asked-questions/using-the-website",
    "/da/kundeservice/sporgsmal-og-svar/om-scandics-website",
    "/fi/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista",
    "/no/kundeservice/sporsmal-og-svar/bruk-av-nettsiden",
    "/sv/kundservice/fragor-och-svar/om-scandics-webbplats",
    "/de/current-content-page",
    "/en/current-content-page",
    "/da/current-content-page",
    "/fi/current-content-page",
    "/no/current-content-page",
    "/sv/current-content-page",
  ].includes(pathname)

  const { toggleDropdown, isMyPagesMobileMenuOpen, isHamburgerMenuOpen } =
    useDropdownStore()

  function handleMyPagesMobileMenuClick() {
    // Only track click when opening it
    if (!isMyPagesMobileMenuOpen) {
      trackClick("profile picture icon")
    }
    toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
  }

  const trackHamburgerMenuClick = (title: string) => {
    if (isHamburgerMenuOpen) {
      trackClick(`hamburger - ${title}`)
    }
  }

  return (
    <div className={styles.mainMenu}>
      <div
        className={styles.container}
        itemScope
        itemType="http://schema.org/Organization"
      >
        <meta itemProp="name" content="Scandic" />
        <nav className={styles.navBar}>
          <button
            aria-pressed="false"
            className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
            onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
            type="button"
          >
            <span className={styles.iconBars}></span>
            <span className={styles.hiddenAccessible}>Menu</span>
          </button>

          <a className={styles.logoLink} href={homeHref}>
            <span className={styles.hiddenAccessible}>{frontpageLinkText}</span>
            <Image
              alt="Scandic Hotels logo"
              className={styles.logo}
              data-js="scandiclogoimg"
              data-nosvgsrc="/_static/img/scandic-logotype.png"
              itemProp="logo"
              height={22}
              src={logo.url}
              width={logo.dimension.width}
              priority
            />
          </a>

          <ul
            className={`${styles.listWrapper} ${isHamburgerMenuOpen ? styles.isOpen : ""}`}
          >
            <ul className={styles.linkRow}>
              {user ? (
                <li className={styles.mobileLinkRow}>
                  <Link
                    className={styles.mobileLinkButton}
                    href={myPages[lang]}
                  >
                    {intl.formatMessage({
                      defaultMessage: "My pages",
                    })}
                  </Link>
                </li>
              ) : (
                <>
                  <li>
                    <Image
                      src="/_static/img/icon-scandic-friends.svg"
                      alt="Scanidc Friends Logo"
                      height={35}
                      width={35}
                      className={styles.scandicFriendsLogo}
                    />
                  </li>
                  <li className={styles.mobileLinkRow}>
                    <LoginButton
                      position="hamburger menu"
                      trackingId="loginStartHamburgerMenu"
                      className={styles.mobileLinkButton}
                    >
                      {intl.formatMessage({
                        defaultMessage: "Log in",
                      })}
                    </LoginButton>
                  </li>
                </>
              )}

              <li className={styles.mobileLinkRow}>
                <span className={styles.mobileSeparator} />
              </li>
              <li className={styles.mobileLinkRow}>
                <Link
                  className={styles.mobileLinkButton}
                  href={getCurrentWebUrl({
                    path: findMyBookingCurrentWebPath[lang],
                    lang,
                    baseUrl,
                  })}
                >
                  {intl.formatMessage({
                    defaultMessage: "Find booking",
                  })}
                </Link>
              </li>
            </ul>
            <ul className={styles.mainLinks}>
              {links.map((link, i) => (
                <li className={styles.li} key={link.href + i}>
                  <Link
                    id={`hamburger - ${link.title}`}
                    className={styles.link}
                    href={link.href}
                    onClick={() => trackHamburgerMenuClick(link.title)}
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>

            <ul className={styles.mobileList}>
              {topMenuMobileLinks.map(({ link }, i) => (
                <li className={styles.mobileLi} key={link.href + i}>
                  <Link
                    id={`hamburger - ${link.title}`}
                    className={styles.mobileLink}
                    href={link.href}
                    onClick={() => trackHamburgerMenuClick(link.title)}
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>
            {languageSwitcher ? (
              <li className={styles.mobileLi}>{languageSwitcher}</li>
            ) : null}
            {!!user ? (
              <li className={`${styles.mobileLi} ${styles.logout}`}>
                <Link
                  href={logout[lang]}
                  className={styles.mobileLink}
                  prefetch={false}
                >
                  {intl.formatMessage({
                    defaultMessage: "Log out",
                  })}
                </Link>
              </li>
            ) : null}
          </ul>
          <div className={styles.buttonContainer}>
            <div className={styles.myPagesDesktopLink}>
              {!isThreeStaticPagesPathnames && user ? (
                <Link className={styles.link} href={myPages[lang]}>
                  {intl.formatMessage({
                    defaultMessage: "My pages",
                  })}
                </Link>
              ) : null}
            </div>
            <BookingButton href={bookingHref} />
            {!isThreeStaticPagesPathnames && myPagesMobileDropdown && user ? (
              <div
                role="button"
                onClick={handleMyPagesMobileMenuClick}
                className={styles.avatarButton}
              >
                <Avatar firstName={user.firstName} lastName={user.lastName} />
              </div>
            ) : null}
          </div>
          {isMyPagesMobileMenuOpen ? myPagesMobileDropdown : null}
        </nav>
      </div>
    </div>
  )
}

export function MainMenuSkeleton() {
  return (
    <div className={styles.mainMenu}>
      <div
        className={styles.container}
        itemScope
        itemType="http://schema.org/Organization"
      >
        <meta itemProp="name" content="Scandic" />
        <nav className={styles.navBar}>
          <button
            aria-pressed="false"
            className={styles.expanderBtn}
            type="button"
          >
            <span className={styles.iconBars}></span>
            <span className={styles.hiddenAccessible}>Menu</span>
          </button>

          <a className={styles.logoLink} href={""}>
            <Image
              alt="Scandic Hotels logo"
              className={styles.logo}
              data-js="scandiclogoimg"
              itemProp="logo"
              height={20}
              src={"/_static/img/scandic-logotype.png"}
              width={200}
            />
          </a>

          <ul className={styles.listWrapper}>
            {Array.from({ length: 5 }, () => "").map((_, i) => (
              <li className={`${styles.li} ${styles.skeletonWrapper}`} key={i}>
                <SkeletonShimmer height="22px" width="130px" />
              </li>
            ))}
          </ul>
          <div className={styles.buttonContainer}>
            <BookingButton href={""} />
          </div>
        </nav>
      </div>
    </div>
  )
}