Merge branch 'develop' into feature/tracking

.env

@@ -1,4 +0,0 @@
-# See update-dotenv.mjs
-AUTH_URL="REPLACE-ON-NETLIFY-BUILD"
-NEXTAUTH_URL="REPLACE-ON-NETLIFY-BUILD"
-PUBLIC_URL="REPLACED-ON-NETLIFY-BUILD"

actions/registerUserBookingFlow.ts

@@ -0,0 +1,67 @@
+"use server"
+
+import { parsePhoneNumber } from "libphonenumber-js"
+import { z } from "zod"
+
+import { serviceServerActionProcedure } from "@/server/trpc"
+
+import { phoneValidator } from "@/utils/phoneValidator"
+
+const registerUserPayload = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+  dateOfBirth: z.string(),
+  address: z.object({
+    countryCode: z.string(),
+    zipCode: z.string(),
+  }),
+  email: z.string(),
+  phoneNumber: phoneValidator("Phone is required"),
+})
+
+export const registerUserBookingFlow = serviceServerActionProcedure
+  .input(registerUserPayload)
+  .mutation(async function ({ ctx, input }) {
+    const payload = {
+      ...input,
+      language: ctx.lang,
+      phoneNumber: parsePhoneNumber(input.phoneNumber)
+        .formatNational()
+        .replace(/\s+/g, ""),
+    }
+
+    // TODO: Consume the API to register the user as soon as passwordless signup is enabled.
+    // let apiResponse
+    // try {
+    //   apiResponse = await api.post(api.endpoints.v1.profile, {
+    //     body: payload,
+    //     headers: {
+    //       Authorization: `Bearer ${ctx.serviceToken}`,
+    //     },
+    //   })
+    // } catch (error) {
+    //   console.error("Unexpected error", error)
+    //   return { success: false, error: "Unexpected error" }
+    // }
+
+    // if (!apiResponse.ok) {
+    //   const text = await apiResponse.text()
+    //   console.error(text)
+    //   console.error(
+    //     "registerUserBookingFlow api error",
+    //     JSON.stringify({
+    //       query: input,
+    //       error: {
+    //         status: apiResponse.status,
+    //         statusText: apiResponse.statusText,
+    //         error: text,
+    //       },
+    //     })
+    //   )
+    //   return { success: false, error: "API error" }
+    // }
+    // const json = await apiResponse.json()
+    // console.log("registerUserBookingFlow: json", json)
+
+    return { success: true, data: payload }
+  })

app/[lang]/(live)/(protected)/logout/route.ts

@@ -4,6 +4,7 @@ import { AuthError } from "next-auth"
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 import { internalServerError } from "@/server/errors/next"
+import { getPublicURL } from "@/server/utils"
 
 import { signOut } from "@/auth"
 
@@ -11,6 +12,8 @@ export async function GET(
   request: NextRequest,
   context: { params: { lang: Lang } }
 ) {
+  const publicURL = getPublicURL(request)
+
   let redirectTo: string = ""
 
   const returnUrl = request.headers.get("x-returnurl")
@@ -39,7 +42,7 @@ export async function GET(
     // Make relative URL to absolute URL
     if (redirectTo.startsWith("/")) {
       console.log(`[logout] make redirectTo absolute, from ${redirectTo}`)
-      redirectTo = new URL(redirectTo, env.PUBLIC_URL).href
+      redirectTo = new URL(redirectTo, publicURL).href
       console.log(`[logout] make redirectTo absolute, to ${redirectTo}`)
     }
 

app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx

@@ -1,6 +1,4 @@
-import { ArrowRightIcon } from "@/components/Icons"
 import ManagePreferencesButton from "@/components/Profile/ManagePreferencesButton"
-import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"

app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx

@@ -1,3 +1,5 @@
+import { env } from "@/env/server"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
@@ -15,7 +17,7 @@ export default function ProfileLayout({
         {profile}
         <Divider color="burgundy" opacity={8} />
         {creditCards}
-        {communication}
+        {env.HIDE_FOR_NEXT_RELEASE ? null : communication}
       </section>
     </main>
   )

app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
 import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import { setLang } from "@/i18n/serverContext"
@@ -38,6 +39,7 @@ export default async function StepLayout({
             <Summary />
           </aside>
         </div>
+        <SidePeek hotel={hotel.data.attributes} />
       </main>
     </EnterDetailsProvider>
   )

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -1,5 +1,5 @@
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import { setLang } from "@/i18n/serverContext"
@@ -15,18 +15,20 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const hotelData = await serverClient().hotel.hotelData.get({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-    include: ["RoomCategories"],
-  })
-
-  const roomConfigurations = await serverClient().hotel.availability.rooms({
-    hotelId: parseInt(searchParams.hotel, 10),
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
-  })
+  const [hotelData, roomConfigurations, user] = await Promise.all([
+    serverClient().hotel.hotelData.get({
+      hotelId: searchParams.hotel,
+      language: params.lang,
+      include: ["RoomCategories"],
+    }),
+    serverClient().hotel.availability.rooms({
+      hotelId: parseInt(searchParams.hotel, 10),
+      roomStayStartDate: "2024-11-02",
+      roomStayEndDate: "2024-11-03",
+      adults: 1,
+    }),
+    getProfileSafely(),
+  ])
 
   if (!roomConfigurations) {
     return "No rooms found" // TODO: Add a proper error message
@@ -47,6 +49,7 @@ export default async function SelectRatePage({
           <RoomSelection
             roomConfigurations={roomConfigurations}
             roomCategories={roomCategories ?? []}
+            user={user}
           />
         </div>
       </div>

app/[lang]/(live)/(public)/login/route.ts

@@ -4,6 +4,7 @@ import { AuthError } from "next-auth"
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 import { internalServerError } from "@/server/errors/next"
+import { getPublicURL } from "@/server/utils"
 
 import { signIn } from "@/auth"
 
@@ -11,9 +12,7 @@ export async function GET(
   request: NextRequest,
   context: { params: { lang: Lang } }
 ) {
-  if (!env.PUBLIC_URL) {
-    throw internalServerError("No value for env.PUBLIC_URL")
-  }
+  const publicURL = getPublicURL(request)
 
   let redirectHeaders: Headers | undefined = undefined
   let redirectTo: string
@@ -54,7 +53,7 @@ export async function GET(
     // Make relative URL to absolute URL
     if (redirectTo.startsWith("/")) {
       console.log(`[login] make redirectTo absolute, from ${redirectTo}`)
-      redirectTo = new URL(redirectTo, env.PUBLIC_URL).href
+      redirectTo = new URL(redirectTo, publicURL).href
       console.log(`[login] make redirectTo absolute, to ${redirectTo}`)
     }
 
@@ -131,7 +130,7 @@ export async function GET(
        * because user might choose to do Email link login.
        * */
       // The `for_origin` param is used to make Curity email login functionality working.
-      for_origin: env.PUBLIC_URL,
+      for_origin: publicURL,
       // This is new param set for differentiate between the Magic link login of New web and current web
       version: "2",
     }

app/[lang]/(live)/(public)/verifymagiclink/route.ts

@@ -5,6 +5,7 @@ import { Lang } from "@/constants/languages"
 import { login } from "@/constants/routes/handleAuth"
 import { env } from "@/env/server"
 import { badRequest, internalServerError } from "@/server/errors/next"
+import { getPublicURL } from "@/server/utils"
 
 import { signIn } from "@/auth"
 
@@ -12,9 +13,7 @@ export async function GET(
   request: NextRequest,
   context: { params: { lang: Lang } }
 ) {
-  if (!env.PUBLIC_URL) {
-    throw internalServerError("No value for env.PUBLIC_URL")
-  }
+  const publicURL = getPublicURL(request)
 
   const loginKey = request.nextUrl.searchParams.get("loginKey")
   if (!loginKey) {
@@ -44,7 +43,7 @@ export async function GET(
     console.log(
       `[verifymagiclink] make redirectTo absolute, from ${redirectTo}`
     )
-    redirectTo = new URL(redirectTo, env.PUBLIC_URL).href
+    redirectTo = new URL(redirectTo, publicURL).href
     console.log(`[verifymagiclink] make redirectTo absolute, to ${redirectTo}`)
   }
 
@@ -69,7 +68,7 @@ export async function GET(
         ui_locales: context.params.lang,
         scope: ["openid", "profile"].join(" "),
         loginKey: loginKey,
-        for_origin: env.PUBLIC_URL,
+        for_origin: publicURL,
         acr_values: "abc",
         version: "2",
       }

app/api/web/add-card-callback/[lang]/route.ts

@@ -4,14 +4,17 @@ import { env } from "process"
 import { Lang } from "@/constants/languages"
 import { profile } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
+import { getPublicURL } from "@/server/utils"
 
 export async function GET(
   request: NextRequest,
   { params }: { params: { lang: string } }
 ) {
+  const publicURL = getPublicURL(request)
+
   console.log(`[add-card] callback started`)
   const lang = params.lang as Lang
-  const returnUrl = new URL(`${env.PUBLIC_URL}/${profile[lang ?? Lang.en]}`)
+  const returnUrl = new URL(`${publicURL}/${profile[lang ?? Lang.en]}`)
 
   try {
     const searchParams = request.nextUrl.searchParams

app/api/web/envtest-dynamic-edge/route.ts

@@ -1,38 +0,0 @@
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}
-
-export const dynamic = "force-dynamic"
-
-export const runtime = "edge"

app/api/web/envtest-dynamic-load-file/route.ts

@@ -1,39 +0,0 @@
-import { config } from "dotenv"
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-config({ path: "./.env" })
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}
-
-export const dynamic = "force-dynamic"

app/api/web/envtest-dynamic-load/route.ts

@@ -1,38 +0,0 @@
-import "dotenv/config"
-
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}
-
-export const dynamic = "force-dynamic"

app/api/web/envtest-dynamic-override/route.ts

@@ -1,39 +0,0 @@
-import { config } from "dotenv"
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-config({ debug: true, override: true })
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}
-
-export const dynamic = "force-dynamic"

app/api/web/envtest-dynamic/route.ts

@@ -1,36 +0,0 @@
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}
-
-export const dynamic = "force-dynamic"

app/api/web/envtest-static-load-file/route.ts

@@ -1,37 +0,0 @@
-import { config } from "dotenv"
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-config({ path: "./.env" })
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}

app/api/web/envtest-static-load/route.ts

@@ -1,36 +0,0 @@
-import "dotenv/config"
-
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}

app/api/web/envtest-static-override/route.ts

@@ -1,37 +0,0 @@
-import { config } from "dotenv"
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-config({ debug: true, override: true })
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}

app/api/web/envtest-static/route.ts

@@ -1,34 +0,0 @@
-import { NextResponse } from "next/server"
-
-import { env } from "@/env/server"
-
-import type { NextRequest } from "next/server"
-
-export async function GET(request: NextRequest) {
-  const e = process.env
-  console.log({ process_env: process.env })
-
-  const urlVar = "PUBLIC_URL"
-  const nextAuthUrlVar = "NEXTAUTH_URL"
-  const nextAuthUrlVar2 = "AUTH_URL"
-  const envTestVar = "ENVTEST"
-
-  const values = {
-    env_url: env.PUBLIC_URL,
-    static_url: process.env.PUBLIC_URL,
-    dynamic_url: e[urlVar],
-    env_envtest: env.ENVTEST,
-    static_envtest: process.env.ENVTEST,
-    dynamic_envtest: e[envTestVar],
-    env_nextauth: env.NEXTAUTH_URL,
-    static_nextauth: process.env.NEXTAUTH_URL,
-    dynamic_nextauth: e[nextAuthUrlVar],
-    env_nextauth2: env.AUTH_URL,
-    static_nextauth2: process.env.AUTH_URL,
-    dynamic_nextauth2: e[nextAuthUrlVar2],
-  }
-
-  console.log(values)
-
-  return NextResponse.json(values)
-}

app/api/web/payment-callback/[lang]/[status]/route.ts

@@ -6,20 +6,21 @@ import {
   bookingConfirmation,
   payment,
 } from "@/constants/routes/hotelReservation"
+import { getPublicURL } from "@/server/utils"
 
 export async function GET(
   request: NextRequest,
   { params }: { params: { lang: string; status: string } }
 ): Promise<NextResponse> {
+  const publicURL = getPublicURL(request)
+
   console.log(`[payment-callback] callback started`)
   const lang = params.lang as Lang
   const status = params.status
-  const returnUrl = new URL(`${env.PUBLIC_URL}/${payment[lang]}`)
+  const returnUrl = new URL(`${publicURL}/${payment[lang]}`)
 
   if (status === "success") {
-    const confirmationUrl = new URL(
-      `${env.PUBLIC_URL}/${bookingConfirmation[lang]}`
-    )
+    const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation[lang]}`)
     console.log(`[payment-callback] redirecting to: ${confirmationUrl}`)
     return NextResponse.redirect(confirmationUrl)
   }

auth.ts

@@ -109,6 +109,7 @@ const curityProvider = {
 } satisfies OIDCConfig<User>
 
 export const config = {
+  basePath: "/api/web/auth",
   debug: env.NEXTAUTH_DEBUG,
   providers: [curityProvider],
   redirectProxyUrl: env.NEXTAUTH_REDIRECT_PROXY_URL,
@@ -233,4 +234,4 @@ export const {
   auth,
   signIn,
   signOut,
-} = NextAuth(config)
+} = NextAuth(config)

components/Blocks/Accordion/accordion.module.css

@@ -0,0 +1,7 @@
+.accordion:not(.allVisible) :nth-child(n + 6) {
+  display: none;
+}
+
+.accordion:not(.allVisible) :nth-child(5) {
+  border: none;
+}

components/Blocks/Accordion/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+import { useState } from "react"
+
+import JsonToHtml from "@/components/JsonToHtml"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import Accordion from "@/components/TempDesignSystem/Accordion"
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+
+import styles from "./accordion.module.css"
+
+import type { AccordionProps } from "@/types/components/blocks/Accordion"
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
+
+export default function AccordionSection({ accordion, title }: AccordionProps) {
+  const showToggleButton = accordion.length > 5
+  const [allAccordionsVisible, setAllAccordionsVisible] =
+    useState(!showToggleButton)
+
+  function toggleAccordions() {
+    setAllAccordionsVisible((state) => !state)
+  }
+
+  return (
+    <SectionContainer id={HotelHashValues.faq}>
+      {title && <SectionHeader textTransform="uppercase" title={title} />}
+      <Accordion
+        className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
+        theme="light"
+        variant="card"
+      >
+        {accordion.map((acc) => (
+          <AccordionItem key={acc.question} title={acc.question}>
+            <JsonToHtml
+              embeds={acc.answer.embedded_itemsConnection.edges}
+              nodes={acc.answer.json?.children[0].children}
+            />
+          </AccordionItem>
+        ))}
+      </Accordion>
+
+      {showToggleButton ? (
+        <ShowMoreButton
+          loadMoreData={toggleAccordions}
+          showLess={allAccordionsVisible}
+          textShowMore="See all FAQ"
+          textShowLess="See less FAQ"
+        />
+      ) : null}
+    </SectionContainer>
+  )
+}

components/Blocks/CardsGrid.tsx

@@ -7,13 +7,27 @@ import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
 import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
 import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
+import type { StackableGridProps } from "../TempDesignSystem/Grids/Stackable/stackable"
 
 export default function CardsGrid({
   cards_grid,
   firstItem = false,
 }: CardsGridProps) {
-  const columns =
-    cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
+  let columns: StackableGridProps["columns"]
+
+  switch (cards_grid.layout) {
+    case CardsGridLayoutEnum.ONE_COLUMN:
+      columns = 1
+      break
+    case CardsGridLayoutEnum.TWO_COLUMNS:
+      columns = 2
+      break
+    case CardsGridLayoutEnum.THREE_COLUMNS:
+      columns = 3
+      break
+    default:
+      columns = 3
+  }
 
   return (
     <SectionContainer>

components/Blocks/DynamicContent/index.tsx

@@ -1,3 +1,5 @@
+import { env } from "@/env/server"
+
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
 import LoyaltyLevels from "@/components/Blocks/DynamicContent/LoyaltyLevels"
 import Overview from "@/components/Blocks/DynamicContent/Overview"
@@ -26,7 +28,9 @@ export default async function DynamicContent({
     case DynamicContentEnum.Blocks.components.earn_and_burn:
       return <EarnAndBurn {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.expiring_points:
-      return <ExpiringPoints {...dynamic_content} />
+      return env.HIDE_FOR_NEXT_RELEASE ? null : (
+        <ExpiringPoints {...dynamic_content} />
+      )
     case DynamicContentEnum.Blocks.components.how_it_works:
       return (
         <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />

components/Blocks/UspGrid/renderOptions.tsx

@@ -1,9 +1,7 @@
 import Link from "@/components/TempDesignSystem/Link"
-import { removeMultipleSlashes } from "@/utils/url"
 
 import styles from "./uspgrid.module.css"
 
-import { EmbedEnum } from "@/types/requests/utils/embeds"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
 import type {

components/Blocks/index.tsx

@@ -5,6 +5,7 @@ import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
 
+import AccordionSection from "./Accordion"
 import Table from "./Table"
 
 import type { BlocksProps } from "@/types/components/blocks"
@@ -14,6 +15,14 @@ export default function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
     const firstItem = idx === 0
     switch (block.typename) {
+      case BlocksEnums.block.Accordion:
+        return (
+          <AccordionSection
+            accordion={block.accordion.accordions}
+            title={block.accordion.title}
+            key={`${block.typename}-${idx}`}
+          />
+        )
       case BlocksEnums.block.CardsGrid:
         return (
           <CardsGrid
@@ -65,6 +74,7 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.UspGrid:
         return <UspGrid usp_grid={block.usp_grid} />
+
       default:
         return null
     }

components/Breadcrumbs/index.tsx

@@ -48,7 +48,7 @@ export default async function Breadcrumbs() {
 
           return (
             <li key={breadcrumb.uid} className={styles.listItem}>
-              <Footnote color="burgundy" textTransform="bold">
+              <Footnote color="burgundy" type="bold">
                 {breadcrumb.title}
               </Footnote>
             </li>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -11,10 +11,10 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { IntroSectionProps } from "./types"
-
 import styles from "./introSection.module.css"
 
+import type { IntroSectionProps } from "./types"
+
 export default async function IntroSection({
   hotelName,
   hotelDescription,

components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -1,5 +1,4 @@
 "use client"
-
 import { useIntl } from "react-intl"
 
 import useHotelPageStore from "@/stores/hotel-page"
@@ -21,7 +20,6 @@ export default function MobileMapToggle() {
         onClick={closeDynamicMap}
       >
         <HouseIcon
-          className={styles.icon}
           color={!isDynamicMapOpen ? "white" : "red"}
           height={24}
           width={24}
@@ -34,7 +32,6 @@ export default function MobileMapToggle() {
         onClick={openDynamicMap}
       >
         <MapIcon
-          className={styles.icon}
           color={isDynamicMapOpen ? "white" : "red"}
           height={24}
           width={24}

components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,9 +1,8 @@
 .mobileToggle {
-  position: fixed;
+  position: sticky;
   bottom: var(--Spacing-x5);
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 1;
+  margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--Spacing-x-half);

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -10,7 +10,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
 
-import type { RoomCardProps } from "@/types/components/hotelPage/roomCard"
+import type { RoomCardProps } from "@/types/components/hotelPage/room"
 
 export function RoomCard({
   badgeTextTransKey,

components/ContentType/HotelPage/Rooms/index.tsx

@@ -3,22 +3,23 @@
 import { useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
-import Button from "@/components/TempDesignSystem/Button"
 import Grids from "@/components/TempDesignSystem/Grids"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import { RoomCard } from "./RoomCard"
 
 import styles from "./rooms.module.css"
 
+import type { RoomsProps } from "@/types/components/hotelPage/room"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
-import type { RoomsProps } from "./types"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
-  const [allRoomsVisible, setAllRoomsVisible] = useState(false)
+  const showToggleButton = rooms.length > 3
+  const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
+
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const mappedRooms = rooms
@@ -42,12 +43,11 @@ export function Rooms({ rooms }: RoomsProps) {
     })
     .sort((a, b) => a.sortOrder - b.sortOrder)
 
-  function handleToggleShowMore() {
+  function handleShowMore() {
     if (scrollRef.current && allRoomsVisible) {
       scrollRef.current.scrollIntoView({ behavior: "smooth" })
     }
-
-    setAllRoomsVisible((previousState) => !previousState)
+    setAllRoomsVisible((state) => !state)
   }
 
   return (
@@ -61,41 +61,30 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable>
-        {mappedRooms.map(
-          ({ id, images, title, subtitle, popularChoice }, index) => (
-            <div
-              key={id}
-              className={
-                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
-              }
-            >
-              <RoomCard
-                id={id}
-                images={images}
-                title={title}
-                subtitle={subtitle}
-                badgeTextTransKey={popularChoice ? "Popular choice" : null}
-              />
-            </div>
-          )
-        )}
+      <Grids.Stackable
+        className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
+      >
+        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
+          <div key={id}>
+            <RoomCard
+              id={id}
+              images={images}
+              title={title}
+              subtitle={subtitle}
+              badgeTextTransKey={popularChoice ? "Popular choice" : null}
+            />
+          </div>
+        ))}
       </Grids.Stackable>
 
-      <div className={styles.ctaContainer}>
-        <Button
-          onClick={handleToggleShowMore}
-          theme="base"
-          intent="text"
-          variant="icon"
-          className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
-        >
-          <ChevronDownIcon className={styles.chevron} />
-          {intl.formatMessage({
-            id: allRoomsVisible ? "Show less" : "Show more",
-          })}
-        </Button>
-      </div>
+      {showToggleButton ? (
+        <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={allRoomsVisible}
+          textShowMore="Show more rooms"
+          textShowLess="Show less rooms"
+        />
+      ) : null}
     </SectionContainer>
   )
 }

components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -13,10 +13,10 @@
   justify-content: center;
 }
 
-.hiddenRoomCard {
-  display: none;
-}
-
 .showMoreButton.showLess .chevron {
   transform: rotate(180deg);
 }
+
+.grid:not(.allVisible) :nth-child(n + 4) {
+  display: none;
+}

components/ContentType/HotelPage/Rooms/types.ts

@@ -1,5 +0,0 @@
-import { RoomData } from "@/types/hotel"
-
-export type RoomsProps = {
-  rooms: RoomData[]
-}

components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -1,7 +1,7 @@
 .stickyWrapper {
   position: sticky;
   top: var(--booking-widget-mobile-height);
-  z-index: 1;
+  z-index: 2;
   background-color: var(--Base-Surface-Subtle-Normal);
   border-bottom: 1px solid var(--Base-Border-Subtle);
   overflow-x: auto;

components/ContentType/HotelPage/hotelPage.module.css

@@ -11,6 +11,7 @@
     "mapContainer";
   margin: 0 auto;
   max-width: var(--max-width);
+  z-index: 0;
 }
 
 .hotelImages {

components/ContentType/HotelPage/index.tsx

@@ -2,6 +2,7 @@ import hotelPageParams from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
+import AccordionSection from "@/components/Blocks/Accordion"
 import SidePeekProvider from "@/components/SidePeekProvider"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
@@ -47,6 +48,7 @@ export default async function HotelPage() {
     activitiesCard,
     pointsOfInterest,
     facilities,
+    faq,
   } = hotelData
 
   const topThreePois = pointsOfInterest.slice(0, 3)
@@ -64,7 +66,7 @@ export default async function HotelPage() {
       <TabNavigation
         restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
         hasActivities={!!activitiesCard}
-        hasFAQ={false}
+        hasFAQ={!!faq}
       />
       <main className={styles.mainSection}>
         <div id={HotelHashValues.overview} className={styles.introContainer}>
@@ -80,6 +82,9 @@ export default async function HotelPage() {
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} activitiesCard={activitiesCard} />
+        {faq && (
+          <AccordionSection accordion={faq.accordions} title={faq.title} />
+        )}
       </main>
       {googleMapsApiKey ? (
         <>

components/DatePicker/Screen/Desktop.tsx

@@ -61,9 +61,9 @@ export default function DatePickerDesktop({
       locale={locale}
       mode="range"
       numberOfMonths={2}
-      onSelect={handleOnSelect}
+      onDayClick={handleOnSelect}
       pagedNavigation
-      required
+      required={false}
       selected={selectedDate}
       startMonth={currentDate}
       weekStartsOn={1}
@@ -82,7 +82,7 @@ export default function DatePickerDesktop({
                   size="small"
                   theme="base"
                 >
-                  <Caption color="white" textTransform="bold">
+                  <Caption color="white" type="bold">
                     {intl.formatMessage({ id: "Select dates" })}
                   </Caption>
                 </Button>

components/DatePicker/Screen/Mobile.tsx

@@ -78,7 +78,7 @@ export default function DatePickerMobile({
       mode="range"
       /** Showing full year or what's left of it */
       numberOfMonths={12}
-      onSelect={handleOnSelect}
+      onDayClick={handleOnSelect}
       required
       selected={selectedDate}
       startMonth={startMonth}

components/DatePicker/Screen/desktop.module.css

@@ -47,8 +47,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -75,6 +75,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],

components/DatePicker/Screen/mobile.module.css

@@ -113,8 +113,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -141,6 +141,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],

components/DatePicker/date-picker.module.css

@@ -22,6 +22,11 @@
 
 .hideWrapper {
   background-color: var(--Main-Grey-White);
+  display: none;
+}
+
+.container[data-isopen="true"] .hideWrapper {
+  display: block;
 }
 
 @media screen and (max-width: 1366px) {

components/DatePicker/index.tsx

@@ -14,8 +14,6 @@ import DatePickerMobile from "./Screen/Mobile"
 
 import styles from "./date-picker.module.css"
 
-import type { DateRange } from "react-day-picker"
-
 import type { DatePickerFormProps } from "@/types/components/datepicker"
 
 const locales = {
@@ -33,6 +31,8 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const { register, setValue } = useFormContext()
   const ref = useRef<HTMLDivElement | null>(null)
 
+  const [isSelectingFrom, setIsSelectingFrom] = useState(true)
+
   function close() {
     setIsOpen(false)
   }
@@ -41,11 +41,29 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
-  function handleSelectDate(selected: DateRange) {
-    setValue(name, {
-      from: dt(selected.from).format("YYYY-MM-DD"),
-      to: dt(selected.to).format("YYYY-MM-DD"),
-    })
+  function handleSelectDate(selected: Date) {
+    if (isSelectingFrom) {
+      setValue(name, {
+        from: dt(selected).format("YYYY-MM-DD"),
+        to: undefined,
+      })
+      setIsSelectingFrom(false)
+    } else {
+      const fromDate = dt(selectedDate.from)
+      const toDate = dt(selected)
+      if (toDate.isAfter(fromDate)) {
+        setValue(name, {
+          from: selectedDate.from,
+          to: toDate.format("YYYY-MM-DD"),
+        })
+      } else {
+        setValue(name, {
+          from: toDate.format("YYYY-MM-DD"),
+          to: selectedDate.from,
+        })
+      }
+      setIsSelectingFrom(true)
+    }
   }
 
   useEffect(() => {
@@ -64,7 +82,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)
     .format("ddd D MMM")
-  const selectedToDate = dt(selectedDate.to).locale(lang).format("ddd D MMM")
+  const selectedToDate = !!selectedDate.to
+    ? dt(selectedDate.to).locale(lang).format("ddd D MMM")
+    : ""
 
   return (
     <div className={styles.container} data-isopen={isOpen} ref={ref}>

components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -33,7 +33,7 @@ export default function ClearSearchButton({
       type="button"
     >
       <DeleteIcon color="burgundy" height={20} width={20} />
-      <Caption color="burgundy" textTransform="bold">
+      <Caption color="burgundy" type="bold">
         {intl.formatMessage({ id: "Clear searches" })}
       </Caption>
     </button>

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -48,15 +48,6 @@ export default function Search({ locations }: SearchProps) {
     dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
   }
 
-  function handleOnBlur() {
-    if (!value && state.searchData?.name) {
-      setValue(name, state.searchData.name)
-      // Always need to manually trigger
-      // revalidation when setting value r-h-f
-      trigger()
-    }
-  }
-
   function handleOnChange(
     evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
   ) {
@@ -138,7 +129,9 @@ export default function Search({ locations }: SearchProps) {
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
             <Caption color={isOpen ? "uiTextActive" : "red"}>
-              {intl.formatMessage({ id: "Where to" })}
+              {state.searchData?.type === "hotels"
+                ? state.searchData?.relationships?.city?.name
+                : intl.formatMessage({ id: "Where to" })}
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
@@ -154,7 +147,6 @@ export default function Search({ locations }: SearchProps) {
                 }),
                 ...register(name, {
                   onBlur: function () {
-                    handleOnBlur()
                     closeMenu()
                   },
                   onChange: handleOnChange,

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -24,8 +24,3 @@
   p {
   color: var(--UI-Text-Active);
 }
-
-.container:hover:has(input:not(:active, :focus, :focus-within))
-  input::-webkit-search-cancel-button {
-  display: none;
-}

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
@@ -34,7 +34,7 @@ export default function Voucher() {
       >
         <div className={styles.vouchers}>
           <label>
-            <Caption color="disabled" textTransform="bold">
+            <Caption color="disabled" type="bold">
               {vouchers}
             </Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
@@ -50,17 +50,17 @@ export default function Voucher() {
       >
         <div className={styles.options}>
           <label className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{useVouchers}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{bonus}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useReward" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{reward}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -68,7 +68,7 @@
   .options {
     flex-direction: column;
     max-width: 190px;
-    gap: 0;
+    gap: var(--Spacing-x-half);
   }
   .vouchers:hover,
   .option:hover {
@@ -76,6 +76,7 @@
   }
   .optionsContainer {
     flex-direction: row;
+    align-items: center;
   }
   .checkboxVoucher {
     display: none;

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -75,8 +75,10 @@
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
+
   .when:hover,
   .rooms:hover,
+  .when:has([data-isopen="true"]),
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,15 +1,16 @@
 "use client"
+import { useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
+import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
 import { SearchIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import Input from "./Input"
 import Search from "./Search"
 import Voucher from "./Voucher"
 
@@ -20,7 +21,6 @@ import type { BookingWidgetFormContentProps } from "@/types/components/form/book
 export default function FormContent({
   locations,
   formId,
-  formState,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
@@ -37,21 +37,21 @@ export default function FormContent({
             <Search locations={locations} />
           </div>
           <div className={styles.when}>
-            <Caption color="red" textTransform="bold">
+            <Caption color="red" type="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
-                { totalNights: nights }
+                { totalNights: nights > 0 ? nights : 0 }
               )}
             </Caption>
             <DatePicker />
           </div>
           <div className={styles.rooms}>
             <label>
-              <Caption color="red" textTransform="bold">
+              <Caption color="red" type="bold">
                 {rooms}
               </Caption>
             </label>
-            <Input type="text" placeholder={rooms} />
+            <GuestsRoomsPickerForm />
           </div>
         </div>
         <div className={styles.voucherContainer}>
@@ -60,17 +60,12 @@ export default function FormContent({
         <div className={styles.buttonContainer}>
           <Button
             className={styles.button}
-            disabled={!formState.isValid}
             form={formId}
             intent="primary"
             theme="base"
             type="submit"
           >
-            <Caption
-              color="white"
-              textTransform="bold"
-              className={styles.buttonText}
-            >
+            <Caption color="white" type="bold" className={styles.buttonText}>
               {intl.formatMessage({ id: "Search" })}
             </Caption>
             <div className={styles.icon}>

components/Forms/BookingWidget/form.module.css

@@ -22,6 +22,7 @@
 @media screen and (min-width: 768px) {
   .section {
     display: flex;
+    width: 100%;
   }
 
   .default {
@@ -35,6 +36,13 @@
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
 
+  .section {
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
   .full {
     padding: var(--Spacing-x1) 0;
   }

components/Forms/BookingWidget/index.tsx

@@ -2,6 +2,10 @@
 import { useRouter } from "next/navigation"
 import { useFormContext } from "react-hook-form"
 
+import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"
+
+import useLang from "@/hooks/useLang"
+
 import FormContent from "./FormContent"
 import { bookingWidgetVariants } from "./variants"
 
@@ -9,11 +13,13 @@ import styles from "./form.module.css"
 
 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidget"
+import { Location } from "@/types/trpc/routers/hotel/locations"
 
 const formId = "booking-widget"
 
 export default function Form({ locations, type }: BookingWidgetFormProps) {
   const router = useRouter()
+  const lang = useLang()
 
   const classNames = bookingWidgetVariants({
     type,
@@ -23,11 +29,32 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
     useFormContext<BookingWidgetSchema>()
 
   function onSubmit(data: BookingWidgetSchema) {
-    data.location = JSON.parse(decodeURIComponent(data.location))
-    console.log(data)
-    // TODO: Parse data and route accordignly to Select hotel or select room-rate page
-    console.log("to be routing")
-    router.push("/en/hotelreservation/select-hotel")
+    const locationData: Location = JSON.parse(decodeURIComponent(data.location))
+
+    const bookingFlowPage =
+      locationData.type == "cities" ? selectHotel[lang] : selectRate[lang]
+    const bookingWidgetParams = new URLSearchParams(data.date)
+
+    if (locationData.type == "cities")
+      bookingWidgetParams.set("city", locationData.name)
+    else bookingWidgetParams.set("hotel", locationData.operaId || "")
+
+    data.rooms.forEach((room, index) => {
+      bookingWidgetParams.set(`room[${index}].adults`, room.adults.toString())
+
+      room.children.forEach((child, childIndex) => {
+        bookingWidgetParams.set(
+          `room[${index}].child[${childIndex}].age`,
+          child.age.toString()
+        )
+        bookingWidgetParams.set(
+          `room[${index}].child[${childIndex}].bed`,
+          child.bed.toString()
+        )
+      })
+    })
+
+    router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
   }
 
   return (

components/Forms/BookingWidget/schema.ts

@@ -2,6 +2,18 @@ import { z } from "zod"
 
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
+export const guestRoomSchema = z.object({
+  adults: z.number().default(1),
+  children: z.array(
+    z.object({
+      age: z.number().nonnegative(),
+      bed: z.number(),
+    })
+  ),
+})
+
+export const guestRoomsSchema = z.array(guestRoomSchema)
+
 export const bookingWidgetSchema = z.object({
   bookingCode: z.string(), // Update this as required when working with booking codes component
   date: z.object({
@@ -25,18 +37,7 @@ export const bookingWidgetSchema = z.object({
     { message: "Required" }
   ),
   redemption: z.boolean().default(false),
-  rooms: z.array(
-    // This will be updated when working in guests component
-    z.object({
-      adults: z.number().default(1),
-      children: z.array(
-        z.object({
-          age: z.number(),
-          bed: z.number(),
-        })
-      ),
-    })
-  ),
+  rooms: guestRoomsSchema,
   search: z.string({ coerce: true }).min(1, "Required"),
   voucher: z.boolean().default(false),
 })

components/Forms/Edit/Profile/FormContent/index.tsx

@@ -24,7 +24,7 @@ export default function FormContent() {
   const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
   const street = intl.formatMessage({ id: "Address" })
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
-  const password = intl.formatMessage({ id: "Current password" })
+  const currentPassword = intl.formatMessage({ id: "Current password" })
   const retypeNewPassword = intl.formatMessage({ id: "Retype new password" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
@@ -72,8 +72,10 @@ export default function FormContent() {
             {intl.formatMessage({ id: "Password" })}
           </Body>
         </header>
-        <Input label={password} name="password" type="password" />
-        <NewPassword />
+        <Input label={currentPassword} name="password" type="password" />
+        {/* visibilityToggleable set to false as feature is done for signup first */}
+        {/* likely we can remove the prop altogether once signup launches */}
+        <NewPassword visibilityToggleable={false} />
         <Input
           label={retypeNewPassword}
           name="retypeNewPassword"

components/Forms/Edit/Profile/schema.ts

@@ -26,7 +26,7 @@ export const editProfileSchema = z
     ),
 
     password: z.string().optional(),
-    newPassword: passwordValidator(),
+    newPassword: z.literal("").optional().or(passwordValidator()),
     retypeNewPassword: z.string().optional(),
   })
   .superRefine((data, ctx) => {

components/Forms/Register/index.tsx

@@ -107,7 +107,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
             </div>
             <div className={styles.dateField}>
               <header>
-                <Caption textTransform="bold">
+                <Caption type="bold">
                   {intl.formatMessage({ id: "Birth date" })}
                 </Caption>
               </header>

components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Counter from "../Counter"
+
+import styles from "./adult-selector.module.css"
+
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import {
+  AdultSelectorProps,
+  Child,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
+  const intl = useIntl()
+  const adultsLabel = intl.formatMessage({ id: "Adults" })
+  const { setValue } = useFormContext()
+  const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
+    (state) => state.rooms[roomIndex]
+  )
+  const increaseAdults = useGuestsRoomsStore((state) => state.increaseAdults)
+  const decreaseAdults = useGuestsRoomsStore((state) => state.decreaseAdults)
+
+  function increaseAdultsCount(roomIndex: number) {
+    if (adults < 6) {
+      increaseAdults(roomIndex)
+      setValue(`rooms.${roomIndex}.adults`, adults + 1)
+    }
+  }
+
+  function decreaseAdultsCount(roomIndex: number) {
+    if (adults > 1) {
+      decreaseAdults(roomIndex)
+      setValue(`rooms.${roomIndex}.adults`, adults - 1)
+      if (childrenInAdultsBed > adults) {
+        const toUpdateIndex = children.findIndex(
+          (child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED
+        )
+        if (toUpdateIndex != -1) {
+          setValue(
+            `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
+            children[toUpdateIndex].age < 3
+              ? BedTypeEnum.IN_CRIB
+              : BedTypeEnum.IN_EXTRA_BED
+          )
+        }
+      }
+    }
+  }
+
+  return (
+    <section className={styles.container}>
+      <Caption color="uiTextHighContrast" type="bold">
+        {adultsLabel}
+      </Caption>
+      <Counter
+        count={adults}
+        handleOnDecrease={() => {
+          decreaseAdultsCount(roomIndex)
+        }}
+        handleOnIncrease={() => {
+          increaseAdultsCount(roomIndex)
+        }}
+        disableDecrease={adults == 1}
+        disableIncrease={adults == 6}
+      />
+    </section>
+  )
+}

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
+
+import { ErrorCircleIcon } from "@/components/Icons"
+import Select from "@/components/TempDesignSystem/Select"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./child-selector.module.css"
+
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import {
+  ChildBed,
+  ChildInfoSelectorProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildInfoSelector({
+  child = { age: -1, bed: -1 },
+  index = 0,
+  roomIndex = 0,
+}: ChildInfoSelectorProps) {
+  const intl = useIntl()
+  const ageLabel = intl.formatMessage({ id: "Age" })
+  const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
+  const bedLabel = intl.formatMessage({ id: "Bed" })
+  const { setValue, trigger } = useFormContext()
+  const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
+    (state) => state.rooms[roomIndex]
+  )
+  const {
+    isValidated,
+    updateChildAge,
+    updateChildBed,
+    increaseChildInAdultsBed,
+    decreaseChildInAdultsBed,
+  } = useGuestsRoomsStore((state) => ({
+    isValidated: state.isValidated,
+    updateChildAge: state.updateChildAge,
+    updateChildBed: state.updateChildBed,
+    increaseChildInAdultsBed: state.increaseChildInAdultsBed,
+    decreaseChildInAdultsBed: state.decreaseChildInAdultsBed,
+  }))
+
+  const ageList = Array.from(Array(13).keys()).map((age) => ({
+    label: `${age}`,
+    value: age,
+  }))
+
+  function updateSelectedAge(age: number) {
+    updateChildAge(age, roomIndex, index)
+    setValue(`rooms.${roomIndex}.children.${index}.age`, age)
+    const availableBedTypes = getAvailableBeds(age)
+    updateSelectedBed(availableBedTypes[0].value)
+    trigger("rooms")
+  }
+
+  function updateSelectedBed(bed: number) {
+    if (bed == BedTypeEnum.IN_ADULTS_BED) {
+      increaseChildInAdultsBed(roomIndex)
+    } else if (child.bed == BedTypeEnum.IN_ADULTS_BED) {
+      decreaseChildInAdultsBed(roomIndex)
+    }
+    updateChildBed(bed, roomIndex, index)
+    setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
+  }
+
+  const allBedTypes: ChildBed[] = [
+    {
+      label: intl.formatMessage({ id: "In adults bed" }),
+      value: BedTypeEnum.IN_ADULTS_BED,
+    },
+    {
+      label: intl.formatMessage({ id: "In crib" }),
+      value: BedTypeEnum.IN_CRIB,
+    },
+    {
+      label: intl.formatMessage({ id: "In extra bed" }),
+      value: BedTypeEnum.IN_EXTRA_BED,
+    },
+  ]
+
+  function getAvailableBeds(age: number) {
+    let availableBedTypes: ChildBed[] = []
+    if (age <= 5 && (adults > childrenInAdultsBed || child.bed === 0)) {
+      availableBedTypes.push(allBedTypes[0])
+    }
+    if (age < 3) {
+      availableBedTypes.push(allBedTypes[1])
+    }
+    if (age > 2) {
+      availableBedTypes.push(allBedTypes[2])
+    }
+    return availableBedTypes
+  }
+
+  return (
+    <>
+      <div key={index} className={styles.childInfoContainer}>
+        <div>
+          <Select
+            required={true}
+            items={ageList}
+            label={ageLabel}
+            aria-label={ageLabel}
+            value={child.age}
+            onSelect={(key) => {
+              updateSelectedAge(key as number)
+            }}
+            name={`rooms.${roomIndex}.children.${index}.age`}
+            placeholder={ageLabel}
+          />
+        </div>
+        <div>
+          {child.age !== -1 ? (
+            <Select
+              items={getAvailableBeds(child.age)}
+              label={bedLabel}
+              aria-label={bedLabel}
+              value={child.bed}
+              onSelect={(key) => {
+                updateSelectedBed(key as number)
+              }}
+              name={`rooms.${roomIndex}.children.${index}.age`}
+              placeholder={bedLabel}
+            />
+          ) : null}
+        </div>
+      </div>
+      {isValidated && child.age < 0 ? (
+        <Caption color="red" className={styles.error}>
+          <ErrorCircleIcon color="red" />
+          {ageReqdErrMsg}
+        </Caption>
+      ) : null}
+    </>
+  )
+}

components/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.captionBold {
+  font-weight: 600;
+}
+
+.childInfoContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 2fr;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Counter from "../Counter"
+import ChildInfoSelector from "./ChildInfoSelector"
+
+import styles from "./child-selector.module.css"
+
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({ id: "Children" })
+  const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
+  const children = useGuestsRoomsStore(
+    (state) => state.rooms[roomIndex].children
+  )
+  const increaseChildren = useGuestsRoomsStore(
+    (state) => state.increaseChildren
+  )
+  const decreaseChildren = useGuestsRoomsStore(
+    (state) => state.decreaseChildren
+  )
+
+  function increaseChildrenCount(roomIndex: number) {
+    if (children.length < 5) {
+      increaseChildren(roomIndex)
+      setValue(`rooms.${roomIndex}.children.${children.length}`, {
+        age: -1,
+        bed: -1,
+      })
+      trigger("rooms")
+    }
+  }
+  function decreaseChildrenCount(roomIndex: number) {
+    if (children.length > 0) {
+      const newChildrenList = decreaseChildren(roomIndex)
+      setValue(`rooms.${roomIndex}.children`, newChildrenList)
+      trigger("rooms")
+    }
+  }
+
+  return (
+    <>
+      <section className={styles.container}>
+        <Caption color="uiTextHighContrast" type="bold">
+          {childrenLabel}
+        </Caption>
+        <Counter
+          count={children.length}
+          handleOnDecrease={() => {
+            decreaseChildrenCount(roomIndex)
+          }}
+          handleOnIncrease={() => {
+            increaseChildrenCount(roomIndex)
+          }}
+          disableDecrease={children.length == 0}
+          disableIncrease={children.length == 5}
+        />
+      </section>
+      {children.map((child, index) => (
+        <ChildInfoSelector
+          roomIndex={roomIndex}
+          index={index}
+          child={child}
+          key={index}
+        />
+      ))}
+    </>
+  )
+}

components/GuestsRoomsPicker/Counter/counter.module.css

@@ -0,0 +1,13 @@
+.counterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+}
+.counterBtn {
+  width: 40px;
+  height: 40px;
+}
+.counterBtn:not([disabled]) {
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}

components/GuestsRoomsPicker/Counter/index.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { MinusIcon, PlusIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./counter.module.css"
+
+import { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function Counter({
+  count,
+  handleOnIncrease,
+  handleOnDecrease,
+  disableIncrease,
+  disableDecrease,
+}: CounterProps) {
+  return (
+    <div className={styles.counterContainer}>
+      <Button
+        className={styles.counterBtn}
+        intent="inverted"
+        onClick={handleOnDecrease}
+        size="small"
+        theme="base"
+        variant="icon"
+        wrapping={true}
+        disabled={disableDecrease}
+      >
+        <MinusIcon color="burgundy" />
+      </Button>
+      <Body color="textHighContrast" textAlign="center">
+        {count}
+      </Body>
+      <Button
+        className={styles.counterBtn}
+        onClick={handleOnIncrease}
+        intent="inverted"
+        variant="icon"
+        theme="base"
+        wrapping={true}
+        size="small"
+        disabled={disableIncrease}
+      >
+        <PlusIcon color="burgundy" />
+      </Button>
+    </div>
+  )
+}

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -0,0 +1,113 @@
+"use client"
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
+
+import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
+import Button from "../TempDesignSystem/Button"
+import Divider from "../TempDesignSystem/Divider"
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import { Tooltip } from "../TempDesignSystem/Tooltip"
+import AdultSelector from "./AdultSelector"
+import ChildSelector from "./ChildSelector"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPicker({
+  closePicker,
+}: GuestsRoomsPickerProps) {
+  const intl = useIntl()
+  const doneLabel = intl.formatMessage({ id: "Done" })
+  const roomLabel = intl.formatMessage({ id: "Room" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "Disabled booking options header",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Disabled booking options text",
+  })
+  const addRoomLabel = intl.formatMessage({ id: "Add Room" })
+
+  const { getFieldState } = useFormContext<BookingWidgetSchema>()
+
+  const rooms = useGuestsRoomsStore((state) => state.rooms)
+
+  // Not in MVP
+  // const increaseRoom = useGuestsRoomsStore.use.increaseRoom()
+  // const decreaseRoom = useGuestsRoomsStore.use.decreaseRoom()
+
+  return (
+    <div className={styles.pickerContainer}>
+      <header className={styles.header}>
+        <button type="button" className={styles.close} onClick={closePicker}>
+          <CloseLargeIcon />
+        </button>
+      </header>
+      <div className={styles.contentContainer}>
+        {rooms.map((room, index) => (
+          <div className={styles.roomContainer} key={index}>
+            <section className={styles.roomDetailsContainer}>
+              <Subtitle type="two" className={styles.roomHeading}>
+                {roomLabel} {index + 1}
+              </Subtitle>
+              <AdultSelector roomIndex={index} />
+              <ChildSelector roomIndex={index} />
+            </section>
+            {/* Not in MVP
+            {index > 0 ? (
+              <Button intent="text" onClick={() => decreaseRoom(index)}>
+                Remove Room
+              </Button>
+            ) : null} */}
+            <Divider color="primaryLightSubtle" />
+          </div>
+        ))}
+      </div>
+      <footer className={styles.footer}>
+        <Tooltip
+          heading={disabledBookingOptionsHeader}
+          text={disabledBookingOptionsText}
+          position="bottom"
+          arrow="left"
+        >
+          {rooms.length < 4 ? (
+            <Button
+              intent="text"
+              variant="icon"
+              wrapping
+              disabled
+              theme="base"
+              className={styles.addRoom}
+            >
+              <PlusCircleIcon />
+              {addRoomLabel}
+            </Button>
+          ) : null}
+        </Tooltip>
+        <Button
+          onClick={closePicker}
+          disabled={getFieldState("rooms").invalid}
+          className={styles.hideOnMobile}
+          intent="tertiary"
+          theme="base"
+          size="small"
+        >
+          {doneLabel}
+        </Button>
+        <Button
+          onClick={closePicker}
+          disabled={getFieldState("rooms").invalid}
+          className={styles.hideOnDesktop}
+          intent="tertiary"
+          theme="base"
+          size="large"
+        >
+          {doneLabel}
+        </Button>
+      </footer>
+    </div>
+  )
+}

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -0,0 +1,141 @@
+.container {
+  overflow: hidden;
+  position: relative;
+  &[data-isopen="true"] {
+    overflow: visible;
+  }
+}
+.roomContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+.roomDetailsContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding-bottom: var(--Spacing-x1);
+}
+.hideWrapper {
+  background-color: var(--Main-Grey-White);
+}
+.roomHeading {
+  margin-bottom: var(--Spacing-x1);
+}
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+.body {
+  opacity: 0.8;
+}
+.footer {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: auto auto;
+  margin-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 1366px) {
+  .hideWrapper {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 100%;
+    transition: top 300ms ease;
+    z-index: 10002;
+  }
+
+  .container[data-isopen="true"] .hideWrapper {
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    top: 20px;
+  }
+
+  .pickerContainer {
+    --header-height: 72px;
+    --sticky-button-height: 140px;
+    display: grid;
+    grid-template-areas:
+      "header"
+      "content";
+    grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
+    position: relative;
+  }
+  .contentContainer {
+    grid-area: content;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
+
+  .header {
+    background-color: var(--Main-Grey-White);
+    display: grid;
+    grid-area: header;
+    padding: var(--Spacing-x3) var(--Spacing-x2);
+  }
+
+  .close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-self: flex-end;
+    padding: 0;
+  }
+
+  .roomContainer {
+    padding: 0 var(--Spacing-x2);
+  }
+  .roomContainer:last-of-type {
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
+  }
+
+  .footer {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 7.5%,
+      #ffffff 82.5%
+    );
+    padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    z-index: 10;
+  }
+
+  .footer button {
+    width: 100%;
+  }
+
+  .footer .hideOnMobile {
+    display: none;
+  }
+
+  .footer .addRoom {
+    justify-content: start;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .hideWrapper {
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    left: calc((var(--Spacing-x1) + var(--Spacing-x2)) * -1);
+    max-width: calc(100vw - 20px);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+    position: absolute;
+    top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
+    width: 360px;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .footer .hideOnDesktop {
+    display: none;
+  }
+}

components/GuestsRoomsPicker/index.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
+
+import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import GuestsRoomsPicker from "./GuestsRoomsPicker"
+
+import styles from "./guests-rooms-picker.module.css"
+
+export default function GuestsRoomsPickerForm() {
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const { rooms, adultCount, childCount, setIsValidated } = useGuestsRoomsStore(
+    (state) => ({
+      rooms: state.rooms,
+      adultCount: state.adultCount,
+      childCount: state.childCount,
+      setIsValidated: state.setIsValidated,
+    })
+  )
+  const ref = useRef<HTMLDivElement | null>(null)
+  function handleOnClick() {
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+  }
+  const closePicker = useCallback(() => {
+    const guestRoomsValidData = guestRoomsSchema.safeParse(rooms)
+    if (guestRoomsValidData.success) {
+      setIsOpen(false)
+      setIsValidated(false)
+    } else {
+      setIsValidated(true)
+    }
+  }, [rooms, setIsValidated, setIsOpen])
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (ref.current && target && !ref.current.contains(target)) {
+        closePicker()
+      }
+    }
+    document.addEventListener("click", handleClickOutside)
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [closePicker])
+
+  return (
+    <div className={styles.container} data-isopen={isOpen} ref={ref}>
+      <button className={styles.btn} onClick={handleOnClick} type="button">
+        <Body className={styles.body}>
+          {intl.formatMessage(
+            { id: "booking.rooms" },
+            { totalRooms: rooms.length }
+          )}
+          {", "}
+          {intl.formatMessage(
+            { id: "booking.adults" },
+            { totalAdults: adultCount }
+          )}
+          {childCount > 0
+            ? ", " +
+              intl.formatMessage(
+                { id: "booking.children" },
+                { totalChildren: childCount }
+              )
+            : null}
+        </Body>
+      </button>
+      <div aria-modal className={styles.hideWrapper} role="dialog">
+        <GuestsRoomsPicker closePicker={closePicker} />
+      </div>
+    </div>
+  )
+}

components/HotelReservation/Contact/contact.module.css

@@ -32,8 +32,8 @@
 }
 
 .ecoLabel {
-  display: grid;
-  grid-template-columns: auto 1fr;
+  display: flex;
+  align-items: center;
   column-gap: var(--Spacing-x-one-and-half);
   grid-column: 2 / 3;
   grid-row: 3 / 4;

components/HotelReservation/Contact/index.tsx

@@ -24,20 +24,26 @@ export default function Contact({ hotel }: ContactProps) {
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Address" })}
             </span>
-            <span>{hotel.address.streetAddress}</span>
-            <span>{hotel.address.city}</span>
+            <span>
+              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+            </span>
           </li>
           <li>
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Driving directions" })}
             </span>
-            <Link href="#">{intl.formatMessage({ id: "Google Maps" })}</Link>
+            <Link href="#" color="peach80">
+              Google Maps
+            </Link>
           </li>
           <li>
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Email" })}
             </span>
-            <Link href={`mailto:${hotel.contactInformation.email}`}>
+            <Link
+              href={`mailto:${hotel.contactInformation.email}`}
+              color="peach80"
+            >
               {hotel.contactInformation.email}
             </Link>
           </li>
@@ -45,7 +51,10 @@ export default function Contact({ hotel }: ContactProps) {
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Contact us" })}
             </span>
-            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
+            <Link
+              href={`tel:${hotel.contactInformation.phoneNumber}`}
+              color="peach80"
+            >
               {hotel.contactInformation.phoneNumber}
             </Link>
           </li>

components/HotelReservation/EnterDetails/Details/Signup/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+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"
+
+import styles from "./signup.module.css"
+
+export default function Signup({ name }: { name: string }) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const [isJoinChecked, setIsJoinChecked] = useState(false)
+
+  const joinValue = useWatch({ name })
+
+  useEffect(() => {
+    // In order to avoid hydration errors the state needs to be set as side effect,
+    // since the join value can come from search params
+    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" })}
+      />
+      {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>
+  )
+}

components/HotelReservation/EnterDetails/Details/Signup/signup.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: grid;
+  grid-column: 1/-1;
+  gap: var(--Spacing-x3);
+}
+
+.additionalFormData {
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
+.dateField {
+  display: grid;
+  gap: var(--Spacing-x1);
+}

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -6,14 +6,16 @@ import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
+import { registerUserBookingFlow } from "@/actions/registerUserBookingFlow"
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { detailsSchema, signedInDetailsSchema } from "./schema"
+import Signup from "./Signup"
 
 import styles from "./details.module.css"
 
@@ -25,28 +27,30 @@ import type {
 const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   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 initialData = useEnterDetailsStore((state) => ({
     countryCode: state.data.countryCode,
     email: state.data.email,
-    firstname: state.data.firstname,
-    lastname: state.data.lastname,
+    firstName: state.data.firstName,
+    lastName: state.data.lastName,
     phoneNumber: state.data.phoneNumber,
+    join: state.data.join,
+    dateOfBirth: state.data.dateOfBirth,
+    zipCode: state.data.zipCode,
+    termsAccepted: state.data.termsAccepted,
   }))
 
   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,
+      firstName: user?.firstName ?? initialData.firstName,
+      lastName: user?.lastName ?? initialData.lastName,
       phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
+      //@ts-expect-error: We use a literal for join to be true or false, which does not convert to a boolean
+      join: initialData.join,
+      dateOfBirth: initialData.dateOfBirth,
+      zipCode: initialData.zipCode,
+      termsAccepted: initialData.termsAccepted,
     },
     criteriaMode: "all",
     mode: "all",
@@ -56,10 +60,39 @@ export default function Details({ user }: DetailsProps) {
 
   const completeStep = useEnterDetailsStore((state) => state.completeStep)
 
+  // const errorMessage = intl.formatMessage({
+  //   id: "An error occurred. Please try again.",
+  // })
+
   const onSubmit = useCallback(
-    (values: DetailsSchema) => {
+    async function (values: DetailsSchema) {
+      if (values.join) {
+        const signupVals = {
+          firstName: values.firstName,
+          lastName: values.lastName,
+          email: values.email,
+          phoneNumber: values.phoneNumber,
+          address: {
+            zipCode: values.zipCode,
+            countryCode: values.countryCode,
+          },
+          dateOfBirth: values.dateOfBirth,
+        }
+
+        const res = await registerUserBookingFlow(signupVals)
+        if (!res.success) {
+          // if (res.error) {
+          //   toast.error(res.error)
+          // } else {
+          //   toast.error(errorMessage)
+          // }
+          return
+        }
+        console.log("Signed up user: ", res)
+      }
       completeStep(values)
     },
+
     [completeStep]
   )
 
@@ -77,14 +110,14 @@ export default function Details({ user }: DetailsProps) {
           onSubmit={methods.handleSubmit(onSubmit)}
         >
           <Input
-            label={intl.formatMessage({ id: "Firstname" })}
-            name="firstname"
+            label={intl.formatMessage({ id: "First name" })}
+            name="firstName"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           <Input
-            label={intl.formatMessage({ id: "Lastname" })}
-            name="lastname"
+            label={intl.formatMessage({ id: "Last name" })}
+            name="lastName"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
@@ -109,26 +142,9 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
+          {user ? null : <Signup name="join" />}
         </form>
         <footer className={styles.footer}>
-          {user ? null : (
-            <CheckboxCard
-              highlightSubtitle
-              list={list}
-              name="join"
-              subtitle={intl.formatMessage(
-                {
-                  id: "{difference}{amount} {currency}",
-                },
-                {
-                  amount: "491",
-                  currency: "SEK",
-                  difference: "-",
-                }
-              )}
-              title={intl.formatMessage({ id: "Join Scandic Friends" })}
-            />
-          )}
           <Button
             disabled={!methods.formState.isValid}
             form={formID}

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -2,18 +2,49 @@ import { z } from "zod"
 
 import { phoneValidator } from "@/utils/phoneValidator"
 
-export const detailsSchema = z.object({
+export const baseDetailsSchema = z.object({
   countryCode: z.string(),
   email: z.string().email(),
-  firstname: z.string(),
-  lastname: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
   phoneNumber: phoneValidator(),
 })
 
+export const notJoinDetailsSchema = baseDetailsSchema.merge(
+  z.object({
+    join: z.literal(false),
+    zipCode: z.string().optional(),
+    dateOfBirth: z.string().optional(),
+    termsAccepted: z.boolean().default(false),
+  })
+)
+
+export const joinDetailsSchema = baseDetailsSchema.merge(
+  z.object({
+    join: z.literal(true),
+    zipCode: z.string().min(1, { message: "Zip code is required" }),
+    dateOfBirth: z.string(),
+    termsAccepted: z.literal(true, {
+      errorMap: (err, ctx) => {
+        switch (err.code) {
+          case "invalid_literal":
+            return { message: "You must accept the terms and conditions" }
+        }
+        return { message: ctx.defaultError }
+      },
+    }),
+  })
+)
+
+export const detailsSchema = z.discriminatedUnion("join", [
+  notJoinDetailsSchema,
+  joinDetailsSchema,
+])
+
 export const signedInDetailsSchema = z.object({
   countryCode: z.string().optional(),
   email: z.string().email().optional(),
-  firstname: z.string().optional(),
-  lastname: z.string().optional(),
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
   phoneNumber: phoneValidator().optional(),
 })

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -20,54 +20,30 @@ export default function SectionAccordion({
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
-  const [isComplete, setIsComplete] = useState(false)
   const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const [isComplete, setIsComplete] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+
   const isValid = useEnterDetailsStore((state) => state.isValid[step])
-
   const navigate = useEnterDetailsStore((state) => state.navigate)
 
-  const contentRef = useRef<HTMLDivElement>(null)
-  const circleRef = useRef<HTMLDivElement>(null)
-
-  const isOpen = currentStep === step
-
-  useEffect(() => {
-    const content = contentRef.current
-    const circle = circleRef.current
-    if (content) {
-      if (isOpen) {
-        content.style.maxHeight = `${content.scrollHeight}px`
-      } else {
-        content.style.maxHeight = "0"
-      }
-    }
-
-    if (circle) {
-      if (isOpen) {
-        circle.style.backgroundColor = `var(--UI-Text-Placeholder);`
-      } else {
-        circle.style.backgroundColor = `var(--Base-Surface-Subtle-Hover);`
-      }
-    }
-  }, [isOpen])
-
   useEffect(() => {
     // We need to set the state on mount because of hydration errors
     setIsComplete(isValid)
   }, [isValid])
 
+  useEffect(() => {
+    setIsOpen(currentStep === step)
+  }, [currentStep, step])
+
   function onModify() {
     navigate(step)
   }
 
   return (
-    <section className={styles.wrapper} data-open={isOpen}>
+    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
-        <div
-          className={styles.circle}
-          data-checked={isComplete}
-          ref={circleRef}
-        >
+        <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (
             <CheckIcon color="white" height="16" width="16" />
           ) : null}
@@ -79,6 +55,7 @@ export default function SectionAccordion({
             <Footnote
               asChild
               textTransform="uppercase"
+              type="label"
               color="uiTextPlaceholder"
             >
               <h2>{header}</h2>
@@ -105,9 +82,7 @@ export default function SectionAccordion({
             </Button>
           )}
         </header>
-        <div className={styles.content} ref={contentRef}>
-          {children}
-        </div>
+        <div className={styles.content}>{children}</div>
       </div>
     </section>
   )

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -22,12 +22,14 @@
 }
 
 .main {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Spacing-x3);
   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;
 }
 
 .headerContainer {
@@ -70,12 +72,23 @@
   background-color: var(--Base-Surface-Subtle-Hover);
 }
 
+.wrapper[data-open="true"] .main {
+  grid-template-rows: 2em 1fr;
+}
+
 .content {
   overflow: hidden;
-  transition: max-height 0.4s ease-out;
-  max-height: 0;
+}
+
+@keyframes allowOverflow {
+  0% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: visible;
+  }
 }
 
 .wrapper[data-open="true"] .content {
-  max-height: 1000px;
+  animation: allowOverflow 0.4s 0.4s ease;
 }

components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css

@@ -0,0 +1,5 @@
+.spacing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}

components/HotelReservation/EnterDetails/SidePeek/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Contact from "@/components/HotelReservation/Contact"
+import Divider from "@/components/TempDesignSystem/Divider"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./enterDetailsSidePeek.module.css"
+
+import {
+  SidePeekEnum,
+  SidePeekProps,
+} from "@/types/components/enterDetails/sidePeek"
+
+export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
+  const activeSidePeek = useEnterDetailsStore((state) => state.activeSidePeek)
+  const close = useEnterDetailsStore((state) => state.closeSidePeek)
+
+  const intl = useIntl()
+  return (
+    <SidePeek
+      contentKey={SidePeekEnum.hotelDetails}
+      title={intl.formatMessage({ id: "About the hotel" })}
+      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
+      handleClose={close}
+    >
+      <article className={styles.spacing}>
+        <Contact hotel={hotel} />
+        <Divider />
+        <section className={styles.spacing}>
+          <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
+
+          <Body>{hotel.hotelContent.texts.facilityInformation}</Body>
+        </section>
+      </article>
+    </SidePeek>
+  )
+}

components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"
+
+export default function ToggleSidePeek() {
+  const intl = useIntl()
+  const openSidePeek = useEnterDetailsStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() => {
+        openSidePeek(SidePeekEnum.hotelDetails)
+      }}
+      theme="base"
+      size="small"
+      variant="icon"
+      intent="text"
+      wrapping
+    >
+      {intl.formatMessage({ id: "See room details" })}{" "}
+      <ChevronRightSmallIcon
+        color="baseButtonTextOnFillNormal"
+        height={20}
+        width={20}
+      />
+    </Button>
+  )
+}

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -1,13 +1,14 @@
 import { dt } from "@/lib/dt"
 
-import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
+import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import ToggleSidePeek from "./ToggleSidePeek"
+
 import styles from "./summary.module.css"
 
 // TEMP
@@ -21,7 +22,6 @@ const rooms = [
 export default async function Summary() {
   const intl = await getIntl()
   const lang = getLang()
-
   const fromDate = dt().locale(lang).format("ddd, D MMM")
   const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
   const diff = dt(toDate).diff(fromDate, "days")
@@ -75,19 +75,8 @@ export default async function Summary() {
           <ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
           {toDate}
         </Body>
-        <Link
-          className={styles.link}
-          color="baseButtonTextOnFillNormal"
-          href="#"
-          variant="icon"
-        >
-          {intl.formatMessage({ id: "See room details" })}
-          <ChevronRightSmallIcon
-            color="baseButtonTextOnFillNormal"
-            height={20}
-            width={20}
-          />
-        </Link>
+
+        <ToggleSidePeek />
       </header>
       <Divider color="primaryLightSubtle" />
       <div className={styles.addOns}>

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/hotelDetailSidePeek.module.css

@@ -1,4 +0,0 @@
-.buttons {
-  display: flex;
-  gap: var(--Spacing-x3);
-}

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/index.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useIntl } from "react-intl"
-
-import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
-import Button from "@/components/TempDesignSystem/Button"
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
-
-import styles from "./hotelDetailSidePeek.module.css"
-
-export default function HotelDetailSidePeek() {
-  const intl = useIntl()
-  const [isOpen, setIsOpen] = useState(false)
-
-  function toggleSidePeek() {
-    setIsOpen(!isOpen)
-  }
-
-  return (
-    <>
-      <div className={styles.buttons}>
-        <Button
-          variant="icon"
-          theme="base"
-          intent="text"
-          wrapping
-          onClick={toggleSidePeek}
-        >
-          {intl.formatMessage({
-            id: "See hotel details",
-          })}
-          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
-        </Button>
-        <Button
-          variant="icon"
-          theme="base"
-          intent="text"
-          wrapping
-          onClick={toggleSidePeek}
-        >
-          {intl.formatMessage({
-            id: "Show all amenities",
-          })}
-          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
-        </Button>
-      </div>
-      <SidePeek
-        contentKey="hotel-detail-side-peek"
-        title="Hotel Details"
-        isOpen={isOpen}
-        handleClose={() => setIsOpen(false)}
-      >
-        <div>TBD</div>
-      </SidePeek>
-    </>
-  )
-}

components/HotelReservation/HotelSelectionHeader/index.tsx

@@ -6,8 +6,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
-import HotelDetailSidePeek from "./HotelDetailSidePeek"
-
 import styles from "./hotelSelectionHeader.module.css"
 
 import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
@@ -46,7 +44,6 @@ export default function HotelSelectionHeader({
           <Body color="textHighContrast">
             {hotel.hotelContent.texts.descriptions.short}
           </Body>
-          <HotelDetailSidePeek />
         </div>
       </div>
     </header>

components/HotelReservation/ReadMore/index.tsx

@@ -11,7 +11,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import Contact from "./Contact"
+import Contact from "../Contact"
 
 import styles from "./readMore.module.css"
 

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx

@@ -26,7 +26,7 @@ export default function PriceList({
       <div className={styles.priceRow}>
         <dt>
           <Caption
-            textTransform="bold"
+            type="bold"
             color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
           >
             {intl.formatMessage({ id: "Standard price" })}
@@ -52,10 +52,7 @@ export default function PriceList({
 
       <div className={styles.priceRow}>
         <dt>
-          <Caption
-            textTransform="bold"
-            color={memberLocalPrice ? "red" : "disabled"}
-          >
+          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
             {intl.formatMessage({ id: "Member price" })}
           </Caption>
         </dt>

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -17,6 +17,8 @@ export default function FlexibilityOption({
   name,
   paymentTerm,
   priceInformation,
+  roomType,
+  handleSelectRate,
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
@@ -42,9 +44,24 @@ export default function FlexibilityOption({
 
   const { public: publicPrice, member: memberPrice } = product.productType
 
+  function onChange() {
+    const rate = {
+      roomType: roomType,
+      priceName: name,
+      public: publicPrice,
+      member: memberPrice,
+    }
+    handleSelectRate(rate)
+  }
+
   return (
     <label>
-      <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
+      <input
+        type="radio"
+        name="rateCode"
+        value={publicPrice?.rateCode}
+        onChange={onChange}
+      />
       <div className={styles.card}>
         <div className={styles.header} ref={setRef}>
           <DialogTrigger>
@@ -73,7 +90,7 @@ export default function FlexibilityOption({
             >
               <Caption
                 color="uiTextHighContrast"
-                textTransform="bold"
+                type="bold"
                 className={styles.popoverHeading}
               >
                 {name}

components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx

@@ -0,0 +1,45 @@
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./rateSummary.module.css"
+
+import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
+
+export default function RateSummary({
+  rateSummary,
+  isUserLoggedIn,
+}: RateSummaryProps) {
+  const intl = useIntl()
+
+  const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
+
+  return (
+    <div className={styles.summary}>
+      <div className={styles.summaryText}>
+        <Subtitle color="uiTextHighContrast">{rateSummary.roomType}</Subtitle>
+        <Body color="uiTextMediumContrast">{rateSummary.priceName}</Body>
+      </div>
+      <div className={styles.summaryPrice}>
+        <div className={styles.summaryPriceText}>
+          <>
+            <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+              {priceToShow?.localPrice.pricePerStay}{" "}
+              {priceToShow?.localPrice.currency}
+            </Subtitle>
+            <Body color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}{" "}
+              {priceToShow?.requestedPrice?.pricePerStay}{" "}
+              {priceToShow?.requestedPrice?.currency}
+            </Body>
+          </>
+        </div>
+        <Button type="submit" theme="base">
+          {intl.formatMessage({ id: "Continue" })}
+        </Button>
+      </div>
+    </div>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css

@@ -0,0 +1,17 @@
+.summary {
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summaryPrice {
+  display: flex;
+  gap: var(--Spacing-x4);
+}

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { RateDefinition } from "@/server/routers/hotels/output"
@@ -21,6 +22,7 @@ export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
   roomCategories,
+  handleSelectRate,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -112,6 +114,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(saveRate)}
               priceInformation={getPriceForRate(saveRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free rebooking" })}
@@ -119,6 +123,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(changeRate)}
               priceInformation={getPriceForRate(changeRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free cancellation" })}
@@ -126,6 +132,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay later" })}
               product={findProductForRate(flexRate)}
               priceInformation={getPriceForRate(flexRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
           </div>
         </div>

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,16 +1,22 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
+import { useState } from "react"
 
+import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
 
 import styles from "./roomSelection.module.css"
 
 import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+import { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export default function RoomSelection({
   roomConfigurations,
   roomCategories,
+  user,
 }: RoomSelectionProps) {
+  const [rateSummary, setRateSummary] = useState<Rate | null>(null)
+
   const router = useRouter()
   const searchParams = useSearchParams()
 
@@ -36,16 +42,14 @@ export default function RoomSelection({
                 rateDefinitions={roomConfigurations.rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
+                handleSelectRate={setRateSummary}
               />
             </li>
           ))}
         </ul>
-        {/*         <div className={styles.summary}>
-          This is summary
-          <Button type="submit" size="small" theme="primaryDark">
-            {intl.formatMessage({ id: "Choose room" })}
-          </Button>
-        </div> */}
+        {rateSummary && (
+          <RateSummary rateSummary={rateSummary} isUserLoggedIn={!!user} />
+        )}
       </form>
     </div>
   )

components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css

@@ -20,15 +20,6 @@
   width: 0;
 }
 
-.summary {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
-}
-
 @media (min-width: 767px) {
   .roomList {
     grid-template-columns: repeat(3, minmax(240px, 1fr));

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -6,13 +6,6 @@
   padding: var(--Spacing-x1);
 }
 
-.accordionItem.light {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-.accordionItem.subtle {
-  background-color: var(--Base-Background-Primary-Normal);
-}
-
 .summary {
   position: relative;
   display: flex;
@@ -48,7 +41,7 @@
 }
 
 .content {
-  padding: 0 var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.3s;

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority"
 
 import { accordionItemVariants } from "./variants"
 
-import { IconName } from "@/types/components/icon"
+import type { IconName } from "@/types/components/icon"
 
 export interface AccordionItemProps
   extends React.HtmlHTMLAttributes<HTMLDetailsElement>,

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -5,17 +5,19 @@ import { useRef } from "react"
 import { ChevronDownIcon } from "@/components/Icons"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
-import { AccordionItemProps } from "./accordionItem"
 import { accordionItemVariants } from "./variants"
 
 import styles from "./accordionItem.module.css"
 
+import type { AccordionItemProps } from "./accordionItem"
+
 export default function AccordionItem({
   children,
   icon,
   title,
   theme,
   variant,
+  className,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -43,7 +45,7 @@ export default function AccordionItem({
   }
 
   return (
-    <li className={accordionItemVariants({ variant, theme })}>
+    <li className={accordionItemVariants({ className, variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}

components/TempDesignSystem/Accordion/accordion.module.css

@@ -12,3 +12,7 @@
 .accordion.subtle {
   background-color: var(--Base-Background-Primary-Normal);
 }
+
+.accordion li:last-child {
+  border: none;
+}

components/TempDesignSystem/Accordion/index.tsx

@@ -1,9 +1,10 @@
 import { Children, cloneElement, isValidElement } from "react"
 
 import { AccordionItemProps } from "./AccordionItem/accordionItem"
-import { AccordionProps } from "./accordion"
 import { accordionVariants } from "./variants"
 
+import type { AccordionProps } from "./accordion"
+
 export default function Accordion({
   children,
   className,

components/TempDesignSystem/Card/card.module.css

@@ -60,7 +60,7 @@
 }
 
 .themeThree {
-  --font-color: var(--Tertiary-Light-Surface-Text);
+  --font-color: var(--Tertiary-Light-On-Surface-Text);
   --script-color: var(--Tertiary-Light-On-Surface-Accent);
 
   background: var(--Tertiary-Light-Surface-Normal);
@@ -74,7 +74,7 @@
 }
 
 .themePrimaryDim {
-  --font-color: var(--Primary-Light-On-Surface-Text);
+  --font-color: var(--Primary-Dim-On-Surface-Text);
   --script-color: var(--Primary-Dim-On-Surface-Accent);
 
   background: var(--Primary-Dim-Surface-Normal);

components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -9,6 +9,11 @@
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container[data-disabled] .checkbox {
+  border: 1px solid var(--UI-Input-Controls-Border-Disabled);
+  background: var(--UI-Input-Controls-Surface-Disabled);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: flex-start;
@@ -20,13 +25,12 @@
   width: 24px;
   height: 24px;
   min-width: 24px;
-  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
   border-radius: 4px;
   transition: all 200ms;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 200ms;
   forced-color-adjust: none;
 }
 

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -7,10 +7,10 @@ import { InfoCircleIcon } from "@/components/Icons"
 import CheckIcon from "@/components/Icons/Check"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { CheckboxProps } from "./checkbox"
-
 import styles from "./checkbox.module.css"
 
+import { CheckboxProps } from "@/types/components/checkbox"
+
 export default function Checkbox({
   name,
   children,
@@ -29,6 +29,7 @@ export default function Checkbox({
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
+      isDisabled={registerOptions?.disabled}
     >
       {({ isSelected }) => (
         <>

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -29,14 +29,14 @@ export default function Card({
 
   return (
     <label className={styles.label} data-declined={declined}>
-      <Caption className={styles.title} textTransform="bold" uppercase>
+      <Caption className={styles.title} type="label" uppercase>
         {title}
       </Caption>
       {subtitle ? (
         <Caption
           className={styles.subtitle}
           color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
-          textTransform="bold"
+          type="regular"
         >
           {subtitle}
         </Caption>

components/TempDesignSystem/Form/Date/index.tsx

@@ -20,8 +20,8 @@ import type { DateProps } from "./date"
 
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
-  const d = useWatch({ name })
-  const { control, setValue } = useFormContext()
+  const currentValue = useWatch({ name })
+  const { control, setValue, trigger } = useFormContext()
   const { field } = useController({
     control,
     name,
@@ -47,7 +47,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   }))
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
-    .map((year) => ({ value: year, label: `${year}` }))
+    .map((year) => ({ value: year, label: year.toString() }))
 
   function createOnSelect(selector: DateName) {
     /**
@@ -68,6 +68,8 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         const month = selector === DateName.month ? value : newSegments.month
         if (year !== null && month !== null) {
           newSegments.daysInMonth = dt().year(year).month(month).daysInMonth()
+        } else if (month !== null) {
+          newSegments.daysInMonth = dt().month(month).daysInMonth()
         }
       }
 
@@ -79,6 +81,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
 
         setValue(name, newDate.format("YYYY-MM-DD"))
+        trigger(name)
       }
       setDateSegment(newSegments)
     }
@@ -95,9 +98,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = dt(d).isValid() ? parseDate(d) : null
+    dateValue = dt(currentValue).isValid() ? parseDate(currentValue) : null
   } catch (error) {
-    console.error(error)
+    console.warn("Known error for parse date in DateSelect: ", error)
   }
 
   return (
@@ -130,9 +133,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="DD"
                       required
                       tabIndex={3}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -148,9 +152,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="MM"
                       required
                       tabIndex={2}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -166,9 +171,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="YYYY"
                       required
                       tabIndex={1}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )