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

"use client"

import { useSession } from "next-auth/react"
import { useIntl } from "react-intl"

import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import { Avatar } from "@scandic-hotels/design-system/Avatar"
import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"

import useLang from "@/hooks/useLang"
import { useLazyPathname } from "@/hooks/useLazyPathname"
import { isValidClientSession } from "@/utils/clientSession"
import { trackLoginClick } from "@/utils/tracking"

import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
import MyPagesMobileMenu, {
  MyPagesMobileMenuSkeleton,
} from "../MyPagesMobileMenu"

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

export default function MyPagesMenuWrapper() {
  const intl = useIntl()
  const lang = useLang()
  const loginPathname = useLazyPathname()

  const { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)

  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery()
  const { data: membership, isLoading: isLoadingMembership } =
    trpc.user.safeMembershipLevel.useQuery()

  const { data: membershipLevel, isLoading: isLoadingMembershipLevel } =
    trpc.contentstack.loyaltyLevels.byLevel.useQuery(
      {
        lang: lang,
        level: MembershipLevelEnum[membership?.membershipLevel ?? "L1"],
      },
      {
        enabled: !!membership?.membershipLevel,
      }
    )

  if (isLoadingUser || isLoadingMembership || isLoadingMembershipLevel) {
    return <MyPagesMenuWrapperSkeleton />
  }

  return (
    <>
      {isUserLoggedIn && user ? (
        <>
          <MyPagesMenu
            membershipLevel={membershipLevel ?? null}
            membership={membership}
            user={user}
          />
          <MyPagesMobileMenu
            membershipLevel={membershipLevel ?? null}
            membership={membership}
            user={user}
          />
        </>
      ) : (
        <LoginButton
          aria-label={intl.formatMessage({
            defaultMessage: "Log in/Join",
          })}
          className={styles.loginLink}
          lang={lang}
          onClick={() => {
            trackLoginClick("top menu")
          }}
          pathName={loginPathname}
          trackingId="loginStartNewTopMenu"
        >
          <Avatar />
          <Typography variant={"Body/Paragraph/mdRegular"}>
            <span className={styles.loginText}>
              {intl.formatMessage({
                defaultMessage: "Log in/Join",
              })}
            </span>
          </Typography>
        </LoginButton>
      )}
    </>
  )
}

export function MyPagesMenuWrapperSkeleton() {
  return (
    <div>
      <MyPagesMenuSkeleton />
      <MyPagesMobileMenuSkeleton />
    </div>
  )
}