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

Merged in feat/SW-630-alerts-on-hotel-card (pull request #909)

Browse Source 
Feat/SW-630 alerts on hotel card

Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Pontus Dreij
2024-11-15 17:38:42 +00:00
parent 0a3b9450b6 821f667d06
commit 6b4f45863a
3 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -85,6 +85,12 @@
min-width: 160px; min-width: 160px;
} }
.specialAlerts {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.card.pageListing { .card.pageListing {
flex-direction: row; flex-direction: row;

8
components/HotelReservation/HotelCard/index.tsx
View File

@@ -7,6 +7,7 @@ import { selectHotelMap } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery" import ImageGallery from "@/components/ImageGallery"
import Alert from "@/components/TempDesignSystem/Alert"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
@@ -132,6 +133,13 @@ export default function HotelCard({
hotel={hotelData} hotel={hotelData}
showCTA={true} showCTA={true}
/> />
{hotelData.specialAlerts.length > 0 && (
<div className={styles.specialAlerts}>
{hotelData.specialAlerts.map((alert) => (
<Alert key={alert.id} type={alert.type} text={alert.text} />
))}
</div>
)}
</section> </section>
<div className={styles.prices}> <div className={styles.prices}>
<HotelPriceList price={price} /> <HotelPriceList price={price} />

36
components/TempDesignSystem/Alert/index.tsx
View File

@@ -44,23 +44,25 @@ export default function Alert({
<h2>{heading}</h2> <h2>{heading}</h2>
</Body> </Body>
) : null} ) : null}
<Body className={styles.text}> {text ? (
{text} <Body className={styles.text}>
{phoneContact?.phoneNumber ? ( {text}
<> {phoneContact?.phoneNumber ? (
<span> {phoneContact.displayText} </span> <>
<Link <span> {phoneContact.displayText} </span>
color="burgundy" <Link
href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`} color="burgundy"
> href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
{phoneContact.phoneNumber} >
</Link> {phoneContact.phoneNumber}
{phoneContact.footnote ? ( </Link>
<span>. ({phoneContact.footnote})</span> {phoneContact.footnote ? (
) : null} <span>. ({phoneContact.footnote})</span>
</> ) : null}
) : null} </>
</Body> ) : null}
</Body>
) : null}
</div> </div>
{link ? ( {link ? (
<Link color="burgundy" href={link.url}> <Link color="burgundy" href={link.url}>