scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin' into feat/tracking-payment

Browse Source
This commit is contained in:
Linus Flood
2025-01-10 09:13:04 +01:00
parent 919fc62069 bf3328396f
commit d57e3db34b
111 changed files with 2371 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
+9 -18
View File
@@ -77,24 +77,15 @@ input[type="radio"]:checked + .card .checkIcon {
margin: 0 auto var(--Spacing-x2);
}
.popover {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
left: 0px;
max-height: 400px;
padding: var(--Spacing-x2);
top: calc(55px + var(--Spacing-x1));
width: 100%;
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
.terms {
margin-top: var(--Spacing-x3);
margin-bottom: var(--Spacing-x3);
}
.popover section:focus-visible {
outline: none;
}
.popover .popoverText {
margin-bottom: var(--Spacing-x-half);
}
.popover .popoverHeading {
.termsText:nth-child(n) {
display: flex;
align-items: center;
margin-bottom: var(--Spacing-x1);
font-weight: 600; /* TODO: Remove when this is updated in Design system */
}
.termsIcon {
margin-right: var(--Spacing-x1);
}
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+33 -27
View File
@@ -4,9 +4,11 @@ import { useSearchParams } from "next/navigation"
import { useEffect, useRef } from "react"
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { CheckCircleIcon, CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Label from "@/components/TempDesignSystem/Form/Label"
import Popover from "@/components/TempDesignSystem/Popover"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { RATE_CARD_EQUAL_HEIGHT_CLASS } from "../utils"
@@ -116,33 +118,37 @@ export default function FlexibilityOption({
/>
<div className={`${styles.card} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
<div className={styles.header}>
<Popover
placement="bottom left"
triggerContent={
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
</Button>
}
title={name}
subtitle={paymentTerm}
>
<Caption
color="uiTextHighContrast"
type="bold"
className={styles.popoverHeading}
>
{name}
</Caption>
{priceInformation?.map((info) => (
<Caption
key={info}
color="uiTextHighContrast"
className={styles.popoverText}
>
{info}
</Caption>
))}
</Popover>
<div className={styles.terms}>
{priceInformation?.map((info) => (
<Body
key={info}
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
className={styles.termsIcon}
></CheckIcon>
{info}
</Body>
))}
</div>
</Modal>
<div className={styles.priceType}>
<Caption color="uiTextHighContrast">{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+3 -3
View File
@@ -85,7 +85,7 @@ export default function RoomCard({
)
)
const { name, roomSize, occupancy, images } = selectedRoom || {}
const { name, roomSize, totalOccupancy, images } = selectedRoom || {}
const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -150,13 +150,13 @@ export default function RoomCard({
</div>
<div className={styles.specification}>
{occupancy?.total && (
{totalOccupancy && (
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "booking.guests",
},
{ nrOfGuests: occupancy.total }
{ max: totalOccupancy.max, range: totalOccupancy.range }
)}
</Caption>
)}
components/HotelReservation/SelectRate/RoomSelection/index.tsx
+14 -6
View File
@@ -1,8 +1,10 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useSession } from "next-auth/react"
import { useCallback, useEffect, useMemo, useRef } from "react"
import { debounce } from "@/utils/debounce"
import { isValidSession } from "@/utils/session"
import RateSummary from "./RateSummary"
import RoomCard from "./RoomCard"
@@ -20,16 +22,16 @@ import type { RoomSelectionProps } from "@/types/components/hotelReservation/sel
export default function RoomSelection({
roomsAvailability,
roomCategories,
user,
availablePackages,
selectedPackages,
isUserLoggedIn,
setRateCode,
rateSummary,
hotelType,
}: RoomSelectionProps) {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const isUserLoggedIn = !!user
const roomRefs = useRef<HTMLLIElement[]>([])
const { roomConfigurations, rateDefinitions } = roomsAvailability
@@ -109,9 +111,9 @@ export default function RoomSelection({
rateSummary.member.rateCode
)
}
if (selectedPackages.length > 0) {
params.set(`room[${index}].packages`, selectedPackages.join(","))
}
selectedPackages.length > 0
? params.set(`room[${index}].packages`, selectedPackages.join(","))
: params.delete(`room[${index}].packages`)
})
return params
@@ -119,6 +121,12 @@ export default function RoomSelection({
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
window.history.replaceState(
null,
"",
`${pathname}?${queryParams.toString()}`
)
router.push(`select-bed?${queryParams}`)
}