on cashing screen, display remaining balance in popup in case of insufficient founds

assets/css/app.css

@@ -295,6 +295,13 @@ form[name="formEncaissement"] label {
  * END Success check animation.
  */
 
+#display-balance-text-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
 #login-password-container {
     position: relative;
 }

assets/js/app.js

@@ -492,7 +492,8 @@ $(function() {
     $("#formEncaissement_payment_code").val('');
 
     // Set payment summary on validation page
-    $(".payment-recap").text(`${$("#formEncaissement_adherent option:selected").text()}, montant : ${$("#formEncaissement_montant").val()}`);
+    let recap = `${$("#formEncaissement_adherent option:selected").text()}, montant : ${$("#formEncaissement_montant").val()} ${KOH_MLC_NAME_SMALL}`;
+    $(".payment-recap").text(recap);
   }
 
   /**
@@ -577,7 +578,7 @@ $(function() {
   /**
    * Display loader after validating Encaissement form
    */
-  $("form[name='formEncaissement']").on("submit", (event) => {
+  $("form[name='formEncaissement']").on("submit", () => {
     // non strict equality check
     if (formEncaissementValidation == true) {
       $("#formEncaissement_save").parent().append('<span class="spinner-border" role="status" aria-hidden="true"></span>');
@@ -585,6 +586,10 @@ $(function() {
     }
   })
 
+  $("#display-balance-button-no").on("click", () => {
+    $("#display-balance-text-container").hide();
+  })
+
   // $('.js-datepicker').datepicker({
   //     closeText: 'Fermer',
   //     prevText: '&#x3c;Préc',

public/build/entrypoints.json

@@ -3,10 +3,10 @@
     "app": {
       "js": [
         "/build/runtime.6ad5c9da.js",
-        "/build/app.94b71822.js"
+        "/build/app.a926d504.js"
       ],
       "css": [
-        "/build/app.c40ef51c.css"
+        "/build/app.6350a995.css"
       ]
     },
     "admin": {

public/build/manifest.json

 {
-  "build/app.css": "/build/app.c40ef51c.css",
-  "build/app.js": "/build/app.94b71822.js",
+  "build/app.css": "/build/app.6350a995.css",
+  "build/app.js": "/build/app.a926d504.js",
   "build/admin.css": "/build/admin.4de55830.css",
   "build/admin.js": "/build/admin.86a2d986.js",
   "build/runtime.js": "/build/runtime.6ad5c9da.js",

src/Controller/UserController.php

@@ -251,6 +251,7 @@ class UserController extends AbstractController
         $form = $this->createForm(EncaissementFormType::class, null, []);
         $form->handleRequest($request);
         $validation = false;
+        $insufficientBalance = null;  // if not null, will indicate for the template an insufficient founds situation 
 
         if ($form->isSubmitted()) {
             $data = $form->getData();
@@ -324,6 +325,8 @@ class UserController extends AbstractController
                         $this->translator->trans('Solde de l\'habitant·e insuffisant')
                     );
 
+                    $insufficientBalance = $balance;
+
                     goto end;
                 }
                 
@@ -358,7 +361,8 @@ class UserController extends AbstractController
         end:
         return $this->render('@kohinos/tav/encaissement_page.html.twig', [
             'form' => $form->createView(),
-            'validation' => $validation
+            'validation' => $validation,
+            'insufficientBalance' => $insufficientBalance
         ]);
     }
 

templates/themes/kohinos/block/modal.html.twig

@@ -22,7 +22,7 @@
       <div class="modal-body">
         {{ modal_content }}
       </div>
-      {% if btn_primary is not empty and btn_secondary is not empty %}
+      {% if btn_primary is not empty or btn_secondary is not empty %}
         <div class="modal-footer">
           {% if btn_primary is not empty %}
             <button type="button" class="btn btn-primary">{{ btn_primary }}</button>

templates/themes/kohinos/tav/encaissement_page.html.twig

@@ -26,7 +26,26 @@
 		<h2 class='text-center w-100 mt-4 mb-4 payment-recap'></h2>
 		<div id="payment-validation-subheader">{{ "Veuillez entrer votre code de validation"|trans }}</div>
 	{% endif %}
-	<br/>
+
+	{# SHOW BALANCE MODALE#}
+	{% if insufficientBalance is not null %}
+		{% set modal_id = 'showbalancemodal' %}
+		{% set modal_title = 'Mon solde'|trans %}
+		{% set modal_content %}
+			<div>
+				{{ "Solde restant :"|trans }} {{ insufficientBalance }} {{ KOH_MLC_NAME_SMALL|default('') }}
+			</div>
+		{% endset %}
+		{% include '@kohinos/block/modal.html.twig' with {'btn_primary' : null, 'btn_secondary' : 'Ok'} %}
+		<div id="display-balance-text-container">
+			<div>
+				Votre solde est insuffisant, voulez-vous consulter votre solde ? 
+			</div>
+			<a class='btn btn-primary' data-toggle="modal" data-target="#{{ modal_id }}" title='{{ 'Mon solde'|trans }}' href="#">{{ 'Oui'|trans }}</a>
+			<a class='btn btn-primary' id="display-balance-button-no" href="#">{{ 'Non'|trans }}</a>
+		</div>
+		<br/>
+	{% endif %}
 
     <div class='text-center mb-5'>
 		{{ form_start(form, {'attr': {'autocomplete': 'off'}}) }}
@@ -65,6 +84,7 @@
 </div>
 <script type="text/javascript">
 	var formEncaissementValidation = '{{ validation }}';
+	var KOH_MLC_NAME_SMALL = "{{ KOH_MLC_NAME_SMALL|default('') }}";
 </script>
 {% endblock %}