Dépôt de besoin : réduire le taux d'abandon à la dernière étape (aper…

…çu) (#907) * Tender form: duplicate submit button. Add help text. Keep columns * Change tender detail card header color * Change subheader wording
gip-inclusion · Sep 18, 2023 · acf5f9d · acf5f9d
1 parent ca832f3
commit acf5f9d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/lemarche/templates/tenders/_detail_card.html b/lemarche/templates/tenders/_detail_card.html
@@ -1,11 +1,11 @@
 {% load bootstrap4 static array_choices_display humanize %}
 <div class="card c-card c-card--marche siae-card rounded-lg shadow-lg">
-    <p class="text-right text-white bg-tertiary fs-sm rounded-top rounded-lg p-3 mb-0">
+    <div class="card-header text-right bg-marche text-white fs-sm rounded-top rounded-lg p-3 mb-0">
         Date limite de réponse : {{ tender.deadline_date|default:"" }}
         {% if not source_form and tender.deadline_date_outdated %}
             <span class="badge badge-xs badge-base badge-pill badge-pilotage">Clôturé</span>
         {% endif %}
-    </p>
+    </div>
     <div class="card-body pb-5 px-5">
         <div class="row py-4">
             <div class="col-md-12">

diff --git a/lemarche/templates/tenders/create_base.html b/lemarche/templates/tenders/create_base.html
@@ -90,12 +90,12 @@ <h1 class="s-title-01__title h1 mb-0">
                                 {% block action_form %}
                                     {% block recap_section %}{% endblock %}
                                     <div class="row">
-                                        <div class="col-12 {% if wizard.steps.current != wizard.steps.last %}col-lg-7{% endif %}">
+                                        <div class="col-12 col-lg-7">
                                             <hr />
                                         </div>
                                     </div>
                                     <div class="row">
-                                        <div class="col-12 {% if wizard.steps.current != wizard.steps.last %}col-lg-7{% endif %}">
+                                        <div class="col-12 col-lg-7">
                                             <div class="form-row align-items-center {% if wizard.steps.prev %}justify-content-between{% else %}justify-content-end{% endif %}">
                                                 {% if wizard.steps.prev %}
                                                     <div class="form-group col-12 col-lg order-3 order-lg-1">

diff --git a/lemarche/templates/tenders/create_step_confirmation.html b/lemarche/templates/tenders/create_step_confirmation.html
@@ -1,17 +1,31 @@
 {% extends "tenders/create_base.html" %}
 {% load static bootstrap4 %}
+
 {% block step_title %}Aperçu du besoin{% endblock %}
 {% block step_title_again %}Aperçu du besoin{% endblock %}
-{% block step_subtitle %}C'est tout bon ! Vérifiez quand même que toutes les informations soient exactes.{% endblock %}
+{% block step_subtitle %}Vous y êtes presque ! Vérifiez quand même que toutes les informations soient exactes avant de publier.{% endblock %}
+{% block content_form %}
+    {% csrf_token %}
+{% endblock %}
 {% block recap_section %}
-    <div class="s-section__row row">
-        <div class="s-section__col col-12">
-            {% include "tenders/_detail_card.html" with tender=tender source_form="true" %}
+<div class="row">
+    <div class="col-12 col-lg-7 order-2 order-lg-1">
+        {% include "tenders/_detail_card.html" with tender=tender source_form="true" %}
+    </div>
+    <div class="col-12 col-lg-5 order-1 order-lg-2">
+        <button type="submit" id="tender-create-form-submit-above-btn" class="btn btn-primary btn-ico">
+            <i class="ri-mail-send-line ri-lg"></i>
+            <span>Publier ce besoin</span>
+        </button>
+        <div class="c-form-conseil">
+            <div>
+                <p>
+                    Dès que votre besoin sera publié et diffusé, vous aurez accès à un tableau de bord pour suivre les prestataires ciblés et intéressés.
+                </p>
+            </div>
         </div>
     </div>
-{% endblock %}
-{% block content_form %}
-    {% csrf_token %}
+</div>
 {% endblock %}
 {% block submit_btn %}
     <div class="form-group col-6 col-lg-auto order-1 order-lg-2">
@@ -34,25 +48,32 @@
     </div>
 {% endblock submit_btn %}
 {% block extra_js %}
-    <script>
+<script>
 document.addEventListener('DOMContentLoaded', function () {
     let formPreviousButton = document.getElementById('tender-create-form-previous-step-btn');
+    let formDraftButton = document.getElementById('tender-create-draft-form-btn');
     let formSubmitButton = document.getElementById('tender-create-form-submit-btn');
+    let formSubmitAboveButton = document.getElementById('tender-create-form-submit-above-btn');
 
     function submitForm() {
         $(formPreviousButton).prop('disabled', true);
+        $(formDraftButton).prop('disabled', true);
         $(formSubmitButton).prop('disabled', true);
+        $(formSubmitAboveButton).prop('disabled', true);
         const body = document.querySelector('body');
         let loader = '<div class="loader-in-all-page"><div class="loader-inner"></div></div>'
         body.innerHTML += loader;
         setTimeout(function() {
             $('form').submit();
         }, 1000);
-    }
+    };
 
     formSubmitButton.addEventListener('click', function(e) {
         submitForm();
     });
+    formSubmitAboveButton.addEventListener('click', function(e) {
+        submitForm();
+    });
 });
-    </script>
+</script>
 {% endblock %}