templates/front/trade_in/begin.html.twig line 1

  1. {% extends 'front/base.html.twig' %}
  2. {% set title = 'Démarrez votre reprise | BACK ipln' %}
  3. {% set metadescription = 'Démarrer dès maintenant votre reprise sur BACK ipln pour estimer le montant de votre matériel photo & vidéo.' %}
  4. {% set index = 'index' %}
  5. {% block stylesheets %}
  6.     {{ encore_entry_link_tags('tradeIn') }}
  7. {% endblock %}
  9. {% block javascripts %}
  10.     {{ encore_entry_script_tags('tradeIn') }}
  11. {% endblock %}
  12. {% block body %}
  13.     <header>
  14.         <div class="container">
  15.             <div class="row">
  16.                 <div class="w-100">
  17.                     <ul class="breadcrumb">
  18.                         <li>
  19.                             <a href="{{ path('index') }}">Accueil</a>
  20.                         </li>
  21.                         <li>
  22.                             Démarrez votre reprise
  23.                         </li>
  24.                     </ul>
  25.                 </div>
  26.             </div>
  27.             <div class="row">
  28.                 <div class="w-100">
  29.                     <h1 class="dynamic">Faites reprendre votre <span>boîtier</span></h1>
  30.                     <p class="subtitle">
  31.                         Voilà la première étape du simulateur, renseignez les informations relatives à votre produit. Soyez le plus précis possible, elles nous permettront de vous donner l'estimation la plus juste possible ! 📸
  32.                     </p>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </header>
  37.     <section>
  38.         <div class="container">
  39.             <div class="row h-space-between">
  40.                 <main>
  41.                     {{ form_start(formStepOne) }}
  42.                     {% if tradeInProgress %}
  43.                         <div class="alert alert-success">
  44.                             <div class="w-100">
  45.                                 <p class="text-center mb-1">Il semblerait que vous avez déjà commencé une reprise. Souhaitez-vous la reprendre ?</p>
  46.                             </div>
  47.                             <div class="w-100 text-center">
  48.                                 <a href="{{ path('tradeIn.addProduct') }}" class="btn btn-primary">Continuer ma reprise</a>
  49.                                 <a href="{{ path('tradeIn.reset') }}" class="btn btn-primary-outline">Créer une nouvelle reprise</a>
  50.                             </div>
  51.                         </div>
  52.                     {% endif %}
  54.                     {% for label, messages in app.flashes(['notice', 'warning']) %}
  55.                         {% for message in messages %}
  56.                             <div class="alert alert-error my-1">
  57.                                 <div class="w-100">
  58.                                     <p>{{ message }}</p>
  59.                                 </div>
  60.                             </div>
  61.                         {% endfor %}
  62.                     {% endfor %}
  64.                     <div id="product" class="card primary">
  65.                         <div class="wrapper">
  67.                             <h2>Votre produit</h2>
  68.                             <div class="form-row">
  69.                                 <div class="w-50">
  70.                                     <div class="input brand">
  71.                                         {{ form_label(formStepOne.productTradeIn.brand) }}
  72.                                         <div class="select-style">
  73.                                             {{ form_widget(formStepOne.productTradeIn.brand) }}
  74.                                         </div>
  75.                                     </div>
  76.                                 </div>
  77.                                 <div class="w-50">
  78.                                     <div class="input search">
  79.                                         <label for="search">Modèle</label>
  80.                                         <input id="autoComplete" type="search" dir="ltr" spellcheck=false name="search" autocorrect="off" autocomplete="off" autocapitalize="off" maxlength="2048" tabindex="1">
  81.                                     </div>
  82.                                 </div>
  83.                             </div>
  85.                             <div class="second-step">
  86.                                 <div class="form-row">
  87.                                     <div class="w-50">
  88.                                         <div class="input quality">
  89.                                             {{ form_label(formStepOne.productTradeIn.productQuality) }}
  90.                                             <div class="help">
  91.                                                 <a href="">Besoin d'aide ?</a>
  92.                                                 <div class="popup">
  94.                                                 </div>
  95.                                             </div>
  96.                                             <div class="select-style">
  97.                                                 {{ form_widget(formStepOne.productTradeIn.productQuality) }}
  98.                                             </div>
  99.                                         </div>
  100.                                     </div>
  101.                                     <div class="w-50 shutter-count">
  102.                                         <div class="input">
  103.                                             {{ form_label(formStepOne.productTradeIn.shutterCount) }}
  104.                                             <div class="help">
  105.                                                 <a href="">Besoin d'aide ?</a>
  106.                                                 <div class="popup">
  107.                                                     <p>Rendez-vous sur le site <a href="https://www.camerashuttercount.com/" target="_blank">camerashuttercount.com</a>. Choisissez une photo au format RAW non retouchée et provenant de l’appareil dont vous souhaitez connaître le nombre de clics. Cliquez sur Upload.<br>
  108.                                                         🚨 Si vous rencontrez des difficultés, n’hésitez pas à nous contacter.</p>
  109.                                                 </div>
  110.                                             </div>
  111.                                             <div class="select-style">
  112.                                                 {{ form_widget(formStepOne.productTradeIn.shutterCount) }}
  113.                                             </div>
  114.                                         </div>
  115.                                     </div>
  116.                                 </div>
  117.                                 <div class="form-row number-shutter-count">
  118.                                     <div class="w-100">
  119.                                         <div class="input">
  120.                                             {{ form_label(formStepOne.productTradeIn.numberShutterCount) }}
  121.                                             {{ form_widget(formStepOne.productTradeIn.numberShutterCount) }}
  122.                                         </div>
  123.                                     </div>
  124.                                 </div>
  125.                                 <div class="form-row">
  126.                                     <div class="w-50">
  127.                                         <div class="input radios">
  128.                                             {{ form_label(formStepOne.productTradeIn.packaging) }}
  129.                                             {{ form_widget(formStepOne.productTradeIn.packaging) }}
  130.                                         </div>
  131.                                     </div>
  132.                                     <div class="w-50">
  133.                                         <div class="input radios">
  134.                                             {{ form_label(formStepOne.productTradeIn.accessories) }}
  135. {#                                            <div class="help">#}
  136. {#                                                <a href="">Besoin d'aide ?</a>#}
  137. {#                                                <div class="popup">#}
  138. {#                                                    <ul>#}
  139. {#                                                        <li><b>Comme neuf :</b> Aucune rayure</li>#}
  140. {#                                                        <li><b>Très bon état :</b> Micros rayures, invisibles à 20 cm</li>#}
  141. {#                                                        <li><b>Bon état :</b> Rayures et légers impacts visibles lors de l’utilisation</li>#}
  142. {#                                                        <li><b>Cassé :</b> Dommages apparents, l’appareil peut être cassé, fissuré ou déformé</li>#}
  143. {#                                                    </ul>#}
  144. {#                                                </div>#}
  145. {#                                            </div>#}
  146.                                             {{ form_widget(formStepOne.productTradeIn.accessories) }}
  147.                                         </div>
  148.                                     </div>
  149.                                 </div>
  150.                             </div>
  151.                         </div>
  152.                     </div>
  153.                     <div id="authentication" class="card primary">
  154.                         <div class="wrapper">
  155.                             <h2>Votre compte</h2>
  156.                             <div class="form-row h-center">
  157.                                 <div class="w-50">
  158.                                     <div class="input email">
  159.                                         {{ form_label(formStepOne.user.email) }}
  160.                                         {{ form_widget(formStepOne.user.email) }}
  161.                                         <div class="callback">L'email renseigné n'est pas bon.</div>
  162.                                     </div>
  163.                                 </div>
  164.                             </div>
  165.                             <div class="form-row h-center password-input">
  166.                                 <div class="w-50">
  167.                                     <div class="input password">
  168.                                         {{ form_label(formStepOne.user.plainPassword) }}
  169.                                         {{ form_widget(formStepOne.user.plainPassword) }}
  170.                                         <div class="callback">Le mot de passe n'est pas renseigné.</div>
  171.                                     </div>
  172.                                 </div>
  173.                             </div>
  174.                             <div class="registration-form">
  175.                                 <div class="form-row h-center">
  176.                                     <div class="w-50">
  177.                                         <div class="input password-repeat">
  178.                                             {{ form_label(formStepOne.user.repeatPassword) }}
  179.                                             {{ form_widget(formStepOne.user.repeatPassword) }}
  180.                                             <div class="callback">Les deux mots de passe ne correspondent pas.</div>
  181.                                         </div>
  182.                                     </div>
  183.                                 </div>
  184.                                 <div class="form-row">
  185.                                     <div class="w-33">
  186.                                         <div class="input lastname">
  187.                                             {{ form_label(formStepOne.user.lastname) }}
  188.                                             {{ form_widget(formStepOne.user.lastname) }}
  189.                                             <div class="callback">Veuillez renseigner votre nom.</div>
  190.                                         </div>
  191.                                     </div>
  192.                                     <div class="w-33">
  193.                                         <div class="input firstname">
  194.                                             {{ form_label(formStepOne.user.firstname) }}
  195.                                             {{ form_widget(formStepOne.user.firstname) }}
  196.                                             <div class="callback">Veuillez renseigner votre prénom.</div>
  197.                                         </div>
  198.                                     </div>
  199.                                     <div class="w-33">
  200.                                         <div class="input phone">
  201.                                             {{ form_label(formStepOne.user.phone) }}
  202.                                             {{ form_widget(formStepOne.user.phone) }}
  203.                                             <div class="callback">Veuillez renseigner votre téléphone.</div>
  204.                                         </div>
  205.                                     </div>
  206.                                 </div>
  207.                                 <div class="form-row">
  208.                                     <div class="w-50">
  209.                                         <div class="input country">
  210.                                             {{ form_label(formStepOne.user.country) }}
  211.                                             <div class="select-style">
  212.                                                 {{ form_widget(formStepOne.user.country) }}
  213.                                             </div>
  214.                                             <div class="callback">Veuillez renseigner votre pays.</div>
  215.                                         </div>
  216.                                     </div>
  217.                                     <div class="w-50">
  218.                                         <div class="input postcode">
  219.                                             {{ form_label(formStepOne.user.postcode) }}
  220.                                             {{ form_widget(formStepOne.user.postcode) }}
  221.                                             <div class="callback">Veuillez renseigner votre code postal.</div>
  222.                                         </div>
  223.                                     </div>
  224.                                 </div>
  225.                                 <div class="form-row">
  226.                                     <div class="w-50">
  227.                                         <div class="input city">
  228.                                             {{ form_label(formStepOne.user.city) }}
  229.                                             {{ form_widget(formStepOne.user.city) }}
  230.                                             <div class="callback">Veuillez renseigner votre ville.</div>
  231.                                         </div>
  232.                                     </div>
  233.                                     <div class="w-50">
  234.                                         <div class="input address">
  235.                                             {{ form_label(formStepOne.user.streetAddress) }}
  236.                                             {{ form_widget(formStepOne.user.streetAddress) }}
  237.                                             <div class="callback">Veuillez renseigner votre adresse postale.</div>
  238.                                         </div>
  239.                                     </div>
  240.                                 </div>
  242.                             </div>
  243.                             <div class="form-row">
  244.                                 <div class="input conditions h-center v-center text-bold">
  245.                                     {{ form_widget(formStepOne.user.conditions) }}
  246.                                     {{ form_label(formStepOne.user.conditions)|replace({'##conditions##':'<a href="'~path('mentions')~'" target="_blank">conditions</a>'})|raw }}
  247.                                     <div class="callback">Veuillez accepter les conditions pour poursuivre.</div>
  248.                                 </div>
  249.                             </div>
  250.                             <div class="validation">
  251.                                 <button type="button" class="btn btn-primary validateButton">Valider</button>
  252.                                 <button type="submit" class="btn btn-primary submitForm">Se connecter</button>
  253.                             </div>
  254.                         </div>
  255.                     </div>
  256.                     {{ form_end(formStepOne) }}
  257.                 </main>
  258.                 <aside class="steps">
  259.                     <div class="card primary">
  260.                         <div class="wrapper">
  261.                             <h2>Comment ça marche ?</h2>
  262.                             <div class="step">
  263.                                 <img src="{{ asset('build/img/pictos/coin.svg') }}" alt="" class="img-responsive">
  264.                                 <div class="step-title">Obtenez une estimation</div>
  265.                                 <p>Recherchez votre appareil et découvrez deux tarif que l’on vous propose. L’un pour un bon d’achat sur Ipln.fr  ( plus avantageux)  l’autre pour un paiement cash par virement.</p>
  266.                             </div>
  267.                             <div class="step">
  268.                                 <img src="{{ asset('build/img/pictos/delivery_free.svg') }}" alt="" class="img-responsive">
  269.                                 <div class="step-title">Envoyez votre produit</div>
  270.                                 <p>Expédiez gratuitement votre produit afin que nous puissions valider l’estimation.</p>
  271.                             </div>
  272.                             <div class="step">
  273.                                 <img src="{{ asset('build/img/pictos/card.svg') }}" alt="" class="img-responsive">
  274.                                 <div class="step-title">Recevez votre paiement</div>
  275.                                 <p>Recevez votre paiement par virement bancaire sous 48h à 72h ou un bon d’achat valable sur ipln.fr</p>
  276.                             </div>
  277.                         </div>
  278.                     </div>
  279.                 </aside>
  280.             </div>
  281.         </div>
  282.     </section>
  283. {% endblock %}