Merge branch 'develop' into feature/tracking

2024-10-10 08:10:11 +02:00
parent 2c99763997 491253d866
commit bc07420057
43 changed files with 749 additions and 478 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
@@ -5,6 +5,8 @@
  gap: var(--Spacing-x3);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }

 .content {
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -5,4 +5,6 @@
  gap: var(--Spacing-x3);
  grid-template-rows: auto 1fr;
  position: relative;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
@@ -0,0 +1,20 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x3) var(--Spacing-x9);
+  grid-template-columns: 1fr 340px;
+  grid-template-rows: auto 1fr;
+  margin: var(--Spacing-x5) auto 0;
+  max-width: var(--max-width-navigation);
+  padding: var(--Spacing-x6) var(--Spacing-x2) 0;
+}
+
+.summary {
+  align-self: flex-start;
+  grid-column: 2 / 3;
+  grid-row: 1/-1;
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation"
+
+import { serverClient } from "@/lib/trpc/server"
+
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+import Summary from "@/components/HotelReservation/SelectRate/Summary"
+
+import styles from "./layout.module.css"
+
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+export default async function StepLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const hotel = await serverClient().hotel.hotelData.get({
+    hotelId: "811",
+    language: params.lang,
+  })
+
+  if (!hotel?.data) {
+    redirect(`/${params.lang}`)
+  }
+
+  return (
+    <main className={styles.layout}>
+      <HotelSelectionHeader hotel={hotel.data.attributes} />
+      <div className={styles.content}>
+        <SelectedRoom />
+        {children}
+        <aside className={styles.summary}>
+          <Summary />
+        </aside>
+      </div>
+    </main>
+  )
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
@@ -1,30 +0,0 @@
-.page {
-  min-height: 100dvh;
-  padding-top: var(--Spacing-x6);
-  padding-left: var(--Spacing-x2);
-  padding-right: var(--Spacing-x2);
-  background-color: var(--Scandic-Brand-Warm-White);
-}
-
-.content {
-  max-width: 1134px;
-  margin-top: var(--Spacing-x5);
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-  gap: var(--Spacing-x7);
-}
-
-.section {
-  flex-grow: 1;
-}
-
-.summary {
-  max-width: 340px;
-}
-
-.form {
-  display: grid;
-  gap: var(--Spacing-x2);
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -9,15 +9,11 @@ import { trpc } from "@/lib/trpc/client"
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
-import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
-import Summary from "@/components/HotelReservation/SelectRate/Summary"
 import LoadingSpinner from "@/components/LoadingSpinner"

-import styles from "./page.module.css"
-
-import { LangParams, PageArgs } from "@/types/params"
+import type { LangParams, PageArgs } from "@/types/params"

 enum StepEnum {
  selectBed = "select-bed",
@@ -75,51 +71,43 @@ export default function StepPage({
  }

  return (
-    <main className={styles.page}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-      <div className={styles.content}>
-        <section className={styles.section}>
-          <SectionAccordion
-            header="Select bed"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.selectBed}
-            label={intl.formatMessage({ id: "Request bedtype" })}
-            path="/select-bed"
-          >
-            <BedType />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Food options"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.breakfast}
-            label={intl.formatMessage({ id: "Select breakfast options" })}
-            path="/breakfast"
-          >
-            <Breakfast />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Details"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.details}
-            label={intl.formatMessage({ id: "Enter your details" })}
-            path="/details"
-          >
-            <Details user={null} />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Payment"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.payment}
-            label={intl.formatMessage({ id: "Select payment method" })}
-            path="/hotelreservation/select-bed"
-          >
-            <Payment hotel={hotel.data.attributes} />
-          </SectionAccordion>
-        </section>
-        <aside className={styles.summary}>
-          <Summary />
-        </aside>
-      </div>
-    </main>
+    <section>
+      <SectionAccordion
+        header="Select bed"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.selectBed}
+        label={intl.formatMessage({ id: "Request bedtype" })}
+        path="/select-bed"
+      >
+        <BedType />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Food options"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.breakfast}
+        label={intl.formatMessage({ id: "Select breakfast options" })}
+        path="/breakfast"
+      >
+        <Breakfast />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Details"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.details}
+        label={intl.formatMessage({ id: "Enter your details" })}
+        path="/details"
+      >
+        <Details user={null} />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Payment"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.payment}
+        label={intl.formatMessage({ id: "Select payment method" })}
+        path="/hotelreservation/select-bed"
+      >
+        <Payment hotel={hotel.data.attributes} />
+      </SectionAccordion>
+    </section>
  )
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
@@ -1,4 +1,6 @@
 .layout {
  min-height: 100dvh;
+  max-width: var(--max-width);
+  margin: 0 auto;
  background-color: var(--Base-Background-Primary-Normal);
 }
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -44,7 +44,7 @@ export default async function AmenitiesList({
        className={styles.showAllAmenities}
      >
        {intl.formatMessage({ id: "Show all amenities" })}
-        <ChevronRightIcon />
+        <ChevronRightIcon color="burgundy" />
      </Link>
    </section>
  )
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -1,5 +1,6 @@
 import { about } from "@/constants/routes/hotelPageParams"

+import { ChevronRightIcon } from "@/components/Icons"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Link from "@/components/TempDesignSystem/Link"
@@ -76,7 +77,7 @@ export default async function IntroSection({
          scroll={false}
        >
          {intl.formatMessage({ id: "Read more about the hotel" })}
-          <ArrowRight color="burgundy" />
+          <ChevronRightIcon color="burgundy" />
        </Link>
      </div>
    </section>
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -62,6 +62,7 @@ export function RoomCard({
            textAlign="center"
            type="one"
            color="black"
+            className={styles.title}
          >
            {title}
          </Subtitle>
--- a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
@@ -45,6 +45,15 @@
  gap: var(--Spacing-x1);
 }

+.title {
+  display: flex;
+  align-items: center;
+}
+
+.title:first-child {
+  height: 2em;
+}
+
 .imageWrapper {
  position: relative;
  background-color: transparent;
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -1,7 +1,5 @@
 .pageContainer {
  display: grid;
-  max-width: var(--max-width);
-  margin: 0 auto;
  grid-template-areas:
    "hotelImages"
    "tabNavigation"
@@ -62,6 +60,7 @@
    ); /* Full height without the header + booking widget */
    max-height: 935px; /* Fixed max according to figma */
    overflow: hidden;
+    width: 100%;
  }

  .pageContainer > nav {
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -9,6 +9,8 @@
  width: 100%;
  z-index: 99999;
  height: var(--current-mobile-site-header-height);
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
 }

 .container {
--- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { EditIcon, ImageIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoom.module.css"
+
+export default function SelectedRoom() {
+  const intl = useIntl()
+  return (
+    <article className={styles.container}>
+      <div className={styles.tempImage}>
+        <ImageIcon
+          color="baseButtonTertiaryOnFillNormal"
+          height={60}
+          width={60}
+        />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContainer}>
+          <Footnote
+            className={styles.label}
+            color="uiTextPlaceholder"
+            textTransform="uppercase"
+          >
+            {intl.formatMessage({ id: "Your room" })}
+          </Footnote>
+          <div className={styles.text}>
+            {/**
+             * [TEMP]
+             * No translation on Subtitles as they will be derived
+             * from Room selection.
+             */}
+            <Subtitle
+              className={styles.room}
+              color="uiTextHighContrast"
+              type="two"
+            >
+              Cozy cabin
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Free rebooking
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Pay now
+            </Subtitle>
+          </div>
+        </div>
+        <Button
+          asChild
+          intent="tertiary"
+          size="small"
+          theme="base"
+          variant="icon"
+        >
+          <Link href="#">
+            <EditIcon color="baseButtonTertiaryOnFillNormal" />
+            {intl.formatMessage({ id: "Modify" })}
+          </Link>
+        </Button>
+      </div>
+    </article>
+  )
+}
--- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -0,0 +1,51 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  grid-template-columns: 144px 1fr;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2)
+    var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgray;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  height: auto;
+  justify-content: center;
+  min-height: 80px;
+}
+
+.content {
+  align-items: center;
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-columns: 1fr auto;
+}
+
+.textContainer {
+  display: grid;
+}
+
+.label {
+  grid-column: 1 / -1;
+}
+
+.text {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+p.invertFontWeight {
+  font-weight: 400;
+}
+
+.invertFontWeight:not(:last-of-type)::after,
+.room::after {
+  color: var(--UI-Text-Medium-contrast);
+  content: "∙";
+  padding-left: var(--Spacing-x1);
+}
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -9,7 +9,7 @@
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Medium);
-  width: 307px;
+  width: 100%;
 }

 .imageContainer {
@@ -72,7 +72,6 @@
      "image hotel"
      "image prices";
    overflow: hidden;
-    width: 1050px;
    padding: 0;
  }

--- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
+++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
@@ -1,10 +1,13 @@
 .hotelSelectionHeader {
-  display: flex;
-  flex-direction: column;
  background-color: var(--Base-Surface-Subtle-Normal);
  padding: var(--Spacing-x3) var(--Spacing-x2);
-  justify-content: center;
+}
+
+.hotelSelectionHeaderWrapper {
+  display: flex;
+  flex-direction: column;
  gap: var(--Spacing-x3);
+  justify-content: center;
 }

 .titleContainer {
@@ -33,9 +36,15 @@

@media (min-width: 768px) {
  .hotelSelectionHeader {
-    flex-direction: row;
    padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelSelectionHeaderWrapper {
+    flex-direction: row;
    gap: var(--Spacing-x6);
+    max-width: var(--max-width-navigation);
+    margin: 0 auto;
+    width: 100%;
  }

  .titleContainer > h1 {
--- a/components/HotelReservation/HotelSelectionHeader/index.tsx
+++ b/components/HotelReservation/HotelSelectionHeader/index.tsx
@@ -19,35 +19,35 @@ export default function HotelSelectionHeader({

  return (
    <header className={styles.hotelSelectionHeader}>
-      <div className={styles.titleContainer}>
-        <Title as="h3" level="h1">
-          {hotel.name}
-        </Title>
-        <address className={styles.address}>
-          <Caption color="textMediumContrast">
-            {hotel.address.streetAddress}, {hotel.address.city}
-          </Caption>
-          <div>
-            <Divider variant="vertical" color="subtle" />
-          </div>
-          <Caption color="textMediumContrast">
-            {intl.formatMessage(
-              {
-                id: "Distance to city centre",
-              },
-              { number: hotel.location.distanceToCentre }
-            )}
-          </Caption>
-        </address>
-      </div>
-      <div className={styles.dividerContainer}>
-        <Divider variant="vertical" color="subtle" />
-      </div>
-      <div className={styles.descriptionContainer}>
-        <Body color="textHighContrast">
-          {hotel.hotelContent.texts.descriptions.short}
-        </Body>
-        <HotelDetailSidePeek />
+      <div className={styles.hotelSelectionHeaderWrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="textHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+          <HotelDetailSidePeek />
+        </div>
      </div>
    </header>
  )
--- a/components/HotelReservation/SelectRate/Payment/index.tsx
+++ b/components/HotelReservation/SelectRate/Payment/index.tsx
@@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) {
              name="payment-method"
              id="card"
              value="card"
-              checked={selectedPaymentMethod === "card"}
+              defaultChecked={selectedPaymentMethod === "card"}
            />
            <label htmlFor="card">card</label>
          </button>
@@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) {
                  name="payment-method"
                  id={paymentOption}
                  value={paymentOption}
-                  checked={selectedPaymentMethod === paymentOption}
+                  defaultChecked={selectedPaymentMethod === paymentOption}
                />
                <label htmlFor={paymentOption}>{paymentOption}</label>
              </button>
--- a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
@@ -40,7 +40,7 @@
 .iconWrapper {
  position: relative;
  top: var(--Spacing-x1);
-  z-index: 10;
+  z-index: 2;
 }

 .circle {
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -66,3 +66,8 @@
 .blue * {
  fill: var(--UI-Input-Controls-Fill-Selected);
 }
+
+.baseButtonTertiaryOnFillNormal,
+.baseButtonTertiaryOnFillNormal * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
+}
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -5,19 +5,20 @@ import styles from "./icon.module.css"
 const config = {
  variants: {
    color: {
+      baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
      baseIconLowContrast: styles.baseIconLowContrast,
      black: styles.black,
+      blue: styles.blue,
      burgundy: styles.burgundy,
+      green: styles.green,
      grey80: styles.grey80,
      pale: styles.pale,
      peach80: styles.peach80,
      primaryLightOnSurfaceAccent: styles.plosa,
      red: styles.red,
-      green: styles.green,
      white: styles.white,
      uiTextHighContrast: styles.uiTextHighContrast,
      uiTextMediumContrast: styles.uiTextMediumContrast,
-      blue: styles.blue,
    },
  },
  defaultVariants: {
--- a/components/Lightbox/FullView.tsx
+++ b/components/Lightbox/FullView.tsx
@@ -49,10 +49,10 @@ export default function FullView({
            className={styles.fullViewImage}
          >
            <Image
-              src={image.url}
              alt={image.alt}
-              layout="fill"
-              objectFit="cover"
+              fill
+              src={image.url}
+              style={{ objectFit: "cover" }}
            />

            <div className={styles.fullViewFooter}>
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -197,6 +197,7 @@
  .desktopGallery {
    display: grid;
    grid-template-rows: 1.71875rem 1fr 7.8125rem;
+    row-gap: var(--Spacing-x-one-and-half);
    background-color: var(--Base-Background-Primary-Normal);
    height: 100%;
    position: relative;
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -64,10 +64,10 @@ a.default {
  justify-content: center;
 }

-.icon {
+.btn.icon:is(.small, .medium, .large) {
  align-items: center;
  display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Spacing-x1);
  justify-content: center;
 }

@@ -76,7 +76,8 @@ a.default {
  font-size: var(--typography-Caption-Bold-fontSize);
  line-height: var(--typography-Caption-Bold-lineHeight);
  gap: var(--Spacing-x-quarter);
-  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }

 .btn.small.secondary {
@@ -85,7 +86,8 @@ a.default {

 .btn.medium {
  gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }

 .medium.secondary {
@@ -94,7 +96,8 @@ a.default {

 .btn.large {
  gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
+  /* Special case padding to adjust the missing border */
 }

 .large.secondary {
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -10,7 +10,7 @@
    0.3vw + 15px,
    var(--typography-Subtitle-1-Desktop-fontSize)
  );
-  font-weight: 600;
+  font-weight: 500;
  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
  line-height: var(--typography-Subtitle-1-lineHeight);
 }
@@ -22,7 +22,7 @@
    0.3vw + 15px,
    var(--typography-Subtitle-2-Desktop-fontSize)
  );
-  font-weight: 600;
+  font-weight: 500;
  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
  line-height: var(--typography-Subtitle-2-lineHeight);
 }
@@ -62,3 +62,7 @@
 .uiTextHighContrast {
  color: var(--UI-Text-High-contrast);
 }
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -9,6 +9,7 @@ const config = {
      burgundy: styles.burgundy,
      pale: styles.pale,
      uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
    },
    textAlign: {
      center: styles.center,
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -13,13 +13,12 @@
  "Already a friend?": "Allerede en ven?",
  "Amenities": "Faciliteter",
  "Amusement park": "Forlystelsespark",
-  "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
  "An error occurred trying to manage your preferences, please try again later.": "Der opstod en fejl under forsøget på at administrere dine præferencer. Prøv venligst igen senere.",
+  "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
  "An error occurred when trying to update profile.": "Der opstod en fejl under forsøg på at opdatere profilen.",
  "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.",
  "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?",
  "Arrival date": "Ankomstdato",
-  "as of today": "pr. dags dato",
  "As our": "Som vores {level}",
  "As our Close Friend": "Som vores nære ven",
  "At latest": "Senest",
@@ -35,9 +34,9 @@
  "Breakfast buffet": "Morgenbuffet",
  "Breakfast excluded": "Morgenmad ikke inkluderet",
  "Breakfast included": "Morgenmad inkluderet",
+  "Breakfast restaurant": "Breakfast restaurant",
  "Bus terminal": "Busstation",
  "Business": "Forretning",
-  "Breakfast restaurant": "Breakfast restaurant",
  "Cancel": "Afbestille",
  "Check in": "Check ind",
  "Check out": "Check ud",
@@ -83,9 +82,9 @@
  "Edit profile": "Rediger profil",
  "Email": "E-mail",
  "Email address": "E-mailadresse",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Enter destination or hotel": "Indtast destination eller hotel",
  "Enter your details": "Indtast dine oplysninger",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Events that make an impression": "Events that make an impression",
  "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
  "Explore nearby": "Udforsk i nærheden",
@@ -121,7 +120,6 @@
  "Join Scandic Friends": "Tilmeld dig Scandic Friends",
  "Join at no cost": "Tilmeld dig uden omkostninger",
  "King bed": "Kingsize-seng",
-  "km to city center": "km til byens centrum",
  "Language": "Sprog",
  "Lastname": "Efternavn",
  "Latest searches": "Seneste søgninger",
@@ -209,11 +207,11 @@
  "Read more about the hotel": "Læs mere om hotellet",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
+  "Request bedtype": "Anmod om sengetype",
  "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Gentag den nye adgangskode",
-  "Request bedtype": "Anmod om sengetype",
  "Room & Terms": "Værelse & Vilkår",
  "Room facilities": "Værelsesfaciliteter",
  "Rooms": "Værelser",
@@ -299,11 +297,12 @@
  "Your details": "Dine oplysninger",
  "Your level": "Dit niveau",
  "Your points to spend": "Dine brugbare point",
+  "Your room": "Dit værelse",
  "Zip code": "Postnummer",
  "Zoo": "Zoo",
  "Zoom in": "Zoom ind",
  "Zoom out": "Zoom ud",
-  "as of today": "fra idag",
+  "as of today": "pr. dags dato",
  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
  "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
  "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -207,11 +207,11 @@
  "Read more about the hotel": "Lesen Sie mehr über das Hotel",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen",
+  "Request bedtype": "Bettentyp anfragen",
  "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Neues Passwort erneut eingeben",
-  "Request bedtype": "Bettentyp anfragen",
  "Room & Terms": "Zimmer & Bedingungen",
  "Room facilities": "Zimmerausstattung",
  "Rooms": "Räume",
@@ -297,6 +297,7 @@
  "Your details": "Ihre Angaben",
  "Your level": "Dein level",
  "Your points to spend": "Meine Punkte",
+  "Your room": "Ihr Zimmer",
  "Zip code": "PLZ",
  "Zoo": "Zoo",
  "Zoom in": "Vergrößern",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -120,7 +120,6 @@
  "Join Scandic Friends": "Join Scandic Friends",
  "Join at no cost": "Join at no cost",
  "King bed": "King bed",
-  "km to city center": "km to city center",
  "Language": "Language",
  "Lastname": "Lastname",
  "Latest searches": "Latest searches",
@@ -208,6 +207,7 @@
  "Read more about the hotel": "Read more about the hotel",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Remove card from member profile",
+  "Request bedtype": "Request bedtype",
  "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
@@ -226,10 +226,12 @@
  "See room details": "See room details",
  "See rooms": "See rooms",
  "Select a country": "Select a country",
+  "Select breakfast options": "Select breakfast options",
  "Select country of residence": "Select country of residence",
  "Select date of birth": "Select date of birth",
  "Select dates": "Select dates",
  "Select language": "Select language",
+  "Select payment method": "Select payment method",
  "Select your language": "Select your language",
  "Shopping": "Shopping",
  "Shopping & Dining": "Shopping & Dining",
@@ -295,6 +297,7 @@
  "Your details": "Your details",
  "Your level": "Your level",
  "Your points to spend": "Your points to spend",
+  "Your room": "Your room",
  "Zip code": "Zip code",
  "Zoo": "Zoo",
  "Zoom in": "Zoom in",
@@ -315,9 +318,6 @@
  "number": "number",
  "or": "or",
  "points": "Points",
-  "Request bedtype": "Request bedtype",
-  "Select breakfast options": "Select breakfast options",
-  "Select payment method": "Select payment method",
  "special character": "special character",
  "spendable points expiring by": "{points} spendable points expiring by {date}",
  "to": "to",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -13,8 +13,8 @@
  "Already a friend?": "Oletko jo ystävä?",
  "Amenities": "Mukavuudet",
  "Amusement park": "Huvipuisto",
-  "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
  "An error occurred trying to manage your preferences, please try again later.": "Asetusten hallinnassa tapahtui virhe. Yritä myöhemmin uudelleen.",
+  "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
  "An error occurred when trying to update profile.": "Profiilia päivitettäessä tapahtui virhe.",
  "Any changes you've made will be lost.": "Kaikki tekemäsi muutokset menetetään.",
  "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Haluatko varmasti poistaa kortin, joka päättyy numeroon {lastFourDigits} jäsenprofiilistasi?",
@@ -34,9 +34,9 @@
  "Breakfast buffet": "Aamiaisbuffet",
  "Breakfast excluded": "Aamiainen ei sisälly",
  "Breakfast included": "Aamiainen sisältyy",
+  "Breakfast restaurant": "Breakfast restaurant",
  "Bus terminal": "Bussiasema",
  "Business": "Business",
-  "Breakfast restaurant": "Breakfast restaurant",
  "Cancel": "Peruuttaa",
  "Check in": "Sisäänkirjautuminen",
  "Check out": "Uloskirjautuminen",
@@ -82,9 +82,9 @@
  "Edit profile": "Muokkaa profiilia",
  "Email": "Sähköposti",
  "Email address": "Sähköpostiosoite",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Enter destination or hotel": "Anna kohde tai hotelli",
  "Enter your details": "Anna tietosi",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Events that make an impression": "Events that make an impression",
  "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
  "Explore nearby": "Tutustu lähialueeseen",
@@ -120,7 +120,6 @@
  "Join Scandic Friends": "Liity jäseneksi",
  "Join at no cost": "Liity maksutta",
  "King bed": "King-vuode",
-  "km to city center": "km keskustaan",
  "Language": "Kieli",
  "Lastname": "Sukunimi",
  "Latest searches": "Viimeisimmät haut",
@@ -208,6 +207,7 @@
  "Read more about the hotel": "Lue lisää hotellista",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Poista kortti jäsenprofiilista",
+  "Request bedtype": "Pyydä sänkytyyppiä",
  "Restaurant": "{count, plural, one {#Ravintola} other {#Restaurants}}",
  "Restaurant & Bar": "Ravintola & Baari",
  "Restaurants & Bars": "Restaurants & Bars",
@@ -217,7 +217,6 @@
  "Rooms": "Huoneet",
  "Rooms & Guests": "Huoneet & Vieraat",
  "Rooms & Guestss": "Huoneet & Vieraat",
-  "Request bedtype": "Pyydä sänkytyyppiä",
  "Sauna and gym": "Sauna and gym",
  "Save": "Tallenna",
  "Scandic Friends Mastercard": "Scandic Friends Mastercard",
@@ -299,6 +298,7 @@
  "Your details": "Tietosi",
  "Your level": "Tasosi",
  "Your points to spend": "Käytettävissä olevat pisteesi",
+  "Your room": "Sinun huoneesi",
  "Zip code": "Postinumero",
  "Zoo": "Eläintarha",
  "Zoom in": "Lähennä",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -13,13 +13,12 @@
  "Already a friend?": "Allerede Friend?",
  "Amenities": "Fasiliteter",
  "Amusement park": "Tivoli",
-  "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
  "An error occurred trying to manage your preferences, please try again later.": "Det oppstod en feil under forsøket på å administrere innstillingene dine. Prøv igjen senere.",
+  "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
  "An error occurred when trying to update profile.": "Det oppstod en feil under forsøk på å oppdatere profilen.",
  "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.",
  "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
  "Arrival date": "Ankomstdato",
-  "as of today": "per i dag",
  "As our": "Som vår {level}",
  "As our Close Friend": "Som vår nære venn",
  "At latest": "Senest",
@@ -82,16 +81,16 @@
  "Edit profile": "Rediger profil",
  "Email": "E-post",
  "Email address": "E-postadresse",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Enter destination or hotel": "Skriv inn destinasjon eller hotell",
  "Enter your details": "Skriv inn detaljene dine",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Events that make an impression": "Events that make an impression",
  "Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
  "Explore nearby": "Utforsk i nærheten",
  "Extras to your booking": "Tilvalg til bestillingen din",
+  "FAQ": "FAQ",
  "Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.",
  "Fair": "Messe",
-  "FAQ": "FAQ",
  "Find booking": "Finn booking",
  "Find hotels": "Finn hotell",
  "Firstname": "Fornavn",
@@ -120,7 +119,6 @@
  "Join Scandic Friends": "Bli med i Scandic Friends",
  "Join at no cost": "Bli med uten kostnad",
  "King bed": "King-size-seng",
-  "km to city center": "km til sentrum",
  "Language": "Språk",
  "Lastname": "Etternavn",
  "Latest searches": "Siste søk",
@@ -208,11 +206,11 @@
  "Read more about the hotel": "Les mer om hotellet",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
+  "Request bedtype": "Be om sengetype",
  "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
  "Restaurant & Bar": "Restaurant & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Skriv inn nytt passord på nytt",
-  "Request bedtype": "Be om sengetype",
  "Room & Terms": "Rom & Vilkår",
  "Room facilities": "Romfasiliteter",
  "Rooms": "Rom",
@@ -298,11 +296,12 @@
  "Your details": "Dine detaljer",
  "Your level": "Ditt nivå",
  "Your points to spend": "Dine brukbare poeng",
+  "Your room": "Rommet ditt",
  "Zip code": "Post kode",
  "Zoo": "Dyrehage",
  "Zoom in": "Zoom inn",
  "Zoom out": "Zoom ut",
-  "as of today": "per idag",
+  "as of today": "per i dag",
  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
  "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
  "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -13,13 +13,12 @@
  "Already a friend?": "Är du redan en vän?",
  "Amenities": "Bekvämligheter",
  "Amusement park": "Nöjespark",
-  "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
  "An error occurred trying to manage your preferences, please try again later.": "Ett fel uppstod när du försökte hantera dina inställningar, försök igen senare.",
+  "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
  "An error occurred when trying to update profile.": "Ett fel uppstod när du försökte uppdatera profilen.",
  "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.",
  "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
  "Arrival date": "Ankomstdatum",
-  "as of today": "per idag",
  "As our": "Som vår {level}",
  "As our Close Friend": "Som vår nära vän",
  "At latest": "Senast",
@@ -35,9 +34,9 @@
  "Breakfast buffet": "Frukostbuffé",
  "Breakfast excluded": "Frukost ingår ej",
  "Breakfast included": "Frukost ingår",
+  "Breakfast restaurant": "Breakfast restaurant",
  "Bus terminal": "Bussterminal",
  "Business": "Business",
-  "Breakfast restaurant": "Breakfast restaurant",
  "Cancel": "Avbryt",
  "Check in": "Checka in",
  "Check out": "Checka ut",
@@ -83,9 +82,9 @@
  "Edit profile": "Redigera profil",
  "Email": "E-post",
  "Email address": "E-postadress",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Enter destination or hotel": "Ange destination eller hotell",
  "Enter your details": "Ange dina uppgifter",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
  "Events that make an impression": "Events that make an impression",
  "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
  "Explore nearby": "Utforska i närheten",
@@ -118,11 +117,9 @@
  "How it works": "Hur det fungerar",
  "Image gallery": "Bildgalleri",
  "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
-
  "Join Scandic Friends": "Gå med i Scandic Friends",
  "Join at no cost": "Gå med utan kostnad",
  "King bed": "King size-säng",
-  "km to city center": "km till stadens centrum",
  "Language": "Språk",
  "Lastname": "Efternamn",
  "Latest searches": "Senaste sökningarna",
@@ -210,11 +207,11 @@
  "Read more about the hotel": "Läs mer om hotellet",
  "Read more about wellness & exercise": "Read more about wellness & exercise",
  "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
+  "Request bedtype": "Request bedtype",
  "Restaurant": "{count, plural, one {#Restaurang} other {#Restauranger}}",
  "Restaurant & Bar": "Restaurang & Bar",
  "Restaurants & Bars": "Restaurants & Bars",
  "Retype new password": "Upprepa nytt lösenord",
-  "Request bedtype": "Request bedtype",
  "Room & Terms": "Rum & Villkor",
  "Room facilities": "Rumfaciliteter",
  "Rooms": "Rum",
@@ -266,7 +263,6 @@
  "Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
  "Type of bed": "Sängtyp",
  "Type of room": "Rumstyp",
-  "uppercase letter": "stor bokstav",
  "Use bonus cheque": "Använd bonuscheck",
  "Use code/voucher": "Använd kod/voucher",
  "User information": "Användarinformation",
@@ -301,6 +297,7 @@
  "Your details": "Dina uppgifter",
  "Your level": "Din nivå",
  "Your points to spend": "Dina spenderbara poäng",
+  "Your room": "Ditt rum",
  "Zip code": "Postnummer",
  "Zoo": "Djurpark",
  "Zoom in": "Zooma in",
--- a/server/routers/booking/mutation.ts
+++ b/server/routers/booking/mutation.ts
@@ -2,7 +2,7 @@ import { metrics } from "@opentelemetry/api"

 import * as api from "@/lib/api"
 import { getVerifiedUser } from "@/server/routers/user/query"
-import { bookingServiceProcedure, router } from "@/server/trpc"
+import { router, serviceProcedure } from "@/server/trpc"

 import { getMembership } from "@/utils/user"

@@ -36,7 +36,7 @@ async function getMembershipNumber(

 export const bookingMutationRouter = router({
  booking: router({
-    create: bookingServiceProcedure
+    create: serviceProcedure
      .input(createBookingInput)
      .mutation(async function ({ ctx, input }) {
        const { checkInDate, checkOutDate, hotelId } = input
--- a/server/routers/booking/query.ts
+++ b/server/routers/booking/query.ts
@@ -2,7 +2,7 @@ import { metrics } from "@opentelemetry/api"

 import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
-import { bookingServiceProcedure, router } from "@/server/trpc"
+import { router, serviceProcedure } from "@/server/trpc"

 import { getBookingStatusInput } from "./input"
 import { createBookingSchema } from "./output"
@@ -17,69 +17,70 @@ const getBookingStatusFailCounter = meter.createCounter(
 )

 export const bookingQueryRouter = router({
-  status: bookingServiceProcedure
-    .input(getBookingStatusInput)
-    .query(async function ({ ctx, input }) {
-      const { confirmationNumber } = input
-      getBookingStatusCounter.add(1, { confirmationNumber })
+  status: serviceProcedure.input(getBookingStatusInput).query(async function ({
+    ctx,
+    input,
+  }) {
+    const { confirmationNumber } = input
+    getBookingStatusCounter.add(1, { confirmationNumber })

-      const apiResponse = await api.get(
-        `${api.endpoints.v1.booking}/${confirmationNumber}/status`,
-        {
-          headers: {
-            Authorization: `Bearer ${ctx.serviceToken}`,
-          },
-        }
-      )
-
-      if (!apiResponse.ok) {
-        const responseMessage = await apiResponse.text()
-        getBookingStatusFailCounter.add(1, {
-          confirmationNumber,
-          error_type: "http_error",
-          error: responseMessage,
-        })
-        console.error(
-          "api.booking.status error",
-          JSON.stringify({
-            query: { confirmationNumber },
-            error: {
-              status: apiResponse.status,
-              statusText: apiResponse.statusText,
-              text: responseMessage,
-            },
-          })
-        )
-
-        throw serverErrorByStatus(apiResponse.status, apiResponse)
+    const apiResponse = await api.get(
+      `${api.endpoints.v1.booking}/${confirmationNumber}/status`,
+      {
+        headers: {
+          Authorization: `Bearer ${ctx.serviceToken}`,
+        },
      }
+    )

-      const apiJson = await apiResponse.json()
-      const verifiedData = createBookingSchema.safeParse(apiJson)
-      if (!verifiedData.success) {
-        getBookingStatusFailCounter.add(1, {
-          confirmationNumber,
-          error_type: "validation_error",
-          error: JSON.stringify(verifiedData.error),
-        })
-        console.error(
-          "api.booking.status validation error",
-          JSON.stringify({
-            query: { confirmationNumber },
-            error: verifiedData.error,
-          })
-        )
-        throw badRequestError()
-      }
-
-      getBookingStatusSuccessCounter.add(1, { confirmationNumber })
-      console.info(
-        "api.booking.status success",
+    if (!apiResponse.ok) {
+      const responseMessage = await apiResponse.text()
+      getBookingStatusFailCounter.add(1, {
+        confirmationNumber,
+        error_type: "http_error",
+        error: responseMessage,
+      })
+      console.error(
+        "api.booking.status error",
        JSON.stringify({
          query: { confirmationNumber },
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text: responseMessage,
+          },
        })
      )

-      return verifiedData.data
-    }),
+      throw serverErrorByStatus(apiResponse.status, apiResponse)
+    }
+
+    const apiJson = await apiResponse.json()
+    const verifiedData = createBookingSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      getBookingStatusFailCounter.add(1, {
+        confirmationNumber,
+        error_type: "validation_error",
+        error: JSON.stringify(verifiedData.error),
+      })
+      console.error(
+        "api.booking.status validation error",
+        JSON.stringify({
+          query: { confirmationNumber },
+          error: verifiedData.error,
+        })
+      )
+      throw badRequestError()
+    }
+
+    getBookingStatusSuccessCounter.add(1, { confirmationNumber })
+    console.info(
+      "api.booking.status success",
+      JSON.stringify({
+        query: { confirmationNumber },
+      })
+    )
+
+    return verifiedData.data
+  }),
 })
--- a/server/routers/contentstack/reward/query.ts
+++ b/server/routers/contentstack/reward/query.ts
@@ -1,14 +1,14 @@
 import { metrics } from "@opentelemetry/api"
+import { unstable_cache } from "next/cache"

 import { Lang } from "@/constants/languages"
 import * as api from "@/lib/api"
 import { GetRewards } from "@/lib/graphql/Query/Rewards.graphql"
 import { request } from "@/lib/graphql/request"
-import { Context } from "@/server/context"
 import { notFound } from "@/server/errors/trpc"
 import {
-  contentStackBaseWithProfileServiceProcedure,
  contentStackBaseWithProtectedProcedure,
+  contentStackBaseWithServiceProcedure,
  router,
 } from "@/server/trpc"

@@ -62,69 +62,71 @@ const getAllRewardFailCounter = meter.createCounter(
  "trpc.contentstack.reward.all-fail"
 )

+const ONE_HOUR = 60 * 60
+
 function getUniqueRewardIds(rewardIds: string[]) {
  const uniqueRewardIds = new Set(rewardIds)
  return Array.from(uniqueRewardIds)
 }

-async function getAllApiRewards(ctx: Context & { serviceToken: string }) {
-  const apiResponse = await api.get(api.endpoints.v1.tierRewards, {
-    cache: undefined, // override defaultOptions
-    headers: {
-      Authorization: `Bearer ${ctx.serviceToken}`,
-    },
-    // One hour. Since the service token is refreshed every hour, this is the longest cache we can have.
-    next: { revalidate: 60 * 60 },
-  })
-
-  if (!apiResponse.ok) {
-    const text = await apiResponse.text()
-    getCurrentRewardFailCounter.add(1, {
-      error_type: "http_error",
-      error: JSON.stringify({
-        status: apiResponse.status,
-        statusText: apiResponse.statusText,
-        text,
-      }),
+const getAllCachedApiRewards = unstable_cache(
+  async function (token) {
+    const apiResponse = await api.get(api.endpoints.v1.tierRewards, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
    })
-    console.error(
-      "api.rewards.tierRewards error ",
-      JSON.stringify({
-        error: {
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      getCurrentRewardFailCounter.add(1, {
+        error_type: "http_error",
+        error: JSON.stringify({
          status: apiResponse.status,
          statusText: apiResponse.statusText,
          text,
-        },
+        }),
      })
-    )
-  }
+      console.error(
+        "api.rewards.tierRewards error ",
+        JSON.stringify({
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          },
+        })
+      )
+    }

-  const data = await apiResponse.json()
-  const validatedApiTierRewards = validateApiTierRewardsSchema.safeParse(data)
+    const data = await apiResponse.json()
+    const validatedApiTierRewards = validateApiTierRewardsSchema.safeParse(data)

-  if (!validatedApiTierRewards.success) {
-    getAllRewardFailCounter.add(1, {
-      error_type: "validation_error",
-      error: JSON.stringify(validatedApiTierRewards.error),
-    })
-    console.error(validatedApiTierRewards.error)
-    console.error(
-      "api.rewards validation error",
-      JSON.stringify({
-        error: validatedApiTierRewards.error,
+    if (!validatedApiTierRewards.success) {
+      getAllRewardFailCounter.add(1, {
+        error_type: "validation_error",
+        error: JSON.stringify(validatedApiTierRewards.error),
      })
-    )
-    return null
-  }
+      console.error(validatedApiTierRewards.error)
+      console.error(
+        "api.rewards validation error",
+        JSON.stringify({
+          error: validatedApiTierRewards.error,
+        })
+      )
+      return null
+    }

-  return validatedApiTierRewards.data
-}
+    return validatedApiTierRewards.data
+  },
+  ["getAllApiRewards"],
+  { revalidate: ONE_HOUR }
+)

 async function getCmsRewards(locale: Lang, rewardIds: string[]) {
  const tags = rewardIds.map((id) =>
    generateLoyaltyConfigTag(locale, "reward", id)
  )
-
  const cmsRewardsResponse = await request<CmsRewardsResponse>(
    GetRewards,
    {
@@ -260,13 +262,15 @@ export const rewardQueryRouter = router({
        nextCursor,
      }
    }),
-  byLevel: contentStackBaseWithProfileServiceProcedure
+  byLevel: contentStackBaseWithServiceProcedure
    .input(rewardsByLevelInput)
    .query(async function ({ input, ctx }) {
      getByLevelRewardCounter.add(1)
      const { level_id } = input

-      const allUpcomingApiRewards = await getAllApiRewards(ctx)
+      const allUpcomingApiRewards = await getAllCachedApiRewards(
+        ctx.serviceToken
+      )

      if (!allUpcomingApiRewards || !allUpcomingApiRewards[level_id]) {
        getByLevelRewardFailCounter.add(1)
@@ -310,11 +314,11 @@ export const rewardQueryRouter = router({
      getByLevelRewardSuccessCounter.add(1)
      return { level: loyaltyLevelsConfig, rewards: levelsWithRewards }
    }),
-  all: contentStackBaseWithProfileServiceProcedure
+  all: contentStackBaseWithServiceProcedure
    .input(rewardsAllInput)
    .query(async function ({ input, ctx }) {
      getAllRewardCounter.add(1)
-      const allApiRewards = await getAllApiRewards(ctx)
+      const allApiRewards = await getAllCachedApiRewards(ctx.serviceToken)

      if (!allApiRewards) {
        return []
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -1,5 +1,4 @@
 import { metrics } from "@opentelemetry/api"
-import { unstable_cache } from "next/cache"

 import * as api from "@/lib/api"
 import { GetHotelPage } from "@/lib/graphql/Query/HotelPage/HotelPage.graphql"
@@ -11,10 +10,10 @@ import {
 } from "@/server/errors/trpc"
 import { extractHotelImages } from "@/server/routers/utils/hotels"
 import {
-  contentStackUidWithHotelServiceProcedure,
-  hotelServiceProcedure,
+  contentStackUidWithServiceProcedure,
  publicProcedure,
  router,
+  serviceProcedure,
 } from "@/server/trpc"
 import { toApiLang } from "@/server/utils"

@@ -38,7 +37,6 @@ import {
  getCitiesByCountry,
  getCountries,
  getLocations,
-  locationsAffix,
  TWENTYFOUR_HOURS,
 } from "./utils"

@@ -99,7 +97,7 @@ async function getContentstackData(
 }

 export const hotelQueryRouter = router({
-  get: contentStackUidWithHotelServiceProcedure
+  get: contentStackUidWithServiceProcedure
    .input(getHotelInputSchema)
    .query(async ({ ctx, input }) => {
      const { lang, uid } = ctx
@@ -264,7 +262,7 @@ export const hotelQueryRouter = router({
      }
    }),
  availability: router({
-    hotels: hotelServiceProcedure
+    hotels: serviceProcedure
      .input(getHotelsAvailabilityInputSchema)
      .query(async ({ input, ctx }) => {
        const {
@@ -388,7 +386,7 @@ export const hotelQueryRouter = router({
            .flatMap((hotels) => hotels.attributes),
        }
      }),
-    rooms: hotelServiceProcedure
+    rooms: serviceProcedure
      .input(getRoomsAvailabilityInputSchema)
      .query(async ({ input, ctx }) => {
        const {
@@ -543,7 +541,7 @@ export const hotelQueryRouter = router({
      }),
  }),
  hotelData: router({
-    get: hotelServiceProcedure
+    get: serviceProcedure
      .input(getlHotelDataInputSchema)
      .query(async ({ ctx, input }) => {
        const { hotelId, language, include } = input
@@ -641,7 +639,7 @@ export const hotelQueryRouter = router({
      }),
  }),
  locations: router({
-    get: hotelServiceProcedure.query(async function ({ ctx }) {
+    get: serviceProcedure.query(async function ({ ctx }) {
      const searchParams = new URLSearchParams()
      searchParams.set("language", toApiLang(ctx.lang))

@@ -657,36 +655,19 @@ export const hotelQueryRouter = router({
        },
      }

-      const getCachedCountries = unstable_cache(
-        getCountries,
-        [`${ctx.lang}:${locationsAffix}:countries`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
-
-      const countries = await getCachedCountries(options, searchParams)
-
-      const getCachedCitiesByCountry = unstable_cache(
-        getCitiesByCountry,
-        [`${ctx.lang}:${locationsAffix}:cities-by-country`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
+      const countries = await getCountries(options, searchParams, ctx.lang)

      let citiesByCountry = null
      if (countries) {
-        citiesByCountry = await getCachedCitiesByCountry(
+        citiesByCountry = await getCitiesByCountry(
          countries,
          options,
-          searchParams
+          searchParams,
+          ctx.lang
        )
      }

-      const getCachedLocations = unstable_cache(
-        getLocations,
-        [`${ctx.lang}:${locationsAffix}`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
-
-      const locations = await getCachedLocations(
+      const locations = await getLocations(
        ctx.lang,
        options,
        searchParams,
--- a/server/routers/hotels/utils.ts
+++ b/server/routers/hotels/utils.ts
@@ -17,6 +17,7 @@ import {
  PointOfInterestCategoryNameEnum,
  PointOfInterestGroupEnum,
 } from "@/types/hotel"
+import { HotelLocation } from "@/types/trpc/routers/hotel/locations"
 import type { Lang } from "@/constants/languages"
 import type { Endpoint } from "@/lib/api/endpoints"

@@ -54,89 +55,119 @@ export const locationsAffix = "locations"
 export const TWENTYFOUR_HOURS = 60 * 60 * 24
 export async function getCity(
  cityUrl: string,
-  options: RequestOptionsWithOutBody
+  options: RequestOptionsWithOutBody,
+  lang: Lang,
+  relationshipCity: HotelLocation["relationships"]["city"]
 ) {
-  const url = new URL(cityUrl)
-  const cityResponse = await api.get(
-    url.pathname as Endpoint,
-    options,
-    url.searchParams
-  )
+  return unstable_cache(
+    async function (locationCityUrl: string) {
+      const url = new URL(locationCityUrl)
+      const cityResponse = await api.get(
+        url.pathname as Endpoint,
+        options,
+        url.searchParams
+      )

-  if (!cityResponse.ok) {
-    return null
-  }
+      if (!cityResponse.ok) {
+        return null
+      }

-  const cityJson = await cityResponse.json()
-  const city = apiCitySchema.safeParse(cityJson)
-  if (!city.success) {
-    console.info(`Validation of city failed`)
-    console.info(`cityUrl: ${cityUrl}`)
-    console.error(city.error)
-    return null
-  }
+      const cityJson = await cityResponse.json()
+      const city = apiCitySchema.safeParse(cityJson)
+      if (!city.success) {
+        console.info(`Validation of city failed`)
+        console.info(`cityUrl: ${locationCityUrl}`)
+        console.error(city.error)
+        return null
+      }

-  return city.data
+      return city.data
+    },
+    [cityUrl, `${lang}:${relationshipCity}`],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(cityUrl)
 }

 export async function getCountries(
  options: RequestOptionsWithOutBody,
-  params: URLSearchParams
+  params: URLSearchParams,
+  lang: Lang
 ) {
-  const countryResponse = await api.get(
-    api.endpoints.v1.countries,
-    options,
-    params
-  )
-
-  if (!countryResponse.ok) {
-    return null
-  }
-
-  const countriesJson = await countryResponse.json()
-  const countries = apiCountriesSchema.safeParse(countriesJson)
-  if (!countries.success) {
-    console.info(`Validation for countries failed`)
-    console.error(countries.error)
-    return null
-  }
-
-  return countries.data
-}
-
-export async function getCitiesByCountry(
-  countries: Countries,
-  options: RequestOptionsWithOutBody,
-  params: URLSearchParams
-) {
-  const citiesGroupedByCountry: CitiesGroupedByCountry = {}
-
-  await Promise.all(
-    countries.data.map(async (country) => {
+  return unstable_cache(
+    async function (searchParams) {
      const countryResponse = await api.get(
-        `${api.endpoints.v1.citiesCountry}/${country.name}`,
+        api.endpoints.v1.countries,
        options,
-        params
+        searchParams
      )

      if (!countryResponse.ok) {
        return null
      }

-      const countryJson = await countryResponse.json()
-      const citiesByCountry = apiCitiesByCountrySchema.safeParse(countryJson)
-      if (!citiesByCountry.success) {
-        console.info(`Failed to validate Cities by Country payload`)
-        console.error(citiesByCountry.error)
+      const countriesJson = await countryResponse.json()
+      const countries = apiCountriesSchema.safeParse(countriesJson)
+      if (!countries.success) {
+        console.info(`Validation for countries failed`)
+        console.error(countries.error)
        return null
      }

-      citiesGroupedByCountry[country.name] = citiesByCountry.data.data
-      return true
-    })
-  )
+      return countries.data
+    },
+    [`${lang}:${locationsAffix}:countries`, params.toString()],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params)
+}

-  return citiesGroupedByCountry
+export async function getCitiesByCountry(
+  countries: Countries,
+  options: RequestOptionsWithOutBody,
+  params: URLSearchParams,
+  lang: Lang
+) {
+  return unstable_cache(
+    async function (
+      searchParams: URLSearchParams,
+      searchedCountries: Countries
+    ) {
+      const citiesGroupedByCountry: CitiesGroupedByCountry = {}
+
+      await Promise.all(
+        searchedCountries.data.map(async (country) => {
+          const countryResponse = await api.get(
+            `${api.endpoints.v1.citiesCountry}/${country.name}`,
+            options,
+            searchParams
+          )
+
+          if (!countryResponse.ok) {
+            return null
+          }
+
+          const countryJson = await countryResponse.json()
+          const citiesByCountry =
+            apiCitiesByCountrySchema.safeParse(countryJson)
+          if (!citiesByCountry.success) {
+            console.info(`Failed to validate Cities by Country payload`)
+            console.error(citiesByCountry.error)
+            return null
+          }
+
+          citiesGroupedByCountry[country.name] = citiesByCountry.data.data
+          return true
+        })
+      )
+
+      return citiesGroupedByCountry
+    },
+    [
+      `${lang}:${locationsAffix}:cities-by-country`,
+      params.toString(),
+      JSON.stringify(countries),
+    ],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params, countries)
 }

 export async function getLocations(
@@ -145,72 +176,89 @@ export async function getLocations(
  params: URLSearchParams,
  citiesByCountry: CitiesGroupedByCountry | null
 ) {
-  const apiResponse = await api.get(api.endpoints.v1.locations, options, params)
+  return unstable_cache(
+    async function (
+      searchParams: URLSearchParams,
+      groupedCitiesByCountry: CitiesGroupedByCountry | null
+    ) {
+      const apiResponse = await api.get(
+        api.endpoints.v1.locations,
+        options,
+        searchParams
+      )

-  if (!apiResponse.ok) {
-    if (apiResponse.status === 401) {
-      return { error: true, cause: "unauthorized" } as const
-    } else if (apiResponse.status === 403) {
-      return { error: true, cause: "forbidden" } as const
-    }
-    return null
-  }
-
-  const apiJson = await apiResponse.json()
-  const verifiedLocations = apiLocationsSchema.safeParse(apiJson)
-  if (!verifiedLocations.success) {
-    console.info(`Locations Verification Failed`)
-    console.error(verifiedLocations.error)
-    return null
-  }
-
-  return await Promise.all(
-    verifiedLocations.data.data.map(async (location) => {
-      if (location.type === "cities") {
-        if (citiesByCountry) {
-          const country = Object.keys(citiesByCountry).find((country) => {
-            if (
-              citiesByCountry[country].find((loc) => loc.name === location.name)
-            ) {
-              return true
-            }
-            return false
-          })
-          if (country) {
-            return {
-              ...location,
-              country,
-            }
-          } else {
-            console.info(
-              `Location cannot be found in any of the countries cities`
-            )
-            console.info(location)
-          }
-        }
-      } else if (location.type === "hotels") {
-        if (location.relationships.city?.url) {
-          const getCachedCity = unstable_cache(
-            getCity,
-            [`${lang}:${location.relationships.city}`],
-            { revalidate: TWENTYFOUR_HOURS }
-          )
-
-          const city = await getCachedCity(
-            location.relationships.city.url,
-            options
-          )
-          if (city) {
-            return deepmerge(location, {
-              relationships: {
-                city,
-              },
-            })
-          }
+      if (!apiResponse.ok) {
+        if (apiResponse.status === 401) {
+          return { error: true, cause: "unauthorized" } as const
+        } else if (apiResponse.status === 403) {
+          return { error: true, cause: "forbidden" } as const
        }
+        return null
      }

-      return location
-    })
-  )
+      const apiJson = await apiResponse.json()
+      const verifiedLocations = apiLocationsSchema.safeParse(apiJson)
+      if (!verifiedLocations.success) {
+        console.info(`Locations Verification Failed`)
+        console.error(verifiedLocations.error)
+        return null
+      }
+
+      return await Promise.all(
+        verifiedLocations.data.data.map(async (location) => {
+          if (location.type === "cities") {
+            if (groupedCitiesByCountry) {
+              const country = Object.keys(groupedCitiesByCountry).find(
+                (country) => {
+                  if (
+                    groupedCitiesByCountry[country].find(
+                      (loc) => loc.name === location.name
+                    )
+                  ) {
+                    return true
+                  }
+                  return false
+                }
+              )
+              if (country) {
+                return {
+                  ...location,
+                  country,
+                }
+              } else {
+                console.info(
+                  `Location cannot be found in any of the countries cities`
+                )
+                console.info(location)
+              }
+            }
+          } else if (location.type === "hotels") {
+            if (location.relationships.city?.url) {
+              const city = await getCity(
+                location.relationships.city.url,
+                options,
+                lang,
+                location.relationships.city
+              )
+              if (city) {
+                return deepmerge(location, {
+                  relationships: {
+                    city,
+                  },
+                })
+              }
+            }
+          }
+
+          return location
+        })
+      )
+    },
+    [
+      `${lang}:${locationsAffix}`,
+      params.toString(),
+      JSON.stringify(citiesByCountry),
+    ],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params, citiesByCountry)
 }
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,5 +1,4 @@
 import { metrics } from "@opentelemetry/api"
-import { SafeParseSuccess } from "zod"

 import * as api from "@/lib/api"
 import {
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -1,35 +1,85 @@
+import { metrics } from "@opentelemetry/api"
+import { revalidateTag, unstable_cache } from "next/cache"
+
 import { env } from "@/env/server"

+import { generateServiceTokenTag } from "@/utils/generateTag"
+
 import { ServiceTokenResponse } from "@/types/tokens"

-const SERVICE_TOKEN_REVALIDATE_SECONDS = 3599 // 59 minutes and 59 seconds.
+// OpenTelemetry metrics: Service token
+const meter = metrics.getMeter("trpc.context.serviceToken")
+const fetchServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-new-token"
+)
+const fetchTempServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-temporary"
+)
+const fetchServiceTokenFailCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-fail"
+)

-export async function fetchServiceToken(
-  scopes: string[]
-): Promise<ServiceTokenResponse> {
-  try {
-    const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-        Accept: "application/json",
-      },
-      body: new URLSearchParams({
-        grant_type: "client_credentials",
-        client_id: env.CURITY_CLIENT_ID_SERVICE,
-        client_secret: env.CURITY_CLIENT_SECRET_SERVICE,
-        scope: scopes.join(" "),
+async function fetchServiceToken(scopes: string[]) {
+  fetchServiceTokenCounter.add(1)
+  const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    body: new URLSearchParams({
+      grant_type: "client_credentials",
+      client_id: env.CURITY_CLIENT_ID_SERVICE,
+      client_secret: env.CURITY_CLIENT_SECRET_SERVICE,
+      scope: scopes.join(" "),
+    }),
+  })
+
+  if (!response.ok) {
+    fetchServiceTokenFailCounter.add(1, {
+      error_type: "http_error",
+      error: JSON.stringify({
+        status: response.status,
+        statusText: response.statusText,
      }),
-      next: {
-        revalidate: SERVICE_TOKEN_REVALIDATE_SECONDS,
-      },
    })
+    throw new Error("Failed to obtain service token")
+  }

-    if (!response.ok) {
-      throw new Error("Failed to obtain service token")
+  return response.json()
+}
+
+export async function getServiceToken(): Promise<ServiceTokenResponse> {
+  try {
+    const scopes = ["profile", "hotel", "booking"]
+    const tag = generateServiceTokenTag(scopes)
+    const getCachedJwt = unstable_cache(
+      async (scopes) => {
+        const jwt = await fetchServiceToken(scopes)
+
+        const expiresAt = Date.now() + jwt.expires_in * 1000
+        return { expiresAt, jwt }
+      },
+      [tag],
+      { tags: [tag] }
+    )
+
+    const cachedJwt = await getCachedJwt(scopes)
+    if (cachedJwt.expiresAt < Date.now()) {
+      console.log(
+        "trpc.context.serviceToken: Service token expired, revalidating tag"
+      )
+      revalidateTag(tag)
+
+      console.log(
+        "trpc.context.serviceToken: Fetching new temporary service token."
+      )
+      fetchTempServiceTokenCounter.add(1)
+      const newToken = await fetchServiceToken(scopes)
+      return newToken
    }

-    return response.json()
+    return cachedJwt.jwt
  } catch (error) {
    console.error("Error fetching service token:", error)
    throw error
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -11,7 +11,7 @@ import {
  unauthorizedError,
 } from "./errors/trpc"
 import { type Context, createContext } from "./context"
-import { fetchServiceToken } from "./tokenManager"
+import { getServiceToken } from "./tokenManager"
 import { transformer } from "./transformer"
 import { langInput } from "./utils"

@@ -121,23 +121,17 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
  })
 })

-function createServiceProcedure(serviceName: string) {
-  return t.procedure.use(async (opts) => {
-    const { access_token } = await fetchServiceToken([serviceName])
-    if (!access_token) {
-      throw internalServerError(`Failed to obtain ${serviceName} service token`)
-    }
-    return opts.next({
-      ctx: {
-        serviceToken: access_token,
-      },
-    })
+export const serviceProcedure = t.procedure.use(async (opts) => {
+  const { access_token } = await getServiceToken()
+  if (!access_token) {
+    throw internalServerError(`Failed to obtain service token`)
+  }
+  return opts.next({
+    ctx: {
+      serviceToken: access_token,
+    },
  })
-}
-
-export const bookingServiceProcedure = createServiceProcedure("booking")
-export const hotelServiceProcedure = createServiceProcedure("hotel")
-export const profileServiceProcedure = createServiceProcedure("profile")
+})

 export const serverActionProcedure = t.procedure.experimental_caller(
  experimental_nextAppDirCaller({
@@ -168,11 +162,11 @@ export const protectedServerActionProcedure = serverActionProcedure.use(

 // NOTE: This is actually save to use, just the implementation could change
 // in minor version bumps. Please read: https://trpc.io/docs/faq#unstable
-export const contentStackUidWithHotelServiceProcedure =
-  contentstackExtendedProcedureUID.unstable_concat(hotelServiceProcedure)
+export const contentStackUidWithServiceProcedure =
+  contentstackExtendedProcedureUID.unstable_concat(serviceProcedure)

-export const contentStackBaseWithProfileServiceProcedure =
-  contentstackBaseProcedure.unstable_concat(profileServiceProcedure)
+export const contentStackBaseWithServiceProcedure =
+  contentstackBaseProcedure.unstable_concat(serviceProcedure)

 export const contentStackBaseWithProtectedProcedure =
  contentstackBaseProcedure.unstable_concat(protectedProcedure)
--- a/types/trpc/routers/hotel/locations.ts
+++ b/types/trpc/routers/hotel/locations.ts
@@ -6,3 +6,6 @@ export interface LocationSchema extends z.output<typeof apiLocationsSchema> {}

 export type Locations = LocationSchema["data"]
 export type Location = Locations[number]
+
+export type CityLocation = Location & { type: "cities" }
+export type HotelLocation = Location & { type: "hotels" }
--- a/utils/generateTag.ts
+++ b/utils/generateTag.ts
@@ -99,3 +99,13 @@ export function generateLoyaltyConfigTag(
 ) {
  return `${lang}:loyalty_config:${contentTypeUid}:${id}`
 }
+
+/**
+ * Function to generate tags for service tokens
+ *
+ * @param serviceTokenScope scope of service token
+ * @returns string
+ */
+export function generateServiceTokenTag(scopes: string[]) {
+  return `service_token:${scopes.join("-")}`
+}