Files
Anton Gunnarsson 1bd8fe6821 Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
feat(SW-2879): Move BookingWidget to booking-flow package

* Fix lockfile

* Fix styling

* a tiny little booking widget test

* Tiny fixes

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Remove unused scripts

* lint:fix

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Tiny lint fixes

* update test

* Update Input in booking-flow

* Clean up comments etc

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Setup tracking context for booking-flow

* Add missing use client

* Fix temp tracking function

* Pass booking to booking-widget

* Remove comment

* Add use client to booking widget tracking provider

* Add use client to tracking functions

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Move debug page

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package


Approved-by: Bianca Widstam
2025-08-05 09:20:20 +00:00

104 lines
2.8 KiB
TypeScript

"use client"
import { useIntl } from "react-intl"
import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
import { useRatesStore } from "@/stores/select-rate"
import Alert from "@/components/TempDesignSystem/Alert"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import useLang from "@/hooks/useLang"
import styles from "./alert.module.css"
export default function NoAvailabilityAlert() {
const lang = useLang()
const intl = useIntl()
const [bookingCode, selectedRooms, activeRoom] = useRatesStore((state) => [
state.booking.bookingCode,
state.rooms,
state.activeRoom,
])
const { isFetchingPackages, rooms } = useRoomContext()
const noAvailableRooms = rooms.every(
(roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
)
const alertLink =
activeRoom !== -1 && selectedRooms[activeRoom].selectedPackages.length === 0
? {
title: intl.formatMessage({
defaultMessage: "See alternative hotels",
}),
url: `${alternativeHotels(lang)}`,
keepSearchParams: true,
}
: null
if (isFetchingPackages) {
return null
}
if (noAvailableRooms) {
const text = intl.formatMessage({
defaultMessage: "There are no rooms available that match your request.",
})
return (
<div className={styles.hotelAlert}>
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
defaultMessage: "No availability",
})}
text={text}
link={alertLink}
/>
</div>
)
}
const isPublicPromotionWithCode = rooms.some((room) => {
const filteredCampaigns = room.campaign.filter(Boolean)
return filteredCampaigns.length
? filteredCampaigns.every(
(product) => !!product.rateDefinition?.isCampaignRate
)
: false
})
const noAvailableBookingCodeRooms =
!isPublicPromotionWithCode &&
rooms.every(
(room) =>
room.status === AvailabilityEnum.NotAvailable || !room.code.length
)
if (bookingCode && noAvailableBookingCodeRooms) {
const bookingCodeText = intl.formatMessage(
{
defaultMessage:
"We found no available rooms using this booking code ({bookingCode}). See available rates below.",
},
{ bookingCode }
)
return (
<div className={styles.hotelAlert}>
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
defaultMessage: "No availability",
})}
text={bookingCodeText}
link={alertLink}
/>
</div>
)
}
return null
}