Merged in feat/SW-3461-setup-auth-with-sas-eurobonus (pull request #2825)

Feat/SW-3461 setup auth with sas eurobonus

* feat(SW-3461): Setup auth for sas eurobonus

* .

* feat: setup auth towards SAS

* Fix auth via SAS and add logout route

* .

* merge

* auth via SAS

* fix powered by scandic logo

* Merge branch 'master' of bitbucket.org:scandic-swap/web into feat/SW-3461-setup-auth-with-sas-eurobonus

* Include access_token in jwt after successful login

* merge


Approved-by: Anton Gunnarsson

apps/partner-sas/components/BookingFlowProviders.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider"
+import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
+
+import { useIsUserLoggedIn } from "../hooks/useIsUserLoggedIn"
+import {
+  trackAccordionItemOpen,
+  trackBedSelection,
+  trackBookingSearchClick,
+  trackBreakfastSelection,
+  trackGenericEvent,
+  trackGlaSaveCardAttempt,
+  trackLoginClick,
+  trackOpenSidePeek,
+  trackPaymentEvent,
+  trackUpdatePaymentMethod,
+} from "../utils/tracking"
+
+import type { ReactNode } from "react"
+
+export function BookingFlowProviders({ children }: { children: ReactNode }) {
+  const isLoggedIn = useIsUserLoggedIn()
+
+  return (
+    <BookingFlowContextProvider data={{ isLoggedIn }}>
+      <BookingFlowTrackingProvider
+        trackingFunctions={{
+          trackBookingSearchClick,
+          trackAccordionItemOpen,
+          trackOpenSidePeek,
+          trackGenericEvent,
+          trackGlaSaveCardAttempt,
+          trackLoginClick,
+          trackPaymentEvent,
+          trackUpdatePaymentMethod,
+          trackBreakfastSelection,
+          trackBedSelection,
+        }}
+      >
+        {children}
+      </BookingFlowTrackingProvider>
+    </BookingFlowContextProvider>
+  )
+}

apps/partner-sas/components/Header/Header.tsx

@@ -1,10 +1,22 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+
 import Image from "@scandic-hotels/design-system/Image"
+import Link from "@scandic-hotels/design-system/Link"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "@/hooks/useLang"
 
 import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
 
 import styles from "./header.module.css"
 
 export function Header() {
+  const lang = useLang()
+  const session = useSession()
+
   return (
     <>
       <header className={styles.header}>
@@ -16,6 +28,29 @@ export function Header() {
           width={90}
           sizes="100vw"
         />
+        {session.status === "loading" && (
+          <SkeletonShimmer width={"12ch"} height={"1ch"} />
+        )}
+        {session.status === "unauthenticated" && (
+          /** For some reason it complains about RSC-payload if using <Link /> */
+          <a href={`/${lang}/login?redirectTo=${window?.location.href}`}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {"Login here"}
+          </a>
+        )}
+        {session.status === "authenticated" && (
+          <div>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <span>
+                {session.data?.user && <>{session.data.user.email}</>}
+              </span>
+            </Typography>
+            <Link color={"white"} href={`/${lang}/logout`} prefetch={false}>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {"Logout"}
+            </Link>
+          </div>
+        )}
       </header>
       <div className={styles.poweredBy}>
         <PoweredByScandic />

apps/partner-sas/components/Header/header.module.css

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   padding: 16px;
+  justify-content: space-between;
 
   @media screen and (min-width: 768px) {
     padding: 20px 40px;

apps/partner-sas/components/PoweredByScandic/poweredByScandic.module.css

@@ -8,6 +8,5 @@
 .logo {
   max-height: 14px;
   max-width: 65px;
-  height: auto;
   width: 100%;
 }