templates/services/bill_payment/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Payer ma facture {{ website_name }} {% endblock %}
  3. {% block stylesheets %}
  4.     <link rel="stylesheet" href="{{ asset('css/pages/services/payment.css') }}" />
  5. {% endblock %}
  6. {% block body %}
  7.     <div class="slider">
  8.         <div class="usefull-width item-slider">
  9.             <H1 class="item-header-h align">
  10.                 Payez votre <span class="color">facture en ligne</span>
  11.             </H1>
  12.             <div class="item-prev-text hidden-xs">
  13.                 Une facture à régler, un impayé ? Ce service vous permet de payer votre facture en ligne.
  14.             </div>
  15.         </div>
  16.     </div>
  17.     <div class="usefull-width">
  18.         <H2>
  19.             Comment régler ma facture en ligne ?
  20.         </H2>
  21.         <section class="item-bill">
  22.             <div class="item-desp-left">
  23.                 <H3 class="unl-margin">
  24.                     Avant de vous lancer !
  25.                 </H3>
  26.                 <div class="item-help-bill">
  27.                     Munissez vous de la référence de paiement et de votre numéro client  présent sur la facture.
  28.                     <br/><br/>
  29.                     Complétez ensuite les informations demandées dans le formulaire.
  30.                 </div>
  31.             </div>
  32.             <div class="item-form-retrieve-bill">
  33.                 {{ form_start(form) }}
  34.                     <div class="alert-danger erase displayError">
  35.                         Nous n'avons pas réussi à vous identifier, merci de vérifier l'exactitude de vos informations...
  36.                     </div>
  37.                     <div class="item-frspt FormPart1">
  38.                         <div>
  39.                             {{ form_row(form.id_bill) }}
  40.                         </div>
  41.                         <div>
  42.                             {{ form_row(form.order_number) }}
  43.                         </div>
  44.                     </div>
  45.                     <div class="button_theme centerBtn nextStepFm FormPart1">
  46.                         Régler ma facture
  47.                     </div>
  48.                     <div class="FormPart2 erase">
  49.                         <div class="align with-bold questFm1">
  50.                             Souhaitez vous faire un règlement partiel ?
  51.                         </div>
  52.                         <div class="align with-bold questFm2 erase">
  53.                             Saisissez le montant souhaité...
  54.                         </div>
  55.                         <div class="chooseAmount  with-margin-top-20 erase">
  56.                             {{ form_row(form.amount) }}
  57.                         </div>
  58.                         <div class="item-frspt with-margin-top-40">
  59.                             <div class="item-gradient-anx showAmount">
  60.                                 Choisir le montant
  61.                             </div>
  62.                             <button id="regler" class="button_theme">
  63.                                 Régler ma facture
  64.                             </button>
  65.                         </div>
  66.                     </div>
  67.                 {{ form_end(form) }}
  68.             </div>
  69.         </section>
  70.         <div class="usefull-width unl-padding">
  71.             <section class="row-fluid">
  72.                 <div class="width-max with-margin-top-180 marginT-mob-60" style="padding:0 7.5px;">
  73.                     <H2>
  74.                         5 Raisons de choisir Sport adhesion
  75.                     </H2>
  76.                     <div class="carroussel with-margin-top-30">
  77.                         <div class="item-crsl">
  78.                             {% if deals is not empty %}
  79.                                 {% for deal in deals %}
  80.                                     <div class="crlCntH">
  81.                                         <div class="crlBoxHome blueBoxW">
  82.                                             <div class="picBoxCrl" style="background-image:url('{{ asset('images/pages/home/' ~ deal.getImage) }}');"></div>
  83.                                             <div class="width-max">
  84.                                                 {{ deal.getTitleFr }}
  85.                                             </div>
  86.                                         </div>
  87.                                     </div>
  88.                                 {% endfor %}
  89.                             {% endif %}
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.             </section>
  94.         </div>
  95.         <section>
  96.             <div class="row-fluid with-margin-bottom-100">
  97.                 <div class="item-try-it unl-margin" style="font-weight:initial;">
  98.                     Envie d'en savoir plus sur nos services ?
  99.                     <br/>
  100.                     <br/>
  101.                     <a href="{{ path('home') }}" class="button_theme btnlg with-auto-margin with-margin-top-20">
  102.                         Découvrez Sport adhesion
  103.                     </a>
  104.                 </div>
  105.             </div>
  106.         </section>
  107.     </div>
  108. {% endblock %}
  109. {% block javascriptFooter %}
  110. <script>
  111.     $(document).ready(function(){
  112.         // Calc minimum amount
  113.         //
  114.         $(document).on('input', '#bill_amount', function() {
  115.             var value = $(this).val();
  116.             if(parseFloat(value) < 10){
  117.                 $('.displayError').html("Le montant ne peut être inférieur à 10 € !");
  118.                 $('.displayError').show();
  119.                 $('#regler').hide();
  120.             }else{
  121.                 $('.displayError').hide();
  122.                 $('#regler').show();
  123.             }
  124.         });
  125.         // Show form part
  126.         //
  127.         $(document).on('click', '.nextStepFm', function() {
  128.             var idBill = $('#bill_id_bill').val();
  129.             var orderNumber = $('#bill_order_number').val();
  130.             $('.FormPart1').hide();
  131.             if((typeof idBill !== "undefined" && idBill != '') && (typeof orderNumber !== "undefined" && orderNumber != '')){
  132.                 maxR++;
  133.                 $('.displayError').hide();
  134.                 $.ajax({
  135.                     url: '/send/paybill',
  136.                     type: "POST",
  137.                     data: {
  138.                         'id_bill' : idBill,
  139.                         'order_number' : orderNumber,
  140.                     },
  141.                     success: function(data, textStatus, jqXHR) {
  142.                         if(data.statut == 1){
  143.                             $('.displayError').hide();
  144.                             $('.FormPart2').show();
  145.                             $('#bill_amount').val(data.amount);
  146.                         }else{
  147.                             $('.displayError').html("Nous n'avons pas réussi à vous identifier, merci de vérifier l'exactitude de vos informations...");
  148.                             $('.displayError').show();
  149.                             $('.FormPart1').show();
  150.                             $('.FormPart2').hide();
  151.                             if(maxR == 3){
  152.                                 $('.displayError').html('Trop de tentative, veuillez rééssayer ultérieurement !');
  153.                                 $('.displayError').show();
  154.                                 $('.nextStepFm').remove();
  155.                             }
  156.                         }
  157.                     },
  158.                     complete: function() {
  159.                     },
  160.                     error: function(jqXHR, textStatus, errorThrown) {
  161.                     }
  162.                 });
  163.             }else{
  164.                 $('.displayError').html('Les champs ne peuvent être vide...');
  165.                 $('.displayError').show();
  166.                 $('.FormPart1').show();
  167.                 $('.FormPart2').hide();
  168.             }
  169.             
  170.         });
  171.         maxR = 0;
  172.         // change amount
  173.         //
  174.         $(document).on('click', '.showAmount', function() {
  175.             $('.showAmount, .questFm1').hide();
  176.             $('.chooseAmount, .questFm2').show();
  177.         });
  178.         if(width >= 1024){
  179.             var crsl = (parseFloat($('.item-crsl').parent().width()) / 4);
  180.             $('.crlCntH').css({'width':crsl,'max-width':crsl});
  181.         }
  182.         initCarroussel(width, '.item-crsl', 'crlCntH');
  183.         $(window).on('resize',function() {
  184.             width = $(window).width();
  185.             if(width >= 1024){
  186.                 $('.item-crsl').cycle('destroy');
  187.                 var crsl = (parseFloat($('.item-crsl').parent().width()) / 4);
  188.                 $('.crlCntH').css({'width':crsl,'max-width':crsl});
  189.             }
  190.             initCarroussel(width, '.item-crsl', 'crlCntH');
  191.         });
  192.     });
  193. </script>
  194. {% endblock %}