style(user/expiration): convert banner to DSFR

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

@@ -2,23 +2,22 @@
 - if dossier.expirable?
   %p.expires_at.mb-2
     %small= t("shared.dossiers.header.expires_at.#{dossier.state}", date: safe_expiration_date(dossier), duree_conservation_totale: dossier.duree_totale_conservation_in_months)
-  -# big banner warning
+
   - if dossier.close_to_expiration?
-    .card.warning.mb-3
-      .card-title= t('users.dossiers.header.banner.title')
-      %p
-      - if dossier.brouillon?
-        = t('users.dossiers.header.banner.states.brouillon')
-      - elsif dossier.en_construction?
-        = t('users.dossiers.header.banner.states.en_construction')
-      - elsif dossier.termine?
-        = t('users.dossiers.header.banner.states.termine')
+    = render Dsfr::CalloutComponent.new(title: t('users.dossiers.header.banner.title'), theme: :warning) do |c|
+      - c.with_body do
+        - if dossier.brouillon?
+          = t('users.dossiers.header.banner.states.brouillon')
+        - elsif dossier.en_construction?
+          = t('users.dossiers.header.banner.states.en_construction', nominal_duration_months: dossier.procedure.duree_conservation_dossiers_dans_ds)
+        - elsif dossier.termine?
+          = t('users.dossiers.header.banner.states.termine')
 
       - if dossier.expiration_can_be_extended?
-        %br
-        = button_to users_dossier_repousser_expiration_path(dossier), class: 'button mt-2', id: 'test-user-repousser-expiration' do
-          %span.icon.standby
-          = t('users.dossiers.header.banner.button_delay_expiration', count: dossier.procedure.duree_conservation_dossiers_dans_ds)
+        - c.with_bottom do
+          = button_to users_dossier_repousser_expiration_path(dossier), class: 'fr-btn', id: 'test-user-repousser-expiration' do
+            = t('users.dossiers.header.banner.button_delay_expiration', count: dossier.procedure.duree_conservation_dossiers_dans_ds)
+
 - elsif dossier.en_instruction? && dossier.procedure.procedure_expires_when_termine_enabled
   %p.expires_at_en_instruction
     %small= t("shared.dossiers.header.expires_at.en_instruction")

config/locales/views/users/header/en.yml

@@ -14,7 +14,7 @@ en:
           contact_service: For more information, please contact the service %{service_name}, available at  %{service_phone_number} or by email %{service_email}
           states:
             brouillon: Your file is still in draft and will soon expire. So it will be deleted soon without being instructed. If you want to pursue your procedure you can submit it now. Otherwise you are able to delay its expiration by clicking on the underneath button.
-            en_construction: Your file is pending for instruction. The maximum delay is 6 months, but you can extend the duration by a month by clicking on the underneath button.
+            en_construction: Your file is pending for instruction. The maximum delay is %{nominal_duration_months} months, but you can extend the duration by clicking on the underneath button.
             termine: Your file had been processed and will soon expire. So it will be deleted soon. If you want to keep it, you can dowload a PDF file of it.
           button_delay_expiration:
             one: "Keep for %{count} more month"

config/locales/views/users/header/fr.yml

@@ -13,8 +13,8 @@ fr:
           contact_service: Pour plus d’informations, veuillez vous rapprocher du service %{service_name}, disponible au %{service_phone_number} ou par email %{service_email}
           title: Votre dossier va expirer
           states:
-            brouillon: Votre dossier est en brouillon, mais va bientôt expirer. Cela signifie qu’il va bientôt être supprimé sans avoir été déposé. Si vous souhaitez le conserver afin de poursuivre la démarche, vous pouvez le conserver un mois de plus en cliquant sur le bouton ci-dessous.
-            en_construction: Votre dossier est en attente de prise en charge par l’administration. Le delais de prise en charge maximale est de 6 mois. Vous pouvez toutefois étendre cette durée d’un mois en cliquant sur le bouton suivant.
+            brouillon: Votre dossier est en brouillon, mais va bientôt expirer. Cela signifie qu’il va bientôt être supprimé sans avoir été déposé. Si vous souhaitez le conserver afin de poursuivre la démarche, vous pouvez étendre la durée de conversation en cliquant sur le bouton ci-dessous.
+            en_construction: Votre dossier est en attente de prise en charge par l’administration. Le délai de prise en charge maximale est de %{nominal_duration_months} mois. Vous pouvez toutefois étendre cette durée en cliquant sur le bouton ci-dessous.
             termine: Le traitement de votre dossier est terminé, mais il va bientôt expirer. Cela signifie qu’il va bientôt être supprimé. Si vous souhaitez conserver une trace, vous pouvez le télécharger au format PDF.
           button_delay_expiration:
             one: "Conserver %{count} mois supplémentaire"