NewDesign: list of avis

app/assets/images/icons/bubble.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="#CCC" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.754 19.498l-.007-.006A9 9 0 1 0 11.73 3c-4.97 0-8.999 4.031-8.999 9a8.964 8.964 0 0 0 1.23 4.535S4.1 19.201 2 20.6c0 0 2.309.796 4.754-1.102z"/></svg>

app/assets/stylesheets/new_design/dossier_instruction.scss

@@ -18,4 +18,54 @@
   input[type=email] {
     max-width: 500px;
   }
+
+  .avis {
+    .title {
+      margin-bottom: $default-padding;
+
+      .count {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        border: 1px solid $grey;
+        text-align: center;
+        font-size: 12px;
+        font-weight: normal;
+        margin-left: 8px;
+      }
+    }
+
+    .one-avis {
+      border-top: 1px solid $grey;
+      padding: $default-padding 0;
+
+      h2 {
+        font-weight: bold;
+        margin-bottom: $default-spacer;
+
+        span {
+          font-weight: normal;
+        }
+      }
+
+      .answer {
+        margin-top: $default-padding;
+      }
+
+      .avis-icon {
+        margin-right: $default-spacer;
+      }
+    }
+
+    .date,
+    .waiting {
+      font-size: 12px;
+      color: $grey;
+    }
+
+    .date {
+      float: right;
+    }
+  }
 }

app/views/new_gestionnaire/dossiers/instruction.html.haml

@@ -10,3 +10,28 @@
       = f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
       .send-wrapper
         = f.submit 'Demander un avis', class: 'button send'
+
+  - if @dossier.avis.present?
+    %section.avis
+      %h1.title
+        Avis des invités
+        %span.count= @dossier.avis.count
+
+      %ul
+        - @dossier.avis.each do |avis|
+          %li.one-avis
+            %h2.claimant
+              = (avis.claimant.email == current_gestionnaire.email) ? 'Vous' : avis.claimant.email
+              %span.date Demande d'avis envoyée le #{I18n.l(avis.created_at.localtime, format: '%d/%m/%y')}
+            %p= avis.introduction
+
+            .answer.flex.align-start
+              = image_tag 'icons/bubble.svg', class: 'avis-icon'
+              .width-100
+                %h2.gestionnaire
+                  = avis.gestionnaire.email
+                  - if avis.answer.present?
+                    %span.date Réponse donnée le #{I18n.l(avis.updated_at.localtime, format: '%d/%m/%y')}
+                  - else
+                    %span.waiting En attente de réponse
+                %p= avis.answer