web/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx

"use client"

import { useIntl } from "react-intl"

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 { Typography } from "@scandic-hotels/design-system/Typography"

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>
      <Typography
        variant="Body/Paragraph/mdRegular"
        className={styles.messageContainer}
      >
        <p>
          {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>
              ),
            }
          )}
        </p>
      </Typography>
    </div>
  )
}