From a5400c1498636c8ba557f43c367fb507df577135 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Thu, 3 Oct 2024 11:12:36 +0200
Subject: [PATCH] feat: guest information form enter details

---
 .../hotelreservation/[section]/page.tsx       |  11 +-
 .../SearchList/ClearSearchButton/index.tsx    |  10 +-
 .../FormContent/Search/SearchList/index.tsx   |   3 +
 .../FormContent/Search/index.tsx              |  13 +-
 .../EnterDetails/Details/details.module.css   |  25 ++++
 .../EnterDetails/Details/index.tsx            | 117 ++++++++++++++++++
 .../EnterDetails/Details/schema.ts            |  19 +++
 .../HotelReservation/HotelCard/index.tsx      |   8 +-
 components/Icons/Heart.tsx                    |  36 ++++++
 components/Icons/icon.module.css              |  15 +++
 components/Icons/index.tsx                    |   1 +
 components/Icons/variants.ts                  |   3 +
 .../Form/Checkbox/Card/card.module.css        |  70 +++++++++++
 .../Form/Checkbox/Card/card.ts                |  14 +++
 .../Form/Checkbox/Card/index.tsx              |  65 ++++++++++
 .../TempDesignSystem/Form/Country/country.ts  |   2 +
 .../TempDesignSystem/Form/Country/index.tsx   |   7 +-
 .../Form/Input/AriaInputWithLabel/index.tsx   |  25 ++++
 .../Input/AriaInputWithLabel/input.module.css |  55 ++++++++
 .../Form/Input/AriaInputWithLabel/input.ts    |   4 +
 .../TempDesignSystem/Form/Input/index.tsx     |  36 +++---
 .../Form/Input/input.module.css               |  56 ---------
 .../TempDesignSystem/Form/Input/input.ts      |   2 +-
 .../Form/Label/label.module.css               |   2 +-
 .../Form/NewPassword/index.tsx                |  32 ++---
 .../Form/NewPassword/newPassword.module.css   |  56 ---------
 .../TempDesignSystem/Form/Phone/index.tsx     |  40 +++---
 .../Form/Phone/phone.module.css               |  40 +-----
 .../TempDesignSystem/Form/Phone/phone.ts      |   2 +
 .../Text/Body/body.module.css                 |   4 +
 .../TempDesignSystem/Text/Body/variants.ts    |   1 +
 .../Text/Caption/caption.module.css           |   8 ++
 .../TempDesignSystem/Text/Caption/index.tsx   |   3 +
 .../TempDesignSystem/Text/Caption/variants.ts |   8 ++
 .../Text/Footnote/footnote.module.css         |   2 +-
 .../Text/Footnote/variants.ts                 |   2 +-
 i18n/dictionaries/da.json                     |  48 +++----
 i18n/dictionaries/de.json                     |   3 +
 i18n/dictionaries/en.json                     |  59 +++++----
 i18n/dictionaries/fi.json                     |  49 ++++----
 i18n/dictionaries/no.json                     |  48 +++----
 i18n/dictionaries/sv.json                     |  47 +++----
 lib/discriminatedUnion.ts                     |   8 +-
 lib/trpc/memoizedRequests/index.ts            |   6 +
 server/routers/contentstack/base/output.ts    |  11 +-
 .../contentstack/schemas/linkConnection.ts    |  24 ++--
 server/routers/user/query.ts                  | 116 +++++++++--------
 types/components/enterDetails/details.ts      |  11 ++
 types/components/search.ts                    |  33 ++---
 types/requests/system.ts                      |  10 +-
 50 files changed, 833 insertions(+), 437 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/Details/details.module.css
 create mode 100644 components/HotelReservation/EnterDetails/Details/index.tsx
 create mode 100644 components/HotelReservation/EnterDetails/Details/schema.ts
 create mode 100644 components/Icons/Heart.tsx
 create mode 100644 components/TempDesignSystem/Form/Checkbox/Card/card.module.css
 create mode 100644 components/TempDesignSystem/Form/Checkbox/Card/card.ts
 create mode 100644 components/TempDesignSystem/Form/Checkbox/Card/index.tsx
 create mode 100644 components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
 create mode 100644 components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
 create mode 100644 components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts
 create mode 100644 types/components/enterDetails/details.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[section]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[section]/page.tsx
index b3ef81538..3ebb491e5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[section]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[section]/page.tsx
@@ -1,11 +1,12 @@
 import { notFound } from "next/navigation"
 
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
+import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
 import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
-import Details from "@/components/HotelReservation/SelectRate/Details"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
@@ -79,6 +80,7 @@ export default async function SectionsPage({
   searchParams,
 }: PageArgs<LangParams & { section: string }, SectionPageProps>) {
   setLang(params.lang)
+  const profile = await getProfileSafely()
 
   const hotel = await serverClient().hotel.hotelData.get({
     hotelId: "811",
@@ -114,6 +116,11 @@ export default async function SectionsPage({
 
   const currentSearchParams = new URLSearchParams(searchParams).toString()
 
+  let user = null
+  if (profile && !("error" in profile)) {
+    user = profile
+  }
+
   return (
     <div>
       <HotelSelectionHeader hotel={hotel.data.attributes} />
@@ -171,7 +178,7 @@ export default async function SectionsPage({
             header={intl.formatMessage({ id: "Your details" })}
             path={`details?${currentSearchParams}`}
           >
-            {params.section === "details" && <Details nextPath="payment" />}
+            {params.section === "details" ? <Details user={user} /> : null}
           </SectionAccordion>
           <SectionAccordion
             header={intl.formatMessage({ id: "Payment info" })}
diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
index a734e30ec..116934531 100644
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -10,6 +10,7 @@ import type { ClearSearchButtonProps } from "@/types/components/search"
 
 export default function ClearSearchButton({
   getItemProps,
+  handleClearSearchHistory,
   highlightedIndex,
   index,
 }: ClearSearchButtonProps) {
@@ -18,13 +19,6 @@ export default function ClearSearchButton({
     variant: index === highlightedIndex ? "active" : "default",
   })
 
-  function handleClick() {
-    // noop
-    // the click bubbles to handleOnSelect
-    // where selectedItem = "clear-search"
-    // which is the value for item below
-  }
-
   return (
     <button
       {...getItemProps({
@@ -34,7 +28,7 @@ export default function ClearSearchButton({
         item: "clear-search",
         role: "button",
       })}
-      onClick={handleClick}
+      onClick={handleClearSearchHistory}
       tabIndex={0}
       type="button"
     >
diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
index 2bbc3b43d..a8736e69d 100644
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
@@ -20,6 +20,7 @@ import type { SearchListProps } from "@/types/components/search"
 export default function SearchList({
   getItemProps,
   getMenuProps,
+  handleClearSearchHistory,
   highlightedIndex,
   isOpen,
   locations,
@@ -125,6 +126,7 @@ export default function SearchList({
         <Divider className={styles.divider} color="beige" />
         <ClearSearchButton
           getItemProps={getItemProps}
+          handleClearSearchHistory={handleClearSearchHistory}
           highlightedIndex={highlightedIndex}
           index={searchHistory.length}
         />
@@ -161,6 +163,7 @@ export default function SearchList({
             <Divider className={styles.divider} color="beige" />
             <ClearSearchButton
               getItemProps={getItemProps}
+              handleClearSearchHistory={handleClearSearchHistory}
               highlightedIndex={highlightedIndex}
               index={searchHistory.length}
             />
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 1ce969a29..353c2807b 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -43,6 +43,11 @@ export default function Search({ locations }: SearchProps) {
     [locations]
   )
 
+  function handleClearSearchHistory() {
+    localStorage.removeItem(localStorageKey)
+    dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
+  }
+
   function handleOnBlur() {
     if (!value && state.searchData?.name) {
       setValue(name, state.searchData.name)
@@ -79,11 +84,8 @@ export default function Search({ locations }: SearchProps) {
     }
   }
 
-  function handleOnSelect(selectedItem: Location | null | "clear-search") {
-    if (selectedItem === "clear-search") {
-      localStorage.removeItem(localStorageKey)
-      dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
-    } else if (selectedItem) {
+  function handleOnSelect(selectedItem: Location | null) {
+    if (selectedItem) {
       const stringified = JSON.stringify(selectedItem)
       setValue("location", encodeURIComponent(stringified))
       sessionStorage.setItem(sessionStorageKey, stringified)
@@ -167,6 +169,7 @@ export default function Search({ locations }: SearchProps) {
           <SearchList
             getItemProps={getItemProps}
             getMenuProps={getMenuProps}
+            handleClearSearchHistory={handleClearSearchHistory}
             highlightedIndex={highlightedIndex}
             isOpen={isOpen}
             locations={state.locations}
diff --git a/components/HotelReservation/EnterDetails/Details/details.module.css b/components/HotelReservation/EnterDetails/Details/details.module.css
new file mode 100644
index 000000000..e9a8cdaf0
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) 0px;
+}
+
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 1fr;
+  width: min(100%, 600px);
+}
+
+.country,
+.email,
+.phone {
+  grid-column: 1/-1;
+}
+
+.footer {
+  display: grid;
+  gap: var(--Spacing-x3);
+  justify-items: flex-start;
+  margin-top: var(--Spacing-x1);
+}
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
new file mode 100644
index 000000000..731e3b205
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -0,0 +1,117 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import CheckboxCard from "@/components/TempDesignSystem/Form/Checkbox/Card"
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import { detailsSchema, signedInDetailsSchema } from "./schema"
+
+import styles from "./details.module.css"
+
+import type {
+  DetailsProps,
+  DetailsSchema,
+} from "@/types/components/enterDetails/details"
+
+export default function Details({ user }: DetailsProps) {
+  const intl = useIntl()
+
+  const list = [
+    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+    { title: intl.formatMessage({ id: "Join at no cost" }) },
+  ]
+
+  const methods = useForm<DetailsSchema>({
+    defaultValues: {
+      countryCode: user?.address?.countryCode ?? "",
+      email: user?.email ?? "",
+      firstname: user?.firstName ?? "",
+      lastname: user?.lastName ?? "",
+      phoneNumber: user?.phoneNumber ?? "",
+    },
+    mode: "all",
+    resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema),
+    reValidateMode: "onChange",
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <section className={styles.container}>
+        <header>
+          <Body color="uiTextHighContrast" textTransform="bold">
+            {intl.formatMessage({ id: "Guest information" })}
+          </Body>
+        </header>
+        <form className={styles.form}>
+          <Input
+            label={intl.formatMessage({ id: "Firstname" })}
+            name="firstname"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label={intl.formatMessage({ id: "Lastname" })}
+            name="lastname"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <CountrySelect
+            className={styles.country}
+            label={intl.formatMessage({ id: "Country" })}
+            name="countryCode"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Input
+            className={styles.email}
+            label={intl.formatMessage({ id: "Email address" })}
+            name="email"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Phone
+            className={styles.phone}
+            label={intl.formatMessage({ id: "Phone number" })}
+            name="phoneNumber"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+        </form>
+        <footer className={styles.footer}>
+          {user ? null : (
+            <CheckboxCard
+              list={list}
+              saving
+              subtitle={intl.formatMessage(
+                {
+                  id: "{difference}{amount} {currency}",
+                },
+                {
+                  amount: "491",
+                  currency: "SEK",
+                  difference: "-",
+                }
+              )}
+              title={intl.formatMessage({ id: "Join Scandic Friends" })}
+            />
+          )}
+          <Button
+            disabled={!methods.formState.isValid}
+            intent="secondary"
+            size="small"
+            theme="base"
+          >
+            {intl.formatMessage({ id: "Proceed to payment method" })}
+          </Button>
+        </footer>
+      </section>
+    </FormProvider>
+  )
+}
diff --git a/components/HotelReservation/EnterDetails/Details/schema.ts b/components/HotelReservation/EnterDetails/Details/schema.ts
new file mode 100644
index 000000000..92f1a5629
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -0,0 +1,19 @@
+import { z } from "zod"
+
+import { phoneValidator } from "@/utils/phoneValidator"
+
+export const detailsSchema = z.object({
+  countryCode: z.string(),
+  email: z.string().email(),
+  firstname: z.string(),
+  lastname: z.string(),
+  phoneNumber: phoneValidator(),
+})
+
+export const signedInDetailsSchema = z.object({
+  countryCode: z.string().optional(),
+  email: z.string().email().optional(),
+  firstname: z.string().optional(),
+  lastname: z.string().optional(),
+  phoneNumber: phoneValidator().optional(),
+})
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 82b0c4b91..99feb01ab 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -48,10 +48,10 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
         <Title as="h4" textTransform="capitalize">
           {hotelData.name}
         </Title>
-        <Footnote color="textMediumContrast">
+        <Footnote color="uiTextMediumContrast">
           {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
-        <Footnote color="textMediumContrast">
+        <Footnote color="uiTextMediumContrast">
           {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
@@ -79,7 +79,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             {price?.regularAmount} {price?.currency} /
             {intl.formatMessage({ id: "night" })}
           </Caption>
-          <Footnote color="textMediumContrast">approx 280 eur</Footnote>
+          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
         </div>
         <div>
           <Chip intent="primary" className={styles.member}>
@@ -90,7 +90,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             {price?.memberAmount} {price?.currency} /
             {intl.formatMessage({ id: "night" })}
           </Caption>
-          <Footnote color="textMediumContrast">approx 280 eur</Footnote>
+          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
         </div>
         <Button
           asChild
diff --git a/components/Icons/Heart.tsx b/components/Icons/Heart.tsx
new file mode 100644
index 000000000..49cbb1171
--- /dev/null
+++ b/components/Icons/Heart.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HeartIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        height="24"
+        id="mask0_69_3298"
+        maskUnits="userSpaceOnUse"
+        style={{ maskType: "alpha" }}
+        width="24"
+        x="0"
+        y="0"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3298)">
+        <path
+          d="M12 20.0875C11.775 20.0875 11.5521 20.0479 11.3313 19.9687C11.1104 19.8896 10.9125 19.7666 10.7375 19.6L9.1625 18.1625C7.3625 16.5208 5.76042 14.9125 4.35625 13.3375C2.95208 11.7625 2.25 10.0416 2.25 8.17498C2.25 6.65816 2.75865 5.39145 3.77595 4.37485C4.79327 3.35827 6.06087 2.84998 7.57875 2.84998C8.43458 2.84998 9.24792 3.03539 10.0188 3.40623C10.7896 3.77706 11.45 4.29998 12 4.97498C12.5667 4.29998 13.231 3.77706 13.993 3.40623C14.755 3.03539 15.5657 2.84998 16.425 2.84998C17.9418 2.84998 19.2085 3.35827 20.2251 4.37485C21.2417 5.39145 21.75 6.65816 21.75 8.17498C21.75 10.0416 21.05 11.7646 19.65 13.3437C18.25 14.9229 16.6458 16.5291 14.8375 18.1625L13.2625 19.6C13.0875 19.7666 12.8896 19.8896 12.6687 19.9687C12.4479 20.0479 12.225 20.0875 12 20.0875ZM11.107 6.89753C10.6773 6.20749 10.1729 5.67289 9.59375 5.29373C9.01458 4.91456 8.33962 4.72498 7.56885 4.72498C6.5849 4.72498 5.76493 5.05206 5.10895 5.70623C4.45298 6.36039 4.125 7.18202 4.125 8.1711C4.125 9.0283 4.42917 9.93908 5.0375 10.9035C5.64583 11.8678 6.37083 12.8041 7.2125 13.7125C8.05417 14.6208 8.92083 15.4687 9.8125 16.2562C10.7042 17.0437 11.4333 17.6916 12 18.2C12.5667 17.6916 13.2958 17.0437 14.1875 16.2562C15.0792 15.4687 15.9458 14.6208 16.7875 13.7125C17.6292 12.8041 18.3542 11.8678 18.9625 10.9035C19.5708 9.93908 19.875 9.0283 19.875 8.1711C19.875 7.18202 19.547 6.36039 18.8911 5.70623C18.2351 5.05206 17.4151 4.72498 16.4311 4.72498C15.6604 4.72498 14.9833 4.91456 14.4 5.29373C13.8167 5.67289 13.3102 6.20749 12.8805 6.89753C12.7768 7.06583 12.6466 7.18956 12.4899 7.26873C12.3331 7.34789 12.1685 7.38748 11.9961 7.38748C11.8237 7.38748 11.6583 7.34789 11.5 7.26873C11.3417 7.18956 11.2107 7.06583 11.107 6.89753Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index ddab46d97..282c214cd 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -2,6 +2,11 @@
   margin: 0;
 }
 
+.baseIconLowContrast,
+.baseIconLowContrast * {
+  fill: var(--Base-Icon-Low-contrast);
+}
+
 .black,
 .black * {
   fill: #000;
@@ -46,3 +51,13 @@
 .white * {
   fill: var(--UI-Opacity-White-100);
 }
+
+.uiTextHighContrast,
+.uiTextHighContrast * {
+  fill: var(--UI-Text-High-contrast);
+}
+
+.uiTextMediumContrast,
+.uiTextMediumContrast * {
+  fill: var(--UI-Text-Medium-contrast);
+}
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 78e3f8de1..04f167061 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -30,6 +30,7 @@ export { default as ErrorCircleIcon } from "./ErrorCircle"
 export { default as FitnessIcon } from "./Fitness"
 export { default as GiftIcon } from "./Gift"
 export { default as GlobeIcon } from "./Globe"
+export { default as HeartIcon } from "./Heart"
 export { default as HouseIcon } from "./House"
 export { default as ImageIcon } from "./Image"
 export { default as InfoCircleIcon } from "./InfoCircle"
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index 39e4ff51e..cf2703bd4 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -5,6 +5,7 @@ import styles from "./icon.module.css"
 const config = {
   variants: {
     color: {
+      baseIconLowContrast: styles.baseIconLowContrast,
       black: styles.black,
       burgundy: styles.burgundy,
       grey80: styles.grey80,
@@ -14,6 +15,8 @@ const config = {
       red: styles.red,
       green: styles.green,
       white: styles.white,
+      uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
     },
   },
   defaultVariants: {
diff --git a/components/TempDesignSystem/Form/Checkbox/Card/card.module.css b/components/TempDesignSystem/Form/Checkbox/Card/card.module.css
new file mode 100644
index 000000000..bd44b7b45
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/Card/card.module.css
@@ -0,0 +1,70 @@
+.checkbox {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Large);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  transition: all 200ms ease;
+  width: min(100%, 600px);
+}
+
+.checkbox:hover {
+  background-color: var(--Base-Surface-Secondary-light-Hover);
+}
+
+.checkbox:has(:checked) {
+  background-color: var(--Primary-Light-Surface-Normal);
+  border-color: var(--Base-Border-Hover);
+}
+
+.header {
+  align-items: center;
+  display: grid;
+  gap: 0px var(--Spacing-x1);
+  grid-template-areas:
+    "title    icon"
+    "subtitle icon";
+}
+
+.icon {
+  grid-area: icon;
+  justify-self: flex-end;
+  transition: fill 200ms ease;
+}
+
+.checkbox:hover .icon,
+.checkbox:hover .icon *,
+.checkbox:has(:checked) .icon,
+.checkbox:has(:checked) .icon * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
+.checkbox[data-declined="true"]:hover .icon,
+.checkbox[data-declined="true"]:hover .icon *,
+.checkbox[data-declined="true"]:has(:checked) .icon,
+.checkbox[data-declined="true"]:has(:checked) .icon * {
+  fill: var(--Base-Text-Disabled);
+}
+
+.subtitle {
+  grid-area: subtitle;
+}
+
+.title {
+  grid-area: title;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-quarter);
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/Card/card.ts b/components/TempDesignSystem/Form/Checkbox/Card/card.ts
new file mode 100644
index 000000000..438c9b729
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/Card/card.ts
@@ -0,0 +1,14 @@
+import type { IconProps } from "@/types/components/icon"
+
+export interface CheckboxCardProps {
+  Icon?: (props: IconProps) => JSX.Element
+  declined?: boolean
+  list?: {
+    title: string
+  }[]
+  name?: string
+  saving?: boolean
+  subtitle?: string
+  text?: string
+  title: string
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/Card/index.tsx b/components/TempDesignSystem/Form/Checkbox/Card/index.tsx
new file mode 100644
index 000000000..77158c531
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/Card/index.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./card.module.css"
+
+import type { CheckboxCardProps } from "./card"
+
+export default function CheckboxCard({
+  Icon = HeartIcon,
+  declined = false,
+  list,
+  name = "join",
+  saving = false,
+  subtitle,
+  text,
+  title,
+}: CheckboxCardProps) {
+  return (
+    <label className={styles.checkbox} data-declined={declined} htmlFor={name}>
+      <header className={styles.header}>
+        <Caption className={styles.title} textTransform="bold" uppercase>
+          {title}
+        </Caption>
+        {subtitle ? (
+          <Caption
+            className={styles.subtitle}
+            color={saving ? "baseTextAccent" : "uiTextHighContrast"}
+            textTransform="bold"
+          >
+            {subtitle}
+          </Caption>
+        ) : null}
+        <Icon
+          className={styles.icon}
+          color="uiTextHighContrast"
+          height={32}
+          width={32}
+        />
+      </header>
+      {list ? (
+        <ul className={styles.list}>
+          {list.map((listItem) => (
+            <li key={listItem.title} className={styles.listItem}>
+              {declined ? (
+                <CloseIcon
+                  color="uiTextMediumContrast"
+                  height={20}
+                  width={20}
+                />
+              ) : (
+                <CheckIcon color="baseIconLowContrast" height={20} width={20} />
+              )}
+              <Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {text ? <Footnote color="uiTextMediumContrast">{text}</Footnote> : null}
+      <input aria-hidden id={name} hidden name={name} type="checkbox" />
+    </label>
+  )
+}
diff --git a/components/TempDesignSystem/Form/Country/country.ts b/components/TempDesignSystem/Form/Country/country.ts
index 29211f0fb..693b555db 100644
--- a/components/TempDesignSystem/Form/Country/country.ts
+++ b/components/TempDesignSystem/Form/Country/country.ts
@@ -1,9 +1,11 @@
 import type { RegisterOptions } from "react-hook-form"
 
 export type CountryProps = {
+  className?: string
   label: string
   name?: string
   placeholder?: string
+  readOnly?: boolean
   registerOptions?: RegisterOptions
 }
 
diff --git a/components/TempDesignSystem/Form/Country/index.tsx b/components/TempDesignSystem/Form/Country/index.tsx
index 3ff4d8c72..9777a4a48 100644
--- a/components/TempDesignSystem/Form/Country/index.tsx
+++ b/components/TempDesignSystem/Form/Country/index.tsx
@@ -28,8 +28,10 @@ import type {
 } from "./country"
 
 export default function CountrySelect({
+  className = "",
   label,
   name = "country",
+  readOnly = false,
   registerOptions = {},
 }: CountryProps) {
   const { formatMessage } = useIntl()
@@ -54,12 +56,13 @@ export default function CountrySelect({
   const selectCountryLabel = formatMessage({ id: "Select a country" })
 
   return (
-    <div className={styles.container} ref={setRef}>
+    <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
         aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
-        isRequired={!!registerOptions?.required}
         isInvalid={fieldState.invalid}
+        isReadOnly={readOnly}
+        isRequired={!!registerOptions?.required}
         name={field.name}
         onBlur={field.onBlur}
         onSelectionChange={handleChange}
diff --git a/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
new file mode 100644
index 000000000..05402f093
--- /dev/null
+++ b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
@@ -0,0 +1,25 @@
+import { type ForwardedRef,forwardRef } from "react"
+import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
+
+import Label from "@/components/TempDesignSystem/Form/Label"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./input.module.css"
+
+import type { AriaInputWithLabelProps } from "./input"
+
+const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
+  { label, ...props }: AriaInputWithLabelProps,
+  ref: ForwardedRef<HTMLInputElement>
+) {
+  return (
+    <AriaLabel className={styles.container} htmlFor={props.name}>
+      <Body asChild fontOnly>
+        <AriaInput {...props} className={styles.input} ref={ref} />
+      </Body>
+      <Label required={!!props.required}>{label}</Label>
+    </AriaLabel>
+  )
+})
+
+export default AriaInputWithLabel
diff --git a/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
new file mode 100644
index 000000000..6afcfd82a
--- /dev/null
+++ b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
@@ -0,0 +1,55 @@
+.container {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: border-color 200ms ease;
+}
+
+.container:has(.input:active, .input:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.container:has(.input:disabled) {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  color: var(--Main-Grey-40);
+}
+
+.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
+  border-color: var(--Scandic-Red-60);
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 18px;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+}
+
+.input:not(:active, :focus):placeholder-shown {
+  height: 0px;
+  transition: height 150ms ease;
+}
+
+.input:focus,
+.input:focus:placeholder-shown,
+.input:active,
+.input:active:placeholder-shown {
+  height: 18px;
+  transition: height 150ms ease;
+  outline: none;
+}
+
+.input:disabled {
+  color: var(--Main-Grey-40);
+}
diff --git a/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts
new file mode 100644
index 000000000..8e9c6b743
--- /dev/null
+++ b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts
@@ -0,0 +1,4 @@
+export interface AriaInputWithLabelProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string
+}
diff --git a/components/TempDesignSystem/Form/Input/index.tsx b/components/TempDesignSystem/Form/Input/index.tsx
index a0951b4ca..dda34d115 100644
--- a/components/TempDesignSystem/Form/Input/index.tsx
+++ b/components/TempDesignSystem/Form/Input/index.tsx
@@ -1,15 +1,9 @@
 "use client"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  Text,
-  TextField,
-} from "react-aria-components"
+import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
-import Label from "@/components/TempDesignSystem/Form/Label"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./input.module.css"
@@ -20,11 +14,13 @@ import type { InputProps } from "./input"
 
 export default function Input({
   "aria-label": ariaLabel,
+  className = "",
   disabled = false,
   helpText = "",
   label,
   name,
   placeholder = "",
+  readOnly = false,
   registerOptions = {},
   type = "text",
 }: InputProps) {
@@ -44,6 +40,7 @@ export default function Input({
       render={({ field, fieldState }) => (
         <TextField
           aria-label={ariaLabel}
+          className={className}
           isDisabled={field.disabled}
           isInvalid={fieldState.invalid}
           isRequired={!!registerOptions.required}
@@ -53,19 +50,16 @@ export default function Input({
           validationBehavior="aria"
           value={field.value}
         >
-          <AriaLabel className={styles.container} htmlFor={field.name}>
-            <Body asChild fontOnly>
-              <AriaInput
-                {...numberAttributes}
-                aria-labelledby={field.name}
-                className={styles.input}
-                id={field.name}
-                placeholder={placeholder}
-                type={type}
-              />
-            </Body>
-            <Label required={!!registerOptions.required}>{label}</Label>
-          </AriaLabel>
+          <AriaInputWithLabel
+            {...field}
+            aria-labelledby={field.name}
+            id={field.name}
+            label={label}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            required={!!registerOptions.required}
+            type={type}
+          />
           {helpText && !fieldState.error ? (
             <Caption asChild color="black">
               <Text className={styles.helpText} slot="description">
diff --git a/components/TempDesignSystem/Form/Input/input.module.css b/components/TempDesignSystem/Form/Input/input.module.css
index dd4fb6209..56d0be4b5 100644
--- a/components/TempDesignSystem/Form/Input/input.module.css
+++ b/components/TempDesignSystem/Form/Input/input.module.css
@@ -1,59 +1,3 @@
-.container {
-  align-content: center;
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-Medium);
-  display: grid;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  transition: border-color 200ms ease;
-}
-
-.container:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.container:has(.input:disabled) {
-  background-color: var(--Main-Grey-10);
-  border: none;
-  color: var(--Main-Grey-40);
-}
-
-.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-  transition: height 150ms ease;
-}
-
-.input:focus,
-.input:focus:placeholder-shown,
-.input:active,
-.input:active:placeholder-shown {
-  height: 18px;
-  transition: height 150ms ease;
-  outline: none;
-}
-
-.input:disabled {
-  color: var(--Main-Grey-40);
-}
-
 .helpText {
   align-items: flex-start;
   display: flex;
diff --git a/components/TempDesignSystem/Form/Input/input.ts b/components/TempDesignSystem/Form/Input/input.ts
index 067d1754b..e480363b9 100644
--- a/components/TempDesignSystem/Form/Input/input.ts
+++ b/components/TempDesignSystem/Form/Input/input.ts
@@ -1,4 +1,4 @@
-import type { RegisterOptions, UseFormRegister } from "react-hook-form"
+import type { RegisterOptions } from "react-hook-form"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
diff --git a/components/TempDesignSystem/Form/Label/label.module.css b/components/TempDesignSystem/Form/Label/label.module.css
index 6948a6594..9d92486c3 100644
--- a/components/TempDesignSystem/Form/Label/label.module.css
+++ b/components/TempDesignSystem/Form/Label/label.module.css
@@ -5,6 +5,7 @@
   letter-spacing: 0.03px;
   line-height: 120%;
   text-align: left;
+  transition: font-size 100ms ease;
 }
 
 span.small {
@@ -21,7 +22,6 @@ input:active ~ .label,
 input:not(:placeholder-shown) ~ .label {
   display: block;
   font-size: 12px;
-  transition: font-size 100ms ease;
 }
 
 input:focus ~ .label {
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 99f2dbda6..3c9950e1f 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -1,17 +1,11 @@
 "use client"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  Text,
-  TextField,
-} from "react-aria-components"
+import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { CheckIcon, CloseIcon } from "@/components/Icons"
 import Error from "@/components/TempDesignSystem/Form/ErrorMessage/Error"
-import Label from "@/components/TempDesignSystem/Form/Label"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { type IconProps, Key, type NewPasswordProps } from "./newPassword"
@@ -47,20 +41,14 @@ export default function NewPassword({
             value={field.value}
             type="password"
           >
-            <AriaLabel className={styles.container} htmlFor={field.name}>
-              <Body asChild fontOnly>
-                <AriaInput
-                  aria-labelledby={field.name}
-                  className={styles.input}
-                  id={field.name}
-                  placeholder={placeholder}
-                  type="password"
-                />
-              </Body>
-              <Label required={!!registerOptions.required}>
-                {formatMessage({ id: "New password" })}
-              </Label>
-            </AriaLabel>
+            <AriaInputWithLabel
+              {...field}
+              aria-labelledby={field.name}
+              id={field.name}
+              label={formatMessage({ id: "New password" })}
+              placeholder={placeholder}
+              type="password"
+            />
             {field.value ? (
               <div className={styles.errors}>
                 <Caption asChild color="black">
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index d8a5d781b..7b0c4509f 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -1,59 +1,3 @@
-.container {
-  align-content: center;
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-Medium);
-  display: grid;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  transition: border-color 200ms ease;
-}
-
-.container:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.container:has(.input:disabled) {
-  background-color: var(--Main-Grey-10);
-  border: none;
-  color: var(--Main-Grey-40);
-}
-
-.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-  transition: height 150ms ease;
-}
-
-.input:focus,
-.input:focus:placeholder-shown,
-.input:active,
-.input:active:placeholder-shown {
-  height: 18px;
-  transition: height 150ms ease;
-  outline: none;
-}
-
-.input:disabled {
-  color: var(--Main-Grey-40);
-}
-
 .helpText {
   align-items: flex-start;
   display: flex;
diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx
index df3d18c75..6e9c2024b 100644
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -2,11 +2,7 @@
 import "react-international-phone/style.css"
 
 import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  TextField,
-} from "react-aria-components"
+import { TextField } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import {
   CountrySelector,
@@ -18,6 +14,7 @@ import { useIntl } from "react-intl"
 
 import { ChevronDownIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -29,10 +26,12 @@ import type { PhoneProps } from "./phone"
 
 export default function Phone({
   ariaLabel = "Phone number input",
+  className = "",
   disabled = false,
   label,
   name = "phoneNumber",
   placeholder = "",
+  readOnly = false,
   registerOptions = {
     required: true,
   },
@@ -72,8 +71,9 @@ export default function Phone({
   }
 
   return (
-    <div className={styles.phone}>
+    <div className={`${styles.phone} ${className}`}>
       <CountrySelector
+        disabled={readOnly}
         dropdownArrowClassName={styles.arrow}
         flagClassName={styles.flag}
         onSelect={handleSelectCountry}
@@ -114,25 +114,21 @@ export default function Phone({
         isDisabled={disabled ?? field.disabled}
         isInvalid={fieldState.invalid}
         isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
         name={field.name}
         type="tel"
       >
-        <AriaLabel className={styles.inputContainer} htmlFor={field.name}>
-          <Body asChild fontOnly>
-            <AriaInput
-              className={styles.input}
-              id={field.name}
-              name={field.name}
-              onBlur={field.onBlur}
-              onChange={handleChange}
-              placeholder={placeholder}
-              ref={field.ref}
-              required={!!registerOptions.required}
-              value={inputValue}
-            />
-          </Body>
-          <Label required={!!registerOptions.required}>{label}</Label>
-        </AriaLabel>
+        <AriaInputWithLabel
+          {...field}
+          id={field.name}
+          label={label}
+          onChange={handleChange}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={!!registerOptions.required}
+          type="tel"
+          value={inputValue}
+        />
         <ErrorMessage errors={formState.errors} name={field.name} />
       </TextField>
     </div>
diff --git a/components/TempDesignSystem/Form/Phone/phone.module.css b/components/TempDesignSystem/Form/Phone/phone.module.css
index af3d09f70..bda78a1af 100644
--- a/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/components/TempDesignSystem/Form/Phone/phone.module.css
@@ -19,6 +19,9 @@
   --react-international-phone-dropdown-top: calc(
     var(--react-international-phone-height) + var(--Spacing-x1)
   );
+  --react-international-phone-dial-code-preview-font-size: var(
+    --typography-Body-Regular-fontSize
+  );
 }
 
 .phone:has(.input:active, .input:focus) {
@@ -46,7 +49,6 @@
   align-self: center;
 }
 
-.inputContainer,
 .select {
   align-content: center;
   background-color: var(--Main-Grey-White);
@@ -93,42 +95,8 @@
 
 .select .dialCode {
   border: none;
-  color: var(--Main-Grey-100);
+  color: var(--UI-Text-High-contrast);
   line-height: 1;
   justify-self: flex-start;
   padding: 0;
 }
-
-.inputContainer:has(.input:not(:focus):placeholder-shown) {
-  gap: 0;
-  grid-template-rows: 1fr;
-}
-
-.inputContainer:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.inputContainer:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-}
-
-.input:focus,
-.input:focus:placeholder-shown {
-  height: 18px;
-  outline: none;
-}
diff --git a/components/TempDesignSystem/Form/Phone/phone.ts b/components/TempDesignSystem/Form/Phone/phone.ts
index 4828682bc..f7dbd0e15 100644
--- a/components/TempDesignSystem/Form/Phone/phone.ts
+++ b/components/TempDesignSystem/Form/Phone/phone.ts
@@ -2,9 +2,11 @@ import type { RegisterOptions } from "react-hook-form"
 
 export type PhoneProps = {
   ariaLabel?: string
+  className?: string
   disabled?: boolean
   label: string
   name?: string
   placeholder?: string
+  readOnly?: boolean
   registerOptions?: RegisterOptions
 }
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index 30939d217..fd605447d 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -92,6 +92,10 @@
   color: var(--Base-Text-Medium-contrast);
 }
 
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index 055710eb3..0509c6bcd 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -15,6 +15,7 @@ const config = {
       white: styles.white,
       peach50: styles.peach50,
       peach80: styles.peach80,
+      uiTextHighContrast: styles.uiTextHighContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {
diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css
index 7966ba995..d8487f06c 100644
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -35,6 +35,10 @@ p.caption {
   text-decoration: var(--typography-Caption-Regular-textDecoration);
 }
 
+.baseTextAccent {
+  color: var(--Base-Text-Accent);
+}
+
 .black {
   color: var(--Main-Grey-100);
 }
@@ -71,6 +75,10 @@ p.caption {
   color: var(--Base-Text-Disabled);
 }
 
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
 .center {
   text-align: center;
 }
diff --git a/components/TempDesignSystem/Text/Caption/index.tsx b/components/TempDesignSystem/Text/Caption/index.tsx
index 0e43263c6..e80caf79b 100644
--- a/components/TempDesignSystem/Text/Caption/index.tsx
+++ b/components/TempDesignSystem/Text/Caption/index.tsx
@@ -11,6 +11,7 @@ export default function Caption({
   fontOnly = false,
   textAlign,
   textTransform,
+  uppercase,
   ...props
 }: CaptionProps) {
   const Comp = asChild ? Slot : "p"
@@ -18,12 +19,14 @@ export default function Caption({
     ? fontOnlycaptionVariants({
         className,
         textTransform,
+        uppercase,
       })
     : captionVariants({
         className,
         color,
         textTransform,
         textAlign,
+        uppercase,
       })
   return <Comp className={classNames} {...props} />
 }
diff --git a/components/TempDesignSystem/Text/Caption/variants.ts b/components/TempDesignSystem/Text/Caption/variants.ts
index 1a6cd622c..3b84c513e 100644
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -5,12 +5,14 @@ import styles from "./caption.module.css"
 const config = {
   variants: {
     color: {
+      baseTextAccent: styles.baseTextAccent,
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
       textMediumContrast: styles.textMediumContrast,
       red: styles.red,
       white: styles.white,
+      uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,
       disabled: styles.disabled,
@@ -24,6 +26,9 @@ const config = {
       center: styles.center,
       left: styles.left,
     },
+    uppercase: {
+      true: styles.uppercase,
+    },
   },
   defaultVariants: {
     color: "black",
@@ -40,6 +45,9 @@ const fontOnlyConfig = {
       regular: styles.regular,
       uppercase: styles.uppercase,
     },
+    uppercase: {
+      true: styles.uppercase,
+    },
   },
   defaultVariants: {
     textTransform: "regular",
diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css
index 39cd86591..b3ae66d80 100644
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -59,7 +59,7 @@
   color: var(--Scandic-Peach-50);
 }
 
-.textMediumContrast {
+.uiTextMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
 
diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts
index 3c2e58441..16f5b3185 100644
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -9,7 +9,7 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
       peach50: styles.peach50,
-      textMediumContrast: styles.textMediumContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 0e7764176..3aa8abe9c 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -25,15 +25,12 @@
   "Book": "Book",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
-  "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
   "Breakfast": "Morgenmad",
   "Breakfast excluded": "Morgenmad ikke inkluderet",
   "Breakfast included": "Morgenmad inkluderet",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
-  "by": "inden",
   "Cancel": "Afbestille",
-  "characters": "tegn",
   "Check in": "Check ind",
   "Check out": "Check ud",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.",
@@ -72,6 +69,7 @@
   "Distance to city centre": "{number}km til centrum",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?",
   "Download the Scandic app": "Download Scandic-appen",
+  "Earn bonus nights & points": "Optjen bonusnætter og point",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
   "Email": "E-mail",
@@ -79,9 +77,9 @@
   "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
   "Explore nearby": "Udforsk i nærheden",
   "Extras to your booking": "Tillæg til din booking",
+  "FAQ": "Ofte stillede spørgsmål",
   "Failed to delete credit card, please try again later.": "Kunne ikke slette kreditkort. Prøv venligst igen senere.",
   "Fair": "Messe",
-  "FAQ": "Ofte stillede spørgsmål",
   "Find booking": "Find booking",
   "Find hotels": "Find hotel",
   "Flexibility": "Fleksibilitet",
@@ -90,6 +88,7 @@
   "Free rebooking": "Gratis ombooking",
   "From": "Fra",
   "Get inspired": "Bliv inspireret",
+  "Get member benefits & offers": "Få medlemsfordele og tilbud",
   "Go back to edit": "Gå tilbage til redigering",
   "Go back to overview": "Gå tilbage til oversigten",
   "Guests & Rooms": "Gæster & værelser",
@@ -99,15 +98,12 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel faciliteter",
   "Hotel surroundings": "Hotel omgivelser",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
   "Image gallery": "Billedgalleri",
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
-  "km to city center": "km til byens centrum",
+  "Join at no cost": "Tilmeld dig uden omkostninger",
   "Language": "Sprog",
   "Latest searches": "Seneste søgninger",
   "Level": "Niveau",
@@ -134,9 +130,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris fra",
   "Members": "Medlemmer",
-  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-id",
   "Membership ID copied to clipboard": "Medlems-ID kopieret til udklipsholder",
+  "Membership cards": "Medlemskort",
   "Menu": "Menu",
   "Modify": "Ændre",
   "Month": "Måned",
@@ -151,9 +147,6 @@
   "Nearby companies": "Nærliggende virksomheder",
   "New password": "Nyt kodeord",
   "Next": "Næste",
-  "next level:": "Næste niveau:",
-  "night": "nat",
-  "nights": "nætter",
   "Nights needed to level up": "Nætter nødvendige for at komme i niveau",
   "No content published": "Intet indhold offentliggjort",
   "No matching location found": "Der blev ikke fundet nogen matchende placering",
@@ -164,13 +157,11 @@
   "Non-refundable": "Ikke-refunderbart",
   "Not found": "Ikke fundet",
   "Nr night, nr adult": "{nights, number} nat, {adults, number} voksen",
-  "number": "nummer",
   "On your journey": "På din rejse",
   "Open": "Åben",
   "Open language menu": "Åbn sprogmenuen",
   "Open menu": "Åbn menuen",
   "Open my pages menu": "Åbn mine sider menuen",
-  "or": "eller",
   "Overview": "Oversigt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garage",
@@ -182,7 +173,6 @@
   "Phone is required": "Telefonnummer er påkrævet",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Indtast venligst et gyldigt telefonnummer",
-  "points": "Point",
   "Points": "Point",
   "Points being calculated": "Point udregnes",
   "Points earned prior to May 1, 2021": "Point optjent inden 1. maj 2021",
@@ -225,29 +215,25 @@
   "Something went wrong and we couldn't add your card. Please try again later.": "Noget gik galt, og vi kunne ikke tilføje dit kort. Prøv venligst igen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noget gik galt, og vi kunne ikke fjerne dit kort. Prøv venligst igen senere.",
   "Something went wrong!": "Noget gik galt!",
-  "special character": "speciel karakter",
-  "spendable points expiring by": "{points} Brugbare point udløber den {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gade",
   "Successfully updated profile!": "Profilen er opdateret med succes!",
   "Summary": "Opsummering",
+  "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortæl os, hvilke oplysninger og opdateringer du gerne vil modtage, og hvordan, ved at klikke på linket nedenfor.",
   "Thank you": "Tak",
   "Theatre": "Teater",
   "There are no transactions to display": "Der er ingen transaktioner at vise",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
-  "to": "til",
   "Total Points": "Samlet antal point",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",
   "Transactions": "Transaktioner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} anmeldelser på Tripadvisor)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Sengtype",
   "Type of room": "Værelsestype",
-  "uppercase letter": "stort bogstav",
   "Use bonus cheque": "Brug Bonus Cheque",
   "Use code/voucher": "Brug kode/voucher",
   "User information": "Brugeroplysninger",
@@ -274,9 +260,9 @@
   "You canceled adding a new credit card.": "Du har annulleret tilføjelsen af et nyt kreditkort.",
   "You have no previous stays.": "Du har ingen tidligere ophold.",
   "You have no upcoming stays.": "Du har ingen kommende ophold.",
+  "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your card was successfully removed!": "Dit kort blev fjernet!",
   "Your card was successfully saved!": "Dit kort blev gemt!",
-  "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your current level": "Dit nuværende niveau",
   "Your details": "Dine oplysninger",
   "Your level": "Dit niveau",
@@ -284,5 +270,23 @@
   "Zip code": "Postnummer",
   "Zoo": "Zoo",
   "Zoom in": "Zoom ind",
-  "Zoom out": "Zoom ud"
+  "Zoom out": "Zoom ud",
+  "as of today": "fra idag",
+  "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
+  "by": "inden",
+  "characters": "tegn",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
+  "km to city center": "km til byens centrum",
+  "next level:": "Næste niveau:",
+  "night": "nat",
+  "nights": "nætter",
+  "number": "nummer",
+  "or": "eller",
+  "points": "Point",
+  "special character": "speciel karakter",
+  "spendable points expiring by": "{points} Brugbare point udløber den {date}",
+  "to": "til",
+  "uppercase letter": "stort bogstav"
 }
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 9035612bc..614ca2f46 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -282,6 +282,9 @@
   "Your points to spend": "Meine Punkte",
   "Zip code": "PLZ",
   "Zoo": "Zoo",
+  "Earn bonus nights & points": "Sammeln Sie Bonusnächte und -punkte",
+  "Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
+  "Join at no cost": "Kostenlos beitreten",
   "Zoom in": "Vergrößern",
   "Zoom out": "Verkleinern"
 }
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 42d246472..88f901263 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -14,7 +14,6 @@
   "Any changes you've made will be lost.": "Any changes you've made will be lost.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
   "Arrival date": "Arrival date",
-  "as of today": "as of today",
   "As our": "As our {level}",
   "As our Close Friend": "As our Close Friend",
   "At latest": "At latest",
@@ -25,17 +24,12 @@
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
-  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
-  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
-  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
   "Breakfast": "Breakfast",
   "Breakfast excluded": "Breakfast excluded",
   "Breakfast included": "Breakfast included",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
-  "by": "by",
   "Cancel": "Cancel",
-  "characters": "characters",
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
@@ -75,26 +69,31 @@
   "Distance to city centre": "{number}km to city centre",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",
   "Download the Scandic app": "Download the Scandic app",
+  "Earn bonus nights & points": "Earn bonus nights & points",
   "Edit": "Edit",
   "Edit profile": "Edit profile",
   "Email": "Email",
+  "Email address": "Email address",
   "Enter destination or hotel": "Enter destination or hotel",
   "Explore all levels and benefits": "Explore all levels and benefits",
   "Explore nearby": "Explore nearby",
   "Extras to your booking": "Extras to your booking",
+  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
   "Fair": "Fair",
-  "FAQ": "FAQ",
   "Find booking": "Find booking",
   "Find hotels": "Find hotels",
+  "Firstname": "Firstname",
   "Flexibility": "Flexibility",
   "Former Scandic Hotel": "Former Scandic Hotel",
   "Free cancellation": "Free cancellation",
   "Free rebooking": "Free rebooking",
   "From": "From",
   "Get inspired": "Get inspired",
+  "Get member benefits & offers": "Get member benefits & offers",
   "Go back to edit": "Go back to edit",
   "Go back to overview": "Go back to overview",
+  "Guest information": "Guest information",
   "Guests & Rooms": "Guests & Rooms",
   "Hi": "Hi",
   "Highest level": "Highest level",
@@ -102,16 +101,14 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel facilities",
   "Hotel surroundings": "Hotel surroundings",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "persons",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
   "Hotels": "Hotels",
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
   "Image gallery": "Image gallery",
   "Join Scandic Friends": "Join Scandic Friends",
-  "km to city center": "km to city center",
+  "Join at no cost": "Join at no cost",
   "Language": "Language",
+  "Lastname": "Lastname",
   "Latest searches": "Latest searches",
   "Level": "Level",
   "Level 1": "Level 1",
@@ -137,9 +134,9 @@
   "Member price": "Member price",
   "Member price from": "Member price from",
   "Members": "Members",
-  "Membership cards": "Membership cards",
   "Membership ID": "Membership ID",
   "Membership ID copied to clipboard": "Membership ID copied to clipboard",
+  "Membership cards": "Membership cards",
   "Menu": "Menu",
   "Modify": "Modify",
   "Month": "Month",
@@ -154,9 +151,6 @@
   "Nearby companies": "Nearby companies",
   "New password": "New password",
   "Next": "Next",
-  "next level:": "next level:",
-  "night": "night",
-  "nights": "nights",
   "Nights needed to level up": "Nights needed to level up",
   "No content published": "No content published",
   "No matching location found": "No matching location found",
@@ -167,13 +161,11 @@
   "Non-refundable": "Non-refundable",
   "Not found": "Not found",
   "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
-  "number": "number",
   "On your journey": "On your journey",
   "Open": "Open",
   "Open language menu": "Open language menu",
   "Open menu": "Open menu",
   "Open my pages menu": "Open my pages menu",
-  "or": "or",
   "Overview": "Overview",
   "Parking": "Parking",
   "Parking / Garage": "Parking / Garage",
@@ -185,7 +177,6 @@
   "Phone is required": "Phone is required",
   "Phone number": "Phone number",
   "Please enter a valid phone number": "Please enter a valid phone number",
-  "points": "Points",
   "Points": "Points",
   "Points being calculated": "Points being calculated",
   "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
@@ -193,6 +184,7 @@
   "Points needed to level up": "Points needed to level up",
   "Points needed to stay on level": "Points needed to stay on level",
   "Previous victories": "Previous victories",
+  "Proceed to payment method": "Proceed to payment method",
   "Public price from": "Public price from",
   "Public transport": "Public transport",
   "Read more": "Read more",
@@ -229,29 +221,25 @@
   "Something went wrong and we couldn't add your card. Please try again later.": "Something went wrong and we couldn't add your card. Please try again later.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Something went wrong and we couldn't remove your card. Please try again later.",
   "Something went wrong!": "Something went wrong!",
-  "special character": "special character",
-  "spendable points expiring by": "{points} spendable points expiring by {date}",
   "Sports": "Sports",
   "Standard price": "Standard price",
   "Street": "Street",
   "Successfully updated profile!": "Successfully updated profile!",
   "Summary": "Summary",
+  "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
   "Thank you": "Thank you",
   "Theatre": "Theatre",
   "There are no transactions to display": "There are no transactions to display",
   "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
-  "to": "to",
   "Total Points": "Total Points",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",
   "Transportations": "Transportations",
   "Tripadvisor reviews": "{rating} ({count} reviews on Tripadvisor)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Type of bed",
   "Type of room": "Type of room",
-  "uppercase letter": "uppercase letter",
   "Use bonus cheque": "Use bonus cheque",
   "Use code/voucher": "Use code/voucher",
   "User information": "User information",
@@ -278,9 +266,9 @@
   "You canceled adding a new credit card.": "You canceled adding a new credit card.",
   "You have no previous stays.": "You have no previous stays.",
   "You have no upcoming stays.": "You have no upcoming stays.",
+  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your card was successfully removed!": "Your card was successfully removed!",
   "Your card was successfully saved!": "Your card was successfully saved!",
-  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your current level": "Your current level",
   "Your details": "Your details",
   "Your level": "Your level",
@@ -288,5 +276,26 @@
   "Zip code": "Zip code",
   "Zoo": "Zoo",
   "Zoom in": "Zoom in",
-  "Zoom out": "Zoom out"
+  "Zoom out": "Zoom out",
+  "as of today": "as of today",
+  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
+  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
+  "by": "by",
+  "characters": "characters",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "persons",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
+  "km to city center": "km to city center",
+  "next level:": "next level:",
+  "night": "night",
+  "nights": "nights",
+  "number": "number",
+  "or": "or",
+  "points": "Points",
+  "special character": "special character",
+  "spendable points expiring by": "{points} spendable points expiring by {date}",
+  "to": "to",
+  "uppercase letter": "uppercase letter",
+  "{difference}{amount} {currency}": "{difference}{amount} {currency}"
 }
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 25b04ef90..0e83393d9 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -14,7 +14,6 @@
   "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?",
   "Arrival date": "Saapumispäivä",
-  "as of today": "tänään",
   "As our": "{level}-etu",
   "As our Close Friend": "Läheisenä ystävänämme",
   "At latest": "Viimeistään",
@@ -25,15 +24,12 @@
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
-  "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
   "Breakfast": "Aamiainen",
   "Breakfast excluded": "Aamiainen ei sisälly",
   "Breakfast included": "Aamiainen sisältyy",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
-  "by": "mennessä",
   "Cancel": "Peruuttaa",
-  "characters": "hahmoja",
   "Check in": "Sisäänkirjautuminen",
   "Check out": "Uloskirjautuminen",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.",
@@ -72,6 +68,7 @@
   "Distance to city centre": "{number}km Etäisyys kaupunkiin",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?",
   "Download the Scandic app": "Lataa Scandic-sovellus",
+  "Earn bonus nights & points": "Ansaitse bonusöitä ja -pisteitä",
   "Edit": "Muokata",
   "Edit profile": "Muokkaa profiilia",
   "Email": "Sähköposti",
@@ -79,9 +76,9 @@
   "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
   "Explore nearby": "Tutustu lähialueeseen",
   "Extras to your booking": "Varauksessa lisäpalveluita",
+  "FAQ": "UKK",
   "Failed to delete credit card, please try again later.": "Luottokortin poistaminen epäonnistui, yritä myöhemmin uudelleen.",
   "Fair": "Messukeskus",
-  "FAQ": "UKK",
   "Find booking": "Etsi varaus",
   "Find hotels": "Etsi hotelleja",
   "Flexibility": "Joustavuus",
@@ -90,6 +87,7 @@
   "Free rebooking": "Ilmainen uudelleenvaraus",
   "From": "From",
   "Get inspired": "Inspiroidu",
+  "Get member benefits & offers": "Hanki jäsenetuja ja -tarjouksia",
   "Go back to edit": "Palaa muokkaamaan",
   "Go back to overview": "Palaa yleiskatsaukseen",
   "Guests & Rooms": "Vieraat & Huoneet",
@@ -99,15 +97,12 @@
   "Hotel": "Hotelli",
   "Hotel facilities": "Hotellin palvelut",
   "Hotel surroundings": "Hotellin ympäristö",
-  "hotelPages.rooms.roomCard.person": "henkilö",
-  "hotelPages.rooms.roomCard.persons": "Henkilöä",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
   "Hotels": "Hotellit",
   "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
   "Image gallery": "Kuvagalleria",
   "Join Scandic Friends": "Liity jäseneksi",
-  "km to city center": "km keskustaan",
+  "Join at no cost": "Liity maksutta",
   "Language": "Kieli",
   "Latest searches": "Viimeisimmät haut",
   "Level": "Level",
@@ -134,9 +129,9 @@
   "Member price": "Jäsenhinta",
   "Member price from": "Jäsenhinta alkaen",
   "Members": "Jäsenet",
-  "Membership cards": "Jäsenkortit",
   "Membership ID": "Jäsentunnus",
   "Membership ID copied to clipboard": "Jäsenyystunnus kopioitu leikepöydälle",
+  "Membership cards": "Jäsenkortit",
   "Menu": "Valikko",
   "Modify": "Muokkaa",
   "Month": "Kuukausi",
@@ -151,9 +146,6 @@
   "Nearby companies": "Läheiset yritykset",
   "New password": "Uusi salasana",
   "Next": "Seuraava",
-  "next level:": "pistettä tasolle:",
-  "night": "yö",
-  "nights": "yötä",
   "Nights needed to level up": "Yöt, joita tarvitaan tasolle",
   "No content published": "Ei julkaistua sisältöä",
   "No matching location found": "Vastaavaa sijaintia ei löytynyt",
@@ -164,13 +156,11 @@
   "Non-refundable": "Ei palautettavissa",
   "Not found": "Ei löydetty",
   "Nr night, nr adult": "{nights, number} yö, {adults, number} aikuinen",
-  "number": "määrä",
   "On your journey": "Matkallasi",
   "Open": "Avata",
   "Open language menu": "Avaa kielivalikko",
   "Open menu": "Avaa valikko",
   "Open my pages menu": "Avaa omat sivut -valikko",
-  "or": "tai",
   "Overview": "Yleiskatsaus",
   "Parking": "Pysäköinti",
   "Parking / Garage": "Pysäköinti / Autotalli",
@@ -182,7 +172,6 @@
   "Phone is required": "Puhelin vaaditaan",
   "Phone number": "Puhelinnumero",
   "Please enter a valid phone number": "Ole hyvä ja näppäile voimassaoleva puhelinnumero",
-  "points": "pistettä",
   "Points": "Pisteet",
   "Points being calculated": "Pisteitä lasketaan",
   "Points earned prior to May 1, 2021": "Pisteet, jotka ansaittu ennen 1.5.2021",
@@ -225,29 +214,25 @@
   "Something went wrong and we couldn't add your card. Please try again later.": "Jotain meni pieleen, emmekä voineet lisätä korttiasi. Yritä myöhemmin uudelleen.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Jotain meni pieleen, emmekä voineet poistaa korttiasi. Yritä myöhemmin uudelleen.",
   "Something went wrong!": "Jotain meni pieleen!",
-  "special character": "erikoishahmo",
-  "spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
   "Sports": "Urheilu",
   "Standard price": "Normaali hinta",
   "Street": "Katu",
   "Successfully updated profile!": "Profiilin päivitys onnistui!",
   "Summary": "Yhteenveto",
+  "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Kerro meille, mitä tietoja ja päivityksiä haluat saada ja miten, napsauttamalla alla olevaa linkkiä.",
   "Thank you": "Kiitos",
   "Theatre": "Teatteri",
   "There are no transactions to display": "Näytettäviä tapahtumia ei ole",
   "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
-  "to": "to",
   "Total Points": "Kokonaispisteet",
   "Tourist": "Turisti",
   "Transaction date": "Tapahtuman päivämäärä",
   "Transactions": "Tapahtumat",
   "Transportations": "Kuljetukset",
   "Tripadvisor reviews": "{rating} ({count} arvostelua TripAdvisorissa)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Vuodetyyppi",
   "Type of room": "Huonetyyppi",
-  "uppercase letter": "iso kirjain",
   "Use bonus cheque": "Käytä bonussekkiä",
   "Use code/voucher": "Käytä koodia/voucheria",
   "User information": "Käyttäjän tiedot",
@@ -274,9 +259,9 @@
   "You canceled adding a new credit card.": "Peruutit uuden luottokortin lisäämisen.",
   "You have no previous stays.": "Sinulla ei ole aiempia majoituksia.",
   "You have no upcoming stays.": "Sinulla ei ole tulevia majoituksia.",
+  "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your card was successfully removed!": "Korttisi poistettiin onnistuneesti!",
   "Your card was successfully saved!": "Korttisi tallennettu onnistuneesti!",
-  "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your current level": "Nykyinen tasosi",
   "Your details": "Tietosi",
   "Your level": "Tasosi",
@@ -284,5 +269,23 @@
   "Zip code": "Postinumero",
   "Zoo": "Eläintarha",
   "Zoom in": "Lähennä",
-  "Zoom out": "Loitonna"
+  "Zoom out": "Loitonna",
+  "as of today": "tänään",
+  "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
+  "by": "mennessä",
+  "characters": "hahmoja",
+  "hotelPages.rooms.roomCard.person": "henkilö",
+  "hotelPages.rooms.roomCard.persons": "Henkilöä",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
+  "km to city center": "km keskustaan",
+  "next level:": "pistettä tasolle:",
+  "night": "yö",
+  "nights": "yötä",
+  "number": "määrä",
+  "or": "tai",
+  "points": "pistettä",
+  "special character": "erikoishahmo",
+  "spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
+  "to": "to",
+  "uppercase letter": "iso kirjain"
 }
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index d6e851bfd..90b0af3d2 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -25,15 +25,12 @@
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
-  "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
   "Breakfast": "Frokost",
   "Breakfast excluded": "Frokost ekskludert",
   "Breakfast included": "Frokost inkludert",
   "Bus terminal": "Bussterminal",
   "Business": "Forretnings",
-  "by": "innen",
   "Cancel": "Avbryt",
-  "characters": "tegn",
   "Check in": "Sjekk inn",
   "Check out": "Sjekk ut",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.",
@@ -72,6 +69,7 @@
   "Distance to city centre": "{number}km til sentrum",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?",
   "Download the Scandic app": "Last ned Scandic-appen",
+  "Earn bonus nights & points": "Tjen bonusnetter og poeng",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
   "Email": "E-post",
@@ -79,9 +77,9 @@
   "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",
   "Flexibility": "Fleksibilitet",
@@ -90,6 +88,7 @@
   "Free rebooking": "Gratis ombooking",
   "From": "Fra",
   "Get inspired": "Bli inspirert",
+  "Get member benefits & offers": "Få medlemsfordeler og tilbud",
   "Go back to edit": "Gå tilbake til redigering",
   "Go back to overview": "Gå tilbake til oversikten",
   "Guests & Rooms": "Gjester & rom",
@@ -99,15 +98,12 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotelfaciliteter",
   "Hotel surroundings": "Hotellomgivelser",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
   "Image gallery": "Bildegalleri",
   "Join Scandic Friends": "Bli med i Scandic Friends",
-  "km to city center": "km til sentrum",
+  "Join at no cost": "Bli med uten kostnad",
   "Language": "Språk",
   "Latest searches": "Siste søk",
   "Level": "Nivå",
@@ -134,9 +130,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris fra",
   "Members": "Medlemmer",
-  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
   "Membership ID copied to clipboard": "Medlems-ID kopiert til utklippstavlen",
+  "Membership cards": "Medlemskort",
   "Menu": "Menu",
   "Modify": "Endre",
   "Month": "Måned",
@@ -151,9 +147,6 @@
   "Nearby companies": "Nærliggende selskaper",
   "New password": "Nytt passord",
   "Next": "Neste",
-  "next level:": "Neste nivå:",
-  "night": "natt",
-  "nights": "netter",
   "Nights needed to level up": "Netter som trengs for å komme opp i nivå",
   "No content published": "Ingen innhold publisert",
   "No matching location found": "Fant ingen samsvarende plassering",
@@ -164,13 +157,11 @@
   "Non-refundable": "Ikke-refunderbart",
   "Not found": "Ikke funnet",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen",
-  "number": "antall",
   "On your journey": "På reisen din",
   "Open": "Åpen",
   "Open language menu": "Åpne språkmenyen",
   "Open menu": "Åpne menyen",
   "Open my pages menu": "Åpne mine sider menyen",
-  "or": "eller",
   "Overview": "Oversikt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garasje",
@@ -182,7 +173,6 @@
   "Phone is required": "Telefon kreves",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Vennligst oppgi et gyldig telefonnummer",
-  "points": "poeng",
   "Points": "Poeng",
   "Points being calculated": "Poeng beregnes",
   "Points earned prior to May 1, 2021": "Opptjente poeng før 1. mai 2021",
@@ -225,29 +215,25 @@
   "Something went wrong and we couldn't add your card. Please try again later.": "Noe gikk galt, og vi kunne ikke legge til kortet ditt. Prøv igjen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noe gikk galt, og vi kunne ikke fjerne kortet ditt. Vennligst prøv igjen senere.",
   "Something went wrong!": "Noe gikk galt!",
-  "special character": "spesiell karakter",
-  "spendable points expiring by": "{points} Brukbare poeng utløper innen {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gate",
   "Successfully updated profile!": "Vellykket oppdatert profil!",
   "Summary": "Sammendrag",
+  "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortell oss hvilken informasjon og hvilke oppdateringer du ønsker å motta, og hvordan, ved å klikke på lenken nedenfor.",
   "Thank you": "Takk",
   "Theatre": "Teater",
   "There are no transactions to display": "Det er ingen transaksjoner å vise",
   "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
-  "to": "til",
   "Total Points": "Totale poeng",
   "Tourist": "Turist",
   "Transaction date": "Transaksjonsdato",
   "Transactions": "Transaksjoner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} anmeldelser på Tripadvisor)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Sengtype",
   "Type of room": "Romtype",
-  "uppercase letter": "stor bokstav",
   "Use bonus cheque": "Bruk bonussjekk",
   "Use code/voucher": "Bruk kode/voucher",
   "User information": "Brukerinformasjon",
@@ -274,9 +260,9 @@
   "You canceled adding a new credit card.": "Du kansellerte å legge til et nytt kredittkort.",
   "You have no previous stays.": "Du har ingen tidligere opphold.",
   "You have no upcoming stays.": "Du har ingen kommende opphold.",
+  "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your card was successfully removed!": "Kortet ditt ble fjernet!",
   "Your card was successfully saved!": "Kortet ditt ble lagret!",
-  "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your current level": "Ditt nåværende nivå",
   "Your details": "Dine detaljer",
   "Your level": "Ditt nivå",
@@ -284,5 +270,23 @@
   "Zip code": "Post kode",
   "Zoo": "Dyrehage",
   "Zoom in": "Zoom inn",
-  "Zoom out": "Zoom ut"
+  "Zoom out": "Zoom ut",
+  "as of today": "per idag",
+  "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
+  "by": "innen",
+  "characters": "tegn",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
+  "km to city center": "km til sentrum",
+  "next level:": "Neste nivå:",
+  "night": "natt",
+  "nights": "netter",
+  "number": "antall",
+  "or": "eller",
+  "points": "poeng",
+  "special character": "spesiell karakter",
+  "spendable points expiring by": "{points} Brukbare poeng utløper innen {date}",
+  "to": "til",
+  "uppercase letter": "stor bokstav"
 }
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 981c4be73..9063010e7 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -25,15 +25,12 @@
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
-  "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
   "Breakfast": "Frukost",
   "Breakfast excluded": "Frukost ingår ej",
   "Breakfast included": "Frukost ingår",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
-  "by": "innan",
   "Cancel": "Avbryt",
-  "characters": "tecken",
   "Check in": "Checka in",
   "Check out": "Checka ut",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.",
@@ -72,6 +69,7 @@
   "Distance to city centre": "{number}km till centrum",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?",
   "Download the Scandic app": "Ladda ner Scandic-appen",
+  "Earn bonus nights & points": "Tjäna bonusnätter och poäng",
   "Edit": "Redigera",
   "Edit profile": "Redigera profil",
   "Email": "E-post",
@@ -79,9 +77,9 @@
   "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
   "Explore nearby": "Utforska i närheten",
   "Extras to your booking": "Extra tillval till din bokning",
+  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Det gick inte att ta bort kreditkortet, försök igen senare.",
   "Fair": "Mässa",
-  "FAQ": "FAQ",
   "Find booking": "Hitta bokning",
   "Find hotels": "Hitta hotell",
   "Flexibility": "Flexibilitet",
@@ -90,6 +88,7 @@
   "Free rebooking": "Fri ombokning",
   "From": "Från",
   "Get inspired": "Bli inspirerad",
+  "Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
   "Go back to edit": "Gå tillbaka till redigeringen",
   "Go back to overview": "Gå tillbaka till översikten",
   "Guests & Rooms": "Gäster & rum",
@@ -99,15 +98,12 @@
   "Hotel": "Hotell",
   "Hotel facilities": "Hotellfaciliteter",
   "Hotel surroundings": "Hotellomgivning",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
   "Hotels": "Hotell",
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
   "Image gallery": "Bildgalleri",
   "Join Scandic Friends": "Gå med i Scandic Friends",
-  "km to city center": "km till stadens centrum",
+  "Join at no cost": "Gå med utan kostnad",
   "Language": "Språk",
   "Latest searches": "Senaste sökningarna",
   "Level": "Nivå",
@@ -134,9 +130,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris från",
   "Members": "Medlemmar",
-  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
   "Membership ID copied to clipboard": "Medlems-ID kopierat till urklipp",
+  "Membership cards": "Medlemskort",
   "Menu": "Meny",
   "Modify": "Ändra",
   "Month": "Månad",
@@ -151,9 +147,6 @@
   "Nearby companies": "Närliggande företag",
   "New password": "Nytt lösenord",
   "Next": "Nästa",
-  "next level:": "Nästa nivå:",
-  "night": "natt",
-  "nights": "nätter",
   "Nights needed to level up": "Nätter som behövs för att gå upp i nivå",
   "No content published": "Inget innehåll publicerat",
   "No matching location found": "Ingen matchande plats hittades",
@@ -164,13 +157,11 @@
   "Non-refundable": "Ej återbetalningsbar",
   "Not found": "Hittades inte",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} vuxen",
-  "number": "nummer",
   "On your journey": "På din resa",
   "Open": "Öppna",
   "Open language menu": "Öppna språkmenyn",
   "Open menu": "Öppna menyn",
   "Open my pages menu": "Öppna mina sidor menyn",
-  "or": "eller",
   "Overview": "Översikt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garage",
@@ -182,7 +173,6 @@
   "Phone is required": "Telefonnummer är obligatorisk",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Var vänlig och ange ett giltigt telefonnummer",
-  "points": "poäng",
   "Points": "Poäng",
   "Points being calculated": "Poäng beräknas",
   "Points earned prior to May 1, 2021": "Intjänade poäng före den 1 maj 2021",
@@ -225,26 +215,23 @@
   "Something went wrong and we couldn't add your card. Please try again later.": "Något gick fel och vi kunde inte lägga till ditt kort. Försök igen senare.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Något gick fel och vi kunde inte ta bort ditt kort. Försök igen senare.",
   "Something went wrong!": "Något gick fel!",
-  "special character": "speciell karaktär",
-  "spendable points expiring by": "{points} poäng förfaller {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gata",
   "Successfully updated profile!": "Profilen har uppdaterats framgångsrikt!",
   "Summary": "Sammanfattning",
+  "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Berätta för oss vilken information och vilka uppdateringar du vill få och hur genom att klicka på länken nedan.",
   "Thank you": "Tack",
   "Theatre": "Teater",
   "There are no transactions to display": "Det finns inga transaktioner att visa",
   "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
-  "to": "till",
   "Total Points": "Poäng totalt",
   "Tourist": "Turist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktioner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Sängtyp",
   "Type of room": "Rumstyp",
   "uppercase letter": "stor bokstav",
@@ -274,9 +261,9 @@
   "You canceled adding a new credit card.": "Du avbröt att lägga till ett nytt kreditkort.",
   "You have no previous stays.": "Du har inga tidigare vistelser.",
   "You have no upcoming stays.": "Du har inga planerade resor.",
+  "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your card was successfully removed!": "Ditt kort har tagits bort!",
   "Your card was successfully saved!": "Ditt kort har sparats!",
-  "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your current level": "Din nuvarande nivå",
   "Your details": "Dina uppgifter",
   "Your level": "Din nivå",
@@ -284,5 +271,23 @@
   "Zip code": "Postnummer",
   "Zoo": "Djurpark",
   "Zoom in": "Zooma in",
-  "Zoom out": "Zooma ut"
+  "Zoom out": "Zooma ut",
+  "as of today": "från och med idag",
+  "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
+  "by": "innan",
+  "characters": "tecken",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
+  "km to city center": "km till stadens centrum",
+  "next level:": "Nästa nivå:",
+  "night": "natt",
+  "nights": "nätter",
+  "number": "nummer",
+  "or": "eller",
+  "points": "poäng",
+  "special character": "speciell karaktär",
+  "spendable points expiring by": "{points} poäng förfaller {date}",
+  "to": "till",
+  "uppercase letter": "stor bokstav"
 }
diff --git a/lib/discriminatedUnion.ts b/lib/discriminatedUnion.ts
index 2f7c5c12a..4da9486bb 100644
--- a/lib/discriminatedUnion.ts
+++ b/lib/discriminatedUnion.ts
@@ -21,7 +21,7 @@ import type {
  * is an Interface e.g).
  */
 
-export function discriminatedUnion<T extends Option>(options: T[]) {
+export function discriminatedUnion<R>(options: Option[]) {
   return z
     .discriminatedUnion("__typename", [
       z.object({ __typename: z.literal(undefined) }),
@@ -37,6 +37,12 @@ export function discriminatedUnion<T extends Option>(options: T[]) {
       }
       throw new Error(error.message)
     })
+    .transform((data) => {
+      if (data.__typename === "undefined" || data.__typename === undefined) {
+        return null
+      }
+      return data as R
+    })
 }
 
 export function discriminatedUnionArray<T extends Option>(options: T[]) {
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index 6130a8556..c1e58bcd7 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -10,6 +10,12 @@ export const getProfile = cache(async function getMemoizedProfile() {
   return serverClient().user.get()
 })
 
+export const getProfileSafely = cache(
+  async function getMemoizedProfileSafely() {
+    return serverClient().user.getSafely()
+  }
+)
+
 export const getFooter = cache(async function getMemoizedFooter() {
   return serverClient().contentstack.base.footer()
 })
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index ddca32139..02651dfe2 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -551,10 +551,13 @@ const linkSchema = z
   })
   .transform((data) => {
     if (data.linkConnection.edges.length) {
-      const link = pageLinks.transform(data.linkConnection.edges[0].node)
-      if (link) {
-        return {
-          link,
+      const linkNode = data.linkConnection.edges[0].node
+      if (linkNode) {
+        const link = pageLinks.transform(linkNode)
+        if (link) {
+          return {
+            link,
+          }
         }
       }
     }
diff --git a/server/routers/contentstack/schemas/linkConnection.ts b/server/routers/contentstack/schemas/linkConnection.ts
index f70e8dd81..902e6fca1 100644
--- a/server/routers/contentstack/schemas/linkConnection.ts
+++ b/server/routers/contentstack/schemas/linkConnection.ts
@@ -25,10 +25,13 @@ export const linkConnectionSchema = z
   })
   .transform((data) => {
     if (data.linkConnection.edges.length) {
-      const link = pageLinks.transform(data.linkConnection.edges[0].node)
-      if (link) {
-        return {
-          link,
+      const linkNode = data.linkConnection.edges[0].node
+      if (linkNode) {
+        const link = pageLinks.transform(linkNode)
+        if (link) {
+          return {
+            link,
+          }
         }
       }
     }
@@ -54,17 +57,20 @@ export const linkConnectionRefs = z
     linkConnection: z.object({
       edges: z.array(
         z.object({
-          node: linkRefsUnionSchema,
+          node: discriminatedUnion(linkRefsUnionSchema.options),
         })
       ),
     }),
   })
   .transform((data) => {
     if (data.linkConnection.edges.length) {
-      const link = pageLinks.transformRef(data.linkConnection.edges[0].node)
-      if (link) {
-        return {
-          link,
+      const linkNode = data.linkConnection.edges[0].node
+      if (linkNode) {
+        const link = pageLinks.transformRef(linkNode)
+        if (link) {
+          return {
+            link,
+          }
         }
       }
     }
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index b3e9a1e4d..28dee9cd2 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,4 +1,5 @@
 import { metrics } from "@opentelemetry/api"
+import { SafeParseSuccess } from "zod"
 
 import * as api from "@/lib/api"
 import {
@@ -27,8 +28,8 @@ import type {
   LoginType,
   TrackingSDKUserData,
 } from "@/types/components/tracking"
-import { BlocksEnums } from "@/types/enums/blocks"
 import { Transactions } from "@/types/enums/transactions"
+import { User } from "@/types/user"
 import type { MembershipLevel } from "@/constants/membershipLevels"
 
 // OpenTelemetry metrics: User
@@ -161,6 +162,51 @@ export async function getVerifiedUser({ session }: { session: Session }) {
   return verifiedData
 }
 
+function parsedUser(data: User, isMFA: boolean) {
+  const country = countries.find((c) => c.code === data.address.countryCode)
+
+  const user = {
+    address: {
+      city: data.address.city,
+      country: country?.name ?? "",
+      countryCode: data.address.countryCode,
+      streetAddress: data.address.streetAddress,
+      zipCode: data.address.zipCode,
+    },
+    dateOfBirth: data.dateOfBirth,
+    email: data.email,
+    firstName: data.firstName,
+    language: data.language,
+    lastName: data.lastName,
+    membership: getMembership(data.memberships),
+    memberships: data.memberships,
+    name: `${data.firstName} ${data.lastName}`,
+    phoneNumber: data.phoneNumber,
+    profileId: data.profileId,
+  }
+
+  if (!isMFA) {
+    if (user.address.city) {
+      user.address.city = maskValue.text(user.address.city)
+    }
+    if (user.address.streetAddress) {
+      user.address.streetAddress = maskValue.text(user.address.streetAddress)
+    }
+
+    user.address.zipCode = data.address?.zipCode
+      ? maskValue.text(data.address.zipCode)
+      : ""
+
+    user.dateOfBirth = maskValue.all(user.dateOfBirth)
+
+    user.email = maskValue.email(user.email)
+
+    user.phoneNumber = user.phoneNumber ? maskValue.phone(user.phoneNumber) : ""
+  }
+
+  return user
+}
+
 export const userQueryRouter = router({
   get: protectedProcedure
     .use(async function (opts) {
@@ -184,57 +230,25 @@ export const userQueryRouter = router({
         return data
       }
 
-      const verifiedData = data
-
-      const country = countries.find(
-        (c) => c.code === verifiedData.data.address.countryCode
-      )
-
-      const user = {
-        address: {
-          city: verifiedData.data.address.city,
-          country: country?.name ?? "",
-          countryCode: verifiedData.data.address.countryCode,
-          streetAddress: verifiedData.data.address.streetAddress,
-          zipCode: verifiedData.data.address.zipCode,
-        },
-        dateOfBirth: verifiedData.data.dateOfBirth,
-        email: verifiedData.data.email,
-        firstName: verifiedData.data.firstName,
-        language: verifiedData.data.language,
-        lastName: verifiedData.data.lastName,
-        membership: getMembership(verifiedData.data.memberships),
-        memberships: verifiedData.data.memberships,
-        name: `${verifiedData.data.firstName} ${verifiedData.data.lastName}`,
-        phoneNumber: verifiedData.data.phoneNumber,
-        profileId: verifiedData.data.profileId,
-      }
-
-      if (!ctx.isMFA) {
-        if (user.address.city) {
-          user.address.city = maskValue.text(user.address.city)
-        }
-        if (user.address.streetAddress) {
-          user.address.streetAddress = maskValue.text(
-            user.address.streetAddress
-          )
-        }
-
-        user.address.zipCode = verifiedData.data.address?.zipCode
-          ? maskValue.text(verifiedData.data.address.zipCode)
-          : ""
-
-        user.dateOfBirth = maskValue.all(user.dateOfBirth)
-
-        user.email = maskValue.email(user.email)
-
-        user.phoneNumber = user.phoneNumber
-          ? maskValue.phone(user.phoneNumber)
-          : ""
-      }
-
-      return user
+      return parsedUser(data.data, ctx.isMFA)
     }),
+  getSafely: safeProtectedProcedure.query(async function getUser({ ctx }) {
+    if (!ctx.session) {
+      return null
+    }
+
+    const data = await getVerifiedUser({ session: ctx.session })
+
+    if (!data) {
+      return null
+    }
+
+    if ("error" in data) {
+      return data
+    }
+
+    return parsedUser(data.data, true)
+  }),
   name: safeProtectedProcedure.query(async function ({ ctx }) {
     if (!ctx.session) {
       return null
diff --git a/types/components/enterDetails/details.ts b/types/components/enterDetails/details.ts
new file mode 100644
index 000000000..84996da56
--- /dev/null
+++ b/types/components/enterDetails/details.ts
@@ -0,0 +1,11 @@
+import { z } from "zod"
+
+import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
+
+import { User } from "@/types/user"
+
+export interface DetailsSchema extends z.output<typeof detailsSchema> {}
+
+export interface DetailsProps {
+  user: User | null
+}
diff --git a/types/components/search.ts b/types/components/search.ts
index b35f9d3d2..42401045f 100644
--- a/types/components/search.ts
+++ b/types/components/search.ts
@@ -15,40 +15,43 @@ export interface SearchListProps {
   getItemProps: PropGetters<unknown>["getItemProps"]
   getMenuProps: PropGetters<unknown>["getMenuProps"]
   isOpen: boolean
+  handleClearSearchHistory: () => void
   highlightedIndex: HighlightedIndex
   locations: Locations
   search: string
   searchHistory: Locations | null
 }
 
-export interface ListProps {
-  getItemProps: PropGetters<unknown>["getItemProps"]
-  highlightedIndex: HighlightedIndex
+export interface ListProps
+  extends Pick<
+    SearchListProps,
+    "getItemProps" | "highlightedIndex" | "locations"
+  > {
   initialIndex?: number
   label?: string
-  locations: Locations
 }
 
-export interface ListItemProps {
-  getItemProps: PropGetters<unknown>["getItemProps"]
-  highlightedIndex: HighlightedIndex
+export interface ListItemProps
+  extends Pick<SearchListProps, "getItemProps" | "highlightedIndex"> {
   index: number
   location: Location
 }
 
 export interface DialogProps
   extends React.PropsWithChildren,
-    VariantProps<typeof dialogVariants> {
+    VariantProps<typeof dialogVariants>,
+    Pick<SearchListProps, "getMenuProps"> {
   className?: string
-  getMenuProps: PropGetters<unknown>["getMenuProps"]
 }
 
-export interface ErrorDialogProps extends React.PropsWithChildren {
-  getMenuProps: PropGetters<unknown>["getMenuProps"]
-}
+export interface ErrorDialogProps
+  extends React.PropsWithChildren,
+    Pick<SearchListProps, "getMenuProps"> {}
 
-export interface ClearSearchButtonProps {
-  getItemProps: PropGetters<unknown>["getItemProps"]
-  highlightedIndex: HighlightedIndex
+export interface ClearSearchButtonProps
+  extends Pick<
+    SearchListProps,
+    "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
+  > {
   index: number
 }
diff --git a/types/requests/system.ts b/types/requests/system.ts
index d3d053dac..2fb397201 100644
--- a/types/requests/system.ts
+++ b/types/requests/system.ts
@@ -1,9 +1,7 @@
-import { Lang } from "@/constants/languages"
+import { z } from "zod"
+
+import { systemSchema } from "@/server/routers/contentstack/schemas/system"
 
 export interface System {
-  system: {
-    content_type_uid: string
-    locale: Lang
-    uid: string
-  }
+  system: z.output<typeof systemSchema>
 }