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

Open in your IDE?
  1. {% extends '@App/base.html.twig' %}
  3. {% block pageTitle %}{{ tariff.name }}{% endblock %}
  5. {% block content %}
  6. {#    {{ dump(tariff) }}#}
  7.     {% if isMobile %}
  8.         <figure class="mt-[10px] lg:mt-[40px]">
  9.             {% include '@App/shared/ui/backButton/backButton.html.twig' %}
  11.             {% include '@App/components/header/header.html.twig' with {
  12.                 operator: true,
  13.                 operatorName: tariff.operator.name,
  14.                 operatorType: tariff.operator.type
  15.             } %}
  16.             <div class="mt-[14px] p-[18px] max-w-full md:max-w-[600px] mx-auto rounded-[24px] bg-white">
  17.                 <div class="text-[24px] font-semibold text-[#1B2028]"
  18.                      style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  19.                 >{% trans from 'tarif_choice' %}Перегляд тарифу{% endtrans %} {{ tariff.name }}</div>
  20.                 <div class="text-[16px] font-medium text-[#A0A4AE] mb-[20px] text-{{ companyStyles.descriptionTextAlign }}">
  21.                     {% if is_granted('ROLE_FRONT_USER') %}{% trans from 'register' %}Крок 1/3{% endtrans %}{% else %}{% trans from 'register' %}Крок 1/5{% endtrans %}{% endif %}
  22.                 </div>
  23.                 <div class="flex flex-col gap-[10px]">
  24.                     {% if esimPresence is defined and esimPresence is not null and esimPresence == false %}
  25.                         <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mt-[40px]">
  26.                             <div class="text-[24px] font-semibold text-[#1B2028] mx-auto text-{{ companyStyles.descriptionTextAlign }} {% if companyStyles.descriptionTextAlign == 'center' %}max-w-[360px]{% endif %}"
  27.                             >{% trans from 'tarif_choice' %}На жаль, наразі немає доступних номерів. Спробуйте пізніше{% endtrans %}</div>
  28.                         </div>
  29.                     {% else %}
  30.                             <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA]">
  31.                                 <div class="flex flex-col items-center content-start gap-[6px]">
  32.                                     {% if tariff.mainImage is not empty %}
  33.                                         <div class="w-full">
  34.                                             {{ sonata_media(tariff.mainImage, 'reference') }}
  35.                                         </div>
  36.                                     {% elseif tariff.imageLink %}
  37.                                         <div class="w-full">
  38.                                             <img src="{{ tariff.imageLink }}"  alt="{{ tariff.name }}"/>
  39.                                         </div>
  40.                                     {% endif %}
  41.                                     <div class="w-full mb-[32px] flex flex-col content-start">
  42.                                         <div class="text-[20px] text-[#1B2028] font-medium">{{ tariff.name }}</div>
  44.                                         <div class="text-[14px] text-[#5B5B5B] font-medium">{% trans from 'tarif_choice' %}Артикул:{% endtrans %} {{ tariff.reference }}</div>
  46.                                     </div>
  48. {#                                    {% if tariff.description is not empty %}#}
  49. {#                                        <button data-modal="#modal_{{ tariff.id }}" class="ml-auto js--modal hover:!opacity-60 transition ease-in-out duration-150">#}
  50. {#                                            <svg class="w-[20px] h-[20px]" style="fill: {{ companyStyles.linkTextColor }}">#}
  51. {#                                                <use href="{{ asset('build/sprite.svg#information-line') }}"></use>#}
  52. {#                                            </svg>#}
  53. {#                                        </button>#}
  54. {#                                    {% endif %}#}
  55.                                 </div>
  57.                                 {% if tariff.shortInfo is not empty %}
  58.                                     {# Accordion: Короткий опис — відкритий за замовчуванням #}
  59.                                     <div class="tariff-mob-accordion mt-[16px] border border-[#E2E2E9] rounded-[16px] overflow-hidden">
  60.                                         <button class="tariff-mob-accordion__toggle w-full flex justify-between items-center p-[14px] bg-[#F7F7FA] text-[16px] font-medium text-[#1B2028]" aria-expanded="true">
  61.                                             <span>Короткий опис</span>
  62.                                             <svg class="tariff-mob-accordion__icon w-[20px] h-[20px] transition-transform duration-300" style="stroke: #5B5B5B; fill: none;" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  63.                                                 <polyline points="6 9 12 15 18 9"/>
  64.                                             </svg>
  65.                                         </button>
  66.                                         <div class="tariff-mob-accordion__body px-[14px] pb-[14px] text-[14px] text-[#5B5B5B] prose break-words">
  67.                                             {{ tariff.shortInfo|raw }}
  68.                                         </div>
  69.                                     </div>
  70.                                 {% endif %}
  72.                                 {% if tariff.detailedInfo is not empty %}
  73.                                     {# Accordion: Детальна інформація — закритий за замовчуванням #}
  74.                                     <div class="tariff-mob-accordion mt-[12px] border border-[#E2E2E9] rounded-[16px] overflow-hidden">
  75.                                         <button class="tariff-mob-accordion__toggle w-full flex justify-between items-center p-[14px] bg-[#F7F7FA] text-[16px] font-medium text-[#1B2028]" aria-expanded="false">
  76.                                             <span>{% trans from 'tarif_choice' %}Детальна інформація{% endtrans %}</span>
  77.                                             <svg class="tariff-mob-accordion__icon w-[20px] h-[20px] transition-transform duration-300" style="stroke: #5B5B5B; fill: none;" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  78.                                                 <polyline points="6 9 12 15 18 9"/>
  79.                                             </svg>
  80.                                         </button>
  81.                                         <div class="tariff-mob-accordion__body hidden px-[14px] pb-[14px] text-[14px] text-[#5B5B5B] prose break-words">
  82.                                             {{ tariff.detailedInfo|raw }}
  83.                                         </div>
  84.                                     </div>
  85.                                 {% endif %}
  87.                                 {# Sentinel — натуральне розташування кнопок (видно = sticky bar зникає) #}
  88.                                 <div id="tariff-mob-sentinel" class="mt-[16px]">
  89.                                     {% if tariff.active %}
  90.                                         <a href="{{ path('tariff_selected_page',{tariff:tariff.id}) }}"
  91.                                            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"
  92.                                            style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::NOT_FILLED_BUTTON_STYLES')) }}"
  93.                                         >{% trans with {'%price%': tariff.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}</a>
  94.                                     {% else %}
  95.                                         <button type="button" disabled
  96.                                            class="opacity-50 cursor-not-allowed pointer-events-none transition ease-in-out duration-150 w-full text-center py-[6px] block h-[36px] bg-transparent border border-[#E2E2E9] text-[#5B5B5B] rounded-[10px] font-semibold text-[16px] mt-[12px] focus:outline-none"
  97.                                         >{% trans from 'tarif_choice' %}Немає в наявності{% endtrans %}</button>
  98.                                     {% endif %}
  99.                                     <a href="{{ path('operator_tariff_page',{slug:tariff.operator.slug}) }}"
  100.                                        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"
  101.                                        style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::NOT_FILLED_BUTTON_STYLES')) }}"
  102.                                     >{% trans from 'tarif_choice' %}Обрати інший тариф{% endtrans %}</a>
  103.                                 </div>
  105.                                 {# Sticky buttons bar #}
  106.                                 <div id="tariff-mob-sticky-bar" class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-[#E2E2E9] px-[16px] py-[12px] transition-all duration-300">
  107.                                     {% if tariff.active %}
  108.                                         <a href="{{ path('tariff_selected_page',{tariff:tariff.id}) }}"
  109.                                            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"
  110.                                            style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::NOT_FILLED_BUTTON_STYLES')) }}"
  111.                                         >{% trans with {'%price%': tariff.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}</a>
  112.                                     {% else %}
  113.                                         <button type="button" disabled
  114.                                            class="opacity-50 cursor-not-allowed pointer-events-none transition ease-in-out duration-150 w-full text-center py-[6px] block h-[36px] bg-transparent border border-[#E2E2E9] text-[#5B5B5B] rounded-[10px] font-semibold text-[16px] mt-[12px] focus:outline-none"
  115.                                         >{% trans from 'tarif_choice' %}Немає в наявності{% endtrans %}</button>
  116.                                     {% endif %}
  117.                                     <a href="{{ path('operator_tariff_page',{slug:tariff.operator.slug}) }}"
  118.                                        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"
  119.                                        style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::NOT_FILLED_BUTTON_STYLES')) }}"
  120.                                     >{% trans from 'tarif_choice' %}Обрати інший тариф{% endtrans %}</a>
  121.                                 </div>
  122.                             </div>
  123.                     {% endif %}
  124.                     <!-- 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 -->
  125.                     {% for modal in tariff.operator.tariffs %}
  126.                         {% if modal.description is not empty %}
  127.                             {% include '@App/shared/ui/modal/modal.html.twig' with {
  128.                                 id: modal.id,
  129.                                 name: modal.name,
  130.                                 image: modal.mainImage,
  131.                                 imageLink: modal.imageLink,
  132.                                 description: modal.description | raw,
  133.                                 showButton: true,
  134.                             } %}
  135.                         {% endif %}
  136.                     {% endfor %}
  137.                 </div>
  138.                 {% if faqs is defined and faqs is not empty %}
  139.                     {#                <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>#}
  140.                     <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>
  141.                 {% endif %}
  142.             </div>
  143.         </figure>
  144.     {% else %}
  145.         {% include '@App/pages/tariff/tariff_web.html.twig' %}
  146.     {% endif %}
  150. {% endblock %}
  152. {% block javascripts %}
  153.     {{ parent() }}
  154.     <script>
  155.     (function () {
  156.         // ── Accordion ──────────────────────────────────────────
  157.         document.querySelectorAll('.tariff-mob-accordion__toggle').forEach(function (btn) {
  158.             var body = btn.nextElementSibling;
  159.             var icon = btn.querySelector('.tariff-mob-accordion__icon');
  160.             var isOpen = btn.getAttribute('aria-expanded') === 'true';
  162.             // початковий стан
  163.             if (!isOpen) {
  164.                 body.classList.add('hidden');
  165.                 icon.style.transform = 'rotate(-90deg)';
  166.             } else {
  167.                 icon.style.transform = 'rotate(0deg)';
  168.             }
  170.             btn.addEventListener('click', function () {
  171.                 var expanded = btn.getAttribute('aria-expanded') === 'true';
  172.                 if (expanded) {
  173.                     btn.setAttribute('aria-expanded', 'false');
  174.                     body.classList.add('hidden');
  175.                     icon.style.transform = 'rotate(-90deg)';
  176.                 } else {
  177.                     btn.setAttribute('aria-expanded', 'true');
  178.                     body.classList.remove('hidden');
  179.                     icon.style.transform = 'rotate(0deg)';
  180.                 }
  181.             });
  182.         });
  184.         // ── Sticky bar ─────────────────────────────────────────
  185.         var stickyBar = document.getElementById('tariff-mob-sticky-bar');
  186.         var sentinel  = document.getElementById('tariff-mob-sentinel');
  188.         if (stickyBar && sentinel) {
  189.             var observer = new IntersectionObserver(function (entries) {
  190.                 entries.forEach(function (entry) {
  191.                     if (entry.isIntersecting) {
  192.                         stickyBar.style.transform    = 'translateY(100%)';
  193.                         stickyBar.style.opacity      = '0';
  194.                         stickyBar.style.pointerEvents = 'none';
  195.                     } else {
  196.                         stickyBar.style.transform    = 'translateY(0)';
  197.                         stickyBar.style.opacity      = '1';
  198.                         stickyBar.style.pointerEvents = '';
  199.                     }
  200.                 });
  201.             }, { threshold: 0.1 });
  203.             observer.observe(sentinel);
  204.         }
  205.     })();
  206.     </script>
  207. {% endblock %}