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

fix(SW-1042)(SW-1114)(SW-1123): fix select room bugs

Browse Source
This commit is contained in:
Bianca Widstam
2024-12-03 11:16:28 +01:00
parent 3c8a83ac59
commit 61f9290487
8 changed files with 173 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,9 +18,7 @@ export default function FlexibilityOption({
name, name,
paymentTerm, paymentTerm,
priceInformation, priceInformation,
roomType,
roomTypeCode, roomTypeCode,
features,
petRoomPackage, petRoomPackage,
handleSelectRate, handleSelectRate,
}: FlexibilityOptionProps) { }: FlexibilityOptionProps) {
@@ -45,10 +43,22 @@ export default function FlexibilityOption({
const { public: publicPrice, member: memberPrice } = product.productType const { public: publicPrice, member: memberPrice } = product.productType
function onChange() { const onClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
handleSelectRate({ handleSelectRate((prev) => {
if (
prev &&
prev.publicRateCode === publicPrice.rateCode &&
prev.roomTypeCode === roomTypeCode
) {
if (e.currentTarget?.checked) e.currentTarget.checked = false
return undefined
} else
return {
publicRateCode: publicPrice.rateCode, publicRateCode: publicPrice.rateCode,
roomTypeCode: roomTypeCode, roomTypeCode: roomTypeCode,
name: name,
paymentTerm: paymentTerm,
}
}) })
} }
@@ -58,7 +68,7 @@ export default function FlexibilityOption({
type="radio" type="radio"
name="rateCode" name="rateCode"
value={publicPrice?.rateCode} value={publicPrice?.rateCode}
onChange={onChange} onClick={onClick}
/> />
<div className={styles.card}> <div className={styles.card}>
<div className={styles.header}> <div className={styles.header}>

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

@@ -34,6 +34,7 @@ export default function RateSummary({
features, features,
roomType, roomType,
priceName, priceName,
priceTerm,
} = rateSummary } = rateSummary
const priceToShow = isUserLoggedIn && member ? member : publicRate const priceToShow = isUserLoggedIn && member ? member : publicRate
@@ -80,9 +81,10 @@ export default function RateSummary({
</Footnote> </Footnote>
</div> </div>
)} )}
<div className={styles.content}>
<div className={styles.summaryText}> <div className={styles.summaryText}>
<Subtitle color="uiTextHighContrast">{roomType}</Subtitle> <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
<Body color="uiTextMediumContrast">{priceName}</Body> <Body color="uiTextMediumContrast">{`${priceName}, ${priceTerm}`}</Body>
</div> </div>
<div className={styles.summaryPriceContainer}> <div className={styles.summaryPriceContainer}>
{showMemberDiscountBanner && ( {showMemberDiscountBanner && (
@@ -158,11 +160,16 @@ export default function RateSummary({
</Body> </Body>
</div> </div>
)} )}
<Button type="submit" theme="base" className={styles.continueButton}> <Button
type="submit"
theme="base"
className={styles.continueButton}
>
{intl.formatMessage({ id: "Continue" })} {intl.formatMessage({ id: "Continue" })}
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }

16
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
View File

@@ -6,12 +6,19 @@
right: 0; right: 0;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
padding: 0 0 var(--Spacing-x5); padding: 0 0 var(--Spacing-x5);
align-items: center;
border-top: 1px solid var(--Base-Border-Subtle);
transition: bottom 300ms ease-in-out;
}
.content {
width: 100%;
max-width: var(--max-width-navigation);
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-top: 1px solid var(--Base-Border-Subtle);
transition: bottom 300ms ease-in-out;
} }
.summary[data-visible="true"] { .summary[data-visible="true"] {
@@ -80,7 +87,9 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.summary { .summary {
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x5); padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
}
.content {
flex-direction: row; flex-direction: row;
} }
.petInfo, .petInfo,
@@ -102,5 +111,6 @@
.summaryPriceContainer { .summaryPriceContainer {
width: auto; width: auto;
padding: 0; padding: 0;
align-items: center;
} }
} }

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

@@ -26,7 +26,13 @@ export default function Rooms({
const visibleRooms: RoomConfiguration[] = const visibleRooms: RoomConfiguration[] =
filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations) filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
const [selectedRate, setSelectedRate] = useState< const [selectedRate, setSelectedRate] = useState<
{ publicRateCode: string; roomTypeCode: string } | undefined | {
publicRateCode: string
roomTypeCode: string
name: string
paymentTerm: string
}
| undefined
>(undefined) >(undefined)
const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>( const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
[] []
@@ -115,17 +121,30 @@ export default function Rooms({
) )
)?.features )?.features
const roomType = roomCategories.find((roomCategory) =>
roomCategory.roomTypes.some(
(roomType) => roomType.code === room.roomTypeCode
)
)
const rateSummary: Rate = { const rateSummary: Rate = {
features: petRoomPackage && features ? features : [], features: petRoomPackage && features ? features : [],
priceName: room.roomType, priceName: selectedRate?.name,
priceTerm: selectedRate?.paymentTerm,
public: product.productType.public, public: product.productType.public,
member: product.productType.member, member: product.productType.member,
roomType: room.roomType, roomType: roomType?.name || room.roomType,
roomTypeCode: room.roomTypeCode, roomTypeCode: room.roomTypeCode,
} }
return rateSummary return rateSummary
}, [filteredRooms, availablePackages, selectedPackages, selectedRate]) }, [
filteredRooms,
availablePackages,
selectedPackages,
selectedRate,
roomCategories,
])
useEffect(() => { useEffect(() => {
if (rateSummary) return if (rateSummary) return

12
types/components/hotelReservation/selectRate/flexibilityOption.ts
View File

@@ -8,7 +8,6 @@ import {
} from "@/server/routers/hotels/output" } from "@/server/routers/hotels/output"
import { RoomPackage } from "./roomFilter" import { RoomPackage } from "./roomFilter"
import { Rate } from "./selectRate"
type ProductPrice = z.output<typeof productTypePriceSchema> type ProductPrice = z.output<typeof productTypePriceSchema>
export type RoomPriceSchema = z.output<typeof priceSchema> export type RoomPriceSchema = z.output<typeof priceSchema>
@@ -23,10 +22,17 @@ export type FlexibilityOptionProps = {
roomTypeCode: RoomConfiguration["roomTypeCode"] roomTypeCode: RoomConfiguration["roomTypeCode"]
features: RoomConfiguration["features"] features: RoomConfiguration["features"]
petRoomPackage: RoomPackage | undefined petRoomPackage: RoomPackage | undefined
handleSelectRate: (rateCode: { handleSelectRate: React.Dispatch<
React.SetStateAction<
| {
publicRateCode: string publicRateCode: string
roomTypeCode: string roomTypeCode: string
}) => void name: string
paymentTerm: string
}
| undefined
>
>
} }
export interface PriceListProps { export interface PriceListProps {

11
types/components/hotelReservation/selectRate/roomCard.ts
View File

@@ -19,10 +19,17 @@ export type RoomCardProps = {
roomCategories: RoomData[] roomCategories: RoomData[]
selectedPackages: RoomPackageCodes[] selectedPackages: RoomPackageCodes[]
packages: RoomPackageData | undefined packages: RoomPackageData | undefined
handleSelectRate: (rateCode: { handleSelectRate: React.Dispatch<
React.SetStateAction<
| {
publicRateCode: string publicRateCode: string
roomTypeCode: string roomTypeCode: string
}) => void name: string
paymentTerm: string
}
| undefined
>
>
} }
type RoomPackagePriceSchema = z.output<typeof packagePriceSchema> type RoomPackagePriceSchema = z.output<typeof packagePriceSchema>

11
types/components/hotelReservation/selectRate/roomSelection.ts
View File

@@ -10,10 +10,17 @@ export interface RoomSelectionProps {
user: SafeUser user: SafeUser
availablePackages: RoomPackageData | undefined availablePackages: RoomPackageData | undefined
selectedPackages: RoomPackageCodes[] selectedPackages: RoomPackageCodes[]
setRateCode: (rateCode: { setRateCode: React.Dispatch<
React.SetStateAction<
| {
publicRateCode: string publicRateCode: string
roomTypeCode: string roomTypeCode: string
}) => void name: string
paymentTerm: string
}
| undefined
>
>
rateSummary: Rate | null rateSummary: Rate | null
} }

3
types/components/hotelReservation/selectRate/selectRate.ts
View File

@@ -27,7 +27,8 @@ export interface SelectRateSearchParams {
export interface Rate { export interface Rate {
roomType: RoomConfiguration["roomType"] roomType: RoomConfiguration["roomType"]
roomTypeCode: RoomConfiguration["roomTypeCode"] roomTypeCode: RoomConfiguration["roomTypeCode"]
priceName: string priceName?: string
priceTerm?: string
public: Product["productType"]["public"] public: Product["productType"]["public"]
member?: Product["productType"]["member"] member?: Product["productType"]["member"]
features: RoomConfiguration["features"] features: RoomConfiguration["features"]