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

Approved-by: Linus Flood

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>
   )
 }

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>
       )}
     </>

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) {

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
 }

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>
   )
 }

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 {