c88aa92aba
feat(SW-1371): delete ancillary * feat(SW-1371): delete ancillary * Remove outline from dialog * Consistent return type from mutation * Error flow Approved-by: Michael Zetterberg Approved-by: Pontus Dreij
172 lines
6.5 KiB
TypeScript
172 lines
6.5 KiB
TypeScript
import { useRouter } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { CheckCircleIcon, EditIcon } from "@/components/Icons"
|
|
import Accordion from "@/components/TempDesignSystem/Accordion"
|
|
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import RemoveButton from "./RemoveButton"
|
|
|
|
import styles from "./addedAncillaries.module.css"
|
|
|
|
import type { AddedAncillariesProps } from "@/types/components/myPages/myStay/ancillaries"
|
|
|
|
export function AddedAncillaries({
|
|
ancillaries,
|
|
booking,
|
|
}: AddedAncillariesProps) {
|
|
const intl = useIntl()
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.header}>
|
|
<Subtitle>{intl.formatMessage({ id: "My Add-on's" })}</Subtitle>
|
|
|
|
{booking.ancillary?.deliveryTime && (
|
|
<div className={styles.deliveryTime}>
|
|
<Body color="baseTextHighContrast" textTransform="bold">
|
|
{intl.formatMessage({ id: "Delivered at:" })}
|
|
</Body>
|
|
<Body color="baseTextHighContrast" textTransform="bold">
|
|
{booking.ancillary?.deliveryTime}
|
|
</Body>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{booking.ancillaries.map((ancillary) => {
|
|
const ancillaryItem = ancillaries?.find((a) => a.id === ancillary.code)
|
|
|
|
return (
|
|
<>
|
|
<Accordion className={styles.ancillaryMobile}>
|
|
<AccordionItem
|
|
title={ancillaryItem?.title ?? ""}
|
|
icon={<CheckCircleIcon color="uiSemanticSuccess" />}
|
|
>
|
|
<div>
|
|
{ancillary.comment && (
|
|
<>
|
|
<div className={styles.commentMobile}>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Other requests" })}:
|
|
</Body>
|
|
<Body color="uiTextMediumContrast">
|
|
{ancillary.comment}
|
|
</Body>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className={styles.paymentMobileWrapper}>
|
|
<div className={styles.paymentMobile}>
|
|
<Body>{intl.formatMessage({ id: "Total" })}</Body>
|
|
<Body textTransform="bold">
|
|
{`${ancillary.totalPrice} ${ancillary.currency}`}
|
|
</Body>
|
|
<Divider
|
|
variant="vertical"
|
|
color="baseSurfaceSubtleNormal"
|
|
/>
|
|
<Body textTransform="bold">
|
|
{`${ancillary.points} ${intl.formatMessage({ id: "Points" })}`}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.footerMobile}>
|
|
{booking.confirmationNumber && ancillary.code ? (
|
|
<div className={styles.actions}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
theme="base"
|
|
>
|
|
<EditIcon />
|
|
{intl.formatMessage({ id: "Modify" })}
|
|
</Button>
|
|
<Divider
|
|
variant="vertical"
|
|
color="baseSurfaceSubtleNormal"
|
|
/>
|
|
<RemoveButton
|
|
confirmationNumber={booking.confirmationNumber}
|
|
code={ancillary.code}
|
|
title={ancillaryItem?.title}
|
|
onSuccess={() => router.refresh()}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
<div className={styles.ancillaryDesktop}>
|
|
<div className={styles.specification}>
|
|
<div className={styles.name}>
|
|
<CheckCircleIcon color="uiSemanticSuccess" />
|
|
<Body textTransform="bold">{ancillaryItem?.title}</Body>
|
|
<Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
|
|
</div>
|
|
<div className={styles.payment}>
|
|
<Body>{intl.formatMessage({ id: "Total" })}</Body>
|
|
<Body textTransform="bold">
|
|
{`${ancillary.totalPrice} ${ancillary.currency}`}
|
|
</Body>
|
|
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
|
|
<Body textTransform="bold">
|
|
{`${ancillary.points} ${intl.formatMessage({ id: "Points" })}`}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider color="baseSurfaceSubtleHover" />
|
|
|
|
<div className={styles.footer}>
|
|
<div className={styles.comment}>
|
|
{ancillary.comment && (
|
|
<>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Other requests" })}:
|
|
</Body>
|
|
<Body>{ancillary.comment}</Body>
|
|
</>
|
|
)}
|
|
</div>
|
|
{booking.confirmationNumber && ancillary.code ? (
|
|
<div className={styles.actions}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
theme="base"
|
|
>
|
|
<EditIcon />
|
|
{intl.formatMessage({ id: "Modify" })}
|
|
</Button>
|
|
<Divider
|
|
variant="vertical"
|
|
color="baseSurfaceSubtleNormal"
|
|
/>
|
|
<RemoveButton
|
|
confirmationNumber={booking.confirmationNumber}
|
|
code={ancillary.code}
|
|
title={ancillaryItem?.title}
|
|
onSuccess={() => router.refresh()}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|