Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)
feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Carousel next/previous arrows * chore(LOY-422): add new material icon * refactor(LOY-422): restructure new and old upcoming stays * fix(LOY-422): handle less than 1 case * chore(LOY-422): remove uneeded id * chore(LOY-422): remove intl label for date edge case Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -0,0 +1,69 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Border-Default);
|
||||
overflow: hidden;
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
|
||||
background:
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
|
||||
lightgray 50% / cover no-repeat,
|
||||
var(--Neutral-20);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.imageOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0.2) 50%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
padding: var(--Space-x2);
|
||||
color: var(--Text-Inverted);
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x2);
|
||||
}
|
||||
|
||||
.infoRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.dateRange {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { getDaysUntilText } from "../../utils/getDaysUntilText"
|
||||
|
||||
import styles from "./carouselCard.module.css"
|
||||
|
||||
import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
|
||||
|
||||
interface CarouselCardProps {
|
||||
stay: Stay
|
||||
}
|
||||
|
||||
export default function CarouselCard({ stay }: CarouselCardProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
|
||||
const { attributes } = stay
|
||||
const {
|
||||
checkinDate,
|
||||
checkoutDate,
|
||||
hotelInformation,
|
||||
isWebAppOrigin,
|
||||
bookingUrl,
|
||||
} = attributes
|
||||
|
||||
const daysUntilText = getDaysUntilText(checkinDate, lang, intl)
|
||||
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<div className={styles.imageContainer}>
|
||||
<Image
|
||||
className={styles.image}
|
||||
alt={
|
||||
hotelInformation.hotelContent.images.altText ||
|
||||
hotelInformation.hotelContent.images.altText_En ||
|
||||
hotelInformation.hotelName
|
||||
}
|
||||
src={hotelInformation.hotelContent.images.src}
|
||||
width={400}
|
||||
height={300}
|
||||
priority
|
||||
/>
|
||||
<div className={styles.imageOverlay}>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<span>{daysUntilText}</span>
|
||||
</Typography>
|
||||
<Typography variant="Title/md">
|
||||
<span>{hotelInformation.hotelName}</span>
|
||||
</Typography>
|
||||
{hotelInformation.cityName && (
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<span>{hotelInformation.cityName}</span>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.infoRow}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span className={styles.infoItem}>
|
||||
<MaterialIcon icon="calendar_month" color="Icon/Default" />
|
||||
{intl.formatMessage({
|
||||
id: "common.dates",
|
||||
defaultMessage: "Dates",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span className={styles.dateRange}>
|
||||
<time>{dt(checkinDate).locale(lang).format("D MMM")}</time>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{" → "}
|
||||
<time>{dt(checkoutDate).locale(lang).format("D MMM, YYYY")}</time>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{isWebAppOrigin && (
|
||||
<>
|
||||
<Divider variant="horizontal" color="Border/Divider/Default" />
|
||||
<ButtonLink
|
||||
variant="Text"
|
||||
color="Primary"
|
||||
size="Small"
|
||||
href={bookingUrl}
|
||||
>
|
||||
{intl.formatMessage({
|
||||
id: "nextStay.seeDetailsAndExtras",
|
||||
defaultMessage: "See details & extras",
|
||||
})}
|
||||
<MaterialIcon
|
||||
icon="keyboard_arrow_right"
|
||||
color="CurrentColor"
|
||||
size={20}
|
||||
/>
|
||||
</ButtonLink>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user