feat(SW-176): destructure response

app/[lang]/(live)/(public)/hotelreservation/[section]/page.tsx

@@ -1,7 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
-import HotelCard from "@/components/HotelReservation/HotelCard"
 import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
 import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
 import Details from "@/components/HotelReservation/SelectRate/Details"
@@ -108,7 +107,7 @@ export default async function SectionsPage({
 
   return (
     <div>
-      <HotelCard hotel={hotel} />
+      <div>Hotel Card TBI</div>
 
       <div className={styles.content}>
         <div className={styles.main}>

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -20,19 +20,22 @@ export default async function SelectHotelPage({
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-
   const hotelFilters = await serverClient().hotel.filters.get({
     hotelId: "879",
   })
 
-  const availability = await serverClient().hotel.availability.get({
+  const availabilityResponse = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  const filterAvailability = availability?.availability.data
+  if (!availabilityResponse) return null
+
+  const { availability } = availabilityResponse
+
+  const filterAvailability = availability.data
     .filter((hotels) => hotels.attributes.status === "Available")
     .flatMap((hotels) => hotels.attributes)
 
@@ -53,7 +56,7 @@ export default async function SelectHotelPage({
         <HotelFilter filters={hotelFilters} />
       </section>
       <section className={styles.hotelCards}>
-        {filterAvailability?.length ? (
+        {filterAvailability.length ? (
           filterAvailability.map((hotel) => (
             <HotelCard
               key={hotel.hotelId}

components/HotelReservation/HotelCard/index.tsx

@@ -29,14 +29,16 @@ export default async function HotelCard({
 }: HotelCardProps) {
   const intl = await getIntl()
 
-  const hotelData = await serverClient().hotel.get({
+  const hotelResponse = await serverClient().hotel.get({
     hotelId: hotelId.toString(),
     language: getLang(),
   })
 
-  if (!hotelData) return null
+  if (!hotelResponse) return null
 
-  const sortedAmenities = hotelData.hotel.detailedFacilities
+  const { hotel } = hotelResponse
+
+  const sortedAmenities = hotel.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -44,8 +46,8 @@ export default async function HotelCard({
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotelData.hotel.hotelContent.images.imageSizes.large}
+          src={hotel.hotelContent.images.imageSizes.large}
-          alt={hotelData.hotel.hotelContent.images.metaData.altText}
+          alt={hotel.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -53,20 +55,20 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotelData.hotel.ratings?.tripAdvisor.rating}
+            {hotel.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotelData.hotel.name}
+          {hotel.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotelData.hotel.address.streetAddress}, ${hotelData.hotel.address.city}`}
+          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotelData.hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>