94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
import { Reward } from "@/server/routers/contentstack/reward/output"
|
|
|
|
import Image from "@/components/Image"
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Grids from "@/components/TempDesignSystem/Grids"
|
|
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Redeem from "./Redeem"
|
|
|
|
import styles from "./current.module.css"
|
|
|
|
import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
|
|
|
|
export default function ClientCurrentRewards({
|
|
initialCurrentRewards,
|
|
showRedeem,
|
|
}: CurrentRewardsClientProps) {
|
|
const lang = useLang()
|
|
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
|
|
trpc.contentstack.rewards.current.useInfiniteQuery(
|
|
{
|
|
limit: 3,
|
|
lang,
|
|
},
|
|
{
|
|
getNextPageParam: (lastPage) => lastPage?.nextCursor,
|
|
initialData: {
|
|
pageParams: [undefined, 1],
|
|
pages: [initialCurrentRewards],
|
|
},
|
|
}
|
|
)
|
|
function loadMoreData() {
|
|
if (hasNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}
|
|
const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
|
|
const rewards = filteredRewards
|
|
.flatMap((page) => page?.rewards)
|
|
.filter((reward): reward is Reward => !!reward)
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner />
|
|
}
|
|
|
|
if (!rewards.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Grids.Stackable>
|
|
{rewards.map((reward, idx) => (
|
|
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
|
|
<div className={styles.content}>
|
|
<Image
|
|
src="/_static/img/loyalty-award.png"
|
|
width={113}
|
|
height={125}
|
|
alt={reward.label || ""}
|
|
/>
|
|
<Title
|
|
as="h4"
|
|
level="h3"
|
|
textAlign="center"
|
|
textTransform="regular"
|
|
>
|
|
{reward.label}
|
|
</Title>
|
|
</div>
|
|
{showRedeem && (
|
|
<div className={styles.btnContainer}>
|
|
<Redeem reward={reward} />
|
|
</div>
|
|
)}
|
|
</article>
|
|
))}
|
|
</Grids.Stackable>
|
|
{hasNextPage &&
|
|
(isFetching ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<ShowMoreButton loadMoreData={loadMoreData} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|