Merged in feat/SW-1078-rate-terms-scenarios (pull request #1500)

feat(SW-1078): mixed rate scenario

* feat(SW-1078): mixed rate scenario

* fix: change from css string modification to array join

* refactor: split out big reduce function into smaller parts

* fix: minor fixes and improvments

* fix: added room index map to localization string


Approved-by: Christian Andolf
This commit is contained in:
Tobias Johansson
2025-03-12 10:34:35 +00:00
parent 01740e3300
commit ad05f792fb
18 changed files with 264 additions and 10 deletions

View File

@@ -38,6 +38,8 @@ import { trackPaymentEvent } from "@/utils/tracking"
import { bedTypeMap } from "../../utils"
import PriceChangeDialog from "../PriceChangeDialog"
import GuaranteeDetails from "./GuaranteeDetails"
import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import PaymentOption from "./PaymentOption"
import { type PaymentFormData, paymentSchema } from "./schema"
@@ -51,14 +53,9 @@ const retryInterval = 2000
export const formId = "submit-booking"
function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
return Object.values(PaymentMethodEnum).includes(value as PaymentMethodEnum)
}
export default function PaymentClient({
otherPaymentOptions,
savedCreditCards,
mustBeGuaranteed,
}: PaymentClientProps) {
const router = useRouter()
const lang = useLang()
@@ -90,6 +87,11 @@ export default function PaymentClient({
const { toDate, fromDate, hotelId } = booking
const mustBeGuaranteed = rooms.every((r) => r.room.mustBeGuaranteed)
const hasPrepaidRates = rooms.some(hasPrepaidRate)
const hasFlexRates = rooms.some(hasFlexibleRate)
const hasMixedRates = hasPrepaidRates && hasFlexRates
usePaymentFailedToast()
const methods = useForm<PaymentFormData>({
@@ -351,6 +353,15 @@ export default function PaymentClient({
<GuaranteeDetails />
</section>
) : null}
{hasMixedRates ? (
<Body>
{intl.formatMessage({
id: "As your booking includes rooms with different terms, we will be charging part of the booking now and the remainder will be collected by the reception at check-in.",
})}
</Body>
) : null}
{savedCreditCards?.length ? (
<section className={styles.section}>
<Body color="uiTextHighContrast" textTransform="bold">
@@ -374,6 +385,7 @@ export default function PaymentClient({
</div>
</section>
) : null}
<section className={styles.section}>
{savedCreditCards?.length ? (
<Body color="uiTextHighContrast" textTransform="bold">
@@ -399,7 +411,14 @@ export default function PaymentClient({
/>
))}
</div>
{hasMixedRates ? (
<MixedRatePaymentBreakdown
rooms={rooms}
currency={totalPrice.local.currency}
/>
) : null}
</section>
<section className={styles.section}>
<Caption>
{intl.formatMessage(