Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details Approved-by: Anton Gunnarsson
2025-09-11 07:16:24 +00:00
parent 15711cb3a4
commit 7dee6d5083
238 changed files with 1656 additions and 1602 deletions
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
@@ -0,0 +1,122 @@
+.summary {
+  border-radius: var(--Corner-radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+  padding: var(--Space-x3);
+  height: 100%;
+}
+
+.header {
+  display: grid;
+  grid-template-areas: "title button" "date date";
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.title {
+  grid-area: title;
+}
+
+.chevronIcon {
+  grid-area: button;
+}
+
+.date {
+  align-items: center;
+  display: flex;
+  gap: var(--Space-x1);
+  justify-content: flex-start;
+  grid-area: date;
+}
+
+.link {
+  margin-top: var(--Space-x1);
+}
+
+.addOns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  overflow-y: auto;
+}
+
+.rateDetailsPopover {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+  max-width: 360px;
+}
+
+.entry {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+}
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+  align-content: start;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through !important;
+  color: var(--Text-Secondary);
+}
+
+.approxPrice {
+  color: var(--Text-Secondary);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.bottomDivider {
+  display: none;
+}
+
+.modalContent {
+  width: 560px;
+}
+
+.terms {
+  margin-top: var(--Space-x3);
+  margin-bottom: var(--Space-x3);
+}
+.termsText:nth-child(n) {
+  display: flex;
+  margin-bottom: var(--Space-x1);
+}
+.terms .termsIcon {
+  margin-right: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .bottomDivider {
+    display: block;
+  }
+
+  .header {
+    display: block;
+  }
+
+  .summary .header .chevronIcon {
+    display: none;
+  }
+}