Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/loading-rooms-separately

2024-11-20 14:33:05 +01:00
parent 0d739ff81d 39b3cc39d7
commit dbb08960a5
108 changed files with 1115 additions and 683 deletions
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -177,7 +177,7 @@ export default function BookingWidgetClient({
          >
            <CloseLargeIcon />
          </button>
-          <Form locations={locations} type={type} setIsOpen={setIsOpen} />
+          <Form locations={locations} type={type} onClose={closeMobileSearch} />
        </div>
      </section>
      <div className={styles.backdrop} onClick={closeMobileSearch} />
--- a/components/BookingWidget/index.tsx
+++ b/components/BookingWidget/index.tsx
@@ -1,4 +1,4 @@
-import { getLocations } from "@/lib/trpc/memoizedRequests"
+import { getLocations, getSiteConfig } from "@/lib/trpc/memoizedRequests"

 import BookingWidgetClient from "./Client"

@@ -13,8 +13,9 @@ export default async function BookingWidget({
  searchParams,
 }: BookingWidgetProps) {
  const locations = await getLocations()
+  const siteConfig = await getSiteConfig()

-  if (!locations || "error" in locations) {
+  if (!locations || "error" in locations || siteConfig?.bookingWidgetDisabled) {
    return null
  }

--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -206,11 +206,12 @@ export default function Search({ locations }: SearchProps) {
 }

 export function SearchSkeleton() {
+  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.label}>
        <Caption type="bold" color="red" asChild>
-          <span>Where to</span>
+          <span>{intl.formatMessage({ id: "Where to" })}</span>
        </Caption>
      </div>
      <div className={styles.input}>
--- a/components/Forms/BookingWidget/index.tsx
+++ b/components/Forms/BookingWidget/index.tsx
@@ -20,7 +20,7 @@ const formId = "booking-widget"
 export default function Form({
  locations,
  type,
-  setIsOpen,
+  onClose,
 }: BookingWidgetFormProps) {
  const router = useRouter()
  const lang = useLang()
@@ -56,7 +56,7 @@ export default function Form({
        )
      })
    })
-    setIsOpen(false)
+    onClose()
    router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
  }

--- a/components/Forms/Edit/Profile/FormContent/formContent.module.css
+++ b/components/Forms/Edit/Profile/FormContent/formContent.module.css
@@ -3,12 +3,14 @@
  align-self: flex-start;
  display: grid;
  gap: var(--Spacing-x2);
+  container-name: addressContainer;
+  container-type: inline-size;
 }

 .container {
  display: grid;
  gap: var(--Spacing-x2);
-  grid-template-columns: max(164px) 1fr;
+  grid-template-columns: minmax(100px, 164px) 1fr;
 }

@media (min-width: 768px) {
@@ -16,3 +18,9 @@
    display: none;
  }
 }
+
+@container addressContainer (max-width: 350px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+}
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,12 +1,13 @@
 "use client"

 import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { privacyPolicy } from "@/constants/currentWebHrefs"
+import { trpc } from "@/lib/trpc/client"

-import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -30,11 +31,28 @@ import type { SignUpFormProps } from "@/types/components/form/signupForm"

 export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
  const intl = useIntl()
+  const router = useRouter()
  const lang = useLang()
  const country = intl.formatMessage({ id: "Country" })
  const email = intl.formatMessage({ id: "Email address" })
  const phoneNumber = intl.formatMessage({ id: "Phone number" })
  const zipCode = intl.formatMessage({ id: "Zip code" })
+  const signupButtonText = intl.formatMessage({
+    id: "Sign up to Scandic Friends",
+  })
+  const signingUpPendingText = intl.formatMessage({ id: "Signing up..." })
+
+  const signup = trpc.user.signup.useMutation({
+    onSuccess: (data) => {
+      if (data.success && data.redirectUrl) {
+        router.push(data.redirectUrl)
+      }
+    },
+    onError: (error) => {
+      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+      console.error("Component Signup error:", error)
+    },
+  })

  const methods = useForm<SignUpSchema>({
    defaultValues: {
@@ -48,7 +66,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
        zipCode: "",
      },
      password: "",
-      termsAccepted: false,
    },
    mode: "all",
    criteriaMode: "all",
@@ -57,19 +74,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
  })

  async function onSubmit(data: SignUpSchema) {
-    try {
-      const result = await registerUser(data)
-      if (result && !result.success) {
-        toast.error(intl.formatMessage({ id: "Something went wrong!" }))
-      }
-    } catch (error) {
-      // The server-side redirect will throw an error, which we can ignore
-      // as it's handled by Next.js.
-      if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
-        return
-      }
-      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
-    }
+    signup.mutate({ ...data, language: lang })
  }

  return (
@@ -80,11 +85,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
          className={styles.form}
          id="register"
          onSubmit={methods.handleSubmit(onSubmit)}
-          /**
-           * Ignoring since ts doesn't recognize that tRPC
-           * parses FormData before reaching the route
-           * @ts-ignore */
-          action={registerUser}
        >
          <section className={styles.userInfo}>
            <div className={styles.container}>
@@ -187,7 +187,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
              onClick={() => methods.trigger()}
              data-testid="trigger-validation"
            >
-              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+              {signupButtonText}
            </Button>
          ) : (
            <Button
@@ -195,10 +195,12 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
              type="submit"
              theme="base"
              intent="primary"
-              disabled={methods.formState.isSubmitting}
+              disabled={methods.formState.isSubmitting || signup.isPending}
              data-testid="submit"
            >
-              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+              {methods.formState.isSubmitting || signup.isPending
+                ? signingUpPendingText
+                : signupButtonText}
            </Button>
          )}
        </form>
--- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -33,11 +33,10 @@ export default function ChildInfoSelector({
  const ageLabel = intl.formatMessage({ id: "Age" })
  const bedLabel = intl.formatMessage({ id: "Bed" })
  const errorMessage = intl.formatMessage({ id: "Child age is required" })
-  const { setValue, formState, register, trigger } = useFormContext()
+  const { setValue, formState, register } = useFormContext()

  function updateSelectedBed(bed: number) {
    setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
-    trigger()
  }

  function updateSelectedAge(age: number) {
@@ -95,7 +94,7 @@ export default function ChildInfoSelector({
              updateSelectedAge(key as number)
            }}
            placeholder={ageLabel}
-            maxHeight={150}
+            maxHeight={180}
            {...register(ageFieldName, {
              required: true,
            })}
--- a/components/GuestsRoomsPicker/Form.tsx
+++ b/components/GuestsRoomsPicker/Form.tsx
@@ -99,7 +99,7 @@ export default function GuestsRoomsPickerDialog({
            <Tooltip
              heading={disabledBookingOptionsHeader}
              text={disabledBookingOptionsText}
-              position="top"
+              position="bottom"
              arrow="left"
            >
              {rooms.length < 4 ? (
@@ -124,7 +124,7 @@ export default function GuestsRoomsPickerDialog({
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
-            position="top"
+            position="bottom"
            arrow="left"
          >
            {rooms.length < 4 ? (
--- a/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { privacyPolicy } from "@/constants/currentWebHrefs"
+
+import { CheckIcon } from "@/components/Icons"
+import LoginButton from "@/components/LoginButton"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import useLang from "@/hooks/useLang"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+
+export default function JoinScandicFriendsCard({
+  name,
+  memberPrice,
+}: JoinScandicFriendsCardProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const list = [
+    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+    { title: intl.formatMessage({ id: "Join at no cost" }) },
+  ]
+
+  const saveOnJoiningLabel = intl.formatMessage(
+    {
+      id: "Only pay {amount} {currency}",
+    },
+    {
+      amount: intl.formatNumber(memberPrice?.price ?? 0),
+      currency: memberPrice?.currency ?? "SEK",
+    }
+  )
+
+  return (
+    <div className={styles.cardContainer}>
+      <Checkbox name={name} className={styles.checkBox}>
+        <div>
+          {memberPrice ? (
+            <Caption type="label" textTransform="uppercase" color="red">
+              {saveOnJoiningLabel}
+            </Caption>
+          ) : null}
+          <Caption
+            type="label"
+            textTransform="uppercase"
+            color="uiTextHighContrast"
+          >
+            {intl.formatMessage({ id: "Join Scandic Friends" })}
+          </Caption>
+        </div>
+      </Checkbox>
+
+      <Footnote color="uiTextHighContrast" className={styles.login}>
+        {intl.formatMessage({ id: "Already a friend?" })}{" "}
+        <LoginButton
+          color="burgundy"
+          position="enter details"
+          trackingId="join-scandic-friends-enter-details"
+          variant="breadcrumb"
+          target="_blank"
+        >
+          {intl.formatMessage({ id: "Log in" })}
+        </LoginButton>
+      </Footnote>
+
+      <div className={styles.list}>
+        {list.map((item) => (
+          <Caption
+            key={item.title}
+            color="uiTextPlaceholder"
+            className={styles.listItem}
+          >
+            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+          </Caption>
+        ))}
+      </div>
+      <Footnote color="uiTextPlaceholder" className={styles.terms}>
+        {intl.formatMessage<React.ReactNode>(
+          {
+            id: "signup.terms",
+          },
+          {
+            termsLink: (str) => (
+              <Link
+                variant="default"
+                textDecoration="underline"
+                size="tiny"
+                target="_blank"
+                color="uiTextPlaceholder"
+                href={privacyPolicy[lang]}
+              >
+                {str}
+              </Link>
+            ),
+          }
+        )}
+      </Footnote>
+    </div>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -0,0 +1,55 @@
+.cardContainer {
+  align-self: flex-start;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  grid-template-areas:
+    "checkbox"
+    "list"
+    "login"
+    "terms";
+  width: min(100%, 600px);
+}
+
+.login {
+  grid-area: login;
+}
+
+.checkBox {
+  align-self: center;
+  grid-area: checkbox;
+}
+
+.list {
+  display: grid;
+  grid-area: list;
+  gap: var(--Spacing-x1);
+}
+
+.listItem {
+  display: flex;
+}
+
+.terms {
+  border-top: 1px solid var(--Base-Border-Normal);
+  grid-area: terms;
+  padding-top: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .cardContainer {
+    grid-template-columns: 1fr auto;
+    gap: var(--Spacing-x2);
+    grid-template-areas:
+      "checkbox login"
+      "list list"
+      "terms terms";
+  }
+  .list {
+    display: flex;
+    gap: var(--Spacing-x1);
+  }
+}
--- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
@@ -4,14 +4,8 @@ import { useEffect, useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { privacyPolicy } from "@/constants/currentWebHrefs"
-
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"

@@ -31,67 +25,27 @@ export default function Signup({ name }: { name: string }) {
    setIsJoinChecked(joinValue)
  }, [joinValue])

-  const list = [
-    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
-    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
-    { title: intl.formatMessage({ id: "Join at no cost" }) },
-  ]
-
-  return (
-    <div className={styles.container}>
-      <CheckboxCard
-        highlightSubtitle
-        list={list}
-        name={name}
-        subtitle={intl.formatMessage(
-          {
-            id: "{difference}{amount} {currency}",
-          },
-          {
-            amount: "491",
-            currency: "SEK",
-            difference: "-",
-          }
-        )}
-        title={intl.formatMessage({ id: "Join Scandic Friends" })}
+  return isJoinChecked ? (
+    <div className={styles.additionalFormData}>
+      <Input
+        name="zipCode"
+        label={intl.formatMessage({ id: "Zip code" })}
+        registerOptions={{ required: true }}
      />
-      {isJoinChecked ? (
-        <div className={styles.additionalFormData}>
-          <div className={styles.dateField}>
-            <header>
-              <Caption type="bold">
-                {intl.formatMessage({ id: "Birth date" })} *
-              </Caption>
-            </header>
-            <DateSelect
-              name="dateOfBirth"
-              registerOptions={{ required: true }}
-            />
-            <Input
-              name="zipCode"
-              label={intl.formatMessage({ id: "Zip code" })}
-              registerOptions={{ required: true }}
-            />
-          </div>
-          <div>
-            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
-              <Body>
-                {intl.formatMessage({
-                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
-                })}{" "}
-                <Link
-                  variant="underscored"
-                  color="peach80"
-                  target="_blank"
-                  href={privacyPolicy[lang]}
-                >
-                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
-                </Link>
-              </Body>
-            </Checkbox>
-          </div>
-        </div>
-      ) : null}
+      <div className={styles.dateField}>
+        <header>
+          <Caption type="bold">
+            {intl.formatMessage({ id: "Birth date" })} *
+          </Caption>
+        </header>
+        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
+      </div>
    </div>
+  ) : (
+    <Input
+      label={intl.formatMessage({ id: "Membership no" })}
+      name="membershipNo"
+      type="tel"
+    />
  )
 }
--- a/components/HotelReservation/EnterDetails/Details/details.module.css
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -1,25 +1,34 @@
 .form {
  display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x3);
 }

 .container {
  display: grid;
  gap: var(--Spacing-x2);
-  grid-template-columns: 1fr 1fr;
  width: min(100%, 600px);
 }

+.header,
 .country,
 .email,
-.membershipNo,
+.signup,
 .phone {
  grid-column: 1/-1;
 }

 .footer {
-  display: grid;
-  gap: var(--Spacing-x3);
-  justify-items: flex-start;
  margin-top: var(--Spacing-x1);
 }
+
+@media screen and (min-width: 768px) {
+  .form {
+    gap: var(--Spacing-x3);
+  }
+
+  .container {
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 600px);
+  }
+}
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -13,6 +13,7 @@ import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"

+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"

@@ -24,7 +25,7 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/details"

 const formID = "enter-details"
-export default function Details({ user }: DetailsProps) {
+export default function Details({ user, memberPrice }: DetailsProps) {
  const intl = useIntl()
  const initialData = useDetailsStore((state) => ({
    countryCode: state.data.countryCode,
@@ -35,7 +36,6 @@ export default function Details({ user }: DetailsProps) {
    join: state.data.join,
    dateOfBirth: state.data.dateOfBirth,
    zipCode: state.data.zipCode,
-    termsAccepted: state.data.termsAccepted,
    membershipNo: state.data.membershipNo,
  }))

@@ -52,7 +52,6 @@ export default function Details({ user }: DetailsProps) {
      join: initialData.join,
      dateOfBirth: initialData.dateOfBirth,
      zipCode: initialData.zipCode,
-      termsAccepted: initialData.termsAccepted,
      membershipNo: initialData.membershipNo,
    },
    criteriaMode: "all",
@@ -76,15 +75,18 @@ export default function Details({ user }: DetailsProps) {
        id={formID}
        onSubmit={methods.handleSubmit(onSubmit)}
      >
-        {user ? null : <Signup name="join" />}
-        <Footnote
-          color="uiTextHighContrast"
-          textTransform="uppercase"
-          type="label"
-        >
-          {intl.formatMessage({ id: "Guest information" })}
-        </Footnote>
+        {user ? null : (
+          <JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
+        )}
        <div className={styles.container}>
+          <Footnote
+            color="uiTextHighContrast"
+            textTransform="uppercase"
+            type="label"
+            className={styles.header}
+          >
+            {intl.formatMessage({ id: "Guest information" })}
+          </Footnote>
          <Input
            label={intl.formatMessage({ id: "First name" })}
            name="firstName"
@@ -118,13 +120,10 @@ export default function Details({ user }: DetailsProps) {
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
-          {user || methods.watch("join") ? null : (
-            <Input
-              className={styles.membershipNo}
-              label={intl.formatMessage({ id: "Membership no" })}
-              name="membershipNo"
-              type="tel"
-            />
+          {user ? null : (
+            <div className={styles.signup}>
+              <Signup name="join" />
+            </div>
          )}
        </div>
        <footer className={styles.footer}>
--- a/components/HotelReservation/EnterDetails/Details/schema.ts
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -15,7 +15,6 @@ export const notJoinDetailsSchema = baseDetailsSchema.merge(
    join: z.literal<boolean>(false),
    zipCode: z.string().optional(),
    dateOfBirth: z.string().optional(),
-    termsAccepted: z.boolean().default(false),
    membershipNo: z
      .string()
      .optional()
@@ -39,15 +38,6 @@ 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" }),
-    termsAccepted: z.literal<boolean>(true, {
-      errorMap: (err, ctx) => {
-        switch (err.code) {
-          case "invalid_literal":
-            return { message: "You must accept the terms and conditions" }
-        }
-        return { message: ctx.defaultError }
-      },
-    }),
    membershipNo: z.string().optional(),
  })
 )
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -66,7 +66,7 @@ export default function SectionAccordion({
  const textColor =
    isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
  return (
-    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
+    <div className={styles.accordion} data-open={isOpen} data-step={step}>
      <div className={styles.iconWrapper}>
        <div className={styles.circle} data-checked={isComplete}>
          {isComplete ? (
@@ -74,31 +74,33 @@ export default function SectionAccordion({
          ) : null}
        </div>
      </div>
-      <div className={styles.main}>
-        <header>
-          <button onClick={onModify} className={styles.modifyButton}>
-            <Footnote
-              className={styles.title}
-              asChild
-              textTransform="uppercase"
-              type="label"
-              color={textColor}
-            >
-              <h2>{header}</h2>
-            </Footnote>
-            <Subtitle className={styles.selection} type="two" color={textColor}>
-              {title}
-            </Subtitle>
+      <header className={styles.header}>
+        <button
+          onClick={onModify}
+          disabled={!isComplete}
+          className={styles.modifyButton}
+        >
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color={textColor}
+          >
+            <h2>{header}</h2>
+          </Footnote>
+          <Subtitle className={styles.selection} type="two" color={textColor}>
+            {title}
+          </Subtitle>

-            {isComplete && !isOpen && (
-              <ChevronDownIcon className={styles.button} color="burgundy" />
-            )}
-          </button>
-        </header>
-        <div className={styles.content}>
-          <div className={styles.contentWrapper}>{children}</div>
-        </div>
+          {isComplete && !isOpen && (
+            <ChevronDownIcon className={styles.button} color="burgundy" />
+          )}
+        </button>
+      </header>
+      <div className={styles.content}>
+        <div className={styles.contentWrapper}>{children}</div>
      </div>
-    </section>
+    </div>
  )
 }
--- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -1,15 +1,28 @@
-.wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: var(--Spacing-x-one-and-half);
+.accordion {
+  --header-height: 2.4em;
+  --circle-height: 24px;
+
+  gap: var(--Spacing-x3);
+  width: 100%;
  padding-top: var(--Spacing-x3);
+  transition: 0.4s ease-out;
+
+  display: grid;
+  grid-template-areas: "circle header" "content content";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: var(--header-height) 0fr;
+
+  column-gap: var(--Spacing-x-one-and-half);
 }

-.wrapper:last-child .main {
+.accordion:last-child {
  border-bottom: none;
 }

+.header {
+  grid-area: header;
+}
+
 .modifyButton {
  display: grid;
  grid-template-areas: "title button" "selection button";
@@ -17,6 +30,11 @@
  background-color: transparent;
  border: none;
  width: 100%;
+  padding: 0;
+}
+
+.modifyButton:disabled {
+  cursor: default;
 }

 .title {
@@ -29,15 +47,6 @@
  justify-self: flex-end;
 }

-.main {
-  display: grid;
-  width: 100%;
-  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  padding-bottom: var(--Spacing-x3);
-  transition: 0.4s ease-out;
-  grid-template-rows: 2em 0fr;
-}
-
 .selection {
  font-weight: 450;
  font-size: var(--typography-Title-4-fontSize);
@@ -46,11 +55,12 @@

 .iconWrapper {
  position: relative;
+  grid-area: circle;
 }

 .circle {
-  width: 24px;
-  height: 24px;
+  width: var(--circle-height);
+  height: var(--circle-height);
  border-radius: 100px;
  transition: background-color 0.4s;
  border: 2px solid var(--Base-Border-Inverted);
@@ -63,42 +73,45 @@
  background-color: var(--UI-Input-Controls-Fill-Selected);
 }

-.wrapper[data-open="true"] .circle[data-checked="false"] {
+.accordion[data-open="true"] .circle[data-checked="false"] {
  background-color: var(--UI-Text-Placeholder);
 }

-.wrapper[data-open="false"] .circle[data-checked="false"] {
+.accordion[data-open="false"] .circle[data-checked="false"] {
  background-color: var(--Base-Surface-Subtle-Hover);
 }

-.wrapper[data-open="true"] .main {
-  grid-template-rows: 2em 1fr;
+.accordion[data-open="true"] {
+  grid-template-rows: var(--header-height) 1fr;
+}
+
+.contentWrapper {
+  padding-bottom: var(--Spacing-x3);
 }

 .content {
  overflow: hidden;
+  grid-area: content;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }

-.contentWrapper {
-  padding-top: var(--Spacing-x3);
-}
-
-@media screen and (min-width: 1367px) {
-  .wrapper {
-    gap: var(--Spacing-x3);
+@media screen and (min-width: 768px) {
+  .accordion {
+    column-gap: var(--Spacing-x3);
+    grid-template-areas: "circle header" "circle content";
  }

  .iconWrapper {
    top: var(--Spacing-x1);
  }

-  .wrapper:not(:last-child)::after {
+  .accordion:not(:last-child) .iconWrapper::after {
    position: absolute;
    left: 12px;
-    bottom: 0;
-    top: var(--Spacing-x7);
-    height: 100%;
+    bottom: calc(0px - var(--Spacing-x7));
+    top: var(--circle-height);
+
    content: "";
    border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  }
-}
+}
--- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -63,7 +63,7 @@
  justify-content: flex-start;
 }

-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 768px) {
  .wrapper {
    gap: var(--Spacing-x3);
    padding-top: var(--Spacing-x3);
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -81,7 +81,6 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {

  useEffect(() => {
    setChosenBed(bedType)
-    setChosenBreakfast(breakfast)

    if (breakfast || breakfast === false) {
      setChosenBreakfast(breakfast)
@@ -94,9 +93,9 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
          euro:
            room.euroPrice && roomsPriceEuro
              ? {
-                price: roomsPriceEuro,
-                currency: room.euroPrice.currency,
-              }
+                  price: roomsPriceEuro,
+                  currency: room.euroPrice.currency,
+                }
              : undefined,
        })
      } else {
@@ -108,11 +107,11 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
          euro:
            room.euroPrice && roomsPriceEuro
              ? {
-                price:
-                  roomsPriceEuro +
-                  parseInt(breakfast.requestedPrice.totalPrice),
-                currency: room.euroPrice.currency,
-              }
+                  price:
+                    roomsPriceEuro +
+                    parseInt(breakfast.requestedPrice.totalPrice),
+                  currency: room.euroPrice.currency,
+                }
              : undefined,
        })
      }
@@ -199,24 +198,24 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
        </div>
        {room.packages
          ? room.packages.map((roomPackage) => (
-            <div className={styles.entry} key={roomPackage.code}>
-              <div>
-                <Body color="uiTextHighContrast">
-                  {roomPackage.description}
-                </Body>
-              </div>
+              <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>
-          ))
+                <Caption color="uiTextHighContrast">
+                  {intl.formatMessage(
+                    { id: "{amount} {currency}" },
+                    {
+                      amount: roomPackage.localPrice.price,
+                      currency: roomPackage.localPrice.currency,
+                    }
+                  )}
+                </Caption>
+              </div>
+            ))
          : null}
        {chosenBed ? (
          <div className={styles.entry}>
@@ -263,9 +262,8 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
              )}
            </Caption>
          </div>
-        ) : null
-        }
-      </div >
+        ) : null}
+      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.total}>
        <div className={styles.entry}>
@@ -306,6 +304,6 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
        </div>
        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
      </div>
-    </section >
+    </section>
  )
 }
--- a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
+++ b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
@@ -15,7 +15,6 @@
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x-one-and-half);
-  max-width: 260px;
 }

 .divider {
@@ -38,3 +37,9 @@
  font-weight: 400;
  font-size: var(--typography-Caption-Regular-fontSize);
 }
+
+@media screen and (min-width: 1367px) {
+  .prices {
+    max-width: 260px;
+  }
+}
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -7,7 +7,6 @@ import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"

 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Alert from "@/components/TempDesignSystem/Alert"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -133,13 +132,6 @@ export default function HotelCard({
            hotel={hotelData}
            showCTA={true}
          />
-          {hotelData.specialAlerts.length > 0 && (
-            <div className={styles.specialAlerts}>
-              {hotelData.specialAlerts.map((alert) => (
-                <Alert key={alert.id} type={alert.type} text={alert.text} />
-              ))}
-            </div>
-          )}
        </section>
        <HotelPriceList price={price} hotelId={hotel.hotelData.operaId} />
      </div>
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -1,9 +1,11 @@
 "use client"
 import { useSearchParams } from "next/navigation"
-import { useMemo } from "react"
+import { useEffect, useMemo, useState } from "react"

 import { useHotelFilterStore } from "@/stores/hotel-filters"

+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+
 import HotelCard from "../HotelCard"
 import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"

@@ -25,6 +27,7 @@ export default function HotelCardListing({
  const searchParams = useSearchParams()
  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
+  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)

  const sortBy = useMemo(
    () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -48,7 +51,7 @@ export default function HotelCardListing({
          return (
            hotel.price?.member?.localPrice?.pricePerNight ??
            hotel.price?.public?.localPrice?.pricePerNight ??
-            0
+            Infinity
          )
        }
        return [...hotelData].sort(
@@ -82,6 +85,20 @@ export default function HotelCardListing({
    return filteredHotels
  }, [activeFilters, sortedHotels, setResultCount])

+  useEffect(() => {
+    const handleScroll = () => {
+      const hasScrolledPast = window.scrollY > 490
+      setShowBackToTop(hasScrolledPast)
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
  return (
    <section className={styles.hotelCards}>
      {hotels?.length
@@ -95,6 +112,7 @@ export default function HotelCardListing({
            />
          ))
        : null}
+      {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
    </section>
  )
 }
--- a/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css
+++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css
@@ -81,6 +81,10 @@
  flex: 0 0 auto;
 }

+.title {
+  display: none;
+}
+
 .close {
  background: none;
  border: none;
@@ -97,3 +101,80 @@
  flex: 0 0 auto;
  border-top: 1px solid var(--Base-Border-Subtle);
 }
+
+@media screen and (min-width: 768px) {
+  .modal {
+    left: 50%;
+    bottom: 50%;
+    height: min(80dvh, 680px);
+    width: min(80dvw, 960px);
+    translate: -50% 50%;
+    overflow-y: auto;
+  }
+
+  .header {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+    align-items: center;
+    border-bottom: 1px solid var(--Base-Border-Subtle);
+    position: sticky;
+    top: 0;
+    background: var(--Base-Surface-Primary-light-Normal);
+    z-index: 1;
+    border-top-left-radius: var(--Corner-radius-large);
+    border-top-right-radius: var(--Corner-radius-large);
+  }
+
+  .title {
+    display: block;
+  }
+
+  .content {
+    gap: var(--Spacing-x4);
+    height: auto;
+  }
+
+  .filters {
+    overflow-y: unset;
+  }
+
+  .sorter,
+  .filters,
+  .footer,
+  .divider {
+    padding: 0 var(--Spacing-x3);
+  }
+
+  .footer {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    position: sticky;
+    bottom: 0;
+    background: var(--Base-Surface-Primary-light-Normal);
+    z-index: 1;
+    border-bottom-left-radius: var(--Corner-radius-large);
+    border-bottom-right-radius: var(--Corner-radius-large);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+  }
+
+  .filters aside h1 {
+    margin-bottom: var(--Spacing-x2);
+  }
+
+  .filters aside > div:last-child {
+    margin-top: var(--Spacing-x4);
+    padding-bottom: 0;
+  }
+
+  .filters aside ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: var(--Spacing-x3);
+  }
+}
+@media screen and (min-width: 1024) {
+  .facilities ul {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
--- a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
+++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
@@ -12,6 +12,8 @@ import { useHotelFilterStore } from "@/stores/hotel-filters"

 import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import HotelFilter from "../HotelFilter"
 import HotelSorter from "../HotelSorter"
@@ -47,10 +49,18 @@ export default function FilterAndSortModal({
                    >
                      <CloseLargeIcon />
                    </button>
+                    <Subtitle
+                      type="two"
+                      textAlign="center"
+                      className={styles.title}
+                    >
+                      {intl.formatMessage({ id: "Filter and sort" })}
+                    </Subtitle>
                  </header>
                  <div className={styles.sorter}>
                    <HotelSorter />
                  </div>
+                  <Divider color="subtle" className="divider" />
                  <div className={styles.filters}>
                    <HotelFilter filters={filters} />
                  </div>
--- a/components/HotelReservation/SelectHotel/HotelCount/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelCount/index.tsx
@@ -0,0 +1,22 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { useHotelFilterStore } from "@/stores/hotel-filters"
+
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+
+export default function HotelCount() {
+  const intl = useIntl()
+  const resultCount = useHotelFilterStore((state) => state.resultCount)
+
+  return (
+    <Preamble>
+      {intl.formatMessage(
+        {
+          id: "Hotel(s)",
+        },
+        { amount: resultCount }
+      )}
+    </Preamble>
+  )
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -7,11 +7,13 @@ import { useMediaQuery } from "usehooks-ts"

 import { selectHotel } from "@/constants/routes/hotelReservation"

-import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"

+import FilterAndSortModal from "../FilterAndSortModal"
 import HotelListing from "./HotelListing"
 import { getCentralCoordinates } from "./utils"

@@ -24,6 +26,7 @@ export default function SelectHotelMap({
  hotelPins,
  mapId,
  hotels,
+  filterList,
 }: SelectHotelMapProps) {
  const searchParams = useSearchParams()
  const router = useRouter()
@@ -101,25 +104,14 @@ export default function SelectHotelMap({
            >
              <CloseLargeIcon />
            </Button>
-            <span>Filter and sort</span>
-            {/* TODO: Add filter and sort button */}
+            <FilterAndSortModal filters={filterList} />
          </div>
          <HotelListing
            hotels={hotels}
            activeHotelPin={activeHotelPin}
            setActiveHotelPin={setActiveHotelPin}
          />
-          {showBackToTop && (
-            <Button
-              intent="inverted"
-              size="small"
-              theme="base"
-              className={styles.backToTopButton}
-              onClick={scrollToTop}
-            >
-              {intl.formatMessage({ id: "Back to top" })}
-            </Button>
-          )}
+          {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
        </div>
        <InteractiveMap
          closeButton={closeButton}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
@@ -23,10 +23,6 @@
  height: 44px;
 }

-.backToTopButton {
-  display: none;
-}
-
@media (min-width: 768px) {
  .container .closeButton {
    display: flex;
@@ -34,12 +30,7 @@
  .container .listingContainer .filterContainer .filterContainerCloseButton {
    display: none;
  }
-  .backToTopButton {
-    position: fixed;
-    bottom: 24px;
-    left: 32px;
-    display: flex;
-  }
+
  .listingContainer {
    background-color: var(--Base-Surface-Secondary-light-Normal);
    padding: var(--Spacing-x3) var(--Spacing-x4);
@@ -50,4 +41,9 @@
  .container {
    display: flex;
  }
+
+  .filterContainer {
+    justify-content: flex-end;
+    padding: 0 0 var(--Spacing-x1);
+  }
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -54,9 +54,22 @@ export default function RoomCard({
      : undefined
  }

-  function getPriceInformationForRate(rate: RateDefinition | undefined) {
+  function getRateDefinitionForRate(rate: RateDefinition | undefined) {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
-      ?.generalTerms
+  }
+
+  const getBreakfastMessage = (rate: RateDefinition | undefined) => {
+    const breakfastIncluded = getRateDefinitionForRate(rate)?.breakfastIncluded
+    switch (breakfastIncluded) {
+      case true:
+        return intl.formatMessage({ id: "Breakfast is included." })
+      case false:
+        return intl.formatMessage({ id: "Breakfast selection in next step." })
+      default:
+        return intl.formatMessage({
+          id: "Breakfast deal can be purchased at the hotel.",
+        })
+    }
  }

  const petRoomPackage =
@@ -69,7 +82,6 @@ export default function RoomCard({
  )

  const { roomSize, occupancy, images } = selectedRoom || {}
-  const mainImage = images?.[0]

  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -101,53 +113,56 @@ export default function RoomCard({
  return (
    <div className={classNames}>
      <div>
-        {mainImage && (
-          <div className={styles.imageContainer}>
-            <div className={styles.chipContainer}>
-              {roomConfiguration.roomsLeft < 5 && (
-                <span className={styles.chip}>
-                  <Footnote
-                    color="burgundy"
-                    textTransform="uppercase"
-                  >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-                </span>
-              )}
-              {roomConfiguration.features
-                .filter((feature) => selectedPackages.includes(feature.code))
-                .map((feature) => (
-                  <span className={styles.chip} key={feature.code}>
-                    {createElement(getIconForFeatureCode(feature.code), {
-                      width: 16,
-                      height: 16,
-                      color: "burgundy",
-                    })}
-                  </span>
-                ))}
-            </div>
-            {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
-         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-            <ImageGallery
-              images={images}
-              title={roomConfiguration.roomType}
-              fill
-            />
-          </div>
-        )}
-        <div className={styles.specification}>
-          <Caption color="uiTextMediumContrast" className={styles.guests}>
-            {intl.formatMessage(
-              {
-                id: "booking.guests",
-              },
-              { nrOfGuests: occupancy?.total }
+        <div className={styles.imageContainer}>
+          <div className={styles.chipContainer}>
+            {roomConfiguration.roomsLeft < 5 && (
+              <span className={styles.chip}>
+                <Footnote
+                  color="burgundy"
+                  textTransform="uppercase"
+                >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+              </span>
            )}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {roomSize?.min === roomSize?.max
-              ? roomSize?.min
-              : `${roomSize?.min}-${roomSize?.max}`}
-            m²
-          </Caption>
+            {roomConfiguration.features
+              .filter((feature) => selectedPackages.includes(feature.code))
+              .map((feature) => (
+                <span className={styles.chip} key={feature.code}>
+                  {createElement(getIconForFeatureCode(feature.code), {
+                    width: 16,
+                    height: 16,
+                    color: "burgundy",
+                  })}
+                </span>
+              ))}
+          </div>
+          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
+         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
+          <ImageGallery
+            images={images}
+            title={roomConfiguration.roomType}
+            fill
+          />
+        </div>
+
+        <div className={styles.specification}>
+          {occupancy && (
+            <Caption color="uiTextMediumContrast" className={styles.guests}>
+              {intl.formatMessage(
+                {
+                  id: "booking.guests",
+                },
+                { nrOfGuests: occupancy?.total }
+              )}
+            </Caption>
+          )}
+          {roomSize && (
+            <Caption color="uiTextMediumContrast">
+              {roomSize.min === roomSize.max
+                ? roomSize.min
+                : `${roomSize.min}-${roomSize.max}`}
+              m²
+            </Caption>
+          )}
          <div className={styles.toggleSidePeek}>
            {roomConfiguration.roomTypeCode && (
              <ToggleSidePeek
@@ -168,9 +183,7 @@ export default function RoomCard({
      </div>
      <div className={styles.container}>
        <Caption color="uiTextHighContrast" type="bold">
-          {intl.formatMessage({
-            id: "Breakfast selection in next step.",
-          })}
+          {getBreakfastMessage(rates.flexRate)}
        </Caption>
        {roomConfiguration.status === "NotAvailable" ? (
          <div className={styles.noRoomsContainer}>
@@ -192,7 +205,7 @@ export default function RoomCard({
                value={key.toLowerCase()}
                paymentTerm={key === "flexRate" ? payLater : payNow}
                product={findProductForRate(rate)}
-                priceInformation={getPriceInformationForRate(rate)}
+                priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
                handleSelectRate={handleSelectRate}
                roomType={roomConfiguration.roomType}
                roomTypeCode={roomConfiguration.roomTypeCode}
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -7,23 +7,13 @@
  border: 1px solid var(--Base-Border-Subtle);
  position: relative;
  height: 100%;
+  min-height: 730px;
  justify-content: space-between;
 }

 .card.noAvailability {
  justify-content: flex-start;
-}
-
-.card.noAvailability:before {
-  background-color: rgba(0, 0, 0, 40%);
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
+  opacity: 0.6;
 }

 .specification {
--- a/components/HotelReservation/SelectRate/Rooms/utils.ts
+++ b/components/HotelReservation/SelectRate/Rooms/utils.ts
@@ -31,7 +31,10 @@ export function filterDuplicateRoomTypesByLowestPrice(

    products.forEach((product) => {
      const { productType } = product
-      const publicProduct = productType.public
+      const publicProduct = productType.public || {
+        requestedPrice: null,
+        localPrice: null,
+      }
      const memberProduct = productType.member || {
        requestedPrice: null,
        localPrice: null,
@@ -53,7 +56,7 @@ export function filterDuplicateRoomTypesByLowestPrice(
        Number(memberRequestedPrice?.pricePerNight) ?? Infinity
      )
      const currentLocalPrice = Math.min(
-        Number(publicLocalPrice.pricePerNight) ?? Infinity,
+        Number(publicLocalPrice?.pricePerNight) ?? Infinity,
        Number(memberLocalPrice?.pricePerNight) ?? Infinity
      )

@@ -63,7 +66,7 @@ export function filterDuplicateRoomTypesByLowestPrice(
          Math.min(
            Number(
              previousLowest.products[0].productType.public.requestedPrice
-                .pricePerNight
+                ?.pricePerNight
            ) ?? Infinity,
            Number(
              previousLowest.products[0].productType.member?.requestedPrice
@@ -74,7 +77,7 @@ export function filterDuplicateRoomTypesByLowestPrice(
          Math.min(
            Number(
              previousLowest.products[0].productType.public.requestedPrice
-                .pricePerNight
+                ?.pricePerNight
            ) ?? Infinity,
            Number(
              previousLowest.products[0].productType.member?.requestedPrice
@@ -85,7 +88,7 @@ export function filterDuplicateRoomTypesByLowestPrice(
            Math.min(
              Number(
                previousLowest.products[0].productType.public.localPrice
-                  .pricePerNight
+                  ?.pricePerNight
              ) ?? Infinity,
              Number(
                previousLowest.products[0].productType.member?.localPrice
--- a/components/Icons/ArrowUp.tsx
+++ b/components/Icons/ArrowUp.tsx
@@ -0,0 +1,33 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ArrowUpIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="a"
+        width="20"
+        height="20"
+        x="0"
+        y="0"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#D9D9D9" d="M0 0h20v20H0z" />
+      </mask>
+      <path
+        fill="#4D001B"
+        d="m9.219 6.541-4.021 4.021a.74.74 0 0 1-.552.235.778.778 0 0 1-.552-.245.796.796 0 0 1-.235-.552.74.74 0 0 1 .235-.552l5.354-5.355a.77.77 0 0 1 .849-.171.77.77 0 0 1 .255.171l5.354 5.355a.782.782 0 0 1 0 1.104.764.764 0 0 1-1.114 0l-4.01-4.01v9.135c0 .215-.077.4-.23.552a.752.752 0 0 1-.552.229.752.752 0 0 1-.552-.23.752.752 0 0 1-.23-.551V6.54Z"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -6,6 +6,7 @@ export { default as AirIcon } from "./Air"
 export { default as AirplaneIcon } from "./Airplane"
 export { default as AllergyIcon } from "./Allergy"
 export { default as ArrowRightIcon } from "./ArrowRight"
+export { default as ArrowUpIcon } from "./ArrowUp"
 export { default as BarIcon } from "./Bar"
 export { default as BathtubIcon } from "./Bathtub"
 export { default as BedDoubleIcon } from "./BedDouble"
--- a/components/LoginButton/index.tsx
+++ b/components/LoginButton/index.tsx
@@ -13,19 +13,16 @@ import { trackLoginClick } from "@/utils/tracking"
 import { TrackingPosition } from "@/types/components/tracking"

 export default function LoginButton({
-  className,
  position,
  trackingId,
  children,
-  color = "black",
-  variant = "navigation",
-}: PropsWithChildren<{
-  className: string
-  trackingId: string
-  position: TrackingPosition
-  color?: LinkProps["color"]
-  variant?: "navigation" | "signupVerification"
-}>) {
+  ...props
+}: PropsWithChildren<
+  {
+    trackingId: string
+    position: TrackingPosition
+  } & Omit<LinkProps, "href">
+>) {
  const lang = useLang()
  const pathName = useLazyPathname({ includeSearchParams: true })

@@ -34,25 +31,19 @@ export default function LoginButton({
    : login[lang]

  useEffect(() => {
-    document
-      .getElementById(trackingId)
-      ?.addEventListener("click", () => trackLoginClick(position))
+    function trackLogin() {
+      trackLoginClick(position)
+    }
+    document.getElementById(trackingId)?.addEventListener("click", trackLogin)
    return () => {
      document
        .getElementById(trackingId)
-        ?.removeEventListener("click", () => trackLoginClick(position))
+        ?.removeEventListener("click", trackLogin)
    }
  }, [position, trackingId])

  return (
-    <Link
-      className={className}
-      id={trackingId}
-      color={color}
-      href={href}
-      prefetch={false}
-      variant={variant}
-    >
+    <Link id={trackingId} prefetch={false} {...props} href={href}>
      {children}
    </Link>
  )
--- a/components/MapModal/index.tsx
+++ b/components/MapModal/index.tsx
@@ -66,7 +66,7 @@ export function MapModal({ children }: { children: React.ReactNode }) {

  return (
    <div className={styles.wrapper} ref={rootDiv}>
-      <Modal isDismissable isOpen={isOpen} onOpenChange={handleOnOpenChange}>
+      <Modal isOpen={isOpen} onOpenChange={handleOnOpenChange}>
        <Dialog
          style={
            {
--- a/components/Maps/Markers/utils.ts
+++ b/components/Maps/Markers/utils.ts
@@ -1,22 +1,15 @@
 import { IconName } from "@/types/components/icon"
-import {
-  PointOfInterestCategoryNameEnum,
-  PointOfInterestGroupEnum,
-} from "@/types/hotel"
+import { PointOfInterestGroupEnum } from "@/types/hotel"

 export function getIconByPoiGroupAndCategory(
  group: PointOfInterestGroupEnum,
-  category?: PointOfInterestCategoryNameEnum
+  category?: string
 ) {
  switch (group) {
    case PointOfInterestGroupEnum.PUBLIC_TRANSPORT:
-      return category === PointOfInterestCategoryNameEnum.AIRPORT
-        ? IconName.Airplane
-        : IconName.Train
+      return category === "Airport" ? IconName.Airplane : IconName.Train
    case PointOfInterestGroupEnum.ATTRACTIONS:
-      return category === PointOfInterestCategoryNameEnum.MUSEUM
-        ? IconName.Museum
-        : IconName.Camera
+      return category === "Museum" ? IconName.Museum : IconName.Camera
    case PointOfInterestGroupEnum.BUSINESS:
      return IconName.Business
    case PointOfInterestGroupEnum.PARKING:
--- a/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
+++ b/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
@@ -0,0 +1,45 @@
+.backToTopButton {
+  border-radius: var(--Corner-radius-Rounded);
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Base-Button-Secondary-On-Fill-Normal);
+  border: 2px solid var(--Base-Button-Secondary-On-Fill-Normal);
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1);
+  text-align: center;
+  transition:
+    background-color 300ms ease,
+    color 300ms ease;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-weight: 500;
+  font-size: var(--typography-Caption-Bold-fontSize);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  letter-spacing: 0.6%;
+  text-decoration: none;
+}
+
+.backToTopButtonText {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .backToTopButtonText {
+    display: initial;
+  }
+  .backToTopButton:hover {
+    background-color: var(--Base-Button-Tertiary-Fill-Normal);
+    color: var(--Base-Button-Tertiary-On-Fill-Hover);
+  }
+  .backToTopButton:hover > svg * {
+    fill: var(--Base-Button-Tertiary-On-Fill-Hover);
+  }
+  .backToTopButton {
+    padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  }
+}
--- a/components/TempDesignSystem/BackToTopButton/index.tsx
+++ b/components/TempDesignSystem/BackToTopButton/index.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { ArrowUpIcon } from "@/components/Icons"
+
+import styles from "./backToTopButton.module.css"
+
+export function BackToTopButton({ onClick }: { onClick: () => void }) {
+  const intl = useIntl()
+  return (
+    <ButtonRAC className={styles.backToTopButton} onPress={onClick}>
+      <ArrowUpIcon color="burgundy" />
+      <span className={styles.backToTopButtonText}>
+        {intl.formatMessage({ id: "Back to top" })}
+      </span>
+    </ButtonRAC>
+  )
+}
--- a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -2,6 +2,7 @@
  display: flex;
  flex-direction: column;
  color: var(--text-color);
+  cursor: pointer;
 }

 .container[data-selected] .checkbox {
--- a/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -12,6 +12,7 @@ import styles from "./checkbox.module.css"
 import { CheckboxProps } from "@/types/components/checkbox"

 export default function Checkbox({
+  className,
  name,
  children,
  registerOptions,
@@ -25,16 +26,17 @@ export default function Checkbox({

  return (
    <AriaCheckbox
-      className={styles.container}
+      className={`${styles.container} ${className}`}
      isSelected={field.value}
      onChange={field.onChange}
      data-testid={name}
      isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
    >
      {({ isSelected }) => (
        <>
          <span className={styles.checkboxContainer}>
-            <span className={styles.checkbox}>
+            <span className={styles.checkbox} tabIndex={0}>
              {isSelected && <CheckIcon color="white" />}
            </span>
            {children}
--- a/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
@@ -1,7 +0,0 @@
-import Card from "./_Card"
-
-import type { CheckboxProps } from "./_Card/card"
-
-export default function CheckboxCard(props: CheckboxProps) {
-  return <Card {...props} type="checkbox" />
-}
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
@@ -1,5 +1,4 @@
 .label {
-  align-self: flex-start;
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Large);
--- a/components/TempDesignSystem/Form/Date/date.module.css
+++ b/components/TempDesignSystem/Form/Date/date.module.css
@@ -1,4 +1,8 @@
 /* Leaving, will most likely get deleted */
+.datePicker {
+  container-name: datePickerContainer;
+  container-type: inline-size;
+}
 .container {
  display: grid;
  gap: var(--Spacing-x2);
@@ -27,3 +31,10 @@
 .year.invalid > div > div {
  border-color: var(--Scandic-Red-60);
 }
+
+@container datePickerContainer (max-width: 350px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -115,6 +115,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      ref={field.ref}
      value={dateValue}
      data-testid={name}
+      className={styles.datePicker}
    >
      <Group>
        <DateInput className={styles.container}>
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -78,67 +78,69 @@ export default function Phone({
  }

  return (
-    <div className={`${styles.phone} ${className}`}>
-      <CountrySelector
-        disabled={readOnly}
-        dropdownArrowClassName={styles.arrow}
-        flagClassName={styles.flag}
-        onSelect={handleSelectCountry}
-        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
-        selectedCountry={country.iso2}
-        renderButtonWrapper={(props) => (
-          <button
-            {...props.rootProps}
-            className={styles.select}
-            tabIndex={0}
-            type="button"
-            data-testid="country-selector"
-          >
-            <Label required={!!registerOptions.required} size="small">
-              {intl.formatMessage({ id: "Country code" })}
-            </Label>
-            <span className={styles.selectContainer}>
-              {props.children}
-              <Body asChild fontOnly>
-                <DialCodePreview
-                  className={styles.dialCode}
-                  dialCode={country.dialCode}
-                  prefix="+"
+    <div className={`${styles.wrapper} ${className}`}>
+      <div className={styles.phone}>
+        <CountrySelector
+          disabled={readOnly}
+          dropdownArrowClassName={styles.arrow}
+          flagClassName={styles.flag}
+          onSelect={handleSelectCountry}
+          preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+          selectedCountry={country.iso2}
+          renderButtonWrapper={(props) => (
+            <button
+              {...props.rootProps}
+              className={styles.select}
+              tabIndex={0}
+              type="button"
+              data-testid="country-selector"
+            >
+              <Label required={!!registerOptions.required} size="small">
+                {intl.formatMessage({ id: "Country code" })}
+              </Label>
+              <span className={styles.selectContainer}>
+                {props.children}
+                <Body asChild fontOnly>
+                  <DialCodePreview
+                    className={styles.dialCode}
+                    dialCode={country.dialCode}
+                    prefix="+"
+                  />
+                </Body>
+                <ChevronDownIcon
+                  className={styles.chevron}
+                  color="grey80"
+                  height={18}
+                  width={18}
                />
-              </Body>
-              <ChevronDownIcon
-                className={styles.chevron}
-                color="grey80"
-                height={18}
-                width={18}
-              />
-            </span>
-          </button>
-        )}
-      />
-      <TextField
-        aria-label={ariaLabel}
-        defaultValue={field.value}
-        isDisabled={disabled ?? field.disabled}
-        isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
-        isReadOnly={readOnly}
-        name={field.name}
-        type="tel"
-      >
-        <AriaInputWithLabel
-          {...field}
-          id={field.name}
-          label={label}
-          onChange={handleChange}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          required={!!registerOptions.required}
-          type="tel"
-          value={inputValue}
+              </span>
+            </button>
+          )}
        />
-        <ErrorMessage errors={formState.errors} name={field.name} />
-      </TextField>
+        <TextField
+          aria-label={ariaLabel}
+          defaultValue={field.value}
+          isDisabled={disabled ?? field.disabled}
+          isInvalid={fieldState.invalid}
+          isRequired={!!registerOptions?.required}
+          isReadOnly={readOnly}
+          name={field.name}
+          type="tel"
+        >
+          <AriaInputWithLabel
+            {...field}
+            id={field.name}
+            label={label}
+            onChange={handleChange}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            required={!!registerOptions.required}
+            type="tel"
+            value={inputValue}
+          />
+          <ErrorMessage errors={formState.errors} name={field.name} />
+        </TextField>
+      </div>
    </div>
  )
 }
--- a/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/components/TempDesignSystem/Form/Phone/phone.module.css
@@ -1,3 +1,7 @@
+.wrapper {
+  container-name: phoneContainer;
+  container-type: inline-size;
+}
 .phone {
  display: grid;
  gap: var(--Spacing-x2);
@@ -100,3 +104,10 @@
  justify-self: flex-start;
  padding: 0;
 }
+
+@container phoneContainer (max-width: 350px) {
+  .phone {
+    display: flex;
+    flex-direction: column;
+  }
+}
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -16,7 +16,7 @@
 .breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +24,7 @@
 .link.breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -128,6 +128,15 @@
  color: #000;
 }

+.uiTextPlaceholder {
+  color: var(--Base-Text-Placeholder);
+}
+
+.uiTextPlaceholder:hover,
+.uiTextPlaceholder:active {
+  color: var(--Base-Text-Medium-contrast);
+}
+
 .burgundy {
  color: var(--Base-Text-High-contrast);
 }
@@ -211,6 +220,14 @@
  line-height: var(--typography-Caption-Regular-lineHeight);
 }

+.tiny {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+}
+
 .activeSmall {
  font-family: var(--typography-Caption-Bold-fontFamily);
  font-size: var(--typography-Caption-Bold-fontSize);
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -17,10 +17,12 @@ export const linkVariants = cva(styles.link, {
      peach80: styles.peach80,
      white: styles.white,
      red: styles.red,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
    },
    size: {
      small: styles.small,
      regular: styles.regular,
+      tiny: styles.tiny,
    },
    textDecoration: {
      none: styles.noDecoration,
--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -28,6 +28,7 @@ export function Tooltip<P extends TooltipPosition>({
      role="tooltip"
      aria-label={text}
      onClick={handleToggle}
+      onTouchStart={handleToggle}
      data-active={isActive}
    >
      <div className={className}>
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -16,6 +16,7 @@
  transition: opacity 0.3s;
  max-width: 200px;
  min-width: 150px;
+  height: fit-content;
 }

 .tooltipContainer:hover .tooltip {