scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2078-update-confirmation-page-vouchers (pull request #1731)

Browse Source 
Feat/SW-2078 update confirmation page vouchers and Corp Cheques rate

* feat: SW-2078 Tablet bookingCode ref forward issue fix

(cherry picked from commit 16a6a00fd99b6b6220a98ad74de062d67d35e1c0)

* feat: SW-2078 Display Vouchers and Cheques prices on confirmation page

(cherry picked from commit a76494de497a7d5e7641cb0036bd7055acf875c1)

* feat: SW-2078 Rebase issue fix

* feat: SW-2079 Updated rate title in terms modal

* feat: SW-2078 Optimized code

* feat: SW-2078 Removed extra tags


Approved-by: Christian Andolf
This commit is contained in:
Hrishikesh Vaipurkar
2025-04-08 07:27:40 +00:00
parent c56a0b8ce9
commit 73cb423c95
26 changed files with 300 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
View File

@@ -2,6 +2,7 @@
import React from "react"
import { useIntl } from "react-intl"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -10,7 +11,7 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import IconChip from "@/components/TempDesignSystem/IconChip"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
@@ -45,15 +46,26 @@ function TableSection({ children }: React.PropsWithChildren) {
function TableSectionHeader({
title,
subtitle,
bold,
}: {
title: string
subtitle?: string
bold?: boolean
}) {
const typographyVariant = bold
? "Body/Paragraph/mdBold"
: "Body/Paragraph/mdRegular"
return (
<tr>
<th colSpan={2}>
<Body>{title}</Body>
{subtitle ? <Body>{subtitle}</Body> : null}
<th colSpan={2} align="left">
<Typography variant={typographyVariant}>
<p>{title}</p>
</Typography>
{subtitle ? (
<Typography variant="Body/Paragraph/mdRegular">
<p>{subtitle}</p>
</Typography>
) : null}
</th>
</tr>
)
@@ -130,12 +142,13 @@ export default function PriceDetailsModal() {
<React.Fragment key={idx}>
<TableSection>
{rooms.length > 1 && (
<Body textTransform="bold">
{intl.formatMessage(
<TableSectionHeader
title={intl.formatMessage(
{ id: "Room {roomIndex}" },
{ roomIndex: idx + 1 }
)}
</Body>
bold
/>
)}
<TableSectionHeader title={room.name} subtitle={duration} />
{room.roomFeatures
@@ -179,14 +192,14 @@ export default function PriceDetailsModal() {
currencyCode
)}
/>
{room.children ? (
{room.childrenAges?.length ? (
<Row
label={intl.formatMessage(
{
id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
},
{
totalChildren: room.children,
totalChildren: room.childrenAges.length,
totalBreakfasts: diff,
}
)}
@@ -237,11 +250,26 @@ export default function PriceDetailsModal() {
</tr>
{bookingCode && (
<tr className={styles.row}>
<td>
<MaterialIcon icon="sell" />
{bookingCode}
<td colSpan={2} align="left">
<Typography variant="Body/Supporting text (caption)/smRegular">
<IconChip
color="blue"
icon={<DiscountIcon color="Icon/Feedback/Information" />}
>
{intl.formatMessage(
{ id: "<strong>Booking code</strong>: {value}" },
{
value: bookingCode,
strong: (text) => (
<Typography variant="Body/Supporting text (caption)/smBold">
<strong>{text}</strong>
</Typography>
),
}
)}
</IconChip>
</Typography>
</td>
<td></td>
</tr>
)}
</TableSection>