templates/pro/nos-tarifs-new.html.twig line 1

Open in your IDE?
  1. {% extends "/pro/base2.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.         <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick.css" />
  6.         <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick-theme.css" />
  7.         <link rel="stylesheet" href="/assets/css/pro/tarif.css">
  8.     <style>
  9.    .anual-price{
  10.     font-size: 35px;
  11. }
  12. .last-btn {
  13.     position: absolute;
  14.     bottom: -10px;
  15.     left: 0;
  16.     right: 0;
  17. }
  18. span.red-barre {
  19.     font-size: 25px;
  20.     position: relative;
  21. }
  22. span.red-barre:before {
  23.     content: "";
  24.     width: 100%;
  25.     height: 2px;
  26.     background: #f54848ad;
  27.     position: absolute;
  28.     top: 50%;
  29. }
  30.         .card img {margin: 0 auto; }
  31.         a.btn{font-size: 20px; padding: 5px 20px; max-width: 160px; margin: 10px auto 0;}
  32.         .card {
  33.     text-align: center;
  34.     padding: 30px 0px 0;
  35.     border-radius: 10px;
  36.     height: 100%;
  37.     margin-top: 30px;
  38.     background: linear-gradient(180deg, rgb(255 255 255) 0%, rgba(208,250,241,1) 100%);
  39. }
  40.         .titre-card {font-weight: 600; font-size: 20px;}
  41.         a.underlined {font-weight: 600; font-size: 18px; padding: 0 0 10px;}
  42. .card-prix {
  43.     background: #F2FDFF;
  44.     padding: 10px;
  45.     display: flex;
  46.     flex-direction: column;
  47.     justify-content: space-between;
  48.     height: 280px;
  49.     padding: 30px;
  50.     position: relative;
  51. }
  52.         .prix{ display : block !important ; color:var(--couleur-bleu-principale);font-weight: 600;font-size:40px; line-height:1 margin:0;}
  53.         .prix sub{ font-size:20px;}
  54.         .tarif{  display: flex; align-items: center; column-gap: 20px; margin-top: 20px;  flex-wrap: wrap;}
  55.         .prixafter {font-size: 25px;  margin-top: 5px;}
  56.         .puce_tab{ font-weight:600; margin-bottom:25px}
  57.         .prixafterMini {font-size: 16px; background: #F2FDFF; margin: 0; padding:0 5px; }
  58.         .prixafterMini sub {font-size: 10px; }
  59.         .timePrx{font-size:15px;}
  62. @media only screen and (max-width: 1199px){
  63.            .pricing-list {
  65.            flex-direction: column;
  66.       }
  67.       .info-price {
  69.     grid-template-columns: 57% 45%;
  70. }
  71. span.no-engagement {
  73.     margin-left: 44px;
  74. }
  75. .prix sub {
  76.     font-size: 14px;
  77. }
  78. .info-price label {
  80.     text-align: left;
  82. }
  84. }
  85.     </style>
  86. {% endblock %}
  88. {% block javascripts %}
  89.     {{ parent() }}
  90.     <script type="text/javascript" src="/assets/lib/slick-1.8.1/slick.js"></script>
  91.     <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  93.     <script>
  94.         document.addEventListener("DOMContentLoaded", function() {
  95.             const radioButtons = document.querySelectorAll('input[type="radio"][name="duration-1"]');
  96.             const nbAudioprothMonthInput = document.getElementById("nbAudioprothMonth");
  97.             const priceCol1 = document.getElementById("priceCol1");
  98.             const subtitlePriceCol1 = document.getElementById("subtitlePriceCol1");
  99.             const subtitleNextPriceCol1 = document.getElementById("subtitleNextPriceCol1");
  100.             const baseMonthlyPrice = 75;
  101.             const baseMonthlyPriceNoDiscount = 89;
  102.             const additionalPrice = 19.90;
  104.             let selectionData = [];
  106.             function updateCardContent(option) {
  108.                 const selectedLabel = document.querySelector(`label[for="${option}"]`);
  109.                 if (option === 'centre') {
  110.                     selectedLabel.style.borderTopRightRadius = '0px';
  111.                     selectedLabel.style.borderBottomRightRadius = '0px';
  112.                     document.getElementById("subtitlePriceCol1").textContent = "facturés une fois par an (900€/an)";
  113.                     document.getElementById("subtitleNextPriceCol1").textContent = "pendant 12 mois puis 1000€/an";
  114.                     document.getElementById("subtitlePriceColSwitch").textContent = "par centre supplémentaire, facturé une fois par an.";
  115.                     document.getElementById("nbCentreAudio").textContent = "Nombre de centre(s) en plus";
  116.                     document.getElementById("textTitleCol2").textContent = "Gérez plusieurs centres auditifs";
  117.                     document.getElementById("textContentCol2").textContent = "Si vous êtes un audioprothésiste travaillant dans plusieurs lieux, My Audio vous aide à organiser votre agenda pour chaque centre, afin de gérer facilement vos rendez-vous dans tous vos lieux d’exercice.";
  118.                 } else if (option === 'audio') {
  119.                     selectedLabel.style.borderTopLeftRadius = '0px';
  120.                     selectedLabel.style.borderBottomLeftRadius = '0px';
  121.                     selectedLabel.style.borderTopRightRadius = '50em';
  122.                     selectedLabel.style.borderBottomRightRadius = '50em';
  123.                     document.getElementById("subtitlePriceCol1").textContent = "facturés une fois par an (900€/an)";
  124.                     document.getElementById("subtitleNextPriceCol1").textContent = "pendant 12 mois puis 1000€/an";
  125.                     document.getElementById("subtitlePriceColSwitch").textContent = "par audioprothésiste supplémentaire, facturé une fois par an.";
  126.                     document.getElementById("nbCentreAudio").textContent = "Nombre d'audio en plus";
  127.                     document.getElementById("textTitleCol2").textContent = "Gérez plusieurs audio dans un centre";
  128.                     document.getElementById("textContentCol2").textContent = "Si vous dirigez un centre auditif avec plusieurs audioprothésistes, My Audios crée des agendas spécifiques pour chacun, simplifiant la gestion des rendez-vous.";
  129.                 }
  130.             }
  132.        /* const inputField = document.getElementById("nbAudioprothMonth");
  133.         const switchOption = document.querySelector(".switch-container");
  134.         switchOption.addEventListener("click", function() {
  135.         inputField.value = 0;
  136.         });*/
  138.             function handleRadioClick(option) {
  139.                 
  140.                 updateCardContent(option);
  141.                 updateSelectionData();
  142.             }
  144.             radioButtons.forEach(radio => {
  145.                 radio.addEventListener("change", function(event) {
  146.                     handleRadioClick(event.target.value);
  147.                 });
  148.             });
  150.             const selectedRadio = document.querySelector('input[type="radio"][name="duration-1"]:checked');
  151.             if (selectedRadio) {
  152.                 handleRadioClick(selectedRadio.value);
  153.             }
  155.             function updatePrices() {
  156.                 
  157.                 const nbAudioprothMonth = parseInt(nbAudioprothMonthInput.value, 10) || 0;
  158.                 let monthlyPrice = baseMonthlyPrice + (nbAudioprothMonth * additionalPrice);
  159.                 let monthlyPriceNoDiscount = baseMonthlyPriceNoDiscount + (nbAudioprothMonth * additionalPrice);
  160.                 let annualPrice = (monthlyPrice * 12).toFixed(2);
  161.                 let annualNextPrice = (monthlyPrice * 12 + 100).toFixed(2);
  162.                 priceCol1.textContent = monthlyPrice.toFixed(2);
  163.                 subtitlePriceCol1.textContent = `facturés une fois par an (${annualPrice}€/an)`;
  164.                 subtitleNextPriceCol1.textContent = `pendant 12 mois puis ${annualNextPrice}€/an`;
  165.                 updateSelectionData();
  166.             }
  168.             function updateSelectionData() {
  169.     const selectedType = document.querySelector('input[type="radio"][name="duration-1"]:checked').value;
  171.     const nbAudioprothMonth = parseInt(nbAudioprothMonthInput.value, 10) || 0;
  172.     const monthlyPrice = parseFloat(priceCol1.textContent);
  173.     const monthlyPriceNoDiscount = baseMonthlyPriceNoDiscount + (nbAudioprothMonth * additionalPrice);
  174.     const monthlyPriceNoDiscountNextYear = baseMonthlyPriceNoDiscount + (nbAudioprothMonth * additionalPrice) + 10;
  175.     const annualPrice = (monthlyPrice * 12).toFixed(2);
  176.     const annualPriceNoDiscount = (monthlyPriceNoDiscount * 12).toFixed(2);
  178.     const isAnnual = document.querySelector(".switch-option.selected").getAttribute("data-option") === "annual";
  180.     const option = document.querySelector('input[type="radio"][id="centre"]');
  182.     if (isAnnual) {
  183.         const anuelAdditional = nbAudioprothMonth * 238.8;
  185.         const annualMonthlyPrice = baseMonthlyPrice + (nbAudioprothMonth * additionalPrice);
  186.         const annualTotalPrice = (annualMonthlyPrice * 12).toFixed(2);
  187.         const annualNextTotalPrice = (annualMonthlyPrice * 12 + 100).toFixed(2);
  189.         priceCol1.textContent = annualMonthlyPrice.toFixed(2);
  190.         subtitlePriceCol1.textContent = `facturés une fois par an (${annualTotalPrice}€/an)`;
  191.         subtitleNextPriceCol1.textContent = `pendant 12 mois puis ${annualNextTotalPrice}€/an`;
  193.         if (option && option.checked) {
  194.             document.getElementById("subtitlePriceColSwitch").innerHTML = `par centre supplémentaire,<br>facturés une fois par an (${anuelAdditional.toFixed(1)}€/an)`;
  195.         } else {
  196.             document.getElementById("subtitlePriceColSwitch").innerHTML = `par audioprothésiste supplémentaire,<br>facturés une fois par an (${anuelAdditional.toFixed(1)}€/an)`;
  197.         }
  199.  
  200.                 const currentSelection = {
  201.                     type: selectedType,
  202.                     pricePerMonth: monthlyPrice.toFixed(2),
  203.                     annualPrice: annualPrice,
  204.                     quantity: nbAudioprothMonth,
  205.                     recurring: isAnnual ? "annual" : "monthly",
  206.                     isCda: false
  207.                 };
  209.                 selectionData = [currentSelection];
  210.                 console.log(selectionData);
  212.     } else {
  214.         subtitleNextPriceCol1.textContent = `pendant 12 mois puis ${monthlyPriceNoDiscountNextYear.toFixed(2)}€/mois`;
  216.         priceCol1.textContent = monthlyPriceNoDiscount.toFixed(2);
  217.         document.getElementById("subtitlePriceCol1").textContent = "facturé mensuellement, sans engagement.";
  219.         if (option && option.checked) {
  220.             document.getElementById("subtitlePriceColSwitch").innerHTML = "par centre supplémentaire,<br>facturé mensuellement, sans engagement.";
  221.         } else {
  222.             document.getElementById("subtitlePriceColSwitch").innerHTML = "par audioprothésiste supplémentaire,<br>facturé mensuellement, sans engagement.";
  223.         }
  225.          
  226.                 const currentSelection = {
  227.                     type: selectedType,
  228.                     pricePerMonth: monthlyPriceNoDiscount.toFixed(2),
  229.                     annualPrice: annualPriceNoDiscount,
  230.                     quantity: nbAudioprothMonth,
  231.                     recurring: isAnnual ? "annual" : "monthly",
  232.                     isCda: false
  233.                 };
  235.                 selectionData = [currentSelection];
  236.                 console.log(selectionData);
  237.     }
  238.                
  239.             }
  241.             document.querySelector(".button-plusMonth").addEventListener("click", function() {
  242.                 nbAudioprothMonthInput.stepUp();
  243.                 updatePrices();
  244.             });
  245.             document.querySelector(".button-minusMonth").addEventListener("click", function() {
  246.                 nbAudioprothMonthInput.stepDown();
  247.                 updatePrices();
  248.             });
  250.             nbAudioprothMonthInput.addEventListener("input", updatePrices);
  252.            // updatePrices();
  254.             function redirectToInscription() {
  255.                 console.log(selectionData);
  256.                 if (selectionData && selectionData[0].type && selectionData[0].pricePerMonth && selectionData[0].quantity >= 0) {
  257.                     const data = {
  258.                         type: selectionData[0].type,
  259.                         price: selectionData[0].pricePerMonth,
  260.                         annualPrice: Math.round(parseFloat(selectionData[0].pricePerMonth) * 12),
  261.                         quantity: selectionData[0].quantity,
  262.                         recurring: selectionData[0].recurring,
  263.                         isCda: selectionData[0].isCda
  264.                     };
  266.                     fetch('/pro/handle-inscription', {
  267.                         method: 'POST',
  268.                         headers: {
  269.                             'Content-Type': 'application/json',
  270.                             'X-Requested-With': 'XMLHttpRequest',
  271.                         },
  272.                         body: JSON.stringify(data),
  273.                     })
  274.                     .then(response => {
  275.                         if (!response.ok) {
  276.                             throw new Error('Échec de la requête : ' + response.statusText);
  277.                         }
  278.                         return response.json();
  279.                     })
  280.                     .then(data => {
  281.                         console.log('Réponse du serveur:', data);
  282.                         if (data.redirect_url) {
  283.                             window.location.href = data.redirect_url;
  284.                         } else {
  285.                             console.error('Aucune URL de redirection reçue.');
  286.                         }
  287.                     })
  288.                     .catch(error => {
  289.                         console.error('Erreur réseau ou serveur :', error);
  290.                     });
  291.                 } else {
  292.                     console.error("Les données de sélection sont invalides ou incomplètes.");
  293.                     console.log(selectionData);
  294.                 }
  295.             }
  297.             const btn = document.getElementById('btnInscription');
  298.             const btn2 = document.getElementById('btnInscription2');
  299.             if (btn || btn2) {
  300.                 btn.addEventListener("click", function() {
  301.                     console.log("Button clicked");
  302.                     redirectToInscription();
  303.                 });
  304.                 btn2.addEventListener("click", function() {
  305.                     console.log("Button clicked");
  306.                     redirectToInscription();
  307.                 });
  308.             } else {
  309.                 console.log("Button not found");
  310.             }
  312.             const switchContainer = document.querySelector(".switch-container");
  313.             const options = document.querySelectorAll(".switch-option");
  314.             const slider = document.createElement("div");
  316.             slider.classList.add("switch-slider");
  317.             switchContainer.appendChild(slider);
  318.             slider.style.width = '100%'
  320.             console.log("Slider ajouté au DOM :", slider);
  322.             const initialSelected = document.querySelector(".switch-option.selected");
  323.             const initialIndex = Array.from(options).indexOf(initialSelected);
  324.             slider.style.transform = `translateX(${initialIndex * 100}%)`;
  326.             console.log("Position initiale du slider :", slider.style.transform);
  328.             options.forEach((option, index) => {
  329.                 option.addEventListener("click", () => {
  330.                     options.forEach(opt => opt.classList.remove("selected"));
  331.                     option.classList.add("selected");
  332.                     slider.style.transform = `translateX(${index * 100}%)`;
  333.                     console.log("Position mise à jour :", slider.style.transform);
  334.                     updateSelectionData();
  335.                 });
  336.             });
  337.         });
  338.     </script>
  339. {% endblock %}
  343. {% block body %}
  344.   {{ parent() }}
  345. {% endblock %}
  347. {% block content %}
  348.   {{ parent() }}
  349. <div class="first-page-cda">
  350.     <section class="section-title">
  351.         <div class="container-parent">
  352.             <div class="container-left">
  353.                 <h3>Solution rentabilisée</h3>
  354.                 <h1>dès la 1ère vente</h1>
  355.                 <p>Générez des ventes et automatisez la croissance de vos centres</p>
  356.             </div>
  357.             <div class="container-right">
  358.                 <button class="btn btn-jaune-inverse" id="btnInscription">Je m'inscris maintenant</button>
  359.             </div>
  360.         </div>
  361.     </section>
  362.     <section class="recurring">
  363.          <div class="d-flex justify-content-center">
  364.             <div class="switch-container">
  365.                 <div class="switch-option selected" data-option="annual">
  366.                     <span>Paiement annuel</span><br>
  367.                     <span class="best-value">-15%</span>
  368.                 </div>
  369.                 <!--<div class="switch-option" data-option="monthly">
  370.                     <span>Paiement mensuel</span>
  371.                 </div>-->
  372.             </div>
  373.         </div>
  374.     </section>
  375.     <section class="section-tarif">
  376.         <div class="card-tarif">
  377.             <div class="container-header">
  378.                 <h4><b>Licence My Audio</b></h4>
  379.                 <h4>1 audio + 1 centre <b>inclu</b></h4>
  380.             </div>
  381.             <div class="container-card-content">
  382.                 <div class="container-middle">
  383.                     <div class="container-card-img">
  384.                         <img class="logo logopro" src="/assets/img/storage/pagesimages/calendar-pro.png" alt="My Audio calendar">
  385.                     </div>
  386.                     <div class="container-price-top">
  387.                         <p class="price">
  388.                             <span class="price" id="priceCol1">75</span>
  389.                             <span class="currency">EUR HT / mois</span>
  390.                         </p>
  391.                     </div>
  392.                     <div class="container-price-bottom">
  393.                         <p id="subtitlePriceCol1">facturés une fois par an (900€/an)</p>
  394.                     </div>
  395.                     <div class="container-price-bottom">
  396.                         <p id="subtitleNextPriceCol1">pendant 12 mois puis 1000€/an</p>
  397.                     </div>
  398.                 </div>
  400.                 <div class="container-price">
  401.                     <div class="container-remise-content">
  402.                         <div class="row-arg">
  403.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-calendar.png"  alt="picto d'un calendrier">
  404.                             <p>Prise de RDV en ligne</p>
  405.                         </div>
  407.                         <div class="row-arg">
  408.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-action.png"  alt="Picto d'une action avec un doigt">
  409.                             <p>Agenda en ligne</p>
  410.                         </div>
  412.                         <div class="row-arg">
  413.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-alarm.png"  alt="Picto d'une cloche">
  414.                             <p>SMS/Email de rappel rappels RDV</p>
  415.                         </div>
  417.                         <div class="row-arg">
  418.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-two.png"  alt="Picto du chiffre Deux">
  419.                             <p>Objectif 2 RDV/mois</p>
  420.                         </div>
  422.                         <div class="row-arg">
  423.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-share.png"  alt="Picto de partage de fichiers">
  424.                             <p>Partage de documents patients/audio</p>
  425.                         </div>
  427.                         <div class="row-arg">
  428.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-sync.png"  alt="Picto partage de documents">
  429.                             <p>Synchronisation Agenda</p>
  430.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-cosium.png"  style="width: 100px;" alt="Picto partage de documents">
  431.                         </div>
  432.                     </div>
  433.                 </div>
  434.             </div>
  435.         </div>
  437.         <div class="spacer-plus">
  438.             <img class="logo-picto-remise" src="/assets/img/pro/picto-plus.png"  alt="picto d'un calendrier">
  439.         </div>
  441.         <div class="card-tarif">
  442.            <div class="container-header">
  443.                 <h4>Ajoutez + d’audio ou de centre</h4>
  444.             </div>
  445.             <div class="pricing-switcher">
  446.                 <p class="fieldset">
  447.                     <input type="radio" name="duration-1" value="centre" id="centre" checked>
  448.                     <label for="centre">multi-centre</label>
  449.                     <input type="radio" name="duration-1" value="audio" id="audio">
  450.                     <label for="audio">multi-audio</label>
  451.                     <span class="switch"></span>
  452.                 </p>
  453.             </div>
  454.             <div class="container-card-content">
  455.                 <div>
  456.                     <div class="container-card-img">
  457.                         <img class="logo logopro" src="/assets/img/pro/multi-centre-audio.png" alt="My Audio calendar">
  458.                     </div>
  459.                     <div class="container-price-top">
  460.                         <p class="price">
  461.                             <span class="price" id="priceCol2">19,90</span>
  462.                             <span class="currency">EUR HT / mois</span>
  463.                         </p>
  464.                     </div>
  465.                     <div class="container-price-bottom">
  466.                         <p id="subtitlePriceColSwitch">par centre supplémentaire, facturé une fois par an.</p>
  467.                     </div>
  468.                     <div class="info-price">
  469.                         <label id="nbCentreAudio">Nombre de centre(s) </label>
  470.                         <div class="input-group">
  471.                             <input type="button" value="-" class="button-minusMonth" data-field="nbAudioprothMonth">
  472.                             <input type="number" class="quantity-fieldMonth" min="0" id="nbAudioprothMonth" name="nbAudioprothMonth"
  473.                                     value="0" />
  475.                             <input type="button" value="+" class="button-plusMonth" data-field="nbAudioprothMonth">
  476.                         </div>
  477.                     </div>
  478.                 </div>
  480.                 <div class="container-price">
  481.                     <div class="container-remise-content" style="gap: 0px;">
  482.                         <div class="row-arg">
  483.                             <p class="text-green" id="textTitleCol2">Gérez plusieurs centres auditifs</p>
  484.                         </div>
  485.                         <div class="row-arg">
  486.                             <p id="textContentCol2">Si vous êtes un audioprothésiste travaillant dans plusieurs lieux, My Audio vous aide à organiser votre agenda pour chaque centre, afin de gérer facilement vos rendez-vous dans tous vos lieux d’exercice.</p>
  487.                         </div>
  488.                     </div>
  489.                 </div>
  490.             </div>
  491.         </div>
  493.         <div class="spacer-plus">
  494.             <img class="logo-picto-remise" src="/assets/img/pro/picto-plus.png"  alt="picto d'un calendrier">
  495.         </div>
  497.         <div class="card-tarif">
  498.             <div class="container-header">
  499.                 <h4>Commission fixe par vente</h4>
  500.             </div>
  501.             <div class="container-card-content">
  502.                 <div>
  503.                     <div class="first-text">
  504.                         <p>Commission fixe, que vous vendiez un ou plusieurs appareils grâce aux rendez-vous générés par My Audio.</p>
  505.                     </div>
  506.                     <div class="container-card-img">
  507.                         <img class="logo logopro" src="/assets/img/pro/commission.png" style="width: 300px!important;" alt="My Audio calendar">
  508.                     </div>
  509.                 </div>
  510.                 <div class="container-price">
  511.                     <div class="container-price-top">
  512.                         <p class="price">
  513.                             <span class="price">300</span>
  514.                             <span class="currency">EUR HT / vente</span>
  515.                         </p>
  516.                     </div>
  517.                     <div class="container-price-bottom">
  518.                             <button class="btn btn-jaune-inverse" id="btnInscription2">Je m'inscris maintenant</button>
  519.                     </div>
  520.                     <div class="container-remise-content">
  521.                         <div class="row-arg">
  522.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-calendar.png"  alt="picto d'un calendrier">
  523.                             <p>0 EUR par rendez-vous</p>
  524.                         </div>
  525.                         <div class="row-arg">
  526.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-sync.png"  alt="Picto partage de documents">
  527.                             <p>Acquisition patients à la performance</p>
  528.                         </div>
  529.                         <div class="row-arg">
  530.                             <img class="logo-picto-remise" src="/assets/img/pro/picto-target.png"  alt="Picto partage de documents">
  531.                             <p>Efforts Marketing déployés en local</p>
  532.                         </div>
  533.                     </div>
  534.                 </div>
  535.             </div>
  537.         </div>
  538.     </section>
  539.   </div>
  542. {% endblock %}
  544. {% block modals %}
  545. {% endblock %}