Changed my reservations page reservation tags

My reservations page will now show a state label when a normal paid reservation is waiting for a payment. This will indicate that the user's payment has been aborted.

app/shared/reservation-state-label/ReservationStateLabel.js

@@ -7,7 +7,10 @@ import Label from 'shared/label';
 import { injectT } from 'i18n';
 
 function ReservationStateLabel({ reservation, t }) {
-  if (!reservation.needManualConfirmation && reservation.state !== 'cancelled') {
+  const states = constants.RESERVATION_STATE;
+  const statesToExclude = [states.CANCELLED, states.WAITING_FOR_PAYMENT];
+
+  if (!reservation.needManualConfirmation && !statesToExclude.includes(reservation.state)) {
     return <span />;
   }
   const { labelBsStyle, labelTextId } = constants.RESERVATION_STATE_LABELS[reservation.state];

app/shared/reservation-state-label/ReservationStateLabel.spec.js

@@ -70,6 +70,11 @@ describe('shared/reservation-state-label/ReservationStateLabel', () => {
       const state = 'requested';
       getTests(needManualConfirmation, state);
     });
+
+    describe('if reservation state is "waiting_for_payment"', () => {
+      const state = 'waiting_for_payment';
+      getTests(needManualConfirmation, state);
+    });
   });
 
   describe('if reservation does not need manual confirmation', () => {
@@ -80,6 +85,11 @@ describe('shared/reservation-state-label/ReservationStateLabel', () => {
       getTests(needManualConfirmation, state);
     });
 
+    describe('if reservation state is "waiting_for_payment"', () => {
+      const state = 'waiting_for_payment';
+      getTests(needManualConfirmation, state);
+    });
+
     describe('if reservation state is "confirmed"', () => {
       const state = 'confirmed';