Merged in feat/loy-291-new-claim-points-flow (pull request #3508)

feat(LOY-291): New claim points flow for logged in users * wip new flow * More wip * More wip * Wip styling * wip with a mutation * Actually fetch booking data * More styling wip * Fix toast duration * fix loading a11y maybe * More stuff * Add feature flag * Add invalid state * Clean up * Add fields for missing user info * Restructure files * Add todos * Disable warning * Fix icon and border radius Approved-by: Emma Zettervall Approved-by: Matilda Landström
2026-02-03 13:27:24 +00:00
parent 310ad7bc7f
commit c2cf6b03a7
13 changed files with 775 additions and 1 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
@@ -6,3 +6,100 @@
  gap: var(--Space-x2);
  white-space: nowrap;
 }
+
+.dialog {
+  max-width: 560px;
+}
+
+.introWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.sectionCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+  padding: var(--Space-x2);
+  background-color: var(--Surface-Primary-OnSurface-Default);
+  border-radius: var(--Corner-Radius-md);
+}
+
+.sectionInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.spinner {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bookingInputDescription {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.formInputs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.formSubmit {
+  margin-top: auto;
+}
+
+.divider {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  & > span {
+    position: relative;
+    padding: 0 var(--Space-x2);
+    background-color: white;
+  }
+
+  &::before {
+    position: absolute;
+    bottom: calc(50% - 1px);
+    content: "";
+    display: block;
+    height: 1px;
+    width: 100%;
+    background-color: var(--Border-Default);
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.invalidWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}