From 72b7ff221cfd97c3eb68b93a4a7ee25ec29907b3 Mon Sep 17 00:00:00 2001
From: Nicolas Bouilleaud <nico@bou.io>
Date: Tue, 24 Sep 2019 16:38:58 +0200
Subject: [PATCH] move procedure to new design

---
 .../admin/procedures_controller.rb            |  53 +---
 .../administrateur_controller.rb              |   2 +-
 .../procedure_administrateurs_controller.rb   |   2 +-
 .../procedures_controller.rb                  |  61 +++-
 app/javascript/new_design/procedure-edit.js   |  24 ++
 app/javascript/packs/application.js           |   1 +
 .../admin/procedures/_informations.html.haml  | 142 ---------
 app/views/admin/procedures/_monavis.html.haml |  17 -
 app/views/admin/procedures/edit.html.haml     |   6 -
 app/views/admin/procedures/monavis.html.haml  |   6 -
 app/views/admin/procedures/new.html.haml      |   9 -
 .../_procedure_description.html.haml          |   4 +-
 .../procedures/_informations.html.haml        | 145 +++++++++
 .../procedures/_monavis.html.haml             |  15 +
 .../procedures/edit.html.haml                 |  16 +
 .../procedures/monavis.html.haml              |  15 +
 .../procedures/new.html.haml                  |  14 +
 config/routes.rb                              |  13 +-
 .../admin/procedures_controller_spec.rb       | 278 -----------------
 .../procedures_controller_spec.rb             | 290 ++++++++++++++++++
 .../procedures/edit.html.haml_spec.rb         |   4 +-
 21 files changed, 597 insertions(+), 520 deletions(-)
 create mode 100644 app/javascript/new_design/procedure-edit.js
 delete mode 100644 app/views/admin/procedures/_informations.html.haml
 delete mode 100644 app/views/admin/procedures/_monavis.html.haml
 delete mode 100644 app/views/admin/procedures/edit.html.haml
 delete mode 100644 app/views/admin/procedures/monavis.html.haml
 delete mode 100644 app/views/admin/procedures/new.html.haml
 create mode 100644 app/views/new_administrateur/procedures/_informations.html.haml
 create mode 100644 app/views/new_administrateur/procedures/_monavis.html.haml
 create mode 100644 app/views/new_administrateur/procedures/edit.html.haml
 create mode 100644 app/views/new_administrateur/procedures/monavis.html.haml
 create mode 100644 app/views/new_administrateur/procedures/new.html.haml
 rename spec/views/{admin => new_administrateur}/procedures/edit.html.haml_spec.rb (68%)

diff --git a/app/controllers/admin/procedures_controller.rb b/app/controllers/admin/procedures_controller.rb
index 6ddd005e0..91bdb5cd5 100644
--- a/app/controllers/admin/procedures_controller.rb
+++ b/app/controllers/admin/procedures_controller.rb
@@ -2,7 +2,7 @@ class Admin::ProceduresController < AdminController
   include SmartListing::Helper::ControllerExtensions
   helper SmartListing::Helper
 
-  before_action :retrieve_procedure, only: [:show, :edit, :delete_logo, :delete_deliberation, :delete_notice, :monavis, :update_monavis, :publish_validate, :publish]
+  before_action :retrieve_procedure, only: [:show, :delete_logo, :delete_deliberation, :delete_notice, :publish_validate, :publish]
 
   def index
     if current_administrateur.procedures.count != 0
@@ -49,9 +49,6 @@ class Admin::ProceduresController < AdminController
     @current_administrateur = current_administrateur
   end
 
-  def edit
-  end
-
   def destroy
     procedure = current_administrateur.procedures.find(params[:id])
 
@@ -66,40 +63,6 @@ class Admin::ProceduresController < AdminController
     redirect_to admin_procedures_draft_path
   end
 
-  def new
-    @procedure ||= Procedure.new(for_individual: true)
-  end
-
-  def create
-    @procedure = Procedure.new(procedure_params.merge(administrateurs: [current_administrateur]))
-
-    if !@procedure.save
-      flash.now.alert = @procedure.errors.full_messages
-      render 'new'
-    else
-      flash.notice = 'Démarche enregistrée.'
-      current_administrateur.instructeur.assign_to_procedure(@procedure)
-
-      redirect_to champs_procedure_path(@procedure)
-    end
-  end
-
-  def update
-    @procedure = current_administrateur.procedures.find(params[:id])
-
-    if !@procedure.update(procedure_params)
-      flash.now.alert = @procedure.errors.full_messages
-      render 'edit'
-    elsif @procedure.brouillon?
-      reset_procedure
-      flash.notice = 'Démarche modifiée. Tous les dossiers de cette démarche ont été supprimés.'
-      redirect_to edit_admin_procedure_path(id: @procedure.id)
-    else
-      flash.notice = 'Démarche modifiée.'
-      redirect_to edit_admin_procedure_path(id: @procedure.id)
-    end
-  end
-
   def publish_validate
     @procedure.assign_attributes(publish_params)
   end
@@ -182,18 +145,6 @@ class Admin::ProceduresController < AdminController
     render layout: 'application'
   end
 
-  def monavis
-  end
-
-  def update_monavis
-    if !@procedure.update(procedure_params)
-      flash.now.alert = @procedure.errors.full_messages
-    else
-      flash.notice = 'le champ MonAvis a bien été mis à jour'
-    end
-    render 'monavis'
-  end
-
   def active_class
     @active_class = 'active'
   end
@@ -238,7 +189,7 @@ class Admin::ProceduresController < AdminController
   end
 
   def procedure_params
-    editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on, :monavis_embed]
+    editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on]
     permited_params = if @procedure&.locked?
       params.require(:procedure).permit(*editable_params)
     else
diff --git a/app/controllers/new_administrateur/administrateur_controller.rb b/app/controllers/new_administrateur/administrateur_controller.rb
index d8828ba1c..6a8da5753 100644
--- a/app/controllers/new_administrateur/administrateur_controller.rb
+++ b/app/controllers/new_administrateur/administrateur_controller.rb
@@ -9,7 +9,7 @@ module NewAdministrateur
 
     rescue ActiveRecord::RecordNotFound
       flash.alert = 'Démarche inexistante'
-      redirect_to admin_procedures_path
+      redirect_to admin_procedures_path, status: 404
     end
 
     def procedure_locked?
diff --git a/app/controllers/new_administrateur/procedure_administrateurs_controller.rb b/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
index b2fa6811d..f01a83f97 100644
--- a/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
+++ b/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
@@ -1,6 +1,6 @@
 module NewAdministrateur
   class ProcedureAdministrateursController < AdministrateurController
-    before_action :retrieve_procedure
+    before_action :retrieve_procedure, except: [:new]
 
     def index
     end
diff --git a/app/controllers/new_administrateur/procedures_controller.rb b/app/controllers/new_administrateur/procedures_controller.rb
index e51e75aa0..b9236fdb6 100644
--- a/app/controllers/new_administrateur/procedures_controller.rb
+++ b/app/controllers/new_administrateur/procedures_controller.rb
@@ -1,6 +1,6 @@
 module NewAdministrateur
   class ProceduresController < AdministrateurController
-    before_action :retrieve_procedure, only: [:champs, :annotations]
+    before_action :retrieve_procedure, only: [:champs, :annotations, :edit, :monavis, :update_monavis]
     before_action :procedure_locked?, only: [:champs, :annotations]
 
     def apercu
@@ -8,6 +8,55 @@ module NewAdministrateur
       @tab = apercu_tab
     end
 
+    def new
+      @procedure ||= Procedure.new(for_individual: true)
+    end
+
+    def edit
+    end
+
+    def create
+      @procedure = Procedure.new(procedure_params.merge(administrateurs: [current_administrateur]))
+
+      if !@procedure.save
+        flash.now.alert = @procedure.errors.full_messages
+        render 'new'
+      else
+        flash.notice = 'Démarche enregistrée.'
+        current_administrateur.instructeur.assign_to_procedure(@procedure)
+
+        redirect_to champs_procedure_path(@procedure)
+      end
+    end
+
+    def update
+      @procedure = current_administrateur.procedures.find(params[:id])
+
+      if !@procedure.update(procedure_params)
+        flash.now.alert = @procedure.errors.full_messages
+        render 'edit'
+      elsif @procedure.brouillon?
+        reset_procedure
+        flash.notice = 'Démarche modifiée. Tous les dossiers de cette démarche ont été supprimés.'
+        redirect_to edit_admin_procedure_path(id: @procedure.id)
+      else
+        flash.notice = 'Démarche modifiée.'
+        redirect_to edit_admin_procedure_path(id: @procedure.id)
+      end
+    end
+
+    def monavis
+    end
+
+    def update_monavis
+      if !@procedure.update(procedure_params)
+        flash.now.alert = @procedure.errors.full_messages
+      else
+        flash.notice = 'le champ MonAvis a bien été mis à jour'
+      end
+      render 'monavis'
+    end
+
     private
 
     def apercu_tab
@@ -17,5 +66,15 @@ module NewAdministrateur
     def procedure_without_control
       Procedure.find(params[:id])
     end
+
+    def procedure_params
+      editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on, :monavis_embed]
+      permited_params = if @procedure&.locked?
+        params.require(:procedure).permit(*editable_params)
+      else
+        params.require(:procedure).permit(*editable_params, :duree_conservation_dossiers_dans_ds, :duree_conservation_dossiers_hors_ds, :for_individual, :path)
+      end
+      permited_params
+    end
   end
 end
diff --git a/app/javascript/new_design/procedure-edit.js b/app/javascript/new_design/procedure-edit.js
new file mode 100644
index 000000000..7b71d2ecb
--- /dev/null
+++ b/app/javascript/new_design/procedure-edit.js
@@ -0,0 +1,24 @@
+import { show, hide, delegate } from '@utils';
+
+function syncInputToElement(fromSelector, toSelector) {
+  const fromElement = document.querySelector(fromSelector);
+  const toElement = document.querySelector(toSelector);
+  if (toElement && fromElement) {
+    toElement.innerText = fromElement.value;
+  }
+}
+
+function syncFormToPreview() {
+  syncInputToElement('#procedure_libelle', 'h2.procedure-title');
+  syncInputToElement('#procedure_description', '.procedure-description-body');
+
+  const euroFlagCheckbox = document.querySelector('#procedure_euro_flag');
+  const euroFlagLogo = document.querySelector('#euro_flag');
+  if (euroFlagCheckbox && euroFlagLogo) {
+    euroFlagCheckbox.checked ? show(euroFlagLogo) : hide(euroFlagLogo);
+  }
+}
+
+delegate('input', '#procedure-edit #procedure_libelle', syncFormToPreview);
+delegate('input', '#procedure-edit #procedure_description', syncFormToPreview);
+delegate('change', '#procedure-edit #procedure_euro_flag', syncFormToPreview);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 784ba4497..c72b799f9 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -22,6 +22,7 @@ import '../shared/toggle-target';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
+import '../new_design/procedure-edit';
 import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
diff --git a/app/views/admin/procedures/_informations.html.haml b/app/views/admin/procedures/_informations.html.haml
deleted file mode 100644
index 0184c07bf..000000000
--- a/app/views/admin/procedures/_informations.html.haml
+++ /dev/null
@@ -1,142 +0,0 @@
-- if @procedure.locked?
-  .alert.alert-info
-    Cette démarche est publiée, certains éléments de la description ne sont plus modifiables
-
-.form-group
-  %h4 Libellé*
-  = f.text_field :libelle, class: 'form-control', placeholder: 'Libellé de la démarche'
-
-.form-group
-  %h4 Description*
-  = f.text_area :description, rows: '6', placeholder: 'Description du projet', class: 'form-control'
-
-- if !@procedure.locked?
-  .form-group
-    %h4 Conservation des données
-    = f.label :duree_conservation_dossiers_dans_ds, "Sur demarches-simplifiees.fr* (durée en mois après le début de l’instruction)"
-    = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
-
-    = f.label :duree_conservation_dossiers_hors_ds, "Hors demarches-simplifiees.fr* (durée en mois après la fin de l'instruction)"
-    = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
-
-- if @procedure.created_at.present?
-  .form-group
-    %h4 Où les usagers trouveront-ils le lien vers la démarche ?
-    = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
-
-.form-group
-  %h4 Cadre juridique *
-  %p Texte qui justifie le droit de collecter les données demandées dans votre démarche auprès des usagers, par exemple :
-  %ul
-    %li Texte de loi (loi, décret, circulaire, arrêté,…)
-    %li Texte juridique (statuts, délibération, décision du conseil d'administration…)
-    %li
-      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
-
-  %p.help-block
-    %i.fa.fa-info-circle
-    Vous pouvez saisir un lien vers ce texte ou importer celui-ci directement.
-
-  .row
-    .col-md-6
-      = f.label :cadre_juridique, 'Lien vers le texte'
-      = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
-    .col-md-6
-      = f.label :deliberation, 'Importer le texte'
-      - deliberation = @procedure.deliberation
-      - if !deliberation.attached?
-        = f.file_field :deliberation,
-          direct_upload: true
-      - else
-        %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
-          = deliberation.filename.to_s
-        - if @procedure.persisted?
-          = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
-        %br
-        Modifier :
-        = f.file_field :deliberation,
-          direct_upload: true
-
-.form-group
-  %h4 Notice explicative de la démarche
-  - notice = @procedure.notice
-  - if !notice.attached?
-    = f.file_field :notice,
-      direct_upload: true
-  - else
-    %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
-      = notice.filename.to_s
-    - if @procedure.persisted?
-      \-
-      = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
-    %br
-    Modifier :
-    = f.file_field :notice,
-      direct_upload: true
-
-.row
-  .col-md-6
-    %h4 Logo de la démarche
-    - if @procedure.logo.attached?
-      = image_tag @procedure.logo_url, { style: 'height: 40px; display: inline; margin-right: 6px;', id: 'preview_procedure_logo' }
-      \-
-
-      - if @procedure.persisted?
-        = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
-    = f.file_field :logo,
-      direct_upload: true,
-      accept: 'image/png, image/jpg, image/jpeg',
-      style: 'display: inline'
-
-    %div{ style: 'margin-top: 5px;' }
-      %i
-        Fichier accepté : JPG / JPEG / PNG
-  .col-md-6
-    %h4 Drapeau européen
-    .checkbox
-      %label
-        = f.check_box :euro_flag
-        Afficher le drapeau européen
-
-- if !@procedure.locked?
-  .row
-    .col-md-6
-      %h4 À qui s’adresse ma démarche ?
-      .checkbox
-        %label
-          = f.radio_button :for_individual, true
-          %b Ma démarche s’adresse à un particulier
-
-        %p
-          En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-
-      .checkbox
-        %label
-          = f.radio_button :for_individual, false
-          %b Ma démarche s’adresse à une personne morale
-
-        %p
-          En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
-
-      %b
-        Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
-
-.row
-  .col-md-6
-    %h4 Options avancées
-
-    - if feature_enabled?(:administrateur_web_hook)
-      %label{ for: :web_hook_url } Lien de rappel HTTP (webhook)
-      = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
-      %p.help-block
-        %i.fa.fa-info-circle
-        Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
-        = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
-        \.
-
-    %label{ for: :auto_archive_on } Clôture automatique le
-    = f.date_field :auto_archive_on, id: 'auto_archive_on', value: @procedure.auto_archive_on
-    (à 00h01)
-    %p.help-block
-      %i.fa.fa-info-circle
-      La clôture automatique suspend la publication de la démarche et entraîne le passage de tous les dossiers au statut "en instruction", ce qui ne permet plus aux usagers de les modifier. Le passage en instruction des dossiers s'accompagne de l'envoi de l'email d'accusé de passage en instruction (configurable par l'administrateur dans la partie "E-mail" de la démarche).
diff --git a/app/views/admin/procedures/_monavis.html.haml b/app/views/admin/procedures/_monavis.html.haml
deleted file mode 100644
index f934f8fad..000000000
--- a/app/views/admin/procedures/_monavis.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-.form-group
-  %h3 Insérer un lien vers « MonAvis »
-  %p
-    Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
-    %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
-    », créer un compte, et référencer là démarche que vous venez de publier.
-
-  %p
-    Vous pouvez
-    %a{ :href => "https://doc.demarches-simplifiees.fr/tutoriels/integration-du-bouton-mon-avis" } consulter notre tutoriel complet
-    pour intégrer le bouton « MonAvis » sur demarches-simplifiees.fr.
-
-  %p Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
-
-  .form-group
-    = f.label :monavis_embed, "Mon avis"
-    = f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'form-control'
diff --git a/app/views/admin/procedures/edit.html.haml b/app/views/admin/procedures/edit.html.haml
deleted file mode 100644
index 5efaea830..000000000
--- a/app/views/admin/procedures/edit.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.row.white-back
-  #procedure_new.section.section-label
-    = form_for @procedure, url: url_for({ controller: 'admin/procedures', action: :update, id: @procedure.id }), multipart: true do |f|
-      = render partial: 'informations', locals: { f: f }
-      .text-right
-        = f.button 'Enregistrer', class: 'btn btn-success'
diff --git a/app/views/admin/procedures/monavis.html.haml b/app/views/admin/procedures/monavis.html.haml
deleted file mode 100644
index 0b55058a2..000000000
--- a/app/views/admin/procedures/monavis.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.row.white-back
-  #procedure_new.section.section-label
-    = form_for @procedure, url: url_for({ controller: 'admin/procedures', action: :update_monavis }), multipart: true do |f|
-      = render partial: 'monavis', locals: { f: f }
-      .text-right
-        = f.button 'Enregistrer', class: 'btn btn-success'
diff --git a/app/views/admin/procedures/new.html.haml b/app/views/admin/procedures/new.html.haml
deleted file mode 100644
index a61ff161f..000000000
--- a/app/views/admin/procedures/new.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.row.white-back
-  %h2
-    = t('dynamics.admin.dossiers.tableau_de_bord.nouvelle_procedure')
-
-  #procedure_new.section.section-label
-    = form_for @procedure, url: { controller: 'admin/procedures', action: :create }, multipart: true do |f|
-      = render partial: 'informations', locals: { f: f }
-      .text-center
-        = f.button 'Valider', class: 'btn btn-info btn-lg btn-block', id: 'save-procedure'
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml
index 56409a384..2a6fbb08e 100644
--- a/app/views/layouts/commencer/_procedure_description.html.haml
+++ b/app/views/layouts/commencer/_procedure_description.html.haml
@@ -1,7 +1,7 @@
 .procedure-logos
   = image_tag procedure.logo_url
-  - if procedure.euro_flag
-    = image_tag "flag_of_europe.svg"
+  - if procedure.euro_flag || (defined?(force_euro_flag) && force_euro_flag == true)
+    = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
 %h2.procedure-title
   = procedure.libelle
 .procedure-description
diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
new file mode 100644
index 000000000..a0945b190
--- /dev/null
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -0,0 +1,145 @@
+.container
+  - if @procedure.locked?
+    .alert.alert-info
+      Cette démarche est publiée, certains éléments de la description ne sont plus modifiables
+
+.two-columns
+  .columns-container
+    .column
+      = f.label :libelle do
+        Titre de la démarche
+        %span.mandatory *
+      = f.text_field :libelle, class: 'form-control', placeholder: 'Titre'
+
+      = f.label :description do
+        Description
+        %span.mandatory *
+      = f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
+
+      %h2.header-section Logo de la démarche
+      - if @procedure.persisted?
+        = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
+      .pj-input
+        = f.file_field :logo,
+          direct_upload: true,
+          accept: 'image/png, image/jpg, image/jpeg',
+          style: 'display: inline'
+
+      %div{ style: 'margin-top: 5px;' }
+        %i
+          Fichier accepté : JPG / JPEG / PNG
+
+      = f.label :euro_flag do
+        = f.check_box :euro_flag
+        Afficher aussi le drapeau européen
+
+    .column.procedure-preview
+      = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure, force_euro_flag: true }
+
+.container
+  - if !@procedure.locked?
+    %h2.header-section Conservation des données
+    = f.label :duree_conservation_dossiers_dans_ds, "Sur demarches-simplifiees.fr* (durée en mois après le début de l’instruction)"
+    = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
+
+    = f.label :duree_conservation_dossiers_hors_ds, "Hors demarches-simplifiees.fr* (durée en mois après la fin de l'instruction)"
+    = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
+
+  - if @procedure.created_at.present?
+    = f.label :description do
+      Où les usagers trouveront-ils le lien vers la démarche ?
+    = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
+
+  %h2.header-section Cadre juridique *
+  .explication
+    Texte qui justifie le droit de collecter les données demandées dans votre démarche auprès des usagers, par exemple :
+    %br
+    Texte de loi (loi, décret, circulaire, arrêté,…)
+    %br
+    Texte juridique (statuts, délibération, décision du conseil d'administration…)
+    %br
+      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
+
+  %p
+    Vous pouvez saisir un lien vers ce texte ou importer celui-ci directement.
+
+  = f.label :cadre_juridique, 'Lien vers le texte'
+  = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
+
+  = f.label :deliberation, 'Importer le texte'
+  - deliberation = @procedure.deliberation
+  - if !deliberation.attached?
+    .pj-input
+      = f.file_field :deliberation,
+        direct_upload: true
+  - else
+    %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
+      = deliberation.filename.to_s
+    - if @procedure.persisted?
+      = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
+    %br
+    Modifier :
+    .pj-input
+      = f.file_field :deliberation,
+        direct_upload: true
+
+  - notice = @procedure.notice
+  %h2.header-section Notice explicative de la démarche
+  .explication
+    Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
+
+  - if !notice.attached?
+    .pj-input
+      = f.file_field :notice,
+        direct_upload: true
+  - else
+    %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
+      = notice.filename.to_s
+    - if @procedure.persisted?
+      \-
+      = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
+    %br
+    Modifier :
+    .pj-input
+      = f.file_field :notice,
+        direct_upload: true
+
+  - if !@procedure.locked?
+    %h2.header-section À qui s’adresse ma démarche ?
+    .radios
+      = f.label :for_individual, value: true do
+        = f.radio_button :for_individual, true
+        Ma démarche s’adresse à un particulier
+
+      %p.explication
+        En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
+
+    .radios
+      = f.label :for_individual, value: false do
+        = f.radio_button :for_individual, false
+        Ma démarche s’adresse à une personne morale
+
+    %p.explication
+      En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
+
+    %p
+      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
+
+  %h2.header-section Options avancées
+  - if feature_enabled?(:administrateur_web_hook)
+    = f.label :web_hook_url do
+      Lien de rappel HTTP (webhook)
+    = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
+    %p.help-block
+      %i.fa.fa-info-circle
+      Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
+      = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
+      \.
+
+  = f.label :auto_archive_on do
+    Clôture automatique à 00h01 le :
+  = f.date_field :auto_archive_on, id: 'auto_archive_on', value: @procedure.auto_archive_on
+
+  %p.explication
+    La clôture automatique suspend la publication de la démarche et entraîne le passage de tous les dossiers "en construction"
+    (c'est à dire ceux qui ont été déposés), au statut "en instruction", ce qui ne permet plus aux usagers de les modifier.
diff --git a/app/views/new_administrateur/procedures/_monavis.html.haml b/app/views/new_administrateur/procedures/_monavis.html.haml
new file mode 100644
index 000000000..8b4b25e99
--- /dev/null
+++ b/app/views/new_administrateur/procedures/_monavis.html.haml
@@ -0,0 +1,15 @@
+%p.explication
+  Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
+  %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
+  », créer un compte, et référencer là démarche que vous venez de publier.
+  %br
+  %br
+  Vous pouvez
+  %a{ :href => "https://doc.demarches-simplifiees.fr/tutoriels/integration-du-bouton-mon-avis" } consulter notre tutoriel complet
+  pour intégrer le bouton « MonAvis » sur demarches-simplifiees.fr.
+  %br
+  %br
+  Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
+
+= f.label :monavis_embed, "Mon avis"
+= f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'form-control'
diff --git a/app/views/new_administrateur/procedures/edit.html.haml b/app/views/new_administrateur/procedures/edit.html.haml
new file mode 100644
index 000000000..038714a94
--- /dev/null
+++ b/app/views/new_administrateur/procedures/edit.html.haml
@@ -0,0 +1,16 @@
+#procedure-edit
+  = render partial: 'new_administrateur/breadcrumbs',
+    locals: { steps: [link_to('Démarches', admin_procedures_path),
+                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                      'Description'] }
+
+  .container
+    %h1.page-title Présentation
+
+  = form_for @procedure, url: url_for({ controller: 'new_administrateur/procedures', action: :update, id: @procedure.id }), multipart: true, html: { class: 'form' } do |f|
+
+    = render partial: 'informations', locals: { f: f }
+
+    .container
+      .text-right
+        = f.button 'Enregistrer', class: 'button primary send'
diff --git a/app/views/new_administrateur/procedures/monavis.html.haml b/app/views/new_administrateur/procedures/monavis.html.haml
new file mode 100644
index 000000000..c10497e5d
--- /dev/null
+++ b/app/views/new_administrateur/procedures/monavis.html.haml
@@ -0,0 +1,15 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    link_to('MonAvis', admin_procedures_path)] }
+
+.container
+  %h1.page-title
+    Insérer un lien vers « MonAvis »
+
+.container
+  %h1
+  = form_for @procedure, url: url_for({ controller: 'new_administrateur/procedures', action: :update_monavis }), multipart: true, html: { class: 'form' } do |f|
+    = render partial: 'monavis', locals: { f: f }
+    .text-right
+      = f.button 'Enregistrer', class: 'button primary send'
diff --git a/app/views/new_administrateur/procedures/new.html.haml b/app/views/new_administrateur/procedures/new.html.haml
new file mode 100644
index 000000000..8bee8c4e1
--- /dev/null
+++ b/app/views/new_administrateur/procedures/new.html.haml
@@ -0,0 +1,14 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    'Nouvelle'] }
+
+.container
+  %h1.page-title
+    = t('dynamics.admin.dossiers.tableau_de_bord.nouvelle_procedure')
+
+.container
+  %h1
+  = form_for @procedure, url: { controller: 'new_administrateur/procedures', action: :create }, multipart: true, html: { class: 'form' } do |f|
+    = render partial: 'informations', locals: { f: f }
+    .text-center
+      = f.button 'Valider', class: 'button primary send', id: 'save-procedure'
diff --git a/config/routes.rb b/config/routes.rb
index 16b257416..47bca15b9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -154,13 +154,20 @@ Rails.application.routes.draw do
     patch 'activate' => '/users/activate#create'
   end
 
+  # order matters: we don't want those routes to match /admin/procedures/:id
+  get 'admin/procedures/new' => 'new_administrateur/procedures#new', as: :new_admin_procedure
+  get 'admin/procedures/:id/edit' => 'new_administrateur/procedures#edit', as: :edit_admin_procedure
+  post 'admin/procedures' => 'new_administrateur/procedures#create'
+  get 'admin/procedures/:id/monavis' => 'new_administrateur/procedures#monavis', as: :admin_procedure_monavis
+  patch 'admin/procedures/:id/monavis' => 'new_administrateur/procedures#update_monavis', as: :update_monavis
+
   namespace :admin do
     get 'activate' => '/administrateurs/activate#new'
     patch 'activate' => '/administrateurs/activate#create'
     get 'procedures/archived' => 'procedures#archived'
     get 'procedures/draft' => 'procedures#draft'
 
-    resources :procedures do
+    resources :procedures, except: [:new, :edit, :update] do
       collection do
         get 'new_from_existing' => 'procedures#new_from_existing', as: :new_from_existing
       end
@@ -178,8 +185,6 @@ Rails.application.routes.draw do
       put 'publish' => 'procedures#publish', as: :publish
       post 'transfer' => 'procedures#transfer', as: :transfer
       put 'clone' => 'procedures#clone', as: :clone
-      get 'monavis' => 'procedures#monavis', as: :monavis
-      patch 'monavis' => 'procedures#update_monavis', as: :update_monavis
 
       resource :assigns, only: [:show, :update], path: 'instructeurs'
 
@@ -350,7 +355,7 @@ Rails.application.routes.draw do
   #
 
   scope module: 'new_administrateur' do
-    resources :procedures, only: [:update] do
+    resources :procedures, only: [:update, :new] do
       member do
         get 'apercu'
         get 'champs'
diff --git a/spec/controllers/admin/procedures_controller_spec.rb b/spec/controllers/admin/procedures_controller_spec.rb
index b5c5fc87c..749cb9684 100644
--- a/spec/controllers/admin/procedures_controller_spec.rb
+++ b/spec/controllers/admin/procedures_controller_spec.rb
@@ -146,192 +146,6 @@ describe Admin::ProceduresController, type: :controller do
     end
   end
 
-  describe 'GET #edit' do
-    let(:published_at) { nil }
-    let(:procedure) { create(:procedure, administrateur: admin, published_at: published_at) }
-    let(:procedure_id) { procedure.id }
-
-    subject { get :edit, params: { id: procedure_id } }
-
-    context 'when user is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when user is connected' do
-      context 'when procedure exist' do
-        let(:procedure_id) { procedure.id }
-        it { is_expected.to have_http_status(:success) }
-      end
-
-      context 'when procedure is published' do
-        let(:published_at) { Time.zone.now }
-        it { is_expected.to have_http_status(:success) }
-      end
-
-      context "when procedure doesn't exist" do
-        let(:procedure_id) { bad_procedure_id }
-
-        it { is_expected.to have_http_status(404) }
-      end
-    end
-  end
-
-  describe 'POST #create' do
-    context 'when all attributs are filled' do
-      describe 'new procedure in database' do
-        subject { post :create, params: { procedure: procedure_params } }
-
-        it { expect { subject }.to change { Procedure.count }.by(1) }
-      end
-
-      context 'when procedure is correctly save' do
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        describe 'procedure attributs in database' do
-          subject { Procedure.last }
-
-          it { expect(subject.libelle).to eq(libelle) }
-          it { expect(subject.description).to eq(description) }
-          it { expect(subject.organisation).to eq(organisation) }
-          it { expect(subject.direction).to eq(direction) }
-          it { expect(subject.administrateurs).to eq([admin]) }
-          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
-          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
-        end
-
-        it { is_expected.to redirect_to(champs_procedure_path(Procedure.last)) }
-        it { expect(flash[:notice]).to be_present }
-      end
-
-      context 'when procedure is correctly saved' do
-        let(:instructeur) { admin.instructeur }
-
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        describe "admin can also instruct the procedure as a instructeur" do
-          subject { Procedure.last }
-          it { expect(subject.defaut_groupe_instructeur.instructeurs).to include(instructeur) }
-        end
-      end
-    end
-
-    context 'when many attributs are not valid' do
-      let(:libelle) { '' }
-      let(:description) { '' }
-
-      describe 'no new procedure in database' do
-        subject { post :create, params: { procedure: procedure_params } }
-
-        it { expect { subject }.to change { Procedure.count }.by(0) }
-
-        describe 'no new module api carto in database' do
-          it { expect { subject }.to change { ModuleAPICarto.count }.by(0) }
-        end
-      end
-
-      describe 'flash message is present' do
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        it { expect(flash[:alert]).to be_present }
-      end
-    end
-  end
-
-  describe 'PUT #update' do
-    let!(:procedure) { create(:procedure, :with_type_de_champ, administrateur: admin) }
-
-    context 'when administrateur is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      subject { put :update, params: { id: procedure.id } }
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when administrateur is connected' do
-      def update_procedure
-        put :update, params: { id: procedure.id, procedure: procedure_params }
-        procedure.reload
-      end
-
-      context 'when all attributs are present' do
-        let(:libelle) { 'Blable' }
-        let(:description) { 'blabla' }
-        let(:organisation) { 'plop' }
-        let(:direction) { 'plap' }
-        let(:duree_conservation_dossiers_dans_ds) { 7 }
-        let(:duree_conservation_dossiers_hors_ds) { 5 }
-
-        before { update_procedure }
-
-        describe 'procedure attributs in database' do
-          subject { procedure }
-
-          it { expect(subject.libelle).to eq(libelle) }
-          it { expect(subject.description).to eq(description) }
-          it { expect(subject.organisation).to eq(organisation) }
-          it { expect(subject.direction).to eq(direction) }
-          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
-          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
-        end
-
-        it { is_expected.to redirect_to(edit_admin_procedure_path id: procedure.id) }
-        it { expect(flash[:notice]).to be_present }
-      end
-
-      context 'when many attributs are not valid' do
-        before { update_procedure }
-        let(:libelle) { '' }
-        let(:description) { '' }
-
-        describe 'flash message is present' do
-          it { expect(flash[:alert]).to be_present }
-        end
-      end
-
-      context 'when procedure is brouillon' do
-        let(:procedure) { create(:procedure_with_dossiers, :with_path, :with_type_de_champ, administrateur: admin) }
-        let!(:dossiers_count) { procedure.dossiers.count }
-
-        describe 'dossiers are dropped' do
-          subject { update_procedure }
-
-          it {
-            expect(dossiers_count).to eq(1)
-            expect(subject.dossiers.count).to eq(0)
-          }
-        end
-      end
-
-      context 'when procedure is published' do
-        let(:procedure) { create(:procedure, :with_type_de_champ, :published, administrateur: admin) }
-
-        subject { update_procedure }
-
-        describe 'only some properties can be updated' do
-          it { expect(subject.libelle).to eq procedure_params[:libelle] }
-          it { expect(subject.description).to eq procedure_params[:description] }
-          it { expect(subject.organisation).to eq procedure_params[:organisation] }
-          it { expect(subject.direction).to eq procedure_params[:direction] }
-
-          it { expect(subject.for_individual).not_to eq procedure_params[:for_individual] }
-        end
-      end
-    end
-  end
-
   describe 'PUT #publish' do
     let(:procedure) { create(:procedure, administrateur: admin, lien_site_web: lien_site_web) }
     let(:procedure2) { create(:procedure, :published, administrateur: admin, lien_site_web: lien_site_web) }
@@ -663,96 +477,4 @@ describe Admin::ProceduresController, type: :controller do
       it { expect(response.status).to eq(404) }
     end
   end
-
-  describe 'PATCH #monavis' do
-    let!(:procedure) { create(:procedure, administrateur: admin) }
-    let(:procedure_params) {
-      {
-        monavis_embed: monavis_embed
-      }
-    }
-
-    context 'when administrateur is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      subject { patch :update_monavis, params: { procedure_id: procedure.id } }
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when administrateur is connected' do
-      def update_monavis
-        patch :update_monavis, params: { procedure_id: procedure.id, procedure: procedure_params }
-        procedure.reload
-      end
-
-      let(:monavis_embed) {
-        <<-MSG
-        <a href="https://voxusagers.numerique.gouv.fr/Demarches/2136?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=e93e77cfd9bf7cce9d10f7a10be55730">
-          <img src="https://voxusagers.numerique.gouv.fr/static/bouton-bleu.svg" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
-        </a>
-        MSG
-      }
-
-      context 'when all attributes are present' do
-        render_views
-
-        before { update_monavis }
-
-        context 'when the embed code is valid' do
-          describe 'the monavis field is updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(monavis_embed) }
-          end
-
-          it { expect(flash[:notice]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-
-        context 'when the embed code is valid with the original format' do
-          let(:monavis_embed) {
-            <<-MSG
-            <a href="https://monavis.numerique.gouv.fr/Demarches/123?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d475e4045666057f">
-              <img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-blanc.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
-            </a>
-            MSG
-          }
-          describe 'the monavis field is updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(monavis_embed) }
-          end
-
-          it { expect(flash[:notice]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-
-        context 'when the embed code is not valid' do
-          let(:monavis_embed) { 'invalid embed code' }
-
-          describe 'the monavis field is not updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(nil) }
-          end
-
-          it { expect(flash[:alert]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-      end
-
-      context 'when procedure is published' do
-        let(:procedure) { create(:procedure, :published, administrateur: admin) }
-
-        subject { update_monavis }
-
-        describe 'the monavis field is not updated' do
-          it { expect(subject.monavis_embed).to eq monavis_embed }
-        end
-      end
-    end
-  end
 end
diff --git a/spec/controllers/new_administrateur/procedures_controller_spec.rb b/spec/controllers/new_administrateur/procedures_controller_spec.rb
index 1dc6753bb..2220e34f3 100644
--- a/spec/controllers/new_administrateur/procedures_controller_spec.rb
+++ b/spec/controllers/new_administrateur/procedures_controller_spec.rb
@@ -1,5 +1,17 @@
 describe NewAdministrateur::ProceduresController, type: :controller do
   let(:admin) { create(:administrateur) }
+  let(:bad_procedure_id) { 100000 }
+
+  let(:path) { 'ma-jolie-demarche' }
+  let(:libelle) { 'Démarche de test' }
+  let(:description) { 'Description de test' }
+  let(:organisation) { 'Organisation de test' }
+  let(:direction) { 'Direction de test' }
+  let(:cadre_juridique) { 'cadre juridique' }
+  let(:duree_conservation_dossiers_dans_ds) { 3 }
+  let(:duree_conservation_dossiers_hors_ds) { 6 }
+  let(:monavis_embed) { nil }
+  let(:lien_site_web) { 'http://mon-site.gouv.fr' }
 
   describe '#apercu' do
     let(:procedure) { create(:procedure) }
@@ -11,4 +23,282 @@ describe NewAdministrateur::ProceduresController, type: :controller do
 
     it { expect(response).to have_http_status(:ok) }
   end
+
+  let(:procedure_params) {
+    {
+      path: path,
+      libelle: libelle,
+      description: description,
+      organisation: organisation,
+      direction: direction,
+      cadre_juridique: cadre_juridique,
+      duree_conservation_dossiers_dans_ds: duree_conservation_dossiers_dans_ds,
+      duree_conservation_dossiers_hors_ds: duree_conservation_dossiers_hors_ds,
+      monavis_embed: monavis_embed,
+      lien_site_web: lien_site_web
+    }
+  }
+
+  before do
+    sign_in(admin.user)
+  end
+
+  describe 'GET #edit' do
+    let(:published_at) { nil }
+    let(:procedure) { create(:procedure, administrateur: admin, published_at: published_at) }
+    let(:procedure_id) { procedure.id }
+
+    subject { get :edit, params: { id: procedure_id } }
+
+    context 'when user is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when user is connected' do
+      context 'when procedure exist' do
+        let(:procedure_id) { procedure.id }
+        it { is_expected.to have_http_status(:success) }
+      end
+
+      context 'when procedure is published' do
+        let(:published_at) { Time.zone.now }
+        it { is_expected.to have_http_status(:success) }
+      end
+
+      context 'when procedure doesn’t exist' do
+        let(:procedure_id) { bad_procedure_id }
+
+        it { is_expected.to have_http_status(404) }
+      end
+    end
+  end
+
+  describe 'POST #create' do
+    context 'when all attributs are filled' do
+      describe 'new procedure in database' do
+        subject { post :create, params: { procedure: procedure_params } }
+
+        it { expect { subject }.to change { Procedure.count }.by(1) }
+      end
+
+      context 'when procedure is correctly save' do
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        describe 'procedure attributs in database' do
+          subject { Procedure.last }
+
+          it { expect(subject.libelle).to eq(libelle) }
+          it { expect(subject.description).to eq(description) }
+          it { expect(subject.organisation).to eq(organisation) }
+          it { expect(subject.direction).to eq(direction) }
+          it { expect(subject.administrateurs).to eq([admin]) }
+          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
+          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
+        end
+
+        it { is_expected.to redirect_to(champs_procedure_path(Procedure.last)) }
+        it { expect(flash[:notice]).to be_present }
+      end
+
+      context 'when procedure is correctly saved' do
+        let(:instructeur) { admin.instructeur }
+
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        describe "admin can also instruct the procedure as a instructeur" do
+          subject { Procedure.last }
+          it { expect(subject.defaut_groupe_instructeur.instructeurs).to include(instructeur) }
+        end
+      end
+    end
+
+    context 'when many attributs are not valid' do
+      let(:libelle) { '' }
+      let(:description) { '' }
+
+      describe 'no new procedure in database' do
+        subject { post :create, params: { procedure: procedure_params } }
+
+        it { expect { subject }.to change { Procedure.count }.by(0) }
+
+        describe 'no new module api carto in database' do
+          it { expect { subject }.to change { ModuleAPICarto.count }.by(0) }
+        end
+      end
+
+      describe 'flash message is present' do
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        it { expect(flash[:alert]).to be_present }
+      end
+    end
+  end
+
+  describe 'PUT #update' do
+    let!(:procedure) { create(:procedure, :with_type_de_champ, administrateur: admin) }
+
+    context 'when administrateur is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      subject { put :update, params: { id: procedure.id } }
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when administrateur is connected' do
+      def update_procedure
+        put :update, params: { id: procedure.id, procedure: procedure_params }
+        procedure.reload
+      end
+
+      context 'when all attributs are present' do
+        let(:libelle) { 'Blable' }
+        let(:description) { 'blabla' }
+        let(:organisation) { 'plop' }
+        let(:direction) { 'plap' }
+        let(:duree_conservation_dossiers_dans_ds) { 7 }
+        let(:duree_conservation_dossiers_hors_ds) { 5 }
+
+        before { update_procedure }
+
+        describe 'procedure attributs in database' do
+          subject { procedure }
+
+          it { expect(subject.libelle).to eq(libelle) }
+          it { expect(subject.description).to eq(description) }
+          it { expect(subject.organisation).to eq(organisation) }
+          it { expect(subject.direction).to eq(direction) }
+          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
+          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
+        end
+
+        it { is_expected.to redirect_to(edit_admin_procedure_path id: procedure.id) }
+        it { expect(flash[:notice]).to be_present }
+      end
+
+      context 'when many attributs are not valid' do
+        before { update_procedure }
+        let(:libelle) { '' }
+        let(:description) { '' }
+
+        describe 'flash message is present' do
+          it { expect(flash[:alert]).to be_present }
+        end
+      end
+
+      context 'when procedure is brouillon' do
+        let(:procedure) { create(:procedure_with_dossiers, :with_path, :with_type_de_champ, administrateur: admin) }
+        let!(:dossiers_count) { procedure.dossiers.count }
+
+        describe 'dossiers are dropped' do
+          subject { update_procedure }
+
+          it {
+            expect(dossiers_count).to eq(1)
+            expect(subject.dossiers.count).to eq(0)
+          }
+        end
+      end
+
+      context 'when procedure is published' do
+        let(:procedure) { create(:procedure, :with_type_de_champ, :published, administrateur: admin) }
+
+        subject { update_procedure }
+
+        describe 'only some properties can be updated' do
+          it { expect(subject.libelle).to eq procedure_params[:libelle] }
+          it { expect(subject.description).to eq procedure_params[:description] }
+          it { expect(subject.organisation).to eq procedure_params[:organisation] }
+          it { expect(subject.direction).to eq procedure_params[:direction] }
+
+          it { expect(subject.for_individual).not_to eq procedure_params[:for_individual] }
+        end
+      end
+    end
+  end
+
+  describe 'PATCH #monavis' do
+    let!(:procedure) { create(:procedure, administrateur: admin) }
+    let(:procedure_params) {
+      {
+        monavis_embed: monavis_embed
+      }
+    }
+
+    context 'when administrateur is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      subject { patch :update_monavis, params: { id: procedure.id } }
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when administrateur is connected' do
+      def update_monavis
+        patch :update_monavis, params: { id: procedure.id, procedure: procedure_params }
+        procedure.reload
+      end
+      let(:monavis_embed) {
+        <<-MSG
+        <a href="https://monavis.numerique.gouv.fr/Demarches/123?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d475e4045666057f">
+          <img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-blanc.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
+        </a>
+        MSG
+      }
+
+      context 'when all attributes are present' do
+        render_views
+
+        before { update_monavis }
+
+        context 'when the embed code is valid' do
+          describe 'the monavis field is updated' do
+            subject { procedure }
+
+            it { expect(subject.monavis_embed).to eq(monavis_embed) }
+          end
+
+          it { expect(flash[:notice]).to be_present }
+          it { expect(response.body).to include "MonAvis" }
+        end
+
+        context 'when the embed code is not valid' do
+          let(:monavis_embed) { 'invalid embed code' }
+
+          describe 'the monavis field is not updated' do
+            subject { procedure }
+
+            it { expect(subject.monavis_embed).to eq(nil) }
+          end
+
+          it { expect(flash[:alert]).to be_present }
+          it { expect(response.body).to include "MonAvis" }
+        end
+      end
+
+      context 'when procedure is published' do
+        let(:procedure) { create(:procedure, :published, administrateur: admin) }
+
+        subject { update_monavis }
+
+        describe 'the monavis field is not updated' do
+          it { expect(subject.monavis_embed).to eq monavis_embed }
+        end
+      end
+    end
+  end
 end
diff --git a/spec/views/admin/procedures/edit.html.haml_spec.rb b/spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
similarity index 68%
rename from spec/views/admin/procedures/edit.html.haml_spec.rb
rename to spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
index cb09b0ba3..89ed5339b 100644
--- a/spec/views/admin/procedures/edit.html.haml_spec.rb
+++ b/spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe 'admin/procedures/edit.html.haml', type: :view, vcr: { cassette_name: 'admin_procedure_edit' } do
+describe 'new_administrateur/procedures/edit.html.haml' do
   let(:logo) { Rack::Test::UploadedFile.new("./spec/fixtures/files/logo_test_procedure.png", 'image/png') }
   let(:procedure) { create(:procedure, logo: logo, lien_site_web: 'http://some.website') }
 
@@ -11,7 +11,7 @@ describe 'admin/procedures/edit.html.haml', type: :view, vcr: { cassette_name: '
 
   context 'when procedure logo is present' do
     it 'display on the page' do
-      expect(rendered).to have_selector('#preview_procedure_logo')
+      expect(rendered).to have_selector('.procedure-logos')
     end
   end
 end