fix: break out css variables

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

@@ -111,6 +111,13 @@ export default async function StepPage({
     publicPrice: roomAvailability.publicRate!.localPrice.pricePerStay,
   }
 
+  const memberPrice = roomAvailability.memberRate
+    ? {
+        price: roomAvailability.memberRate.localPrice.pricePerStay,
+        currency: roomAvailability.memberRate.localPrice.currency,
+      }
+    : undefined
+
   return (
     <StepsProvider
       bedTypes={roomAvailability.bedTypes}
@@ -152,7 +159,7 @@ export default async function StepPage({
           step={StepEnum.details}
           label={intl.formatMessage({ id: "Enter your details" })}
         >
-          <Details user={user} />
+          <Details user={user} memberPrice={memberPrice} />
         </SectionAccordion>
 
         <SectionAccordion

components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx

@@ -6,23 +6,19 @@ import { privacyPolicy } from "@/constants/currentWebHrefs"
 
 import { CheckIcon } from "@/components/Icons"
 import LoginButton from "@/components/LoginButton"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import useLang from "@/hooks/useLang"
 
-import Link from "../../Link"
-import Caption from "../../Text/Caption"
-import Footnote from "../../Text/Footnote"
-import Checkbox from "../Checkbox"
-
 import styles from "./joinScandicFriendsCard.module.css"
 
-type JoinScandicFriendsCardProps = {
+import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
-  name: string
-  difference: { price: number; currency: string }
-}
 
 export default function JoinScandicFriendsCard({
   name,
-  difference,
+  memberPrice,
 }: JoinScandicFriendsCardProps) {
   const lang = useLang()
   const intl = useIntl()
@@ -33,21 +29,25 @@ export default function JoinScandicFriendsCard({
     { title: intl.formatMessage({ id: "Join at no cost" }) },
   ]
 
+  const saveOnJoiningLabel = intl.formatMessage(
+    {
+      id: "Only pay {amount} {currency}",
+    },
+    {
+      amount: intl.formatNumber(memberPrice?.price ?? 0),
+      currency: memberPrice?.currency ?? "SEK",
+    }
+  )
+
   return (
     <div className={styles.cardContainer}>
       <Checkbox name={name} className={styles.checkBox}>
         <div>
-          <Caption type="label" textTransform="uppercase" color="red">
+          {memberPrice ? (
-            {intl.formatMessage(
+            <Caption type="label" textTransform="uppercase" color="red">
-              {
+              {saveOnJoiningLabel}
-                id: "Only pay {amount} {currency}",
+            </Caption>
-              },
+          ) : null}
-              {
-                amount: intl.formatNumber(difference.price),
-                currency: difference.currency,
-              }
-            )}
-          </Caption>
           <Caption
             type="label"
             textTransform="uppercase"

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,10 +10,10 @@ import { useStepsStore } from "@/stores/steps"
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
 
@@ -25,7 +25,7 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/details"
 
 const formID = "enter-details"
-export default function Details({ user }: DetailsProps) {
+export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
   const initialData = useDetailsStore((state) => ({
     countryCode: state.data.countryCode,
@@ -68,7 +68,6 @@ export default function Details({ user }: DetailsProps) {
     [completeStep, updateDetails]
   )
 
-  const joinValue = methods.watch("join")
   return (
     <FormProvider {...methods}>
       <form
@@ -77,10 +76,7 @@ export default function Details({ user }: DetailsProps) {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         {user ? null : (
-          <JoinScandicFriendsCard
+          <JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
-            name="join"
-            difference={{ price: 1000, currency: "SEK" }}
-          />
         )}
         <div className={styles.container}>
           <Footnote

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -66,7 +66,7 @@ export default function SectionAccordion({
   const textColor =
     isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
-    <div className={styles.main} data-open={isOpen} data-step={step}>
+    <div className={styles.accordion} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -1,4 +1,7 @@
-.main {
+.accordion {
+  --header-height: 2.4em;
+  --circle-height: 24px;
+
   gap: var(--Spacing-x3);
   width: 100%;
   padding-top: var(--Spacing-x3);
@@ -7,12 +10,12 @@
   display: grid;
   grid-template-areas: "circle header" "content content";
   grid-template-columns: auto 1fr;
-  grid-template-rows: 2.4em 0fr;
+  grid-template-rows: var(--header-height) 0fr;
 
   column-gap: var(--Spacing-x-one-and-half);
 }
 
-.main:last-child .main {
+.accordion:last-child {
   border-bottom: none;
 }
 
@@ -52,8 +55,8 @@
 }
 
 .circle {
-  width: 24px;
+  width: var(--circle-height);
-  height: 24px;
+  height: var(--circle-height);
   border-radius: 100px;
   transition: background-color 0.4s;
   border: 2px solid var(--Base-Border-Inverted);
@@ -66,16 +69,16 @@
   background-color: var(--UI-Input-Controls-Fill-Selected);
 }
 
-.main[data-open="true"] .circle[data-checked="false"] {
+.accordion[data-open="true"] .circle[data-checked="false"] {
   background-color: var(--UI-Text-Placeholder);
 }
 
-.main[data-open="false"] .circle[data-checked="false"] {
+.accordion[data-open="false"] .circle[data-checked="false"] {
   background-color: var(--Base-Surface-Subtle-Hover);
 }
 
-.main[data-open="true"] {
+.accordion[data-open="true"] {
-  grid-template-rows: 2.4em 1fr;
+  grid-template-rows: var(--header-height) 1fr;
   gap: var(--Spacing-x3);
 }
 
@@ -86,7 +89,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .main {
+  .accordion {
     gap: var(--Spacing-x3);
     grid-template-areas: "circle header" "circle content";
   }
@@ -95,11 +98,11 @@
     top: var(--Spacing-x1);
   }
 
-  .main:not(:last-child) .iconWrapper::after {
+  .accordion:not(:last-child) .iconWrapper::after {
     position: absolute;
     left: 12px;
     bottom: calc(0px - var(--Spacing-x7));
-    top: 24px;
+    top: var(--circle-height);
 
     content: "";
     border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);

components/LoginButton/index.tsx

@@ -31,13 +31,14 @@ export default function LoginButton({
     : login[lang]
 
   useEffect(() => {
-    document
+    function trackLogin() {
-      .getElementById(trackingId)
+      trackLoginClick(position)
-      ?.addEventListener("click", () => trackLoginClick(position))
+    }
+    document.getElementById(trackingId)?.addEventListener("click", trackLogin)
     return () => {
       document
         .getElementById(trackingId)
-        ?.removeEventListener("click", () => trackLoginClick(position))
+        ?.removeEventListener("click", trackLogin)
     }
   }, [position, trackingId])
 

components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css

@@ -1,5 +1,4 @@
 .label {
-  align-self: flex-start;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
@@ -9,7 +8,6 @@
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   transition: all 200ms ease;
   width: min(100%, 600px);
-  height: 100%;
 }
 
 .label:hover {

components/TempDesignSystem/Link/link.module.css

@@ -16,7 +16,7 @@
 .breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +24,7 @@
 .link.breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }

types/components/hotelReservation/enterDetails/details.ts

@@ -6,6 +6,14 @@ import type { SafeUser } from "@/types/user"
 
 export type DetailsSchema = z.output<typeof guestDetailsSchema>
 
+type MemberPrice = { price: number; currency: string }
+
 export interface DetailsProps {
   user: SafeUser
+  memberPrice?: MemberPrice
+}
+
+export type JoinScandicFriendsCardProps = {
+  name: string
+  memberPrice?: MemberPrice
 }