feat(SW-344): Fixed button in card

components/HotelReservation/HotelCard/index.tsx

@@ -2,6 +2,7 @@
 import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
 import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -30,6 +31,7 @@ export default function HotelCard({
   onHotelCardHover,
 }: HotelCardProps) {
   const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -86,7 +88,7 @@ export default function HotelCard({
         </Footnote>
         <Link
           className={styles.addressMobile}
-          href={`${selectHotelMap[params.lang as keyof typeof selectHotelMap]}?selectedHotel=${hotelData.name}`}
+          href={`${selectHotelMap[lang]}?selectedHotel=${hotelData.name}`}
           keepSearchParams
           variant="underscored"
         >

components/HotelReservation/HotelCardDialog/index.tsx

@@ -1,13 +1,18 @@
 "use client"
 
+import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
+import { selectRate } from "@/constants/routes/hotelReservation"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { CloseLargeIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -21,6 +26,8 @@ export default function HotelCardDialog({
   isOpen,
   handleClose,
 }: HotelCardDialogProps) {
+  const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   if (!data) {
@@ -94,8 +101,15 @@ export default function HotelCardDialog({
               </Subtitle>
             )}
           </div>
-          <Button size="small" theme="base" className={styles.button}>
+
-            {intl.formatMessage({ id: "See rooms" })}
+          <Button asChild theme="base" size="small" className={styles.button}>
+            <Link
+              href={`${selectRate[lang]}?hotel=${data.operaId}`}
+              color="none"
+              keepSearchParams
+            >
+              {intl.formatMessage({ id: "See rooms" })}
+            </Link>
           </Button>
         </div>
       </div>

components/HotelReservation/HotelCardDialogListing/utils.ts

@@ -17,5 +17,6 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
     ],
     amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
     ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
+    operaId: hotel.hotelData.operaId,
   }))
 }

types/components/hotelReservation/selectHotel/map.ts

@@ -38,6 +38,7 @@ export type HotelPin = {
   }[]
   amenities: Filter[]
   ratings: number | null
+  operaId: string
 }
 
 export interface HotelListingMapContentProps {