From 7eb20e75de3687f37b0000057c99d23925939d72 Mon Sep 17 00:00:00 2001
From: Joonatan Kuosa <joonatan.kuosa@gmail.com>
Date: Fri, 7 Mar 2025 16:21:58 +0200
Subject: [PATCH] fix: incorrect bg colour on cancelled page info card

---
 apps/ui/components/reservation/EditStep0.tsx         |  2 +-
 apps/ui/components/reservation/EditStep1.tsx         |  2 +-
 .../reservation/ReservationCancellation.tsx          |  4 ++--
 .../components/reservation/ReservationInfoCard.tsx   | 12 +++++++-----
 apps/ui/pages/reservations/[id]/confirmation.tsx     |  2 +-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
index 4d73dfb2dc..94e8e67543 100644
--- a/apps/ui/components/reservation/EditStep0.tsx
+++ b/apps/ui/components/reservation/EditStep0.tsx
@@ -222,7 +222,7 @@ export function EditStep0({
     <>
       <StyledReservationInfoCard
         reservation={reservation}
-        type="confirmed"
+        type="pending"
         disableImage
       />
       {/* TODO on mobile in the design this is after the calendar but before action buttons */}
diff --git a/apps/ui/components/reservation/EditStep1.tsx b/apps/ui/components/reservation/EditStep1.tsx
index 9d3b78e57f..f157fd55a6 100644
--- a/apps/ui/components/reservation/EditStep1.tsx
+++ b/apps/ui/components/reservation/EditStep1.tsx
@@ -144,7 +144,7 @@ export function EditStep1({
     <>
       <StyledReservationInfoCard
         reservation={modifiedReservation}
-        type="confirmed"
+        type="pending"
       />
       <StyledForm
         onSubmit={(e) => {
diff --git a/apps/ui/components/reservation/ReservationCancellation.tsx b/apps/ui/components/reservation/ReservationCancellation.tsx
index dc9adbe5a2..913083013b 100644
--- a/apps/ui/components/reservation/ReservationCancellation.tsx
+++ b/apps/ui/components/reservation/ReservationCancellation.tsx
@@ -32,7 +32,7 @@ const infoCss = css`
   }
 `;
 
-const StyledInfoCard = styled(ReservationInfoCard)`
+const StyledReservationInfoCard = styled(ReservationInfoCard)`
   ${infoCss}
 `;
 
@@ -105,7 +105,7 @@ export function ReservationCancellation(props: CancellationProps): JSX.Element {
       {reservation.recurringReservation ? (
         <ApplicationInfoCard reservation={reservation} />
       ) : (
-        <StyledInfoCard reservation={reservation} type="confirmed" />
+        <StyledReservationInfoCard reservation={reservation} type="complete" />
       )}
       <CancellationForm
         onNext={onSubmit}
diff --git a/apps/ui/components/reservation/ReservationInfoCard.tsx b/apps/ui/components/reservation/ReservationInfoCard.tsx
index 8781fe25c3..0716320b79 100644
--- a/apps/ui/components/reservation/ReservationInfoCard.tsx
+++ b/apps/ui/components/reservation/ReservationInfoCard.tsx
@@ -28,12 +28,12 @@ import {
   getTranslationSafe,
 } from "common/src/common/util";
 
-type Type = "pending" | "confirmed" | "complete";
-
 const Wrapper = styled.div<{ $type: Type }>`
-  /* stylelint-disable custom-property-pattern */
+  --bg-color-complete: var(--color-silver-light);
+  --bg-color-pending: var(--color-gold-light);
   background-color: var(
-    --color-${({ $type }) => ($type === "complete" ? "silver" : "gold")}-light
+    ${({ $type }) =>
+      $type === "complete" ? "--bg-color-complete" : "--bg-color-pending"}
   );
 `;
 
@@ -61,6 +61,8 @@ const Subheading = styled.p`
   margin: 0;
 `;
 
+type Type = "pending" | "complete";
+
 type Props = {
   reservation: ReservationInfoCardFragment;
   type: Type;
@@ -142,7 +144,7 @@ export function ReservationInfoCard({
             {name}
           </StyledLink>
         </H4>
-        {(type === "confirmed" || type === "complete") && (
+        {type === "complete" && (
           <Subheading>
             {t("reservations:reservationNumber")}:{" "}
             <span data-testid="reservation__reservation-info-card__reservationNumber">
diff --git a/apps/ui/pages/reservations/[id]/confirmation.tsx b/apps/ui/pages/reservations/[id]/confirmation.tsx
index b4efad8565..83d784e3a8 100644
--- a/apps/ui/pages/reservations/[id]/confirmation.tsx
+++ b/apps/ui/pages/reservations/[id]/confirmation.tsx
@@ -57,7 +57,7 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
     <>
       <Breadcrumb routes={routes} />
       <ReservationPageWrapper $nRows={4}>
-        <ReservationInfoCard reservation={reservation} type="confirmed" />
+        <ReservationInfoCard reservation={reservation} type="pending" />
         <ReservationConfirmation
           apiBaseUrl={apiBaseUrl}
           reservation={reservation}