templates/pages/tarif_choice/tarif_choice.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' %}
  8.         {% include '@App/components/header/header.html.twig' with {
  9.             operator: true,
  10.             operatorName: operator.name,
  11.             operatorType: operator.type
  12.         } %}
  13.         <div class="mt-[14px] p-[18px] max-w-full md:max-w-[600px] mx-auto rounded-[24px] bg-white">
  14.             <div class="text-[24px] font-semibold text-[#1B2028]"
  15.                  style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  16.             >{% trans from 'tarif_choice' %}Тарифні плани{% endtrans %} {{ operator.name }}</div>
  17.             <div class="text-[16px] font-medium text-[#A0A4AE] mb-[20px] text-{{ companyStyles.descriptionTextAlign }}">
  18.                 {% if is_granted('ROLE_FRONT_USER') %}{% trans from 'register' %}Крок 1/3{% endtrans %}{% else %}{% trans from 'register' %}Крок 1/5{% endtrans %}{% endif %}
  19.             </div>
  20.             <div class="flex flex-col gap-[10px]">
  21.                 {% if esimPresence is defined and esimPresence is not null and esimPresence == false %}
  22.                     <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mt-[40px]">
  23.                         <div class="text-[24px] font-semibold text-[#1B2028] mx-auto text-{{ companyStyles.descriptionTextAlign }} {% if companyStyles.descriptionTextAlign == 'center' %}max-w-[360px]{% endif %}"
  24.                     >{% trans from 'tarif_choice' %}На жаль, наразі немає доступних номерів. Спробуйте пізніше{% endtrans %}</div>
  25.                     </div>
  26.                 {% else %}
  27.                     {% for item in tariffs %}
  28.                         <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA]">
  29.                             <div class="flex items-center content-start gap-[6px]">
  30.                                 {% if item.mainImage is not empty %}
  31.                                     <div class="w-[48px] h-[48px]">
  32.                                         {{ sonata_media(item.mainImage, 'reference') }}
  33.                                     </div>
  34.                                 {% elseif item.imageLink %}
  35.                                     <div class="w-[48px] h-[48px]">
  36.                                         <img src="{{ item.imageLink }}"  alt="{{ item.name }}"/>
  37.                                     </div>
  38.                                 {% endif %}
  39.                                 <div class="flex flex-col content-start">
  40.                                     <div class="text-[20px] text-[#1B2028] font-medium">{{ item.name }}</div>
  41.                                     {% if operator.priceText is not empty %}
  42.                                         {% if operator.type == operatorLifecellType() %}{% else %}
  43.                                             <div class="text-[14px] text-[#5B5B5B] font-medium">{{ operator.priceText }} <span class="text-[#1B2028]">{{ item.price }}₴</span></div>
  44.                                         {% endif %}
  45.                                     {% else %}
  46.                                         {% if operator.type == operatorLifecellType() %}{% else %}
  47.                                             <div class="text-[14px] text-[#5B5B5B] font-medium">{% trans from 'tarif_choice' %}Вартість за перші 4 тижні:{% endtrans %} <span class="text-[#1B2028]">{{ item.price }}₴</span></div>
  48.                                         {% endif %}
  49.                                     {% endif %}
  50.                                 </div>
  52.                                 {% if item.detailsButtonText is not empty and item.detailsButtonUrl is not empty %}
  53.                                     <a href="/{{ item.detailsButtonUrl }}" class="text-[14px] ml-auto underline" style="color: {{ companyStyles.linkTextColor }}">{{ item.detailsButtonText }}</a>
  54.                                 {% endif %}
  55.                             </div>
  56.                             <hr class="h-px my-[8px] bg-[#E2E2E9] border-0 ">
  57.                             <article class="prose mb-[10px]">
  58.                                 {{ item.bottomDescription | raw}}
  59.                             </article>
  60.                             <span class="inline-block min-h-[32px] bg-white text-[#909299] text-[14px] font-medium px-[12px] py-[6px] rounded-full text-balance w-fit border border-[#E2E2E9]">
  61.                                 {% if operator.type == operatorLifecellType() %}
  62.                                     {% trans from 'register' %}Вартість послуг на 4 тижні: {% endtrans %}
  63.                                 {% else %}
  64.                                     {% trans from 'tarif_choice' %}Абонплата за наступні 4 тижні: {% endtrans %}
  65.                                 {% endif %}
  66.                                 <span class="text-[#1B2028]">
  67.                                     {{ item.subscription }}
  68.                                     {% if operator.type == operatorLifecellType() %}{% else %} ₴{% endif %}
  69.                                 </span>
  70.                             </span>
  71.                             <a href="{{ path('tariff_selected_page',{tariff:item.id}) }}"
  72.                                class="drop-shadow-[0_7px_5px_rgba(0,0,0,0.25)] hover:drop-shadow-none disabled:drop-shadow-none transition ease-in-out duration-150 w-full text-center py-[6px] block h-[36px] bg-transparent border rounded-[10px] focus:ring-4 focus:ring-blue-300 font-semibold text-[16px] mt-[12px] focus:outline-none"
  73.                                style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::NOT_FILLED_BUTTON_STYLES')) }}"
  74.                             >{% trans with {'%price%': item.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}</a>
  75.                         </div>
  76.                     {% endfor %}
  77.                 {% endif %}
  78.                 <!-- modal-window fixed hidden top-0 left-0 right-0 z-50 show:opacity-100 w-full p-4 overflow-x-hidden overflow-y-auto mx-auto md:inset-0 max-h-full -->
  79.                 {% for modal in operator.tariffs %}
  80.                     {% if modal.description is not empty %}
  81.                         {% include '@App/shared/ui/modal/modal.html.twig' with {
  82.                             id: modal.id,
  83.                             name: modal.name,
  84.                             image: modal.mainImage,
  85.                             imageLink: modal.imageLink,
  86.                             description: modal.description | raw,
  87.                             showButton: true,
  88.                         } %}
  89.                     {% endif %}
  90.                 {% endfor %}
  91.             </div>
  92.             {% if faqs is defined and faqs is not empty %}
  93.             {#                <a href="{{ path('how_it_works') }}" class="font-medium text-[#E64829] text-[16px] text-center block hover:underline mt-[30px]">{% trans from 'main' %}Як працює eSIM?{% endtrans %}</a>#}
  94.                 <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>
  95.             {% endif %}
  96.         </div>
  97.     </figure>
  98.     {% else %}
  99.         {% include '@App/pages/tarif_choice/tarif_choice_web.html.twig' %}
  100.     {% endif %}
  103. {% endblock %}