templates/subscribe/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3.     Essayez gratuitement {{ website_name }}, Inscrivez-vous et collectez facilement tous vos paiements en ligne, gérez vos terrains avec un seul outil
  4. {% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset('/css/pages/subscribe.css') }}" />
  7. {% endblock %}
  8. {% block body %}
  9.     <div class="slider">
  10.         <div class="usefull-width item-slider">
  11.             <H1 class="item-header-h align">
  12.                 Collectez facilement tous vos paiements,<br/>
  13.                 gérez vos cours et terrains
  14.             </H1>
  15.             <H2>
  16.                 Créer votre compte pour continuer vers votre espace pro
  17.             </H2>
  18.         </div>
  19.     </div>
  20.     <div class="usefull-width">
  21.         <section class="marginT-mob-15">
  22.             <div class="item-column">
  23.                 <div class="with-padding-bottom-30 unl-margin-mob">
  24.                     <H3 class="color_theme2 unl-margin">
  25.                         S'inscrire
  26.                     </H3>
  27.                     <div>
  28.                         {% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1) %}
  29.                             <b>Pas</b> besoin de <b>carte bancaire</b><br/>
  30.                             lors de l’inscription, <b>aucuns frais cachés</b>.
  31.                         {% else %}
  32.                             <b>Commençons</b> par faire connaissance ...
  33.                         {% endif %}
  34.                     </div>
  35.                     <div class="item-register-google">
  36.                         <span>
  37.                             <img src="{{ asset('/images/icons/icon-google.svg') }}" height="30" width="auto" border="0" alt="S'inscrire à sport adhesion avec google"/>
  38.                         </span>
  39.                         <span>S'inscrire avec google</span>
  40.                     </div>
  41.                     <div class="horizontal-separator with-margin-top-bottom-15 bg-grey"></div>
  42.                     {{ form_start(form) }}
  43.                         {{ form_row(form.compagnie_name) }}
  44.                         {{ form_row(form.forme_juridique) }}
  45.                         {{ form_row(form.nom_responsable) }}
  46.                         {{ form_row(form.payment_choice) }}
  47.                         {{ form_label(form.email) }}
  48.                         {{ form_widget(form.email) }}
  49.                         {{ form_errors(form.email) }}
  50.                         {{ form_label(form.mdpt) }}
  51.                         {{ form_widget(form.mdpt) }}
  52.                         {{ form_errors(form.mdpt) }}
  53.                         {{ form_row(form.trial_period, {'value' : default.trial }) }}
  54.                         <div class="item-politic">
  55.                             En vous inscrivant, vous acceptez nos <a href="{{ path('legal-cgu') }}" target="_blank">conditions d'utilisation</a> et <a href="{{ path('legal-notices') }}" target="_blank">mentions légales</a>.
  56.                         </div>
  57.                         <button class="button_theme size-14 with-min-width-150">
  58.                             {% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1)%}
  59.                                 Commencer l'éssai
  60.                             {% else %}
  61.                                 Commencer
  62.                             {% endif %}
  63.                         </button>
  64.                     {{ form_end(form) }}
  65.                     <div class="visible-xs marginT-mob-30">
  66.                         {% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1)%}
  67.                             <div class="title align">
  68.                                 Conditions de l'offre d’éssai gratuite
  69.                             </div>
  70.                             <div class="d-flex align-flex">
  71.                                 <div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
  72.                             </div>
  73.                             <div class="item-list-condition">
  74.                                 <div>
  75.                                     <i class="fas fa-check-circle"></i>
  76.                                 </div>
  77.                                 <div>
  78.                                     La facturation démarre automatiquement au terme de la période d’essai gratuite.
  79.                                 </div>
  80.                             </div>
  81.                             <div class="item-list-condition">
  82.                                 <div>
  83.                                     <i class="fas fa-check-circle"></i>
  84.                                 </div>
  85.                                 <div>
  86.                                     Vous pouvez résilier votre abonnement à tout moment pendant la période de rétractation, soit avant le {{ trialDate|format_datetime(locale="fr",pattern="dd MMMM YYYY") }}, pour ne pas être facturé.
  87.                                 </div>
  88.                             </div>
  89.                             <div class="item-list-condition">
  90.                                 <div>
  91.                                     <i class="fas fa-check-circle"></i>
  92.                                 </div>
  93.                                 <div>
  94.                                     Ajouter votre numéro de TVA extra-communautaire pour ne pas être assujetis à la TVA dans les conditions légales européenne.
  95.                                 </div>
  96.                             </div>
  97.                         {% else %}
  98.                             <div class="title align">
  99.                                 Conditions de l'offre
  100.                             </div>
  101.                             <div class="d-flex align-flex">
  102.                                 <div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
  103.                             </div>
  104.                             <div class="item-list-condition">
  105.                                 <div>
  106.                                     <i class="fas fa-check-circle"></i>
  107.                                 </div>
  108.                                 <div>
  109.                                     Votre offre est utilisable dès activation de votre compte. L'activation de votre compte nécessite un e-mail valide.
  110.                                 </div>
  111.                             </div>
  112.                             <div class="item-list-condition">
  113.                                 <div>
  114.                                     <i class="fas fa-check-circle"></i>
  115.                                 </div>
  116.                                 <div>
  117.                                     Les mises à jours du logiciel sont inclusent dans l'offre et ne nécessitent aucun frais supplémentaire <span class="size-11">(hors applications télécharger)</span>.
  118.                                 </div>
  119.                             </div>
  120.                         {% endif %}
  121.                     </div>
  122.                 </div>
  123.                 <div class="r-item-sub">
  124.                     <div class="item-subscribe">
  125.                         {% set i = 0 %}
  126.                         {% set changePrice = '' %}
  127.                         {% set defaultSub = '' %}
  128.                         {% set color = ["orange", "green", "blue"] %}
  129.                         {% if subscribes is not empty %}
  130.                             {% for subscribe in subscribes %}
  131.                                 {% if default.subscribe is not empty %}
  132.                                     {% set defaultClass = 'erase' %}
  133.                                 {% else %}
  134.                                     {% set defaultClass = '' %}
  135.                                     {% if i == 1 %}
  136.                                         {% set defaultSub = 2 %}
  137.                                     {% endif %}
  138.                                 {% endif %}
  139.                                 {% if subscribe.getId == default.subscribe or subscribe.getId == defaultSub %}
  140.                                         {% set defaultClass = 'default' %}
  141.                                         {% set yearly = subscribe.getYearly / 12 %}
  142.                                         {% set changePrice = '<div class="menu-item active" data-type="monthlyPay">
  143.                                             <div class="name d-flex">
  144.                                                 <span class="item-title">
  145.                                                     Mensuel sans engagement
  146.                                                 </span>
  147.                                                 <span class="checked">
  148.                                                     &nbsp;<i class="fas fa-check"></i>
  149.                                                 </span>
  150.                                             </div>
  151.                                             <div class="read-price">
  152.                                                 <span class="act-value">'~ subscribe.getMonthly ~' €</span> &nbsp;<span class="size-11">/ mois hors TVA</span>
  153.                                             </div>
  154.                                         </div>
  155.                                         <div class="menu-item" data-type="monthlyEngPay">
  156.                                             <div class="name d-flex">
  157.                                                 <span class="item-title">
  158.                                                     Annuel avec paiement mensuel 
  159.                                                 </span>
  160.                                                 <span class="checked">
  161.                                                     &nbsp;<i class="fas fa-check"></i>
  162.                                                 </span>
  163.                                             </div>
  164.                                             <div class="read-price">
  165.                                                 <span class="act-value2">>'~ subscribe.getMonthlyCommit ~' €</span> &nbsp;<span class="size-11">/ mois hors TVA</span>
  166.                                             </div>
  167.                                         </div>
  168.                                         <div class="menu-item" data-type="annualPay">
  169.                                             <div class="name d-flex">
  170.                                                 <span class="item-title">
  171.                                                     Annuel, facturé à l\'avance
  172.                                                 </span>
  173.                                                 <span class="checked">
  174.                                                     &nbsp;<i class="fas fa-check"></i>
  175.                                                 </span>
  176.                                             </div>
  177.                                             <div class="read-price">
  178.                                                 <span class="act-value3">'~ yearly ~' €</span> &nbsp;<span class="size-11">/ mois hors TVA</span>
  179.                                             </div>
  180.                                         </div>' %}
  181.                                     {% endif %}
  182.                                 <div class="item {{ defaultClass }}" data-mensual="{{ subscribe.getMonthly }} €" data-sub="{{ subscribe.getMonthlyCommit }} €" data-annual="{{ subscribe.getYearly }} €">
  183.                                     <div class="name {{ color[i] }}">
  184.                                         Offre {{ subscribe.getNameFr|capitalize }}
  185.                                     </div>
  186.                                     <div class="load_bg erase width-100"></div>
  187.                                     <div class="item-prices">
  188.                                         <span class="monthlyPay amount">{{ subscribe.getMonthly }} € <span class="unl-bold size-12">HT / mois</span></span>
  189.                                         <span class="monthlyEngPay amount erase">{{ subscribe.getMonthlyCommit }} € <span class="unl-bold size-12">HT / mois</span></span>
  190.                                         <span class="annualPay amount erase">{{ subscribe.getYearly }} € <span class="unl-bold size-12">HT par ans</span></span>
  191.                                     </div>
  192.                                     {% if i > 0 %}
  193.                                         <div class="button_theme">
  194.                                             Payer maintenant
  195.                                         </div>
  196.                                         {% if (default.trial == true and (default.subscribe is not empty and default.subscribe != 1)) or (default.trial == false and default.subscribe is empty) %}
  197.                                         <div class="free-try">
  198.                                             {{ trialDay }} jours d'éssai gratuit
  199.                                         </div>
  200.                                         {% endif %}
  201.                                     {% endif %}
  202.                                 </div>
  203.                                 {% set i = i + 1 %}
  204.                             {% endfor %}
  205.                         {% endif %}
  206.                         <div class="item-back hidden-xs">
  207.                             Choisir une autre offre
  208.                         </div>
  209.                         <div class="with-relative">
  210.                             <div class="switch-type-pay">
  211.                                 <span class="item-name">
  212.                                     Mensuel sans engagement
  213.                                 </span>
  214.                                 <span>
  215.                                     &nbsp;<i class="fas fa-sort-down"></i>
  216.                                 </span>
  217.                             </div>
  218.                             <div class="mensual-chb">
  219.                                 {{ changePrice|raw }}
  220.                             </div>
  221.                         </div>
  222.                         <div class="hidden-xs">
  223.                             {% if (default.trial == true and (default.subscribe is not empty and default.subscribe != 1)) or (default.trial == false and default.subscribe is empty)%}
  224.                                 <div class="title">
  225.                                     Conditions de l'offre d’éssai gratuite
  226.                                 </div>
  227.                                 <div class="d-flex align-flex">
  228.                                     <div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
  229.                                 </div>
  230.                                 <div class="item-list-condition">
  231.                                     <div>
  232.                                         <i class="fas fa-check-circle"></i>
  233.                                     </div>
  234.                                     <div>
  235.                                         La facturation démarre automatiquement au terme de la période d’essai gratuite.
  236.                                     </div>
  237.                                 </div>
  238.                                 <div class="item-list-condition">
  239.                                     <div>
  240.                                         <i class="fas fa-check-circle"></i>
  241.                                     </div>
  242.                                     <div>
  243.                                         Vous pouvez résilier votre abonnement à tout moment pendant la période de rétractation, soit avant le {{ trialDate|format_datetime(locale="fr",pattern="dd MMMM YYYY") }}, pour ne pas être facturé.
  244.                                     </div>
  245.                                 </div>
  246.                                 <div class="item-list-condition">
  247.                                     <div>
  248.                                         <i class="fas fa-check-circle"></i>
  249.                                     </div>
  250.                                     <div>
  251.                                         Ajouter votre numéro de TVA extra-communautaire pour ne pas être assujetis à la TVA dans les conditions légales européenne.
  252.                                     </div>
  253.                                 </div>
  254.                             {% else %}
  255.                                 <div class="title align">
  256.                                     Conditions de l'offre
  257.                                 </div>
  258.                                 <div class="d-flex align-flex">
  259.                                     <div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
  260.                                 </div>
  261.                                 <div class="item-list-condition">
  262.                                     <div>
  263.                                         <i class="fas fa-check-circle"></i>
  264.                                     </div>
  265.                                     <div>
  266.                                         Votre offre est utilisable dès activation de votre compte. L'activation de votre compte nécessite un e-mail valide.
  267.                                     </div>
  268.                                 </div>
  269.                                 <div class="item-list-condition">
  270.                                     <div>
  271.                                         <i class="fas fa-check-circle"></i>
  272.                                     </div>
  273.                                     <div>
  274.                                         Les mises à jours du logiciel sont inclusent dans l'offre et ne nécessitent aucun frais supplémentaire <span class="size-11">(hors applications télécharger)</span>.
  275.                                     </div>
  276.                                 </div>
  277.                             {% endif %}
  278.                         </div>
  279.                     </div>
  280.                 </div>
  281.             </div>
  282.         </section>
  283.         <div class="with-padding-left-right-15 unl-padding-mob">
  284.             <ol class="breadcrumb unl-margin">
  285.                 <li class="breadcrumb-item"><a href="{{ path('prices') }}" alt="Les tarifs {{ website_name }}">Les tarifs {{ website_name }}</a></li>
  286.                 <li class="breadcrumb-item active" aria-current="page">Créer un compte</li>
  287.             </ol>
  288.         </div>
  289.     </div>
  290. {% endblock %}
  291. {% block javascriptFooter %}
  292. <script>
  293.     $(document).ready(function(){
  294.         function readOffers(active=false){
  295.             if(active === false){
  296.                 var className = 'default';
  297.             }else{
  298.                 var className = 'active';
  299.             }
  300.             var mensual = $('.item.' + className).data('mensual');
  301.             var subs = $('.item.' + className).data('sub');
  302.             var annual = parseFloat($('.item.' + className).data('annual')) / 12;
  303.             $('.act-value').html(mensual);
  304.             $('.act-value2').html(subs);
  305.             $('.act-value3').html(annual.toFixed(2));
  306.         }
  307.         readOffers();
  308.         if(width < 1024){
  309.             $('.item').not('.item.default').hide();
  310.         }
  311.         // Switch type of payment
  312.         //
  313.         $(document).on('click', '.switch-type-pay', function(){
  314.             $('.mensual-chb').show();
  315.             event.stopPropagation();
  316.         });
  317.         $(document).on('click', '.menu-item', function(){
  318.             $('.load_bg').show();
  319.             var choice = $(this).find('.item-title').html();
  320.             $('.mensual-chb').hide();
  321.             $('.menu-item').removeClass('active');
  322.             $(this).addClass('active');
  323.             if($(this).hasClass('active')){
  324.                 var type = $(this).data('type');
  325.                 $('.item-subscribe .item').find('.amount').hide();
  326.                 setTimeout(function(){
  327.                     $('.load_bg').hide();
  328.                     $('.item-subscribe .item').find('.' + type).show();
  329.                 },1000);
  330.             }
  331.             $('.switch-type-pay .item-name, .item-name-condition').html(choice);
  332.         });
  333.         // Choose an offer
  334.         //
  335.         $(document).on('click', '.item-subscribe .item', function(){
  336.             $('.item').not(this).hide();
  337.             $(this).addClass('active');
  338.             $('.item-back').show();
  339.             readOffers(true);
  340.         });
  341.         $(document).on('click', '.item-subscribe .item-back', function(){
  342.             $('.item').show();
  343.             $('.item-back').hide();
  344.             $('.item-subscribe .item').removeClass('active');
  345.             readOffers();
  346.         });
  347.         $(window).click(function() {
  348.             $('.mensual-chb').hide();
  349.         });
  350.     });
  351. </script>
  352. {% endblock %}