block shift exchange if suspended and no delay

members_space/static/css/members-space-shifts-exchange.css

-#shifts_exchange_content {
+.shifts_exchange_page_content {
     width: 95%;
     margin: 3rem auto;
     display: flex;
     flex-direction: column;
 }
 
+/* -- Suspended screen */
+
+#suspended_content {
+    align-items: center;
+    text-align: center;
+}
+
+.select_makeups {
+    margin: 2rem 0;
+}
+
+/* -- Calendar screen, shifts list */
+
 #shifts_list {
     flex-direction: column;
     display: none;
@@ -36,12 +49,14 @@
     cursor: not-allowed;
 }
 
+/* -- Calendar screen, makeups message */
+
 #need_to_select_makeups_message {
     display: none;
     align-self: center;
     background-color: #d9534f;
     color: white;
-    margin: 0 1rem 1rem 1rem;
+    margin: 0 1rem 2rem 1rem;
     padding: 1rem 1.25rem;
     text-align: center;
 }
@@ -56,8 +71,10 @@
     }
 }
 
+/* -- Calendar screen, calendar */
+
 #calendar {
-    margin: 3rem 1rem;
+    margin: 2rem 1rem;
     display: none;
 }
 

members_space/static/js/members-space-shifts-exchange.js

@@ -169,9 +169,10 @@ function init_shifts_list() {
     }
 }
 
-function init_shifts_exchange() {
-    // TODO : loading
-
+/**
+ * Inits the page when the calendar is displayed
+ */
+function init_calendar_page() {
     if (incoming_shifts !== null) {
         init_shifts_list();
     } else {
@@ -287,3 +288,42 @@ function init_shifts_exchange() {
 
     calendar.render();
 }
+
+function init_shifts_exchange() {
+    // TODO : loading
+    // TODO : suspended
+
+    $(".shifts_exchange_page_content").hide();
+
+    if (partner_data.cooperative_state === 'unsubscribed') {
+        // TODO
+        // $(".unsuscribed_form_link")
+        //     .show()
+        //     .attr('href', unsuscribe_form_link)
+        //     .on('click', function() {
+        //         setTimeout(500, () => {
+        //             $(this).removeClass('active');
+        //         });
+        //     });
+    } else if (partner_data.cooperative_state === 'suspended'
+                && partner_data.date_delay_stop === 'False') {
+        $("#suspended_content").show();
+
+        $(".select_makeups").on('click', () => {
+            openModal();
+
+            // Create 6 month delay
+            request_delay()
+                .then(() => {
+                    $("#suspended_content").hide();
+                    $("#shifts_exchange_content").show();
+                    closeModal();
+                    init_calendar_page();   
+                });
+        });
+    } else {
+        $("#shifts_exchange_content").show();
+        init_calendar_page();
+    }
+
+}
\ No newline at end of file

templates/members_space/shifts_exchange.html

 <div id="shifts_exchange">
-    <div id="shifts_exchange_content">
+    <div id="suspended_content" class="shifts_exchange_page_content">
+        <h3>Je suis suspendu.e, je dois sélectionner mes rattrapages pour pouvoir refaire mes courses.</h3>
+        <button type="button" class="btn--danger select_makeups">
+            Je sélectionne mes rattrapages
+        </button>
+    </div>
+    <div id="shifts_exchange_content" class="shifts_exchange_page_content">
         <div id="need_to_select_makeups_message">
             <span class="select_makeups_message_block">
                 <i class="fas fa-exclamation-triangle makeups_warning"></i>