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,67 @@
|
||||
"use client"
|
||||
|
||||
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 CarouselCard from "./CarouselCard"
|
||||
|
||||
import styles from "./upcoming.module.css"
|
||||
|
||||
import type {
|
||||
UpcomingStaysClientProps,
|
||||
UpcomingStaysNonNullResponseObject,
|
||||
} from "@/types/components/myPages/stays/upcoming"
|
||||
|
||||
export default function UpcomingStaysCarousel({
|
||||
initialUpcomingStays,
|
||||
}: UpcomingStaysClientProps) {
|
||||
const lang = useLang()
|
||||
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
|
||||
}
|
||||
|
||||
return (
|
||||
<Carousel className={styles.carousel}>
|
||||
<Carousel.Content>
|
||||
{stays.map((stay) => (
|
||||
<Carousel.Item
|
||||
key={stay.attributes.confirmationNumber}
|
||||
className={styles.carouselItem}
|
||||
>
|
||||
<CarouselCard stay={stay} />
|
||||
</Carousel.Item>
|
||||
))}
|
||||
</Carousel.Content>
|
||||
<Carousel.Previous className={styles.navigationButton} />
|
||||
<Carousel.Next className={styles.navigationButton} />
|
||||
<Carousel.Dots />
|
||||
</Carousel>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
import Grids from "@/components/TempDesignSystem/Grids"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import ListContainer from "../ListContainer"
|
||||
import ShowMoreButton from "../ShowMoreButton"
|
||||
import StayCard from "../StayCard"
|
||||
|
||||
import type {
|
||||
UpcomingStaysClientProps,
|
||||
UpcomingStaysNonNullResponseObject,
|
||||
} from "@/types/components/myPages/stays/upcoming"
|
||||
|
||||
export default function ClientUpcomingStays({
|
||||
initialUpcomingStays,
|
||||
}: UpcomingStaysClientProps) {
|
||||
const lang = useLang()
|
||||
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
|
||||
trpc.user.stays.upcoming.useInfiniteQuery(
|
||||
{
|
||||
limit: 6,
|
||||
lang,
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage) => {
|
||||
return lastPage?.nextCursor
|
||||
},
|
||||
initialData: {
|
||||
pageParams: [undefined, 1],
|
||||
pages: [initialUpcomingStays],
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner />
|
||||
}
|
||||
|
||||
function loadMoreData() {
|
||||
if (hasNextPage) {
|
||||
fetchNextPage()
|
||||
}
|
||||
}
|
||||
|
||||
const stays = data.pages
|
||||
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
|
||||
.flatMap((page) => page.data)
|
||||
|
||||
return stays.length ? (
|
||||
<ListContainer>
|
||||
<Grids.Stackable>
|
||||
{stays.map((stay) => (
|
||||
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
|
||||
))}
|
||||
</Grids.Stackable>
|
||||
{hasNextPage ? (
|
||||
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
|
||||
) : null}
|
||||
</ListContainer>
|
||||
) : null
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { env } from "@/env/server"
|
||||
import { serverClient } from "@/lib/trpc/server"
|
||||
|
||||
import { Section } from "@/components/Section"
|
||||
import { SectionHeader } from "@/components/Section/Header"
|
||||
import SectionLink from "@/components/Section/Link"
|
||||
|
||||
import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
|
||||
import UpcomingStaysCarousel from "./Carousel"
|
||||
import ClientUpcomingStays from "./Client"
|
||||
|
||||
import styles from "./upcoming.module.css"
|
||||
|
||||
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
||||
|
||||
export default async function UpcomingStays({
|
||||
title,
|
||||
link,
|
||||
}: AccountPageComponentProps) {
|
||||
const caller = await serverClient()
|
||||
const initialUpcomingStays = await caller.user.stays.upcoming({
|
||||
limit: 6,
|
||||
})
|
||||
|
||||
const hasStays =
|
||||
initialUpcomingStays?.data && initialUpcomingStays.data.length > 0
|
||||
|
||||
if (env.NEW_STAYS_ON_MY_PAGES) {
|
||||
if (!hasStays) return null
|
||||
|
||||
return (
|
||||
<Section className={styles.container}>
|
||||
{title && <SectionHeader heading={title} link={link} />}
|
||||
<UpcomingStaysCarousel initialUpcomingStays={initialUpcomingStays} />
|
||||
<SectionLink link={link} variant="mobile" />
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Section className={styles.container}>
|
||||
{title && <SectionHeader heading={title} link={link} />}
|
||||
{hasStays ? (
|
||||
<ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
|
||||
) : (
|
||||
<EmptyUpcomingStaysBlock />
|
||||
)}
|
||||
<SectionLink link={link} variant="mobile" />
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.container {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carousel .navigationButton {
|
||||
top: 40%;
|
||||
}
|
||||
Reference in New Issue
Block a user