Merged in chore/SW-3381-move-loginbutton-to-ds- (pull request #2752)

chore(SW-3381) Moved LoginButton to design system

* chore(SW-3381) Moved LoginButton to design system


Approved-by: Anton Gunnarsson

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

@@ -5,20 +5,21 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 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 LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
 import useLang from "@/hooks/useLang"
-import { trackClick } from "@/utils/tracking"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
+import { trackClick, trackLoginClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
 
@@ -42,6 +43,7 @@ export function MainMenu({
   const lang = useLang()
   const pathname = usePathname()
   const baseUrl = env.NEXT_PUBLIC_PUBLIC_URL || "https://www.scandichotels.com"
+  const loginPathname = useLazyPathname()
 
   const isThreeStaticPagesPathnames = [
     "/de/sponsoring",
@@ -149,9 +151,13 @@ export function MainMenu({
                   </li>
                   <li className={styles.mobileLinkRow}>
                     <LoginButton
-                      position="hamburger menu"
+                      lang={lang}
+                      pathName={loginPathname}
                       trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
+                      onClick={() => {
+                        trackLoginClick("hamburger menu")
+                      }}
                     >
                       {intl.formatMessage({
                         defaultMessage: "Log in",

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

@@ -2,12 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import Title from "@scandic-hotels/design-system/Title"
 
-import { logout } from "@/constants/routes/handleAuth"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"

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

@@ -1,13 +1,15 @@
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { overview } from "@scandic-hotels/common/constants/routes/myPages"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
-import { logout } from "@/constants/routes/handleAuth"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
-import LoginButton from "@/components/LoginButton"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { getPathname } from "@/utils/getPathname"
+import { trackLoginClick } from "@/utils/tracking"
 
 import styles from "./topMenu.module.css"
 
@@ -26,6 +28,7 @@ export default async function TopMenu({
   const intl = await getIntl()
   const user = await getName()
   const lang = await getLang()
+  const pathname = await getPathname()
 
   return (
     <div className={styles.topMenu}>
@@ -71,10 +74,14 @@ export default async function TopMenu({
               </>
             ) : (
               <LoginButton
-                position="hamburger menu"
+                lang={lang}
+                pathName={pathname}
                 trackingId="loginStartTopMenu"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
                 size="small"
+                onClick={() => {
+                  trackLoginClick("hamburger menu")
+                }}
               >
                 {intl.formatMessage({
                   defaultMessage: "Log in",
@@ -91,6 +98,8 @@ export default async function TopMenu({
 export async function TopMenuSkeleton() {
   const intl = await getIntl()
   const links = new Array(5).fill("")
+  const lang = await getLang()
+  const pathname = await getPathname()
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>
@@ -102,10 +111,14 @@ export async function TopMenuSkeleton() {
           ))}
           <li className={styles.sessionContainer}>
             <LoginButton
-              position="hamburger menu"
+              lang={lang}
+              pathName={pathname}
               trackingId="loginStartTopMenu"
               className={`${styles.sessionLink} ${styles.loginLink}`}
               size="small"
+              onClick={() => {
+                trackLoginClick("hamburger menu")
+              }}
             >
               {intl.formatMessage({
                 defaultMessage: "Log in",