From 0ffc14944dcfc7698244500add59dc48483e5691 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Mon, 3 Jul 2023 22:41:46 +0200
Subject: [PATCH] refactor(demande): single champ row component everywhere

---
 app/assets/stylesheets/demande.scss           |   3 +-
 ...onent.rb => champs_rows_show_component.rb} |  25 +-
 .../champs_rows_show_component.en.yml}        |   2 -
 .../champs_rows_show_component.fr.yml}        |   2 -
 .../champs_rows_show_component.html.haml}     |  25 +-
 .../dossiers/row_show_component.html.haml     |  17 ++
 app/components/dossiers/row_show_component.rb |  29 +++
 .../section_component.html.haml               |   2 +-
 app/helpers/dossier_helper.rb                 |   7 -
 app/views/shared/dossiers/_demande.html.haml  |  18 +-
 .../dossiers/_identite_entreprise.html.haml   | 230 ++++++++----------
 ...identite_entreprise_bilan_detail.html.haml |   5 +-
 .../dossiers/_identite_individual.html.haml   |  23 +-
 .../dossiers/_infos_generales.html.haml       |  25 +-
 .../shared/dossiers/_user_infos.html.haml     |   7 +-
 app/views/users/dossiers/demande.html.haml    |  10 +-
 16 files changed, 204 insertions(+), 226 deletions(-)
 rename app/components/dossiers/{champ_row_show_component.rb => champs_rows_show_component.rb} (59%)
 rename app/components/dossiers/{champ_row_show_component/champ_row_show_component.en.yml => champs_rows_show_component/champs_rows_show_component.en.yml} (64%)
 rename app/components/dossiers/{champ_row_show_component/champ_row_show_component.fr.yml => champs_rows_show_component/champs_rows_show_component.fr.yml} (63%)
 rename app/components/dossiers/{champ_row_show_component/champ_row_show_component.html.haml => champs_rows_show_component/champs_rows_show_component.html.haml} (78%)
 create mode 100644 app/components/dossiers/row_show_component.html.haml
 create mode 100644 app/components/dossiers/row_show_component.rb

diff --git a/app/assets/stylesheets/demande.scss b/app/assets/stylesheets/demande.scss
index b92694b78..a31d9fb04 100644
--- a/app/assets/stylesheets/demande.scss
+++ b/app/assets/stylesheets/demande.scss
@@ -6,6 +6,8 @@
     @media (min-width: 48em) {
       display: flex;
     }
+
+    padding: 0.5rem 1rem;
   }
 
   .champ-label {
@@ -20,7 +22,6 @@
 
   .champ-content {
     padding: 0 0 0.5rem;
-    color: var(--text-action-high--grey);
 
     @media (min-width: 48em) {
       flex: 4;
diff --git a/app/components/dossiers/champ_row_show_component.rb b/app/components/dossiers/champs_rows_show_component.rb
similarity index 59%
rename from app/components/dossiers/champ_row_show_component.rb
rename to app/components/dossiers/champs_rows_show_component.rb
index ab0ef6947..45517bc78 100644
--- a/app/components/dossiers/champ_row_show_component.rb
+++ b/app/components/dossiers/champs_rows_show_component.rb
@@ -1,12 +1,10 @@
-class Dossiers::ChampRowShowComponent < ApplicationComponent
-  include ChampHelper
-  include DossierHelper
-  include ApplicationHelper
+class Dossiers::ChampsRowsShowComponent < ApplicationComponent
+  attr_reader :profile
+  attr_reader :seen_at
 
-  def initialize(champs:, demande_seen_at:, profile:, repetition:)
-    @repetition = repetition
+  def initialize(champs:, profile:, seen_at:)
     @champs = champs
-    @demande_seen_at = demande_seen_at
+    @seen_at = seen_at
     @profile = profile
   end
 
@@ -22,8 +20,7 @@ class Dossiers::ChampRowShowComponent < ApplicationComponent
   end
 
   def blank_key(champ)
-    key = ".blank"
-    key += "_optional" if @profile == "usager"
+    key = ".blank_optional"
     key += "_attachment" if champ.type_de_champ.piece_justificative?
 
     key
@@ -32,14 +29,4 @@ class Dossiers::ChampRowShowComponent < ApplicationComponent
   def each_champ(&block)
     @champs.filter { _1.visible? && !_1.exclude_from_view? && !_1.header_section? }.each(&block)
   end
-
-  private
-
-  def usager?
-    @profile == 'usager'
-  end
-
-  def instructeur?
-    @profile == 'instructeur'
-  end
 end
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml b/app/components/dossiers/champs_rows_show_component/champs_rows_show_component.en.yml
similarity index 64%
rename from app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml
rename to app/components/dossiers/champs_rows_show_component/champs_rows_show_component.en.yml
index 3764ea7c1..c18cd4dd0 100644
--- a/app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml
+++ b/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)"
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml b/app/components/dossiers/champs_rows_show_component/champs_rows_show_component.fr.yml
similarity index 63%
rename from app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml
rename to app/components/dossiers/champs_rows_show_component/champs_rows_show_component.fr.yml
index 437f053bd..01694f30f 100644
--- a/app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml
+++ b/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)"
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml b/app/components/dossiers/champs_rows_show_component/champs_rows_show_component.html.haml
similarity index 78%
rename from app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml
rename to app/components/dossiers/champs_rows_show_component/champs_rows_show_component.html.haml
index 64552f8df..1ae64cfc8 100644
--- a/app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml
+++ b/app/components/dossiers/champs_rows_show_component/champs_rows_show_component.html.haml
@@ -4,26 +4,15 @@
       .fr-background-alt--grey.fr-p-2w.fr-my-3w.fr-ml-2w.champ-repetition
         %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:)
 
   - else
-    .fr-px-2w.fr-my-2w.champ-row
-      %p.champ-label= "#{champ.libelle} :"
-
+    = 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?
-        .champ-content.fr-text-mention--grey{ class: champ.type_champ }
-          - if usager?
-            %p
-              %em= t(blank_key(champ))
-
+        - c.blank do
+          = t(blank_key(champ))
       - else
-        .champ-content{ class: champ.type_champ }
-
-          - if updated_after_deposer?(champ)
-            %p.fr-mb-1v.fr-ml-3v.champ-updated
-              %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, format: :veryshort))
-
+        - c.with_value do
           - case champ.type_champ
           - when TypeDeChamp.type_champs.fetch(:carte)
             = render partial: "shared/champs/carte/show", locals: { champ: champ }
@@ -64,7 +53,7 @@
           - when TypeDeChamp.type_champs.fetch(:datetime)
             %p= champ.to_s
           - 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
-            = format_text_value(champ.to_s.strip) # format already wrap in p
+            = helpers.format_text_value(champ.to_s.strip) # format already wrap in p
 
diff --git a/app/components/dossiers/row_show_component.html.haml b/app/components/dossiers/row_show_component.html.haml
new file mode 100644
index 000000000..d9712c732
--- /dev/null
+++ b/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
diff --git a/app/components/dossiers/row_show_component.rb b/app/components/dossiers/row_show_component.rb
new file mode 100644
index 000000000..eb08a1bbb
--- /dev/null
+++ b/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
diff --git a/app/components/viewable_champ/section_component/section_component.html.haml b/app/components/viewable_champ/section_component/section_component.html.haml
index 35995dec4..a8f53a21e 100644
--- a/app/components/viewable_champ/section_component/section_component.html.haml
+++ b/app/components/viewable_champ/section_component/section_component.html.haml
@@ -8,7 +8,7 @@
 
   %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
diff --git a/app/helpers/dossier_helper.rb b/app/helpers/dossier_helper.rb
index 04609abe5..6dfeb1f40 100644
--- a/app/helpers/dossier_helper.rb
+++ b/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)
diff --git a/app/views/shared/dossiers/_demande.html.haml b/app/views/shared/dossiers/_demande.html.haml
index 44a8a0091..ee16bc49f 100644
--- a/app/views/shared/dossiers/_demande.html.haml
+++ b/app/views/shared/dossiers/_demande.html.haml
@@ -6,14 +6,14 @@
   .fr-grid-row.fr-grid-row--center
     .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) }
+      = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 
-        - if dossier.etablissement.present?
+      - 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 }
 
-        - if dossier.individual.present?
-          = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }
-
       %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?
diff --git a/app/views/shared/dossiers/_identite_entreprise.html.haml b/app/views/shared/dossiers/_identite_entreprise.html.haml
index ae6b3161f..55ba60053 100644
--- a/app/views/shared/dossiers/_identite_entreprise.html.haml
+++ b/app/views/shared/dossiers/_identite_entreprise.html.haml
@@ -8,96 +8,85 @@
 
 .fr-background-alt--grey.fr-p-3v
   - if etablissement.as_degraded_mode?
-    .fr-my-2v.champ-row
-      %p.champ-label SIRET :
-      .champ-content
+    = 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.champ-row
-        .champ-content
+      = render Dossiers::RowShowComponent.new(label: nil) do |c|
+        - 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.champ-row
-        %p.champ-label Dénomination :
-        .champ-content
+      = render Dossiers::RowShowComponent.new(label: "Dénomination") do |c|
+        - c.with_value do
           %p= raison_sociale_or_name(etablissement)
-      .fr-my-2v.champ-row
-        %p.champ-label SIRET :
-        .champ-content
+
+      = 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") }
 
 
       - unless local_assigns[:short_identity]
         - if etablissement.siret != etablissement.entreprise.siret_siege_social
-          .fr-my-2v.champ-row
-            %p.champ-label SIRET du siège social:
-            .champ-content
+          = render Dossiers::RowShowComponent.new(label: "SIRET du siège social") do |c|
+            - c.with_value do
               %p
                 = pretty_siret(etablissement.entreprise.siret_siege_social)
                 = 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")
-        .fr-my-2v.champ-row
-          %p.champ-label Forme juridique :
-          .champ-content
-            %p= sanitize(etablissement.entreprise.forme_juridique)
-        .fr-my-2v.champ-row
-          %p.champ-label Libellé NAF :
-          .champ-content
-            %p= etablissement.libelle_naf
-        .fr-my-2v.champ-row
-          %p.champ-label Code NAF :
-          .champ-content
-            %p= etablissement.naf
-        .fr-my-2v.champ-row
-          %p.champ-label Date de création :
-          .champ-content
-            %p
-            = try_format_date(etablissement.entreprise.date_creation)
 
-            - if etablissement.entreprise_etat_administratif.present?
-              %span.fr-badge.fr-badge--sm{ class: entreprise_etat_administratif_badge_class(etablissement)}= humanized_entreprise_etat_administratif(etablissement)
+        = render Dossiers::RowShowComponent.new(label: "Forme juridique") do |c|
+          - c.with_value do
+            %p= sanitize(etablissement.entreprise.forme_juridique)
+
+        = render Dossiers::RowShowComponent.new(label: "Libellé NAF") do |c|
+          - c.with_value do
+            %p= etablissement.libelle_naf
+
+        = render Dossiers::RowShowComponent.new(label: "Libellé NAF") do |c|
+          - c.with_value do
+            %p= etablissement.naf
+
+        = render Dossiers::RowShowComponent.new(label: "Date de création") do |c|
+          - c.with_value do
+            %p
+              = try_format_date(etablissement.entreprise.date_creation)
+
+              - if etablissement.entreprise_etat_administratif.present?
+                %span.fr-badge.fr-badge--sm{ class: entreprise_etat_administratif_badge_class(etablissement) }
+                  = humanized_entreprise_etat_administratif(etablissement)
 
         - if profile == 'instructeur'
-          .fr-my-2v.champ-row
-            %p.champ-label
-              Effectif mensuel
-              = try_format_mois_effectif(etablissement)
-              (URSSAF) :
-            .champ-content
+          = render Dossiers::RowShowComponent.new(label: "Effectif mensuel #{try_format_mois_effectif(etablissement)} (URSSAF)") do |c|
+            - c.with_value do
               %p= etablissement.entreprise_effectif_mensuel
-          .fr-my-2v.champ-row
-            %p.champ-label
-              Effectif moyen annuel
-              = etablissement.entreprise_effectif_annuel_annee
-              (URSSAF) :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Effectif moyen annuel #{etablissement.entreprise_effectif_annuel_annee} (URSSAF)") do |c|
+            - c.with_value do
               %p= etablissement.entreprise_effectif_annuel
-        .fr-my-2v.champ-row
-          %p.champ-label Effectif de l'organisation (INSEE) :
-          .champ-content
-            %p
-            = effectif(etablissement)
-        .fr-my-2v.champ-row
-          %p.champ-label Numéro de TVA intracommunautaire :
-          .champ-content
-            %p= etablissement.entreprise.numero_tva_intracommunautaire
-        .fr-my-2v.champ-row
-          %p.champ-label Adresse :
-          .champ-content
-            %p
-            - etablissement.adresse.split("\n").compact_blank.each do |line|
-              = line
-              %br
-        .fr-my-2v.champ-row
-          %p.champ-label Capital social :
-          .champ-content
-            %p= pretty_currency(etablissement.entreprise.capital_social)
-        .fr-my-2v.champ-row
-          - if etablissement.exercices.any?
-            %p.champ-label Chiffre d’affaires :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Effectif de l’organisation (INSEE)") do |c|
+            - c.with_value do
+              %p= effectif(etablissement)
+
+          = render Dossiers::RowShowComponent.new(label: "Numéro de TVA intracommunautaire") do |c|
+            - c.with_value do
+              %p= etablissement.entreprise.numero_tva_intracommunautaire
+
+          = render Dossiers::RowShowComponent.new(label: "Adresse") do |c|
+            - c.with_value do
               %p
+                - etablissement.adresse.split("\n").compact_blank.each do |line|
+                  = line
+                  %br
+
+          = render Dossiers::RowShowComponent.new(label: "Capital social") do |c|
+            - c.with_value do
+              %p= pretty_currency(etablissement.entreprise.capital_social)
+
+        - if etablissement.exercices.any?
+          = render Dossiers::RowShowComponent.new(label: "Chiffre d’affaires") do |c|
+            - c.with_value do
               - if profile == 'instructeur'
                 %details
                   - etablissement.exercices.each_with_index do |exercice, index|
@@ -107,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',
@@ -121,83 +109,73 @@
 
             = 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.champ-row
-              %p.champ-label
-                Chiffres financiers clés (Banque de France)
-                = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
-              - if controller.is_a?(Instructeurs::AvisController)
-                .champ-content
+            = 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)
                   %p
-                  Les consulter
-                  = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
-                  ,
-                  = link_to "au format xlsx", bilans_bdf_instructeur_avis_path(@avis, format: 'xlsx')
-                  ou
-                  = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
-              - else
-                .champ-content
+                    Les consulter
+                    = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
+                    ,
+                    = link_to "au format xlsx", bilans_bdf_instructeur_avis_path(@avis, format: 'xlsx')
+                    ou
+                    = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
+                - else
                   %p
-                  Les consulter
-                  = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
-                  ,
-                  = link_to "au format xlsx", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'xlsx')
-                  ou
-                  = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
+                    Les consulter
+                    = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
+                    ,
+                    = link_to "au format xlsx", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'xlsx')
+                    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.champ-row
-              %p.champ-label
-                Bilans Banque de France :
-              .champ-content
+            = render Dossiers::RowShowComponent.new(label: "Bilans Banque de France") do |c|
+              - c.with_value do
                 %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.champ-row
-            %p.champ-label Attestation sociale :
-            - if profile == 'instructeur'
-              .champ-content
+          = render Dossiers::RowShowComponent.new(label: "Attestation sociale") do |c|
+            - c.with_value do
+              - if profile == 'instructeur'
                 %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale), **external_link_attributes
-            - else
-              .champ-content
+              - else
                 %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.champ-row
-            %p.champ-label Attestation fiscale :
-            - if profile == 'instructeur'
-              .champ-content
+          = render Dossiers::RowShowComponent.new(label: "Attestation fiscale") do |c|
+            - c.with_value do
+              - if profile == 'instructeur'
                 %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale), **external_link_attributes
-            - else
-              .champ-content
+              - else
                 %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
         - if etablissement.association?
-          .fr-my-2v.champ-row
-            %p.champ-label Numéro RNA :
-            .champ-content
+          = render Dossiers::RowShowComponent.new(label: "Numéro RNA") do |c|
+            - c.with_value do
               %p= etablissement.association_rna
-          .fr-my-2v.champ-row
-            %p.champ-label Titre :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Titre") do |c|
+            - c.with_value do
               %p= etablissement.association_titre
-          .fr-my-2v.champ-row
-            %p.champ-label Objet :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Objet") do |c|
+            - c.with_value do
               %p= etablissement.association_objet
-          .fr-my-2v.champ-row
-            %p.champ-label Date de création :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Date de création") do |c|
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_creation)
-          .fr-my-2v.champ-row
-            %p.champ-label Date de publication :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Date de publication") do |c|
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_publication)
-          .fr-my-2v.champ-row
-            %p.champ-label Date de déclaration :
-            .champ-content
+
+          = render Dossiers::RowShowComponent.new(label: "Date de déclaration") do |c|
+            - c.with_value do
               %p= try_format_date(etablissement.association_date_declaration)
 
   - unless local_assigns[:short_identity]
     %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),
-      **external_link_attributes
+        annuaire_link(etablissement.siret),
+        **external_link_attributes
diff --git a/app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml b/app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml
index 4b3170715..4611b8e80 100644
--- a/app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml
+++ b/app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml
@@ -1,6 +1,5 @@
-.fr-my-2v.champ-row
-  %p.champ-label= "#{libelle} :"
-  .champ-content
+= render Dossiers::RowShowComponent.new(label: libelle) do |c|
+  - c.with_value do
     %details
       - etablissement.entreprise_bilans_bdf.each do |bilan|
         = "#{pretty_date_exercice(year_for_bilan(bilan))} :"
diff --git a/app/views/shared/dossiers/_identite_individual.html.haml b/app/views/shared/dossiers/_identite_individual.html.haml
index cf117b8eb..68e1a8de2 100644
--- a/app/views/shared/dossiers/_identite_individual.html.haml
+++ b/app/views/shared/dossiers/_identite_individual.html.haml
@@ -1,17 +1,16 @@
-.fr-my-2v.champ-row
-  %p.champ-label= t('views.users.dossiers.identite.civility')
-  .champ-content
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.civility')) do |c|
+  - c.with_value do
     %p= individual.gender
-.fr-my-2v.champ-row
-  %p.champ-label= t('views.users.dossiers.identite.first_name')
-  .champ-content
+
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.first_name')) do |c|
+  - c.with_value do
     %p= individual.prenom
-.fr-my-2v.champ-row
-  %p.champ-label= t('views.users.dossiers.identite.last_name')
-  .champ-content
+
+= render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.last_name')) do |c|
+  - c.with_value do
     %p= individual.nom
+
 - if individual.birthdate.present?
-  .fr-my-2v.champ-row
-    %p.champ-label= t('views.users.dossiers.identite.birthdate')
-    .champ-content
+  = render Dossiers::RowShowComponent.new(label: t('views.users.dossiers.identite.birthdate')) do |c|
+    - c.with_value do
       %p= try_format_date(individual.birthdate)
diff --git a/app/views/shared/dossiers/_infos_generales.html.haml b/app/views/shared/dossiers/_infos_generales.html.haml
index ddaef8a29..0bc0cfce5 100644
--- a/app/views/shared/dossiers/_infos_generales.html.haml
+++ b/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
-    %div.champ-row
-      %p.champ-label Justificatif :
-      .champ-content
+    = render Dossiers::RowShowComponent.new(label: "Justificatif") do |c|
+      - c.with_value do
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
-    .fr-mb-2w.champ-row
-      %p.champ-label Motivation :
-      .champ-content
-        .action
-          = dossier.motivation
+    = render Dossiers::RowShowComponent.new(label: "Motivation") do |c|
+      - c.with_value do
+        = dossier.motivation
 
   - if dossier.attestation.present?
-    .fr-mb-2w.champ-row
-      %p.champ-label Attestation :
-      .champ-content
-        .action
-          = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), **external_link_attributes)
+    = render Dossiers::RowShowComponent.new(label: "Attestation") do |c|
+      - c.with_value do
+        = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), **external_link_attributes)
diff --git a/app/views/shared/dossiers/_user_infos.html.haml b/app/views/shared/dossiers/_user_infos.html.haml
index 84468f311..dc3c42196 100644
--- a/app/views/shared/dossiers/_user_infos.html.haml
+++ b/app/views/shared/dossiers/_user_infos.html.haml
@@ -1,4 +1,3 @@
-.fr-my-2w.champ-row
-  %p.champ-label Email :
-  .champ-content
-    %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
+= render Dossiers::RowShowComponent.new(label: 'Email', profile: @profile) do |c|
+  - c.with_value do
+    = user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
diff --git a/app/views/users/dossiers/demande.html.haml b/app/views/users/dossiers/demande.html.haml
index 744e16d72..fceadfe53 100644
--- a/app/views/users/dossiers/demande.html.haml
+++ b/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"
-          .clearfix
+  - if !@dossier.read_only?
+    .fr-container.fr-mt-2w
+      %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"