feat: enhance stays with api data

components/MyPages/Blocks/Stays/Header/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/Title"
 
 import styles from "./header.module.css"
 
-import type { HeaderProps } from "@/types/components/myPages/myStays/title"
+import type { HeaderProps } from "@/types/components/myPages/stays/title"
 
 export default function Header({ title, subtitle, link }: HeaderProps) {
   return (

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -10,7 +10,7 @@ import StayList from "../StayList"
 import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { Page } from "@/types/components/myPages/myStays/page"
+import type { Page } from "@/types/components/myPages/stays/page"
 
 export default function PreviousStays({
   lang,

components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
 
-import type { ShowMoreButtonParams } from "@/types/components/myPages/myStays/button"
+import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
 
 export default function ShowMoreButton({
   disabled,

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -16,7 +16,7 @@ export default async function SoonestStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const stays = await serverClient().user.stays.soonestUpcoming()
+  const { data: stays } = await serverClient().user.stays.upcoming({ limit: 3 })
 
   return (
     <MaxWidth className={styles.container} tag="section">

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -5,15 +5,15 @@ import Title from "@/components/Title"
 
 import styles from "./stay.module.css"
 
-import type { StayCardProps } from "@/types/components/myPages/myStays/stayCard"
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
 export default function StayCard({ stay, lang }: StayCardProps) {
-  const { dateArrive, dateDepart, guests, hotel } = stay
+  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
 
-  const arrival = dt(dateArrive).locale(lang)
+  const arrival = dt(checkinDate).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
   const arrivalDateTime = arrival.format("YYYY-MM-DD")
-  const depart = dt(dateDepart).locale(lang)
+  const depart = dt(checkoutDate).locale(lang)
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
@@ -27,7 +27,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           uppercase
           className={styles.hotel}
         >
-          {hotel}
+          {hotelInformation.hotelName}
         </Title>
         <section className={styles.container}>
           <div className={styles.date}>
@@ -43,17 +43,6 @@ export default function StayCard({ stay, lang }: StayCardProps) {
               <time dateTime={departDateTime}>{departDate}</time>
             </p>
           </div>
-          <div className={styles.guests}>
-            <Image
-              alt="Guests Icon"
-              height={20}
-              src="/_static/icons/person.svg"
-              width={20}
-            />
-            <span>
-              {guests} guest{guests > 1 ? "s" : ""}
-            </span>
-          </div>
         </section>
       </footer>
     </article>

components/MyPages/Blocks/Stays/StayList/index.tsx

@@ -2,13 +2,17 @@ import StayCard from "../StayCard"
 
 import styles from "./stayList.module.css"
 
-import { StayListProps } from "@/types/components/myPages/myStays/stayList"
+import { StayListProps } from "@/types/components/myPages/stays/stayList"
 
 export default function StayList({ lang, stays }: StayListProps) {
   return (
     <section className={styles.stays}>
       {stays.map((stay) => (
-        <StayCard key={stay.uid} stay={stay} lang={lang} />
+        <StayCard
+          key={stay.attributes.confirmationNumber}
+          stay={stay}
+          lang={lang}
+        />
       ))}
     </section>
   )

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
@@ -12,7 +11,7 @@ import StayList from "../StayList"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { Page } from "@/types/components/myPages/myStays/page"
+import type { Page } from "@/types/components/myPages/stays/page"
 
 export default function UpcomingStays({
   lang,
@@ -22,14 +21,16 @@ export default function UpcomingStays({
 }: AccountPageComponentProps) {
   const { data, hasNextPage, isFetching, fetchNextPage } =
     trpc.user.stays.upcoming.useInfiniteQuery(
-      {},
+      { limit: 6 },
       {
         getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
       }
     )
 
   function loadMoreData() {
-    fetchNextPage()
+    if (hasNextPage) {
+      fetchNextPage()
+    }
   }
 
   return (