templates/pages/ddd.html.twig line 1

Open in your IDE?
  1. {% set url = app.request.server.get('REQUEST_SCHEME') ~ '://' ~ app.request.server.get('SERVER_NAME') ~ app.request.server.get('REQUEST_URI') %}
  2. {% set cruise = cruise|default(app.request.get('croisiere') ? getCruiseById(app.request.get('croisiere')) : null) %}
  3. {% set cabinDatasTree = cabinDatasTree|default(cruise ? getCabinDatasTreeForCruise(cruise) : []) %}
  4. {% set cabinDatasTreeJson = cabinDatasTreeJson|default(cruise ? getCabinDatasTreeJsonForCruise(cruise) : []) %}
  5. {% set hasAtmospheres = hasAtmospheres|default(cruise ? cruiseHasAtmospheres(cruise) : false) %}
  7. {% block stylesheets %}
  8. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
  9. {% endblock %}
  11. {% block content %}
  12. {% set countries = [] %}
  13. {% set drinks_packages = [] %}
  14. {% set segments = (cruise.itinerary.itinerarySegments|default([])) %}
  15. {% set atmospheres = [] %}
  16. {% set pathImage = '/img/photos-temporaires/cruise/' %}
  18. {# Utiliser cruise depuis le controller #}
  19. {% set nb_days = cruise.itinerary.numberOfDays|default(1) %}
  21. {# Calcul des dates de départ et d'arrivée #}
  22. {% set departure_date = cruise.date|default('') %}
  23. {% set arrival_date = '' %}
  25. {% set departurePort = get_departure_port(cruise.itinerary).name|default('') %}
  26. {% set arrivalPort = get_arrival_port(cruise.itinerary).name|default(departurePort) %}
  28. <div id="loader-wrapper" class="loader-container">
  29. <div class="loader"></div>
  30. </div>
  32. {% set services = [] %}
  33. {% set dddI18n = {
  34. step_names: {
  35. '1': 'ddd.step.type'|trans,
  36. '2': 'ddd.step.atmosphere'|trans,
  37. '3': 'ddd.step.cabin'|trans,
  38. '4': 'ddd.step.quote'|trans,
  39. '5': 'ddd.js.step_confirmation'|trans,
  40. },
  41. step_title: {
  42. type: 'ddd.step_title.type'|trans,
  43. atmosphere: 'ddd.step_title.atmosphere'|trans,
  44. selection: 'ddd.step_title.selection'|trans,
  45. quote: 'ddd.step_title.quote'|trans,
  46. },
  47. choose_cabin_type: 'ddd.choose_cabin_type'|trans,
  48. choose_atmosphere: 'ddd.choose_atmosphere'|trans,
  49. atmosphere_no_available: 'ddd.atmosphere.no_available'|trans,
  50. atmosphere_title_short: 'ddd.atmosphere.title_short'|trans,
  51. validate_choice: 'ddd.validate_choice'|trans,
  52. accessibility: {
  53. step_1: 'ddd.accessibility.step_1'|trans,
  54. step_2: 'ddd.accessibility.step_2'|trans,
  55. step_3: 'ddd.accessibility.step_3'|trans,
  56. step_4: 'ddd.accessibility.step_4'|trans,
  57. confirmation: 'ddd.accessibility.confirmation'|trans,
  58. reservation_progress: 'ddd.accessibility.reservation_progress'|trans,
  59. },
  60. js: {
  61. unknown: 'ddd.js.unknown'|trans,
  62. cabin_fallback: 'ddd.js.cabin_fallback'|trans,
  63. atmosphere_fallback: 'ddd.js.atmosphere_fallback'|trans,
  64. parent_benefits_single: 'ddd.js.parent_benefits_single'|trans,
  65. parent_benefits_multiple: 'ddd.js.parent_benefits_multiple'|trans,
  66. quote_error: 'ddd.js.quote_error'|trans,
  67. copy_file_error: 'ddd.js.copy_file_error'|trans,
  68. copy_file_manual: 'ddd.js.copy_file_manual'|trans,
  69. copy_error_manual: 'ddd.js.copy_error_manual'|trans,
  70. copy_success: 'ddd.js.copy_success'|trans,
  71. pdf_no_data: 'ddd.js.pdf_no_data'|trans,
  72. cabin_details_title: 'ddd.js.cabin_details_title'|trans,
  73. step_fallback: 'ddd.js.step_fallback'|trans,
  74. surface_label: 'ddd.cabin_characteristics.surface_label'|trans,
  75. deck_label: 'ddd.cabin_characteristics.decks'|trans,
  76. },
  77. } %}
  78. <div
  79. class="content container-fluid cruise-container"
  80. data-ddd-i18n="{{ dddI18n|json_encode|e('html_attr') }}"
  81. data-ddd-lazy="1"
  82. data-cruise-id="{{ cruise.id|default('') }}"
  83. data-has-atmospheres="{{ hasAtmospheres ? '1' : '0' }}"
  84. data-cabin-datas-tree='{{ cabinDatasTreeJson|json_encode(constant('JSON_UNESCAPED_UNICODE'))|e('html_attr') }}'>
  86. <div class="col-right">
  87. <h1 class="text-xl-bd color-secondary-dark">{{ 'ddd.trip_summary'|trans }}</h1>
  88. <div class="ddd-aside">
  89. {% include 'pages/_includes/ddd/_summary.html.twig' with {
  90. cruise: cruise,
  91. itinerary: cruise.itinerary,
  92. company: company|default(null),
  93. hasAtmospheres: hasAtmospheres,
  94. companyLogoUrl: companyLogoUrl|default(null),
  95. shipMainImageUrl: shipMainImageUrl|default(null),
  96. } %}
  97. </div>
  98. </div>
  100. <div
  101. class="col-left">
  103. {# ---------- Fil du parcours ---------- #}
  105. <div class="thread">
  106. {# Retour desktop uniquement — mobile : #mobile-back-btn #}
  107. <button id="btn-back" type="button" class="btn medium style2 transparent-white text-md-sbd thread-back-desktop">
  108. <div class="icon">{{ getLucidIcon('arrow-left') }}</div>
  109. <span>{{ 'common.back'|trans }}</span>
  110. </button>
  112. <div class="mobile-thread">
  113. <div class="mobile-thread-nav">
  114. <button type="button" class="mobile-back-btn" id="mobile-back-btn" aria-label="{{ 'common.back'|trans }}">
  115. <div class="icon">{{ getLucidIcon('arrow-left') }}</div>
  116. </button>
  117. <div class="step-name" id="mobile-step-name">{{ 'ddd.step.type'|trans }}</div>
  118. <div class="step-number" id="mobile-step-number">1/{{ hasAtmospheres ? 4 : 3 }}</div>
  119. </div>
  121. <button type="button" class="mobile-recap-btn" id="mobile-recap-btn">
  122. {{ 'ddd.mobile.recap_full'|trans }}
  123. </button>
  124. </div>
  126. <div id="reservation-thread" class="" data-visible-steps="{{ hasAtmospheres ? 4 : 3 }}">
  127. <div id="reservation-step-1" class="current" data-logical-step="1">
  128. <div class="icon br2">{{ getLucidIcon('ratio') }}</div>
  129. <div class="step step br1 text-xs-md color-secondary-dark">{{ 'ddd.step.type'|trans }}</div>
  130. </div>
  131. {% if hasAtmospheres %}
  132. <div id="reservation-step-2" class="" data-logical-step="2">
  133. <div class="icon br2">{{ getLucidIcon('sparkle') }}</div>
  134. <div class="step br1 text-xs-md color-secondary-dark">{{ 'ddd.step.atmosphere'|trans }}</div>
  135. </div>
  136. {% endif %}
  137. <div id="reservation-step-3" class="" data-logical-step="3">
  138. <div class="icon br2">{{ getLucidIcon('bed-double') }}</div>
  139. <div class="step br1 text-xs-md color-secondary-dark">{{ 'ddd.step.cabin'|trans }}</div>
  140. </div>
  141. <div id="reservation-step-4" class="" data-logical-step="4">
  142. <div class="icon br2">{{ getLucidIcon('file-text') }}</div>
  143. <div class="step br1 text-xs-md color-secondary-dark">{{ 'ddd.step.quote'|trans }}</div>
  144. </div>
  145. </div>
  146. </div>
  148. <div id="ddd-step-title-icons" hidden aria-hidden="true">
  149. <span data-step="1">{{ getLucidIcon('ratio') }}</span>
  150. <span data-step="2">{{ getLucidIcon('sparkle') }}</span>
  151. <span data-step="3">{{ getLucidIcon('bed-double') }}</span>
  152. <span data-step="4">{{ getLucidIcon('file-text') }}</span>
  153. </div>
  155. <h2 id="step-title" class="step-title text-xl-bd color-secondary-dark">
  156. <span class="step-title__leading" aria-hidden="true">{{ getLucidIcon('ratio') }}</span>
  157. <span class="step-title__text">{{ 'ddd.step_title.type'|trans }} </span>
  158. <select name="select_cabin_type" class="select-cabin-type">
  159. <option disabled selected value="">{{ 'ddd.choose_cabin_type'|trans|default('Choisissez un type de cabine') }}</option>
  160. {% for cabinTypeNode in cabinDatasTree %}
  161. {% for subTypeNode in cabinTypeNode.cabinSubTypes|default([]) %}
  162. <option value="{{ subTypeNode.cabinSubType.id }}">{{ subTypeNode.cabinSubType.name }}</option>
  163. {% endfor %}
  164. {% endfor %}
  165. </select>
  166. <select name="select_atmosphere" class="select-atmosphere"{% if not hasAtmospheres %} hidden{% endif %}>
  167. <option disabled selected value="">{{ 'ddd.choose_atmosphere'|trans }}</option>
  168. </select>
  169. </h2>
  171. <div class="ddd-main">
  172. {# ---------- Étape 1 : choix du type de cabine ---------- #}
  173. <div id="step-type" class="ddd-step-panel is-active">
  174. <div class="ddd-step-loader text-sm-md color-grey-text" aria-live="polite">
  175. {{ 'common.loading'|trans|default('Chargement...') }}
  176. </div>
  177. </div>
  179. {# ---------- Étape 2 : choix de l'ambiance (si applicable) ---------- #}
  180. {% if hasAtmospheres %}
  181. <div id="step-atmosphere" class="ddd-step-panel">
  182. <div class="ddd-step-loader text-sm-md color-grey-text" aria-live="polite">
  183. {{ 'common.loading'|trans|default('Chargement...') }}
  184. </div>
  185. </div>
  186. {% endif %}
  188. {# ---------- Étape 3 : choix de la cabine ---------- #}
  189. <div id="step-subtype" class="ddd-step-panel">
  190. <div class="ddd-step-loader text-sm-md color-grey-text" aria-live="polite">
  191. {{ 'common.loading'|trans|default('Chargement...') }}
  192. </div>
  193. </div>
  195. {# ---------- Étape 4 : formulaire de demande de devis ---------- #}
  196. <div id="step-quote-form" class="ddd-step-panel">
  197. <div class="ddd-step-loader text-sm-md color-grey-text" aria-live="polite">
  198. {{ 'common.loading'|trans|default('Chargement...') }}
  199. </div>
  200. </div>
  202. {# ---------- Confirmation après envoi du devis ---------- #}
  203. <div id="step-quote-summary" style="display: none;">
  204. {% include 'pages/_includes/ddd/_quote_summary.html.twig' %}
  205. </div>
  207. </div>
  209. </div>
  211. </div>
  213. {# <div class="validation" style="">
  214. <div class="floa">
  215. {{ 'ddd.pay_in_installments'|trans }}
  216. <img src="https://www.croisiland.com/_imgs/floa/4X-bleu.svg?1710340929" alt="FLOA"/>
  217. </div>
  218. <div class="total-amount">
  219. <div class="final-price amount">
  220. <span></span>{{ 'common.per_person_short'|trans }}
  221. </div>
  223. <button class="btn medium style5 disabled" disabled>{{ 'ddd.validate_choice'|trans }}</button>
  224. </div>
  225. </div> #}
  227. {% endblock %}