feat(SW-2151): Removed payment information from booking confirmation
Approved-by: Michael Zetterberg Approved-by: Matilda Landström
This commit is contained in:
@@ -5,15 +5,9 @@ import { useIntl } from "react-intl"
|
|||||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||||
|
|
||||||
import { dt } from "@/lib/dt"
|
|
||||||
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
|
|
||||||
|
|
||||||
import IconChip from "@/components/TempDesignSystem/IconChip"
|
|
||||||
import { Toast } from "@/components/TempDesignSystem/Toasts"
|
import { Toast } from "@/components/TempDesignSystem/Toasts"
|
||||||
import useLang from "@/hooks/useLang"
|
|
||||||
import { trackMyStayPageLink } from "@/utils/tracking"
|
import { trackMyStayPageLink } from "@/utils/tracking"
|
||||||
|
|
||||||
import TotalPrice from "../Rooms/TotalPrice"
|
|
||||||
import SummaryCard from "./SummaryCard"
|
import SummaryCard from "./SummaryCard"
|
||||||
|
|
||||||
import styles from "./bookingSummary.module.css"
|
import styles from "./bookingSummary.module.css"
|
||||||
@@ -26,91 +20,17 @@ interface BookingSummaryProps {
|
|||||||
|
|
||||||
export default function BookingSummary({ hotel }: BookingSummaryProps) {
|
export default function BookingSummary({ hotel }: BookingSummaryProps) {
|
||||||
const intl = useIntl()
|
const intl = useIntl()
|
||||||
const lang = useLang()
|
|
||||||
|
|
||||||
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
|
|
||||||
|
|
||||||
const { isCancelled, createDateTime, guaranteeInfo, priceType } = bookedRoom
|
|
||||||
|
|
||||||
const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
|
const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
|
||||||
|
|
||||||
const bookingDate = dt(createDateTime).locale(lang).format("D MMMM YYYY")
|
|
||||||
|
|
||||||
const isPaid = !!guaranteeInfo
|
|
||||||
|
|
||||||
const paymentMethod = guaranteeInfo?.paymentMethodDescription
|
|
||||||
?.toLocaleLowerCase()
|
|
||||||
.startsWith("visa")
|
|
||||||
? intl.formatMessage({ id: "Card" })
|
|
||||||
: guaranteeInfo?.paymentMethodDescription
|
|
||||||
? guaranteeInfo?.paymentMethodDescription
|
|
||||||
: intl.formatMessage({ id: "N/A" })
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.bookingSummary}>
|
<div className={styles.bookingSummary}>
|
||||||
<Typography variant="Title/sm">
|
<Typography variant="Title/sm">
|
||||||
<h2 className={styles.title}>
|
<h2 className={styles.title}>
|
||||||
{intl.formatMessage({ id: "Booking summary" })}
|
{intl.formatMessage({ id: "Practical information" })}
|
||||||
</h2>
|
</h2>
|
||||||
</Typography>
|
</Typography>
|
||||||
<div className={styles.bookingSummaryContent}>
|
<div className={styles.bookingSummaryContent}>
|
||||||
<SummaryCard
|
|
||||||
title={
|
|
||||||
<TotalPrice variant="Body/Paragraph/mdBold" type={priceType} />
|
|
||||||
}
|
|
||||||
image={{
|
|
||||||
src: "/_static/img/scandic-coin.svg",
|
|
||||||
alt: "Scandic coin",
|
|
||||||
}}
|
|
||||||
texts={[`${intl.formatMessage({ id: "Payment" })}: ${paymentMethod}`]}
|
|
||||||
supportingText={bookingDate}
|
|
||||||
chip={
|
|
||||||
isCancelled ? (
|
|
||||||
<IconChip
|
|
||||||
color="red"
|
|
||||||
icon={
|
|
||||||
<MaterialIcon
|
|
||||||
icon="cancel"
|
|
||||||
size={20}
|
|
||||||
color="Icon/Feedback/Error"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
||||||
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
|
|
||||||
</Typography>
|
|
||||||
</IconChip>
|
|
||||||
) : (
|
|
||||||
<IconChip
|
|
||||||
color={isPaid ? "green" : "red"}
|
|
||||||
icon={
|
|
||||||
isPaid ? (
|
|
||||||
<MaterialIcon
|
|
||||||
icon="check_circle"
|
|
||||||
size={20}
|
|
||||||
color="Icon/Feedback/Success"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<MaterialIcon
|
|
||||||
icon="cancel"
|
|
||||||
size={20}
|
|
||||||
color="Icon/Interactive/Accent"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
||||||
<span>
|
|
||||||
<strong>{intl.formatMessage({ id: "Status" })}:</strong>{" "}
|
|
||||||
{isPaid
|
|
||||||
? intl.formatMessage({ id: "Paid" })
|
|
||||||
: intl.formatMessage({ id: "Unpaid" })}
|
|
||||||
</span>
|
|
||||||
</Typography>
|
|
||||||
</IconChip>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<SummaryCard
|
<SummaryCard
|
||||||
title={
|
title={
|
||||||
<Typography variant="Body/Paragraph/mdBold">
|
<Typography variant="Body/Paragraph/mdBold">
|
||||||
|
|||||||
Reference in New Issue
Block a user