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

Merged in feat/sw-452-select-room-form-submit (pull request #711)

Browse Source 
Feat/sw 452 select room form submit

Approved-by: Simon.Emanuelsson
This commit is contained in:
Pontus Dreij
2024-10-17 11:46:49 +00:00
parent a89560a93d 0238e9e07e
commit be08f0b4d1
9 changed files with 107 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
View File

@@ -18,6 +18,7 @@ export default function FlexibilityOption({
paymentTerm,
priceInformation,
roomType,
roomTypeCode,
handleSelectRate,
}: FlexibilityOptionProps) {
const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
@@ -46,7 +47,8 @@ export default function FlexibilityOption({
function onChange() {
const rate = {
roomType: roomType,
roomTypeCode,
roomType,
priceName: name,
public: publicPrice,
member: memberPrice,

20
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
View File

@@ -24,17 +24,15 @@ export default function RateSummary({
</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>
</>
<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" })}

3
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -116,6 +116,7 @@ export default function RoomCard({
priceInformation={getPriceForRate(saveRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })}
@@ -125,6 +126,7 @@ export default function RoomCard({
priceInformation={getPriceForRate(changeRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })}
@@ -134,6 +136,7 @@ export default function RoomCard({
priceInformation={getPriceForRate(flexRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
/>
</div>
</div>

27
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -4,6 +4,7 @@ import { useState } from "react"
import RateSummary from "./RateSummary"
import RoomCard from "./RoomCard"
import getHotelReservationQueryParams from "./utils"
import styles from "./roomSelection.module.css"
@@ -19,12 +20,29 @@ export default function RoomSelection({
const router = useRouter()
const searchParams = useSearchParams()
const isUserLoggedIn = !!user
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
const searchParamsObject = getHotelReservationQueryParams(searchParams)
const queryParams = new URLSearchParams(searchParams)
queryParams.set("roomClass", e.currentTarget.roomClass?.value)
queryParams.set("flexibility", e.currentTarget.flexibility?.value)
searchParamsObject.room.forEach((item, index) => {
if (rateSummary?.roomTypeCode) {
queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
}
if (rateSummary?.public?.rateCode) {
queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
}
if (rateSummary?.member?.rateCode) {
queryParams.set(
`room[${index}].counterratecode`,
rateSummary.member.rateCode
)
}
})
router.push(`select-bed?${queryParams}`)
}
@@ -48,7 +66,10 @@ export default function RoomSelection({
))}
</ul>
{rateSummary && (
<RateSummary rateSummary={rateSummary} isUserLoggedIn={!!user} />
<RateSummary
rateSummary={rateSummary}
isUserLoggedIn={isUserLoggedIn}
/>
)}
</form>
</div>

28
components/HotelReservation/SelectRate/RoomSelection/utils.ts Normal file
View File

@@ -0,0 +1,28 @@
import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
function getHotelReservationQueryParams(searchParams: URLSearchParams) {
const searchParamsObject: Record<string, unknown> = Array.from(
searchParams.entries()
).reduce<Record<string, unknown>>(
(acc, [key, value]) => {
const keys = key.replace(/\]/g, "").split(/\[|\./) // Split keys by '[' or '.'
keys.reduce((nestedAcc, k, i) => {
if (i === keys.length - 1) {
// Convert value to number if the key is 'adults' or 'age'
;(nestedAcc as Record<string, unknown>)[k] =
k === "adults" || k === "age" ? Number(value) : value
} else {
if (!nestedAcc[k]) {
nestedAcc[k] = isNaN(Number(keys[i + 1])) ? {} : [] // Initialize as object or array
}
}
return nestedAcc[k] as Record<string, unknown>
}, acc)
return acc
},
{} as Record<string, unknown>
)
return searchParamsObject as SelectRateSearchParams
}
export default getHotelReservationQueryParams