From 63e8a1a4a68e8a8f2d0ca6fd7e61087fbdc517f5 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Fri, 20 Jan 2023 17:05:38 +0100
Subject: [PATCH] (ui) mark canceled slots as this

---
 .../dashboard/reservations/reservations-panel.tsx    |  6 +++---
 .../dashboard/reservations/reservations-panel.scss   | 12 +++++++++++-
 config/locales/app.logged.en.yml                     |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx b/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
index 1c8a8fb9f..680a17b17 100644
--- a/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
+++ b/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
@@ -76,13 +76,13 @@ const ReservationsPanel: React.FC<SpaceReservationsProps> = ({ userId, onError,
    */
   const renderReservation = (reservation: Reservation, state: 'past' | 'futur'): ReactNode => {
     return (
-      <div key={reservation.id} className="reservations-list-item">
+      <div key={reservation.id} className={`reservations-list-item ${isCancelled(reservation) ? 'cancelled' : ''}`}>
         <p className='name'>{reservation.reservable.name}</p>
 
         <div className="date">
           {reservation.slots_reservations_attributes.filter(s => filterSlot(s, state)).map(
-            slotReservation => <p key={slotReservation.id}>
-              {FormatLib.date(slotReservation.slot_attributes.start_at)} - {FormatLib.time(slotReservation.slot_attributes.start_at)} - {FormatLib.time(slotReservation.slot_attributes.end_at)}
+            slotReservation => <p key={slotReservation.id} className={slotReservation.canceled_at ? 'cancelled' : ''}>
+              {slotReservation.canceled_at ? t('app.logged.dashboard.reservations_dashboard.reservations_panel.cancelled_slot') : ''} {FormatLib.date(slotReservation.slot_attributes.start_at)} - {FormatLib.time(slotReservation.slot_attributes.start_at)} - {FormatLib.time(slotReservation.slot_attributes.end_at)}
             </p>
           )}
         </div>
diff --git a/app/frontend/src/stylesheets/modules/dashboard/reservations/reservations-panel.scss b/app/frontend/src/stylesheets/modules/dashboard/reservations/reservations-panel.scss
index 5f49ea2d3..e9244395a 100644
--- a/app/frontend/src/stylesheets/modules/dashboard/reservations/reservations-panel.scss
+++ b/app/frontend/src/stylesheets/modules/dashboard/reservations/reservations-panel.scss
@@ -45,7 +45,17 @@
       grid-column: 1 / -1;
       border-bottom: 1px solid var(--gray-soft-dark);
     }
-    .reservations-list-item { font-weight: 400; }
+    .reservations-list-item {
+      font-weight: 400;
+
+      &.cancelled {
+        color: var(--gray-soft-darkest);
+      }
+
+      .date p.cancelled {
+        color: var(--gray-soft-darkest);
+      }
+    }
   }
 
   .no-reservations {
diff --git a/config/locales/app.logged.en.yml b/config/locales/app.logged.en.yml
index 548f7818e..33587a88d 100644
--- a/config/locales/app.logged.en.yml
+++ b/config/locales/app.logged.en.yml
@@ -153,6 +153,7 @@ en:
             history: "History"
             no_reservation: "No reservation"
             show_more: "Show more"
+            cancelled_slot: "Cancelled"
           credits_panel:
             title: "My credits"
             info: "Your subscription comes with free credits you can use on reservations"