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

Approved-by: Linus Flood

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">

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