Merge pull request #9272 from colinux/demande-instructeur-columns

ETQ usager/instructeur: repasse l'affichage demande en 2 colonnes

app/assets/stylesheets/demande.scss

@@ -2,25 +2,49 @@
 @import "constants";
 
 .dossier-show {
-  @media (max-width: 48em) {
+  .champ-row {
-    .d-block-sm {
+    @media (min-width: 48em) {
-      display: block;
+      display: flex;
     }
+
+    padding: 0.5rem 1rem;
   }
 
   .champ-label {
     font-weight: 600;
     margin-bottom: 0;
-    color: var(--text-action-high-grey);
+
+    @media (min-width: 48em) {
+      flex: 3;
+      margin-right: 1rem;
+    }
   }
 
   .champ-content {
     padding: 0 0 0.5rem;
 
+    @media (min-width: 48em) {
+      flex: 4;
+    }
+
     p {
       padding: 0;
       margin: 0;
     }
+
+    ul {
+      margin-block-start: 0;
+    }
+  }
+
+  .champ-updated {
+    float: right;
+  }
+
+  .champ-repetition {
+    .champ-updated {
+      margin-right: -1rem; // align with non repetition contents and badges
+    }
   }
 
   .top-bordered {

app/components/dossiers/champ_row_show_component.rb

@@ -1,58 +0,0 @@
-class Dossiers::ChampRowShowComponent < ApplicationComponent
-  include ChampHelper
-  include DossierHelper
-  include ApplicationHelper
-
-  def initialize(champs:, demande_seen_at:, profile:, repetition:)
-    @repetition = repetition
-    @champs = champs
-    @demande_seen_at = demande_seen_at
-    @profile = profile
-  end
-
-  def updated_after_deposer?(champ)
-    return false if champ.dossier.depose_at.blank?
-
-    champ.updated_at > champ.dossier.depose_at
-  end
-
-  def number_with_html_delimiter(num)
-    # we are using the span delimiter that doesn't insert spaces when copying and pasting the number
-    number_with_delimiter(num, delimiter: tag.span(class: 'numbers-delimiter'))
-  end
-
-  def blank_key(champ)
-    key = ".blank"
-    key += "_optional" if @profile == "usager"
-    key += "_attachment" if champ.type_de_champ.piece_justificative?
-
-    key
-  end
-
-  def each_champ(&block)
-    @champs.filter { show_champ?(_1) && _1.visible? && !_1.exclude_from_view? }.each(&block)
-  end
-
-  private
-
-  # champ.blank? is overloaded, disable the cop
-  # rubocop:disable Rails/Present
-  def show_champ?(champ)
-    if view_usager?
-      true
-    elsif champ.blank? && updated_after_deposer?(champ)
-      true
-    else
-      !champ.blank?
-    end
-  end
-  # rubocop:enable Rails/Present
-
-  def view_usager?
-    @profile == 'usager'
-  end
-
-  def view_instructeur?
-    @profile == 'instructeur'
-  end
-end

app/components/dossiers/champs_rows_show_component.rb

@@ -0,0 +1,32 @@
+class Dossiers::ChampsRowsShowComponent < ApplicationComponent
+  attr_reader :profile
+  attr_reader :seen_at
+
+  def initialize(champs:, profile:, seen_at:)
+    @champs = champs
+    @seen_at = seen_at
+    @profile = profile
+  end
+
+  def updated_after_deposer?(champ)
+    return false if champ.dossier.depose_at.blank?
+
+    champ.updated_at > champ.dossier.depose_at
+  end
+
+  def number_with_html_delimiter(num)
+    # we are using the span delimiter that doesn't insert spaces when copying and pasting the number
+    number_with_delimiter(num, delimiter: tag.span(class: 'numbers-delimiter'))
+  end
+
+  def blank_key(champ)
+    key = ".blank_optional"
+    key += "_attachment" if champ.type_de_champ.piece_justificative?
+
+    key
+  end
+
+  def each_champ(&block)
+    @champs.filter { _1.visible? && !_1.exclude_from_view? && !_1.header_section? }.each(&block)
+  end
+end

app/components/dossiers/champs_rows_show_component/champs_rows_show_component.en.yml

@@ -1,6 +1,4 @@
 ---
 en:
-  blank: "empty"
-  blank_attachment: "document not supplied"
   blank_optional: "empty (optional)"
   blank_optional_attachment: "document not supplied (optional)"

app/components/dossiers/champs_rows_show_component/champs_rows_show_component.fr.yml

@@ -1,6 +1,4 @@
 ---
 fr:
-  blank: "non saisi"
-  blank_attachment: "pièce justificative non saisie"
   blank_optional: "non saisi (facultatif)"
   blank_optional_attachment: "pièce justificative non saisie (facultative)"

app/components/dossiers/champs_rows_show_component/champs_rows_show_component.html.haml

@@ -1,27 +1,18 @@
 - each_champ do |champ|
-  .fr-px-4v.fr-my-2v
   - if champ.repetition?
     - champ.rows.each.with_index do |row, i|
-        .fr-background-alt--grey.fr-p-3v.fr-my-3w
+      .fr-background-alt--grey.fr-p-2w.fr-my-3w.fr-ml-2w.champ-repetition
-          %p.champ-label= "#{champ.libelle}  #{i +1}:"
+        %p.font-weight-bold= "#{champ.libelle} #{i + 1} :"
 
-          = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
+        = render Dossiers::ChampsRowsShowComponent.new(champs: row, seen_at:, profile:)
 
-    - elsif !champ.header_section?
-      .flex.d-block-sm
-        %p.champ-label.flex-grow= "#{champ.libelle} :"
-
-        - if updated_after_deposer?(champ)
-          %p.fr-mb-0.fr-text--sm
-            %span.fr-badge.fr-badge--sm{ class: badge_class_if_unseen(@demande_seen_at, champ.updated_at) }
-              = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(champ.updated_at))
-
-      - if champ.blank?
-        .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
-          %p
-            %em= t(blank_key(champ))
   - else
-        .champ-content{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+    = render Dossiers::RowShowComponent.new(label: champ.libelle, seen_at:, profile:, content_class: champ.type_champ, updated_at: updated_after_deposer?(champ) ? champ.updated_at : nil) do |c|
+      - if champ.blank?
+        - c.blank do
+          = t(blank_key(champ))
+      - else
+        - c.with_value do
           - case champ.type_champ
           - when TypeDeChamp.type_champs.fetch(:carte)
             = render partial: "shared/champs/carte/show", locals: { champ: champ }
@@ -61,8 +52,8 @@
             %p= champ.to_s
           - when TypeDeChamp.type_champs.fetch(:datetime)
             %p= champ.to_s
-          - when TypeDeChamp.type_champs.fetch(:number)
+          - when TypeDeChamp.type_champs.fetch(:number), TypeDeChamp.type_champs.fetch(:integer_number), TypeDeChamp.type_champs.fetch(:decimal_number)
-            %p= number_with_html_delimiter(champ.to_s)
+            %p= helpers.number_with_html_delimiter(champ.to_s)
           - else
-            - if champ.present?
+            = helpers.format_text_value(champ.to_s.strip) # format already wrap in p
-              = format_text_value(champ.to_s.strip) # format already wrap in p
+

app/components/dossiers/row_show_component.html.haml

@@ -0,0 +1,17 @@
+.champ-row
+  %p.champ-label= "#{label} :"
+
+  - if blank?
+    .champ-content.fr-text-mention--grey{ class: content_class }
+      - if usager?
+        %p
+          %em= blank
+
+  - else
+    .champ-content{ class: content_class }
+      - if updated_at.present?
+        %p.fr-mb-1v.fr-ml-3v.champ-updated
+          %span{ class: badge_updated_class }
+            = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
+
+      = value

app/components/dossiers/row_show_component.rb

@@ -0,0 +1,29 @@
+class Dossiers::RowShowComponent < ApplicationComponent
+  attr_reader :label
+  attr_reader :profile
+  attr_reader :updated_at
+  attr_reader :seen_at
+  attr_reader :content_class
+
+  renders_one :value
+  renders_one :blank
+
+  def initialize(label:, profile: nil, updated_at: nil, seen_at: nil, content_class: nil)
+    @label = label
+    @profile = profile
+    @updated_at = updated_at
+    @seen_at = seen_at
+    @content_class = content_class
+  end
+
+  def badge_updated_class
+    class_names(
+      "fr-badge fr-badge--sm" => true,
+      "fr-badge--new" => seen_at.present? && updated_at&.>(seen_at)
+    )
+  end
+
+  def usager?
+    @profile == 'usager'
+  end
+end

app/components/dsfr/copy_button_component/copy_button_component.html.haml

@@ -1,5 +1,5 @@
 %span{ data: { controller: 'clipboard', clipboard_text_value: @text } }
-  %button{ data: { action: 'clipboard#copy' }, title: @title }
+  %button.fr-btn.fr-icon-clipboard-line.fr-btn--sm.fr-btn--tertiary-no-outline{ data: { action: 'clipboard#copy' }, title: @title }
-    %span.fr-icon-clipboard-line
+    = @title
   %span.fr-text--sm.hidden{ data: { clipboard_target: 'success' } }
     = @success || t('.copy_confirmation')

app/components/viewable_champ/section_component.rb

@@ -33,11 +33,15 @@ class ViewableChamp::SectionComponent < ApplicationComponent
     rest_of_champ
   end
 
-  def tag_for_depth
+  def reset_tag_for_depth
-    "h#{header_section.level + 1}" if header_section
+    return if !header_section
+
+    "reset-h#{header_section.level + 1}"
   end
 
   def first_level?
+    return if header_section.nil?
+
     header_section.level == 1
   end
 

app/components/viewable_champ/section_component/section_component.html.haml

@@ -1,14 +1,14 @@
-= tag.div(class: "reset-#{tag_for_depth} fr-mt-4v", 'data-controller': 'expand') do
+= tag.div(class: class_names(reset_tag_for_depth => true, "fr-my-2w" => !first_level?), 'data-controller': 'expand') do
   - if header_section
-    %div{ class: class_names(flex: true, "top-bordered" => header_section.level == 1) }
+    %div{ class: class_names(flex: true, "top-bordered" => first_level?) }
-      = render EditableChamp::HeaderSectionComponent.new(champ:  header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-3v' => header_section.level == 1, 'fr-pt-3v' => header_section.level == 1})
+      = render EditableChamp::HeaderSectionComponent.new(champ:  header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-2w' => first_level?, 'fr-py-1v' => !first_level?})
-      - if ![champs, sections].map(&:empty?).all? && header_section.level == 1
+      - if ![champs, sections].map(&:empty?).all? && first_level?
         %button{ type: "button", aria: { controls: section_id, "expanded": "true", label: t('.toggle_section', section: header_section.libelle) }, href: section_id, 'data-action': 'click->expand#toggle', class: "fr-btn fr-btn--tertiary-no-outline" }
           %i.fr-icon-arrow-up-s-line{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
 
   %div{ id: section_id, 'data-expand-target': 'content' }
     - if !champs.empty?
-      = render Dossiers::ChampRowShowComponent.new(champs: champs, demande_seen_at: @demande_seen_at, profile: @profile, repetition: false)
+      = render Dossiers::ChampsRowsShowComponent.new(champs: champs, seen_at: @demande_seen_at, profile: @profile)
 
     - sections.each do |section|
       = render section

app/helpers/application_helper.rb

@@ -90,8 +90,8 @@ module ApplicationHelper
     date.present? ? I18n.l(date, format: :long) : ''
   end
 
-  def try_format_datetime(datetime)
+  def try_format_datetime(datetime, format: nil)
-    datetime.present? ? I18n.l(datetime) : ''
+    datetime.present? ? I18n.l(datetime, format:) : ''
   end
 
   def try_format_mois_effectif(etablissement)

app/helpers/dossier_helper.rb

@@ -17,13 +17,6 @@ module DossierHelper
     end
   end
 
-  def badge_class_if_unseen(seen_at, updated_at)
-    return if updated_at.blank? || seen_at.blank?
-    return if seen_at > updated_at
-
-    "fr-badge--new"
-  end
-
   def url_for_dossier(dossier)
     if dossier.brouillon?
       brouillon_dossier_path(dossier)

app/helpers/etablissement_helper.rb

@@ -8,6 +8,14 @@ module EtablissementHelper
     end
   end
 
+  def year_for_bilan(bilan)
+    if bilan_v3?(bilan)
+      bilan["data"].fetch("annee")
+    else
+      bilan["date_arret_exercice"]
+    end
+  end
+
   # trouver la declaration 2051, et prendre la premiere valeur du bilan identifié par le code code_nref: 300476
   # autrement connu comme le resultat d'un exercice dans un bilan comptable "funky magic accountant lingo"
   def extract_resultat_exercice(bilan)
@@ -77,4 +85,13 @@ module EtablissementHelper
       "fermé"
     end
   end
+
+  def entreprise_etat_administratif_badge_class(etablissement)
+    case etablissement.entreprise_etat_administratif&.to_sym
+    when :actif
+      "fr-badge--success"
+    when :fermé
+      "fr-badge--error"
+    end
+  end
 end

app/views/shared/dossiers/_demande.html.haml

@@ -4,16 +4,16 @@
 
 .fr-container.counter-start-header-section.dossier-show
   .fr-grid-row.fr-grid-row--center
-    .fr-col-xl-10
+    .fr-col-12
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0
-        .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
+        .flex-grow.fr-py-3v.fr-px-2w= t('views.shared.dossiers.demande.en_construction')
 
       - if dossier.depose_at.present?
         = render partial: "shared/dossiers/infos_generales", locals: { dossier: dossier }
 
       .tab-title
         %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
-          .flex-grow.fr-py-3v.fr-px-4v
+          .flex-grow.fr-py-3v.fr-px-2w
             = t('views.shared.dossiers.demande.requester_identity')
 
             - if dossier.identity_updated_at.present? && demande_seen_at&.<(dossier.identity_updated_at)
@@ -27,17 +27,17 @@
             = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
 
 
-      .fr-my-4v.fr-px-4v
       = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 
-        - if dossier.etablissement.present?
-          = render partial: "shared/dossiers/identite_entreprise", locals: { etablissement: dossier.etablissement, profile: profile }
-
       - if dossier.individual.present?
         = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }
 
+      - if dossier.etablissement.present?
+        .fr-mt-1w.fr-mb-4w.fr-px-2w
+          = render partial: "shared/dossiers/identite_entreprise", locals: { etablissement: dossier.etablissement, profile: profile }
+
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
-        .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.form')
+        .flex-grow.fr-py-3v.fr-px-2w= t('views.shared.dossiers.demande.form')
 
       - champs = dossier.champs_public
       - if champs.any? || dossier.procedure.routing_enabled?

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -1,97 +1,92 @@
-.fr-background-alt--grey.fr-p-3v
+- if etablissement.as_degraded_mode?
-  - if etablissement.as_degraded_mode?
+  .fr-alert.fr-alert--warning.fr-alert--sm.fr-mb-2w
-    .fr-alert.fr-alert--warning.fr-alert--sm
     %p
       LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
       - if profile == "instructeur"
         %p
           Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
-    .fr-my-2v
+
-      %p.champ-label SIRET :
+.fr-background-alt--grey.fr-p-3v
-      .champ-content
+  - if etablissement.as_degraded_mode?
-        %p= etablissement.siret
+    = render Dossiers::RowShowComponent.new(label: "SIRET") do |c|
+      - c.with_value do
+        %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
+
   - else
     - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
-      .fr-my-2v
+      = render Dossiers::RowShowComponent.new(label: nil) do |c|
-        .champ-content
+        - c.with_value do
           %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
     - else
-      .fr-my-2v
+      = render Dossiers::RowShowComponent.new(label: "Dénomination") do |c|
-        %p.champ-label Dénomination :
+        - c.with_value do
-        .champ-content
           %p= raison_sociale_or_name(etablissement)
-      .fr-my-2v
+
-        %p.champ-label SIRET :
+      = render Dossiers::RowShowComponent.new(label: "SIRET") do |c|
-        .champ-content
+        - c.with_value do
           %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
 
 
       - unless local_assigns[:short_identity]
         - if etablissement.siret != etablissement.entreprise.siret_siege_social
-          .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "SIRET du siège social") do |c|
-            %p.champ-label SIRET du siège social:
+            - c.with_value do
-            .champ-content
+              %p
-              %p= etablissement.entreprise.siret_siege_social
+                = pretty_siret(etablissement.entreprise.siret_siege_social)
-        .fr-my-2v
+                = render Dsfr::CopyButtonComponent.new(text: etablissement.entreprise.siret_siege_social, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier")
-          %p.champ-label Forme juridique :
+
-          .champ-content
+        = render Dossiers::RowShowComponent.new(label: "Forme juridique") do |c|
+          - c.with_value do
             %p= sanitize(etablissement.entreprise.forme_juridique)
-        .fr-my-2v
+
-          %p.champ-label Libellé NAF :
+        = render Dossiers::RowShowComponent.new(label: "Libellé NAF") do |c|
-          .champ-content
+          - c.with_value do
             %p= etablissement.libelle_naf
-        .fr-my-2v
+
-          %p.champ-label Code NAF :
+        = render Dossiers::RowShowComponent.new(label: "Libellé NAF") do |c|
-          .champ-content
+          - c.with_value do
             %p= etablissement.naf
-        .fr-my-2v
+
-          %p.champ-label Date de création :
+        = render Dossiers::RowShowComponent.new(label: "Date de création") do |c|
-          .champ-content
+          - c.with_value do
             %p
               = try_format_date(etablissement.entreprise.date_creation)
 
               - if etablissement.entreprise_etat_administratif.present?
-              %span.label= humanized_entreprise_etat_administratif(etablissement)
+                %span.fr-badge.fr-badge--sm{ class: entreprise_etat_administratif_badge_class(etablissement) }
+                  = humanized_entreprise_etat_administratif(etablissement)
 
         - if profile == 'instructeur'
-          .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "Effectif mensuel #{try_format_mois_effectif(etablissement)} (URSSAF)") do |c|
-            %p.champ-label
+            - c.with_value do
-              Effectif mensuel
-              = try_format_mois_effectif(etablissement)
-              (URSSAF) :
-            .champ-content
               %p= etablissement.entreprise_effectif_mensuel
-          .fr-my-2v
+
-            %p.champ-label
+          = render Dossiers::RowShowComponent.new(label: "Effectif moyen annuel #{etablissement.entreprise_effectif_annuel_annee} (URSSAF)") do |c|
-              Effectif moyen annuel
+            - c.with_value do
-              = etablissement.entreprise_effectif_annuel_annee
-              (URSSAF) :
-            .champ-content
               %p= etablissement.entreprise_effectif_annuel
-        .fr-my-2v
+
-          %p.champ-label Effectif de l'organisation (INSEE) :
+          = render Dossiers::RowShowComponent.new(label: "Effectif de l’organisation (INSEE)") do |c|
-          .champ-content
+            - c.with_value do
-            %p
+              %p= effectif(etablissement)
-            = effectif(etablissement)
+
-        .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "Numéro de TVA intracommunautaire") do |c|
-          %p.champ-label Numéro de TVA intracommunautaire :
+            - c.with_value do
-          .champ-content
               %p= etablissement.entreprise.numero_tva_intracommunautaire
-        .fr-my-2v
+
-          %p.champ-label Adresse :
+          = render Dossiers::RowShowComponent.new(label: "Adresse") do |c|
-          .champ-content
+            - c.with_value do
               %p
-            - etablissement.adresse.split("\n").each do |line|
+                - etablissement.adresse.split("\n").compact_blank.each do |line|
                   = line
                   %br
-        .fr-my-2v
+
-          %p.champ-label Capital social :
+          = render Dossiers::RowShowComponent.new(label: "Capital social") do |c|
-          .champ-content
+            - c.with_value do
               %p= pretty_currency(etablissement.entreprise.capital_social)
-        .fr-my-2v
+
-          %p.champ-label Chiffre d’affaires :
+        - if etablissement.exercices.any?
-          .champ-content
+          = render Dossiers::RowShowComponent.new(label: "Chiffre d’affaires") do |c|
-            %p
+            - c.with_value do
               - if profile == 'instructeur'
                 %details
                   - etablissement.exercices.each_with_index do |exercice, index|
@@ -101,7 +96,6 @@
               - elsif etablissement.exercices.present?
                 = t('activemodel.models.exercices_summary', count: etablissement.exercices.count)
 
-
         - if etablissement.entreprise_bilans_bdf.present?
           - if profile == 'instructeur'
             = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
@@ -115,13 +109,10 @@
 
             = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
               locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
-            .fr-my-2v
-              %p.champ-label
-                Chiffres financiers clés (Banque de France)
-                = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
+            = render Dossiers::RowShowComponent.new(label: "Chiffres financiers clés (Banque de France) en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)}") do |c|
+              - c.with_value do
                 - if controller.is_a?(Instructeurs::AvisController)
-                .champ-content
                   %p
                     Les consulter
                     = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
@@ -130,7 +121,6 @@
                     ou
                     = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
                 - else
-                .champ-content
                   %p
                     Les consulter
                     = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
@@ -139,59 +129,53 @@
                     ou
                     = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
           - else
-            .fr-my-2v
+            = render Dossiers::RowShowComponent.new(label: "Bilans Banque de France") do |c|
-              %p.champ-label
+              - c.with_value do
-                Bilans Banque de France :
-              .champ-content
                 %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
+
         - if etablissement.entreprise_attestation_sociale.attached?
-          .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "Attestation sociale") do |c|
-            %p.champ-label Attestation sociale :
+            - c.with_value do
               - if profile == 'instructeur'
-              .champ-content
+                %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale), **external_link_attributes
-                %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
               - else
-              .champ-content
                 %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
         - if etablissement.entreprise_attestation_fiscale.attached?
-          .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "Attestation fiscale") do |c|
-            %p.champ-label Attestation fiscale :
+            - c.with_value do
               - if profile == 'instructeur'
-              .champ-content
+                %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale), **external_link_attributes
-                %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
               - else
-              .champ-content
                 %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
         - if etablissement.association?
-          .fr-my-2v
+          = render Dossiers::RowShowComponent.new(label: "Numéro RNA") do |c|
-            %p.champ-label Numéro RNA :
+            - c.with_value do
-            .champ-content
               %p= etablissement.association_rna
-          .fr-my-2v
+
-            %p.champ-label Titre :
+          = render Dossiers::RowShowComponent.new(label: "Titre") do |c|
-            .champ-content
+            - c.with_value do
               %p= etablissement.association_titre
-          .fr-my-2v
+
-            %p.champ-label Objet :
+          = render Dossiers::RowShowComponent.new(label: "Objet") do |c|
-            .champ-content
+            - c.with_value do
               %p= etablissement.association_objet
-          .fr-my-2v
+
-            %p.champ-label Date de création :
+          = render Dossiers::RowShowComponent.new(label: "Date de création") do |c|
-            .champ-content
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_creation)
-          .fr-my-2v
+
-            %p.champ-label Date de publication :
+          = render Dossiers::RowShowComponent.new(label: "Date de publication") do |c|
-            .champ-content
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_publication)
-          .fr-my-2v
+
-            %p.champ-label Date de déclaration :
+          = render Dossiers::RowShowComponent.new(label: "Date de déclaration") do |c|
-            .champ-content
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_declaration)
 
   - unless local_assigns[:short_identity]
-    %p
+    %p.text-center
       = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr » (ex: fiche d’immatriculation RNCS)",
         annuaire_link(etablissement.siret),
-      target: "_blank"
+        **external_link_attributes

app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml

@@ -1,10 +1,8 @@
-%tr
+= render Dossiers::RowShowComponent.new(label: libelle) do |c|
-  %td.libelle
+  - c.with_value do
-    = "#{libelle} :"
-  %td
     %details
       - etablissement.entreprise_bilans_bdf.each do |bilan|
-        = "#{pretty_date_exercice(bilan["date_arret_exercice"])} : "
+        = "#{pretty_date_exercice(year_for_bilan(bilan))} :"
         = pretty_currency(value_for_bilan_key(bilan, key), unit: pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie))
         %br
 

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,18 +1,16 @@
-
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.civility')) do |c|
-.fr-my-2v
+  - c.with_value do
-  %p.champ-label= t('views.users.dossiers.identite.civility')
-  .champ-content
     %p= individual.gender
-.fr-my-2v
+
-  %p.champ-label= t('views.users.dossiers.identite.first_name')
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.first_name')) do |c|
-  .champ-content
+  - c.with_value do
     %p= individual.prenom
-.fr-my-2v
+
-  %p.champ-label= t('views.users.dossiers.identite.last_name')
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.last_name')) do |c|
-  .champ-content
+  - c.with_value do
     %p= individual.nom
+
 - if individual.birthdate.present?
-  .fr-my-2v
+  = render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.birthdate')) do |c|
-    %p.champ-label= t('views.users.dossiers.identite.birthdate')
+    - c.with_value do
-    .champ-content
       %p= try_format_date(individual.birthdate)

app/views/shared/dossiers/_infos_generales.html.haml

@@ -1,4 +1,4 @@
-.fr-px-2w
+.fr-px-2w.fr-mb-4w
   .fr-my-2w
     %p
       = t(:submitted_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.depose_at))
@@ -9,25 +9,18 @@
     .fr-highlight
       %p.fr-text--sm.fr-text-mention--grey Sauf mention contraire, les champs ont été saisis à la date du dépôt du dossier.
 
-
   - if dossier.justificatif_motivation.attached?
-    -# download component already has margin bottom
+    = render Dossiers::RowShowComponent.new(label: "Justificatif") do |c|
-    %div
+      - c.with_value do
-      %p.champ-label Justificatif :
-      .champ-content
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
-    .fr-mb-2w
+    = render Dossiers::RowShowComponent.new(label: "Motivation") do |c|
-      %p.champ-label Motivation :
+      - c.with_value do
-      .champ-content
-        .action
         = dossier.motivation
 
   - if dossier.attestation.present?
-    .fr-mb-2w
+    = render Dossiers::RowShowComponent.new(label: "Attestation") do |c|
-      %p.champ-label Attestation :
+      - c.with_value do
-      .champ-content
+        = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), **external_link_attributes)
-        .action
-          = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener')

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,4 +1,3 @@
-.fr-my-2v
+= render Dossiers::RowShowComponent.new(label: 'Email', profile: @profile) do |c|
-  %p.champ-label Email :
+  - c.with_value do
-  .champ-content
+    = user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
-    %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email

app/views/users/dossiers/demande.html.haml

@@ -15,9 +15,7 @@
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
 
 
-  .fr-container.fr-mt-2w
-    .fr-grid-row.fr-grid-row--center
-      .fr-col-xl-10
   - if !@dossier.read_only?
-          = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm', 'title'=> "Modifier mon dossier tant qu'il n'est pas passé en instruction"
+    .fr-container.fr-mt-2w
-          .clearfix
+      %p= link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm',
+        title: "Modifier mon dossier tant qu'il n'est pas passé en instruction"

config/locales/time_format.fr.rb

@@ -2,6 +2,13 @@
   :fr => {
     :time => {
       :formats => {
+        veryshort: lambda { |time, _|
+          if time.year == Date.current.year
+            "%d/%m %H:%M"
+          else
+            "%d/%m/%Y %H:%M"
+          end
+        },
         :message_date => lambda { |time, _| "le #{time.day == 1 ? '1er' : time.day} %B à %H h %M" },
         :message_date_with_year => lambda { |time, _| "le #{time.day == 1 ? '1er' : time.day} %B %Y à %H h %M" },
         :message_date_without_time => lambda { |_time, _| "%d/%m/%Y" }

spec/views/shared/dossiers/_champs.html.haml_spec.rb

@@ -57,39 +57,6 @@ describe 'shared/dossiers/champs', type: :view do
     end
   end
 
-  context "with a routed procedure" do
-    let(:procedure) do
-      create(:procedure, :routee)
-    end
-    let(:dossier) { create(:dossier, :en_construction, procedure: procedure) }
-    let(:champs) { [] }
-
-    context "with seen_at" do
-      let(:dossier) { create(:dossier) }
-      let(:nouveau_groupe_instructeur) { create(:groupe_instructeur, procedure: dossier.procedure) }
-      let(:champ1) { create(:champ_checkbox, dossier: dossier, value: 'true') }
-      let(:champs) { [champ1] }
-
-      context "with a demande_seen_at after groupe_instructeur_updated_at" do
-        let(:demande_seen_at) { dossier.groupe_instructeur_updated_at + 1.hour }
-
-        it "expect to not highlight new group instructeur label" do
-          dossier.assign_to_groupe_instructeur(nouveau_groupe_instructeur)
-          expect(subject).not_to have_css(".highlighted")
-        end
-      end
-
-      context "with a demande_seen_at before groupe_instructeur_updated_at" do
-        let(:demande_seen_at) { dossier.groupe_instructeur_updated_at - 1.hour }
-
-        it "expect to not highlight new group instructeur label" do
-          dossier.assign_to_groupe_instructeur(nouveau_groupe_instructeur)
-          expect(subject).to have_css(".highlighted")
-        end
-      end
-    end
-  end
-
   context "with a dossier champ, but we are not authorized to acces the dossier" do
     let(:dossier) { create(:dossier) }
     let(:champ) { create(:champ_dossier_link, dossier: dossier, value: dossier.id) }
@@ -127,20 +94,27 @@ describe 'shared/dossiers/champs', type: :view do
   end
 
   context "with seen_at" do
-    let(:dossier) { create(:dossier) }
+    let(:dossier) { create(:dossier, :en_construction, depose_at: 1.day.ago) }
     let(:champ1) { create(:champ_checkbox, dossier: dossier, value: 'true') }
     let(:champs) { [champ1] }
 
     context "with a demande_seen_at after champ updated_at" do
       let(:demande_seen_at) { champ1.updated_at + 1.hour }
 
-      it { is_expected.not_to have_css(".highlighted") }
+      it { is_expected.not_to have_css(".fr-badge--new") }
+    end
+
+    context "with champ updated_at at depose_at" do
+      let(:champ1) { create(:champ_checkbox, dossier: dossier, value: 'true', updated_at: dossier.depose_at) }
+      let(:demande_seen_at) { champ1.updated_at - 1.hour }
+
+      it { is_expected.not_to have_css(".fr-badge--new") }
     end
 
     context "with a demande_seen_at after champ updated_at" do
       let(:demande_seen_at) { champ1.updated_at - 1.hour }
 
-      it { is_expected.to have_css(".highlighted") }
+      it { is_expected.to have_css(".fr-badge--new") }
     end
   end
 end