feat(SW-718) Refactor select rate to support multiroom

2025-01-21 10:31:15 +01:00
parent 7d716dcf4a
commit edcf146ce1
27 changed files with 202 additions and 131 deletions
--- a/components/HotelReservation/SelectRate/RoomList/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomList/RoomCard/roomCard.module.css
@@ -0,0 +1,112 @@
+.card {
+  font-size: 14px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  background-color: #fff;
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
+  justify-content: space-between;
+  grid-row: span 5;
+}
+
+.card.noAvailability {
+  opacity: 0.6;
+}
+
+.specification {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Spacing-x1);
+  padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
+}
+
+.specification .guests {
+  border-right: 1px solid var(--Base-Border-Subtle);
+  padding-right: var(--Spacing-x1);
+}
+
+.toggleSidePeek {
+  margin-left: auto;
+}
+
+.toggleSidePeek button {
+  text-align: start;
+}
+
+.container {
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
+  display: grid;
+  grid-template-rows: subgrid;
+  gap: var(--Spacing-x-one-and-half);
+  grid-row: span 4;
+}
+
+/* Make sure rows with only unavailable rooms still has a min-height */
+.container:has(.noRoomsContainer) {
+  min-height: 400px;
+  grid-template-rows: auto repeat(3, 1fr);
+}
+
+.roomDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
+}
+
+.name {
+  display: inline-block;
+}
+
+.card img {
+  max-width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
+}
+
+.flexibilityOptions {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+.chipContainer {
+  position: absolute;
+  z-index: 1;
+  top: 12px;
+  left: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+}
+
+.chip {
+  background-color: var(--Main-Grey-White);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.imageContainer {
+  min-height: 190px;
+  position: relative;
+}
+
+.noRoomsContainer {
+  height: 100%;
+  width: 100%;
+}
+
+.noRooms {
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  margin: 0;
+
+  display: flex;
+  gap: var(--Spacing-x1);
+}