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

feat(SW-885): ancillary and book next stay

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-12-12 13:39:49 +01:00
parent f531350e2e
commit 9d4998c9c5
12 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx
View File

@@ -1,4 +1,5 @@
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
@@ -6,7 +7,7 @@ import styles from "./promo.module.css"
import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo"
export default function Promo({ buttonText, text, title }: PromoProps) {
export default function Promo({ buttonText, href, text, title }: PromoProps) {
return (
<article className={styles.promo}>
<Title color="white" level="h4">
@@ -15,8 +16,10 @@ export default function Promo({ buttonText, text, title }: PromoProps) {
<Body className={styles.text} color="white" textAlign="center">
{text}
</Body>
<Button intent="primary" size="small" theme="primaryStrong">
{buttonText}
<Button asChild intent="primary" size="small" theme="primaryStrong">
<Link color="none" href={href}>
{buttonText}
</Link>
</Button>
</article>
)

24
components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css
View File

@@ -15,22 +15,22 @@
.promo:nth-of-type(1) {
background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
);
/* , url(""); uncomment and add image once we have it */
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
),
url("/_static/img/Scandic_Park_Party_Lipstick.jpg");
}
.promo:nth-of-type(2) {
background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
);
/* , url(""); uncomment and add image once we have it */
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
),
url("/_static/img/Scandic_Family_Breakfast.jpg");
}
.text {

19
components/HotelReservation/BookingConfirmation/Promos/index.tsx
View File

@@ -1,16 +1,32 @@
"use client"
import { useIntl } from "react-intl"
import { homeHrefs } from "@/constants/homeHrefs"
import { myBooking } from "@/constants/myBooking"
import { env } from "@/env/client"
import useLang from "@/hooks/useLang"
import Promo from "./Promo"
import styles from "./promos.module.css"
export default function Promos() {
import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos"
export default function Promos({
confirmationNumber,
hotelId,
lastName,
}: PromosProps) {
const intl = useIntl()
const lang = useLang()
const homeUrl = homeHrefs[env.NEXT_PUBLIC_NODE_ENV][lang]
const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
return (
<div className={styles.promos}>
<Promo
buttonText={intl.formatMessage({ id: "View and buy add-ons" })}
href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
text={intl.formatMessage({
id: "Discover the little extra touches to make your upcoming stay even more unforgettable.",
})}
@@ -18,6 +34,7 @@ export default function Promos() {
/>
<Promo
buttonText={intl.formatMessage({ id: "Book another stay" })}
href={`${homeUrl}?hotel=${hotelId}`}
text={intl.formatMessage({
id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
})}