feat(SW-340): Added HotelCardDialog component

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -67,7 +67,7 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .card.listing {
+  .card.pageListing {
     grid-template-areas:
       "image header"
       "image hotel"
@@ -76,30 +76,30 @@
     padding: 0;
   }
 
-  .listing .imageContainer {
+  .pageListing .imageContainer {
     position: relative;
     min-height: 200px;
     width: 518px;
   }
 
-  .listing .tripAdvisor {
+  .pageListing .tripAdvisor {
     position: absolute;
     display: block;
     left: 7px;
     top: 7px;
   }
 
-  .listing .hotelInformation {
+  .pageListing .hotelInformation {
     padding-top: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .listing .hotel {
+  .pageListing .hotel {
     gap: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .listing .prices {
+  .pageListing .prices {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -107,11 +107,11 @@
     padding-bottom: var(--Spacing-x2);
   }
 
-  .listing .detailsButton {
+  .pageListing .detailsButton {
     border-bottom: none;
   }
 
-  .listing .button {
+  .pageListing .button {
     width: 160px;
   }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -17,9 +17,13 @@ import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
 
+import { HotelCardListingType } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({ hotel, type = "listing" }: HotelCardProps) {
+export default function HotelCard({
+  hotel,
+  type = HotelCardListingType.PageListing,
+}: HotelCardProps) {
   const intl = useIntl()
 
   const { hotelData } = hotel

components/HotelReservation/HotelCard/variants.ts

@@ -5,11 +5,11 @@ import styles from "./hotelCard.module.css"
 export const hotelCardVariants = cva(styles.card, {
   variants: {
     type: {
-      listing: styles.listing,
-      map: styles.map,
+      pageListing: styles.pageListing,
+      mapListing: styles.mapListing,
     },
   },
   defaultVariants: {
-    type: "listing",
+    type: "pageListing",
   },
 })