feat(BOOK-212): Refactored LoginButton and added successful tracking functionality

Approved-by: Linus Flood
2025-11-11 06:57:49 +00:00
parent 1b35618eb2
commit c93e2b6f0b
8 changed files with 91 additions and 71 deletions
--- a/apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoLoginButton.tsx
+++ b/apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoLoginButton.tsx
@@ -2,9 +2,8 @@

 import { useIntl } from "react-intl"

-import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
-import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import { trackEvent } from "@scandic-hotels/tracking/base"

 import useLang from "@/hooks/useLang"
@@ -12,13 +11,13 @@ import useLang from "@/hooks/useLang"
 export default function PromoLoginButton() {
  const lang = useLang()
  const intl = useIntl()
-  const pathname = useLazyPathname()
-  const loginHref = pathname
-    ? `${login[lang]}?redirectTo=${encodeURIComponent(pathname)}`
-    : login[lang]
+  const loginPathname = useLazyPathname({ includeSearchParams: true })

  return (
-    <ButtonLink
+    <LoginButton
+      lang={lang}
+      redirectTo={loginPathname}
+      loginPosition="promo-campaign"
      onClick={() =>
        trackEvent({
          event: "loginStart",
@@ -29,16 +28,14 @@ export default function PromoLoginButton() {
          },
        })
      }
-      href={loginHref}
      variant="Primary"
      color="Inverted"
      size="Medium"
-      prefetch={false}
    >
      {intl.formatMessage({
        id: "promoCampaign.logIn",
        defaultMessage: "Log in",
      })}
-    </ButtonLink>
+    </LoginButton>
  )
 }
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -7,7 +7,6 @@ import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membership
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 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 { isValidSession } from "@scandic-hotels/trpc/utils/session"

@@ -75,17 +74,18 @@ export default function MyPagesMenuWrapper() {
            trackLoginClick("top menu")
          }}
          redirectTo={loginPathname}
-          trackingId="loginStartNewTopMenu"
+          loginPosition="top-menu"
+          variant="Text"
+          typography="Body/Paragraph/mdBold"
+          wrapping={false}
        >
          <Avatar />
-          <Typography variant={"Body/Paragraph/mdBold"}>
-            <span className={styles.loginText}>
-              {intl.formatMessage({
-                id: "header.logInJoin",
-                defaultMessage: "Log in/Join",
-              })}
-            </span>
-          </Typography>
+          <span className={styles.loginText}>
+            {intl.formatMessage({
+              id: "header.logInJoin",
+              defaultMessage: "Log in/Join",
+            })}
+          </span>
        </LoginButton>
      )}
    </>
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
@@ -1,7 +1,5 @@
-.loginLink {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
+.loginLink:hover {
+  text-decoration: none !important; /* Special case for the login link inside the header */
 }

@media screen and (max-width: 767px) {
--- a/apps/scandic-web/components/RouteChange.tsx
+++ b/apps/scandic-web/components/RouteChange.tsx
@@ -6,6 +6,7 @@ import { startTransition, useEffect } from "react"
 import { isSameBookingWidgetParams } from "@scandic-hotels/booking-flow/utils/isSameBooking"
 import useRouterTransitionStore from "@scandic-hotels/common/stores/router-transition"
 import useTrackingStore from "@scandic-hotels/common/stores/tracking"
+import { trackEvent } from "@scandic-hotels/tracking/base"

 import useLang from "@/hooks/useLang"
 import { trackPageViewStart } from "@/utils/tracking"
@@ -57,5 +58,26 @@ export default function RouteChange() {
    startRouterTransition,
  ])

+  // Track login success if loginPosition param is present. The LoginButton component has a
+  // loginPosition prop that adds this param to the URL upon successful login.
+  useEffect(() => {
+    const loginPosition = searchParams.get("loginPosition")
+    if (loginPosition) {
+      const position = `${loginPosition}, ${pathName}`
+      trackEvent({
+        event: "loginSuccess",
+        login: {
+          position,
+        },
+      })
+
+      const params = new URLSearchParams(searchParams)
+      params.delete("loginPosition")
+      const search = params.toString()
+      const newUrl = search ? `${pathName}?${search}` : pathName
+      window.history.replaceState(null, "", newUrl)
+    }
+  }, [pathName, searchParams])
+
  return null
 }
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
 import { trackLoginClick } from "@/utils/tracking"
@@ -22,17 +21,18 @@ export function LoyaltyLoginButton() {
        trackLoginClick("join scandic friends sidebar")
      }}
      redirectTo={loginPathname}
-      trackingId="loginJoinLoyalty"
+      loginPosition="scandic-friends-sidebar"
+      variant="Text"
+      typography="Body/Supporting text (caption)/smBold"
+      wrapping={false}
    >
      <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
-      <Typography variant={"Body/Paragraph/mdRegular"}>
-        <span>
-          {intl.formatMessage({
-            id: "loyalty.loginButton",
-            defaultMessage: "Log in here",
-          })}
-        </span>
-      </Typography>
+      <span>
+        {intl.formatMessage({
+          id: "loyalty.loginButton",
+          defaultMessage: "Log in here",
+        })}
+      </span>
    </LoginButton>
  )
 }
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -17,6 +17,7 @@ article.wrapper .preamble {
 .loginContainer {
  display: grid;
  gap: var(--Spacing-x2);
+  justify-items: start;
 }

 .button {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
@@ -7,7 +7,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
@@ -74,23 +73,23 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
        </Typography>
      </Checkbox>

-      <Button size="small" color="Primary" asChild>
-        <LoginButton
-          lang={lang}
-          className={styles.login}
-          color="white"
-          trackingId="join-scandic-friends-enter-details"
-          onClick={() => {
-            trackLoginClick("enter details")
-          }}
-          redirectTo={loginPathname}
-        >
-          {intl.formatMessage({
-            id: "enterDetails.joinScandicFriendsCard.loginButtonText",
-            defaultMessage: "Log in",
-          })}
-        </LoginButton>
-      </Button>
+      <LoginButton
+        color="Primary"
+        variant="Tertiary"
+        size="Small"
+        lang={lang}
+        className={styles.login}
+        loginPosition="enter-details"
+        onClick={() => {
+          trackLoginClick("enter details")
+        }}
+        redirectTo={loginPathname}
+      >
+        {intl.formatMessage({
+          id: "enterDetails.joinScandicFriendsCard.loginButtonText",
+          defaultMessage: "Log in",
+        })}
+      </LoginButton>

      <div className={styles.terms}>
        <Footnote color="uiTextPlaceholder">
--- a/packages/design-system/lib/components/LoginButton/index.tsx
+++ b/packages/design-system/lib/components/LoginButton/index.tsx
@@ -1,31 +1,34 @@
 'use client'

 import { login } from '@scandic-hotels/common/constants/routes/handleAuth'
-import Link, { type LinkProps } from '../OldDSLink'

 import type { Lang } from '@scandic-hotels/common/constants/language'
-import type { PropsWithChildren } from 'react'
+import ButtonLink, { ButtonLinkProps } from '../ButtonLink'
+
+interface LoginButtonProps
+  extends React.PropsWithChildren<Omit<ButtonLinkProps, 'href'>> {
+  lang: Lang
+  redirectTo: string | null
+  loginPosition: string
+}

 export function LoginButton({
  lang,
  redirectTo,
-  trackingId,
-  children,
+  loginPosition,
  ...props
-}: PropsWithChildren<
-  {
-    lang: Lang
-    redirectTo: string | null
-    trackingId: string
-  } & Omit<LinkProps, 'href'>
->) {
-  const href = redirectTo
-    ? `${login[lang]}?redirectTo=${encodeURIComponent(redirectTo)}`
-    : login[lang]
+}: LoginButtonProps) {
+  let href = login[lang]

-  return (
-    <Link id={trackingId} href={href} prefetch={false} {...props}>
-      {children}
-    </Link>
-  )
+  if (redirectTo) {
+    const [pathname, existingQuery] = redirectTo.split('?')
+    const searchParams = new URLSearchParams(existingQuery)
+
+    searchParams.set('loginPosition', loginPosition)
+    const redirectUrl = `${pathname}?${searchParams.toString()}`
+
+    href = `${href}?redirectTo=${encodeURIComponent(redirectUrl)}`
+  }
+
+  return <ButtonLink href={href} prefetch={false} {...props} />
 }