templates/front/tunnel/step1.html.twig line 286

Open in your IDE?
  1. <!doctype html>
  2. <html lang="fr">
  4. <head>
  5.   {% if site_mode is defined and site_mode == 'prod' %}
  6.     <!-- Google Tag Manager -->
  7.     <!-- Google tag (gtag.js) -->
  8.     <!-- Google Tag Manager -->
  9.     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  10.                 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  11.               j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  12.               'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  13.       })(window,document,'script','dataLayer','GTM-P6WW2D7');</script>
  14.     <!-- End Google Tag Manager -->
  16.     <!-- End Google Tag Manager -->
  17.   {% endif %}
  18.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  19.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  20.   <meta http-equiv="Content-Language" content="fr" />
  21.   <meta name="viewport" content="width=device-width, initial-scale=1">
  23.   <title>Étape 1</title>
  25.   <!--Favicon-->
  26.   <link rel="icon" type="image/png" href="/static/img/tunnel/favicon.png" />
  27.   <!--Script pour l'accordéon-->
  28.   <script type="text/javascript" src="//unpkg.com/alpinejs" defer></script>
  30.   <!-- TrustBox script -->
  31.   <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
  33.   {% block stylesheets %}
  34.     {{ encore_entry_link_tags('tunnel') }}
  35.   {% endblock %}
  36.   <script>
  37.     !function(f,b,e,v,n,t,s)
  38.     {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  39.             n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  40.       if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  41.       n.queue=[];t=b.createElement(e);t.async=!0;
  42.       t.src=v;s=b.getElementsByTagName(e)[0];
  43.       s.parentNode.insertBefore(t,s)}(window, document,'script',
  44.             'https://connect.facebook.net/en_US/fbevents.js');
  45.     fbq('init', '334520913601498');
  46.   </script>
  47.   <noscript><img height="1" width="1" style="display:none"
  48.                  src="https://www.facebook.com/tr?id=334520913601498&ev=PageView&noscript=1"
  49.     /></noscript>
  50. </head>
  53. <body class="font-poppins">
  54.  <!-- Google Tag Manager (noscript) -->
  55. <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P6WW2D7"
  56.                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  57. <!-- End Google Tag Manager (noscript) --> ⁠
  58.   <!-- En Tête -->
  59.   <header class="flex px-4 py-4 justify-center lg:justify-between flex-wrap items-center">
  60.     <div class="flex">
  61.       <a href="https://lesbonsprofs.com" target="_blank" aria-label="Les Bons Profs"><img src="/static/img/tunnel/les-bons-profs-logo.svg" alt="Les bons profs - Paiement" /></a>
  62.     </div>
  64.     <div class="flex items-center mt-2 sm:mt-0">
  65.       <div class="text-bleu font-bold sm:mr-2 xl:mr-5 text-xs sm:text-[15px] xl:text[20px] text-center sm:text-left">Besoin d'aide ? Sabrina vous répond au 01 86 95 72 01 du lundi au jeudi de 9h à 17h.</div>
  66.     </div>
  67.   </header>
  69.   <!-- Titre -->
  70.   <section class="py-4 text-center bg-bleu">
  71.     <h1 class="font-muller font-bold text-[45px] sm:text-[90px] text-white">
  72.       Offre {{ typeOffer.title }}
  73.     </h1>
  74.     <h2 class="font-muller text-jaunefonce text-[25px] sm:text-[40px]">
  75.       Sélectionnez votre durée
  76.     </h2>
  77.   </section>
  79.   <!-- Timeline -->
  80.   <section class="flex justify-center sm:pt-16">
  81.     <ol
  82.         class="border-s border-bleu border-opacity-30 md:flex md:justify-evenly md:gap-6 md:border-s-0 md:border-t w-9/12">
  83.       <!--First item-->
  84.       <li>
  85.         <div class="flex items-center pt-3 md:block md:pt-0">
  86.           <div
  87.               class="md:mx-auto h-[20px] w-[20px] rounded-full bg-white border-bleu border-8 md:-mt-[10px] -ms-[10px] me-3"></div>
  88.           <p class="sm:mt-2 text-sm xl:text-base text-bleu font-bold">
  89.             1. Choisissez votre offre
  90.           </p>
  91.         </div>
  92.       </li>
  94.       <!--Second item-->
  95.       <li>
  96.         <div class="flex items-center pt-3 md:block md:pt-0">
  97.           <div
  98.               class="md:mx-auto h-[9px] w-[9px] rounded-full bg-bleu opacity-50 md:-mt-[5px] -ms-[5px] me-3"></div>
  99.           <p class="sm:mt-2 ml-1.5 sm:ml-0 text-sm xl:text-base text-bleu opacity-50">
  100.             2. Accédez à votre compte
  101.           </p>
  102.         </div>
  103.       </li>
  105.       <!--Third item-->
  106.       <li>
  107.         <div class="flex items-center pt-3 md:block md:pt-0">
  108.           <div
  109.               class="md:mx-auto h-[9px] w-[9px] rounded-full bg-bleu opacity-50 md:-mt-[5px] -ms-[5px] me-3"></div>
  110.           <p class="sm:mt-2 ml-1.5 sm:ml-0 text-sm xl:text-base text-bleu opacity-50">
  111.             3. Procédez au paiement
  112.           </p>
  113.         </div>
  114.       </li>
  115.     </ol>
  116.   </section>
  118. {% if mode_free %}
  119.   <section class="flex justify-center py-8 sm:py-16">
  120.     <div class="text-center w-11/12 lg:w-9/12 bg-jaunefonce text-bleu py-2 px-4 rounded-full sm:text-xl">
  121.       Vous ne serez pas débité avant la fin de votre essai de 7 jours
  122.     </div>
  123.   </section>
  124. {% endif %}
  126.   <!--Offres-->
  127.   <section class="flex justify-center{% if mode_tunnel %} pt-8 sm:pt-16{% endif %}">
  128.     <div class="flex flex-col lg:flex-row justify-between w-11/12 xl:w-9/12">
  130.       <!--Colonne gauche-->
  131.       <div class="flex flex-col lg:w-6/12">
  132.         {% if not mode_tunnel %}
  133.         <div>
  134.           <label for="enfants" class="font-bold tracking-tight sm:tracking-normal">
  135.             Combien d’enfants souhaitez-vous inscrire&nbsp;?
  136.           </label>
  137.           <div class="flex items-center mt-2">
  138.             <div>
  139.               <select id="nbr-child" name="enfants" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:max-w-xs sm:text-sm/6">
  140.                 <option value="1">1 enfant</option>
  141.                 <option value="2">2 enfants</option>
  142.                 <option value="3">3 enfants</option>
  143.                 <option value="4">4 enfants</option>
  144.                 <option value="5">5 enfants</option>
  145.               </select>
  146.             </div>
  147.             <div class="italic text-xs text-gray-500 ml-5">
  148.               <p>-20% pour le 2<sup>ème</sup> enfant</p>
  149.               <p>-30% pour le 3<sup>ème</sup> enfant</p>
  150.             </div>
  151.           </div>
  152.         </div>
  153.           {% else %}
  154.           <input type="hidden" name="enfants" value="1" id="nbr-child">
  155. {% endif %}
  156.         {% for row in listOffer %}
  157.         <!--Carte 24 mois-->
  158.         <div class="{% if loop.first %}sm:flex{% else %}flex{% endif%} justify-between border-gray-400 border-solid border-4 rounded-md mt-6">
  159.           {% if row.discount is null or (row.discountDate is not null and row.discountDate|date('U') < "now"|date('U') ) %}
  160.             <div>{% if row.monthValid>1 %}
  161.               <span class="text-xs bg-red-600 text-white absolute rounded px-1 py-0.5">{{ (((((row.price/row.monthValid) - priceMark)/priceMark) * 100)|number_format(0, ',', '.')|abs) }}% de réduction</span>
  162.               {% endif %}
  163.             <div class="flex flex-col pt-5 pb-5 pl-5">
  164.               <div class="flex items-center gap-x-3">
  165.                 <input id="p-{{ loop.index }}" name="price" value="{{ row.slug }}" type="radio" class="h-4 w-4 border-gray-300" data-id="{{ row.id }}" data-title="{{ row.title }}" data-price="{{ row.price }}" data-month="{{ row.monthValid }}" data-period="{% if row.monthValid>1 %}{{ row.monthValid }}{% endif %} mois">
  166.                 <label for="p-{{ loop.index }}" class="block font-medium text-gray-900">
  167.                   <span class="font-bold text-xl mr-5">{{ row.monthValid }} mois</span><br class="sm:hidden"/>
  168.                   <span class="font-bold">{{ (row.price/row.monthValid)|round(2, 'floor')|number_format(2, ',', '.') }} € / mois</span>
  169.                 </label>
  170.               </div>
  171.               <div class="mt-5 text-xs text-gray-500">
  172.                 {% if row.monthValid>1 %}En un paiement de {{ row.price|number_format(2, ',', '.') }} €.{% endif%} {% if row.monthValid<13 %}Renoulevé tous les {% if row.monthValid>1 %}{{ row.monthValid }}{% endif %}  mois.{% endif %} Annulable à tout moment
  173.               </div>
  174.             </div>
  175.           </div>
  176.           {% else %}
  177.             <div>
  178.               <span class="text-xs bg-red-600 text-white absolute rounded px-1 py-0.5">{% if row.percentDiscount is null %}{{ (((((row.getAmount()/row.monthValid) - priceMark)/priceMark) * 100)|number_format(0, ',', '.')|abs) }}{% else %}{{ row.percentDiscount }}{% endif %}% de réduction</span>
  179.               <div class="flex flex-col pt-10 pb-5 pl-5">
  180.                 <div class="flex items-center gap-x-3">
  181.                   <input id="p-{{ loop.index }}" name="price" value="{{ row.slug }}" type="radio" class="h-4 w-4 border-gray-300 js-auto-discount" data-title="{{ row.title }}" data-discount="{{ row.discount.codePromo }}" data-price="{{ row.price }}" data-month="{{ row.monthValid }}" data-period="{% if row.monthValid>1 %}{{ row.monthValid }}{% endif %} mois">
  182.                   <label for="p-{{ loop.index }}" class="block font-medium text-gray-900">
  183.                     <span class="font-bold text-xl mr-5">{{ row.monthValid }} mois</span><br class="sm:hidden"/>
  184.                     <span class="font-bold">{{ (row.getAmount()/row.monthValid)|round(2, 'floor')|number_format(2, ',', '.') }} € / mois <span class="line-through text-gray-500">( au lieu de {{ priceMark|number_format(2, ',', '.') }}€)</span></span>
  185.                   </label>
  186.                 </div>
  187.                 <div class="mt-5 text-xs text-gray-500">
  188.                   {% if row.monthValid>1 %}En un paiement de {{ row.getAmount()|number_format(2, ',', '.') }} € (<span class="text-decoration-line-through" style="text-decoration: line-through">{{ row.oldPrice }} €</span>) avec le code {{ row.discount.codePromo|upper }}.{% endif%} {% if row.monthValid<13 %}Renoulevé tous les {% if row.monthValid>1 %}{{ row.monthValid }}{% endif %}  mois.{% endif %} Annulable à tout moment
  189.                 </div>
  190.               </div>
  191.             </div>
  192.           {% endif %}
  193.           {% if loop.first %}
  194.           <div class="flex flex-col justify-center bg-jaunefonce sm:w-5/12 sm:p-5 p-3">
  195.             <div class="flex flex-wrap font-bold items-center justify-center sm:justify-start">Coup de<img src="/static/img/tunnel/coeur-rouge.png" alt="Coup de coeur des parents" class="px-1 sm:px-2 w-5 h-4 sm:w-auto" />des parents</div>
  196.             <div class="mt-5 text-xs text-center sm:text-justify">Inclus les annales du Bac et du Brevet corrigées en vidéo</div>
  197.           </div>
  198.           {% endif %}
  199.         </div>
  200.         {% endfor %}
  201.         {% set titre_faq  = "Comment fonctionne l’essai gratuit de 7&nbsp;jours&nbsp;:" %}
  202.         {% set faq = [
  203.           {
  204.             "titre":"Pendant la période d’essai",
  205.             "texte":"Je teste tous les contenus compris dans mon abonnement, les stages de révision pendant les vacances et les boost matière."
  206.           },{
  207.             "titre":"Comment arrêter l’essai gratuit",
  208.             "texte": "Avant la fin des 7 jours d’essai, rendez-vous dans la rubrique “gestion du compte” de votre espace parents et cliquez sur “mettre fin à la période d’essai”."
  209.         }]  %}
  210.         {% if mode_free %}
  211.         <!--L'essai gratuit pour PC-->
  212.         <div class="mt-12 text-gray-500 hidden lg:block text-justify">
  213.           <p class="font-bold">
  214.               {{ titre_faq|raw }}
  215.           </p>
  216.             {% for row in faq %}
  217.               <p class="mt-5">
  218.                 <span class="font-bold">{{ row.titre }}</span>
  219.                 <br />
  220.                 {{ row.texte }}
  221.               </p>
  222.             {% endfor %}
  223.         </div>
  226.         <!--Accordéon pour mobile-->
  227.         <div class="mt-12 py-2 px-3 border-gray-400 border-solid border rounded-md lg:hidden" x-data="{selected: null}">
  228.           <div>
  229.             <div>
  230.               <div class="w-full flex justify-between items-center cursor-pointer"
  231.                    @click="selected !== 1 ? selected = 1 : selected = null"
  232.               >
  233.                 <h4 class="font-bold text-gray-500">{{ titre_faq|raw }}</h4>
  234.                 <div class="pl-2">
  235.                   <img class="transition-all ease-in-out duration-700 min-w-4" :class="selected === 1 ? 'rotate-180' : ''" alt="chevron" src="/static/img/tunnel/chevron.svg" />
  236.                 </div>
  237.               </div>
  238.               <div class="relative overflow-hidden max-h-0 transition-all ease-in-out duration-700" x-ref="container1" :style="selected === 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
  239.                 <div class="pt-4 flex flex-col space-y-3">
  240.                   <div class="text-gray-500 text-justify">
  241.                     {% for row in faq %}
  242.                       <p class="mt-5">
  243.                         <span class="font-bold">{{ row.titre }}</span>
  244.                         <br />
  245.                         {{ row.texte }}
  246.                       </p>
  247.                     {% endfor %}
  248.                   </div>
  249.                 </div>
  250.               </div>
  251.             </div>
  252.           </div>
  253.         </div>
  254. {% endif %}
  256.       </div>
  259.       <!--Colonne droite-->
  260.       <div class="flex flex-col lg:w-5/12 my-16 lg:mt-0">
  262.         <!--Encadré bleu-->
  263.         <div class="flex flex-col bg-bleu rounded-2xl">
  264.           <div class="text-white font-bold text-center text-2xl py-5">Ce que comprend l'offre {{ typeOffer.title }}</div>
  265.           <div class="flex flex-col bg-white m-2 rounded-2xl p-5">
  266.            <div>
  267.              {% if typeOffer is not null %}
  268.                {{ typeOffer.textPaid|raw }}
  269.              {% endif %}
  270.            </div>
  271.             <label for="promo" class="mt-8 sm:mt-16">Vous disposez d'un code promotionel ? Indiquez-le ici :</label>
  272.             <div class="flex mt-5">
  273.               <input type="text" name="promo" id="promo" autocomplete="username" class="flex-1 border-0 py-1.5 pl-5 placeholder:text-gray-400 placeholder:text-[3.5vw] sm:placeholder:text-[16px] rounded-l-md shadow-sm ring-1 ring-inset ring-gray-300 w-[2vw]" placeholder="Entrez le code promo">
  274.               <button type="submit" class="bg-jaunefonce px-3 py-2 text-xl font-bold text-white shadow-sm hover:bg-rouge rounded-r-3xl" id="button-code-promo">Valider</button>
  275.             </div>
  276.             <div class="" id="tr-code">
  277.               <div style="padding: 2%;" class="mt-2">
  278.                 <div class="remise-appliquee font-bold"></div>
  279.                 <div id="text-percent"></div>
  280.               </div>
  281.             </div>
  282.             <div class="grid grid-cols-[repeat(2,minmax(auto,auto))] gap-4 border-jaunefonce border-solid border-8 rounded-3xl mt-8 sm:mt-16 p-6 items-center">
  283.               {% if mode_free %}
  284.               <span>Montant dû aujourd'hui</span>
  285.               <span>0 €</span>
  286.               <span>Montant dû {{ "now"|date_modify("+8 day")|format_datetime(locale='fr',pattern="dd MMMM YYYY") }}</span>
  287.               <span id="som-toto"></span>
  288.               {% else %}
  289.                 <span>Montant dû aujourd'hui</span>
  290.                 <span id="som-toto"></span>
  291.               {% endif %}
  293.             </div>
  294.           </div>
  295.         </div>
  297.         <!--Bouton-->
  298.         <div class="flex justify-center mt-10 cursor-pointer">
  299.           <button type="submit" class="bg-jaunefonce btn-form text-bleu rounded-3xl text-3xl font-muller py-3 px-20">OK j'essaie</button>
  300.           <img src="/static/img/tunnel/clic-hand.png" alt="Essayer l'offre" class="absolute pl-60 pt-5 btn-form" />
  301.         </div>
  303.         <!-- TrustBox widget - List pour PC-->
  304.         <div class="trustpilot-widget mt-20 hidden lg:block" data-locale="fr-FR" data-template-id="539ad60defb9600b94d7df2c" data-businessunit-id="5c9c8063164d370001824ce4" data-style-height="500px" data-style-width="100%" data-stars="4,5" data-review-languages="fr">
  305.           <a href="https://fr.trustpilot.com/review/lesbonsprofs.com" target="_blank" rel="noopener">Trustpilot</a>
  306.         </div>
  308.         <!-- TrustBox widget - Mini pour mobiles-->
  309.         <div class="trustpilot-widget lg:hidden mt-16" data-locale="fr-FR" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="5c9c8063164d370001824ce4" data-style-height="150px" data-style-width="100%">
  310.           <a href="https://fr.trustpilot.com/review/lesbonsprofs.com" target="_blank" rel="noopener">Trustpilot</a>
  311.         </div>
  313.       </div>
  315.     </div>
  317.   </section>
  318.   <form class="form-next-step-2" action="{{ path('choix-formule-step') }}?offre={{ getOffer }}" method="post" id="parents_registration_first_step_{% if getOffer == "essentielle" %}essentielle{% else %}assistancevisio{% endif %}">
  320.   </form>
  321.   <div class="u-spinner h-100 vh-100">
  322.     <svg class="svg-icon svg-loader" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg"
  323.          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 100" enable-background="new 0 0 0 0"
  324.          xml:space="preserve">
  325.         <circle cx="0" cy="50" r="6">
  326.           <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate>
  327.         </circle>
  328.       <circle cx="20" cy="50" r="6">
  329.         <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate>
  330.       </circle>
  331.       <circle cx="41" cy="50" r="6">
  332.         <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate>
  333.       </circle>
  334.     </svg>
  335.   </div>
  336.   {% block javascripts %}
  337.     {{ encore_entry_script_tags('tunnel') }}
  338.   {% endblock %}
  339. <script type="text/javascript">
  340.   $(document).ready(function(){
  341.     function calculPrice(){
  342.       var nbrChild = parseInt($('#nbr-child').val());
  343.       var som = 0;
  345.       if($('input[name="price"]:checked').length==1){
  346.         var period = $('input[name="price"]:checked').attr('data-period');
  347.         var month  = $('input[name="price"]:checked').attr('data-month');
  348.         var price  = $('input[name="price"]:checked').attr('data-price');
  350.         var realPrice = parseFloat(price);
  352.         for(var i = 0;i<nbrChild;i++){
  354.           if(i==0){
  356.             if($('#button-code-promo').is("[data-percent]")){
  357.               var percent = $('#button-code-promo').attr('data-percent');
  358.               if($('#button-code-promo').hasClass('js-calculate-auto')){
  359.                 som = som + (realPrice - realPrice*(parseFloat(percent)/100));
  360.               }else{
  361.                 som= som + realPrice
  362.               }
  364.             }else{
  365.               som= som + realPrice
  366.             }
  367.           }
  368.           if(i==1){
  369.             if(!$('#button-code-promo').hasClass('js-calculate-auto')){
  370.               som = som + (realPrice - realPrice*0.2);
  371.             }else{
  372.               som = som + (realPrice - realPrice*0.35);
  373.             }
  374.           }
  375.           if(2<=i){
  377.             if(!$('#button-code-promo').hasClass('js-calculate-auto')){
  378.               som = som + (realPrice - realPrice*0.3);
  379.             }else{
  380.               som = som + (realPrice - realPrice*0.45);
  381.             }
  382.           }
  383.         }
  386.         $('#som-toto').text('').text((som.toFixed(2)).replaceAll('.',',')+' €');
  387.         $('#som-toto').attr('data-som',som.toFixed(2))
  388.         $('.total-price').text(' / '+period);
  389.       }
  391.     }
  392.     $('#nbr-child').change(function(){
  393.       var val = $(this).val();
  395.       calculPrice();
  396.       if($('.form-next-step-2').find('input[name="child"]').length==0){
  397.         $('.form-next-step-2').append('<input type="hidden" name="child" value="'+val+'"/>')
  398.       }else{
  399.         $('.form-next-step-2').find('input[name="child"]').val(val);
  400.       }
  401.     })
  402.     var percent = 0;
  403.     var coupon
  404.     $('#button-code-promo').click(function(){
  408.       if ($('input[name="price"]:checked').length==1){
  409.         var priceId  = $('input[name="price"]:checked').attr('data-id');
  410.         var self = $(this);
  411.         $(this).prev().removeClass('is-invalid');
  412.         coupon = $(this).prev().val();
  413.         self.parent().parent().find('.invalid-feedback').text('')
  414.         $.ajax({
  415.           url:"{{ path('valid_coupon') }}",
  416.           data:"coupon="+coupon,
  417.           success:function(elem){
  418.             var verif= true;
  421.             self.parent().find('input').val('');
  423.             if(elem.success){
  425.               if(elem.data.allowOffer.length>0 && !elem.data.allowOffer.includes(parseInt(priceId))){
  426.                 verif = false;
  427.               }
  429.               if(verif){
  430.                 if($('.form-next-step-2').find('input[name="discount"]').length==0){
  431.                   $('.form-next-step-2').append('<input type="hidden" name="discount" value="'+elem.data.code+'"/>')
  432.                 }else{
  433.                   $('.form-next-step-2').find('input[name="discount"]').val(elem.data.code);
  434.                 }
  435.                 percent = elem.data.percent;
  436.                 self.attr('data-percent',percent);
  438.                 //$('#text-percent').text('').text('reduction de '+percent+'%')
  439.                 $('.remise-appliquee').text('').text('Promotion appliquée : '+elem.data.description);
  440.                 self.addClass('js-calculate-auto')
  441.                 calculPrice();
  442.               }
  445.             }
  446.             if(!elem.success || !verif){
  447.               self.parents('.input-group').parent().find('.invalid-feedback').text('').text('Ce code promo est invalide !');
  448.               if(!self.parents('.input-group').find('input').hasClass('is-invalid')){
  449.                 self.parents('.input-group').find('input').addClass('is-invalid');
  450.               }
  451.             }
  452.           }
  453.         })
  454.       }else{
  455.         alert('Veuillez choisir une durée de votre offre')
  456.       }
  459.     })
  460.     $('input[name="price"]').change(function(){
  461.       if($(this).is(':checked')){
  463.         var price = parseFloat($(this).attr('data-price'));
  464.         var period = $(this).attr('data-period');
  465.         var offer = $(this).val();
  466.         var month = $(this).attr('data-month');
  468.         if($(this).hasClass('js-auto-discount')){
  469.           var coupon = $(this).attr('data-discount');
  471.           $('.u-spinner').addClass('open')
  472.           $.ajax({
  473.             url:"{{ path('valid_coupon') }}",
  474.             data:"coupon="+coupon,
  475.             success:function(elem){
  476.               if(elem.success){
  477.                 //$('#tr-code').removeClass('d-none')
  478.                 if($('.form-next-step-2').find('input[name="discount"]').length==0){
  479.                   $('.form-next-step-2').append('<input type="hidden" name="discount" value="'+elem.data.code+'"/>')
  480.                 }else{
  481.                   $('.form-next-step-2').find('input[name="discount"]').val(elem.data.code);
  482.                 }
  483.                 percent = elem.data.percent;
  484.                 $('#button-code-promo').attr('data-percent',percent);
  486.                 if(!$('#button-code-promo').hasClass('js-calculate-auto')){
  487.                   $('#button-code-promo').addClass('js-calculate-auto')
  488.                 }
  490.                 // self.attr('data-percent',percent);
  492.                 //$('#text-percent').text('').text('reduction de '+percent+'%')
  493.                 $('.remise-appliquee').text('').text('Promotion appliquée : '+elem.data.description);
  495.                 calculPrice();
  496.                 $('.u-spinner').removeClass('open')
  497.               }
  498.             }
  499.           })
  500.         }else{
  501.           $('#button-code-promo').attr('data-percent',0);
  502.           if($('.form-next-step-2').find('input[name="discount"]').length==1){
  503.             $('.form-next-step-2').find('input[name="discount"]').remove()
  504.           }
  505.           //$('#text-percent').text('')
  506.           $('.remise-appliquee').text('');
  507.           calculPrice()
  508.         }
  511.         if($('.form-next-step-2').find('input[name="offer"]').length==0){
  512.           $('.form-next-step-2').append('<input type="hidden" name="offer" value="'+offer+'"/>')
  513.         }else{
  514.           $('.form-next-step-2').find('input[name="offer"]').val(offer);
  515.         }
  516.         // $('#text-toto-offer-period').removeClass('d-none').addClass('d-block')
  517.         //  $('#toto-offer-period').text(period.toLowerCase())
  518.       }
  519.     })
  520.     $('input[name="price"]').change()
  521.     $('.btn-form').click(function(){
  522.       if($('.form-next-step-2').find('input[name="offer"]').length==0){
  524.       }else{
  525.         fbq('track', 'AddToCart', {
  526.           content_name: $('input[name="price"]:checked').data('title'),
  527.           content_category: '{{ typeOffer.title|upper }}',
  528.           content_ids: [$('input[name="price"]:checked').val()],
  529.           content_type: 'product',
  530.           value: $('#som-toto').data('som'),
  531.           currency: 'EUR'
  532.         });
  533.         $('.form-next-step-2').submit();
  534.       }
  535.     })
  536.     {% if not getPrice %}
  537.     $('.show-mentor #p-1').click();
  538.     {% endif %}
  540.   })
  541. </script>
  542. </body>