templates/front/service/step4/recapitulatif.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} Récapitulatif de devis : {{ service.title }} | {{ parent() }} {% endblock %}
  5. {% block body %}
  6. <section class="grey-blue-bg small-padding">
  7.     <div class="container">
  8.         <div class="row">
  9.             <div class="col-md-8">
  10.                 {{ include('base-default/message-flash-devis.html.twig') }}
  11.                 <div class="list-single-main-container pl-0">
  12.                     <div class="title-devis">
  13.                         <span>Devis immédiat pour {{ service.title }}</span>
  14.                     </div>
  15.                     <div class="etape-demande-devis fl-wrap mb-4">
  16.                         <div class="flex-center-wrap">
  17.                             <a href="{{ url('app_client_service', {'slug': service.slug}) }}"><span>1</span> Type de trajet</a>
  18.                             <a href="{{ url('app_client_service_route_description', {'slug': service.slug}) }}"><span>2</span> Description trajet</a>
  19.                             <a href="{{ url('app_client_service_login_info', {'slug': service.slug}) }}"><span>3</span> Vos informations</a>
  20.                             <a href="#" class="active"><span>4</span> Récapitulatif/Validation</a>
  21.                         </div> 
  22.                         <div class="box-widget-list text-left mt-3">
  23.                             <div class="d-flex align-items-center">
  24.                                 <img src="{{ asset('front/images/bot-recap.png') }}" class="img-recap-devis" alt="" />
  25.                                 <p class="p-recap-devis">Nous allons faire un récapitulatif ensemble.</p>
  26.                             </div>
  27.                         </div>
  29.                         <div class="box-widget-list text-left mt-1">
  30.                             <p>Vous avez besoin <span class="text-theme-bleu-marine fw-bold text-uppercase">{{ service.title }}</span> pour <span class="text-theme-bleu-marine fw-bold">{{ devis.numberOfPeople }}</span> personne(s) au départ de <span class="text-theme-bleu-marine fw-bold">{{ devis.departureAddress }}</span>{% if devis.typeOfTrip == 'Séjours' %}, le <span class="text-theme-bleu-marine fw-bold">{{ devis.departureDate|date('d/m/Y') }}</span>{% endif %} à <span class="text-theme-bleu-marine fw-bold">{{ devis.departureTime|date('H\\hi') }}</span> en destination de <span class="text-theme-bleu-marine fw-bold">{{ devis.arrivalAddress }}</span>. </p>
  31.                             {% if devis.distance and devis.distancePerTrip %}
  32.                                 <p>Vous allez parcourir une distance approximative de <span class="text-theme-bleu-marine fw-bold">{{ devis.distance }} ({{ devis.distancePerTrip }} par trajet)</span>.</p>
  33.                             {% else %}
  34.                                 <p>Vous allez parcourir une distance approximative de <span class="text-theme-bleu-marine fw-bold">{{ devis.distance }}</span>.</p>
  35.                             {% endif %}
  36.                             {% if devis.needVehicleOnSite == 'Non' %}
  37.                                 <p>Sur place, vous n'aurez pas besoin du véhicule.</p>
  38.                             {% elseif devis.needVehicleOnSite == 'Oui' %}
  39.                                 {% if devis.typeOfTrip == 'Séjours' %}
  40.                                     <p class="pb-0">Voici le détail des destinations pendant votre séjour :</p>
  41.                                 {% elseif devis.typeOfTrip == 'Aller-Retour' %}
  42.                                     <p class="pb-0">Voici le détail des destinations pendant votre trajet :</p>
  43.                                 {% endif %}
  44.                                 {% for vehicleDetail in devis.vehicleDetails %}
  45.                                     {% if devis.typeOfTrip == 'Séjours' %}
  46.                                         <p {% if vehicleDetail.infos %}class="pb-0"{% else %}{% if loop.last %}{% else %}class="pb-0"{% endif %}{% endif %}><i class="fas fa-circle font-size-04 vertical-align-middle"></i> Le <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.day|date('d/m/Y') }}</span>, départ de <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.departureAddress }}</span> à destination de <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.destinationAddress }}</span>. Départ à <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.departureTime|date('H\\hi') }}</span> et retour à <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.returnTime|date('H\\hi') }}</span>. </p>
  47.                                         {% if vehicleDetail.infos %}
  48.                                             <p {% if loop.last %}{% else %}class="pb-0"{% endif %}>Informations supplémentaires : <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.infos }}</span></p>
  49.                                         {% endif %}
  50.                                     {% elseif devis.typeOfTrip == 'Aller-Retour' %}
  51.                                         <p {% if vehicleDetail.infos %}class="pb-0"{% else %}{% if loop.last %}{% else %}class="pb-0"{% endif %}{% endif %}><i class="fas fa-circle font-size-04 vertical-align-middle"></i> Trajet Aller-Retour : départ de <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.departureAddress }}</span> à destination de <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.destinationAddress }}</span>. Départ à <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.departureTime|date('H\\hi') }}</span> et retour à <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.returnTime|date('H\\hi') }}</span>. </p>
  52.                                         {% if vehicleDetail.infos %}
  53.                                             <p {% if loop.last %}{% else %}class="pb-0"{% endif %}>Informations supplémentaires : <span class="text-theme-bleu-marine fw-bold">{{ vehicleDetail.infos }}</span></p>
  54.                                         {% endif %} 
  55.                                     {% endif %}
  56.                                 {% endfor %}
  57.                             {% endif %}
  58.                             {% if devis.addPdfDocument == 'Oui' %}
  59.                                 <p class="pb-0">Vous souhaitez envoyer le(s) document(s) suivant(s) au transporteur :</p>
  60.                                 {% for attachment in devis.attachments %}
  61.                                     <p {% if loop.last %}{% else %}class="pb-0"{% endif %}><i class="fas fa-circle font-size-04 vertical-align-middle"></i> <span class="xt-theme-bleu-marine fw-bold text-italic">{{ attachment.originalName }}</span></p>
  62.                                 {% endfor %}
  63.                             {% endif %}
  64.                             {% if devis.typeOfTrip == 'Aller-Retour' or devis.typeOfTrip == 'Séjours' %}
  65.                                 <p>Votre retour s'effectuera {% if devis.typeOfTrip == 'Séjours' %}le <span class="text-theme-bleu-marine fw-bold">{{ devis.returnDate|date('d/m/Y') }}</span>{% endif %} à <span class="text-theme-bleu-marine fw-bold">{{ devis.returnTime|date('H\\hi') }}</span> depuis le <span class="text-theme-bleu-marine fw-bold">{{ devis.arrivalAddress }}</span> vers <span class="text-theme-bleu-marine fw-bold">{{ devis.departureAddress }}</span>. </p>
  66.                             {% endif %}
  67.                             <p>Vous {% if devis.devisLuggage.name == 'Aucun bagage' %}ne{% endif %} disposerez d{% if devis.devisLuggage.name == 'Aucun bagage' %}'{% else %}e{% endif %} <span class="text-theme-bleu-marine fw-bold">{{ devis.devisLuggage.name }}</span>, et le type de déplacement sera <span class="text-theme-bleu-marine fw-bold">{{ devis.devisTravelReason.name }}</span>.</p>
  68.                             {% if devis.devisEquipment and devis.devisEquipment is not empty %}
  69.                                 <p class="pb-0">Vous avez besoin d'équipements particuliers dans le véhicule ci-dessous :</p>
  70.                                 {% for equipment in devis.devisEquipment %}
  71.                                 <p {% if loop.last %}{% else %}class="pb-0"{% endif %}><i class="fas fa-circle font-size-04 vertical-align-middle"></i> {{ equipment.name }}</p>
  72.                                 {% endfor %}
  73.                             {% else %}
  74.                                 <p>Vous n'avez pas besoin d'équipements particuliers dans le véhicule.</p>
  75.                             {% endif %}
  76.                         </div>
  77.                         <div class="box-widget-list">
  78.                             <hr class="my-2">
  79.                         </div>
  81.                         <div class="box-widget-list text-left mt-4 mb-1">
  82.                             <h1 class="text-theme-bleu-marine text-uppercase text-center fw-bold">Option de diffusion</h1>
  83.                         </div>
  84.                         <div class="devis-currency-wrap">
  85.                             <div class="show-currency-devis">
  86.                                 <span class="text-theme-orange text-uppercase fw-bold mr-1">
  87.                                     <img src="{{ asset('front/images/money_8366606.png') }}" class="img-crab-devis mr-2" alt=""> {{ app.user.creditBalance | number_format(2, ',', ' ') }} Crédit(s) 
  88.                                 </span>
  89.                                 <span class="text-theme-gray text-uppercase fw-bold mr-1"> Restant</span>
  90.                                 <span class="text-uppercase btn-recharger-devis modal-open">Recharger</span>
  91.                             </div>
  92.                         </div>
  93.                         
  94.                         {{ form_start(form) }}
  95.                         <div class="form-diffusion-option">
  96.                             <div class="mb-1">
  97.                                 {{ form_widget(form.miseEnAvance) }}
  98.                                 <img src="{{ asset('front/images/views.png') }}" class="ml-1" alt="">
  99.                                 <label for="sg_devis_miseEnAvance">Mise en avant de votre demande <span class="dot-mise-en-avance">:</span> <span class="ml-2">6 Crédits</span></label>
  100.                             </div>
  101.                             <div class="mb-1">
  102.                                 {{ form_widget(form.remonteEnTeteDeListe) }}
  103.                                 <img src="{{ asset('front/images/up_annonce.png') }}" class="ml-1" alt="">
  104.                                 <label for="sg_devis_remonteEnTeteDeListe">Remonter en tête de liste tout les jours : <span class="ml-2">8 Crédits</span></label>
  105.                             </div>
  106.                             <div class="mb-1">
  107.                                 {{ form_widget(form.demandeUrgente) }}
  108.                                 <img src="{{ asset('front/images/annonce_urgente.png') }}" class="ml-1" alt="">
  109.                                 <label for="sg_devis_demandeUrgente">Logo demande urgente <span class="dot-demande-urgente">:</span> <span class="ml-2">3 Crédits</span></label>
  110.                             </div>
  112.                             <div class="div-total-devis">
  113.                                 {% if form.vars.errors is not empty %}
  114.                                     <div class="form-error">
  115.                                         {% for error in form.vars.errors %}
  116.                                             <p class="pb-0">{{ error.message }}</p>
  117.                                         {% endfor %}
  118.                                     </div>
  119.                                 {% endif %}
  120.                                 <div class="">   
  121.                                     <p class="text-uppercase fw-bold">Total : <span id="total-balance" class="text-theme-orange">xx</span><span class="text-theme-orange"> crédit(s)</span></p>
  122.                                 </div>
  123.                             </div>
  124.                         </div>            
  125.                         
  126.                         <div class="book-form">
  127.                             <div class="width-100 d-flex justify-content-between flex-wrap mt-4">
  128.                                 <a href="{{ url('app_client_service_login_info', {'slug': service.slug}) }}" class="btn-prev color3-bg">
  129.                                     <i class="fal fa-angle-double-left"></i> Précédent
  130.                                 </a>
  131.                                 <button type="submit" class="btn-next color2-bg">
  132.                                     {% trans %}Validation{% endtrans %}
  133.                                 </button>
  134.                             </div>
  135.                         </div>
  136.                         {{ form_end(form) }}
  138.                     </div>
  139.                 </div>
  140.             </div>
  142.             <div class="col-md-4">
  143.                 <div class="box-widget-wrap">  
  144.                     <div class="box-widget-item fl-wrap">
  145.                         <div class="box-widget widget-posts">
  146.                             <div class="box-widget-content pb-3">
  147.                                 <div class="box-widget-item-header mb-3">
  148.                                     <h3 class="text-uppercase fw-bold text-theme-bleu-marine">Votre demande</h3>
  149.                                 </div>
  150.                                 <div class="box-widget-list">
  151.                                     <h4 class="text-left mb-3 step-devis-request text-theme-bleu-marine fw-bold"><span>1</span> Type de trajet</h4>
  152.                                 </div>
  153.                                 <div id="map-distance-2address" data-departure-address={{ devis.departureAddress|e('html_attr')  }} data-arrival-address={{ devis.arrivalAddress|e('html_attr')  }} data-start-latitude="{{ devis.startLatitude|e('html_attr')  }}" data-start-longitude="{{ devis.startLongitude|e('html_attr')  }}" data-end-latitude="{{ devis.endLatitude|e('html_attr')  }}" data-end-longitude="{{ devis.endLongitude|e('html_attr')  }}"></div>
  154.                                 <div class="box-widget-list">
  155.                                     <h4 class="text-left text-uppercase text-theme-orange fw-bold mb-1">{{ devis.typeOfTrip }}</h4>
  156.                                 </div>
  157.                                 <div class="box-widget-list">
  158.                                     <ul>
  159.                                         {% if devis.departureAddress %}
  160.                                             <li class="departure-address"><a href="#" class="mx-0"><i class="fal fa-map-marker-alt"></i> {{ devis.departureAddress }}</a></li>
  161.                                         {% endif %}
  162.                                         {% if devis.arrivalAddress %}
  163.                                             <li class="arrival-address"><a href="#" class="mx-0"><i class="fal fa-map-pin"></i> {{ devis.arrivalAddress }}</a></li>
  164.                                         {% endif %}
  165.                                         {% if devis.departureDate and devis.departureTime %}
  166.                                             <li class="mb-2"><span><i class="fal fa-calendar-alt"></i> Aller :</span> <a href="#">{{ devis.departureDate|date('d/m/Y') }} départ à {{ devis.departureTime|date('H\\hi') }}</a></li>
  167.                                         {% endif %}
  168.                                         {% if devis.returnDate and devis.returnTime %}
  169.                                             <li class="mb-2"><span><i class="fal fa-calendar-alt"></i> Retour :</span> <a href="#">{{ devis.returnDate|date('d/m/Y') }} départ à {{ devis.returnTime|date('H\\hi') }} </a></li>
  170.                                         {% elseif devis.returnDate is null and devis.returnTime %}
  171.                                             <li class="mb-2"><span><i class="fal fa-clock"></i> Retour :</span> <a href="#"> {{ devis.returnTime|date('H\\hi') }} </a></li>
  172.                                         {% endif %}
  173.                                         {% if devis.distance and devis.distancePerTrip %}
  174.                                             <li class="mb-2"><span><i class="fal fa-road"></i> Distance :</span> <a href="#">{{ devis.distance }} ({{ devis.distancePerTrip }} par trajet)</a></li>
  175.                                         {% else %}
  176.                                             <li class="mb-2"><span><i class="fal fa-road"></i> Distance :</span> <a href="#">{{ devis.distance }}</a></li>
  177.                                         {% endif %}
  178.                                         {% if devis.numberOfPeople %}
  179.                                             <li><span><i class="fal fa-users"></i> Passagers :</span> <a href="#">{{ devis.numberOfPeople }}</a></li>
  180.                                         {% endif %}
  181.                                     </ul>
  182.                                 </div>
  183.                             </div>
  184.                             <div class="box-widget-content pt-0">
  185.                                 <div class="box-widget-list">
  186.                                     <h4 class="text-left mb-1 step-devis-request text-theme-bleu-marine fw-bold"><span>2</span> Description trajet</h4>
  187.                                 </div>
  188.                                 <div class="box-widget-list">
  189.                                     <ul>
  190.                                         <li class="departure-address mb-0"><a href="#" class="mx-0 text-uppercase"><i class="fal fa-car"></i> Utilisation du véhicule : {% if devis.needVehicleOnSite == 'Oui' %}<strong>Oui</strong>{% else %}<strong>Non</strong>{% endif %}</a></li>
  191.                                         {% if devis.vehicleDetails and devis.vehicleDetails is not empty %}
  192.                                             {% for vehicleDetail in devis.vehicleDetails %}   
  193.                                                 {% if vehicleDetail.day %}                                         
  194.                                                 <li class="departure-address py-0"><a href="#" class="mx-0 text-transform-none">- {{ vehicleDetail.day|date('d/m/Y') }} :</a></li>
  195.                                                 {% endif %}
  196.                                                 {% if vehicleDetail.departureAddress %}           
  197.                                                 <li class="departure-address py-0"><a href="#" class="mx-0 text-transform-none">{{ vehicleDetail.departureAddress }},</a></li>
  198.                                                 {% endif %}
  199.                                                 {% if vehicleDetail.destinationAddress %}
  200.                                                 <li class="departure-address py-0"><a href="#" class="mx-0 text-transform-none">{{ vehicleDetail.destinationAddress }}</a></li>
  201.                                                 {% endif %}
  202.                                                 {% if vehicleDetail.departureTime and vehicleDetail.returnTime %}
  203.                                                 <li class="departure-address {% if vehicleDetail.infos %}py-0{% else %}pt-0{% endif %}"><a href="#" class="mx-0 text-transform-none">Départ {{ vehicleDetail.departureTime|date('H\\hi') }} - Retour {{ vehicleDetail.returnTime|date('H\\hi') }}</a></li>
  204.                                                 {% endif %}
  205.                                                 {% if vehicleDetail.infos %}
  206.                                                 <li class="departure-address pt-0"><a href="#" class="mx-0 text-transform-none">{{ vehicleDetail.infos|raw }}</a></li>
  207.                                                 {% endif %}
  208.                                             {% endfor %}
  209.                                         {% endif %}
  210.                                         <li class="departure-address pt-1 mb-0"><a href="#" class="mx-0 text-uppercase"><i class="fal fa-paperclip"></i> Documents complémentaires : {% if devis.addPdfDocument == 'Oui' %}<strong>Oui</strong>{% else %}<strong>Non</strong>{% endif %}</a></li>
  211.                                         {% if devis.attachments and devis.attachments is not empty %}
  212.                                             {% for attachment in devis.attachments %}    
  213.                                                 {% if attachment.originalName %}                                               
  214.                                                 <li class="departure-address {% if loop.last %}pt-0{% else %}py-0{% endif %}"><a href="#" class="mx-0 text-transform-none text-italic fw-bold text-theme-bleu-marine">{{ attachment.originalName }}</a></li>
  215.                                                 {% endif %}
  216.                                             {% endfor %}
  217.                                         {% endif %}
  218.                                         
  219.                                         {% if devis.devisTravelReason %}
  220.                                             <li class="mb-2"><span><i class="fal fa-road"></i> Motif du déplacement :</span> <a href="#">{{ devis.devisTravelReason.name }}</a></li>
  221.                                         {% endif %}
  222.                                         {% if devis.devisLuggage %}
  223.                                             <li class="mb-2"><span><i class="fal fa-suitcase"></i> Bagages :</span> <a href="#">{{ devis.devisLuggage.name }}</a></li>
  224.                                         {% endif %}
  225.                                         {% if devis.infos %}
  226.                                             <li class="mb-2"><span><i class="fal fa-info-circle"></i> Informations complémentaires :</span></li>
  227.                                             <li class="departure-address py-0"><a href="#" class="mx-0 text-transform-none">{{ devis.infos|raw }}</a></li>
  228.                                         {% endif %}
  229.                                         {% if devis.devisEquipment %}
  230.                                             <li class="mb-2"><span><i class="fal fa-screwdriver"></i> Equipement indispensable :</span></li>
  231.                                             {% for equipment in devis.devisEquipment %}
  232.                                                 <li class="departure-address py-0"><a href="#" class="mx-0 text-transform-none">- {{ equipment.name }}</a></li>
  233.                                             {% endfor %}
  234.                                         {% endif %}
  235.                                         {% if devis.devisBudget %}
  236.                                             <li class="mb-0"><span><i class="fal fa-money-bill-wave"></i> Budget :</span> <a href="#">{{ devis.devisBudget.name }}</a></li>
  237.                                         {% endif %}
  238.                                     </ul>
  239.                                 </div>
  240.                             </div>
  241.                         </div>
  242.                     </div>  
  243.                 </div>      
  244.             </div>
  245.         </div>
  246.     </div>
  247. </section>      
  248. {% endblock %}
  250. {% block javascripts %}
  251.     {{ parent() }}
  252.     <script>
  253.         const stripe = Stripe('{{ stripe_public_key }}');
  254.         const elements = stripe.elements();
  255.         const cardNumber = elements.create('cardNumber', { placeholder: '1234 1234 1234 1234' });
  256.         cardNumber.mount('#sg_credit_reload_card_number');
  257.         const expDate = elements.create('cardExpiry');
  258.         expDate.mount('#sg_credit_reload_expiry');
  259.         const cvc = elements.create('cardCvc', { placeholder: 'CVV' });
  260.         cvc.mount('#sg_credit_reload_cvv');
  262.         cardNumber.addEventListener("change", (event) => {
  263.             const displayError = document.getElementById("sg_credit_reload_card_errors")
  264.             displayError.textContent = event.error ? event.error.message : "";
  265.         })
  266.         expDate.addEventListener("change", (event) => {
  267.             const displayError = document.getElementById("sg_credit_reload_expiry_errors")
  268.             displayError.textContent = event.error ? event.error.message : "";
  269.         })
  270.         cvc.addEventListener("change", (event) => {
  271.             const displayError = document.getElementById("sg_credit_reload_cvv_errors")
  272.             displayError.textContent = event.error ? event.error.message : "";
  273.         })
  275.         const form = document.getElementById('paymentFormRecap');
  276.         form.addEventListener('submit', async (event) => {
  277.             event.preventDefault();
  279.             const cardHolderName = document.getElementById("sg_credit_reload_card_holder_name").value;
  280.             const montant = document.getElementById("sg_credit_reload_amount").value * 100;
  281.             const payButton = document.getElementById("card-button");
  282.             payButton.disabled = true; 
  284.             try {
  285.                 const response = await fetch("{{ path('app_client_credit_reload_modal') }}", {
  286.                     method: 'POST',
  287.                     body: new FormData(form),
  288.                     headers: {
  289.                         'X-Requested-With': 'XMLHttpRequest',
  290.                     }
  291.                 });
  292.                 
  293.                 if (!response.ok) {
  294.                     throw new Error("Erreur de communication avec le serveur.");
  295.                 }
  297.                 const data = await response.json();
  298.                 if (!data.client_secret) {
  299.                     throw new Error("Erreur lors de la création du paiement.");
  300.                 }
  302.                 const clientSecret = data.client_secret;
  303.                 const paymentResult = await stripe.confirmCardPayment(clientSecret, {
  304.                     payment_method: {
  305.                         card: cardNumber,
  306.                         billing_details: {
  307.                             name: cardHolderName,
  308.                         },
  309.                     },
  310.                 });
  311.                 
  312.                 if (paymentResult.error) {
  313.                     document.getElementById("errors").innerText = paymentResult.error.message;
  314.                     payButton.disabled = false;
  315.                 } else if (paymentResult.paymentIntent && paymentResult.paymentIntent.status === 'succeeded') {
  316.                     const completeResponse = await fetch("{{ path('app_client_complete_payment_modal') }}", {
  317.                         method: 'POST',
  318.                         headers: {
  319.                             'Content-Type': 'application/json',
  320.                             'X-Requested-With': 'XMLHttpRequest',
  321.                         },
  322.                         body: JSON.stringify({
  323.                             payment_intent_id: paymentResult.paymentIntent.id,
  324.                             amount: montant, 
  325.                             status: paymentResult.paymentIntent.status
  326.                         })
  327.                     });
  328.                     const completeData = await completeResponse.json();
  329.                     if (completeData.success) {
  330.                         window.scrollTo(0, 0);
  331.                         window.location.reload(true);
  332.                     } else {
  333.                         document.getElementById("errors").innerText = completeData.message || "Erreur lors de la finalisation du paiement.";
  334.                     }
  335.                 } else {                                                                                                                        
  336.                     document.getElementById("errors").innerText = "Le paiement a échoué.";
  337.                     payButton.disabled = false;
  338.                 }
  339.             } catch (error) {
  340.                 document.getElementById("errors").innerText = error.message;
  341.                 payButton.disabled = false;
  342.             }
  343.         }); 
  344.     </script>
  345. {% endblock %}