Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Feat/SW-1737 design mystay multiroom * feat(SW-1737) Fixed member view of guest details * feat(SW-1737) fix merge issues * feat(SW-1737) Fixed price details * feat(SW-1737) removed unused imports * feat(SW-1737) removed true as statement * feat(SW-1737) updated store handling * feat(SW-1737) fixed bug showing double numbers * feat(SW-1737) small design fixed * feat(SW-1737) fixed rebase errors * feat(SW-1737) fixed create booking error with dates * feat(SW-1737) fixed view multiroom as singleroom * feat(SW-1737) fixes for multiroom * feat(SW-1737) fixed bookingsummary * feat(SW-1737) dont hide modify dates * feat(SW-1737) updated breakfast to handle number * feat(SW-1737) Added red color if member rate * feat(SW-1737) fix PR comments * feat(SW-1737) updated member tiers svg * feat(SW-1737) updated how to handle paymentMethodDescription * feat(SW-1737) fixes after testing mystay * feat(SW-1737) updated Room type to just use whats used * feat(SW-1737) fixed access * feat(SW-1737) refactor my stay after PR comments * feat(SW-1737) fix roomNumber translation * feat(SW-1737) removed log Approved-by: Arvid Norlin
2025-03-24 09:30:10 +00:00
parent c5e294c7ea
commit 74c5b47319
117 changed files with 5899 additions and 1901 deletions
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/bookedRoomSidePeek.module.css
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/bookedRoomSidePeek.module.css
@@ -0,0 +1,190 @@
+.button {
+  margin-left: auto;
+  padding: 0 0 0 var(--Spacing-x-half);
+  text-decoration: none;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  position: relative;
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.roomHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.chip {
+  background-color: var(--Scandic-Peach-30);
+  color: var(--Scandic-Red-100);
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  height: fit-content;
+}
+
+.reference {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.imageContainer {
+  position: relative;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+}
+
+.imageContainer img {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
+.roomDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+}
+
+.row:last-child {
+  border-bottom: none;
+}
+
+.rowTitle {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+}
+
+.rowTitle svg {
+  width: 24px;
+  height: 24px;
+}
+
+.rowContent {
+  padding-left: var(--Spacing-x4);
+}
+
+.bookingInformation {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  background-color: var(--Scandic-Beige-10);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.priceDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) 0;
+  width: calc(100% - var(--Spacing-x4));
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.bookingCode {
+  color: var(--UI-Semantic-Information);
+}
+
+.facilityList {
+  column-count: 2;
+  column-gap: var(--Spacing-x2);
+}
+
+.facilityList li {
+  display: flex !important; /* Overrides the display none from grids.stackable on Hotel Page */
+  gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
+}
+
+.bedOptions li {
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
+}
+
+.facilityList li svg {
+  flex-shrink: 0;
+}
+
+.noIcon {
+  margin-left: var(--Spacing-x4);
+}
+
+.buttonContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+.roomDetailsContainer {
+  display: none;
+}
+
+.roomDetailsContainer.open {
+  display: block;
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+  padding: var(--Spacing-x3);
+  gap: var(--Spacing-x3);
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.text {
+  color: var(--Scandic-Grey-100);
+}
+
+.listText {
+  color: var(--Scandic-Grey-80);
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block;
+}
+.cancellationNumber {
+  text-decoration: line-through;
+}