Merged in LOY-493/Sidepeek-upcoming-stays (pull request #3315)
LOY-493/Sidepeek upcoming stays * chore(LOY-493): Add icon to next stay card cta * chore(LOY-493): better folder org for stays * chore(LOY-494): more folder reorg * feat(LOY-493): Implement Sidepeek for Upcoming Stays 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,128 @@
|
||||
"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 { getDaysUntilText } from "@/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
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,
|
||||
confirmationNumber,
|
||||
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="sticky_note_2" color="Icon/Default" />
|
||||
{intl.formatMessage({
|
||||
id: "common.bookingNumber",
|
||||
defaultMessage: "Booking number",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span className={styles.dateRange}>{confirmationNumber}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
|
||||
import styles from "./seeAllCard.module.css"
|
||||
|
||||
interface SeeAllCardProps {
|
||||
onPress: () => void
|
||||
}
|
||||
|
||||
export function SeeAllCard({ onPress }: SeeAllCardProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<Button
|
||||
variant="Secondary"
|
||||
size="Medium"
|
||||
typography="Body/Paragraph/mdBold"
|
||||
onPress={onPress}
|
||||
>
|
||||
{intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
|
||||
<MaterialIcon icon="chevron_right" color="CurrentColor" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--Surface-Secondary-Default);
|
||||
border: 1px solid var(--Border-Default);
|
||||
overflow: hidden;
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
import { Carousel } from "@/components/Carousel"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { UpcomingStaysSidePeek } from "../SidePeek"
|
||||
import CarouselCard from "./CarouselCard"
|
||||
import { SeeAllCard } from "./SeeAllCard"
|
||||
|
||||
import styles from "../upcoming.module.css"
|
||||
|
||||
import type {
|
||||
UpcomingStaysClientProps,
|
||||
UpcomingStaysNonNullResponseObject,
|
||||
} from "@/types/components/myPages/stays/upcoming"
|
||||
|
||||
const MAX_VISIBLE_STAYS = 5
|
||||
|
||||
export default function UpcomingStaysCarousel({
|
||||
initialUpcomingStays,
|
||||
}: UpcomingStaysClientProps) {
|
||||
const lang = useLang()
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
|
||||
|
||||
const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
|
||||
{
|
||||
limit: 6,
|
||||
lang,
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage) => {
|
||||
return lastPage?.nextCursor
|
||||
},
|
||||
initialData: {
|
||||
pageParams: [undefined, 1],
|
||||
pages: [initialUpcomingStays],
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner />
|
||||
}
|
||||
|
||||
const stays = data.pages
|
||||
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
|
||||
.flatMap((page) => page.data)
|
||||
|
||||
if (!stays.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
|
||||
const hasMoreStays = stays.length >= MAX_VISIBLE_STAYS
|
||||
|
||||
return (
|
||||
<>
|
||||
<Carousel className={styles.carousel}>
|
||||
<Carousel.Content>
|
||||
{visibleStays.map((stay) => (
|
||||
<Carousel.Item
|
||||
key={stay.attributes.confirmationNumber}
|
||||
className={styles.carouselItem}
|
||||
>
|
||||
<CarouselCard stay={stay} />
|
||||
</Carousel.Item>
|
||||
))}
|
||||
{hasMoreStays && (
|
||||
<Carousel.Item className={styles.carouselItem}>
|
||||
<SeeAllCard onPress={() => setIsSidePeekOpen(true)} />
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel.Content>
|
||||
<Carousel.Previous className={styles.navigationButton} />
|
||||
<Carousel.Next className={styles.navigationButton} />
|
||||
<Carousel.Dots />
|
||||
</Carousel>
|
||||
<UpcomingStaysSidePeek
|
||||
isOpen={isSidePeekOpen}
|
||||
onClose={() => setIsSidePeekOpen(false)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user