Merge pull request #9261 from colinux/improve-demande-page

ETQ instructeur/usager: propositions d'améliorations visuelles de la page de demande

app/assets/stylesheets/landing.scss

@@ -145,44 +145,47 @@ $landing-breakpoint: 1040px;
   background-color: var(--background-alt-blue-france);
 }
 
-.more-info {
-  background-color: #FFFFFF;
-}
 
-.numbers {
+.landing {
-  @extend %horizontal-list;
+  .more-info {
-  justify-content: space-around;
+    background-color: #FFFFFF;
-  width: 100%;
-}
-
-.number {
-  @extend %horizontal-list-item;
-  width: 320px;
-  text-align: center;
-
-  @media (max-width: $landing-breakpoint) {
-    margin-bottom: 15px;
   }
-}
 
-.number-value {
+  .numbers {
-  color: var(--text-action-high-blue-france);
+    @extend %horizontal-list;
-  font-size: 2rem;
+    justify-content: space-around;
-  line-height: 2rem;
+    width: 100%;
-  font-weight: 600;
+  }
-}
 
-.number-label {
+  .number {
-  max-width: 10rem;
+    @extend %horizontal-list-item;
-  margin: auto;
+    width: 320px;
-  font-weight: 600;
+    text-align: center;
-  font-size: 1.25rem;
-  line-height: 1.5rem;
-  color: var(--text-label-grey);
-}
 
-.number-label-third {
+    @media (max-width: $landing-breakpoint) {
-  max-width: 13rem;
+      margin-bottom: 15px;
+    }
+  }
+
+  .number-value {
+    color: var(--text-action-high-blue-france);
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: 600;
+  }
+
+  .number-label {
+    max-width: 10rem;
+    margin: auto;
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    color: var(--text-label-grey);
+  }
+
+  .number-label-third {
+    max-width: 13rem;
+  }
 }
 
 $users-breakpoint: 950px;

app/components/dossiers/champ_row_show_component.rb

@@ -28,4 +28,31 @@ class Dossiers::ChampRowShowComponent < ApplicationComponent
 
     key
   end
+
+  def each_champ(&block)
+    @champs.filter { show_champ?(_1) }.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/champ_row_show_component/champ_row_show_component.html.haml

@@ -1,4 +1,4 @@
-- @champs.each do |champ|
+- each_champ do |champ|
   .fr-px-4v.fr-my-2v
     - if champ.repetition?
       %p.champ-label= "#{champ.libelle} :"
@@ -11,7 +11,7 @@
 
         - if updated_after_deposer?(champ)
           %p.fr-mb-0.fr-text--sm
-            %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
+            %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?

app/helpers/dossier_helper.rb

@@ -17,6 +17,13 @@ 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/views/shared/dossiers/_champs.html.haml

@@ -4,9 +4,9 @@
 
       %p.champ-label.flex-grow= dossier.procedure.routing_criteria_name
       %p.fr-mb-0.fr-text--xs
-        - if demande_seen_at&.<(dossier.groupe_instructeur_updated_at)
+        - if demande_seen_at && dossier.groupe_instructeur_updated_at && demande_seen_at < dossier.groupe_instructeur_updated_at
-          %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+          %span.fr-badge.fr-badge--sm{ class: badge_class_if_unseen(demande_seen_at, dossier.groupe_instructeur_updated_at) }
-            = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(dossier.updated_at))
+            = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(dossier.groupe_instructeur_updated_at))
 
     .champ-content{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
       %p= dossier.groupe_instructeur.label

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

@@ -4,7 +4,7 @@
 
 .fr-container.counter-start-header-section.dossier-show
   .fr-grid-row.fr-grid-row--center
-    .fr-col-12.fr-col-lg-10.fr-col-xl-8
+    .fr-col-xl-10
       %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')
 

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

@@ -1,196 +1,197 @@
-- if etablissement.as_degraded_mode?
+.fr-background-alt--grey.fr-p-3v
-  .fr-alert.fr-alert--warning.fr-alert--sm
+  - if etablissement.as_degraded_mode?
-    %p
+    .fr-alert.fr-alert--warning.fr-alert--sm
-      LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
+      %p
-      - if profile == "instructeur"
+        LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
-        %p
+        - if profile == "instructeur"
-          Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
+          %p
-  .fr-my-2v
+            Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
-    %p.champ-label SIRET :
-    .champ-content
-      %p= etablissement.siret
-- else
-  - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
-    .fr-my-2v
-      .champ-content
-        %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
-  - else
-    .fr-my-2v
-      %p.champ-label Dénomination :
-      .champ-content
-        %p= raison_sociale_or_name(etablissement)
     .fr-my-2v
       %p.champ-label SIRET :
       .champ-content
-        %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") }
+        %p= etablissement.siret
+  - else
+    - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
+      .fr-my-2v
+        .champ-content
+          %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
+    - else
+      .fr-my-2v
+        %p.champ-label Dénomination :
+        .champ-content
+          %p= raison_sociale_or_name(etablissement)
+      .fr-my-2v
+        %p.champ-label SIRET :
+        .champ-content
+          %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]
+      - unless local_assigns[:short_identity]
-      - if etablissement.siret != etablissement.entreprise.siret_siege_social
+        - if etablissement.siret != etablissement.entreprise.siret_siege_social
-        .fr-my-2v
-          %p.champ-label SIRET du siège social:
-          .champ-content
-            %p= etablissement.entreprise.siret_siege_social
-      .fr-my-2v
-        %p.champ-label Forme juridique :
-        .champ-content
-          %p= sanitize(etablissement.entreprise.forme_juridique)
-      .fr-my-2v
-        %p.champ-label Libellé NAF :
-        .champ-content
-          %p= etablissement.libelle_naf
-      .fr-my-2v
-        %p.champ-label Code NAF :
-        .champ-content
-          %p= etablissement.naf
-      .fr-my-2v
-        %p.champ-label Date de création :
-        .champ-content
-          %p
-          = try_format_date(etablissement.entreprise.date_creation)
-
-          - if etablissement.entreprise_etat_administratif.present?
-            %span.label= humanized_entreprise_etat_administratif(etablissement)
-
-      - if profile == 'instructeur'
-        .fr-my-2v
-          %p.champ-label
-            Effectif mensuel
-            = try_format_mois_effectif(etablissement)
-            (URSSAF) :
-          .champ-content
-            %p= etablissement.entreprise_effectif_mensuel
-        .fr-my-2v
-          %p.champ-label
-            Effectif moyen annuel
-            = etablissement.entreprise_effectif_annuel_annee
-            (URSSAF) :
-          .champ-content
-            %p= etablissement.entreprise_effectif_annuel
-      .fr-my-2v
-        %p.champ-label Effectif de l'organisation (INSEE) :
-        .champ-content
-          %p
-          = effectif(etablissement)
-      .fr-my-2v
-        %p.champ-label Numéro de TVA intracommunautaire :
-        .champ-content
-          %p= etablissement.entreprise.numero_tva_intracommunautaire
-      .fr-my-2v
-        %p.champ-label Adresse :
-        .champ-content
-          %p
-          - etablissement.adresse.split("\n").each do |line|
-            = line
-            %br
-      .fr-my-2v
-        %p.champ-label Capital social :
-        .champ-content
-          %p= pretty_currency(etablissement.entreprise.capital_social)
-      .fr-my-2v
-        %p.champ-label Chiffre d’affaires :
-        .champ-content
-          %p
-          - if profile == 'instructeur'
-            %details
-              - etablissement.exercices.each_with_index do |exercice, index|
-                = "#{exercice.date_fin_exercice.year} : "
-                = pretty_currency(exercice.ca)
-                %br
-          - 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',
-            locals: { libelle: 'Résultat exercice', key: 'resultat_exercice', etablissement: etablissement }
-
-          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-            locals: { libelle: "Excédent brut d’exploitation", key: 'excedent_brut_exploitation', etablissement: etablissement }
-
-          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-            locals: { libelle: 'Fonds de roulement net global', key: 'fonds_roulement_net_global', etablissement: etablissement }
-
-          = 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
+            %p.champ-label SIRET du siège social:
-              Chiffres financiers clés (Banque de France)
-              = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
-
-            - if controller.is_a?(Instructeurs::AvisController)
-              .champ-content
-                %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
-                %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')
-        - else
-          .fr-my-2v
-            %p.champ-label
-              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.
+              %p= etablissement.entreprise.siret_siege_social
-      - if etablissement.entreprise_attestation_sociale.attached?
         .fr-my-2v
-          %p.champ-label Attestation sociale :
+          %p.champ-label Forme juridique :
-          - if profile == 'instructeur'
-            .champ-content
-              %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
-          %p.champ-label Attestation fiscale :
-          - if profile == 'instructeur'
-            .champ-content
-              %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
-          %p.champ-label Numéro RNA :
           .champ-content
-            %p= etablissement.association_rna
+            %p= sanitize(etablissement.entreprise.forme_juridique)
         .fr-my-2v
-          %p.champ-label Titre :
+          %p.champ-label Libellé NAF :
           .champ-content
-            %p= etablissement.association_titre
+            %p= etablissement.libelle_naf
         .fr-my-2v
-          %p.champ-label Objet :
+          %p.champ-label Code NAF :
           .champ-content
-            %p= etablissement.association_objet
+            %p= etablissement.naf
         .fr-my-2v
           %p.champ-label Date de création :
           .champ-content
-            %p= try_format_date(etablissement.association_date_creation)
+            %p
-        .fr-my-2v
+            = try_format_date(etablissement.entreprise.date_creation)
-          %p.champ-label Date de publication :
-          .champ-content
-            %p= try_format_date(etablissement.association_date_publication)
-        .fr-my-2v
-          %p.champ-label Date de déclaration :
-          .champ-content
-            %p= try_format_date(etablissement.association_date_declaration)
 
-- unless local_assigns[:short_identity]
+            - if etablissement.entreprise_etat_administratif.present?
-  %p
+              %span.label= humanized_entreprise_etat_administratif(etablissement)
-    = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr » (ex: fiche d’immatriculation RNCS)",
+
-    annuaire_link(etablissement.siret),
+        - if profile == 'instructeur'
-    target: "_blank"
+          .fr-my-2v
+            %p.champ-label
+              Effectif mensuel
+              = try_format_mois_effectif(etablissement)
+              (URSSAF) :
+            .champ-content
+              %p= etablissement.entreprise_effectif_mensuel
+          .fr-my-2v
+            %p.champ-label
+              Effectif moyen annuel
+              = etablissement.entreprise_effectif_annuel_annee
+              (URSSAF) :
+            .champ-content
+              %p= etablissement.entreprise_effectif_annuel
+        .fr-my-2v
+          %p.champ-label Effectif de l'organisation (INSEE) :
+          .champ-content
+            %p
+            = effectif(etablissement)
+        .fr-my-2v
+          %p.champ-label Numéro de TVA intracommunautaire :
+          .champ-content
+            %p= etablissement.entreprise.numero_tva_intracommunautaire
+        .fr-my-2v
+          %p.champ-label Adresse :
+          .champ-content
+            %p
+            - etablissement.adresse.split("\n").each do |line|
+              = line
+              %br
+        .fr-my-2v
+          %p.champ-label Capital social :
+          .champ-content
+            %p= pretty_currency(etablissement.entreprise.capital_social)
+        .fr-my-2v
+          %p.champ-label Chiffre d’affaires :
+          .champ-content
+            %p
+            - if profile == 'instructeur'
+              %details
+                - etablissement.exercices.each_with_index do |exercice, index|
+                  = "#{exercice.date_fin_exercice.year} : "
+                  = pretty_currency(exercice.ca)
+                  %br
+            - 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',
+              locals: { libelle: 'Résultat exercice', key: 'resultat_exercice', etablissement: etablissement }
+
+            = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+              locals: { libelle: "Excédent brut d’exploitation", key: 'excedent_brut_exploitation', etablissement: etablissement }
+
+            = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+              locals: { libelle: 'Fonds de roulement net global', key: 'fonds_roulement_net_global', etablissement: etablissement }
+
+            = 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)} :"
+
+              - if controller.is_a?(Instructeurs::AvisController)
+                .champ-content
+                  %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
+                  %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')
+          - else
+            .fr-my-2v
+              %p.champ-label
+                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
+            %p.champ-label Attestation sociale :
+            - if profile == 'instructeur'
+              .champ-content
+                %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
+            %p.champ-label Attestation fiscale :
+            - if profile == 'instructeur'
+              .champ-content
+                %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
+            %p.champ-label Numéro RNA :
+            .champ-content
+              %p= etablissement.association_rna
+          .fr-my-2v
+            %p.champ-label Titre :
+            .champ-content
+              %p= etablissement.association_titre
+          .fr-my-2v
+            %p.champ-label Objet :
+            .champ-content
+              %p= etablissement.association_objet
+          .fr-my-2v
+            %p.champ-label Date de création :
+            .champ-content
+              %p= try_format_date(etablissement.association_date_creation)
+          .fr-my-2v
+            %p.champ-label Date de publication :
+            .champ-content
+              %p= try_format_date(etablissement.association_date_publication)
+          .fr-my-2v
+            %p.champ-label Date de déclaration :
+            .champ-content
+              %p= try_format_date(etablissement.association_date_declaration)
+
+  - unless local_assigns[:short_identity]
+    %p
+      = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr » (ex: fiche d’immatriculation RNCS)",
+      annuaire_link(etablissement.siret),
+      target: "_blank"

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

@@ -1,9 +1,13 @@
 .fr-px-2w
-  %p.fr-my-2w
+  .fr-my-2w
-    = t(:submitted_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.depose_at))
+    %p
-    %br
+      = t(:submitted_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.depose_at))
-    - if dossier.last_champ_updated_at.present? && dossier.last_champ_updated_at > dossier.depose_at
+      %br
-      = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.last_champ_updated_at))
+      - if dossier.last_champ_updated_at.present? && dossier.last_champ_updated_at > dossier.depose_at
+        = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.last_champ_updated_at))
+
+    .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?

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

@@ -9,7 +9,7 @@
   - if @dossier.en_construction?
     .fr-container
       .fr-grid-row.fr-grid-row--center
-        .fr-col-md-10.fr-col-xl-9
+        .fr-col-xl-10
           = render Dossiers::EnConstructionNotSubmittedComponent.new(dossier: @dossier, user: current_user)
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
@@ -17,7 +17,7 @@
 
   .fr-container.fr-mt-2w
     .fr-grid-row.fr-grid-row--center
-      .fr-col-12.fr-col-lg-10.fr-col-xl-8
+      .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

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

@@ -112,7 +112,7 @@ describe 'shared/dossiers/champs', type: :view do
     let(:champ) { create(:champ_dossier_link, dossier: dossier, value: nil) }
     let(:champs) { [champ] }
 
-    it { is_expected.to include("non saisi") }
+    it { is_expected.not_to include("non saisi") }
 
     context 'when profile is usager' do
       let(:profile) { "usager" }
@@ -125,7 +125,7 @@ describe 'shared/dossiers/champs', type: :view do
     let(:champ) { create(:champ_without_piece_justificative, dossier:) }
     let(:champs) { [champ] }
 
-    it { is_expected.to include("pièce justificative non saisie") }
+    it { is_expected.not_to include("pièce justificative non saisie") }
 
     context 'when profile is usager' do
       let(:profile) { "usager" }