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

Merged in feat/BOOK-485-campaign-rate-my-stay (pull request #3120)

Browse Source 
feat(BOOK-485): add campaign tag on my stay and update design

* feat(BOOK-485): add campaign tag on my stay and update design

* feat(BOOK-485): update rightAligned


Approved-by: Erik Tiekstra
This commit is contained in:
Bianca Widstam
2025-11-12 08:19:24 +00:00
parent c8cc4138b5
commit 2c044de187
12 changed files with 102 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
View File

@@ -1,42 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
export default function BookingCode() {
const intl = useIntl()
const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
if (!bookingCode) {
return null
}
return (
<Typography variant="Body/Supporting text (caption)/smBold">
<IconChip
color="blue"
icon={<DiscountIcon color="Icon/Feedback/Information" />}
>
{intl.formatMessage(
{
id: "booking.bookingCodeWithValue",
defaultMessage: "<strong>Booking code</strong>: {value}",
},
{
value: bookingCode,
strong: (text) => (
<Typography variant="Body/Supporting text (caption)/smBold">
<strong>{text}</strong>
</Typography>
),
}
)}
</IconChip>
</Typography>
)
}

11
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
View File

@@ -1,12 +1,19 @@
import BookingCode from "./BookingCode"
import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
import { useMyStayStore } from "@/stores/my-stay"
import PriceDetails from "./PriceDetails"
import styles from "./information.module.css"
export default function BookingInformation() {
const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
bookingCode: state.bookedRoom.bookingCode,
isCampaignRate: state.bookedRoom.isCampaignRate,
}))
return (
<div className={styles.bookingInformation}>
<BookingCode />
<BookingCodeChip bookingCode={bookingCode} isCampaign={isCampaignRate} />
<PriceDetails />
</div>
)