src/DcSiteBundle/Resources/views/Modules/multi-consultation/multi-consultation.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{ asset('/bundles/core/css/owl.carousel.min.css') }}">
  2. {# <link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/modules/multi-consultation-form.css') }}"> #}
  3. <link rel="stylesheet" type="text/css" href="{{ asset('bundles/my/css/datepicker.css') }}">
  4. <link rel="stylesheet" type="text/css" href="{{ asset('/bundles/dcsite/css/modules/vue-datetime.min.css') }}">
  5. <link rel="stylesheet" href="{{ asset('bundles/core/css/modules/gallery/lightgallery.css') }}">
  7. <link rel="stylesheet" type="text/css" href="{{ asset('/bundles/dcsite/css/modules/WIDGET_NEW.css') }}">
  12. <header class="consultation-page-header">
  13.     <div class="container">
  14.         {% if consultation_type ==  "testdrive"%}
  15.             {% if dealer is defined %}
  16.                 <h1 class="consultation-page-header__title">{{ seoMeta.h1 ?? 'multi_consultation.enter.test_1'|trans({}, 'dc_base') }}
  17.                     <span>{{ 'multi_consultation.enter.test_2'|trans({}, 'dc_base') }} {{ dealer.brand.name }}</span>
  18.                 </h1>
  19.             {% else %}
  20.                 <h1 class="consultation-page-header__title">{{ seoMeta.h1 ?? 'multi_consultation.enter.test_1'|trans({}, 'dc_base') }}
  21.                     <span>{{ 'multi_consultation.enter.test_2'|trans({}, 'dc_base') }}</span>
  22.                 </h1>
  23.             {% endif %}
  24.         {% elseif consultation_type ==  "online" %}
  25.             <h1 class="consultation-page-header__title">{{ seoMeta.h1 ?? 'multi_consultation.enter.consultation_title'|trans({}, 'dc_base') }} <span>{{ 'multi_consultation.enter.consultation_online'|trans({}, 'dc_base') }}</span></h1>
  26.         {% else %}
  27.             <h1 class="consultation-page-header__title">{{ seoMeta.h1 ?? 'multi_consultation.enter.consultation_title'|trans({}, 'dc_base') }} <span>{{ 'multi_consultation.enter.consultation_saloon'|trans({}, 'dc_base') }}</span></h1>
  28.         {% endif %}
  29.     </div>
  30. </header>
  32. <div id="multiConsultation">
  33.     <div class="consultation-steps">
  34.         <div class="container">
  35.             <ul class="consultation-steps__list row">
  36.                 <li v-if="brands && brands.length > 0"
  37.                         class="col-auto consultation-steps__item"
  38.                         :class="{'--passed': step >= 1 && dealer, '--active': step === 1 && !dealer}"
  39.                         @click="setStep(1); goBack();"
  40.                 >
  41.                     <div class="consultation-steps__num" v-html="startStep=+1"></div>
  42.                     <div class="consultation-steps__content">
  43.                         <p class="consultation-steps__title">
  44.                             {{ 'form.dealer_choose'|trans({}, 'dc_base') }}
  45.                         </p>
  46.                         <p v-if="brand" v-text="brand.name"></p>
  47.                     </div>
  49.                     <div class="consultation-steps__edit">
  50.                         <svg class="icon" role="presentation"><use xlink:href="#icon-edit"></use></svg>
  51.                     </div>
  52.                 </li>
  53.                 <li
  54.                     class="col-auto consultation-steps__item"
  55.                     :class="{'--passed': step > 1, '--active': step === 1 && dealer}"
  56.                     @click="setStep(1)"
  57.                 >
  58.                     <div class="consultation-steps__num" v-html="startStep+1"></div>
  59.                     <div class="consultation-steps__content">
  60.                         <p class="consultation-steps__title">
  61.                             {{ 'multi_consultation.step_1.nav_title'|trans({}, 'dc_base') }}
  62.                             <span v-if="options.isTestDrive">{{ 'multi_consultation.step_1.nav_title_routes'|trans({}, 'dc_base') }}</span>
  63.                         </p>
  65.                         <ul
  66.                             v-if="selectedCars && selectedCars.length > 0"
  67.                             class="consultation-steps__info"
  68.                             :title="selectedCarsTitle"
  69.                         >
  70.                             <li v-text="getCarTitle(selectedCars[0])"></li>
  71.                             <li v-if="selectedCars && selectedCars.length > 1">
  72.                                 <span>+<span v-text="selectedCars.length - 1"></span></span>
  73.                             </li>
  74.                         </ul>
  75.                     </div>
  77.                     <div class="consultation-steps__edit">
  78.                         <svg class="icon" role="presentation"><use xlink:href="#icon-edit"></use></svg>
  79.                     </div>
  80.                 </li>
  81.                 <li
  82.                     class="col-auto consultation-steps__item"
  83.                     :class="{'--passed': step > 2, '--active': step === 2}"
  84.                     @click="setStep(2)"
  85.                 >
  86.                     <div class="consultation-steps__num" v-html="startStep+2"></div>
  87.                     <div class="consultation-steps__content">
  88.                         <p class="consultation-steps__title">{{ 'multi_consultation.step_2.nav_title'|trans({}, 'dc_base') }}</p>
  89.                     </div>
  91.                     <div class="consultation-steps__edit">
  92.                         <svg class="icon" role="presentation"><use xlink:href="#icon-edit"></use></svg>
  93.                     </div>
  94.                 </li>
  95.                 <li
  96.                     class="col-auto consultation-steps__item"
  97.                     :class="{'--active': step === 3}"
  98.                     @click="setStep(3)"
  99.                 >
  100.                     <div class="consultation-steps__num" v-html="startStep+3"></div>
  101.                     <div class="consultation-steps__content">
  102.                         <p class="consultation-steps__title">{{ 'multi_consultation.step_3.nav_title'|trans({}, 'dc_base') }}</p>
  103.                     </div>
  104.                 </li>
  105.             </ul>
  106.         </div>
  107.     </div>
  108.     <div class="container">
  109.         <p class="consultation-steps__title">{{ 'multi_consultation.step_2.understep_1'|trans({}, 'dc_base') }}</p><br>
  110.         <p class="consultation-steps__title">{{ 'multi_consultation.step_2.understep_2'|trans({}, 'dc_base') }}</p><br>
  111.     </div>
  112.     <div class="container" v-if="dealer">
  113.         <header class="consultation-form-header">
  114.             <p v-if="step === 1" class="consultation-form-header__title">
  115.                 {{ 'multi_consultation.step_1.title_start'|trans({}, 'dc_base') }}
  116.                 <span v-text="selectedCars.length"></span>
  117.                 {{ 'multi_consultation.step_1.title_end'|trans({}, 'dc_base') }}
  118.             </p>
  119.             <p v-if="step === 2" class="consultation-form-header__title">{{ 'multi_consultation.step_2.title'|trans({}, 'dc_base') }}</p>
  120.             <p v-if="step === 3" class="consultation-form-header__title">{{ 'multi_consultation.step_3.title'|trans({}, 'dc_base') }}</p>
  122.             <div class="consultation-form-header__actions">
  123.                 <button v-if="step == 1 && dealer" type="button" class="c-btn" @click="goBack">{{ 'multi_consultation.btn.back'|trans({}, 'dc_base') }}</button>
  124.                 <button v-if="step > 1" type="button" class="c-btn" @click="goBack">{{ 'multi_consultation.btn.back'|trans({}, 'dc_base') }}</button>
  126.                 <button v-if="step < 3" type="button" class="c-btn --border --next"
  127.                     @click="goToNextStep()"
  128.                     :disabled="!canNextStep"
  129.                 >
  130.                     {{ 'multi_consultation.btn.next'|trans({}, 'dc_base') }}
  131.                     <svg class="icon" role="presentation"><use xlink:href="#icon-arrow"></use></svg>
  132.                 </button>
  133.             </div>
  134.         </header>
  135.     </div>
  137.     <div class="container mb-5 multi-consultation-content">
  138.         <div v-if="stepPreloader" class="time-preloader --step">
  139.             <div id="fountainG">
  140.                 <div id="fountainG_1" class="fountainG"></div>
  141.                 <div id="fountainG_2" class="fountainG"></div>
  142.                 <div id="fountainG_3" class="fountainG"></div>
  143.                 <div id="fountainG_4" class="fountainG"></div>
  144.                 <div id="fountainG_5" class="fountainG"></div>
  145.                 <div id="fountainG_6" class="fountainG"></div>
  146.                 <div id="fountainG_7" class="fountainG"></div>
  147.                 <div id="fountainG_8" class="fountainG"></div>
  148.             </div>
  149.         </div>
  151.         <!-- Select dealer ------------------------------->
  152.         <div class="container" v-if="brands && !dealer">
  153.             <div class="row">
  154.                 <div class="col-md-12">
  155.                     <div class="row row-calculation_module mobile-scroll">
  156.                         <div class="col-md-2 calculation_module-col calculation_module-brand"
  157.                              v-for="brandItem in brands">
  158.                             <div class="calculation_module-style global__multi__consult"
  159.                                  :class="brand && brand.id == brandItem.id ? 'active' : ''">
  160.                                 <div class="calculation_module-item-img" @click="setBrand(brandItem,brandItem.dealerId)">
  161.                                     <img :src="brandItem.image" :alt="brandItem.name">
  162.                                 </div>
  163.                                 <span class="choose_brand_card-title" v-html="brandItem.name"></span>
  164.                                 <div class="calculation_module-info" v-if="brandItem.dealers">
  165.                                     <div class="calculation_module-info-head">
  166.                                         <div class="calculation_module-title mb-2">
  167.                                         <span class="dealer-active"
  168.                                               v-html="brandItem.name"></span>{{ 'modules.choose'|trans({}, 'dc_base') }}
  169.                                             дилера
  170.                                         </div>
  171.                                     </div>
  172.                                     <div @click.stop.prevent="setBrand(brandItem,dealer.id)"
  173.                                          class="calculation_module-info-brand" v-for="dealer in brandItem.dealers">
  174.                                         <span class="calculation_module-info-brand-name" v-html="dealer.title"></span>
  175.                                         <span class="calculation_module-info-brand-addr" v-html="dealer.adres"></span>
  176.                                     </div>
  177.                                 </div>
  178.                             </div>
  179.                         </div>
  180.                     </div>
  181.                 </div>
  182.             </div>
  183.         </div>
  185.         <!-- Step 1 ------------------------------->
  186.         <div v-if="step === 1 && dealer">
  188.             <div class="test-drive-car" v-if="cars && cars.length > 0">
  189.                 <div v-if="stepPreloader" class="time-preloader">
  190.                     <div id="fountainG">
  191.                         <div id="fountainG_1" class="fountainG"></div>
  192.                         <div id="fountainG_2" class="fountainG"></div>
  193.                         <div id="fountainG_3" class="fountainG"></div>
  194.                         <div id="fountainG_4" class="fountainG"></div>
  195.                         <div id="fountainG_5" class="fountainG"></div>
  196.                         <div id="fountainG_6" class="fountainG"></div>
  197.                         <div id="fountainG_7" class="fountainG"></div>
  198.                         <div id="fountainG_8" class="fountainG"></div>
  199.                     </div>
  200.                 </div>
  201.                 <div v-for="(model, idx) in cars"
  202.                     class="test-drive-car__col"
  203.                     :class="{ '--selected': isSelectedCar(model)}"
  204.                 >
  205.                     <div class="test-drive-car__item">
  206.                         <input class="test-drive-car__input"
  207.                             type="checkbox"
  208.                             :value="model.testDriveCarId"
  209.                             :id="'model-' + idx"
  210.                             :name="'car-' + idx"
  211.                             v-model="selectedCarsId"
  212.                         >
  213.                         <label :for="'model-' + idx" class="test-drive-car__label">
  214.                             <div class="test-drive-car__check">
  215.                                 <svg class="check-icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  216.                             </div>
  218.                             <div v-if="options.isTestDrive" class="test-drive-car__photo">
  219.                                 <img :src="model.image" alt="">
  220.                             </div>
  221.                             <div v-else class="test-drive-car__photo">
  222.                                 <img :src="model.image" alt="">
  223.                             </div>
  225.                             <p class="test-drive-car__title" v-text="getCarTitle(model)"></p>
  227.                             <dl v-if="options.isTestDrive" class="test-drive-car__options">
  228.                                 <dt class="sr-only">Комплектация</dt>
  229.                                 <dd v-text="model.testDriveConfigurationName"></dd>
  230.                             </dl>
  232.                             <span class="test-drive-car__btn">
  233.                                 <span>{{ 'multi_consultation.btn.select'|trans({}, 'dc_base') }}</span>
  234.                                 <span class="text-checked">{{ 'multi_consultation.btn.selected'|trans({}, 'dc_base') }}</span>
  235.                             </span>
  236.                         </label>
  237.                     </div>
  238.                 </div>
  240.             </div>
  241.             <div class="test-drive-car" v-else>
  242.                 <h2>{{ 'multi_consultation.message.no_cars'|trans({}, 'dc_base') }}</h2>
  243.             </div>
  244.         </div>
  246.         <!-- Step 2 ------------------------------->
  247.         <div v-if="step === 2">
  248.             <!-- Test Drive --------------------- -->
  249.             <div v-if="options.isTestDrive">
  250.                 <div class="test-drive-car">
  251.                     <div v-for="(model, idx) in selectedCars" v-show="idx == currentCar" class="test-drive-car__col --selected" :class="{'--opened': options.isTestDrive}">
  252.                         <div class="test-drive-consultant__item flex-column">
  253.                             <div class="d-md-flex">
  255.                                 {### Фото авто и его данные ###}
  256.                                 <div class="test-drive-car__label">
  257.                                     <div v-if="options.isTestDrive" class="test-drive-car__photo">
  258.                                         <img :src="model.image" alt="">
  259.                                     </div>
  260.                                     <div v-else class="test-drive-car__photo">
  261.                                         <img :src="model.image" alt="">
  262.                                     </div>
  263.                                     <p v-if="options.isTestDrive" class="test-drive-car__title" v-text="model.carName"></p>
  264.                                     <p v-else class="test-drive-car__title" v-text="model.title + (model.hasHybrid ? ' Hybrid' : '')"></p>
  266.                                     <dl v-if="options.isTestDrive" class="test-drive-car__options">
  267.                                         <dt class="sr-only">{{ 'multi_consultation.step_2.equipment_title'|trans({}, 'dc_base') }}</dt>
  268.                                         <dd v-text="model.testDriveConfigurationName"></dd>
  269.                                     </dl>
  270.                                     <div class="test-drive-car__progress" v-html="(currentCar+1)+'/'+selectedCars.length"></div>
  271.                                 </div>
  273.                                 {### Карты, маршруты ###}
  274.                                 <button
  275.                                     type="button"
  276.                                     class="test-drive-car__toggle-btn d-md-none"
  277.                                     @click="toggleOpenMap(model)"
  278.                                 >
  279.                                     <span v-if="!model.route">{{ 'multi_consultation.btn.route_select'|trans({}, 'dc_base') }}</span>
  280.                                     <span v-else>{{ 'multi_consultation.btn.route_selected'|trans({}, 'dc_base') }}</span>
  281.                                 </button>
  282.                                 <div class="test-drive-car__maps" :class="{'--opened': isMapOpen(model)}">
  283.                                     <div class="test-drive-map" v-for="route in model.routes" :class="'tesdrive-count-' + model.routes.length">
  284.                                         <label class="test-drive-map__map">
  285.                                             <input v-model="model.route" type="radio" :value="route.id" :name="'road'+model.testDriveCarId">
  286.                                             <span class="test-drive-map__checkmark"></span>
  288.                                             <img :src="route.src" alt="">
  290.                                             <svg :data-src="route.src" class="icon" role="presentation"><use xlink:href="#icon-glass"></use></svg>
  291.                                         </label>
  292.                                         <div class="test-drive-map__content">
  293.                                             <p class="test-drive-map__title" v-html="route.title"></p>
  294.                                             <div v-html="route.description"></div>
  295.                                         </div>
  296.                                     </div>
  297.                                 </div>
  299.                             </div>
  300.                             <hr>
  301.                             <div class="row test-drive-car__row" :id="'tdDateC'+model.testDriveCarId">
  303.                                 {### Preloader ###}
  304.                                 <div v-if="timePreloader" class="time-preloader">
  305.                                     <p>{{ 'multi_consultation.step_2.time_preloader'|trans({}, 'dc_base') }}</p>
  306.                                     <div id="fountainG">
  307.                                         <div id="fountainG_1" class="fountainG"></div>
  308.                                         <div id="fountainG_2" class="fountainG"></div>
  309.                                         <div id="fountainG_3" class="fountainG"></div>
  310.                                         <div id="fountainG_4" class="fountainG"></div>
  311.                                         <div id="fountainG_5" class="fountainG"></div>
  312.                                         <div id="fountainG_6" class="fountainG"></div>
  313.                                         <div id="fountainG_7" class="fountainG"></div>
  314.                                         <div id="fountainG_8" class="fountainG"></div>
  315.                                     </div>
  316.                                 </div>
  318.                                 {### Выбор времени и даты ###}
  319.                                 <div class="col-lg-6">
  320.                                     <div class="consultation-form-section">
  321.                                         <div class="consultation-form-section__block">
  322.                                             <p class="consultation-form-section__title">{{ 'multi_consultation.step_2.date_title'|trans({}, 'dc_base') }}</p>
  324.                                             <div class="date-list">
  325.                                                 <label v-for="(date, idx) in model.displayDays" class="date-list__item">
  326.                                                     <input  type="radio"
  327.                                                         v-model="model.date"
  328.                                                         :value="date"
  329.                                                         :name="'td-date'+model.testDriveCarId"
  330.                                                         :disabled="currentCar > 0"
  331.                                                         @change="loadConsultants(model,date)"
  332.                                                     >
  333.                                                     <span class="date-list__value" v-html="getWeekDay(date)+' '+date.getDate()+'.'+('0' + (date.getMonth()+1)).slice(-2)"></span>
  335.                                                     <svg class="icon" role="presentation"><use xlink:href="#icon-circle-check"></use></svg>
  336.                                                 </label>
  338.                                                 <label class="date-list__datepicker" :for="'datepickerInput-' + idx">
  339.                                                     <vue-datetime
  340.                                                         class="theme-site"
  341.                                                         :min-datetime="toISOString(new Date(), true)"
  342.                                                         v-model="userDate"
  343.                                                         :phrases="{ok: '{{ 'multi_consultation.btn.select'|trans({}, 'dc_base') }}', cancel: '{{ 'multi_consultation.btn.back'|trans({}, 'dc_base') }}'}"
  344.                                                     >
  345.                                                         <span slot="after" class="date-list__btn">
  346.                                                             <svg class="icon" role="presentation"><use xlink:href="#icon-calendar"></use></svg>
  347.                                                         </span>
  348.                                                     </vue-datetime>
  349.                                                 </label>
  350.                                             </div>
  352.                                         </div>
  354.                                         <div class="consultation-form-section__block">
  355.                                             <p class="consultation-form-section__title">{{ 'multi_consultation.step_2.time_title'|trans({}, 'dc_base') }}</p>
  357.                                             <div v-if="currentCar == 0 && Object.keys(model.bothTime).length" class="time-list">
  358.                                                 <label
  359.                                                     v-for="time in model.bothTime"
  360.                                                     class="time-list__item"
  361.                                                 >
  362.                                                     <input
  363.                                                         type="radio"
  364.                                                         :disabled="time == selectedCars[0].time && currentCar > 0"
  365.                                                         :name="'td-time'+model.testDriveCarId"
  366.                                                         :value="time"
  367.                                                         v-model="model.time"
  368.                                                         @change="setCons(model)"
  369.                                                     >
  370.                                                     <span class="time-list__value" v-html="time"></span>
  371.                                                 </label>
  372.                                             </div>
  373.                                             <div v-if="currentCar > 0 && model.bothTimeUpdate && Object.keys(model.bothTimeUpdate).length > 1" class="time-list">
  374.                                                 <label  v-for="time in model.bothTimeUpdate"
  375.                                                         class="time-list__item">
  376.                                                     <input  type="radio"
  377.                                                             :disabled="selectedTimes.indexOf(time) >= 0 && currentCar > 0"
  378.                                                             :name="'td-time'+model.testDriveCarId"
  379.                                                             :value="time"
  380.                                                             v-model="model.time"
  381.                                                             @change="setCons(model)"
  382.                                                     >
  383.                                                     <span class="time-list__value" v-html="time"></span>
  384.                                                 </label>
  385.                                             </div>
  386.                                             <div v-if="(currentCar > 0
  387.                                                 && model.bothTimeUpdate
  388.                                                 && Object.keys(model.bothTimeUpdate).length <= 1)
  389.                                                 || (currentCar == 0 && !Object.keys(model.bothTime).length)
  390.                                                 || !canNextStep" class="consultation-form-section__msg">
  391.                                                 {{ 'multi_consultation.step_2.no_free_time_start'|trans({}, 'dc_base') }}
  392.                                                 <button type="button" class="btn-txt" @click="currentCar = 0">
  393.                                                     {{ 'multi_consultation.step_2.other_date'|trans({}, 'dc_base') }}
  394.                                                 </button>
  395.                                                  {{ 'multi_consultation.step_2.or'|trans({}, 'dc_base') }}
  396.                                                  <button type="button" class="btn-txt" @click="selectedCars.slice(currentCar,1)">
  397.                                                     {{ 'multi_consultation.step_2.reject'|trans({}, 'dc_base') }}
  398.                                                  </button>
  399.                                                 {{ 'multi_consultation.step_2.no_free_time_end'|trans({}, 'dc_base') }}
  400.                                             </div>
  401.                                         </div>
  402.                                     </div>
  403.                                 </div>
  405.                                 {### Выбор консультанта ###}
  406.                                 <div class="col-lg-6">
  407.                                     <div class="consultation-form-section">
  408.                                         <p class="consultation-form-section__title">{{ 'multi_consultation.step_2.consultant_title'|trans({}, 'dc_base') }}</p>
  410.                                         <div  class="consultants-list" v-if="currentCar == 0">
  411.                                                 <div class="consultants-list__item">
  412.                                                     <label class="consultants-list__label" :class="{'--disabled': currentCar > 0}">
  413.                                                         <div class="consultants-list__photo --best"></div>
  414.                                                         <p class="consultants-list__name">{{ 'multi_consultation.step_2.choose_the_best'|trans({}, 'dc_base') }}</p>
  416.                                                         <span class="consultants-list__checkbox">
  417.                                                             <input
  418.                                                                 type="radio"
  419.                                                                 :name="'consultant'+model.testDriveCarId"
  420.                                                                 value="better"
  421.                                                                 :disabled = "currentCar > 0"
  422.                                                                 v-model="model.consultant"
  423.                                                                 checked
  424.                                                             >
  425.                                                             <span class="consultants-list__checkmark"></span>
  426.                                                         </span>
  427.                                                     </label>
  428.                                                 </div>
  430.                                                 <div class="consultants-list__item" v-for="(cons, idx) in model.consultants">
  431.                                                     <label class="consultants-list__label" :class="{'--disabled': currentCar > 0}">
  432.                                                         <div class="consultants-list__photo">
  433.                                                             <img :src="cons.Owner.Photo" alt="">
  434.                                                         </div>
  435.                                                         <p class="consultants-list__name" v-html="cons.Owner.Name"></p>
  437.                                                         <span class="consultants-list__checkbox">
  438.                                                             <input
  439.                                                                 type="radio"
  440.                                                                 :name="'consultant'+model.testDriveCarId"
  441.                                                                 :value="cons.Owner.Id"
  442.                                                                 :disabled = "currentCar > 0"
  443.                                                                 v-model="model.consultant"
  444.                                                             >
  445.                                                             <span class="consultants-list__checkmark"></span>
  446.                                                         </span>
  447.                                                     </label>
  448.                                                 </div>
  449.                                         </div>
  450.                                         <div v-else>
  451.                                                 <div class="consultants-list__item" v-if="selectedCars[currentCar] && selectedCars[currentCar].consultant != 'better' && selectedCars[currentCar].consultants.length">
  452.                                                     <label class="consultants-list__label --disabled">
  453.                                                         <div class="consultants-list__photo">
  454.                                                             <img :src="selectedCars[currentCar].consultants[0].Owner.Photo" alt="">
  455.                                                         </div>
  456.                                                         <p class="consultants-list__name" v-html="selectedCars[currentCar].consultants[0].Owner.Name"></p>
  458.                                                         <span class="consultants-list__checkbox">
  459.                                                             <input
  460.                                                                     type="radio"
  461.                                                                     :name="'consultant'+model.testDriveCarId"
  462.                                                                     :value="selectedCars[currentCar].consultants[0]"
  463.                                                                     :disabled = "true"
  464.                                                                     checked
  465.                                                                     {# v-model="model.consultant" #}
  466.                                                             >
  467.                                                             <span class="consultants-list__checkmark"></span>
  468.                                                         </span>
  469.                                                     </label>
  470.                                                 </div>
  471.                                                 <div class="consultants-list__item" v-if="selectedCars[currentCar] && selectedCars[currentCar].consultant == 'better'">
  472.                                                     <label class="consultants-list__label --disabled">
  473.                                                         <div class="consultants-list__photo --best"></div>
  474.                                                         <p class="consultants-list__name">{{ 'multi_consultation.step_2.choose_the_best'|trans({}, 'dc_base') }}</p>
  476.                                                         <span class="consultants-list__checkbox">
  477.                                                             <input
  478.                                                                     type="radio"
  479.                                                                     :name="'consultant'+model.testDriveCarId"
  480.                                                                     :value="'better'"
  481.                                                                     :disabled = "currentCar > 0"
  482.                                                                     checked
  483.                                                                     {# v-model="model.consultant" #}
  484.                                                             >
  485.                                                             <span class="consultants-list__checkmark"></span>
  486.                                                         </span>
  487.                                                     </label>
  488.                                                 </div>
  489.                                         </div>
  490.                                     </div>
  491.                                 </div>
  493.                             </div>
  494.                         </div>
  495.                     </div>
  497.                 </div>
  500.             </div>
  501.         </div>
  504.         <div v-if="step === 3">
  505.             <div class="consultation-form" v-if="!signRequestId" @input="canSubmit = true">
  506.                 <div class="row">
  507.                     <div class="col-md-4 consultation-form__line">
  508.                         <input type="text" class="consultation-form__input" id="form-name" placeholder="{{ 'multi_consultation.step_3.name'|trans({}, 'dc_base') }}" required v-model="formData.name" :class="{'--error': isFormTouched}">
  509.                     </div>
  510.                     <div class="col-md-4 consultation-form__line">
  511.                         <input type="text" class="consultation-form__input" id="form-surname" placeholder="{{ 'multi_consultation.step_3.surname'|trans({}, 'dc_base') }}" required v-model="formData.surname">
  512.                     </div>
  513.                     <div class="col-md-4 consultation-form__line">
  514.                         <input type="text" class="consultation-form__input" v-mask="'+38(###)###-##-##'" id="form-phone" placeholder="{{ 'multi_consultation.step_3.phone'|trans({}, 'dc_base') }}" required v-model="formData.phone">
  515.                     </div>
  516.                 </div>
  518.                 <div class="consultation-form___policy-line">
  519.                     <div class="form-group checkbox style-b" v-if="privacyUrl">
  520.                         <label class="checkboxes__item-privacy">
  521.                             <input type="checkbox" v-model="checkPrivacy"/>
  522.                             <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  523.                             <div class="checkbox__body">{{ 'callback_widget.privacy'|trans({}, 'dc_base') }} <a :href="privacyUrl" target="_blank">{{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}</a></div>
  524.                         </label>
  525.                     </div>
  526.                 </div>
  528.                 <div class="row">
  529.                     <div class="col-lg-9">
  530.                         <div class="consultation-form__group mb-4">
  531.                             <label class="check-label">
  532.                                 <input type="radio" name="connect_type" value="1" v-model="formData.connectionType">
  533.                                 <span class="check-label__checkmark">
  534.                                     <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  535.                                 </span>
  537.                                 <span class="check-label__value">
  538.                                     <svg class="icon --phone" width="18px" height="17px" role="presentation"><use xlink:href="#icon-phone"></use></svg>
  539.                                     {{ 'multi_consultation.step_3.phone'|trans({}, 'dc_base') }}
  540.                                 </span>
  541.                             </label>
  542.                             <label class="check-label">
  543.                                 <input type="radio" name="connect_type" value="3" v-model="formData.connectionType">
  544.                                 <span class="check-label__checkmark">
  545.                                     <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  546.                                 </span>
  548.                                 <span class="check-label__value">
  549.                                     <svg class="icon" width="24px" height="21px" role="presentation"><use xlink:href="#icon-viber"></use></svg>
  550.                                     Viber
  551.                                 </span>
  552.                             </label>
  553.                             <label class="check-label">
  554.                                 <input type="radio" name="connect_type" value="2" v-model="formData.connectionType">
  555.                                 <span class="check-label__checkmark">
  556.                                     <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  557.                                 </span>
  559.                                 <span class="check-label__value">
  560.                                     <svg class="icon" width="24px" height="20px" role="presentation"><use xlink:href="#icon-whatsapp"></use></svg>
  561.                                     Whatsapp
  562.                                 </span>
  563.                             </label>
  565.                         </div>
  567.                         <div v-if="options.type !== 'online'" class="consultation-form__call-me">
  568.                             <label class="check-label">
  569.                                 <input v-model="callbackInput" type="checkbox" name="connect_type" value="">
  570.                                 <span class="check-label__checkmark">
  571.                                     <svg class="icon" role="presentation"><use xlink:href="#icon-check"></use></svg>
  572.                                 </span>
  574.                                 <span class="check-label__value">{{ 'multi_consultation.step_3.call_me'|trans({}, 'dc_base') }}</span>
  575.                             </label>
  576.                         </div>
  577.                     </div>
  578.                     <div class="col-lg-3">
  579.                         <button type="submit" :disabled="!canSubmit" class="c-btn --green consultation-form__submit" @click="sendForm">{{ 'multi_consultation.step_3.submit'|trans({}, 'dc_base') }}</button>
  580.                     </div>
  581.                 </div>
  583.                 <div class="consultation-form__info">
  584.                     <p>{{ 'multi_consultation.info.p1'|trans({}, 'dc_base') }}</p>
  585.                     <p>{{ 'multi_consultation.info.p2'|trans({}, 'dc_base') }}</p>
  586.                 </div>
  587.             </div>
  589.             {#  >>>>>> Электроная подпись клиента <<<<<<  #}
  590.             <div class="container" v-if="signRequestId && options.isTestDrive">
  591.                 <div class="row">
  592.                     <div class="col-md-12">
  593.                         <p class="td_widget-title">{{ 'td.sign_title'|trans({}, 'dc_base') }}</p>
  594.                     </div>
  595.                 </div>
  596.                 <div class="row">
  597.                     <div class="col-md-8">
  598.                         <p class="td_widget-rules">{{ 'td.sing_text'|trans({}, 'dc_base') }}
  599.                             <a target="_blank" :href="signRequestUrl">
  600.                                 {{ 'td.sign_rules'|trans({}, 'dc_base') }}
  601.                             </a>
  602.                         </p>
  603.                     </div>
  604.                     <div class="col-md-12">
  605.                         <hr class="td_widget-hr">
  606.                         <form action="" class="row td_widget-form">
  607.                             <div class="col-md-12">
  608.                                 <div class="row">
  609.                                     <div class="col-md-8">
  610.                                         <span class="td_widget-form-desc td_widget-rules">{{ 'td.sign_info1'|trans({}, 'dc_base') }} <span v-html="formData.phone"></span> (<a href="#" @click.stop.prvent="signRequestId = null">{{ 'td.sign_info2'|trans({}, 'dc_base') }}</a>) <br> {{ 'td.sign_info3'|trans({}, 'dc_base') }}</span>
  611.                                     </div>
  612.                                 </div>
  613.                             </div>
  614.                             <div class="col-md-3 mt-3">
  615.                                 <div class="form-group">
  616.                                     <input type="text" id="smsCode" v-model="smsCode"  required="required" placeholder="{{ 'td.sign_code'|trans({}, 'dc_base') }}" class="form-control" >
  617.                                     <span @click="resendCode" style="color: grey; font-size: 12px; cursor: pointer">{{ 'td.resend'|trans({}, 'dc_base') }}</span>
  618.                                 </div>
  619.                                 <button @click.stop.prevent="sign" class="c-btn --green w-100">{{ 'td.sign_sign'|trans({}, 'dc_base') }}</button>
  620.                             </div>
  621.                         </form>
  622.                     </div>
  623.                 </div>
  624.             </div>
  625.         </div>
  627.         <header class="consultation-form-header">
  628.             <div></div>
  629.             <div class="consultation-form-header__actions align-self-end">
  630.                 <button v-if="step == 1 && brand" type="button" class="c-btn" @click="goBack">{{ 'multi_consultation.btn.back'|trans({}, 'dc_base') }}</button>
  631.                 <button v-if="step > 1" type="button" class="c-btn" @click="goBack">{{ 'multi_consultation.btn.back'|trans({}, 'dc_base') }}</button>
  633.                 <button v-if="step < 3" type="button" class="c-btn --border --next"
  634.                         @click="goToNextStep()"
  635.                         :disabled="!canNextStep"
  636.                 >
  637.                     {{ 'multi_consultation.btn.next'|trans({}, 'dc_base') }}
  638.                     <svg class="icon" role="presentation"><use xlink:href="#icon-arrow"></use></svg>
  639.                 </button>
  640.             </div>
  641.         </header>
  642.     </div>
  643. </div>
  647. <svg width="0" height="0" class="hidden">
  648.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33" id="icon-edit">
  649.         <rect x="0.25" y="9.51318" width="23.0789" height="23.0789" rx="1.75" stroke="currentColor" stroke-opacity="0.25" stroke-width="0.5"/>
  650.         <path d="M8.42109 28.6316L5.89478 16.8421L10.7748 3.01524L11.7895 0L32 9.26316L26.9474 21.0526L20.2106 26.9474L8.42109 28.6316Z" fill="white"/>
  651.         <path id="pen" d="M16.0598 21.4402L12.223 22.6272C12.0408 22.6835 11.8437 22.6652 11.675 22.5762C11.5063 22.4873 11.3799 22.3349 11.3236 22.1528L10.1366 18.3159C10.1087 18.2257 10.0989 18.1309 10.1076 18.0369C10.1164 17.9429 10.1435 17.8515 10.1876 17.768L17.3036 4.27729C17.3926 4.10862 17.5449 3.98221 17.7271 3.92585C17.9092 3.8695 18.1063 3.88782 18.275 3.97678L23.2988 6.62669C23.4674 6.71566 23.5938 6.86798 23.6502 7.05016C23.7066 7.23233 23.6882 7.42943 23.5993 7.5981L16.4832 21.0888C16.4392 21.1723 16.3791 21.2463 16.3065 21.3066C16.2338 21.3669 16.15 21.4123 16.0598 21.4402Z" fill="white" stroke="currentColor" stroke-width="0.652472" stroke-linecap="round" stroke-linejoin="round"/>
  652.         <path d="M15.7405 7.23914L22.0361 10.5599" stroke="currentColor" stroke-width="0.652472" stroke-linecap="round" stroke-linejoin="round"/>
  653.         <path d="M16.2857 21.3222L10.1047 18.0619" stroke="currentColor" stroke-width="0.652472" stroke-linecap="round" stroke-linejoin="round"/>
  654.     </symbol>
  655.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8" id="icon-arrow">
  656.         <path d="M4.35355 3.64645C4.54882 3.84171 4.54882 4.15829 4.35355 4.35355L1.17157 7.53553C0.976311 7.7308 0.659728 7.7308 0.464466 7.53553C0.269204 7.34027 0.269204 7.02369 0.464466 6.82843L3.29289 4L0.464466 1.17157C0.269204 0.976311 0.269204 0.659728 0.464466 0.464466C0.659728 0.269204 0.976311 0.269204 1.17157 0.464466L4.35355 3.64645ZM3 3.5H4V4.5H3V3.5Z" fill="currentColor"/>
  657.     </symbol>
  658.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8" id="icon-check">
  659.         <path d="M9 1L3.5 6.5L1 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  660.     </symbol>
  661.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" id="icon-arrow-l">
  662.         <path d="M0.292893 7.29289C-0.0976315 7.68342 -0.0976314 8.31658 0.292893 8.70711L6.65686 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928933C7.68054 0.538408 7.04738 0.538408 6.65685 0.928933L0.292893 7.29289ZM15 7L1 7L1 9L15 9L15 7Z" fill="currentColor"/>
  663.     </symbol>
  664.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" id="icon-arrow-r">
  665.         <path d="M14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289L8.34314 0.928931C7.95262 0.538407 7.31946 0.538407 6.92893 0.928932C6.53841 1.31946 6.53841 1.95262 6.92893 2.34315L12.5858 8L6.92893 13.6569C6.53841 14.0474 6.53841 14.6805 6.92893 15.0711C7.31946 15.4616 7.95262 15.4616 8.34315 15.0711L14.7071 8.70711ZM8.74228e-08 9L14 9L14 7L-8.74228e-08 7L8.74228e-08 9Z" fill="currentColor"/>
  666.     </symbol>
  667.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" id="icon-calendar">
  668.         <path d="M20.3125 3.90625H4.6875C4.25603 3.90625 3.90625 4.25603 3.90625 4.6875V20.3125C3.90625 20.744 4.25603 21.0938 4.6875 21.0938H20.3125C20.744 21.0938 21.0938 20.744 21.0938 20.3125V4.6875C21.0938 4.25603 20.744 3.90625 20.3125 3.90625Z" stroke="currentColor" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
  669.         <path d="M17.1875 2.34375V5.46875" stroke="currentColor" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
  670.         <path d="M7.8125 2.34375V5.46875" stroke="currentColor" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
  671.         <path d="M3.90625 8.59375H21.0938" stroke="currentColor" stroke-width="1.5625" stroke-linecap="round" stroke-linejoin="round"/>
  672.         <circle cx="10" cy="12" r="1" fill="currentColor"/>
  673.         <circle cx="15" cy="12" r="1" fill="currentColor"/>
  674.         <circle cx="10" cy="17" r="1" fill="currentColor"/>
  675.         <circle cx="15" cy="17" r="1" fill="currentColor"/>
  676.     </symbol>
  677.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 27" id="icon-road">
  678.         <path d="M24.6343 23.6619C26.267 23.6619 27.5905 22.5639 27.5905 21.2094C27.5905 19.8549 26.267 18.7568 24.6343 18.7568C23.0017 18.7568 21.6782 19.8549 21.6782 21.2094C21.6782 22.5639 23.0017 23.6619 24.6343 23.6619Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  679.         <path d="M8.86827 6.49414H20.6927C21.7381 6.49414 22.7406 6.83866 23.4798 7.45192C24.219 8.06517 24.6342 8.89693 24.6342 9.7642C24.6342 10.6315 24.219 11.4632 23.4798 12.0765C22.7406 12.6897 21.7381 13.0343 20.6927 13.0343H8.86827C7.56158 13.0343 6.30842 13.4649 5.38445 14.2315C4.46048 14.9981 3.94141 16.0377 3.94141 17.1218C3.94141 18.2059 4.46048 19.2456 5.38445 20.0122C6.30842 20.7788 7.56158 21.2094 8.86827 21.2094H21.6781" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  680.     </symbol>
  681.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 27" id="icon-time">
  682.         <path d="M16.7019 23.6621C23.2324 23.6621 28.5264 19.2699 28.5264 13.8519C28.5264 8.43392 23.2324 4.04175 16.7019 4.04175C10.1714 4.04175 4.87744 8.43392 4.87744 13.8519C4.87744 19.2699 10.1714 23.6621 16.7019 23.6621Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10"/>
  683.         <path d="M16.7019 8.12915V13.8518H23.5995" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  684.     </symbol>
  685.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" id="icon-glass">
  686.         <path d="M6.5625 9.0625H11.5625" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  687.         <path d="M9.0625 6.5625V11.5625" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  688.         <path d="M9.0625 15.6248C12.6869 15.6248 15.625 12.6866 15.625 9.06226C15.625 5.43789 12.6869 2.49976 9.0625 2.49976C5.43813 2.49976 2.5 5.43789 2.5 9.06226C2.5 12.6866 5.43813 15.6248 9.0625 15.6248Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  689.         <path d="M13.7026 13.7029L17.4996 17.4998" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  690.     </symbol>
  691.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" id="icon-viber">
  692.         <path d="M7.10521 0.00229972C5.83691 0.0176102 3.11015 0.226031 1.58503 1.62521C0.450569 2.7493 0.0544711 4.41124 0.00804561 6.4663C-0.0304776 8.51396 -0.0769031 12.3594 3.62972 13.4064V15.0012C3.62972 15.0012 3.60651 15.6393 4.02829 15.7702C4.54786 15.9346 4.8437 15.4437 5.33759 14.9162L6.25869 13.8746C8.7948 14.0855 10.7373 13.5995 10.961 13.5274C11.4756 13.363 14.3743 12.9925 14.8479 9.14663C15.3339 5.17479 14.6113 2.67226 13.307 1.54027H13.2991C12.9054 1.17775 11.3235 0.0250186 7.78925 0.0121775C7.78925 0.0121775 7.52699 -0.00560248 7.10521 0.00180583V0.00229972ZM7.14867 1.11898C7.50872 1.11651 7.72751 1.13182 7.72751 1.13182C10.719 1.13972 12.1468 2.04008 12.4836 2.34333C13.5821 3.28468 14.1481 5.54076 13.7337 8.85672C13.34 12.0719 10.9891 12.2754 10.554 12.4142C10.3688 12.4735 8.658 12.8952 6.50267 12.7565C6.50267 12.7565 4.89753 14.6935 4.39574 15.1923C4.31623 15.2797 4.22338 15.3054 4.16411 15.2926C4.07916 15.2718 4.05348 15.1666 4.05842 15.0224L4.07373 12.3757C0.930134 11.5064 1.11534 8.22652 1.14893 6.51322C1.18745 4.79992 1.50897 3.39827 2.46612 2.44902C3.75468 1.28394 6.07002 1.12688 7.14769 1.11898H7.14867ZM7.38574 2.83178C7.35987 2.83152 7.3342 2.83638 7.31021 2.84609C7.28623 2.8558 7.2644 2.87015 7.24599 2.88833C7.22758 2.90651 7.21295 2.92816 7.20295 2.95202C7.19294 2.97588 7.18776 3.00149 7.18769 3.02736C7.18769 3.13799 7.27758 3.22541 7.38574 3.22541C7.87543 3.2161 8.36212 3.30382 8.81774 3.48353C9.27336 3.66323 9.6889 3.93136 10.0404 4.27245C10.758 4.96933 11.1077 5.90574 11.121 7.13009C11.121 7.23825 11.2084 7.32814 11.3191 7.32814V7.32023C11.3712 7.32037 11.4213 7.29988 11.4584 7.26325C11.4955 7.22661 11.5166 7.17679 11.5171 7.12465C11.5411 6.54836 11.4476 5.97321 11.2424 5.43416C11.0372 4.89511 10.7245 4.40341 10.3234 3.98896C9.54156 3.22492 8.55082 2.83129 7.38574 2.83129V2.83178ZM4.78246 3.28468C4.64266 3.26425 4.50009 3.29231 4.37846 3.36419H4.36809C4.08571 3.52971 3.83134 3.73892 3.61441 3.98402C3.43414 4.19244 3.33635 4.40333 3.31067 4.60632C3.29536 4.72732 3.30573 4.84833 3.34179 4.9639L3.35463 4.9718C3.55762 5.56841 3.82283 6.14231 4.14682 6.68263C4.56417 7.44171 5.07778 8.14373 5.67491 8.77128L5.69269 8.79696L5.72085 8.8177L5.73863 8.83844L5.75937 8.85623C6.38919 9.45511 7.09291 9.97112 7.85345 10.3917C8.72269 10.8649 9.25017 11.0886 9.56675 11.1814V11.1864C9.6596 11.2145 9.74405 11.2274 9.829 11.2274C10.0988 11.2076 10.3542 11.0981 10.5545 10.9162C10.7985 10.6993 11.0054 10.4438 11.1669 10.1601V10.1551C11.3186 9.86968 11.2672 9.59953 11.0484 9.41679C10.6102 9.03378 10.1364 8.69358 9.63342 8.40086C9.29659 8.21812 8.95433 8.32875 8.81555 8.51396L8.51971 8.88685C8.36808 9.07205 8.09249 9.04637 8.09249 9.04637L8.08459 9.05131C6.02952 8.52631 5.48131 6.44556 5.48131 6.44556C5.48131 6.44556 5.45563 6.16256 5.64577 6.01835L6.01619 5.72004C6.1935 5.57582 6.31697 5.23405 6.12682 4.89673C5.83612 4.39304 5.49667 3.9191 5.11336 3.48174C5.02957 3.37863 4.912 3.30848 4.78147 3.28369L4.78246 3.28468ZM7.72751 3.87142C7.46526 3.87142 7.46526 4.26751 7.72998 4.26751C8.05608 4.2728 8.37795 4.34231 8.67718 4.47205C8.97641 4.60179 9.24714 4.78923 9.4739 5.02366C9.68075 5.25184 9.8397 5.51921 9.94133 5.80995C10.043 6.10068 10.0852 6.40885 10.0656 6.71621C10.0665 6.76823 10.0877 6.81782 10.1247 6.85437C10.1617 6.89093 10.2116 6.91154 10.2636 6.91179L10.2715 6.92216C10.3239 6.92177 10.3741 6.90078 10.4111 6.86373C10.4482 6.82667 10.4692 6.77652 10.4696 6.72411C10.4874 5.93932 10.2434 5.28097 9.7648 4.7535C9.28375 4.22603 8.61256 3.93019 7.75566 3.87142H7.72751ZM8.05199 4.93624C7.78184 4.92834 7.77147 5.33234 8.03915 5.34024C8.6901 5.37382 9.00619 5.70275 9.04767 6.37938C9.04858 6.43074 9.06955 6.47971 9.1061 6.5158C9.14265 6.55189 9.19188 6.57224 9.24325 6.57249H9.25115C9.27756 6.57136 9.30348 6.56497 9.3274 6.55372C9.35132 6.54246 9.37275 6.52655 9.39045 6.50692C9.40815 6.48728 9.42177 6.46432 9.4305 6.43937C9.43923 6.41442 9.4429 6.38798 9.4413 6.3616C9.39488 5.47951 8.91383 4.98266 8.0599 4.93673H8.05199V4.93624Z" fill="currentColor"/>
  693.     </symbol>
  694.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" id="icon-mail">
  695.         <path d="M13.125 3.28125L7.5 8.4375L1.875 3.28125" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  696.         <path d="M1.875 3.28125H13.125V11.25C13.125 11.3743 13.0756 11.4935 12.9877 11.5815C12.8998 11.6694 12.7806 11.7188 12.6562 11.7188H2.34375C2.21943 11.7188 2.1002 11.6694 2.01229 11.5815C1.92439 11.4935 1.875 11.3743 1.875 11.25V3.28125Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  697.     </symbol>
  698.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" id="icon-phone">
  699.         <path d="M5.41853 7.3135C5.90476 8.30756 6.71055 9.10968 7.70681 9.59138C7.77971 9.62592 7.86034 9.64089 7.94077 9.6348C8.0212 9.62872 8.09866 9.60179 8.16553 9.55668L9.63246 8.57849C9.69734 8.53523 9.77198 8.50884 9.84964 8.50171C9.92729 8.49457 10.0055 8.50692 10.0772 8.53764L12.8215 9.71379C12.9148 9.75339 12.9926 9.82222 13.0433 9.9099C13.094 9.99758 13.1148 10.0994 13.1027 10.1999C13.0159 10.8787 12.6848 11.5025 12.1712 11.9547C11.6576 12.4069 10.9968 12.6563 10.3125 12.6564C8.19906 12.6564 6.17217 11.8168 4.67774 10.3224C3.18331 8.82793 2.34375 6.80105 2.34375 4.6876C2.34379 4.00333 2.59324 3.34253 3.0454 2.82894C3.49756 2.31534 4.12142 1.98417 4.80018 1.89743C4.90073 1.88526 5.00252 1.9061 5.0902 1.95681C5.17788 2.00752 5.24671 2.08535 5.28631 2.17857L6.46349 4.92532C6.49394 4.99637 6.50634 5.07385 6.4996 5.15085C6.49286 5.22785 6.46718 5.30199 6.42486 5.36667L5.45007 6.8561C5.4057 6.92311 5.37947 7.00047 5.37395 7.08064C5.36842 7.16081 5.38378 7.24104 5.41853 7.3135V7.3135Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  700.     </symbol>
  701.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21" id="icon-whatsapp">
  702.         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0859 2.92071C16.1634 1.99214 15.0658 1.25584 13.8567 0.754494C12.6476 0.253145 11.3511 -0.00329476 10.0421 3.19568e-05C4.55351 3.19568e-05 0.0854131 4.46702 0.0831946 9.95786C0.0831946 11.7127 0.541319 13.4254 1.41209 14.9362L0 20.0954L5.27897 18.7099C6.73919 19.5048 8.37513 19.9216 10.0377 19.9223H10.0421C15.5296 19.9223 19.9977 15.4554 20 9.96451C20.0037 8.65613 19.7481 7.35996 19.248 6.15095C18.7478 4.94193 18.013 3.84403 17.0859 2.92071ZM10.0421 18.2418H10.0388C8.5563 18.242 7.10108 17.8431 5.82583 17.0871L5.52412 16.9074L2.39156 17.7293L3.22684 14.6755L3.0305 14.3627C2.20165 13.0432 1.76287 11.5161 1.76483 9.95786C1.76705 5.39436 5.47974 1.68167 10.0455 1.68167C11.1328 1.67925 12.2098 1.89252 13.2142 2.30912C14.2186 2.72573 15.1304 3.3374 15.8968 4.10873C16.6673 4.87639 17.278 5.78914 17.6937 6.79425C18.1093 7.79935 18.3216 8.87687 18.3183 9.96451C18.3161 14.528 14.6034 18.2418 10.0421 18.2418ZM14.5823 12.0422C14.3327 11.9168 13.1103 11.3156 12.8818 11.2324C12.6544 11.1492 12.4892 11.1082 12.3228 11.3566C12.1564 11.6051 11.6794 12.1653 11.5341 12.3317C11.3888 12.4981 11.2435 12.518 10.995 12.3938C10.7465 12.2696 9.94452 12.0067 8.99388 11.1592C8.254 10.4992 7.75484 9.68498 7.60952 9.4354C7.46421 9.18581 7.59399 9.05159 7.71934 8.92736C7.83138 8.81643 7.96782 8.63673 8.09205 8.49142C8.21629 8.3461 8.25733 8.24294 8.34053 8.07655C8.42372 7.91017 8.38268 7.76485 8.31945 7.64061C8.25733 7.51527 7.75927 6.29065 7.55184 5.79259C7.35107 5.31006 7.14585 5.3744 6.99278 5.36774C6.83424 5.36126 6.67557 5.3583 6.5169 5.35887C6.39073 5.36208 6.26658 5.39133 6.15225 5.44478C6.03791 5.49822 5.93584 5.57472 5.85246 5.66946C5.62395 5.91904 4.98169 6.52026 4.98169 7.74489C4.98169 8.96951 5.87353 10.1531 5.99777 10.3195C6.12201 10.4859 7.75262 12.9983 10.2485 14.0765C10.843 14.3328 11.3067 14.4859 11.6672 14.6012C12.2629 14.7909 12.8053 14.7632 13.2346 14.6999C13.7127 14.629 14.7066 14.0987 14.914 13.5175C15.1214 12.9362 15.1214 12.4382 15.0593 12.3339C14.9972 12.2296 14.8297 12.1664 14.5823 12.0422Z" fill="currentColor"/>
  703.     </symbol>
  704.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="icon-circle-check">
  705.         <rect x="0.5" y="0.5" width="11" height="11" rx="5.5" stroke="white"/>
  706.         <path d="M8.39961 4.19995L5.09961 7.49995L3.59961 5.99995" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  707.     </symbol>
  708. </svg>