templates/pages/main/main.html.twig line 1

Open in your IDE?
  1. {% extends '@App/base.html.twig' %}
  3. {% block content %}
  4.     {% if isMobile %}
  5.     <figure class="mt-[10px] lg:mt-[40px]">
  6.         {% include '@App/shared/ui/backButton/backButton.html.twig' %}
  7. {#        {% include '@App/components/header/header.html.twig' with {#}
  8. {#            title: true#}
  9. {#        } %}#}
  10.         {% for message in app.flashes('password_reset_success') %}
  11.             {% include '@App/shared/ui/modal/modalLinkSuccess.html.twig' with {
  12.                 email: message
  13.             } %}
  14.         {% endfor %}
  15.         {% for message in app.flashes('password_reset_link_success') %}
  16.             {% include '@App/shared/ui/modal/modalSuccess.html.twig' with {
  17.                 email: message
  18.             } %}
  19.         {% endfor %}
  20.         <div
  21.                 class="text-[20px] font-medium uppercase text-white text-center max-w-max md:max-w-[600px] {% if companyStyles.titleTextAlign == 'center' %}mx-auto{% else %}md:mx-auto{% endif %}"
  22.                 style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::TITLE_STYLES')) }}"
  23.         >{% trans from 'main' %}Оберіть оператора{% endtrans %}</div>
  24.         <div class="mt-[14px] p-[18px] max-w-max md:max-w-[600px] mx-auto rounded-[24px] bg-white">
  25.             <div class="flex flex-col gap-[16px]">
  26.                 {% for item in operators %}
  27.                     <div class="rounded-[16px] p-[18px] {% if item.active %}{% else %} opacity-60 pointer-events-none {% endif %} border border-[#E2E2E9] bg-[#F7F7FA]">
  28.                         {% if item.connectionError or item.isServerActive == false %}
  29.                             <div>
  30.                         {% else %}
  31.                             <a href="{{ path('operator_tariff_page',{slug:item.slug}) }}" >
  32.                         {% endif %}
  33.                             <div class="flex items-center content-start gap-[16px]">
  34.                                 <div>
  35.                                     <svg class="w-[48px] h-[48px]">
  36.                                         {% if item.type == operatorLifecellType() %}
  37.                                             <use href="{{ asset('build/sprite.svg#lifecell_rebrending') }}"></use>
  38.                                         {% elseif item.type == operatorVodafoneType() %}
  39.                                             <use href="{{ asset('build/sprite.svg#vodafone') }}"></use>
  40.                                         {% else %}
  41.                                             <use href="{{ asset('build/sprite.svg#kyivstar_logo') }}"></use>
  42.                                         {% endif %}
  43.                                     </svg>
  44.                                 </div>
  45.                                 <div class="text-[24px] text-[#1B2028] font-medium">{{ item.name }}</div>
  46.                             </div>
  48.                             <hr class="h-px my-[8px] bg-[#E2E2E9] border-0 ">
  49.                             <p class="text-[14px] font-medium text-[#5B5B5B] leading-tight mb-[8px]">
  50.                                 {{ item.description }}
  51.                             </p>
  52.                             <div class="flex w-full justify-between items-center">
  53.                                 {% if item.connectionError or item.isServerActive == false %}
  54.                                     <p class="text-[14px] font-semibold" style="color: red">
  55.                                         {{ 'operator.tariff.unavailable'|trans({'%operator%': item.name}, 'main') }}
  56.                                     </p>
  57.                                 {% else %}
  58.                                     <p class="text-[14px] font-semibold" style="color: {{ companyStyles.linkTextColor }}">
  59.                                         {% trans from 'main' %}Обрати тариф та Купити eSIM{% endtrans %}
  60.                                     </p>
  61.                                     <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">
  62.                                         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 11">
  63.                                             <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"/>
  64.                                         </svg>
  65.                                     </div>
  66.                                 {% endif %}
  67.                             </div>
  69.                         {% if item.connectionError or item.isServerActive == false %}
  70.                             </div>
  71.                         {% else %}
  72.                             </a>
  73.                         {% endif %}
  76.                         {% if item.tariffs is not empty and item.connectionError is empty %}
  77.                             <div id="accordion-collapse" data-accordion="keep">
  78.                             <h2 id="accordion-collapse-heading-{{ item.type }}" class="peer">
  79.                                 <button type="button" class="js--accordionBtn group text-[14px] mt-[6px] flex items-center justify-start w-full font-semibold text-gray-500 gap-3" data-accordion-target="#accordion-collapse-body-{{ item.type }}" aria-expanded="false" aria-controls="accordion-collapse-body-{{ item.type }}">
  80.                                     <span class="pointer-events-none">{% trans from 'main' %}Доступні тарифні плани{% endtrans %}</span>
  81.                                     <svg data-accordion-icon class="pointer-events-none w-3 h-3 group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  82.                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  83.                                     </svg>
  84.                                 </button>
  85.                             </h2>
  86.                             <div id="accordion-collapse-body-{{ item.type }}" class="mt-[14px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-{{ item.type }}">
  87.                                 {% for tarif in item.tariffs %}
  88.                                     <div>
  89.                                         {% if item.connectionError or item.isServerActive == false %}
  90.                                             <div>
  91.                                         {% else %}
  92.                                             <a href="{{ path('tariff_selected_page', {'tariff': tarif.id}) }}">
  93.                                         {% endif %}
  95.                                             <p class="font-medium text-[16px] hover:underline transition ease-in-out duration-150" style="color: {{ companyStyles.linkTextColor }}">{{ tarif.name }}</p>
  96.                                     {% if item.type == operatorLifecellType() %}
  97.                                             <p class="text-[#5B5B5B] font-medium text-[13px]">{% trans from 'tarif_choice' %}Після покупки та активації можно обрати один з тарифних планів: Вільний Лайф/Просто Лайф/Platinum Лайф/Шкільний Лайф/Смарт Лайф/Потужний/Вільний Лайф. Регіон/Дзвінкий БЕЗМЕЖ/Смарт/Сім’я/Ґаджет Смарт/Ґаджет Планшет/Ґаджет Роутер{% endtrans %}</p>
  98.                                     {% else %}
  99.                                             <p class="text-[#5B5B5B] font-medium text-[13px]">{% trans from 'main' %}Ціна з пакетом послуг на перші 4 тижні{% endtrans %} {{ tarif.price }}₴</p>
  100.                                             <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>
  101.                                     {% endif %}
  102.                                         {% if item.connectionError or item.isServerActive == false %}
  103.                                             </div>
  104.                                         {% else %}
  105.                                             </a>
  106.                                         {% endif %}
  107.                                         {% set currentCompany = app.request.get('companyInner') %}
  108.                                         {% if tarif.promoImage is not empty and (tarif.promoImageCompanies is empty or currentCompany in tarif.promoImageCompanies) %}
  109.                                         <div class="[&_img]:max-w-full [&_img]:max-h-[96px] [&_img]:object-fill [&_img]:rounded-[10px]">
  110.                                             {% if tarif.promoImageUrl %}
  111.                                                 <a href="{{ tarif.promoImageUrl }}" target="_blank" rel="noopener noreferrer" class="block mt-[8px]">
  112.                                                     {{ sonata_media(tarif.promoImage, 'reference') }}
  113.                                                 </a>
  114.                                             {% else %}
  115.                                                 <div class="mt-[8px]">
  116.                                                     {{ sonata_media(tarif.promoImage, 'reference') }}
  117.                                                 </div>
  118.                                             {% endif %}
  119.                                         </div>
  120.                                         {% endif %}
  121.                                     </div>
  122.                                     {% if loop.length >= 1 and not loop.last  %}
  123.                                         <hr class="h-px my-[12px] bg-[#E2E2E9] border-0 ">
  124.                                     {% endif %}
  125.                                 {% endfor %}
  126.                             </div>
  127.                         </div>
  128.                         {% endif %}
  129.                     </div>
  130.                 {% endfor %}
  131.             </div>
  132.             <a href="{{ path('how_it_works') }}" class="font-medium text-[16px] text-center block hover:underline mt-[30px]" style="color: {{ companyStyles.linkTextColor }}">{% trans from 'main' %}Як працює eSIM?{% endtrans %}</a>
  133.             <a href="{% if is_granted('ROLE_FRONT_USER') %}{{ path('profile_page') }}{% else %}{{ path('login_locale') }}{% endif %}" class="font-medium text-[#C6252A] text-[16px] text-center block hover:underline mt-[25px]">
  134. {#                {% trans from 'main' %}Історія Ваших покупок eSIM{% endtrans %}#}
  135.                 {% include '@App/shared/ui/button/button.html.twig' with {
  136.                     text: 'Історія Ваших покупок eSIM'|trans({}, 'main'),
  137.                 } %}
  138.             </a>
  139.             <p class="text-[#909299] text-center mt-[26px] font-medium text-[12px]">{% trans from 'main' %}Якщо Ви вже купували eSІM у нас, реєструвалися та не встигли купити eSIM або хочете купити ще, залогіньтесь до власної історії покупок.{% endtrans %}</p>
  140.             {% if faqs is defined and faqs is not empty %}
  141.                 <button data-modal="#modal_faq" class="js--modal hover:underline transition ease-in-out duration-150 w-full block text-center p-[12px] h-[48px] bg-transparent border rounded-[10px] border-none font-semibold text-[16px] mt-[25px] focus:outline-none" style="color: {{ companyStyles.linkTextColor }}">{% trans from 'tarif_choice' %}Поширені питаня та відповіді{% endtrans %}</button>
  142.             {% endif %}
  143.         </div>
  144.     </figure>
  145.     {% else %}
  146.         {% include '@App/pages/main/main_web.html.twig' %}
  147.     {% endif %}
  148. {% endblock %}