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

Merged in feat/LOY-424-Sidepeek-Past-Stays (pull request #3270)

Browse Source 
feat(LOY-424): Load More Past Stays via Sidepeek

* feat(LOY-424): Load More Past Stays via Sidepeek

* chore(LOY-424): use new section header

* fix(LOY-424): remove uneeded nextCursor check


Approved-by: Emma Zettervall
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-12-03 15:19:25 +00:00
parent c6fff09c73
commit 30b9d14fb0
8 changed files with 229 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards.tsx
View File

@@ -1,64 +1,38 @@
"use client"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "@/hooks/useLang"
import { useState } from "react"
import ListContainer from "../ListContainer"
import ShowMoreButton from "../ShowMoreButton"
import { Card } from "./Card"
import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
import { SeeAllCard } from "./SeeAllCard"
import styles from "./cards.module.css"
import type {
PreviousStaysClientProps,
PreviousStaysNonNullResponseObject,
} from "@/types/components/myPages/stays/previous"
import type { PreviousStaysClientProps } from "@/types/components/myPages/stays/previous"
const MAX_VISIBLE_STAYS = 5
export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
const lang = useLang()
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.user.stays.previous.useInfiniteQuery(
{
limit: 6,
lang,
},
{
getNextPageParam: (lastPage) => {
return lastPage?.nextCursor
},
initialData: {
pageParams: [undefined, 1],
pages: [initialPreviousStays],
},
}
)
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
if (isLoading) {
return <LoadingSpinner />
}
function loadMoreData() {
if (hasNextPage) {
fetchNextPage()
}
}
const stays = data.pages
.filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
.flatMap((page) => page.data)
const stays = initialPreviousStays.data
const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
const hasMoreStays = stays.length >= INITIAL_STAYS_FETCH_LIMIT
return (
<ListContainer>
<div className={styles.grid}>
{stays.map((stay) => (
{visibleStays.map((stay) => (
<Card key={stay.attributes.confirmationNumber} stay={stay} />
))}
{hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
</div>
{hasNextPage ? (
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}
<PreviousStaysSidePeek
isOpen={isSidePeekOpen}
onClose={() => setIsSidePeekOpen(false)}
/>
</ListContainer>
)
}

102
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/index.tsx Normal file
View File

@@ -0,0 +1,102 @@
"use client"
import { useIntl } from "react-intl"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "@/hooks/useLang"
import ShowMoreButton from "../../ShowMoreButton"
import { Card } from "../Card"
import { groupStaysByYear } from "../utils/groupStaysByYear"
import styles from "./previousStaysSidePeek.module.css"
import type { PreviousStaysNonNullResponseObject } from "@/types/components/myPages/stays/previous"
interface PreviousStaysSidePeekProps {
isOpen: boolean
onClose: () => void
}
export function PreviousStaysSidePeek({
isOpen,
onClose,
}: PreviousStaysSidePeekProps) {
const intl = useIntl()
const lang = useLang()
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.user.stays.previous.useInfiniteQuery(
{
limit: 10,
lang,
},
{
getNextPageParam: (lastPage) => {
return lastPage?.nextCursor
},
enabled: isOpen,
}
)
function loadMoreData() {
if (hasNextPage) {
fetchNextPage()
}
}
const stays = data?.pages
.filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
.flatMap((page) => page.data)
const staysByYear = stays ? groupStaysByYear(stays) : []
return (
<SidePeekSelfControlled
title={intl.formatMessage({
id: "stays.previous.title",
defaultMessage: "Previous stays",
})}
isOpen={isOpen}
onClose={onClose}
>
<div className={styles.content}>
{isLoading ? (
<div className={styles.loadingContainer}>
<LoadingSpinner />
</div>
) : (
<>
{staysByYear.map(({ year, stays }) => (
<section key={year} className={styles.yearSection}>
<div className={styles.yearHeader}>
<Typography variant="Title/Overline/sm">
<span className={styles.yearText}>{year}</span>
</Typography>
</div>
<div className={styles.staysList}>
{stays.map((stay) => (
<Card
key={stay.attributes.confirmationNumber}
stay={stay}
/>
))}
</div>
</section>
))}
{hasNextPage && (
<ShowMoreButton
disabled={isFetching}
loadMoreData={loadMoreData}
/>
)}
</>
)}
</div>
</SidePeekSelfControlled>
)
}

34
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/previousStaysSidePeek.module.css Normal file
View File

@@ -0,0 +1,34 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Space-x3);
}
.loadingContainer {
display: flex;
justify-content: center;
align-items: center;
padding: var(--Space-x4);
}
.yearSection {
display: flex;
flex-direction: column;
gap: var(--Space-x2);
}
.yearHeader {
background: var(--Surface-Primary-Hover-Accent);
padding: var(--Space-x1) var(--Space-x2);
border-radius: var(--Corner-radius-sm);
}
.yearText {
color: var(--Text-Heading);
}
.staysList {
display: flex;
flex-direction: column;
gap: var(--Space-x2);
}

30
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SeeAllCard/index.tsx Normal file
View File

@@ -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>
)
}

12
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SeeAllCard/seeAllCard.module.css Normal file
View File

@@ -0,0 +1,12 @@
.card {
border-radius: var(--Corner-radius-lg);
border: 1px solid var(--Border-Default);
background: var(--Surface-Secondary-Default);
display: flex;
padding: var(--Space-x15);
align-items: center;
justify-content: center;
align-self: stretch;
height: 100%;
min-height: 134px;
}

1
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/data.ts Normal file
View File

@@ -0,0 +1 @@
export const INITIAL_STAYS_FETCH_LIMIT = 6

7
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
View File

@@ -3,11 +3,12 @@ import { serverClient } from "@/lib/trpc/server"
import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import { Cards } from "./Cards"
import { ClientPreviousStays } from "./Client"
import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
import styles from "./previous.module.css"
@@ -19,7 +20,7 @@ export default async function PreviousStays({
}: AccountPageComponentProps) {
const caller = await serverClient()
const initialPreviousStays = await caller.user.stays.previous({
limit: 6,
limit: INITIAL_STAYS_FETCH_LIMIT,
})
if (!initialPreviousStays?.data.length) {
@@ -31,7 +32,7 @@ export default async function PreviousStays({
return (
<Section>
<div className={styles.header}>
<SectionHeader title={title} link={link} />
<SectionHeader heading={title ?? undefined} link={link} />
<ClaimPoints />
</div>
<StaysComponent initialPreviousStays={initialPreviousStays} />

29
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/utils/groupStaysByYear.ts Normal file
View File

@@ -0,0 +1,29 @@
import { dt } from "@scandic-hotels/common/dt"
import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
export interface StaysByYear {
year: number
stays: Stay[]
}
/**
* Groups stays by year based on checkinDate.
* @returns an array sorted by year in descending order (most recent first).
*/
export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
const groupedMap = new Map<number, Stay[]>()
for (const stay of stays) {
const year = dt(stay.attributes.checkinDate).year()
if (!groupedMap.has(year)) {
groupedMap.set(year, [])
}
groupedMap.get(year)!.push(stay)
}
return Array.from(groupedMap.entries())
.sort(([yearA], [yearB]) => yearB - yearA)
.map(([year, stays]) => ({ year, stays }))
}