ac493fe325
Feat/SW-1149 handle status polling * feat(SW-1149): move terms and conditions sections to separate component and added copy * feat(SW-1149): Added client component to handle success callback for payment flow * fix: check for bookingCompleted status as well * feat(SW-1587): use alert instead of toast for showing payment errors * fix: added enum for payment callback status * fix: proper way of checking for multiple statuses * fix: update schema type * fix: use localised link to customer service * fix: update to use enum for status strings Approved-by: Arvid Norlin
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
|
|
import { CloseLargeIcon } from "@/components/Icons"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import Link from "../Link"
|
|
import AlertSidepeek from "./Sidepeek"
|
|
import { getIconByAlertType } from "./utils"
|
|
import { alertVariants } from "./variants"
|
|
|
|
import styles from "./alert.module.css"
|
|
|
|
import type { AlertProps } from "./alert"
|
|
|
|
export default function Alert({
|
|
className,
|
|
variant,
|
|
type,
|
|
heading,
|
|
text,
|
|
link,
|
|
close,
|
|
phoneContact,
|
|
sidepeekCtaText,
|
|
sidepeekContent,
|
|
ariaLive,
|
|
ariaRole,
|
|
}: AlertProps) {
|
|
const classNames = alertVariants({
|
|
className,
|
|
variant,
|
|
type,
|
|
})
|
|
const Icon = getIconByAlertType(type)
|
|
|
|
if (!text && !heading) {
|
|
return null
|
|
}
|
|
return (
|
|
<section className={classNames} role={ariaRole} aria-live={ariaLive}>
|
|
<div className={styles.content}>
|
|
<span className={styles.iconWrapper}>
|
|
<Icon className={styles.icon} width={24} height={24} />
|
|
</span>
|
|
<div className={styles.innerContent}>
|
|
<div className={styles.textWrapper}>
|
|
{heading ? (
|
|
<Body textTransform="bold" asChild>
|
|
<h2>{heading}</h2>
|
|
</Body>
|
|
) : null}
|
|
{text ? (
|
|
<Body>
|
|
{text}
|
|
{phoneContact?.phoneNumber ? (
|
|
<>
|
|
<span> {phoneContact.displayText} </span>
|
|
<Link
|
|
color="burgundy"
|
|
href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
|
|
>
|
|
{phoneContact.phoneNumber}
|
|
</Link>
|
|
{phoneContact.footnote ? (
|
|
<span>. ({phoneContact.footnote})</span>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</Body>
|
|
) : null}
|
|
</div>
|
|
|
|
{link ? (
|
|
<Link
|
|
color="burgundy"
|
|
textDecoration="underline"
|
|
href={link.url}
|
|
keepSearchParams={link.keepSearchParams}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
) : null}
|
|
{!link && sidepeekCtaText && sidepeekContent ? (
|
|
<AlertSidepeek
|
|
ctaText={sidepeekCtaText}
|
|
sidePeekContent={sidepeekContent}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{close ? (
|
|
<Button onPress={close} variant="Text" className={styles.closeButton}>
|
|
<CloseLargeIcon height={24} width={24} color="uiTextPlaceholder" />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|