templates/components/sir-trevor/operators/operators.html.twig line 1

Open in your IDE?
  1. <div class="stepper-wrapper mt-[80px] mb-[24px]">
  2.     <div class="stepper-item active">
  3.         <div class="step-counter">01</div>
  4.         <div class="step-name">{% trans from 'tarif_choice' %}Тарифні плани{% endtrans %}</div>
  5.     </div>
  6.     <div class="stepper-item ">
  7.         <div class="step-counter">02</div>
  8.         <div class="step-name">{% trans from 'tarif_choice' %}Реєстрація E-mail{% endtrans %}</div>
  9.     </div>
  10.     <div class="stepper-item ">
  11.         <div class="step-counter">03</div>
  12.         <div class="step-name">{% trans from 'tarif_choice' %}Отримання номеру{% endtrans %}</div>
  13.     </div>
  14.     <div class="stepper-item">
  15.         <div class="step-counter">04</div>
  16.         <div class="step-name">{% trans from 'tarif_choice' %}Підтвердження та оплата{% endtrans %}</div>
  17.     </div>
  18.     <div class="stepper-item">
  19.         <div class="step-counter">05</div>
  20.         <div class="step-name">{% trans from 'tarif_choice' %}Отримання eSIM{% endtrans %}</div>
  21.     </div>
  22. </div>
  25. <div class="rounded-[16px] p-[16px] md:p-[32px] border border-[#E2E2E9] bg-[#F7F7FA]" data-anchor="operators">
  27.     <div class="flex justify-between items-center relative">
  29.         <div class="flex flex-col gap-[16px] text-center mx-auto max-w-[485px]">
  30.             <div
  31.                     class="text-[24px] font-medium text-white text-center max-w-max  {% if companyStyles.titleTextAlign == 'center' %}mx-auto{% else %}md:mx-auto{% endif %}"
  32.                     style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::TITLE_STYLES')) }}"
  33.             >{% trans from 'main' %}Вибір оператора{% endtrans %}
  35.             </div>
  36.             <div class="text-[14px] font-medium text-[#A0A4AE] mb-[22px] leading-[18px] mx-auto text-{{ companyStyles.descriptionTextAlign }} {% if companyStyles.descriptionTextAlign == 'center' %}max-w-[360px]{% endif %}">{% trans from 'tarif_choice' %}Для того, щоб перейти до вибору тарифного плану, необхідно обрати мобільного оператора.{% endtrans %}</div>
  37.         </div>
  40.         <div class="absolute right-[-10px] top-[-10px] md:right-0 md:top-0">
  41.             <div class="relative group">
  42.                 <button data-modal="#modal_faq"
  43.                         class="js--modal hover:underline transition ease-in-out duration-150 block text-center w-[34px] h-[34px] p-[7px] md:w-[48px] md:h-[48px] md:p-[14px] bg-transparent border rounded-[50%] border-none font-semibold text-[16px] focus:outline-none"
  44.                         style="color: {{ companyStyles.linkTextColor }}; --custom-color: {{ companyStyles.buttonColor }}; background-color: rgba(from var(--custom-color) r g b / 0.2)">
  45.                     <svg class="w-[20px] h-[20px]"
  46.                          style="fill: {{ companyStyles.buttonColor }}; border-color: {{ companyStyles.buttonColor }}">
  47.                         <use href="{{ asset('build/sprite.svg#question') }}"></use>
  48.                     </svg>
  49.                 </button>
  51.                 <!-- Тултип -->
  52.                 <div class="w-[160px] text-right text-[14px] absolute hidden group-hover:block bg-[#1A1A1A] text-white rounded py-[4px] px-[8px] right-full top-1/2 -translate-y-1/2 mr-2 transition-opacity duration-200 opacity-0 group-hover:opacity-100">
  53.                     {% trans from 'tarif_choice' %}Поширені питання та відповіді{% endtrans %}
  54.                     <!-- Стрелка -->
  55.                     <div class="absolute w-0 h-0 border-4 border-transparent border-l-[#1A1A1A] -right-2 top-1/2 -translate-y-1/2"></div>
  56.                 </div>
  57.             </div>
  58.         </div>
  60.     </div>
  63.     <div class="mt-[14px] p-0 md:p-[18px] max-w-max min-w-full mx-auto ">
  64.         <div class="flex flex-col md:flex-row flex-wrap xl:flex-nowrap gap-[16px] justify-center items-baseline mb-[32px] md:mb-[76px]">
  65.             {% for item in operators %}
  66.                 <div class="rounded-[16px] p-[16px] md:min-w-[394px] md:w-[394px] md:p-[24px] {% if item.active %}{% else %} opacity-60 pointer-events-none {% endif %} border border-[#E2E2E9] bg-white">
  67.                     {% if item.connectionError %}
  68.                     <div>
  69.                         {% else %}
  70.                             {% if item.isServerActive == true %}
  71.                                 <a href="{{ path('operator_tariff_page',{slug:item.slug}) }}">
  72.                             {% else %}
  73.                                 <div>
  74.                             {% endif %}
  75.                                 {% endif %}
  76.                                 <div class="flex items-center content-start gap-[16px]">
  77.                                     <div>
  78.                                         <svg class="w-[48px] h-[48px]">
  79.                                             {% if item.type == operatorLifecellType() %}
  80.                                                 <use href="{{ asset('build/sprite.svg#lifecell_rebrending') }}"></use>
  81.                                             {% elseif item.type == operatorVodafoneType() %}
  82.                                                 <use href="{{ asset('build/sprite.svg#vodafone') }}"></use>
  83.                                             {% else %}
  84.                                                 <use href="{{ asset('build/sprite.svg#kyivstar_logo') }}"></use>
  85.                                             {% endif %}
  86.                                         </svg>
  87.                                     </div>
  88.                                     <div class="text-[24px] text-[#1B2028] font-medium">{{ item.name }}</div>
  89.                                 </div>
  91.                                 <hr class="h-px my-[8px] bg-[#E2E2E9] border-0 ">
  92.                                 <p class="text-[14px] font-medium text-[#5B5B5B] leading-tight mb-[8px]">
  93.                                     {{ item.description }}
  94.                                 </p>
  95.                                 {#                                <div class="flex w-full justify-between items-center"> #}
  96.                                 {#                                    {% if item.connectionError %} #}
  97.                                 {#                                        <p class="text-[14px] font-semibold" style="color: red"> #}
  98.                                 {#                                            {% trans from 'main' %}Наразі послуга недоступна - спробуйте пізніше{% endtrans %} #}
  99.                                 {#                                        </p> #}
  100.                                 {#                                    {% else %} #}
  101.                                 {#                                        <p class="text-[14px] font-semibold" style="color: {{ companyStyles.linkTextColor }}"> #}
  102.                                 {#                                            {% trans from 'main' %}Обрати тариф та Купити eSIM{% endtrans %} #}
  103.                                 {#                                        </p> #}
  104.                                 {#                                        <div class="text-white bg-[#EDEDF1] hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-50 font-medium rounded-full text-sm p-[12px] text-center inline-flex items-center hover:ease-in duration-150"> #}
  105.                                 {#                                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 11"> #}
  106.                                 {#                                                <path fill-rule="evenodd" clip-rule="evenodd" fill="{{ companyStyles.linkTextColor }}" d="M11.6814 10.5123L16.316 5.87774C16.6004 5.59334 16.6004 5.13224 16.316 4.84784L11.6814 0.213299C11.397 -0.0711002 10.9359 -0.0711003 10.6515 0.213299C10.3671 0.497698 10.3671 0.958799 10.6515 1.2432L14.0429 4.63455L1.23606 4.63454C0.833861 4.63454 0.507813 4.96059 0.507813 5.36279C0.507813 5.76499 0.833861 6.09104 1.23606 6.09104L14.0429 6.09104L10.6515 9.48239C10.3671 9.76679 10.3671 10.2279 10.6515 10.5123C10.9359 10.7967 11.397 10.7967 11.6814 10.5123Z"/> #}
  107.                                 {#                                            </svg> #}
  108.                                 {#                                        </div> #}
  109.                                 {#                                    {% endif %} #}
  110.                                 {#                                </div> #}
  112.                                 {% if item.connectionError %}
  113.                             </div>
  114.                             {% else %}
  115.                             {% if item.isServerActive == true %}
  116.                         </a>
  117.                         {% else %}
  118.                     </div>
  119.                     {% endif %}
  120.                     {% endif %}
  121.                     {% if item.tariffs is not empty and item.connectionError is empty %}
  122.                         <div id="accordion-collapse" data-accordion="keep">
  123.                             <h2 id="accordion-collapse-heading-{{ item.type }}" class="peer">
  124.                                 <button type="button"
  125.                                         class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-3"
  126.                                         data-accordion-target="#accordion-collapse-body-{{ item.type }}"
  127.                                         aria-expanded="false" aria-controls="accordion-collapse-body-{{ item.type }}">
  128.                                     <span class="pointer-events-none">{% trans from 'main' %}Доступні тарифні плани{% endtrans %}</span>
  129.                                     <svg data-accordion-icon
  130.                                          class="pointer-events-none w-3 h-3 group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150"
  131.                                          aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
  132.                                          viewBox="0 0 10 6">
  133.                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
  134.                                               stroke-width="2" d="M9 5 5 1 1 5"/>
  135.                                     </svg>
  136.                                 </button>
  137.                             </h2>
  138.                             <div id="accordion-collapse-body-{{ item.type }}"
  139.                                  class="mt-[14px] peer-[.open]:block hidden"
  140.                                  aria-labelledby="accordion-collapse-heading-{{ item.type }}">
  141.                                 {% for tarif in item.tariffs %}
  142.                                     <div>
  143.                                         {% if item.isServerActive == true %}
  144.                                             <a href="{{ path('tariff_selected_page', {'tariff': tarif.id}) }}">
  145.                                         {% else %}
  146.                                             <div>
  147.                                         {% endif %}
  149.                                             <p class="font-medium text-[16px] hover:underline transition ease-in-out duration-150"
  150.                                                style="color: {{ companyStyles.linkTextColor }}">{{ tarif.name }}</p>
  151.                                             {% if item.type == operatorLifecellType() %}
  152.                                                 <p class="text-[#5B5B5B] font-medium text-[13px]">{% trans from 'tarif_choice' %}Після покупки та активації можно обрати один з тарифних планів: Вільний Лайф/Просто Лайф/Platinum Лайф/Шкільний Лайф/Смарт Лайф/Потужний/Вільний Лайф. Регіон/Дзвінкий БЕЗМЕЖ/Смарт/Сім’я/Ґаджет Смарт/Ґаджет Планшет/Ґаджет Роутер{% endtrans %}</p>
  153.                                             {% else %}
  154.                                                 <p class="text-[#5B5B5B] font-medium text-[13px]">{% trans from 'main' %}Ціна з пакетом послуг на перші 4 тижні{% endtrans %} {{ tarif.price }}
  155.                                                     ₴</p>
  156.                                                 <p class="text-[#5B5B5B] font-medium text-[13px]">{% trans from 'main' %}Абонплата{% endtrans %} {{ tarif.subscription }}{% if item.type == operatorLifecellType() %}{% else %}₴ {% trans from 'main' %}за 4 тижні{% endtrans %}{% endif %}</p>
  157.                                             {% endif %}
  158.                                         {% if item.isServerActive == true %}
  159.                                             </a>
  160.                                         {% else %}
  161.                                             </div>
  162.                                         {% endif %}
  163.                                         {% set currentCompany = app.request.get('companyInner') %}
  164.                                         {% if tarif.promoImage is not empty and (tarif.promoImageCompanies is empty or currentCompany in tarif.promoImageCompanies) %}
  165.                                             <div class="[&_img]:max-w-full [&_img]:max-h-[96px] [&_img]:object-fill [&_img]:rounded-[10px]">
  166.                                                 {% if tarif.promoImageUrl %}
  167.                                                     <a href="{{ tarif.promoImageUrl }}" target="_blank" rel="noopener noreferrer" class="block mt-[8px]">
  168.                                                         {{ sonata_media(tarif.promoImage, 'reference') }}
  169.                                                     </a>
  170.                                                 {% else %}
  171.                                                     <div class="mt-[8px]">
  172.                                                         {{ sonata_media(tarif.promoImage, 'reference') }}
  173.                                                     </div>
  174.                                                 {% endif %}
  175.                                             </div>
  176.                                         {% endif %}
  177.                                     </div>
  179.                                     {% if loop.length >= 1 and not loop.last %}
  180.                                         <hr class="h-px my-[12px] bg-[#E2E2E9] border-0 ">
  181.                                     {% endif %}
  182.                                 {% endfor %}
  183.                             </div>
  184.                         </div>
  185.                     {% endif %}
  186.                     <a href="{{ path('operator_tariff_page',{slug:item.slug}) }}"
  187.                        class="js--operator-btn font-medium text-[#fff] text-[16px] min-h-[48px] text-center block hover:underline"
  188.                        style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}"
  189.                        data-active="{{ item.isServerActive ? 'true' : 'false' }}"
  190.                        data-inactive-text="{{ item.inactiveText|default('operator.tariff.unavailable')|trans({'%operator%': item.name}, 'main')|e('html_attr') }}"
  191.                     >
  192.                         <button class=" md:min-w-[282px] hover:underline transition ease-in-out duration-150 w-full flex flex-row gap-[8px] justify-center text-center mt-[12px] p-[12px] min-h-[48px] bg-transparent border rounded-[10px] font-semibold text-[14px]  focus:outline-none"
  193.                                 style="color:{{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  194.                             {% trans from 'main' %}Обрати тариф та Купити eSIM{% endtrans %}
  195.                         </button>
  196.                     </a>
  197.                 </div>
  198.             {% endfor %}
  200.         </div>
  202.     </div>
  204.     <div class="flex flex-col md:flex-row gap-[16px] justify-center">
  205.         <a href="{{ path('how_it_works') }}"
  206.            class="font-medium text-[#fff] text-[16px] min-h-[48px] text-center block hover:underline"
  207.            style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  208.             <button class="min-w-[282px] hover:underline transition ease-in-out duration-150 w-full flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border rounded-[10px] font-semibold text-[14px]  focus:outline-none"
  209.                     style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  210.                 <svg class="w-[20px] h-[20px]"
  211.                      style="fill: {{ companyStyles.notFilledButtonTextColor }}">
  212.                     <use href="{{ asset('build/sprite.svg#information-line') }}"></use>
  213.                 </svg>
  214.                 {% trans from 'main' %}Як працює eSIM?{% endtrans %}
  215.             </button>
  216.         </a>
  217.         <a href="{% if is_granted('ROLE_FRONT_USER') %}{{ path('profile_page') }}{% else %}{{ path('login_locale') }}{% endif %}"
  218.            class="font-medium text-[#fff] text-[16px] min-h-[48px] text-center block hover:underline"
  219.            style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  220.             <button class="min-w-[282px] hover:underline transition ease-in-out duration-150 w-full flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border rounded-[10px] font-semibold text-[14px]  focus:outline-none"
  221.                     style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  223.                 {% trans from 'main' %}Історія Ваших покупок eSIM{% endtrans %}
  224.             </button>
  225.         </a>
  227.     </div>
  230.     <p class="text-[#909299] max-w-[466px] mx-auto mt-[24px] text-center font-medium text-[12px]">{% trans from 'main' %}Якщо Ви вже купували eSІM у нас, реєструвалися та не встигли купити eSIM або хочете купити ще, залогіньтесь до власної історії покупок.{% endtrans %}</p>
  232. </div>