@@ -62,7 +68,14 @@ export default function MobileToggleButton({
{`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
- )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
+ )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${
+ totalChildren > 0
+ ? intl.formatMessage(
+ { id: "booking.children" },
+ { totalChildren }
+ ) + ", "
+ : ""
+ }${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
diff --git a/components/ContentType/ContentPage/HotelListingItem/hotelListingItem.module.css b/components/ContentType/ContentPage/HotelListingItem/hotelListingItem.module.css
new file mode 100644
index 000000000..5a7bf6f7d
--- /dev/null
+++ b/components/ContentType/ContentPage/HotelListingItem/hotelListingItem.module.css
@@ -0,0 +1,49 @@
+.container {
+ background-color: var(--Base-Surface-Primary-light-Normal);
+ border: 1px solid var(--Base-Border-Subtle);
+ border-radius: var(--Corner-radius-Medium);
+ overflow: hidden;
+}
+
+.image {
+ width: 100%;
+ max-height: 200px;
+ object-fit: cover;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x2);
+ padding: var(--Spacing-x2) var(--Spacing-x3);
+}
+
+.intro {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x-half);
+}
+
+.dividerContainer {
+ padding: 0 var(--Spacing-x1);
+}
+
+.captions {
+ display: flex;
+}
+
+@media screen and (min-width: 768px) {
+ .container {
+ display: grid;
+ grid-template-columns: minmax(250px, 350px) auto;
+ }
+
+ .image {
+ max-height: none;
+ height: 100%;
+ }
+
+ .button {
+ width: min(100%, 200px);
+ }
+}
diff --git a/components/ContentType/ContentPage/HotelListingItem/index.tsx b/components/ContentType/ContentPage/HotelListingItem/index.tsx
new file mode 100644
index 000000000..2f2d0dd81
--- /dev/null
+++ b/components/ContentType/ContentPage/HotelListingItem/index.tsx
@@ -0,0 +1,70 @@
+import { ScandicLogoIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+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 Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./hotelListingItem.module.css"
+
+import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
+
+export default async function HotelListingItem({
+ imageUrl,
+ altText,
+ name,
+ address,
+ distanceToCentre,
+ description,
+ link,
+}: HotelListingItemProps) {
+ const intl = await getIntl()
+
+ return (
+
+
+
+
+
+
+ {name}
+
+
+
{address}
+
+
+ {intl.formatMessage(
+ { id: "Distance to city centre" },
+ { number: distanceToCentre }
+ )}
+
+
+
+ {description}
+
+
+ {intl.formatMessage({ id: "See hotel details" })}
+
+
+
+
+ )
+}
diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx
index 99704a61b..2a0074c5c 100644
--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -21,9 +21,9 @@ export default async function PreviewImages({
{images.slice(0, 3).map((image, index) => (
-
+ {hotelImages?.length && (
+
+ )}
@@ -98,7 +100,7 @@ export default async function HotelPage() {
- {faq && (
+ {faq.accordions.length > 0 && (
)}
diff --git a/components/DatePicker/Screen/Desktop.tsx b/components/DatePicker/Screen/Desktop.tsx
index 9056f9183..d3b30dbf8 100644
--- a/components/DatePicker/Screen/Desktop.tsx
+++ b/components/DatePicker/Screen/Desktop.tsx
@@ -69,7 +69,13 @@ export default function DatePickerDesktop({
weekStartsOn={1}
components={{
Chevron(props) {
- return
+ return (
+
+ )
},
Footer(props) {
return (
@@ -82,8 +88,8 @@ export default function DatePickerDesktop({
size="small"
theme="base"
>
-
- {intl.formatMessage({ id: "Select dates" })}
+
+ {intl.formatMessage({ id: "Select dates" })}
diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx
index 0407f9b63..6e68ba1fc 100644
--- a/components/DatePicker/Screen/Mobile.tsx
+++ b/components/DatePicker/Screen/Mobile.tsx
@@ -94,8 +94,8 @@ export default function DatePickerMobile({
size="large"
theme="base"
>
-
- {intl.formatMessage({ id: "Select dates" })}
+
+ {intl.formatMessage({ id: "Select dates" })}
diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index a68f137ea..b18a4d9ca 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -89,8 +89,10 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
return (
-
- {selectedFromDate} - {selectedToDate}
+
+
+ {selectedFromDate} - {selectedToDate}
+
diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
index 3b4391998..ae1f8f4d0 100644
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -33,8 +33,8 @@ export default function ClearSearchButton({
type="button"
>
-
- {intl.formatMessage({ id: "Clear searches" })}
+
+ {intl.formatMessage({ id: "Clear searches" })}
)
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index bd7a65ba6..002edb44a 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -7,6 +7,7 @@ import { dt } from "@/lib/dt"
import DatePicker from "@/components/DatePicker"
import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
+import GuestsRoomsProvider from "@/components/GuestsRoomsPicker/Provider/GuestsRoomsProvider"
import { SearchIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -29,6 +30,8 @@ export default function FormContent({
const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
+ const selectedGuests = useWatch({ name: "rooms" })
+
return (
<>
@@ -51,7 +54,9 @@ export default function FormContent({
{rooms}
-
+
+
+
@@ -65,12 +70,17 @@ export default function FormContent({
theme="base"
type="submit"
>
-
- {intl.formatMessage({ id: "Search" })}
+
+ {intl.formatMessage({ id: "Search" })}
-
+
-
+
diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx
index 270a38b04..8c9ccb48e 100644
--- a/components/Forms/BookingWidget/index.tsx
+++ b/components/Forms/BookingWidget/index.tsx
@@ -42,7 +42,7 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
data.rooms.forEach((room, index) => {
bookingWidgetParams.set(`room[${index}].adults`, room.adults.toString())
- room.children.forEach((child, childIndex) => {
+ room.child.forEach((child, childIndex) => {
bookingWidgetParams.set(
`room[${index}].child[${childIndex}].age`,
child.age.toString()
diff --git a/components/Forms/BookingWidget/schema.ts b/components/Forms/BookingWidget/schema.ts
index aa42b542d..973ab6ad6 100644
--- a/components/Forms/BookingWidget/schema.ts
+++ b/components/Forms/BookingWidget/schema.ts
@@ -4,7 +4,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
export const guestRoomSchema = z.object({
adults: z.number().default(1),
- children: z.array(
+ child: z.array(
z.object({
age: z.number().nonnegative(),
bed: z.number(),
diff --git a/components/GuestsRoomsPicker/AdultSelector/index.tsx b/components/GuestsRoomsPicker/AdultSelector/index.tsx
index 72d60ebaf..06dbd56c3 100644
--- a/components/GuestsRoomsPicker/AdultSelector/index.tsx
+++ b/components/GuestsRoomsPicker/AdultSelector/index.tsx
@@ -21,7 +21,7 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
const intl = useIntl()
const adultsLabel = intl.formatMessage({ id: "Adults" })
const { setValue } = useFormContext()
- const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
+ const { adults, child, childrenInAdultsBed } = useGuestsRoomsStore(
(state) => state.rooms[roomIndex]
)
const increaseAdults = useGuestsRoomsStore((state) => state.increaseAdults)
@@ -39,13 +39,13 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
decreaseAdults(roomIndex)
setValue(`rooms.${roomIndex}.adults`, adults - 1)
if (childrenInAdultsBed > adults) {
- const toUpdateIndex = children.findIndex(
+ const toUpdateIndex = child.findIndex(
(child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED
)
if (toUpdateIndex != -1) {
setValue(
`rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
- children[toUpdateIndex].age < 3
+ child[toUpdateIndex].age < 3
? BedTypeEnum.IN_CRIB
: BedTypeEnum.IN_EXTRA_BED
)
diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index 107bfd8b6..f219293ab 100644
--- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -26,7 +26,7 @@ export default function ChildInfoSelector({
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 { setValue } = useFormContext()
const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
(state) => state.rooms[roomIndex]
)
@@ -51,10 +51,11 @@ export default function ChildInfoSelector({
function updateSelectedAge(age: number) {
updateChildAge(age, roomIndex, index)
- setValue(`rooms.${roomIndex}.children.${index}.age`, age)
+ setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
+ shouldValidate: true,
+ })
const availableBedTypes = getAvailableBeds(age)
updateSelectedBed(availableBedTypes[0].value)
- trigger("rooms")
}
function updateSelectedBed(bed: number) {
@@ -64,7 +65,7 @@ export default function ChildInfoSelector({
decreaseChildInAdultsBed(roomIndex)
}
updateChildBed(bed, roomIndex, index)
- setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
+ setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
}
const allBedTypes: ChildBed[] = [
@@ -109,8 +110,9 @@ export default function ChildInfoSelector({
onSelect={(key) => {
updateSelectedAge(key as number)
}}
- name={`rooms.${roomIndex}.children.${index}.age`}
+ name={`rooms.${roomIndex}.child.${index}.age`}
placeholder={ageLabel}
+ maxHeight={150}
/>