Merge branch 'master' into feat/sw-929-release-preps

2024-11-27 19:13:21 +01:00
parent 4b85b01919 61696a0586
commit 267a47c61a
310 changed files with 7543 additions and 4417 deletions
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"

-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -20,12 +19,19 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/bedType"

 export default function BedType({ bedTypes }: BedTypeProps) {
-  const bedType = useDetailsStore((state) => state.data.bedType?.roomTypeCode)
-  const completeStep = useStepsStore((state) => state.completeStep)
-  const updateBedType = useDetailsStore((state) => state.actions.updateBedType)
+  const initialBedType = useEnterDetailsStore(
+    (state) => state.formValues?.bedType?.roomTypeCode
+  )
+  const bedType = useEnterDetailsStore((state) => state.bedType?.roomTypeCode)
+  const completeStep = useEnterDetailsStore(
+    (state) => state.actions.completeStep
+  )
+  const updateBedType = useEnterDetailsStore(
+    (state) => state.actions.updateBedType
+  )

  const methods = useForm<BedTypeFormSchema>({
-    defaultValues: bedType ? { bedType } : undefined,
+    defaultValues: initialBedType ? { bedType: initialBedType } : undefined,
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(bedTypeFormSchema),
@@ -43,10 +49,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
          roomTypeCode: matchingRoom.value,
        }
        updateBedType(bedType)
-        completeStep()
      }
    },
-    [bedTypes, completeStep, updateBedType]
+    [bedTypes, updateBedType]
  )

  useEffect(() => {
@@ -76,6 +81,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
              subtitle={width}
              title={roomType.description}
              value={roomType.value}
+              handleSelectedOnClick={
+                bedType === roomType.value ? completeStep : undefined
+              }
            />
          )
        })}
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -5,8 +5,7 @@ import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -24,20 +23,30 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 export default function Breakfast({ packages }: BreakfastProps) {
  const intl = useIntl()

-  const breakfast = useDetailsStore(({ data }) =>
-    data.breakfast
-      ? data.breakfast.code
-      : data.breakfast === false
+  const formValuesBreakfast = useEnterDetailsStore(({ formValues }) =>
+    formValues?.breakfast
+      ? formValues.breakfast.code
+      : formValues?.breakfast === false
        ? "false"
-        : data.breakfast
+        : undefined
  )
-  const updateBreakfast = useDetailsStore(
+  const breakfast = useEnterDetailsStore((state) =>
+    state.breakfast
+      ? state.breakfast.code
+      : state.breakfast === false
+        ? "false"
+        : undefined
+  )
+  const completeStep = useEnterDetailsStore(
+    (state) => state.actions.completeStep
+  )
+  const updateBreakfast = useEnterDetailsStore(
    (state) => state.actions.updateBreakfast
  )
-  const completeStep = useStepsStore((state) => state.completeStep)
-
  const methods = useForm<BreakfastFormSchema>({
-    defaultValues: breakfast ? { breakfast } : undefined,
+    defaultValues: formValuesBreakfast
+      ? { breakfast: formValuesBreakfast }
+      : undefined,
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(breakfastFormSchema),
@@ -52,9 +61,8 @@ export default function Breakfast({ packages }: BreakfastProps) {
      } else {
        updateBreakfast(false)
      }
-      completeStep()
    },
-    [completeStep, packages, updateBreakfast]
+    [packages, updateBreakfast]
  )

  useEffect(() => {
@@ -97,6 +105,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
            })}
            title={intl.formatMessage({ id: "Breakfast buffet" })}
            value={pkg.code}
+            handleSelectedOnClick={
+              breakfast === pkg.code ? completeStep : undefined
+            }
          />
        ))}
        <RadioCard
@@ -113,6 +124,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
          })}
          title={intl.formatMessage({ id: "No breakfast" })}
          value="false"
+          handleSelectedOnClick={
+            breakfast === "false" ? completeStep : undefined
+          }
        />
      </form>
    </FormProvider>
--- a/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
@@ -14,7 +14,7 @@ import useLang from "@/hooks/useLang"

 import styles from "./joinScandicFriendsCard.module.css"

-import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"

 export default function JoinScandicFriendsCard({
  name,
@@ -65,7 +65,6 @@ export default function JoinScandicFriendsCard({
          position="enter details"
          trackingId="join-scandic-friends-enter-details"
          variant="breadcrumb"
-          target="_blank"
        >
          {intl.formatMessage({ id: "Log in" })}
        </LoginButton>
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -4,8 +4,7 @@ import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -27,45 +26,35 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
  const intl = useIntl()
-  const initialData = useDetailsStore((state) => ({
-    countryCode: state.data.countryCode,
-    email: state.data.email,
-    firstName: state.data.firstName,
-    lastName: state.data.lastName,
-    phoneNumber: state.data.phoneNumber,
-    join: state.data.join,
-    dateOfBirth: state.data.dateOfBirth,
-    zipCode: state.data.zipCode,
-    membershipNo: state.data.membershipNo,
-  }))
-
-  const updateDetails = useDetailsStore((state) => state.actions.updateDetails)
-  const completeStep = useStepsStore((state) => state.completeStep)
+  const initialData = useEnterDetailsStore((state) => state.formValues.guest)
+  const join = useEnterDetailsStore((state) => state.guest.join)
+  const updateDetails = useEnterDetailsStore(
+    (state) => state.actions.updateDetails
+  )

  const methods = useForm<DetailsSchema>({
-    defaultValues: {
-      countryCode: user?.address?.countryCode ?? initialData.countryCode,
-      email: user?.email ?? initialData.email,
-      firstName: user?.firstName ?? initialData.firstName,
-      lastName: user?.lastName ?? initialData.lastName,
-      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
-      join: initialData.join,
-      dateOfBirth: initialData.dateOfBirth,
-      zipCode: initialData.zipCode,
-      membershipNo: initialData.membershipNo,
-    },
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
    reValidateMode: "onChange",
+    values: {
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+      dateOfBirth: initialData.dateOfBirth,
+      email: user?.email ?? initialData.email,
+      firstName: user?.firstName ?? initialData.firstName,
+      join,
+      lastName: user?.lastName ?? initialData.lastName,
+      membershipNo: initialData.membershipNo,
+      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
+      zipCode: initialData.zipCode,
+    },
  })

  const onSubmit = useCallback(
    (values: DetailsSchema) => {
      updateDetails(values)
-      completeStep()
    },
-    [completeStep, updateDetails]
+    [updateDetails]
  )

  return (
--- a/components/HotelReservation/EnterDetails/Details/schema.ts
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -38,7 +38,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
    join: z.literal<boolean>(true),
    zipCode: z.string().min(1, { message: "Zip code is required" }),
    dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
-    membershipNo: z.string().optional(),
+    membershipNo: z.string().default(""),
  })
 )

@@ -50,9 +50,16 @@ export const guestDetailsSchema = z.discriminatedUnion("join", [
 // For signed in users we accept partial or invalid data. Users cannot
 // change their info in this flow, so we don't want to validate it.
 export const signedInDetailsSchema = z.object({
-  countryCode: z.string().optional(),
-  email: z.string().optional(),
-  firstName: z.string().optional(),
-  lastName: z.string().optional(),
-  phoneNumber: z.string().optional(),
+  countryCode: z.string().default(""),
+  email: z.string().default(""),
+  firstName: z.string().default(""),
+  lastName: z.string().default(""),
+  membershipNo: z.string().default(""),
+  phoneNumber: z.string().default(""),
+  join: z
+    .boolean()
+    .optional()
+    .transform((_) => false),
+  dateOfBirth: z.string().default(""),
+  zipCode: z.string().default(""),
 })
--- a/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
+++ b/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
@@ -0,0 +1,32 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import ChevronRight from "@/components/Icons/ChevronRight"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./header.module.css"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
+  const intl = useIntl()
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
+      theme="base"
+      size="small"
+      variant="icon"
+      intent="textInverted"
+      wrapping
+      className={styles.toggle}
+    >
+      {intl.formatMessage({ id: "See hotel details" })}
+      <ChevronRight height="14" color="white" />
+    </Button>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Header/header.module.css
+++ b/components/HotelReservation/EnterDetails/Header/header.module.css
@@ -0,0 +1,53 @@
+.header {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  position: relative;
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  background-color: rgba(57, 57, 57, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--Spacing-x2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.toggle {
+  padding: 0px !important;
+}
+
+@media (min-width: 768px) {
+  .wrapper {
+    padding: var(--Spacing-x3) var(--Spacing-x3);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    padding: var(--Spacing-x6) var(--Spacing-x5);
+  }
+}
--- a/components/HotelReservation/EnterDetails/Header/index.tsx
+++ b/components/HotelReservation/EnterDetails/Header/index.tsx
@@ -0,0 +1,53 @@
+import Image from "@/components/Image"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
+
+import ToggleSidePeek from "./ToggleSidePeek"
+
+import styles from "./header.module.css"
+
+import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
+
+export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
+  const intl = await getIntl()
+  const hotel = hotelData.data.attributes
+
+  const image = hotel.hotelContent?.images
+  return (
+    <header className={styles.header}>
+      <Image
+        className={styles.hero}
+        alt={image.metaData.altText || image.metaData.altText_En || ""}
+        src={image.imageSizes.large}
+        height={200}
+        width={1196}
+      />
+      <div className={styles.wrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h1" level="h1" color="white">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="white">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <Caption color="white">∙</Caption>
+            <Caption color="white">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <ToggleSidePeek hotelId={hotel.operaId} />
+      </div>
+    </header>
+  )
+}
--- a/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx
+++ b/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx
@@ -2,11 +2,11 @@

 import { useCallback, useEffect } from "react"

-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 export default function HistoryStateManager() {
-  const setCurrentStep = useStepsStore((state) => state.setStep)
-  const currentStep = useStepsStore((state) => state.currentStep)
+  const setCurrentStep = useEnterDetailsStore((state) => state.actions.setStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)

  const handleBackButton = useCallback(
    (event: PopStateEvent) => {
--- a/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+import { detailsStorageName } from "@/stores/enter-details"
+
+import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import type { DetailsState } from "@/types/stores/enter-details"
+
+export default function PaymentCallback({
+  returnUrl,
+  searchObject,
+}: {
+  returnUrl: string
+  searchObject: URLSearchParams
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const bookingData = window.sessionStorage.getItem(detailsStorageName)
+
+    if (bookingData) {
+      const detailsStorage: Record<
+        "state",
+        Pick<DetailsState, "booking">
+      > = JSON.parse(bookingData)
+      const searchParams = createQueryParamsForEnterDetails(
+        detailsStorage.state.booking,
+        searchObject
+      )
+
+      if (searchParams.size > 0) {
+        router.replace(`${returnUrl}?${searchParams.toString()}`)
+      }
+    }
+  }, [returnUrl, router, searchObject])
+
+  return <LoadingSpinner />
+}
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -2,8 +2,7 @@

 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
-import { Label as AriaLabel } from "react-aria-components"
+import { useCallback, useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

@@ -16,9 +15,10 @@ import {
  bookingTermsAndConditions,
  privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { selectRate } from "@/constants/routes/hotelReservation"
 import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
-import { useDetailsStore } from "@/stores/details"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -27,11 +27,13 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
+import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
 import useLang from "@/hooks/useLang"

 import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
+import PriceChangeDialog from "../PriceChangeDialog"
 import GuaranteeDetails from "./GuaranteeDetails"
 import PaymentOption from "./PaymentOption"
 import { PaymentFormData, paymentSchema } from "./schema"
@@ -39,7 +41,7 @@ import { PaymentFormData, paymentSchema } from "./schema"
 import styles from "./payment.module.css"

 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
+import type { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"

 const maxRetries = 4
 const retryInterval = 2000
@@ -51,6 +53,7 @@ function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
 }

 export default function Payment({
+  user,
  roomPrice,
  otherPaymentOptions,
  savedCreditCards,
@@ -59,30 +62,28 @@ export default function Payment({
  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
-  const queryParams = useSearchParams()
-  const { booking, ...userData } = useDetailsStore((state) => state.data)
-  const setIsSubmittingDisabled = useDetailsStore(
+  const searchParams = useSearchParams()
+  const totalPrice = useEnterDetailsStore((state) => state.totalPrice)
+  const { bedType, booking, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    booking: state.booking,
+    breakfast: state.breakfast,
+  }))
+  const userData = useEnterDetailsStore((state) => state.guest)
+  const setIsSubmittingDisabled = useEnterDetailsStore(
    (state) => state.actions.setIsSubmittingDisabled
  )

-  const {
-    firstName,
-    lastName,
-    email,
-    phoneNumber,
-    countryCode,
-    breakfast,
-    bedType,
-    membershipNo,
-    join,
-    dateOfBirth,
-    zipCode,
-  } = userData
-  const { toDate, fromDate, rooms, hotel } = booking
-
  const [confirmationNumber, setConfirmationNumber] = useState<string>("")
-  const [availablePaymentOptions, setAvailablePaymentOptions] =
-    useState(otherPaymentOptions)
+  const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
+    useState(false)
+
+  const availablePaymentOptions =
+    useAvailablePaymentOptions(otherPaymentOptions)
+  const [priceChangeData, setPriceChangeData] = useState<{
+    oldPrice: number
+    newPrice: number
+  } | null>()

  usePaymentFailedToast()

@@ -103,6 +104,15 @@ export default function Payment({
    onSuccess: (result) => {
      if (result?.confirmationNumber) {
        setConfirmationNumber(result.confirmationNumber)
+
+        if (result.metadata?.priceChangedMetadata) {
+          setPriceChangeData({
+            oldPrice: roomPrice.publicPrice,
+            newPrice: result.metadata.priceChangedMetadata.totalPrice,
+          })
+        } else {
+          setIsPollingForBookingStatus(true)
+        }
      } else {
        toast.error(
          intl.formatMessage({
@@ -121,25 +131,31 @@ export default function Payment({
    },
  })

+  const priceChange = trpc.booking.priceChange.useMutation({
+    onSuccess: (result) => {
+      if (result?.confirmationNumber) {
+        setIsPollingForBookingStatus(true)
+      } else {
+        toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+      }
+
+      setPriceChangeData(null)
+    },
+    onError: (error) => {
+      console.error("Error", error)
+      setPriceChangeData(null)
+      toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+    },
+  })
+
  const bookingStatus = useHandleBookingStatus({
    confirmationNumber,
    expectedStatus: BookingStatusEnum.BookingCompleted,
    maxRetries,
    retryInterval,
+    enabled: isPollingForBookingStatus,
  })

-  useEffect(() => {
-    if (window.ApplePaySession) {
-      setAvailablePaymentOptions(otherPaymentOptions)
-    } else {
-      setAvailablePaymentOptions(
-        otherPaymentOptions.filter(
-          (option) => option !== PaymentMethodEnum.applePay
-        )
-      )
-    }
-  }, [otherPaymentOptions, setAvailablePaymentOptions])
-
  useEffect(() => {
    if (bookingStatus?.data?.paymentUrl) {
      router.push(bookingStatus.data.paymentUrl)
@@ -162,76 +178,102 @@ export default function Payment({
    setIsSubmittingDisabled,
  ])

-  function handleSubmit(data: PaymentFormData) {
-    const allQueryParams =
-      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+  const handleSubmit = useCallback(
+    (data: PaymentFormData) => {
+      const {
+        firstName,
+        lastName,
+        email,
+        phoneNumber,
+        countryCode,
+        membershipNo,
+        join,
+        dateOfBirth,
+        zipCode,
+      } = userData
+      const { toDate, fromDate, rooms, hotel } = booking

-    // set payment method to card if saved card is submitted
-    const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
-      ? data.paymentMethod
-      : PaymentMethodEnum.card
+      // set payment method to card if saved card is submitted
+      const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
+        ? data.paymentMethod
+        : PaymentMethodEnum.card

-    const savedCreditCard = savedCreditCards?.find(
-      (card) => card.id === data.paymentMethod
-    )
+      const savedCreditCard = savedCreditCards?.find(
+        (card) => card.id === data.paymentMethod
+      )

-    initiateBooking.mutate({
-      hotelId: hotel,
-      checkInDate: fromDate,
-      checkOutDate: toDate,
-      rooms: rooms.map((room) => ({
-        adults: room.adults,
-        childrenAges: room.children?.map((child) => ({
-          age: child.age,
-          bedType: bedTypeMap[parseInt(child.bed.toString())],
+      const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback`
+
+      initiateBooking.mutate({
+        hotelId: hotel,
+        checkInDate: fromDate,
+        checkOutDate: toDate,
+        rooms: rooms.map((room) => ({
+          adults: room.adults,
+          childrenAges: room.children?.map((child) => ({
+            age: child.age,
+            bedType: bedTypeMap[parseInt(child.bed.toString())],
+          })),
+          rateCode:
+            user || join || membershipNo ? room.counterRateCode : room.rateCode,
+          roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
+          guest: {
+            firstName,
+            lastName,
+            email,
+            phoneNumber,
+            countryCode,
+            membershipNumber: membershipNo,
+            becomeMember: join,
+            dateOfBirth,
+            postalCode: zipCode,
+          },
+          packages: {
+            breakfast: !!(breakfast && breakfast.code),
+            allergyFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ??
+              false,
+            petFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
+            accessibility:
+              room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
+              false,
+          },
+          smsConfirmationRequested: data.smsConfirmation,
+          roomPrice,
        })),
-        rateCode: room.rateCode,
-        roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
-        guest: {
-          title: "",
-          firstName,
-          lastName,
-          email,
-          phoneNumber,
-          countryCode,
-          membershipNumber: membershipNo,
-          becomeMember: join,
-          dateOfBirth,
-          postalCode: zipCode,
-        },
-        packages: {
-          breakfast: !!(breakfast && breakfast.code),
-          allergyFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ?? false,
-          petFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
-          accessibility:
-            room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
-            false,
-        },
-        smsConfirmationRequested: data.smsConfirmation,
-        roomPrice,
-      })),
-      payment: {
-        paymentMethod,
-        card: savedCreditCard
-          ? {
-              alias: savedCreditCard.alias,
-              expiryDate: savedCreditCard.expirationDate,
-              cardType: savedCreditCard.cardType,
-            }
-          : undefined,
+        payment: {
+          paymentMethod,
+          card: savedCreditCard
+            ? {
+                alias: savedCreditCard.alias,
+                expiryDate: savedCreditCard.expirationDate,
+                cardType: savedCreditCard.cardType,
+              }
+            : undefined,

-        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
-        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
-        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
-      },
-    })
-  }
+          success: `${paymentRedirectUrl}/success`,
+          error: `${paymentRedirectUrl}/error`,
+          cancel: `${paymentRedirectUrl}/cancel`,
+        },
+      })
+    },
+    [
+      breakfast,
+      bedType,
+      userData,
+      booking,
+      roomPrice,
+      savedCreditCards,
+      lang,
+      user,
+      initiateBooking,
+    ]
+  )

  if (
    initiateBooking.isPending ||
-    (confirmationNumber && !bookingStatus.data?.paymentUrl)
+    (isPollingForBookingStatus && !bookingStatus.data?.paymentUrl)
  ) {
    return <LoadingSpinner />
  }
@@ -241,79 +283,70 @@ export default function Payment({
  const paymentVerb = mustBeGuaranteed ? guaranteeing : paying

  return (
-    <FormProvider {...methods}>
-      <form
-        className={styles.paymentContainer}
-        onSubmit={methods.handleSubmit(handleSubmit)}
-        id={formId}
-      >
-        {mustBeGuaranteed ? (
+    <>
+      <FormProvider {...methods}>
+        <form
+          className={styles.paymentContainer}
+          onSubmit={methods.handleSubmit(handleSubmit)}
+          id={formId}
+        >
+          {mustBeGuaranteed ? (
+            <section className={styles.section}>
+              <Body>
+                {intl.formatMessage({
+                  id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
+                })}
+              </Body>
+              <GuaranteeDetails />
+            </section>
+          ) : null}
+          {savedCreditCards?.length ? (
+            <section className={styles.section}>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "MY SAVED CARDS" })}
+              </Body>
+              <div className={styles.paymentOptionContainer}>
+                {savedCreditCards?.map((savedCreditCard) => (
+                  <PaymentOption
+                    key={savedCreditCard.id}
+                    name="paymentMethod"
+                    value={savedCreditCard.id}
+                    label={
+                      PAYMENT_METHOD_TITLES[
+                        savedCreditCard.cardType as PaymentMethodEnum
+                      ]
+                    }
+                    cardNumber={savedCreditCard.truncatedNumber}
+                  />
+                ))}
+              </div>
+            </section>
+          ) : null}
          <section className={styles.section}>
-            <Body>
-              {intl.formatMessage({
-                id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
-              })}
-            </Body>
-            <GuaranteeDetails />
-          </section>
-        ) : null}
-        {savedCreditCards?.length ? (
-          <section className={styles.section}>
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "MY SAVED CARDS" })}
-            </Body>
+            {savedCreditCards?.length ? (
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
+              </Body>
+            ) : null}
            <div className={styles.paymentOptionContainer}>
-              {savedCreditCards?.map((savedCreditCard) => (
+              <PaymentOption
+                name="paymentMethod"
+                value={PaymentMethodEnum.card}
+                label={intl.formatMessage({ id: "Credit card" })}
+              />
+              {availablePaymentOptions.map((paymentMethod) => (
                <PaymentOption
-                  key={savedCreditCard.id}
+                  key={paymentMethod}
                  name="paymentMethod"
-                  value={savedCreditCard.id}
+                  value={paymentMethod}
                  label={
-                    PAYMENT_METHOD_TITLES[
-                      savedCreditCard.cardType as PaymentMethodEnum
-                    ]
+                    PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                  }
-                  cardNumber={savedCreditCard.truncatedNumber}
                />
              ))}
            </div>
          </section>
-        ) : null}
-        <section className={styles.section}>
-          {savedCreditCards?.length ? (
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
-            </Body>
-          ) : null}
-          <div className={styles.paymentOptionContainer}>
-            <PaymentOption
-              name="paymentMethod"
-              value={PaymentMethodEnum.card}
-              label={intl.formatMessage({ id: "Credit card" })}
-            />
-            {availablePaymentOptions.map((paymentMethod) => (
-              <PaymentOption
-                key={paymentMethod}
-                name="paymentMethod"
-                value={paymentMethod}
-                label={
-                  PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
-                }
-              />
-            ))}
-          </div>
-        </section>
-        <section className={styles.section}>
-          <Checkbox name="smsConfirmation">
-            <Caption>
-              {intl.formatMessage({
-                id: "I would like to get my booking confirmation via sms",
-              })}
-            </Caption>
-          </Checkbox>
-
-          <AriaLabel className={styles.terms}>
-            <Checkbox name="termsAndConditions" />
+          <section className={styles.section}>
            <Caption>
              {intl.formatMessage<React.ReactNode>(
                {
@@ -344,19 +377,48 @@ export default function Payment({
                }
              )}
            </Caption>
-          </AriaLabel>
-        </section>
-        <div className={styles.submitButton}>
-          <Button
-            type="submit"
-            disabled={
-              !methods.formState.isValid || methods.formState.isSubmitting
-            }
-          >
-            {intl.formatMessage({ id: "Complete booking" })}
-          </Button>
-        </div>
-      </form>
-    </FormProvider>
+            <Checkbox name="termsAndConditions">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I accept the terms and conditions",
+                })}
+              </Caption>
+            </Checkbox>
+            <Checkbox name="smsConfirmation">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I would like to get my booking confirmation via sms",
+                })}
+              </Caption>
+            </Checkbox>
+          </section>
+          <div className={styles.submitButton}>
+            <Button
+              type="submit"
+              disabled={
+                !methods.formState.isValid || methods.formState.isSubmitting
+              }
+            >
+              {intl.formatMessage({ id: "Complete booking" })}
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
+      {priceChangeData ? (
+        <PriceChangeDialog
+          isOpen={!!priceChangeData}
+          oldPrice={priceChangeData.oldPrice}
+          newPrice={priceChangeData.newPrice}
+          currency={totalPrice.local.currency}
+          onCancel={() => {
+            const allSearchParams = searchParams.size
+              ? `?${searchParams.toString()}`
+              : ""
+            router.push(`${selectRate(lang)}${allSearchParams}`)
+          }}
+          onAccept={() => priceChange.mutate({ confirmationNumber })}
+        />
+      ) : null}
+    </>
  )
 }
--- a/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
+++ b/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
@@ -0,0 +1,73 @@
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./priceChangeDialog.module.css"
+
+import { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"
+
+export default function PriceChangeDialog({
+  isOpen,
+  oldPrice,
+  newPrice,
+  currency,
+  onCancel,
+  onAccept,
+}: PriceChangeDialogProps) {
+  const intl = useIntl()
+  const title = intl.formatMessage({ id: "The price has increased" })
+
+  return (
+    <ModalOverlay
+      className={styles.overlay}
+      isOpen={isOpen}
+      isKeyboardDismissDisabled
+    >
+      <Modal className={styles.modal}>
+        <Dialog aria-label={title} className={styles.dialog}>
+          <header className={styles.header}>
+            <div className={styles.titleContainer}>
+              <InfoCircleIcon height={48} width={48} color="burgundy" />
+              <Title
+                level="h1"
+                as="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {title}
+              </Title>
+            </div>
+            <Body textAlign="center">
+              {intl.formatMessage({
+                id: "The price has increased since you selected your room.",
+              })}
+              <br />
+              {intl.formatMessage({
+                id: "You can still book the room but you need to confirm that you accept the new price",
+              })}
+              <br />
+              <span className={styles.oldPrice}>
+                {intl.formatNumber(oldPrice, { style: "currency", currency })}
+              </span>{" "}
+              <strong className={styles.newPrice}>
+                {intl.formatNumber(newPrice, { style: "currency", currency })}
+              </strong>
+            </Body>
+          </header>
+          <footer className={styles.footer}>
+            <Button intent="secondary" onClick={onCancel}>
+              {intl.formatMessage({ id: "Cancel" })}
+            </Button>
+            <Button onClick={onAccept}>
+              {intl.formatMessage({ id: "Accept new price" })}
+            </Button>
+          </footer>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
--- a/components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -0,0 +1,85 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: var(--visual-viewport-height);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  &[data-entering] {
+    animation: slide-up 200ms;
+  }
+  &[data-exiting] {
+    animation: slide-up 200ms reverse ease-in-out;
+  }
+}
+
+.dialog {
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x5) var(--Spacing-x4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: var(--Spacing-x2);
+}
+
+.oldPrice {
+  text-decoration: line-through;
+}
+
+.newPrice {
+  font-size: 1.2em;
+}
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -2,8 +2,7 @@
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"

-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"

 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -11,53 +10,50 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import styles from "./sectionAccordion.module.css"

-import { StepStoreKeys } from "@/types/components/hotelReservation/enterDetails/step"
-import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
+import type { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
 import { StepEnum } from "@/types/enums/step"

 export default function SectionAccordion({
+  children,
  header,
  label,
  step,
-  children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
  const intl = useIntl()
-  const currentStep = useStepsStore((state) => state.currentStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
  const [isComplete, setIsComplete] = useState(false)
  const [isOpen, setIsOpen] = useState(false)
-  const isValid = useDetailsStore((state) => state.isValid[step])
-  const navigate = useStepsStore((state) => state.navigate)
-  const stepData = useDetailsStore((state) => state.data)
-  const stepStoreKey = StepStoreKeys[step]
+  const isValid = useEnterDetailsStore((state) => state.isValid[step])
+  const navigate = useEnterDetailsStore((state) => state.actions.navigate)
+  const { bedType, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    breakfast: state.breakfast,
+  }))
  const [title, setTitle] = useState(label)

+  const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
+  const breakfastTitle = intl.formatMessage({ id: "Breakfast buffet" })
  useEffect(() => {
-    if (step === StepEnum.selectBed) {
-      const value = stepData.bedType
-      value && setTitle(value.description)
+    if (step === StepEnum.selectBed && bedType) {
+      setTitle(bedType.description)
    }
    // If breakfast step, check if an option has been selected
-    if (
-      step === StepEnum.breakfast &&
-      (stepData.breakfast || stepData.breakfast === false)
-    ) {
-      const value = stepData.breakfast
-      if (value === false) {
-        setTitle(intl.formatMessage({ id: "No breakfast" }))
+    if (step === StepEnum.breakfast && breakfast !== undefined) {
+      if (breakfast === false) {
+        setTitle(noBreakfastTitle)
      } else {
-        setTitle(intl.formatMessage({ id: "Breakfast buffet" }))
+        setTitle(breakfastTitle)
      }
    }
-  }, [stepData, stepStoreKey, step, intl])
+  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])

  useEffect(() => {
-    // We need to set the state on mount because of hydration errors
    setIsComplete(isValid)
-  }, [isValid])
+  }, [isValid, setIsComplete])

  useEffect(() => {
    setIsOpen(currentStep === step)
-  }, [currentStep, step])
+  }, [currentStep, setIsOpen, step])

  function onModify() {
    navigate(step)
--- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -48,8 +48,6 @@
 }

 .selection {
-  font-weight: 450;
-  font-size: var(--typography-Title-4-fontSize);
  grid-area: selection;
 }

--- a/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
@@ -8,7 +8,7 @@ import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"

 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"

 export default function ToggleSidePeek({
  hotelId,
--- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -14,7 +14,7 @@ import ToggleSidePeek from "./ToggleSidePeek"

 import styles from "./selectedRoom.module.css"

-import { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"
+import type { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"

 export default function SelectedRoom({
  hotelId,
--- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -16,7 +16,7 @@
  justify-content: space-between;
  align-items: center;
  grid-template-areas:
-    "title button"
+    "title title"
    "description button";
 }

@@ -25,14 +25,13 @@
 }

 .description {
-  font-weight: 450;
-  font-size: var(--typography-Title-4-fontSize);
  grid-area: description;
 }

 .button {
  grid-area: button;
  justify-self: flex-end;
+  align-self: flex-start;
 }

 .iconWrapper {
--- a/components/HotelReservation/EnterDetails/StorageCleaner.tsx
+++ b/components/HotelReservation/EnterDetails/StorageCleaner.tsx
@@ -0,0 +1,26 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import { hotelreservation } from "@/constants/routes/hotelReservation"
+import { detailsStorageName } from "@/stores/enter-details"
+
+import useLang from "@/hooks/useLang"
+
+/**
+ * Cleanup component to make sure no stale data is left
+ * from previous booking when user is not in the booking
+ * flow anymore
+ */
+export default function StorageCleaner() {
+  const lang = useLang()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!pathname.startsWith(hotelreservation(lang))) {
+      sessionStorage.removeItem(detailsStorageName)
+    }
+  }, [lang, pathname])
+
+  return null
+}
--- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css
+++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css
@@ -1,70 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-rows: 0fr 7.5em;
-
-  transition: 0.5s ease-in-out;
-  border-top: 1px solid var(--Base-Border-Subtle);
-  background: var(--Base-Surface-Primary-light-Normal);
-  align-content: end;
-}
-
-.bottomSheet {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
-    var(--Spacing-x3);
-  align-items: flex-start;
-  transition: 0.5s ease-in-out;
-}
-
-.priceDetailsButton {
-  display: block;
-  border: none;
-  background: none;
-  text-align: start;
-  transition: padding 0.5s ease-in-out;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.wrapper[data-open="true"] {
-  grid-template-rows: 1fr 7.5em;
-}
-
-.wrapper[data-open="true"] .bottomSheet {
-  grid-template-columns: 0fr auto;
-}
-
-.wrapper[data-open="true"] .priceDetailsButton {
-  animation: fadeOut 0.3s ease-out;
-  opacity: 0;
-  padding: 0;
-}
-
-.wrapper[data-open="false"] .priceDetailsButton {
-  animation: fadeIn 0.8s ease-in;
-  opacity: 1;
-}
-
-.content,
-.priceDetailsButton {
-  overflow: hidden;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
--- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx
@@ -1,62 +0,0 @@
-"use client"
-
-import { PropsWithChildren } from "react"
-import { useIntl } from "react-intl"
-
-import { useDetailsStore } from "@/stores/details"
-
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
-import { formId } from "../../Payment"
-
-import styles from "./bottomSheet.module.css"
-
-export function SummaryBottomSheet({ children }: PropsWithChildren) {
-  const intl = useIntl()
-
-  const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
-    useDetailsStore((state) => ({
-      isSummaryOpen: state.isSummaryOpen,
-      toggleSummaryOpen: state.actions.toggleSummaryOpen,
-      totalPrice: state.totalPrice,
-      isSubmittingDisabled: state.isSubmittingDisabled,
-    }))
-
-  return (
-    <div className={styles.wrapper} data-open={isSummaryOpen}>
-      <div className={styles.content}>{children}</div>
-      <div className={styles.bottomSheet}>
-        <button
-          data-open={isSummaryOpen}
-          onClick={toggleSummaryOpen}
-          className={styles.priceDetailsButton}
-        >
-          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
-          <Subtitle>
-            {intl.formatMessage(
-              { id: "{amount} {currency}" },
-              {
-                amount: intl.formatNumber(totalPrice.local.price),
-                currency: totalPrice.local.currency,
-              }
-            )}
-          </Subtitle>
-          <Caption color="baseTextHighContrast" type="underline">
-            {intl.formatMessage({ id: "See details" })}
-          </Caption>
-        </button>
-        <Button
-          intent="primary"
-          size="large"
-          type="submit"
-          disabled={isSubmittingDisabled}
-          form={formId}
-        >
-          {intl.formatMessage({ id: "Complete booking" })}
-        </Button>
-      </div>
-    </div>
-  )
-}
--- a/components/HotelReservation/EnterDetails/Summary/Client.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/Client.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Summary from "@/components/HotelReservation/Summary"
+import { SummaryBottomSheet } from "@/components/HotelReservation/Summary/BottomSheet"
+
+import styles from "./summary.module.css"
+
+import type { ClientSummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
+import type { DetailsState } from "@/types/stores/enter-details"
+
+function storeSelector(state: DetailsState) {
+  return {
+    bedType: state.bedType,
+    breakfast: state.breakfast,
+    fromDate: state.booking.fromDate,
+    join: state.guest.join,
+    membershipNo: state.guest.membershipNo,
+    packages: state.packages,
+    roomRate: state.roomRate,
+    roomPrice: state.roomPrice,
+    toDate: state.booking.toDate,
+    toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    totalPrice: state.totalPrice,
+  }
+}
+
+export default function ClientSummary({
+  adults,
+  cancellationText,
+  isMember,
+  kids,
+  memberRate,
+  rateDetails,
+  roomType,
+}: ClientSummaryProps) {
+  const {
+    bedType,
+    breakfast,
+    fromDate,
+    join,
+    membershipNo,
+    packages,
+    roomPrice,
+    toDate,
+    toggleSummaryOpen,
+    totalPrice,
+  } = useEnterDetailsStore(storeSelector)
+
+  const showMemberPrice = !!(isMember && memberRate) || join || !!membershipNo
+  const room = {
+    adults,
+    cancellationText,
+    children: kids,
+    packages,
+    rateDetails,
+    roomPrice,
+    roomType,
+  }
+
+  return (
+    <>
+      <div className={styles.mobileSummary}>
+        <SummaryBottomSheet>
+          <div className={styles.summary}>
+            <Summary
+              bedType={bedType}
+              breakfast={breakfast}
+              fromDate={fromDate}
+              showMemberPrice={showMemberPrice}
+              room={room}
+              toDate={toDate}
+              toggleSummaryOpen={toggleSummaryOpen}
+              totalPrice={totalPrice}
+            />
+          </div>
+        </SummaryBottomSheet>
+      </div>
+      <div className={styles.desktopSummary}>
+        <div className={styles.hider} />
+        <div className={styles.summary}>
+          <Summary
+            bedType={bedType}
+            breakfast={breakfast}
+            fromDate={fromDate}
+            showMemberPrice={showMemberPrice}
+            room={room}
+            toDate={toDate}
+            totalPrice={totalPrice}
+          />
+        </div>
+        <div className={styles.shadow} />
+      </div>
+    </>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -1,309 +1,57 @@
-"use client"
+import { redirect } from "next/navigation"

-import { useEffect, useState } from "react"
-import { ChevronDown } from "react-feather"
-import { useIntl } from "react-intl"
+import { selectRate } from "@/constants/routes/hotelReservation"
+import {
+  getProfileSafely,
+  getSelectedRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"

-import { dt } from "@/lib/dt"
-import { useDetailsStore } from "@/stores/details"
+import { generateChildrenString } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { getLang } from "@/i18n/serverContext"

-import { ArrowRightIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
-import Popover from "@/components/TempDesignSystem/Popover"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import useLang from "@/hooks/useLang"
+import ClientSummary from "./Client"

-import styles from "./summary.module.css"
+import type { SummaryPageProps } from "@/types/components/hotelReservation/summary"

-import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
-import type { SummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
-import type { DetailsState } from "@/types/stores/details"
+export default async function Summary({
+  adults,
+  fromDate,
+  hotelId,
+  kids,
+  packageCodes,
+  rateCode,
+  roomTypeCode,
+  toDate,
+}: SummaryPageProps) {
+  const lang = getLang()

-function storeSelector(state: DetailsState) {
-  return {
-    fromDate: state.data.booking.fromDate,
-    toDate: state.data.booking.toDate,
-    bedType: state.data.bedType,
-    breakfast: state.data.breakfast,
-    toggleSummaryOpen: state.actions.toggleSummaryOpen,
-    setTotalPrice: state.actions.setTotalPrice,
-    totalPrice: state.totalPrice,
+  const availability = await getSelectedRoomAvailability({
+    adults,
+    children: kids ? generateChildrenString(kids) : undefined,
+    hotelId,
+    packageCodes,
+    rateCode,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    roomTypeCode,
+  })
+  const user = await getProfileSafely()
+
+  if (!availability || !availability.selectedRoom) {
+    console.error("No hotel or availability data", availability)
+    // TODO: handle this case
+    redirect(selectRate(lang))
  }
-}
-
-export default function Summary({ showMemberPrice, room }: SummaryProps) {
-  const [chosenBed, setChosenBed] = useState<BedTypeSchema>()
-  const [chosenBreakfast, setChosenBreakfast] = useState<
-    BreakfastPackage | false
-  >()
-  const intl = useIntl()
-  const lang = useLang()
-  const {
-    bedType,
-    breakfast,
-    fromDate,
-    setTotalPrice,
-    toDate,
-    toggleSummaryOpen,
-    totalPrice,
-  } = useDetailsStore(storeSelector)
-
-  const diff = dt(toDate).diff(fromDate, "days")
-
-  const nights = intl.formatMessage(
-    { id: "booking.nights" },
-    { totalNights: diff }
-  )
-
-  let color: "uiTextHighContrast" | "red" = "uiTextHighContrast"
-  if (showMemberPrice) {
-    color = "red"
-  }
-
-  const additionalPackageCost = room.packages?.reduce(
-    (acc, curr) => {
-      acc.local = acc.local + parseInt(curr.localPrice.totalPrice)
-      acc.euro = acc.euro + parseInt(curr.requestedPrice.totalPrice)
-      return acc
-    },
-    { local: 0, euro: 0 }
-  ) || { local: 0, euro: 0 }
-
-  const roomsPriceLocal = room.localPrice.price + additionalPackageCost.local
-  const roomsPriceEuro = room.euroPrice
-    ? room.euroPrice.price + additionalPackageCost.euro
-    : undefined
-
-  useEffect(() => {
-    setChosenBed(bedType)
-
-    if (breakfast || breakfast === false) {
-      setChosenBreakfast(breakfast)
-      if (breakfast === false) {
-        setTotalPrice({
-          local: {
-            price: roomsPriceLocal,
-            currency: room.localPrice.currency,
-          },
-          euro:
-            room.euroPrice && roomsPriceEuro
-              ? {
-                  price: roomsPriceEuro,
-                  currency: room.euroPrice.currency,
-                }
-              : undefined,
-        })
-      } else {
-        setTotalPrice({
-          local: {
-            price: roomsPriceLocal + parseInt(breakfast.localPrice.totalPrice),
-            currency: room.localPrice.currency,
-          },
-          euro:
-            room.euroPrice && roomsPriceEuro
-              ? {
-                  price:
-                    roomsPriceEuro +
-                    parseInt(breakfast.requestedPrice.totalPrice),
-                  currency: room.euroPrice.currency,
-                }
-              : undefined,
-        })
-      }
-    }
-  }, [
-    bedType,
-    breakfast,
-    roomsPriceLocal,
-    room.localPrice.currency,
-    room.euroPrice,
-    roomsPriceEuro,
-    setTotalPrice,
-  ])

  return (
-    <section className={styles.summary}>
-      <header className={styles.header}>
-        <Subtitle className={styles.title} type="two">
-          {intl.formatMessage({ id: "Summary" })}
-        </Subtitle>
-        <Body className={styles.date} color="baseTextMediumContrast">
-          {dt(fromDate).locale(lang).format("ddd, D MMM")}
-          <ArrowRightIcon color="peach80" height={15} width={15} />
-          {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
-        </Body>
-        <Button
-          intent="text"
-          size="small"
-          className={styles.chevronButton}
-          onClick={toggleSummaryOpen}
-        >
-          <ChevronDown height="20" width="20" />
-        </Button>
-      </header>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.addOns}>
-        <div>
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">{room.roomType}</Body>
-            <Caption color={color}>
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: intl.formatNumber(room.localPrice.price),
-                  currency: room.localPrice.currency,
-                }
-              )}
-            </Caption>
-          </div>
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage(
-              { id: "booking.adults" },
-              { totalAdults: room.adults }
-            )}
-          </Caption>
-          {room.children?.length ? (
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "booking.children" },
-                { totalChildren: room.children.length }
-              )}
-            </Caption>
-          ) : null}
-          <Caption color="uiTextMediumContrast">
-            {room.cancellationText}
-          </Caption>
-          <Popover
-            placement="bottom left"
-            triggerContent={
-              <Caption color="burgundy" type="underline">
-                {intl.formatMessage({ id: "Rate details" })}
-              </Caption>
-            }
-          >
-            <aside className={styles.rateDetailsPopover}>
-              <header>
-                <Caption type="bold">{room.cancellationText}</Caption>
-              </header>
-              {room.rateDetails?.map((detail, idx) => (
-                <Caption key={`rateDetails-${idx}`}>{detail}</Caption>
-              ))}
-            </aside>
-          </Popover>
-        </div>
-        {room.packages
-          ? room.packages.map((roomPackage) => (
-              <div className={styles.entry} key={roomPackage.code}>
-                <div>
-                  <Body color="uiTextHighContrast">
-                    {roomPackage.description}
-                  </Body>
-                </div>
-
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage(
-                    { id: "{amount} {currency}" },
-                    {
-                      amount: roomPackage.localPrice.price,
-                      currency: roomPackage.localPrice.currency,
-                    }
-                  )}
-                </Caption>
-              </div>
-            ))
-          : null}
-        {chosenBed ? (
-          <div className={styles.entry}>
-            <div>
-              <Body color="uiTextHighContrast">{chosenBed.description}</Body>
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage({ id: "Based on availability" })}
-              </Caption>
-            </div>
-
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                { amount: "0", currency: room.localPrice.currency }
-              )}
-            </Caption>
-          </div>
-        ) : null}
-
-        {chosenBreakfast === false ? (
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "No breakfast" })}
-            </Body>
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                { amount: "0", currency: room.localPrice.currency }
-              )}
-            </Caption>
-          </div>
-        ) : chosenBreakfast?.code ? (
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "Breakfast buffet" })}
-            </Body>
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: chosenBreakfast.localPrice.totalPrice,
-                  currency: chosenBreakfast.localPrice.currency,
-                }
-              )}
-            </Caption>
-          </div>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.total}>
-        <div className={styles.entry}>
-          <div>
-            <Body>
-              {intl.formatMessage<React.ReactNode>(
-                { id: "<b>Total price</b> (incl VAT)" },
-                { b: (str) => <b>{str}</b> }
-              )}
-            </Body>
-            <Link color="burgundy" href="#" variant="underscored" size="small">
-              {intl.formatMessage({ id: "Price details" })}
-            </Link>
-          </div>
-          <div>
-            <Body textTransform="bold">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: intl.formatNumber(totalPrice.local.price),
-                  currency: totalPrice.local.currency,
-                }
-              )}
-            </Body>
-            {totalPrice.euro && (
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage({ id: "Approx." })}{" "}
-                {intl.formatMessage(
-                  { id: "{amount} {currency}" },
-                  {
-                    amount: intl.formatNumber(totalPrice.euro.price),
-                    currency: totalPrice.euro.currency,
-                  }
-                )}
-              </Caption>
-            )}
-          </div>
-        </div>
-        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
-      </div>
-    </section>
+    <ClientSummary
+      adults={adults}
+      cancellationText={availability.cancellationText}
+      isMember={!!user}
+      kids={kids}
+      memberRate={availability.memberRate}
+      rateDetails={availability.rateDetails}
+      roomType={availability.selectedRoom.roomType}
+    />
  )
 }
--- a/components/HotelReservation/EnterDetails/Summary/summary.module.css
+++ b/components/HotelReservation/EnterDetails/Summary/summary.module.css
@@ -1,83 +1,68 @@
+.mobileSummary {
+  display: block;
+}
+
+.desktopSummary {
+  display: none;
+}
+
 .summary {
-  border-radius: var(--Corner-radius-Large);
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3);
-  height: 100%;
+  background-color: var(--Main-Grey-White);
+
+  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+  border-style: solid;
+  border-width: 1px;
+  border-bottom: none;
+  z-index: 10;
 }

-.header {
-  display: grid;
-  grid-template-areas: "title button" "date button";
+.hider {
+  display: none;
 }

-.title {
-  grid-area: title;
-}
-
-.chevronButton {
-  grid-area: button;
-  justify-self: end;
-  align-items: center;
-  margin-right: calc(0px - var(--Spacing-x2));
-}
-
-.date {
-  align-items: center;
-  display: flex;
-  gap: var(--Spacing-x1);
-  justify-content: flex-start;
-  grid-area: date;
-}
-
-.link {
-  margin-top: var(--Spacing-x1);
-}
-
-.addOns {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.rateDetailsPopover {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-  max-width: 360px;
-}
-
-.entry {
-  display: flex;
-  gap: var(--Spacing-x-half);
-  justify-content: space-between;
-}
-
-.entry > :last-child {
-  justify-items: flex-end;
-}
-
-.total {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.bottomDivider {
+.shadow {
  display: none;
 }

@media screen and (min-width: 1367px) {
-  .bottomDivider {
-    display: block;
-  }
-
-  .header {
-    display: block;
-  }
-
-  .chevronButton {
+  .mobileSummary {
    display: none;
  }
+
+  .desktopSummary {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .summary {
+    position: sticky;
+    top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
+        var(--Spacing-x-half)
+    );
+    z-index: 9;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .shadow {
+    display: block;
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-style: solid;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .hider {
+    display: block;
+    background-color: var(--Scandic-Brand-Warm-White);
+    position: sticky;
+    top: calc(var(--booking-widget-desktop-height) - 6px);
+    margin-top: var(--Spacing-x4);
+    height: 40px;
+  }
 }