fix: make incomplete steps in accordion look disabled

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx

@@ -45,12 +45,12 @@ export default async function SummaryPage({
     user && availability.memberRate
       ? {
           local: {
-            price: availability.memberRate?.localPrice.pricePerStay,
-            currency: availability.memberRate?.localPrice.currency,
+            price: availability.memberRate.localPrice.pricePerStay,
+            currency: availability.memberRate.localPrice.currency,
           },
           euro: {
-            price: availability.memberRate?.requestedPrice?.pricePerStay,
-            currency: availability.memberRate?.requestedPrice?.currency,
+            price: availability.memberRate.requestedPrice.pricePerStay,
+            currency: availability.memberRate.requestedPrice.currency,
           },
         }
       : {
@@ -59,8 +59,8 @@ export default async function SummaryPage({
             currency: availability.publicRate?.localPrice.currency,
           },
           euro: {
-            price: availability.publicRate?.requestedPrice?.pricePerStay,
-            currency: availability.publicRate?.requestedPrice?.currency,
+            price: availability.publicRate?.requestedPrice.pricePerStay,
+            currency: availability.publicRate?.requestedPrice.currency,
           },
         }
 

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css

@@ -8,30 +8,32 @@
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.enter-details-layout__content {
+.enter-details-layout__container {
   display: grid;
   gap: var(--Spacing-x3) var(--Spacing-x9);
-  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
   /* simulates padding on viewport smaller than --max-width-navigation */
-  width: min(
-    calc(100dvw - (var(--Spacing-x2) * 2)),
-    var(--max-width-navigation)
-  );
+}
+
+.enter-details-layout__content {
+  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
 }
 
 .enter-details-layout__summaryContainer {
-  position: fixed;
-  z-index: 1;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
 @media screen and (min-width: 1367px) {
-  .enter-details-layout__content {
+  .enter-details-layout__container {
     grid-template-columns: 1fr 340px;
     grid-template-rows: auto 1fr;
     margin: var(--Spacing-x5) auto 0;
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
   }
 
   .enter-details-layout__summaryContainer {

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx

@@ -28,9 +28,11 @@ export default async function StepLayout({
     <EnterDetailsProvider step={params.step} isMember={!!user}>
       <main className="enter-details-layout__layout">
         {hotelHeader}
-        <div className={"enter-details-layout__content"}>
-          {children}
-          <aside className={"enter-details-layout__summaryContainer"}>{summary}</aside>
+        <div className={"enter-details-layout__container"}>
+          <div className={"enter-details-layout__content"}>{children}</div>
+          <aside className={"enter-details-layout__summaryContainer"}>
+            {summary}
+          </aside>
         </div>
       </main>
     </EnterDetailsProvider>

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -61,6 +61,9 @@ export default function SectionAccordion({
   function onModify() {
     navigate(step)
   }
+
+  const textColor =
+    isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
     <section className={styles.wrapper} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
@@ -78,15 +81,11 @@ export default function SectionAccordion({
               asChild
               textTransform="uppercase"
               type="label"
-              color="uiTextHighContrast"
+              color={textColor}
             >
               <h2>{header}</h2>
             </Footnote>
-            <Subtitle
-              className={styles.selection}
-              type="two"
-              color="uiTextHighContrast"
-            >
+            <Subtitle className={styles.selection} type="two" color={textColor}>
               {title}
             </Subtitle>
 

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx

@@ -81,7 +81,7 @@ export default function PriceList({
               </Body>
             </div>
           ) : (
-            <Subtitle type="two" color="disabled">
+            <Subtitle type="two" color="baseTextDisabled">
               {intl.formatMessage({ id: "n/a" })}
             </Subtitle>
           )}

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -76,3 +76,7 @@
 .white {
   color: var(--Main-Grey-White);
 }
+
+.baseTextDisabled {
+  color: var(--Base-Text-Disabled);
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -18,6 +18,7 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
       white: styles.white,
+      baseTextDisabled: styles.baseTextDisabled,
     },
     textAlign: {
       center: styles.center,

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -79,6 +79,6 @@
   color: var(--Scandic-Brand-Scandic-Red);
 }
 
-.disabled {
+.baseTextDisabled {
   color: var(--Base-Text-Disabled);
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -7,7 +7,7 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
-      disabled: styles.disabled,
+      baseTextDisabled: styles.baseTextDisabled,
       pale: styles.pale,
       baseTextMediumContrast: styles.baseTextMediumContrast,
       uiTextHighContrast: styles.uiTextHighContrast,

server/routers/hotels/output.ts

@@ -549,7 +549,7 @@ export const productTypePriceSchema = z.object({
   rateCode: z.string(),
   rateType: z.string().optional(),
   localPrice: priceSchema,
-  requestedPrice: priceSchema.optional(),
+  requestedPrice: priceSchema,
 })
 
 const productSchema = z.object({
@@ -671,7 +671,7 @@ export const apiCitiesByCountrySchema = z.object({
 })
 
 export interface CitiesByCountry
-  extends z.output<typeof apiCitiesByCountrySchema> { }
+  extends z.output<typeof apiCitiesByCountrySchema> {}
 export type CitiesGroupedByCountry = Record<string, CitiesByCountry["data"]>
 
 export const apiCountriesSchema = z.object({
@@ -701,7 +701,7 @@ export const apiCountriesSchema = z.object({
     }),
 })
 
-export interface Countries extends z.output<typeof apiCountriesSchema> { }
+export interface Countries extends z.output<typeof apiCountriesSchema> {}
 
 export const apiLocationCitySchema = z.object({
   attributes: z.object({