templates/privatisation/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.     <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  21.     <script async defer src="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js"></script>
  22.     <script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.21/web.js"></script>
  24.     <script>
  25.         const ACCESS_TOKEN = '{{ mapbox_access_token }}';
  26.         const COUNTRIES = '{{ mapbox_countries  }}'.split(',');
  28.         const script = document.getElementById('search-js');
  29.         script.onload = () => {
  30.             const collection = mapboxsearch.autofill({
  31.                 accessToken: ACCESS_TOKEN,
  32.                 options: { COUNTRIES }
  33.             });
  34.         };
  35.     </script>
  37.     {% include 'form/components/js-translations.html.twig' %}
  38. {% endblock %}
  40. {% block main %}
  41.     <div id="background-override">
  42.         <video data-step="start" class="background-video" src="https://i.gyazo.com/d9d0bd5636691cfdf72d4db0a4132c09.mp4" muted playsinline autoplay loop></video>
  43.         <img data-step="second-step" class="background-image tunnel-hidden" src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg">
  44.         <img data-step="third-step" class="background-image tunnel-hidden" src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg">
  45.     </div>
  46.     {% form_theme form 'form/theme_tunnel.html.twig' %}
  47.     {{ form_start(form, { 'attr': { 'class': 'to-submit w-full' }}) }}
  48.     <div class="not-animate-childs pt-32 justify-items-center">
  49.         <div id="progress-bar" class="progress-bar-container tunnel-hidden" style="{{ code is defined ? "display: none" : "" }}">
  50.             <p class="progress-bar-steps">
  51.                 Étape <span id="step-count">1</span> sur 5
  52.             </p>
  53.             <div class="progress-bar">
  54.                 <div class="progress-bar-fill"></div>
  55.             </div>
  56.         </div>
  57.         <section id="start" class="tunnel-hidden content-column-center-48">
  58.             <h2 class="title text-center mt-24 text-4xl">
  59.                 La bulle {% trans %}(privatisation){% endtrans %}
  60.             </h2>
  61.             <p class="text-opacity-70 text-center">
  62.                 {% trans %}Séduit par notre concept atypique ?<br><br>
  63.                 Privatisez-le pour une expérience exclusive ! Que ce soit pour célébrer un anniversaire, un EVJ, ou simplement partager un moment spécial en famille, remplissez le formulaire ci-dessous. <br><br>
  64.                 Nos équipes seront à vos côtés pour planifier soigneusement votre moment de détente inoubliable avec vos proches.{% endtrans %}
  65.             </p>
  66.             <div class="tunnel-footer m-auto">
  67.                 {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Commencer' } %}
  68.             </div>
  69.         </section>
  70.         <section id="first-step" class="tunnel-hidden ">
  71.             <div class="content-column-center-48 ">
  72.                 <div class="content-column-8-center">
  73.                     <h2 class="title text-center">
  74.                         {% trans %}Combien serez-vous ?{% endtrans %}
  75.                     </h2>
  76.                     <p class="text-opacity-70 text-center">
  77.                         {% trans %}En fonction du nombre de participants, notre parcours en 3 étapes s'adapte à vos besoins :<br><br>{% endtrans %}
  79.                         {% trans %}Avec 4 baignoires duo dans le même espace, 4 à 8 participants, suivez le parcours classique : sauna, bain de bière, relaxation.<br><br>{% endtrans %}
  81.                         {% trans %}Pour des groupes de plus de 8, le parcours alterne entre les membres, offrant à chacun un confort optimal.{% endtrans %}
  83.                         {% trans %}Pendant qu'un groupe profite du sauna, l'autre déguste une bière en toute détente.{% endtrans %}
  85.                         {% trans %}Les espaces sont entièrement dédiés, permettant à tous de savourer chaque étape à leur rythme. <br><br>{% endtrans %}
  87.                         {% trans %}Transformez votre expérience en la personnalisant davantage. Optez pour des planchettes de dégustation ou ajoutez une touche spécial avec une décoration adaptée à votre événement. Partagez vos souhaits en remplissant les étapes suivantes, nous vous garantissons une réponse dans les 24 heures.{% endtrans %}
  88.                     </p>
  89.                 </div>
  90.                 <div class="my-6">
  91.                     {{ form_widget(form.nbParticipants) }}
  92.                 </div>
  93.                 <div class="tunnel-footer">
  94. {#                    <div class="infoContainer w-full text-center" style="display: none">#}
  95. {#                        <p class="stepInfo">#}
  96. {#                        </p>#}
  97. {#                    </div>#}
  98.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  99. {#                    {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToPrivatisation', 'label': "Privatiser le spa"} %}#}
  100.                 </div>
  101.             </div>
  102.         </section>
  103.         <section id="second-step" class="tunnel-hidden">
  104.             <div class="content-column-center-48">
  105.                 <h2 class="title text-center">
  106.                     {% trans %}Pour quelle durée souhaitez-vous privatiser le spa ?{% endtrans %}
  107.                 </h2>
  108.                 <div class="w-full">
  109.                     {{ form_widget(form.offer) }}
  110.                 </div>
  111.                 <div class="tunnel-footer">
  112.                     <div class="totalContainer w-full flex-between" style="display: none">
  113.                         <p class="small-text-opacity-70">
  114.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  115.                         </p>
  116.                         <p>
  117.                             <b class="totalPrice"></b>
  118.                         </p>
  119.                     </div>
  120.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  121.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': "Précédent" } %}
  122.                 </div>
  123.             </div>
  124.         </section>
  125.         <section id="third-step" class="tunnel-hidden">
  126.             <div class="content-column-center-48 ">
  127.                 <div class="content-column-8">
  128.                     <h2 class="title text-center">
  129.                         {% trans %}Un petit plaisir à ajouter ?{% endtrans %}
  130.                     </h2>
  131.                 </div>
  132.                 <div class="extra-container max-w-400">
  133.                     {{ form_row(form.extraReservations) }}
  134.                 </div>
  135.                 <div class="tunnel-footer">
  136.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  137.                         <p class="small-text-opacity-70">
  138.                             {% trans %}Supplément à régler{% endtrans %}
  139.                         </p>
  140.                         <p>
  141.                             <b>+</b><b class="totalDifferencePrice"></b>
  142.                         </p>
  143.                     </div>
  144.                     <div class="totalContainer w-full flex-between" style="display: none">
  145.                         <p class="small-text-opacity-70">
  146.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  147.                         </p>
  148.                         <p>
  149.                             <b class="totalPrice"></b>
  150.                         </p>
  151.                     </div>
  152.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  153.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': "Précédent" } %}
  154.                 </div>
  155.             </div>
  156.         </section>
  157.         <section id="fourth-step" class="tunnel-hidden">
  158.             <div class="content-column-center-48 ">
  159.                 <div class="content-column-8">
  160.                     <h2 class="title text-center">
  161.                         {% trans %}Choisissez une date{% endtrans %}
  162.                     </h2>
  163.                 </div>
  164.                 <div class="date-container max-w-400 content-column-16">
  165.                     {{ form_widget(form.date) }}
  166.                 </div>
  167.                 <div class="tunnel-footer">
  168.                     <div class="totalDifferencePriceContainer w-full flex-between" style="display: none">
  169.                         <p class="small-text-opacity-70">
  170.                             {% trans %}Supplément à régler{% endtrans %}
  171.                         </p>
  172.                         <p>
  173.                             <b>+</b><b class="totalDifferencePrice"></b>
  174.                         </p>
  175.                     </div>
  176.                     <div class="totalContainer w-full flex-between" style="display: none">
  177.                         <p class="small-text-opacity-70">
  178.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  179.                         </p>
  180.                         <p>
  181.                             <b class="totalPrice"></b>
  182.                         </p>
  183.                     </div>
  184.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  185.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': "Précédent" } %}
  186.                 </div>
  187.             </div>
  188.         </section>
  189.         <section id="fifth-step" class="tunnel-hidden">
  190.             <div class="content-column-center-48">
  191.                 <div class="content-column-8-center">
  192.                     <h2 class="title text-center">
  193.                         {% trans %}Récapitulons{% endtrans %}
  194.                     </h2>
  195.                 </div>
  196.                 <div class="content-row-48-center max-w-1200">
  197.                     <div class="gsap-sticky">
  198.                         {% include "tunnel/components/recapitulatif.html.twig" %}
  199.                     </div>
  201.                     <div class="contact-container wrapper-form-right flex-1">
  202.                         <div class="content-column-16">
  203.                             <h2 class="p-16-0">
  204.                                 {% trans %}Contact{% endtrans %}
  205.                             </h2>
  207.                             <div class="content-column-16">
  208.                                 <div class="input-wrapper">
  209.                                     <label class="content-column-8">
  210.                                         {% trans %}Prénom{% endtrans %} *
  211.                                         {{ form_widget(form.contactData.firstname) }}
  212.                                     </label>
  213.                                     <hr>
  214.                                     <label class="content-column-8">
  215.                                         {% trans %}Nom{% endtrans %} *
  216.                                         {{ form_widget(form.contactData.lastname) }}
  217.                                     </label>
  218.                                 </div>
  219.                                 <div class="input-wrapper">
  220.                                     <label class="content-column-8">
  221.                                         {% trans %}Email{% endtrans %} *
  222.                                         {{ form_widget(form.contactData.email) }}
  223.                                     </label>
  224.                                 </div>
  225.                                 <div class="input-wrapper">
  226.                                     <label class="content-column-8">
  227.                                         {% trans %}Entreprise{% endtrans %}
  228.                                         {{ form_widget(form.contactData.company) }}
  229.                                     </label>
  230.                                 </div>
  231.                                 <div class="input-wrapper">
  232.                                     <label class="content-column-8">
  233.                                         {% trans %}Téléphone{% endtrans %} *
  234.                                         {{ form_widget(form.contactData.phoneNumber) }}
  235.                                     </label>
  236.                                 </div>
  237.                                 <div class="input-wrapper">
  238.                                     <label class="content-column-8">
  239.                                         {% trans %}Adresse{% endtrans %} *
  240.                                         {{ form_widget(form.contactData.address) }}
  241.                                     </label>
  242.                                 </div>
  243.                                 <div class="input-wrapper">
  244.                                     <label class="content-column-8">
  245.                                         {% trans %}Ville{% endtrans %} *
  246.                                         {{ form_widget(form.contactData.city) }}
  247.                                     </label>
  248.                                     <hr>
  249.                                     <label class="content-column-8">
  250.                                         {% trans %}Code postal{% endtrans %} *
  251.                                         {{ form_widget(form.contactData.postalCode) }}
  252.                                     </label>
  253.                                 </div>
  254.                                 <div class="input-wrapper">
  255.                                     <label class="content-column-8">
  256.                                         {% trans %}Pays{% endtrans %} *
  257.                                         {{ form_widget(form.contactData.country) }}
  258.                                     </label>
  259.                                 </div>
  260.                             </div>
  263.                             <h2 class="p-16-0">
  264.                                 {% trans %}Demande d'information{% endtrans %}
  265.                             </h2>
  266.                             <div class="content-column-16">
  267.                                 <div class="input-wrapper">
  268.                                     <label class="content-column-8">
  269.                                         {% trans %}Commentaire{% endtrans %}
  270.                                         {{ form_widget(form.clientCommentary) }}
  271.                                     </label>
  272.                                 </div>
  273.                                 <div class="input-wrapper">
  274.                                     <label class="content-row-8">
  275.                                         {{ form_widget(form.checkedAcceptPromotion) }}
  276.                                         <p>{% trans %}Vous acceptez d'être contacté pour recevoir des offres promotionnelles{% endtrans %}</p>
  277.                                     </label>
  278.                                 </div>
  279.                                 <div class="input-wrapper">
  280.                                     <label class="content-row-8">
  281.                                         {{ form_widget(form.checkedCGV) }}
  282.                                         <p>{% trans %}Vous acceptez notre{% endtrans %} <a href="#" onclick='window.open("{{ path('privacy-policy') }}");return false;' href="#">{% trans %}politique de confidentialité{% endtrans %}</a> {% trans %}et nos{% endtrans %} <a onclick='window.open("{{ path('cgv') }}");return false;' href="#">{% trans %}conditions générales{% endtrans %}</a> *</p>
  283.                                     </label>
  284.                                 </div>
  285.                             </div>
  287.                             <p style="font-size: 14px;">
  288.                                 (*) {% trans %}Champs obligatoires{% endtrans %}
  289.                             </p>
  290.                         </div>
  291.                     </div>
  292.                 </div>
  293.                 <div class="tunnel-footer">
  294.                     <div class="infoContainer w-full text-center">
  295.                         <p class="stepInfo" style="margin-bottom: 8px;">
  296.                             {% trans %}Veuillez noter qu'une demande de formulaire ne constitue pas une confirmation de réservation.{% endtrans %}
  297.                         </p>
  298.                         <p class="stepInfo">
  299.                             {% trans %}La disponibilité de la date demandée peut varier. Nos équipes vous répondront rapidement pour assurer une organisation optimale de votre événement privatif.{% endtrans %}
  300.                         </p>
  301.                     </div>
  302.                     {% include 'form/components/rgpd.html.twig' with {'sujet': 'demande'} %}
  303.                     
  304.                     <div class="h-captcha-container text-center my-4">
  305.                         <div class="h-captcha" 
  306.                              data-sitekey="{{ siteKeyHcaptcha }}" 
  307.                              data-callback="onCaptchaSuccess" 
  308.                              data-expired-callback="onCaptchaExpired"></div>
  309.                         <div id="captcha-error" class="text-red-500 mt-2" style="display: none;">
  310.                             {% trans %}Veuillez valider le captcha avant de soumettre le formulaire{% endtrans %}
  311.                         </div>
  312.                     </div>
  313.                     
  314.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'submit', 'label': 'Envoyer ma demande' } %}
  315.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToFirstStep', 'label': 'Modifier' } %}
  316.                 </div>
  317.             </div>
  318.         </section>
  319.     </div>
  320.     {{ form_end(form) }}
  322.     <script src="{{ asset('js/tunnel.js') }}"></script>
  323.     <script>
  325.         const oldPrice = {{ priceOffered|default(0) }};
  326.         const usingCode = {{ code is defined ? "true" : "false" }};
  328.         // hCaptcha callback when challenge is successfully completed
  329.         function onCaptchaSuccess() {
  330.             document.getElementById('captcha-error').style.display = 'none';
  331.             const submitBtn = document.querySelector('.submit-btn');
  332.             if (submitBtn) {
  333.                 submitBtn.removeAttribute('disabled');
  334.             }
  335.         }
  337.         // hCaptcha callback when verification expires
  338.         function onCaptchaExpired() {
  339.             const submitBtn = document.querySelector('.submit-btn');
  340.             if (submitBtn) {
  341.                 submitBtn.setAttribute('disabled', 'disabled');
  342.             }
  343.         }
  345.         // on dom ready
  346.         document.addEventListener('DOMContentLoaded', function() {
  347.             if (usingCode){
  348.                 updateUI(5);
  349.             }
  350.             
  351.             // Initially disable submit button
  352.             const submitBtn = document.querySelector('.submit-btn');
  353.             if (submitBtn) {
  354.                 submitBtn.setAttribute('disabled', 'disabled');
  355.             }
  356.             
  357.             // Add submit event listener to form
  358.             const form = document.querySelector('form.to-submit');
  359.             form.addEventListener('submit', function(event) {
  360.                 // Check if hCaptcha is completed
  361.                 const hcaptchaResponse = document.querySelector('textarea[name="h-captcha-response"]');
  362.                 if (!hcaptchaResponse || !hcaptchaResponse.value) {
  363.                     event.preventDefault();
  364.                     document.getElementById('captcha-error').style.display = 'block';
  365.                     // Scroll to captcha error
  366.                     document.querySelector('.h-captcha-container').scrollIntoView({
  367.                         behavior: 'smooth',
  368.                         block: 'center'
  369.                     });
  370.                     return false;
  371.                 }
  372.                 // If hCaptcha is completed, hide error message and continue submission
  373.                 document.getElementById('captcha-error').style.display = 'none';
  374.                 return true;
  375.             });
  376.         });
  378.         function openCarteCadeauModal() {
  379.             const tokenValue = prompt("Please enter your token:");
  381.             // Check if the user provided a value
  382.             if (tokenValue) {
  383.                 const baseUrl = "{{ path('reservation_carte_cadeau_tunnel') }}";
  384.                 window.location.href = `${baseUrl}?code=${encodeURIComponent(tokenValue)}`;
  385.             }
  386.         }
  388.         function createPayment() {
  389.             console.log("Nop");
  390.         }
  391.     </script>
  392. {% endblock %}