@@ -119,7 +123,7 @@ export default async function SelectHotelPage({
@@ -153,10 +157,10 @@ export default async function SelectHotelPage({
/>
)}
-
- {!hotels.length && (
+ {isAllUnavailable && (
{
@@ -29,24 +36,8 @@ export async function fetchAvailableHotels(
if (!availableHotels) throw new Error()
const language = getLang()
- const hotelMap = new Map()
- availableHotels.availability.forEach((hotel) => {
- const existingHotel = hotelMap.get(hotel.hotelId)
- if (existingHotel) {
- if (hotel.ratePlanSet === HotelListingEnum.RatePlanSet.PUBLIC) {
- existingHotel.bestPricePerNight.regularAmount =
- hotel.bestPricePerNight?.regularAmount
- } else if (hotel.ratePlanSet === HotelListingEnum.RatePlanSet.MEMBER) {
- existingHotel.bestPricePerNight.memberAmount =
- hotel.bestPricePerNight?.memberAmount
- }
- } else {
- hotelMap.set(hotel.hotelId, { ...hotel })
- }
- })
-
- const hotels = Array.from(hotelMap.values()).map(async (hotel) => {
+ const hotels = availableHotels.availability.map(async (hotel) => {
const hotelData = await getHotelData({
hotelId: hotel.hotelId.toString(),
language,
@@ -56,7 +47,7 @@ export async function fetchAvailableHotels(
return {
hotelData: hotelData.data.attributes,
- price: hotel.bestPricePerNight,
+ price: hotel.productType,
}
})
@@ -70,6 +61,7 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
const filterList: Filter[] = uniqueFilterIds
.map((filterId) => filters.find((filter) => filter.id === filterId))
.filter((filter): filter is Filter => filter !== undefined)
+ .sort((a, b) => b.sortOrder - a.sortOrder)
return filterList.reduce(
(acc, filter) => {
@@ -79,10 +71,13 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
surroundingsFilters: [...acc.surroundingsFilters, filter],
}
- return {
- facilityFilters: [...acc.facilityFilters, filter],
- surroundingsFilters: acc.surroundingsFilters,
- }
+ if (filter.filter && hotelFacilitiesFilterNames.includes(filter.filter))
+ return {
+ facilityFilters: [...acc.facilityFilters, filter],
+ surroundingsFilters: acc.surroundingsFilters,
+ }
+
+ return acc
},
{ facilityFilters: [], surroundingsFilters: [] }
)
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index dfd3fba09..0aa44c7ab 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -150,7 +150,7 @@ export default async function SelectRatePage({
roomsAvailability={roomsAvailability}
roomCategories={roomCategories ?? []}
user={user}
- packages={packages ?? []}
+ availablePackages={packages ?? []}
/>
) {
+ const home = `/${params.lang}`
+ if (!searchParams.hotel) {
+ redirect(home)
+ }
+ const hotelData = await getHotelData({
+ hotelId: searchParams.hotel,
+ language: params.lang,
+ })
+ if (!hotelData?.data) {
+ redirect(home)
+ }
+ const intl = await getIntl()
+ const hotel = hotelData.data.attributes
return (
-
-
+
+
{hotel.name}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/loading.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/loading.tsx
new file mode 100644
index 000000000..78b79a040
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+export default function LoadingSummaryHeader() {
+ return <LoadingSpinner />
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.tsx
similarity index 84%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.tsx
index f8c5f20ac..0444913f1 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.tsx
@@ -61,7 +61,7 @@ export default async function SummaryPage({
if (!availability || !availability.selectedRoom) {
console.error("No hotel or availability data", availability)
// TODO: handle this case
- redirect(selectRate[params.lang])
+ redirect(selectRate(params.lang))
}
const prices =
@@ -71,20 +71,24 @@ export default async function SummaryPage({
price: availability.memberRate.localPrice.pricePerStay,
currency: availability.memberRate.localPrice.currency,
},
- euro: {
- price: availability.memberRate.requestedPrice.pricePerStay,
- currency: availability.memberRate.requestedPrice.currency,
- },
+ euro: availability.memberRate.requestedPrice
+ ? {
+ price: availability.memberRate.requestedPrice.pricePerStay,
+ currency: availability.memberRate.requestedPrice.currency,
+ }
+ : undefined,
}
: {
local: {
price: availability.publicRate.localPrice.pricePerStay,
currency: availability.publicRate.localPrice.currency,
},
- euro: {
- price: availability.publicRate.requestedPrice.pricePerStay,
- currency: availability.publicRate.requestedPrice.currency,
- },
+ euro: availability.publicRate?.requestedPrice
+ ? {
+ price: availability.publicRate?.requestedPrice.pricePerStay,
+ currency: availability.publicRate?.requestedPrice.currency,
+ }
+ : undefined,
}
return (
@@ -100,6 +104,7 @@ export default async function SummaryPage({
euroPrice: prices.euro,
adults,
children,
+ rateDetails: availability.rateDetails,
cancellationText: availability.cancellationText,
packages,
}}
@@ -118,6 +123,7 @@ export default async function SummaryPage({
euroPrice: prices.euro,
adults,
children,
+ rateDetails: availability.rateDetails,
cancellationText: availability.cancellationText,
packages,
}}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/_preload.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/_preload.ts
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/_preload.ts
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/step/_preload.ts
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsLayout.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsLayout.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/layout.tsx
similarity index 73%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/step/layout.tsx
index fbd462544..2bd8a5102 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/layout.tsx
@@ -1,20 +1,19 @@
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
import { setLang } from "@/i18n/serverContext"
+import DetailsProvider from "@/providers/DetailsProvider"
import { preload } from "./_preload"
-import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
import type { LangParams, LayoutArgs } from "@/types/params"
export default async function StepLayout({
- summary,
children,
hotelHeader,
params,
+ summary,
}: React.PropsWithChildren<
- LayoutArgs<LangParams & { step: StepEnum }> & {
+ LayoutArgs<LangParams> & {
hotelHeader: React.ReactNode
summary: React.ReactNode
}
@@ -25,7 +24,7 @@ export default async function StepLayout({
const user = await getProfileSafely()
return (
- <EnterDetailsProvider step={params.step} isMember={!!user}>
+ <DetailsProvider isMember={!!user}>
<main className="enter-details-layout__layout">
{hotelHeader}
<div className={"enter-details-layout__container"}>
@@ -35,6 +34,6 @@ export default async function StepLayout({
</aside>
</div>
</main>
- </EnterDetailsProvider>
+ </DetailsProvider>
)
}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
new file mode 100644
index 000000000..d175fc25f
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
@@ -0,0 +1,186 @@
+import "./enterDetailsLayout.css"
+
+import { notFound } from "next/navigation"
+
+import {
+ getBreakfastPackages,
+ getCreditCardsSafely,
+ getHotelData,
+ getProfileSafely,
+ getSelectedRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"
+
+import BedType from "@/components/HotelReservation/EnterDetails/BedType"
+import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
+import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
+import Payment from "@/components/HotelReservation/EnterDetails/Payment"
+import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import {
+ generateChildrenString,
+ getQueryParamsForEnterDetails,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { getIntl } from "@/i18n"
+import StepsProvider from "@/providers/StepsProvider"
+
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { StepEnum } from "@/types/enums/step"
+import type { LangParams, PageArgs } from "@/types/params"
+
+function isValidStep(step: string): step is StepEnum {
+ return Object.values(StepEnum).includes(step as StepEnum)
+}
+
+export default async function StepPage({
+ params: { lang },
+ searchParams,
+}: PageArgs<LangParams, SelectRateSearchParams & { step: StepEnum }>) {
+ const intl = await getIntl()
+ const selectRoomParams = new URLSearchParams(searchParams)
+ selectRoomParams.delete("step")
+ const searchParamsString = selectRoomParams.toString()
+ const {
+ hotel: hotelId,
+ rooms,
+ fromDate,
+ toDate,
+ } = getQueryParamsForEnterDetails(selectRoomParams)
+
+ const {
+ adults,
+ children,
+ roomTypeCode,
+ rateCode,
+ packages: packageCodes,
+ } = rooms[0] // TODO: Handle multiple rooms
+
+ const childrenAsString = children && generateChildrenString(children)
+
+ const breakfastInput = { adults, fromDate, hotelId, toDate }
+ void getBreakfastPackages(breakfastInput)
+ void getSelectedRoomAvailability({
+ hotelId,
+ adults,
+ children: childrenAsString,
+ roomStayStartDate: fromDate,
+ roomStayEndDate: toDate,
+ rateCode,
+ roomTypeCode,
+ packageCodes,
+ })
+
+ const roomAvailability = await getSelectedRoomAvailability({
+ hotelId,
+ adults,
+ children: childrenAsString,
+ roomStayStartDate: fromDate,
+ roomStayEndDate: toDate,
+ rateCode,
+ roomTypeCode,
+ packageCodes,
+ })
+ const hotelData = await getHotelData({
+ hotelId,
+ language: lang,
+ isCardOnlyPayment: roomAvailability?.mustBeGuaranteed,
+ })
+ const breakfastPackages = await getBreakfastPackages(breakfastInput)
+ const user = await getProfileSafely()
+ const savedCreditCards = await getCreditCardsSafely()
+
+ if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
+ return notFound()
+ }
+
+ const mustBeGuaranteed = roomAvailability?.mustBeGuaranteed ?? false
+
+ const paymentGuarantee = intl.formatMessage({
+ id: "Payment Guarantee",
+ })
+ const payment = intl.formatMessage({
+ id: "Payment",
+ })
+ const guaranteeWithCard = intl.formatMessage({
+ id: "Guarantee booking with credit card",
+ })
+ const selectPaymentMethod = intl.formatMessage({
+ id: "Select payment method",
+ })
+
+ const roomPrice = {
+ memberPrice: roomAvailability.memberRate?.localPrice.pricePerStay,
+ publicPrice: roomAvailability.publicRate!.localPrice.pricePerStay,
+ }
+
+ const memberPrice = roomAvailability.memberRate
+ ? {
+ price: roomAvailability.memberRate.localPrice.pricePerStay,
+ currency: roomAvailability.memberRate.localPrice.currency,
+ }
+ : undefined
+
+ return (
+ <StepsProvider
+ bedTypes={roomAvailability.bedTypes}
+ breakfastPackages={breakfastPackages}
+ isMember={!!user}
+ searchParams={searchParamsString}
+ step={searchParams.step}
+ >
+ <section>
+ <HistoryStateManager />
+ <SelectedRoom
+ hotelId={hotelId}
+ room={roomAvailability.selectedRoom}
+ rateDescription={roomAvailability.cancellationText}
+ />
+
+ {/* TODO: How to handle no beds found? */}
+ {roomAvailability.bedTypes ? (
+ <SectionAccordion
+ header={intl.formatMessage({ id: "Select bed" })}
+ step={StepEnum.selectBed}
+ label={intl.formatMessage({ id: "Request bedtype" })}
+ >
+ <BedType bedTypes={roomAvailability.bedTypes} />
+ </SectionAccordion>
+ ) : null}
+
+ {breakfastPackages?.length ? (
+ <SectionAccordion
+ header={intl.formatMessage({ id: "Food options" })}
+ step={StepEnum.breakfast}
+ label={intl.formatMessage({ id: "Select breakfast options" })}
+ >
+ <Breakfast packages={breakfastPackages} />
+ </SectionAccordion>
+ ) : null}
+
+ <SectionAccordion
+ header={intl.formatMessage({ id: "Details" })}
+ step={StepEnum.details}
+ label={intl.formatMessage({ id: "Enter your details" })}
+ >
+ <Details user={user} memberPrice={memberPrice} />
+ </SectionAccordion>
+
+ <SectionAccordion
+ header={mustBeGuaranteed ? paymentGuarantee : payment}
+ step={StepEnum.payment}
+ label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
+ >
+ <Payment
+ roomPrice={roomPrice}
+ otherPaymentOptions={
+ hotelData.data.attributes.merchantInformationData
+ .alternatePaymentOptions
+ }
+ savedCreditCards={savedCreditCards}
+ mustBeGuaranteed={mustBeGuaranteed}
+ />
+ </SectionAccordion>
+ </section>
+ </StepsProvider>
+ )
+}
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/[...paths]/page.tsx b/app/[lang]/(live)/@bookingwidget/[...path]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/[...paths]/page.tsx
rename to app/[lang]/(live)/@bookingwidget/[...path]/page.tsx
diff --git a/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@bookingwidget/default.tsx b/app/[lang]/(live)/@bookingwidget/default.tsx
deleted file mode 100644
index 83ec2818e..000000000
--- a/app/[lang]/(live)/@bookingwidget/default.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./page"
diff --git a/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx b/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@bookingwidget/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@bookingwidget/my-pages/[...path]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@bookingwidget/my-pages/[...path]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@hotelHeader/[...paths]/page.tsx b/app/[lang]/(live)/@footer/[...path]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@hotelHeader/[...paths]/page.tsx
rename to app/[lang]/(live)/@footer/[...path]/page.tsx
diff --git a/app/[lang]/(live)/@footer/[...paths]/page.tsx b/app/[lang]/(live)/@footer/[...paths]/page.tsx
deleted file mode 100644
index 03a82e5f5..000000000
--- a/app/[lang]/(live)/@footer/[...paths]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../page"
diff --git a/app/[lang]/(live)/@footer/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@footer/[contentType]/[uid]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@footer/[contentType]/[uid]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@footer/default.tsx b/app/[lang]/(live)/@footer/default.tsx
deleted file mode 100644
index 83ec2818e..000000000
--- a/app/[lang]/(live)/@footer/default.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./page"
diff --git a/app/[lang]/(live)/@footer/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@footer/my-pages/[...path]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@footer/my-pages/[...path]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@bookingwidget/[...paths]/page.tsx b/app/[lang]/(live)/@header/[...path]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/@bookingwidget/[...paths]/page.tsx
rename to app/[lang]/(live)/@header/[...path]/page.tsx
diff --git a/app/[lang]/(live)/@header/[...paths]/page.tsx b/app/[lang]/(live)/@header/[...paths]/page.tsx
deleted file mode 100644
index 03a82e5f5..000000000
--- a/app/[lang]/(live)/@header/[...paths]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../page"
diff --git a/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@header/default.tsx b/app/[lang]/(live)/@header/default.tsx
deleted file mode 100644
index 83ec2818e..000000000
--- a/app/[lang]/(live)/@header/default.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./page"
diff --git a/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx b/app/[lang]/(live)/@sitewidealert/[...path]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
rename to app/[lang]/(live)/@sitewidealert/[...path]/page.tsx
diff --git a/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx b/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx
deleted file mode 100644
index 03a82e5f5..000000000
--- a/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../page"
diff --git a/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@sitewidealert/default.tsx b/app/[lang]/(live)/@sitewidealert/default.tsx
deleted file mode 100644
index 83ec2818e..000000000
--- a/app/[lang]/(live)/@sitewidealert/default.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./page"
diff --git a/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx
deleted file mode 100644
index 2ebaca014..000000000
--- a/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../page"
diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
index be7ae2256..d53c44531 100644
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -13,7 +13,7 @@ export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
}
setLang(params.lang)
- preload()
+ void preload()
return (
<Suspense>
diff --git a/app/api/web/payment-callback/[lang]/[status]/route.ts b/app/api/web/payment-callback/[lang]/[status]/route.ts
index baa8e4b8a..5884d63f9 100644
--- a/app/api/web/payment-callback/[lang]/[status]/route.ts
+++ b/app/api/web/payment-callback/[lang]/[status]/route.ts
@@ -1,11 +1,15 @@
import { NextRequest, NextResponse } from "next/server"
-import { BOOKING_CONFIRMATION_NUMBER } from "@/constants/booking"
+import {
+ BOOKING_CONFIRMATION_NUMBER,
+ PaymentErrorCodeEnum,
+} from "@/constants/booking"
import { Lang } from "@/constants/languages"
import {
bookingConfirmation,
payment,
} from "@/constants/routes/hotelReservation"
+import { serverClient } from "@/lib/trpc/server"
import { getPublicURL } from "@/server/utils"
export async function GET(
@@ -22,7 +26,7 @@ export async function GET(
const confirmationNumber = queryParams.get(BOOKING_CONFIRMATION_NUMBER)
if (status === "success" && confirmationNumber) {
- const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation[lang]}`)
+ const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation(lang)}`)
confirmationUrl.searchParams.set(
BOOKING_CONFIRMATION_NUMBER,
confirmationNumber
@@ -32,15 +36,38 @@ export async function GET(
return NextResponse.redirect(confirmationUrl)
}
- const returnUrl = new URL(`${publicURL}/${payment[lang]}`)
+ const returnUrl = new URL(`${publicURL}/${payment(lang)}`)
returnUrl.search = queryParams.toString()
- if (status === "cancel") {
- returnUrl.searchParams.set("cancel", "true")
- }
+ if (confirmationNumber) {
+ try {
+ const bookingStatus = await serverClient().booking.status({
+ confirmationNumber,
+ })
+ if (bookingStatus.metadata) {
+ returnUrl.searchParams.set(
+ "errorCode",
+ bookingStatus.metadata.errorCode?.toString() ?? ""
+ )
+ }
+ } catch (error) {
+ console.error(
+ `[payment-callback] failed to get booking status for ${confirmationNumber}, status: ${status}`
+ )
- if (status === "error") {
- returnUrl.searchParams.set("error", "true")
+ if (status === "cancel") {
+ returnUrl.searchParams.set(
+ "errorCode",
+ PaymentErrorCodeEnum.Cancelled.toString()
+ )
+ }
+ if (status === "error") {
+ returnUrl.searchParams.set(
+ "errorCode",
+ PaymentErrorCodeEnum.Failed.toString()
+ )
+ }
+ }
}
console.log(`[payment-callback] redirecting to: ${returnUrl}`)
diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx
index cb5e308b5..922522742 100644
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -177,7 +177,7 @@ export default function BookingWidgetClient({
>
<CloseLargeIcon />
</button>
- <Form locations={locations} type={type} setIsOpen={setIsOpen} />
+ <Form locations={locations} type={type} onClose={closeMobileSearch} />
</div>
</section>
<div className={styles.backdrop} onClick={closeMobileSearch} />
diff --git a/components/BookingWidget/index.tsx b/components/BookingWidget/index.tsx
index c7674b9d7..ecff629c6 100644
--- a/components/BookingWidget/index.tsx
+++ b/components/BookingWidget/index.tsx
@@ -1,4 +1,4 @@
-import { getLocations } from "@/lib/trpc/memoizedRequests"
+import { getLocations, getSiteConfig } from "@/lib/trpc/memoizedRequests"
import BookingWidgetClient from "./Client"
@@ -13,8 +13,9 @@ export default async function BookingWidget({
searchParams,
}: BookingWidgetProps) {
const locations = await getLocations()
+ const siteConfig = await getSiteConfig()
- if (!locations || "error" in locations) {
+ if (!locations || "error" in locations || siteConfig?.bookingWidgetDisabled) {
return null
}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
new file mode 100644
index 000000000..22aea5bce
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
@@ -0,0 +1,22 @@
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x2);
+}
+
+.image {
+ width: 100%;
+ height: 270px;
+ object-fit: cover;
+ border-radius: var(--Corner-radius-Medium);
+}
+
+.information {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x-one-and-half);
+}
+
+.openingHours {
+ margin-top: var(--Spacing-x1);
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
new file mode 100644
index 000000000..e00ed5964
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
@@ -0,0 +1,52 @@
+import Image from "@/components/Image"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./facility.module.css"
+
+import { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
+
+export default async function Facility({ data }: FacilityProps) {
+ const intl = await getIntl()
+ const image = data.content.images[0]
+ const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary
+ const weekendOpeningTimes = data.openingDetails.openingHours.weekends
+
+ return (
+ <div className={styles.content}>
+ {image.imageSizes.medium && (
+ <Image
+ src={image.imageSizes.medium}
+ alt={image.metaData.altText || ""}
+ className={styles.image}
+ height={400}
+ width={200}
+ />
+ )}
+ <div className={styles.information}>
+ <Subtitle color="burgundy" asChild type="one">
+ <Title level="h3">{intl.formatMessage({ id: `${data.type}` })}
+
+
+
+ )
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
new file mode 100644
index 000000000..97ac09a91
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
@@ -0,0 +1,43 @@
+import { wellnessAndExercise } from "@/constants/routes/hotelPageParams"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import Facility from "./Facility"
+
+import styles from "./wellnessAndExercise.module.css"
+
+import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"
+
+export default async function WellnessAndExerciseSidePeek({
+ healthFacilities,
+ buttonUrl,
+}: WellnessAndExerciseSidePeekProps) {
+ const intl = await getIntl()
+ const lang = getLang()
+
+ return (
+
+
+ )
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
new file mode 100644
index 000000000..11a410f13
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x4);
+ margin-bottom: calc(
+ var(--Spacing-x4) * 2 + 80px
+ ); /* Creates space between the wrapper and buttonContainer */
+}
+
+.buttonContainer {
+ background-color: var(--Base-Background-Primary-Normal);
+ border-top: 1px solid var(--Base-Border-Subtle);
+ padding: var(--Spacing-x4) var(--Spacing-x2);
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index 97969867b..a565ea117 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -16,6 +16,7 @@ import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
import MobileMapToggle from "./Map/MobileMapToggle"
import StaticMap from "./Map/StaticMap"
+import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
import AmenitiesList from "./AmenitiesList"
import Facilities from "./Facilities"
import IntroSection from "./IntroSection"
@@ -52,6 +53,7 @@ export default async function HotelPage() {
facilities,
faq,
alerts,
+ healthFacilities,
} = hotelData
const topThreePois = pointsOfInterest.slice(0, 3)
@@ -145,13 +147,10 @@ export default async function HotelPage() {
{/* TODO */}
Restaurant & Bar
-
- {/* TODO */}
- Wellness & Exercise
-
+
- Where to
+ {intl.formatMessage({ id: "Where to" })}
+
+ {intl.formatMessage({ id: " Opening Hours" })}
+
+
+
+
+ {ordinaryOpeningTimes.alwaysOpen
+ ? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
+ : `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
+
+
+ {weekendOpeningTimes.alwaysOpen
+ ? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
+ : `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
+
+
+
+ {healthFacilities.map((facility) => (
+
+ {buttonUrl && (
+
+
+
+ )}
+
diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx
index b9ea569e8..3f7e5aa82 100644
--- a/components/Forms/BookingWidget/index.tsx
+++ b/components/Forms/BookingWidget/index.tsx
@@ -20,7 +20,7 @@ const formId = "booking-widget"
export default function Form({
locations,
type,
- setIsOpen,
+ onClose,
}: BookingWidgetFormProps) {
const router = useRouter()
const lang = useLang()
@@ -35,7 +35,7 @@ export default function Form({
const locationData: Location = JSON.parse(decodeURIComponent(data.location))
const bookingFlowPage =
- locationData.type == "cities" ? selectHotel[lang] : selectRate[lang]
+ locationData.type == "cities" ? selectHotel(lang) : selectRate(lang)
const bookingWidgetParams = new URLSearchParams(data.date)
if (locationData.type == "cities")
@@ -56,7 +56,7 @@ export default function Form({
)
})
})
- setIsOpen(false)
+ onClose()
router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
}
diff --git a/components/Forms/Edit/Profile/FormContent/formContent.module.css b/components/Forms/Edit/Profile/FormContent/formContent.module.css
index 64eb85410..aec012aa6 100644
--- a/components/Forms/Edit/Profile/FormContent/formContent.module.css
+++ b/components/Forms/Edit/Profile/FormContent/formContent.module.css
@@ -3,12 +3,14 @@
align-self: flex-start;
display: grid;
gap: var(--Spacing-x2);
+ container-name: addressContainer;
+ container-type: inline-size;
}
.container {
display: grid;
gap: var(--Spacing-x2);
- grid-template-columns: max(164px) 1fr;
+ grid-template-columns: minmax(100px, 164px) 1fr;
}
@media (min-width: 768px) {
@@ -16,3 +18,9 @@
display: none;
}
}
+
+@container addressContainer (max-width: 350px) {
+ .container {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index ad66f6282..24fe2bd95 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,12 +1,13 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { privacyPolicy } from "@/constants/currentWebHrefs"
+import { trpc } from "@/lib/trpc/client"
-import { registerUser } from "@/actions/registerUser"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -30,11 +31,28 @@ import type { SignUpFormProps } from "@/types/components/form/signupForm"
export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
const intl = useIntl()
+ const router = useRouter()
const lang = useLang()
const country = intl.formatMessage({ id: "Country" })
const email = intl.formatMessage({ id: "Email address" })
const phoneNumber = intl.formatMessage({ id: "Phone number" })
const zipCode = intl.formatMessage({ id: "Zip code" })
+ const signupButtonText = intl.formatMessage({
+ id: "Sign up to Scandic Friends",
+ })
+ const signingUpPendingText = intl.formatMessage({ id: "Signing up..." })
+
+ const signup = trpc.user.signup.useMutation({
+ onSuccess: (data) => {
+ if (data.success && data.redirectUrl) {
+ router.push(data.redirectUrl)
+ }
+ },
+ onError: (error) => {
+ toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+ console.error("Component Signup error:", error)
+ },
+ })
const methods = useForm({
defaultValues: {
@@ -48,7 +66,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
zipCode: "",
},
password: "",
- termsAccepted: false,
},
mode: "all",
criteriaMode: "all",
@@ -57,19 +74,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
})
async function onSubmit(data: SignUpSchema) {
- try {
- const result = await registerUser(data)
- if (result && !result.success) {
- toast.error(intl.formatMessage({ id: "Something went wrong!" }))
- }
- } catch (error) {
- // The server-side redirect will throw an error, which we can ignore
- // as it's handled by Next.js.
- if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
- return
- }
- toast.error(intl.formatMessage({ id: "Something went wrong!" }))
- }
+ signup.mutate({ ...data, language: lang })
}
return (
@@ -80,11 +85,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
className={styles.form}
id="register"
onSubmit={methods.handleSubmit(onSubmit)}
- /**
- * Ignoring since ts doesn't recognize that tRPC
- * parses FormData before reaching the route
- * @ts-ignore */
- action={registerUser}
>
@@ -187,7 +187,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
onClick={() => methods.trigger()}
data-testid="trigger-validation"
>
- {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+ {signupButtonText}
) : (
)}
diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index b5a34c168..b39821483 100644
--- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -33,11 +33,10 @@ export default function ChildInfoSelector({
const ageLabel = intl.formatMessage({ id: "Age" })
const bedLabel = intl.formatMessage({ id: "Bed" })
const errorMessage = intl.formatMessage({ id: "Child age is required" })
- const { setValue, formState, register, trigger } = useFormContext()
+ const { setValue, formState, register } = useFormContext()
function updateSelectedBed(bed: number) {
setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
- trigger()
}
function updateSelectedAge(age: number) {
@@ -95,7 +94,7 @@ export default function ChildInfoSelector({
updateSelectedAge(key as number)
}}
placeholder={ageLabel}
- maxHeight={150}
+ maxHeight={180}
{...register(ageFieldName, {
required: true,
})}
diff --git a/components/GuestsRoomsPicker/Form.tsx b/components/GuestsRoomsPicker/Form.tsx
index 01ded876a..062347761 100644
--- a/components/GuestsRoomsPicker/Form.tsx
+++ b/components/GuestsRoomsPicker/Form.tsx
@@ -99,7 +99,7 @@ export default function GuestsRoomsPickerDialog({
{rooms.length < 4 ? (
@@ -124,7 +124,7 @@ export default function GuestsRoomsPickerDialog({
{rooms.length < 4 ? (
diff --git a/components/HotelReservation/BookingConfirmation/Details/index.tsx b/components/HotelReservation/BookingConfirmation/Details/index.tsx
index 956ad8e45..5d23e55a8 100644
--- a/components/HotelReservation/BookingConfirmation/Details/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Details/index.tsx
@@ -49,7 +49,7 @@ export default async function Details({
{intl.formatMessage({ id: "Cancellation policy" })}
- N/A
+ {booking.rateDefinition.cancellationText}
{intl.formatMessage({ id: "Rebooking" })}
diff --git a/components/HotelReservation/EnterDetails/BedType/bedOptions.module.css b/components/HotelReservation/EnterDetails/BedType/bedOptions.module.css
index 81fd223b9..844ed4a6b 100644
--- a/components/HotelReservation/EnterDetails/BedType/bedOptions.module.css
+++ b/components/HotelReservation/EnterDetails/BedType/bedOptions.module.css
@@ -1,7 +1,6 @@
.form {
display: grid;
gap: var(--Spacing-x2);
- grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
- padding-bottom: var(--Spacing-x3);
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
width: min(600px, 100%);
}
diff --git a/components/HotelReservation/EnterDetails/BedType/index.tsx b/components/HotelReservation/EnterDetails/BedType/index.tsx
index 1bf78fee5..eeb8237a0 100644
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -4,7 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { useCallback, useEffect } from "react"
import { FormProvider, useForm } from "react-hook-form"
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
import { KingBedIcon } from "@/components/Icons"
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -19,22 +20,18 @@ import type {
} from "@/types/components/hotelReservation/enterDetails/bedType"
export default function BedType({ bedTypes }: BedTypeProps) {
- const bedType = useEnterDetailsStore((state) => state.userData.bedType)
+ const bedType = useDetailsStore((state) => state.data.bedType?.roomTypeCode)
+ const completeStep = useStepsStore((state) => state.completeStep)
+ const updateBedType = useDetailsStore((state) => state.actions.updateBedType)
const methods = useForm({
- defaultValues: bedType?.roomTypeCode
- ? {
- bedType: bedType.roomTypeCode,
- }
- : undefined,
+ defaultValues: bedType ? { bedType } : undefined,
criteriaMode: "all",
mode: "all",
resolver: zodResolver(bedTypeFormSchema),
reValidateMode: "onChange",
})
- const completeStep = useEnterDetailsStore((state) => state.completeStep)
-
const onSubmit = useCallback(
(bedTypeRoomCode: BedTypeFormSchema) => {
const matchingRoom = bedTypes.find(
@@ -45,10 +42,11 @@ export default function BedType({ bedTypes }: BedTypeProps) {
description: matchingRoom.description,
roomTypeCode: matchingRoom.value,
}
- completeStep({ bedType })
+ updateBedType(bedType)
+ completeStep()
}
},
- [completeStep, bedTypes]
+ [bedTypes, completeStep, updateBedType]
)
useEffect(() => {
diff --git a/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css b/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css
index 81fd223b9..f24c6ba64 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css
+++ b/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css
@@ -2,6 +2,5 @@
display: grid;
gap: var(--Spacing-x2);
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
- padding-bottom: var(--Spacing-x3);
width: min(600px, 100%);
}
diff --git a/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index 00d5ab4cc..fdaec3a84 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -5,7 +5,8 @@ import { useCallback, useEffect } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -23,34 +24,37 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default function Breakfast({ packages }: BreakfastProps) {
const intl = useIntl()
- const breakfast = useEnterDetailsStore((state) => state.userData.breakfast)
+ const breakfast = useDetailsStore(({ data }) =>
+ data.breakfast
+ ? data.breakfast.code
+ : data.breakfast === false
+ ? "false"
+ : data.breakfast
+ )
+ const updateBreakfast = useDetailsStore(
+ (state) => state.actions.updateBreakfast
+ )
+ const completeStep = useStepsStore((state) => state.completeStep)
- let defaultValues = undefined
- if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
- defaultValues = { breakfast: BreakfastPackageEnum.NO_BREAKFAST }
- } else if (breakfast?.code) {
- defaultValues = { breakfast: breakfast.code }
- }
const methods = useForm({
- defaultValues,
+ defaultValues: breakfast ? { breakfast } : undefined,
criteriaMode: "all",
mode: "all",
resolver: zodResolver(breakfastFormSchema),
reValidateMode: "onChange",
})
- const completeStep = useEnterDetailsStore((state) => state.completeStep)
-
const onSubmit = useCallback(
(values: BreakfastFormSchema) => {
const pkg = packages?.find((p) => p.code === values.breakfast)
if (pkg) {
- completeStep({ breakfast: pkg })
+ updateBreakfast(pkg)
} else {
- completeStep({ breakfast: BreakfastPackageEnum.NO_BREAKFAST })
+ updateBreakfast(false)
}
+ completeStep()
},
- [completeStep, packages]
+ [completeStep, packages, updateBreakfast]
)
useEffect(() => {
@@ -61,10 +65,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
return () => subscription.unsubscribe()
}, [methods, onSubmit])
- if (!packages) {
- return null
- }
-
return (
diff --git a/components/HotelReservation/EnterDetails/Breakfast/schema.ts b/components/HotelReservation/EnterDetails/Breakfast/schema.ts
index 5f8c1f354..4766980cb 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/schema.ts
+++ b/components/HotelReservation/EnterDetails/Breakfast/schema.ts
@@ -2,14 +2,10 @@ import { z } from "zod"
import { breakfastPackageSchema } from "@/server/routers/hotels/output"
-import { BreakfastPackageEnum } from "@/types/enums/breakfast"
-
export const breakfastStoreSchema = z.object({
- breakfast: breakfastPackageSchema.or(
- z.literal(BreakfastPackageEnum.NO_BREAKFAST)
- ),
+ breakfast: breakfastPackageSchema.or(z.literal(false)),
})
export const breakfastFormSchema = z.object({
- breakfast: z.string().or(z.literal(BreakfastPackageEnum.NO_BREAKFAST)),
+ breakfast: z.string().or(z.literal("false")),
})
diff --git a/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
new file mode 100644
index 000000000..e6d0e500b
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { privacyPolicy } from "@/constants/currentWebHrefs"
+
+import { CheckIcon } from "@/components/Icons"
+import LoginButton from "@/components/LoginButton"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import useLang from "@/hooks/useLang"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+
+export default function JoinScandicFriendsCard({
+ name,
+ memberPrice,
+}: JoinScandicFriendsCardProps) {
+ const lang = useLang()
+ const intl = useIntl()
+
+ const list = [
+ { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+ { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+ { title: intl.formatMessage({ id: "Join at no cost" }) },
+ ]
+
+ const saveOnJoiningLabel = intl.formatMessage(
+ {
+ id: "Only pay {amount} {currency}",
+ },
+ {
+ amount: intl.formatNumber(memberPrice?.price ?? 0),
+ currency: memberPrice?.currency ?? "SEK",
+ }
+ )
+
+ return (
+ ({
defaultValues: {
countryCode: user?.address?.countryCode ?? initialData.countryCode,
@@ -47,7 +52,6 @@ export default function Details({ user }: DetailsProps) {
join: initialData.join,
dateOfBirth: initialData.dateOfBirth,
zipCode: initialData.zipCode,
- termsAccepted: initialData.termsAccepted,
membershipNo: initialData.membershipNo,
},
criteriaMode: "all",
@@ -56,24 +60,33 @@ export default function Details({ user }: DetailsProps) {
reValidateMode: "onChange",
})
- const completeStep = useEnterDetailsStore((state) => state.completeStep)
+ const onSubmit = useCallback(
+ (values: DetailsSchema) => {
+ updateDetails(values)
+ completeStep()
+ },
+ [completeStep, updateDetails]
+ )
return (
+
+
+
+
+ {intl.formatMessage({ id: "Already a friend?" })}{" "}
+
+ {intl.formatMessage({ id: "Log in" })}
+
+
+
+
+ {intl.formatMessage(
+ {
+ id: "signup.terms",
+ },
+ {
+ termsLink: (str) => (
+
+ {str}
+
+ ),
+ }
+ )}
+
+
+ )
+}
diff --git a/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
new file mode 100644
index 000000000..507633fe4
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -0,0 +1,55 @@
+.cardContainer {
+ align-self: flex-start;
+ background-color: var(--Base-Surface-Primary-light-Normal);
+ border: 1px solid var(--Base-Border-Subtle);
+ border-radius: var(--Corner-radius-Large);
+ display: grid;
+ gap: var(--Spacing-x-one-and-half);
+ padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+ grid-template-areas:
+ "checkbox"
+ "list"
+ "login"
+ "terms";
+ width: min(100%, 600px);
+}
+
+.login {
+ grid-area: login;
+}
+
+.checkBox {
+ align-self: center;
+ grid-area: checkbox;
+}
+
+.list {
+ display: grid;
+ grid-area: list;
+ gap: var(--Spacing-x1);
+}
+
+.listItem {
+ display: flex;
+}
+
+.terms {
+ border-top: 1px solid var(--Base-Border-Normal);
+ grid-area: terms;
+ padding-top: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+ .cardContainer {
+ grid-template-columns: 1fr auto;
+ gap: var(--Spacing-x2);
+ grid-template-areas:
+ "checkbox login"
+ "list list"
+ "terms terms";
+ }
+ .list {
+ display: flex;
+ gap: var(--Spacing-x1);
+ }
+}
diff --git a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
index 74a17e911..85559aa4c 100644
--- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
@@ -4,14 +4,8 @@ import { useEffect, useState } from "react"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
-import { privacyPolicy } from "@/constants/currentWebHrefs"
-
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
@@ -31,67 +25,27 @@ export default function Signup({ name }: { name: string }) {
setIsJoinChecked(joinValue)
}, [joinValue])
- const list = [
- { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
- { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
- { title: intl.formatMessage({ id: "Join at no cost" }) },
- ]
-
- return (
-
+ {memberPrice ? (
+
+ {saveOnJoiningLabel}
+
+ ) : null}
+
+ {intl.formatMessage({ id: "Join Scandic Friends" })}
+
+
+
+ {list.map((item) => (
+
+
+ ))}
+
+
-
+
- {isJoinChecked ? (
-
+ ) : (
+
)
}
diff --git a/components/HotelReservation/EnterDetails/Details/details.module.css b/components/HotelReservation/EnterDetails/Details/details.module.css
index 62a947e3e..8781a9be2 100644
--- a/components/HotelReservation/EnterDetails/Details/details.module.css
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -1,26 +1,34 @@
.form {
display: grid;
- gap: var(--Spacing-x2);
- padding: var(--Spacing-x3) 0px;
+ gap: var(--Spacing-x3);
}
.container {
display: grid;
gap: var(--Spacing-x2);
- grid-template-columns: 1fr 1fr;
width: min(100%, 600px);
}
+.header,
.country,
.email,
-.membershipNo,
+.signup,
.phone {
grid-column: 1/-1;
}
.footer {
- display: grid;
- gap: var(--Spacing-x3);
- justify-items: flex-start;
margin-top: var(--Spacing-x1);
}
+
+@media screen and (min-width: 768px) {
+ .form {
+ gap: var(--Spacing-x3);
+ }
+
+ .container {
+ gap: var(--Spacing-x2);
+ grid-template-columns: 1fr 1fr;
+ width: min(100%, 600px);
+ }
+}
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
index 806776ce8..819ad5243 100644
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -1,9 +1,11 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
import Button from "@/components/TempDesignSystem/Button"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -11,6 +13,7 @@ import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import Signup from "./Signup"
@@ -22,21 +25,23 @@ import type {
} from "@/types/components/hotelReservation/enterDetails/details"
const formID = "enter-details"
-export default function Details({ user }: DetailsProps) {
+export default function Details({ user, memberPrice }: DetailsProps) {
const intl = useIntl()
- const initialData = useEnterDetailsStore((state) => ({
- countryCode: state.userData.countryCode,
- email: state.userData.email,
- firstName: state.userData.firstName,
- lastName: state.userData.lastName,
- phoneNumber: state.userData.phoneNumber,
- join: state.userData.join,
- dateOfBirth: state.userData.dateOfBirth,
- zipCode: state.userData.zipCode,
- termsAccepted: state.userData.termsAccepted,
- membershipNo: state.userData.membershipNo,
+ const initialData = useDetailsStore((state) => ({
+ countryCode: state.data.countryCode,
+ email: state.data.email,
+ firstName: state.data.firstName,
+ lastName: state.data.lastName,
+ phoneNumber: state.data.phoneNumber,
+ join: state.data.join,
+ dateOfBirth: state.data.dateOfBirth,
+ zipCode: state.data.zipCode,
+ membershipNo: state.data.membershipNo,
}))
+ const updateDetails = useDetailsStore((state) => state.actions.updateDetails)
+ const completeStep = useStepsStore((state) => state.completeStep)
+
const methods = useForm
-
- ) : null}
+
-
-
- {intl.formatMessage({ id: "Birth date" })} *
-
-
-
-
-
-
- {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",
- })}{" "}
-
- {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
-
-
-
-
-
+
+
+ {intl.formatMessage({ id: "Birth date" })} *
+
+
+