templates/reservation/tunnel/tunnel.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  2. {% import 'vitrine/macros/svg_illustration_macros.twig' as svg %}
  5. {% block title "Réserver" %}
  6. {% block description %}{% trans %}Réservez votre moment de détente{% endtrans %}{% endblock %}
  8. {% block stylesheets %}
  9.     {{ parent() }}
  10.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  11.     {{ encore_entry_link_tags('tunnel') }}
  12. {% endblock %}
  14. {% block javascripts %}
  15.     {{ parent() }}
  16.     {{ encore_entry_script_tags('tunnel') }}
  17.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  18.     <script type="text/javascript" src="https://api.payplug.com/js/1/form.latest.js"></script>
  19.     
  20.     <script async defer src="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js"></script>
  21.     <script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.21/web.js"></script>
  23.     <script>
  24.         const ACCESS_TOKEN = '{{ mapbox_access_token }}';
  25.         const COUNTRIES = '{{ mapbox_countries  }}'.split(',');
  27.         const script = document.getElementById('search-js');
  28.         script.onload = () => {
  29.             const collection = mapboxsearch.autofill({
  30.                 accessToken: ACCESS_TOKEN,
  31.                 options: { COUNTRIES }
  32.             });
  33.         };
  34.     </script>
  36.     {% include 'form/components/js-translations.html.twig' %}
  37. {% endblock %}
  39. {% block main %}
  40.     <div id="background-override">
  41.         <video data-step="start" class="background-video" src="https://i.gyazo.com/d9d0bd5636691cfdf72d4db0a4132c09.mp4" muted playsinline autoplay loop></video>
  42.         <div data-step="second-step" class="tunnel-hidden background-image swiper-full">
  43.             <div class="swiper swiper-bath">
  44.                 <div class="swiper-wrapper">
  45.                     <div class="swiper-slide">
  46.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 1">
  47.                     </div>
  48.                     <div class="swiper-slide">
  49.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 1">
  50.                     </div>
  51.                     <div class="swiper-slide">
  52.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 3">
  53.                     </div>
  54.                 </div>
  55.                 <div class="swiper-pagination"></div>
  56.             </div>
  57.         </div>
  58.         <div data-step="fourth-step" class="tunnel-hidden background-image swiper-full">
  59.             <div class="swiper swiper-extra">
  60.                 <div class="swiper-wrapper">
  61.                     <div class="swiper-slide">
  62.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 1">
  63.                     </div>
  64.                     <div class="swiper-slide">
  65.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 2">
  66.                     </div>
  67.                     <div class="swiper-slide">
  68.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 3">
  69.                     </div>
  70.                 </div>
  71.                 <div class="swiper-pagination"></div>
  72.             </div>
  73.         </div>
  74.     </div>
  75.     {% form_theme form 'form/theme_tunnel.html.twig' %}
  76.     {{ form_start(form, { 'attr': {
  77.         'class': 'to-submit w-full',
  78.         'data-entity-id': edit is defined and reservationId is defined ? reservationId : null
  79.     }}) }}
  80.     <div class="not-animate-childs md:pt-32 pt-24 justify-items-center">
  81.         
  82.         <div id="progress-bar" class="progress-bar-container tunnel-hidden" style="{{ code is defined ? "display: none" : "" }}">
  83.             <p class="progress-bar-steps">
  84.                 {% trans %}Étape{% endtrans %} <span id="step-count">1</span> {% trans %}sur{% endtrans %} 6
  85.             </p>
  86.             <div class="progress-bar">
  87.                 <div class="progress-bar-fill"></div>
  88.             </div>
  89.         </div>
  90.         <section id="start" class="tunnel-hidden content-column-center-48 tunnel-step">
  91.             {% if code is defined %}
  92.                 <h2 class="title text-center mt-24 text-4xl">
  93.                     {% trans %}Votre carte cadeau{% endtrans %}
  94.                 </h2>
  95.                 <div class="recapitulatif-container content-column-24 max-w-400">
  96.                     <div class="content-column-8">
  97.                         <h3>
  98.                             {% if token.offer == 90 %}
  99.                                 La Grande Bulle (90 min)
  100.                             {% else %}
  101.                                 La Bulle (60 min)
  102.                             {% endif %}
  103.                         </h3>
  104.                         <p class="text-opacity-70">
  105.                             {{ token.nbParticipants }} {% trans %}personne(s){% endtrans %}
  106.                             · {{ token.solo + token.duo }} {% trans %}baignoire(s){% endtrans %}
  107.                         </p>
  108.                     </div>
  109.                     {% if services is defined and services|length > 0 %}
  110.                         <div class="content-column-8">
  111.                             <h4>{% trans %}Extras inclus{% endtrans %}</h4>
  112.                             {% for service in services %}
  113.                                 <p class="text-opacity-70">{{ service.name }} × {{ service.quantity }}</p>
  114.                             {% endfor %}
  115.                         </div>
  116.                     {% endif %}
  117.                     <div class="flex-between w-full">
  118.                         <p><b>{% trans %}Valeur{% endtrans %}</b></p>
  119.                         <p><b>{{ priceOffered }}€</b></p>
  120.                     </div>
  121.                 </div>
  122.                 <div class="tunnel-footer m-auto content-column-8">
  123.                     {% include "tunnel/components/primary-button.html.twig" with {
  124.                         'action': 'goToDateStep', 'label': 'Choisir la date'
  125.                     } %}
  126.                     {% include "tunnel/components/secondary-button.html.twig" with {
  127.                         'action': 'goToFirstStep', 'label': 'Modifier l\'offre'
  128.                     } %}
  129.                 </div>
  130.             {% else %}
  131.                 <h2 class="title text-center mt-24 text-4xl">
  132.                     {% trans %}Offrez-vous un moment de détente avec vos proches{% endtrans %}
  133.                 </h2>
  134.                 <div class="tunnel-footer m-auto">
  135.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Commencer' } %}
  136.                     <a href="{{ path('reservation_carte_cadeau_tunnel') }}">
  137.                         <button class="rounded-btn-secondary btn" type="button">
  138.                             <span>{{ "J'ai une carte cadeau"|trans }}</span>
  139.                         </button>
  140.                     </a>
  141.                 </div>
  142.             {% endif %}
  143.         </section>
  144.         <section id="first-step" class="tunnel-hidden tunnel-step">
  145.             <div class="content-column-center-48 ">
  146.                 <div class="content-column-8-center">
  147.                     <h2 class="title text-center">
  148.                         {% trans %}Combien serez-vous ?{% endtrans %}
  149.                     </h2>
  150.                     <p class="text-opacity-70 text-center">
  151.                         {% trans %}Vous profiterez de votre espace en toute intimité, quel que soit votre nombre.{% endtrans %}
  152.                     </p>
  153.                 </div>
  154.                 <div class="my-6">
  155.                     {{ form_widget(form.nbParticipants) }}
  156.                 </div>
  157.                 <div class="tunnel-footer">
  158.                     <div class="infoContainer w-full text-center" style="display: none">
  159.                         <p class="stepInfo">
  160.                         </p>
  161.                     </div>
  162.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  163.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToPrivatisation', 'label': 'Privatiser le spa' } %}
  164.                 </div>
  165.             </div>
  166.         </section>
  167.         <section id="second-step" class="tunnel-hidden tunnel-step">
  168.             <div class="swiper-button-prev-bath swiper-button-prev"></div>
  169.             <div class="swiper-button-next-bath swiper-button-next"></div>
  170.             <div class="content-column-center-48 ">
  171.                 <div class="content-column-8-center">
  172.                     <h2 class="title text-center">
  173.                         {% trans %}Combien de baignoires voulez-vous utiliser ?{% endtrans %}
  174.                     </h2>
  175.                     <p class="text-opacity-70 text-center">
  176.                         {% trans %}Nos baignoires sont conçues pour accueillir 2 personnes confortablement.{% endtrans %}
  177.                     </p>
  178.                 </div>
  179.                 <div class="max-w-400">
  180.                     {{ form_widget(form.nbBath) }}
  181.                 </div>
  182.                 <div class="tunnel-footer">
  183.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  184.                         <p class="small-text-opacity-70">
  185.                             {% trans %}Supplément à régler{% endtrans %}
  186.                         </p>
  187.                         <p>
  188.                             <b>+</b><b class="totalDifferencePrice"></b>
  189.                         </p>
  190.                     </div>
  191.                     <div class="totalContainer w-full flex-between" style="display: none">
  192.                         <p class="small-text-opacity-70">
  193.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  194.                         </p>
  195.                         <p>
  196.                             <b class="totalPrice"></b>
  197.                         </p>
  198.                     </div>
  199.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  200.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  201.                 </div>
  202.             </div>
  203.         </section>
  204.         <section id="third-step" class="tunnel-hidden tunnel-step">
  205.             <div class="content-column-center-48">
  206.                 <h2 class="title text-center">
  207.                     {% trans %}Choisissez une offre{% endtrans %}
  208.                 </h2>
  209.                 <div class="w-full">
  210.                     {{ form_widget(form.offer) }}
  211.                 </div>
  212.                 <div class="tunnel-footer">
  213.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  214.                         <p class="small-text-opacity-70">
  215.                             {% trans %}Supplément à régler{% endtrans %}
  216.                         </p>
  217.                         <p>
  218.                             <b>+</b><b class="totalDifferencePrice"></b>
  219.                         </p>
  220.                     </div>
  221.                     <div class="totalContainer w-full flex-between" style="display: none">
  222.                         <p class="small-text-opacity-70">
  223.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  224.                         </p>
  225.                         <p>
  226.                             <b class="totalPrice"></b>
  227.                         </p>
  228.                     </div>
  229.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  230.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  231.                 </div>
  232.             </div>
  233.         </section>
  234.         <section id="fourth-step" class="tunnel-hidden tunnel-step">
  235.             <div class="swiper-button-prev-extra swiper-button-prev"></div>
  236.             <div class="swiper-button-next-extra swiper-button-next"></div>
  237.             <div class="content-column-center-48 ">
  238.                 <div class="content-column-8">
  239.                     <h2 class="title text-center">
  240.                         {% trans %}Un petit plaisir à ajouter ?{% endtrans %}
  241.                     </h2>
  242.                 </div>
  243.                 <div class="extra-container max-w-400">
  244.                     {{ form_row(form.extraReservations) }}
  245.                 </div>
  246.                 <div class="tunnel-footer">
  247.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  248.                         <p class="small-text-opacity-70">
  249.                             {% trans %}Supplément à régler{% endtrans %}
  250.                         </p>
  251.                         <p>
  252.                             <b>+</b><b class="totalDifferencePrice"></b>
  253.                         </p>
  254.                     </div>
  255.                     <div class="totalContainer w-full flex-between" style="display: none">
  256.                         <p class="small-text-opacity-70">
  257.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  258.                         </p>
  259.                         <p>
  260.                             <b class="totalPrice"></b>
  261.                         </p>
  262.                     </div>
  263.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  264.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  265.                 </div>
  266.             </div>
  267.         </section>
  268.         <section id="fifth-step" class="tunnel-hidden tunnel-step">
  269.             <div class="content-column-center-48 ">
  270.                 <div class="content-column-8">
  271.                     <h2 class="title text-center">
  272.                         {% trans %}Choisissez une date{% endtrans %}
  273.                     </h2>
  274.                 </div>
  275.                 <div class="date-container max-w-400 content-column-16">
  276.                     {{ form_widget(form.date) }}
  277.                 </div>
  278.                 <div class="tunnel-footer">
  279.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  280.                         <p class="small-text-opacity-70">
  281.                             {% trans %}Supplément à régler{% endtrans %}
  282.                         </p>
  283.                         <p>
  284.                             <b>+</b><b class="totalDifferencePrice"></b>
  285.                         </p>
  286.                     </div>
  287.                     <div class="totalContainer w-full flex-between" style="display: none">
  288.                         <p class="small-text-opacity-70">
  289.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  290.                         </p>
  291.                         <p>
  292.                             <b class="totalPrice"></b>
  293.                         </p>
  294.                     </div>
  295.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  296.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  297.                 </div>
  298.             </div>
  299.         </section>
  300.         <section id="sixth-step" class="tunnel-hidden tunnel-step">
  302.             <div class="content-column-center-48">
  303.                 <div class="content-column-8-center">
  304.                     <h2 class="title text-center">
  305.                         {% trans %}Récapitulons{% endtrans %}
  306.                     </h2>
  307.                 </div>
  308.                 <div class="content-row-48-center max-w-1200">
  309.                     <div class="gsap-sticky">
  310.                         {% include "tunnel/components/recapitulatif.html.twig" %}
  311.                     </div>
  313.                     <div class="contact-container wrapper-form-right flex-1">
  314.                         <div class="content-column-16">
  315.                             <h2 class="p-16-0">
  316.                                 {% trans %}Contact{% endtrans %}
  317.                             </h2>
  318.                             {{ form_row(form.contact) }}
  320.                             <h2 class="p-16-0">
  321.                                 {% trans %}Participants{% endtrans %}
  322.                             </h2>
  323.                             {{ form_row(form.participants) }}
  324.                             {{ form_row(form.cgv) }}
  325.                             <p style="font-size: 14px;">
  326.                                 (*) {% trans %}Champs obligatoires{% endtrans %}
  327.                             </p>
  328.                         </div>
  329.                     </div>
  330.                 </div>
  331.                 <div class="tunnel-footer">
  332.                     <div class="infoContainer w-full text-center" style="display: none">
  333.                         <p class="stepInfo">
  334.                         </p>
  335.                     </div>
  336.                     {% include 'form/components/rgpd.html.twig' with {'sujet': 'réservation'} %}
  337.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'createPayment', 'label': 'payment.pay'|trans } %}
  338.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToFirstStep', 'label': 'Modifier' } %}
  339.                 </div>
  340.             </div>
  341.         </section>
  342.     </div>
  343.     {{ form_end(form) }}
  345.     <script src="{{ asset('js/tunnel.js') }}"></script>
  346.     <script src="{{ asset('js/tunnel/swiper.js') }}"></script>
  347.     <script>
  349.         const oldPrice = {{ priceOffered|default(0) }};
  350.         const usingCode = {{ code is defined ? "true" : "false" }};
  351.         const editMode = {{ edit is defined ? "true" : "false" }};
  352.         const entityId = {{ edit is defined and reservationId is defined ? reservationId : "null" }};
  354.         // Make editMode and entityId available globally for offer availability checks
  355.         window.editMode = editMode;
  356.         window.entityId = entityId;
  357.         const waitlistData = {{ waitlistData|default(null)|json_encode|raw }};
  359.         let submitButton = document.querySelector(".submit-btn");
  361.         // on dom ready
  362.         document.addEventListener('DOMContentLoaded', function() {
  363.             if (usingCode) {
  364.                 updateUI(0);
  365.             }
  367.             if (editMode) {
  368.                 updateUI(1);
  369.                 // Initialize offer availability check for edit mode
  370.                 if (typeof initializeOfferAvailabilityForEdit === 'function') {
  371.                     initializeOfferAvailabilityForEdit();
  372.                 }
  373.             }
  375.             if (waitlistData) {
  376.                 window.waitlistData = waitlistData;
  378.                 // Pre-fill form fields from waitlist data
  379.                 const soloInput = document.querySelector('.solo');
  380.                 const duoInput = document.querySelector('.duo');
  381.                 const nbBathInput = document.querySelector('.nbBath');
  382.                 const nbParticipantsInput = document.querySelector('.nbParticipants');
  384.                 if (soloInput) soloInput.value = waitlistData.solo;
  385.                 if (duoInput) duoInput.value = waitlistData.duo;
  386.                 if (nbBathInput) nbBathInput.value = waitlistData.solo + waitlistData.duo;
  387.                 if (nbParticipantsInput) nbParticipantsInput.value = waitlistData.solo + (waitlistData.duo * 2);
  389.                 // Set offer radio button
  390.                 const offerInput = document.querySelector('input.offer-option[value="' + waitlistData.offer + '"]');
  391.                 if (offerInput) {
  392.                     offerInput.checked = true;
  393.                     offerInput.dispatchEvent(new Event('change', { bubbles: true }));
  394.                 }
  396.                 // Navigate to date step (step 5)
  397.                 updateUI(5);
  398.             }
  399.         });
  401.         window.addEventListener('message', function (event) {
  402.             // Check if the message is coming from the PayPlug origin
  403.             if (event.origin === "https://secure.payplug.com") {
  404.                 // Check if the message data indicates the lightbox was closed
  405.                 if (event.data === "closePayPlugFrame") {
  406.                     // Re-enable the submit button
  407.                     submitButton.removeAttribute("disabled");
  408.                     submitButton.querySelector(".spinner").style.display = "none";
  409.                 }
  410.             }
  411.         });
  413.         function openCarteCadeauModal() {
  414.             const tokenValue = prompt("Entrez le code de votre carte cadeau");
  416.             // Check if the user provided a value
  417.             if (tokenValue) {
  418.                 const baseUrl = "{{ path('reservation_carte_cadeau_tunnel') }}";
  419.                 window.location.href = `${baseUrl}?code=${encodeURIComponent(tokenValue)}`;
  420.             }
  421.         }
  423.         function createPayment() {
  425.             let form = document.querySelector("form.to-submit");
  426.             let formExtras = new FormData(form);
  427.             let formData = {};
  429.             submitButton.removeAttribute("disabled");
  430.             displayStepInfo(submitButton, "");
  432.             for (let entry of formExtras.entries()) {
  433.                 formData[entry[0]] = entry[1];
  434.             }
  436.             if (!form.checkValidity()) {
  437.                 displayStepInfo(submitButton, "Veuillez remplir tous les champs obligatoires");
  438.                 form.reportValidity();
  439.                 return;
  440.             }
  442.             {% if code is defined %}
  443.             formData["code"] = "{{ code }}";
  444.             {% endif %}
  446.             submitButton.disabled = true;
  447.             submitButton.querySelector(".spinner").style.display = "block";
  449.             $.ajax({
  450.                 url: "{{ paymentUrl }}",
  451.                 dataType: "json",
  452.                 type: "Post",
  453.                 async: true,
  454.                 data: formData,
  455.                 success: function (data) {
  456.                     if(data.action === 'payment') {
  457.                         Payplug.showPayment(data.url);
  458.                     } else if (data.action === 'redirect') {
  459.                         window.location.href = data.url;
  460.                     } else if (data.action === 'error') {
  461.                         alert(data.message);
  462.                         submitButton.removeAttribute("disabled");
  463.                         submitButton.querySelector(".spinner").style.display = "none";
  464.                     } else {
  465.                         alert('Nous sommes désolés, une erreur est survenue lors de la prise de votre réservation, nous avons besoin que vous recommenciez.');
  466.                         submitButton.removeAttribute("disabled");
  467.                         submitButton.querySelector(".spinner").style.display = "none";
  468.                         // window.location.reload();
  469.                     }
  470.                 },
  471.                 error: function (data) {
  472.                     alert(data);
  473.                 }
  474.             });
  475.         }
  476.     </script>
  477. {% endblock %}