Files
web/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
Erik Tiekstra 333636c81a Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)
Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
2025-10-29 09:15:03 +00:00

52 lines
1.7 KiB
TypeScript

"use client"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang"
import styles from "./timeoutSpinner.module.css"
export default function TimeoutSpinner() {
const intl = useIntl()
const lang = useLang()
const { routes } = useBookingFlowConfig()
return (
<div className={styles.container}>
<LoadingSpinner />
<Subtitle className={styles.heading}>
{intl.formatMessage({
id: "enterDetails.payment.loadingTitle",
defaultMessage: "Taking longer than usual",
})}
</Subtitle>
<Body textAlign="center" className={styles.messageContainer}>
{intl.formatMessage(
{
id: "enterDetails.payment.loadingMessage",
defaultMessage:
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
},
{
link: (text) => (
<Link
href={routes.customerService[lang]}
textDecoration="underline"
target="_blank"
>
{text}
</Link>
),
}
)}
</Body>
</div>
)
}