import { useRouter } from "next/navigation" import { useMemo } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import Accordion from "@/components/TempDesignSystem/Accordion" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import Divider from "@/components/TempDesignSystem/Divider" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { trackRemoveAncillary } from "@/utils/tracking/myStay" import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage" import RemoveButton from "./RemoveButton" import styles from "./addedAncillaries.module.css" import type { AddedAncillariesProps } from "@/types/components/myPages/myStay/ancillaries" import { BreakfastPackageEnum } from "@/types/enums/breakfast" import type { PackageSchema } from "@/types/trpc/routers/booking/confirmation" export function AddedAncillaries({ ancillaries, booking, }: AddedAncillariesProps) { const intl = useIntl() const router = useRouter() /** * All ancillaries that are added to the booking * * Adding a special ancillary for breakfast, calculated from * all breakfast packages that has been added as ancillaries, * not in the booking flow. */ const addedAncillaries = useMemo(() => { const addedBreakfastPackages = getBreakfastPackagesFromAncillaryFlow( booking.packages ) if (!addedBreakfastPackages?.length) { return booking.ancillaries } const combinedBreakfastPackageAsAncillary: PackageSchema = { code: BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST, unitPrice: 0, points: 0, currency: addedBreakfastPackages[0].currency, type: addedBreakfastPackages[0].type, description: addedBreakfastPackages[0].description, comment: addedBreakfastPackages[0].comment, totalPrice: addedBreakfastPackages.reduce( (acc, curr) => acc + curr.totalPrice, 0 ), unit: addedBreakfastPackages.reduce((acc, curr) => acc + curr.unit, 0), totalUnit: addedBreakfastPackages.reduce( (acc, curr) => acc + curr.totalUnit, 0 ), } return [combinedBreakfastPackageAsAncillary, ...booking.ancillaries] }, [booking.ancillaries, booking.packages]) if (addedAncillaries.length === 0) { return null } return (
{intl.formatMessage({ id: "My Add-on's" })} {booking.ancillary?.deliveryTime && (
{intl.formatMessage({ id: "Delivered at:" })} {booking.ancillary?.deliveryTime}
)}
{addedAncillaries.map((ancillary) => { const ancillaryTitle = ancillary.code === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST ? intl.formatMessage({ id: "Breakfast" }) : (ancillaries?.find((a) => a.id === ancillary.code)?.title ?? "") return ( <> } >
{ancillary.comment && ( <>
{intl.formatMessage({ id: "Other requests" })}: {ancillary.comment}
)}
{intl.formatMessage({ id: "Total" })} {ancillary.currency.toLowerCase() === "points" ? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}` : `${ancillary.totalPrice} ${ancillary.currency}`}
{booking.confirmationNumber && ancillary.code ? (
) : null}
{ancillaryTitle} {`X${ancillary.totalUnit}`}
{intl.formatMessage({ id: "Total" })} {ancillary.currency.toLowerCase() === "points" ? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}` : `${ancillary.totalPrice} ${ancillary.currency}`}
{ancillary.comment && ( <> {intl.formatMessage({ id: "Other requests" })}: {ancillary.comment} )}
{booking.confirmationNumber && ancillary.code ? (
{ trackRemoveAncillary( ancillary, booking.hotelId, booking.ancillary?.deliveryTime ) router.refresh() }} />
) : null}
) })}
) }