templates/front/abonnement-pro/checkout/adresse-facture-new.html.twig line 1

Open in your IDE?
  1. {% extends 'front/layout.html.twig' %}
  2. {% block googleTagManagerDataLayer %}
  3.     {% include 'google_tag.html.twig' with {'titlePage':'formulaire inscrit abonnement','categoryPage':'subscription','navigation_category1':'','navigation_category2':'','navigation_category3':'' }   %}
  4. {% endblock %}
  5. {% block body %}
  7.     {% form_theme form 'bootstrap_base_layout.html.twig' %}
  8.     <div class="adress_fac_new">
  9.         <div class="part_top_fac_new row">
  10.             <div class="col-6">
  11.                 <img src="{{ asset('images/logo.png') }}" class="logo_fac_new">
  12.             </div>
  13.             <div class="col-6">
  14.             {% if app.user is null %}
  15.                 <p><span>{{ "Vous êtes déjà client chez Copees ?" | trans({}, "productTranslate") }} </span><a href="#" id="connectVous"> {{ "Connectez-vous !" | trans({}, "productTranslate")|raw }}</a></p>
  16.             {% endif %}
  18.             </div>
  19.         </div>
  20.         <div class="part_content_fac_new row">
  22.             <div class="col-md-6">
  23.                 <div class="txt_fac_new_left">
  24.                     <h3>{{ "Gérez la création et l’impression de tous vos supports de travail et de communication sur un seul espace collaboratif !" | trans({}, "productTranslate")|raw }}</h3>
  25.                     <h4>{{ 'Jusqu’à 50% de réduction sur notre catalogue de plus de 300 produits' | trans({}, "productTranslate") }}</h4>
  26.                     <h4>{{ 'Paiement automatique à 30 jours dès votre 2eme commande' | trans({}, "productTranslate") }}</h4>
  27.                     <h4>{{ 'Livraison gratuite illimitée le jour même sur créneaux de 30 mn, ou sous 48H en livraison nationale' | trans({}, "productTranslate") }}</h4>
  28.                     <h4>{{ 'Un éditeur en ligne avec plus de 20 000 templates pour vos créations' | trans({}, "productTranslate") }}</h4>
  29.                     <h4>{{ 'Abonnement sans engagement et résiliable en 1 clic à tous moments depuis votre espace' | trans({}, "productTranslate") }}</h4>
  30.                 </div>
  31.                 <div class="top_margin_border_top" id="logos_top">
  32.                     <p class="">{{ '3000 + entreprises utilisent Copees pour tous leurs besoins en print... et vous ?' | trans({}, "productTranslate") }}</p>
  33.                     <div class="row">
  34.                         <div class="col-md-2 col-4 pl-0"> <img src="{{ asset('images/lon1.png') }}"></div>
  35.                         <div class="col-md-2 col-4"> <img src="{{ asset('images/lon2.png') }}"></div>
  36.                         <div class="col-md-2 col-4"> <img src="{{ asset('images/lon3.png') }}"></div>
  37.                         <div class="col-md-2 col-4"> <img src="{{ asset('images/lon4.png') }}"></div>
  38.                         <div class="col-md-2 col-4"> <img src="{{ asset('images/lon5.png') }}"></div>
  39.                         <div class="col-md-2 col-4"> <img src="{{ asset('images/lon6.png') }}"></div>
  40.                     </div>
  41.                 </div>
  42.                 <div class="img_bx_b2b_1 ecron_design">
  43.                     <div class="" style="position: relative; padding-bottom:57%; height: 0;">
  44.                         <iframe src="https://www.youtube.com/embed/dsIc1r8LgOs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
  45.                     </div>
  46.                 </div>
  47.                 <div class="img_bx_b2b_1 ecron_design_mobile mb-2" style="display: none">
  48.                     <video width="400" controls style="width: 100%;background-color: #000000;padding: 2px;">
  49.                         <source src="{{ asset('images/video_entreprise2.mp4') }}">
  50.                     </video>
  51.                 </div>
  52.             </div>
  54.             <div class="col-md-6 formFactureAbo">
  55.                 {% if app.user is null %}
  56.                     <div class="row inputmxw blocLogin"
  57.                          style="{% if error %}display:block;{% else %}display:none;{% endif %}justify-content: flex-end;">
  58.                         <div class="part1_form row ml-lg-0 formimputFacture">
  59.                             <form style="margin: 0 auto;" autocomplete="nope" method="post" action="{{ path('app_login') }}">
  60.                                 {% if error %}
  61.                                     <script>
  62.                                         dataLayer.push({
  63.                                             event: 'login_attempt',
  64.                                             event_group: 'login',
  65.                                             page_title: titlePage,
  66.                                             page_category: categoryPage,
  67.                                         });
  68.                                     </script>
  69.                                     <div class="alert alert-danger">{{ error.message }}</div>
  70.                                 {% endif %}
  71.                                 <div class="">
  72.                                     <label style="display: block;">{{ 'Se connecter' | trans({}, "productTranslate") }}</label>
  73.                                 </div>
  74.                                 <div class="inscritSocial mt-5 text-center">
  75.                                     <a href="{{ path('google_connect') }}" class="linkGoogleConnectA linkConnectLiseuse mb-2" style="display: block;"><img style="width: 15px;" src="{{ asset('images/social_google_user2.png') }}"><span>{{ 'Continuer avec google' | trans({}, "productTranslate") }}</span></a>
  76.                                     <a href="{{ path('microsoft_connect') }}" class="linkGoogleConnectA linkConnectLiseuse" style="display: block;"><img style="width: 15px;" src="{{ asset('images/social_microsoft_user2.png') }}"><span>{{ 'Continuer avec microsoft' | trans({}, "productTranslate") }}</span></a>
  77.                                     {#    <a href="{{ path('apple_connect') }}" class="linkGoogleConnectA" style="display: block;"><img style="width: 15px;" src="{{ asset('images/social_microsoft_user2.png') }}"><span>Continuer avec appele</span></a>#}
  78.                                 </div>
  79.                                 <div class="mt-3">
  80.                                     <label style="display: block;">Utiliser une adreese email</label>
  81.                                 </div>
  82.                                 <div class="part1_form row">
  83.                                     <div class="col-md-5 col-12 pl-md-0 mt-2"><input id="email" name="email"
  84.                                                                                 autocomplete="nope"
  85.                                                                                 type="email" required
  86.                                                                                 value="{{ last_username }}"
  87.                                                                                 style="width: 100%"
  88.                                                                                 placeholder="{{ 'email' | trans({}, "productTranslate") }}"
  89.                                                                                 value="{{ last_username }}"></div>
  90.                                     <div class="col-md-5 col-12 pl-md-0 mt-2"><input type="password" name="password"
  91.                                                                                 id="password" style="width: 100%"
  92.                                                                                 placeholder="{{ 'mot de passe' | trans({}, "productTranslate") }}" required>
  93.                                     </div>
  94.                                     <div class="col-md-2 col-12 pl-md-0 mt-2">
  95.                                         <button type="submit" class="btn w-100">{{ 'Connexion' | trans({}, "productTranslate") }}</button>
  96.                                     </div>
  97.                                     <input type="hidden" name="_csrf_token"
  98.                                            value="{{ csrf_token('authenticate') }}">
  99.                                     <div class="col-md-12 col-12 pr-md-0 mt-2"
  100.                                          style="text-align: right;  padding-bottom: 18px;">
  101.                                         <a style="font-size: 14px; color: #000;" href="{{ path('app_forgotten_password') }}">{{ 'Mot de passe oublié ?' | trans({}, "productTranslate") }}</a></div>
  102.                                 </div>
  103.                             </form>
  104.                         </div>
  105.                     </div>
  106.                 {% endif %}
  107.                 {{ form_start(form, {attr: {id: 'facture_abonnement_form'}}) }}
  108.                     {% if app.user is null %}
  109.                         <div class="">
  110.                             <label style="display: block;font-size: 22px;font-weight: 500;">S'inscrire</label>
  111.                         </div>
  112.                         <div class="inscritSocial mt-4 text-center">
  113.                             <a href="{{ path('google_connect') }}" class="linkGoogleConnectA linkConnectInscrit mb-2" style="display: block;"><img style="width: 15px;" src="{{ asset('images/social_google_user2.png') }}"><span>{{ 'Continuer avec google' | trans({}, "productTranslate") }}</span></a>
  114.                             <a href="{{ path('microsoft_connect') }}" class="linkGoogleConnectA linkConnectInscrit " style="display: block;"><img style="width: 15px;" src="{{ asset('images/social_microsoft_user2.png') }}"><span>{{ 'Continuer avec microsoft' | trans({}, "productTranslate") }}</span></a>
  115.                         </div>
  116.                         <div class="mt-4 mb-4">
  117.                             <label style="display: block;font-size: 22px;font-weight: 500;">{{ 'Ou créer un compte avec' | trans({}, "productTranslate") }}</label>
  118.                         </div>
  119.                     {% endif %}
  120.                     <div class="row inputmxw">
  121.                         <div class="part1_form row ml-lg-0 formimputFacture">
  123.                             <div class="col-md-6 col-12 pl-md-0 pr-md-0 ">
  124.                                 <div class="form-group">
  125.                                     <label style="display: block;">{{ 'Prénom' | trans({}, "productTranslate") }}</label>
  126.                                     {{ form_widget(form.lastname) }}
  127.                                 </div>
  128.                             </div>
  129.                             <div class="col-md-6 col-12 pr-md-0 pl-md-3 ">
  130.                                 <div class="form-group">
  131.                                     <label style="display: block;">{{ 'Nom' | trans({}, "productTranslate") }}</label>
  132.                                     {{ form_widget(form.firstname) }}
  133.                                 </div>
  134.                             </div>
  135.                             <div class="col-12 p-md-0 ">
  136.                                 <div class="form-group">
  137.                                     <label style="display: block;">{{ 'Nom de l’entreprise' | trans({}, "productTranslate") }}</label>
  138.                                      {{ form_widget(form.conpany) }}
  139.                                 </div>
  140.                             </div>
  141.                             <div class="col-md-6 col-12 pl-md-0 pr-md-0">
  142.                                 <div class="form-group">
  143.                                     <label style="display: block;">{{ 'Numéro de téléphone' | trans({}, "productTranslate") }}</label>
  144.                                     {{ form_widget(form.phone) }}
  145.                                 </div>
  146.                                 <div class="valid_btnLiv" style="display: none"></div>
  147.                                 <div class="no_valid_btnLiv" style="display: none"></div>
  148.                             </div>
  149.                             <div class="col-md-6 col-12 pr-md-0 pl-md-3 ">
  150.                                 <div class="form-group">
  151.                                     <label style="display: block;">{{ 'Email professionnel' | trans({}, "productTranslate") }}</label>
  152.                                     {{ form_widget(form.email) }}
  153.                                     {% if erreurEmail is defined %}
  154.                                         <script>
  155.                                             dataLayer.push({
  156.                                                 event: 'registration_attempt',
  157.                                                 event_group: 'registration_btob',
  158.                                                 page_title: titlePage,
  159.                                                 page_category: categoryPage,
  160.                                             });
  161.                                         </script>
  162.                                         <i class="" style="color: red;">{{ erreurEmail | trans({}, "productTranslate") }} </i>
  163.                                     {% endif %}
  164.                                 </div>
  165.                             </div>
  166.                             <div class="col-12 p-md-0 ">
  167.                                 <div class="form-group">
  168.                                     <label style="display: block;">{{ 'Adresse' | trans({}, "productTranslate") }}</label>
  169.                                      {{ form_widget(form.adresse) }}
  170.                                 </div>
  171.                             </div>
  172.                             <div class="col-12 p-md-0 ">
  173.                                 <div class="form-group">
  174.                                     <label style="display: block;">{{ "Complément d\'adresse" | trans({}, "productTranslate") }}</label>
  175.                                     {{ form_widget(form.batiment) }}
  176.                                 </div>
  177.                             </div>
  178.                             <div class="col-md-6 col-12 pl-md-0 pr-md-0 ">
  179.                                 <div class="form-group">
  180.                                     <label style="display: block;">{{ 'Code Postal' | trans({}, "productTranslate") }}</label>
  181.                                      {{ form_widget(form.codePostal) }}
  182.                                 </div>
  183.                             </div>
  184.                             <div class="col-md-6 col-12 pr-md-0 pl-md-3 ">
  185.                                 <div class="form-group">
  186.                                     <label style="display: block;">{{ 'Ville' | trans({}, "productTranslate") }}</label>
  187.                                     {{ form_widget(form.city) }}
  188.                                 </div>
  189.                             </div>
  190.                             {% if not app.user  %}
  191.                                 <div class="col-md-12 col-12 pl-md-0 pr-md-0  ">
  192.                                     <div class="form-group selectSecteur">
  193.                                         {{ form_widget(form.secteurActivite) }}
  194.                                     </div>
  195.                                 </div>
  196.                                 <div class="col-lg-6 col-12 pl-md-0 pr-md-0 ">
  197.                                     <div class="form-group mb-0">
  198.                                         <label style="display: block;">{{ 'Mot de passe' | trans({}, "productTranslate") }}</label>
  199.                                         <input type="text" id="adresse_facturation_abonnement_password" name="password" required="required" placeholder="{{ 'Mot de passe' | trans({}, "productTranslate") }}" style="margin-bottom: 0px;">
  200.                                         <i class="text-help">{{ 'Le mot de passe doit contenir au moins 6 caractères.' | trans({}, "productTranslate") }} </i>
  201.                                     </div>
  202.                                 </div>
  203.                                 <div class="col-lg-6 col-12 pr-md-0 pl-md-3 ">
  204.                                     <div class="form-group mb-0">
  205.                                         <label style="display: block;">{{ 'Confirmer le mot de passe' | trans({}, "productTranslate") }}</label>
  206.                                         <input type="text" id="confpassword" name="confpassword" required="required" placeholder="{{ 'Confirmer le mot de passe' | trans({}, "productTranslate") }}" style="margin-bottom: 0px;">
  207.                                     </div>
  208.                                 </div>
  209.                             {% else %}
  210.                                 <div class="col-md-12 col-12 pl-md-0 pr-md-0  ">
  211.                                     <div class="form-group selectSecteur mb-0">
  212.                                         {{ form_widget(form.secteurActivite) }}
  213.                                     </div>
  214.                                 </div>
  215.                             {% endif %}
  216.                             {% if no_captcha is defined %}
  218.                             {% else %}
  219.                                 <div class="col-md-12 col-12 pr-md-0 pl-md-3 mt-3 captchaBlock">
  220.                                     <div class="form-group">
  221.                                         {{ form_widget(form.captchaCode) }}
  222.                                         {{ form_errors(form.captchaCode) }}
  223.                                         {% if form.captchaCode.vars.errors|length %}
  224.                                             <script>
  225.                                                 dataLayer.push({
  226.                                                     event: 'registration_attempt',
  227.                                                     event_group: 'registration_btob',
  228.                                                     page_title: titlePage,
  229.                                                     page_category: categoryPage,
  230.                                                 });
  231.                                             </script>
  232.                                         {% endif %}
  233.                                     </div>
  234.                                 </div>
  235.                             {% endif %}
  236.                         </div>
  237.                     </div>
  238.                     <div class="conteur_price pb-0 pt-0" style="width: 100%; margin-top: 35px;display: flex;">
  239.                         <input type="hidden" name="typeAbonnementBtb" id="typeAbonnementBtb" value="">
  240.                         <div class="link_top_btob">
  241.                             <button id="btn_submit_adresse_facturePlus" class="ml-lg-2 mt-0" href="#">{{ "Je m’abonne à l'abonnement Plus" | trans({}, "productTranslate") }}</button>
  242.                         </div>
  243.                         <div class="link_top_btob">
  244.                             <button id="btn_submit_adresse_factureTeam" class="ml-lg-2 mt-0" href="#">{{ "Je m’abonne à l'abonnement Business " | trans({}, "productTranslate") }}</button>
  245.                         </div>
  246.                     </div>
  247.                  {{ form_end(form) }}
  248.             </div>
  249.         </div>
  250.         <div class="part_bottom_fac_new row " id="logos_bottom" >
  251.             <div class="col-md-6 top_margin_border">
  252.                <p class="text-center">{{ '3000 + entreprises utilisent Copees pour tous leurs besoins en print... et vous ?' | trans({}, "productTranslate") }}</p>
  253.                 <div class="row">
  254.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon1.png') }}"></div>
  255.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon2.png') }}"></div>
  256.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon3.png') }}"></div>
  257.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon4.png') }}"></div>
  258.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon5.png') }}"></div>
  259.                     <div class="col-md-2 col-4"> <img src="{{ asset('images/lon6.png') }}"></div>
  260.                 </div>
  261.             </div>
  262.         </div>
  263.     </div>
  264.     <style>
  265.         .ecron_design{
  266.             background-image: url(/images/ecron_design0.png) !important;
  267.             background-repeat: no-repeat;
  268.             background-size: 100% !important;
  269.             height: 59%;
  270.             padding-left: 1.3%!important;
  271.             padding-right: 1%! important;
  272.             padding-top: 1%!important;
  273.         }
  274.         @media (max-width: 767px) {
  275.             .ecron_design_mobile {
  276.                 display: block!important;
  277.             }
  278.             .ecron_design{
  279.                 display: none;
  280.             }
  281.         }
  282.         .top_margin_border_top {
  283.             padding-top: 25px;
  284.             margin-top: 30px;
  285.             margin-bottom: 25px;
  286.         }
  287.         .adress_fac_new {
  288.             padding-bottom: 200px;
  289.             overflow: hidden;
  290.         }
  291.     </style>
  292. {% endblock %}
  293. {% block javascripts %}
  294.     {{ parent() }}
  295.     <script src="https://maps.googleapis.com/maps/api/js?key={{ key_google_map }}&libraries=places"></script>
  296.     {{ encore_entry_script_tags('abonnement_pro_front') }}
  297. {% endblock %}