Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Chore/SW-2878 extract booking confirmation pag * chore(SW-2878): Moved booking confirmation page to booking-flow package * chore(SW-2878): Fixed promo styles as per design * chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package Approved-by: Anton Gunnarsson
2025-09-10 07:50:48 +00:00
parent c6da0fb8cb
commit a5790ee454
77 changed files with 410 additions and 371 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
@@ -0,0 +1,114 @@
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.benefits {
+  align-items: center;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-md);
+  display: flex;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  width: min(max-content, 100%);
+}
+
+.guaranteeText {
+  color: var(--Text-Feedback-Succes-Accent);
+}
+
+.booking {
+  background-color: var(--Background-Primary);
+  border-radius: var(--Corner-radius-lg);
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
+    var(--Spacing-x2);
+}
+
+.img {
+  width: 100%;
+}
+
+.roomDetails {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.roomName {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-half);
+  grid-column: 1/-1;
+}
+
+.details {
+  display: grid;
+  gap: var(--Spacing-x-half) var(--Spacing-x3);
+  list-style: none;
+}
+
+.listItem {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-content: space-between;
+  gap: var(--Space-x3);
+}
+
+.guest {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.label {
+  color: var(--Text-Tertiary);
+}
+
+.details p:nth-of-type(even) {
+  text-align: right;
+}
+
+@media screen and (max-width: 1366px) {
+  .details {
+    padding-bottom: var(--Space-x1);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .header {
+    grid-template-columns: 1fr auto;
+  }
+
+  .details p:nth-of-type(even) {
+    text-align: left;
+  }
+
+  .img {
+    width: 204px;
+  }
+
+  .booking {
+    gap: var(--Spacing-x3);
+    grid-template-columns: auto 1fr;
+    padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2)
+      var(--Spacing-x2);
+  }
+
+  .roomDetails {
+    grid-template-columns: 1fr auto;
+  }
+
+  .guest {
+    align-items: flex-end;
+    align-self: flex-end;
+  }
+}