templates/checkout/step1.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %}{{ parent() }} Prendre un rendez-vous{% endblock %}
  5. {% block styles %}
  6. {{ parent() }}
  7. <link rel="canonical" href="{{ path('default_checkout_identification') }}" />
  8. <script src="{{ asset('assets/js/vendors/plugins/jquery-3.6.3.min.js') }}"></script>
  9. {% endblock %}
  11. {% block body %}
  12. <section>
  13. <div class="container py-0 py-sm-10 text-center">
  14. <img src="{{ asset('assets/media/logo_couleur_horizontal.png') }}" alt="logo" width="250" class="mobile-display-none" />
  15. <div class="stepper mt-10 mobile-display-none">
  16. <div class="stepper_item active">
  17. <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 48 48">
  18. <g id="Groupe_400" data-name="Groupe 400" transform="translate(-499.809 -295.809)">
  19. <circle id="Ellipse_22" data-name="Ellipse 22" cx="24" cy="24" r="24" transform="translate(499.809 295.809)" fill="#c1c1c1"/>
  20. <circle id="Ellipse_23" data-name="Ellipse 23" cx="13" cy="13" r="13" transform="translate(510.809 306.809)" fill="#fff"/>
  21. <path id="Icon_material-account-circle" data-name="Icon material-account-circle" d="M17.616,3A14.616,14.616,0,1,0,32.231,17.616,14.621,14.621,0,0,0,17.616,3Zm0,4.385a4.385,4.385,0,1,1-4.385,4.385A4.379,4.379,0,0,1,17.616,7.385Zm0,20.754a10.524,10.524,0,0,1-8.769-4.706c.044-2.908,5.846-4.5,8.769-4.5s8.725,1.593,8.769,4.5a10.524,10.524,0,0,1-8.769,4.706Z" transform="translate(506.193 302.194)" fill="#c1c1c1"/>
  22. </g>
  23. </svg>
  24. <div class="stepper_item_text">Identification</div>
  25. </div>
  26. <div class="stepper_separator"></div>
  27. <div class="stepper_item">
  28. <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 48 48">
  29. <g id="Groupe_399" data-name="Groupe 399" transform="translate(-111.044 -345.044)">
  30. <circle id="Ellipse_22" data-name="Ellipse 22" cx="24" cy="24" r="24" transform="translate(111.044 345.044)" fill="#c1c1c1"/>
  31. <path id="Icon_ionic-md-calendar" data-name="Icon ionic-md-calendar" d="M19.3,14.626H14.626V19.3H19.3ZM17.742,4.5V6.058H9.953V4.5H7.616V6.058H6.447A1.953,1.953,0,0,0,4.5,8.005V21.247a1.953,1.953,0,0,0,1.947,1.947h14.8a1.953,1.953,0,0,0,1.947-1.947V8.005a1.953,1.953,0,0,0-1.947-1.947H20.078V4.5Zm3.505,16.747H6.447V10.926h14.8Z" transform="translate(120.769 355.625)" fill="#fff"/>
  32. </g>
  33. </svg>
  34. <div class="stepper_item_text">Choix du RDV</div>
  35. </div>
  36. <div class="stepper_separator"></div>
  37. <div class="stepper_item">
  38. <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 48 48">
  39. <g id="Groupe_412" data-name="Groupe 412" transform="translate(-773.323 -220.323)">
  40. <circle id="Ellipse_22" data-name="Ellipse 22" cx="24" cy="24" r="24" transform="translate(773.323 220.323)" fill="#c1c1c1"/>
  41. <path id="Icon_awesome-euro-sign" data-name="Icon awesome-euro-sign" d="M14.361,19.9a.554.554,0,0,0-.667-.433,9.711,9.711,0,0,1-2.1.25,5.95,5.95,0,0,1-5.614-3.95h5.255a.555.555,0,0,0,.541-.433l.295-1.311a.555.555,0,0,0-.541-.676h-6.2a9.978,9.978,0,0,1,.006-1.953h6.776a.555.555,0,0,0,.542-.436l.3-1.375a.555.555,0,0,0-.542-.673H6.017a5.805,5.805,0,0,1,5.436-3.468,9.053,9.053,0,0,1,1.75.192.555.555,0,0,0,.647-.4L14.4,3.18a.554.554,0,0,0-.431-.689,13.461,13.461,0,0,0-2.435-.241A9.878,9.878,0,0,0,2.083,8.906H.555A.555.555,0,0,0,0,9.46v1.375a.555.555,0,0,0,.555.555h1a13.721,13.721,0,0,0-.008,1.953H.555A.555.555,0,0,0,0,13.9v1.311a.555.555,0,0,0,.555.555H1.947a9.682,9.682,0,0,0,9.592,7.194,11.529,11.529,0,0,0,2.824-.36.555.555,0,0,0,.406-.645Z" transform="translate(788.065 231.719)" fill="#fff"/>
  42. </g>
  43. </svg>
  44. <div class="stepper_item_text">Empreinte bancaire</div>
  45. </div>
  46. <div class="stepper_separator"></div>
  47. <div class="stepper_item">
  48. <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 48 48">
  49. <g id="Groupe_401" data-name="Groupe 401" transform="translate(-655.972 -314.972)">
  50. <circle id="Ellipse_22" data-name="Ellipse 22" cx="24" cy="24" r="24" transform="translate(655.972 314.972)" fill="#c1c1c1"/>
  51. <g id="Icon_feather-check-circle" data-name="Icon feather-check-circle" transform="translate(669.85 328.85)">
  52. <path id="Tracé_226" data-name="Tracé 226" d="M23.243,12.187v.931a10.122,10.122,0,1,1-6-9.251" transform="translate(-3 -2.991)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  53. <path id="Tracé_227" data-name="Tracé 227" d="M26.658,6,16.536,16.132,13.5,13.1" transform="translate(-6.415 -3.969)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  54. </g>
  55. </g>
  56. </svg>
  57. <div class="stepper_item_text">Récapitulatif</div>
  58. </div>
  59. </div>
  60. </div>
  61. </section>
  62. <section>
  63. <div class="container py-10 d-flex align-items-start justify-content-between gap-0 gap-sm-10 mobile-flex-column">
  64. <div class="flex-grow-1 mobile-w-100">
  65. <div class="border-primary p-7 border-radius10 mb-10">
  66. {% if partner and partner.ispractitioner %}
  67. <a href="{{ path('default_praticien_fiche', {'slug': partner.slug}) }}">
  68. <div class="d-flex gap-4 text-primary">
  69. <div>
  70. <svg xmlns="http://www.w3.org/2000/svg" width="18.315" height="18.73" viewBox="0 0 18.315 18.73">
  71. <g id="Icon_feather-arrow-left" data-name="Icon feather-arrow-left" transform="translate(0.5 0.707)">
  72. <path id="Tracé_32" data-name="Tracé 32" d="M24.815,18H7.5" transform="translate(-7.5 -9.342)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  73. <path id="Tracé_33" data-name="Tracé 33" d="M16.158,24.815,7.5,16.158,16.158,7.5" transform="translate(-7.5 -7.5)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
  74. </g>
  75. </svg>
  76. </div>
  77. <div>Retour à la fiche du praticien</div>
  78. </div>
  79. </a>
  80. {% endif %}
  81. {% if criticalError %}
  82. <div class="w-100 text-center mb-5" style="color: red;">{{ criticalError }}</div>
  83. {% else %}
  84. {% if app.user %}
  85. <form method="post">
  86. <div class="my-10 text-center">
  87. {% if app.user.user %}
  88. <div class="fw-bold fs-6">Vous prenez rendez-vous pour...</div>
  89. <div class="fs-7">(Gérez vos différents profils dans les paramètres de votre compte)</div>
  90. <div style="max-width: 500px; margin: auto;" class="mt-7">
  91. <div class="form-check form-check-custom form-check-solid">
  92. <input class="form-check-input" type="radio" value="" id="profile_self" name="profile" checked/>
  93. <label class="form-check-label" for="profile_self">
  94. <b>{{ app.user.partner ? app.user.partner.firstName : app.user.user.firstName }} {{ app.user.partner ? app.user.partner.lastName : app.user.user.lastName }}</b> (vous-même)
  95. </label>
  96. </div>
  97. {% for profile in app.user.user.customerProfile %}
  98. <div class="form-check form-check-custom form-check-solid mt-3">
  99. <input class="form-check-input" type="radio" value="{{ profile.id }}" id="profile_{{ profile.id }}" name="profile"/>
  100. <label class="form-check-label" for="profile_{{ profile.id }}">
  101. <b>{{ profile.firstName }} {{ profile.lastName }}</b> ({{ profile.familyRelationship }})
  102. </label>
  103. </div>
  104. {% endfor %}
  105. </div>
  106. {% if coaching %}
  107. <input type="hidden" name="lat" id="input-lat" value="{% if lat is defined and lat %}{{ lat}}{% endif %}" />
  108. <input type="hidden" name="lon" id="input-lon" value="{% if lon is defined and lon %}{{ lon}}{% endif %}" />
  109. {% endif %}
  110. {% else %}
  111. <div class="fw-bold fs-6">Vous être connecté à un compte praticien ou coach</div>
  112. <div class="fs-7">Veuillez utiliser un compte utilisateur pour la prise de rendez-vous.</div>
  113. {% endif %}
  114. </div>
  115. {% if app.user.user %}
  116. <div class="my-10 text-center">
  117. <button type="submit">Suivant</button>
  118. </div>
  119. {% endif %}
  120. </form>
  121. {% else %}
  122. <div class="my-10" style="max-width: 700px; margin: auto;">
  123. {% include("utils/register-login-form.html.twig") with {"formRegister": formRegister, "formLogin": formLogin } %}
  124. </div>
  125. {% endif %}
  126. {% endif %}
  127. </div>
  128. </div>
  129. <div style="flex: 0 0 30%; border-radius: 10px; top: 25px;" class="bg-primary p-7 text-white mobile-w-100">
  130. {% if partner %}
  131. <div class="d-flex align-items-center gap-5">
  132. <div class="avatar"><img src="{{ partner.avatar ? documents_avatar_directory~partner.avatar : asset('assets/media/avatars/blank.png') }}" /></div>
  133. <div>
  134. <div class="fw-bold">{{ partner.lastName }}, {{ partner.firstName }}</div>
  135. <div>{{ partner.specialitiesString }}</div>
  136. </div>
  137. </div>
  138. {% if partner.address %}
  139. <div class="mt-5">
  140. {% if partner.addressName %}{{ partner.addressName }}<br/>{% endif %}
  141. {{ partner.address }}<br/>
  142. {% if partner.address2 %}{{ partner.address2 }}<br/>{% endif %}
  143. {{ partner.zipCode }} {{ partner.city }}
  144. </div>
  145. {% endif %}
  146. {% if partner.secondaryLocations and partner.secondaryLocations|length > 0 %}
  147. {% for secondaryLocation in partner.secondaryLocations %}
  148. {% if secondaryLocation.active %}
  149. <div class="mt-5">
  150. {% if secondaryLocation.name != secondaryLocation.address %}{{ secondaryLocation.name }}<br/>{% endif %}
  151. {{ secondaryLocation.address }}<br/>
  152. {% if secondaryLocation.address2 %}{{ secondaryLocation.address2 }}<br/>{% endif %}
  153. {{ secondaryLocation.zipCode }} {{ secondaryLocation.city }}
  154. </div>
  155. {% endif %}
  156. {% endfor %}
  157. {% endif %}
  158. {% endif %}
  159. {% if coaching %}
  160. <div>
  161. Réserver un coaching
  162. </div>
  163. {% endif %}
  164. {% if slot %}
  165. <div class="mt-5">
  166. {{ slot.startDate|format_datetime(locale='fr',pattern="EEEE dd MMMM YYYY à HH:mm") }}
  167. </div>
  168. {% endif %}
  169. </div>
  170. </div>
  171. </section>
  172. {% endblock %}
  174. {% block javascripts %}
  175. {{ parent() }}
  176. {% if coaching %}
  177. <script>
  178. (function() {
  179. function startLoc() {
  180. if (navigator.geolocation) {
  181. navigator.geolocation.getCurrentPosition(function (position) {
  182. document.getElementById('input-lat').value = position.coords.latitude;
  183. document.getElementById('input-lon').value = position.coords.longitude;
  184. });
  185. }
  186. }
  187. startLoc();
  188. })();
  189. </script>
  190. {% endif %}
  191. {% endblock %}