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

Open in your IDE?
  1. <figure class="mt-[10px] lg:mt-[40px] mx-auto max-w-max lg:max-w-[1328px] px-[24px]">
  2.     {% include '@App/shared/ui/header/header.html.twig' %}
  5.     <div class="stepper-wrapper mt-[80px] mb-[24px]">
  6.         <div class="stepper-item active">
  7.             <div class="step-counter">01</div>
  8.             <div class="step-name">{% trans from 'tarif_choice' %}Тарифні плани{% endtrans %}</div>
  9.         </div>
  10.         <div class="stepper-item ">
  11.             <div class="step-counter">02</div>
  12.             <div class="step-name">{% trans from 'tarif_choice' %}Реєстрація E-mail{% endtrans %}</div>
  13.         </div>
  14.         <div class="stepper-item ">
  15.             <div class="step-counter">03</div>
  16.             <div class="step-name">{% trans from 'tarif_choice' %}Отримання номеру{% endtrans %}</div>
  17.         </div>
  18.         <div class="stepper-item">
  19.             <div class="step-counter">04</div>
  20.             <div class="step-name">{% trans from 'tarif_choice' %}Підтвердження та оплата{% endtrans %}</div>
  21.         </div>
  22.         <div class="stepper-item">
  23.             <div class="step-counter">05</div>
  24.             <div class="step-name">{% trans from 'tarif_choice' %}Отримання eSIM{% endtrans %}</div>
  25.         </div>
  26.     </div>
  29.     <div class="rounded-[16px] p-[16px] md:p-[32px] border border-[#E2E2E9] bg-[#F7F7FA]">
  30.         <div class="mt-[14px] p-0 md:p-[18px] max-w-full mx-auto rounded-[24px] ">
  31.             <div class="flex justify-between items-center relative">
  32.                 <div class="absolute left-[-10px] top-[-10px] md:left-0 md:top-0">
  33.                     {% include '@App/shared/ui/backButton/backButtonWeb.html.twig' %}
  34.                 </div>
  36.                 <div class="flex flex-col gap-[16px] text-center mt-[32px] md:mt-0 mx-auto max-w-[485px]">
  37.                     <div class="text-[24px] font-semibold text-[#1B2028]"
  38.                          style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  39.                     >{% trans from 'tarif_choice' %}Перегляд тарифу{% endtrans %}</div>
  40.                 </div>
  43.                 {% if faqs is defined and faqs is not empty %}
  44.                     {#                <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> #}
  45.                     <div class="absolute right-[-10px] top-[-10px] md:right-0 md:top-0">
  46.                         <div class="relative group">
  47.                             <button data-modal="#modal_faq"
  48.                                     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"
  49.                                     style="color: {{ companyStyles.linkTextColor }}; --custom-color: {{ companyStyles.buttonColor }}; background-color: rgba(from var(--custom-color) r g b / 0.2)">
  50.                                 <svg class="w-[20px] h-[20px]"
  51.                                      style="fill: {{ companyStyles.buttonColor }}; border-color: {{ companyStyles.buttonColor }}">
  52.                                     <use href="{{ asset('build/sprite.svg#question') }}"></use>
  53.                                 </svg>
  54.                             </button>
  56.                             <!-- Тултип -->
  57.                             <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">
  58.                                 {% trans from 'tarif_choice' %}Поширені питання та відповіді{% endtrans %}
  59.                                 <!-- Стрелка -->
  60.                                 <div class="absolute w-0 h-0 border-4 border-transparent border-l-[#1A1A1A] -right-2 top-1/2 -translate-y-1/2"></div>
  61.                             </div>
  62.                         </div>
  63.                     </div>
  64.                 {% endif %}
  65.             </div>
  67.             {#            <div class="text-[16px] font-medium text-[#A0A4AE] mb-[20px] text-{{ companyStyles.descriptionTextAlign }}"> #}
  68.             {#                {% if is_granted('ROLE_FRONT_USER') %}{% trans from 'register' %}Крок 1/3{% endtrans %}{% else %}{% trans from 'register' %}Крок 1/5{% endtrans %}{% endif %} #}
  69.             {#            </div> #}
  70.             <div class="gap-[10px] mt-[32px] pr-[8px]">
  71.                 {% if esimPresence is defined and esimPresence is not null and esimPresence == false %}
  72.                     <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#ffffff] mt-[40px]">
  73.                         <div class="text-[24px] font-semibold text-[#1B2028] mx-auto text-{{ companyStyles.descriptionTextAlign }} {% if companyStyles.descriptionTextAlign == 'center' %}max-w-[360px]{% endif %}"
  74.                         >{% trans from 'tarif_choice' %}На жаль, наразі немає доступних номерів. Спробуйте пізніше{% endtrans %}</div>
  75.                     </div>
  76.                 {% else %}
  77.                     {# ===== MOBILE LAYOUT (< 767px) ===== #}
  78.                     <div class="block md:hidden">
  79.                         <div class="rounded-[16px] p-[18px] w-full border border-[#E2E2E9] bg-[#ffffff]">
  80.                             {% if tariff.mainImage is not empty %}
  81.                                 <div class="w-full h-auto mb-[16px]">
  82.                                     {{ sonata_media(tariff.mainImage, 'reference') }}
  83.                                 </div>
  84.                             {% elseif tariff.imageLink %}
  85.                                 <div class="w-full h-auto mb-[16px]">
  86.                                     <img src="{{ tariff.imageLink }}" alt="{{ tariff.name }}"/>
  87.                                 </div>
  88.                             {% endif %}
  89.                             <div class="text-[20px] text-[#1B2028] font-medium">{{ tariff.name }}</div>
  90.                             {% if tariff.reference is not empty %}
  91.                                 <div class="text-[12px] text-[#5B5B5B] font-medium">{% trans from 'tarif_choice' %}Артикул:{% endtrans %} {{ tariff.reference }}</div>
  92.                             {% endif %}
  94.                             {% if tariff.shortInfo is not empty %}
  95.                                 {# Accordion: Короткий опис #}
  96.                                 <div class="tariff-accordion mt-[16px] border border-[#E2E2E9] rounded-[16px] overflow-hidden">
  97.                                     <button class="tariff-accordion__toggle w-full flex justify-between items-center p-[14px] bg-[#F7F7FA] text-[16px] font-medium text-[#1B2028]" aria-expanded="true">
  98.                                         <span>Короткий опис</span>
  99.                                         <svg class="tariff-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">
  100.                                             <polyline points="6 9 12 15 18 9"/>
  101.                                         </svg>
  102.                                     </button>
  103.                                     <div class="tariff-accordion__body px-[14px] pb-[14px] text-[14px] text-[#5B5B5B] prose break-words">
  104.                                         {{ tariff.shortInfo|raw }}
  105.                                     </div>
  106.                                 </div>
  107.                             {% endif %}
  109.                             {# Accordion: Детальна інформація #}
  110.                             {% if tariff.detailedInfo is not empty %}
  111.                                 <div class="tariff-accordion mt-[12px] border border-[#E2E2E9] rounded-[16px] overflow-hidden">
  112.                                     <button class="tariff-accordion__toggle w-full flex justify-between items-center p-[14px] bg-[#F7F7FA] text-[16px] font-medium text-[#1B2028]" aria-expanded="false">
  113.                                         <span>{% trans from 'tarif_choice' %}Детальна інформація{% endtrans %}</span>
  114.                                         <svg class="tariff-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">
  115.                                             <polyline points="6 9 12 15 18 9"/>
  116.                                         </svg>
  117.                                     </button>
  118.                                     <div class="tariff-accordion__body hidden px-[14px] pb-[14px] text-[14px] text-[#5B5B5B] prose break-words">
  119.                                         {{ tariff.detailedInfo|raw }}
  120.                                     </div>
  121.                                 </div>
  122.                             {% endif %}
  124.                         </div>
  126.                         {# Sticky buttons bar #}
  127.                         <div id="tariff-sticky-bar" class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-[#E2E2E9] px-[16px] py-[12px] flex flex-col gap-[8px] transition-all duration-300">
  128.                             {% if tariff.active %}
  129.                                 <a href="{{ path('tariff_selected_page',{tariff:tariff.id}) }}" class="w-full">
  130.                                     <button class="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"
  131.                                             style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  132.                                         {% trans with {'%price%': tariff.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}
  133.                                     </button>
  134.                                 </a>
  135.                             {% else %}
  136.                                 <button type="button" disabled class="w-full opacity-50 cursor-not-allowed pointer-events-none transition ease-in-out duration-150 flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border border-[#E2E2E9] text-[#5B5B5B] rounded-[10px] font-semibold text-[14px] focus:outline-none">
  137.                                     {% trans from 'tarif_choice' %}Немає в наявності{% endtrans %}
  138.                                 </button>
  139.                             {% endif %}
  140.                             <a href="{{ path('operator_tariff_page',{slug:tariff.operator.slug}) }}" class="w-full">
  141.                                 <button class="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"
  142.                                         style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  143.                                     {% trans from 'tarif_choice' %}Обрати інший тариф{% endtrans %}
  144.                                 </button>
  145.                             </a>
  146.                         </div>
  147.                         {# Sentinel: when buttons scroll into natural position, hide sticky bar #}
  148.                         <div id="tariff-buttons-sentinel" class="rounded-[16px] p-[18px] w-full border border-[#E2E2E9] bg-[#ffffff] mt-[12px]">
  149.                             <div class="flex flex-wrap justify-center flex-col gap-[8px] w-full">
  150.                                 {% if tariff.active %}
  151.                                     <a href="{{ path('tariff_selected_page',{tariff:tariff.id}) }}" class="w-full">
  152.                                         <button class="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"
  153.                                                 style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  154.                                             {% trans with {'%price%': tariff.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}
  155.                                         </button>
  156.                                     </a>
  157.                                 {% else %}
  158.                                     <button type="button" disabled class="w-full opacity-50 cursor-not-allowed pointer-events-none transition ease-in-out duration-150 flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border border-[#E2E2E9] text-[#5B5B5B] rounded-[10px] font-semibold text-[14px] focus:outline-none">
  159.                                         {% trans from 'tarif_choice' %}Немає в наявності{% endtrans %}
  160.                                     </button>
  161.                                 {% endif %}
  162.                                 <a href="{{ path('operator_tariff_page',{slug:tariff.operator.slug}) }}" class="w-full">
  163.                                     <button class="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"
  164.                                             style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  165.                                         {% trans from 'tarif_choice' %}Обрати інший тариф{% endtrans %}
  166.                                     </button>
  167.                                 </a>
  168.                             </div>
  169.                         </div>
  170.                     </div>
  172.                     {# ===== DESKTOP LAYOUT (>= 767px) ===== #}
  173.                     <div class="hidden md:block">
  174.                         <div class="rounded-[16px] p-[18px] w-full border border-[#E2E2E9] bg-[#ffffff]">
  175.                             <div class="flex flex-col md:flex-row content-start gap-[32px]">
  176.                                 {% if tariff.mainImage is not empty %}
  177.                                     <div class="w-full h-auto ">
  178.                                         {{ sonata_media(tariff.mainImage, 'reference') }}
  179.                                     </div>
  180.                                 {% elseif tariff.imageLink %}
  181.                                     <div class="w-full h-auto ">
  182.                                         <img src="{{ tariff.imageLink }}" alt="{{ tariff.name }}"/>
  183.                                     </div>
  184.                                 {% endif %}
  185.                                 <div class="w-full h-auto flex flex-col content-start">
  186.                                     <div class="text-[20px] text-[#1B2028] font-medium">{{ tariff.name }}</div>
  187.                                     {% if tariff.reference is not empty %}
  188.                                         <div class="text-[12px] text-[#5B5B5B] font-medium">{% trans from 'tarif_choice' %}Артикул:{% endtrans %} {{ tariff.reference }}</div>
  189.                                     {% endif %}
  191.                                     {% if tariff.shortInfo is not empty %}
  192.                                         <div class="mt-[32px] text-[14px] text-[#5B5B5B] prose break-words">{{ tariff.shortInfo|raw }}</div>
  193.                                     {% endif %}
  195.                                     <div class="flex flex-wrap justify-center flex-row gap-[10px] mt-[32px] w-full">
  196.                                         {% if tariff.active %}
  197.                                             <a href="{{ path('tariff_selected_page',{tariff:tariff.id}) }}"
  198.                                                class="mt-auto w-full max-w-[250px]"
  199.                                             >
  200.                                                 <button class=" 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] mt-[16px] focus:outline-none"
  201.                                                         style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  202.                                                     {% trans with {'%price%': tariff.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}
  203.                                                 </button>
  204.                                             </a>
  205.                                         {% else %}
  206.                                             <button type="button" disabled class="mt-auto w-full max-w-[250px] opacity-50 cursor-not-allowed pointer-events-none hover:underline transition ease-in-out duration-150 flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border border-[#E2E2E9] text-[#5B5B5B] rounded-[10px] font-semibold text-[14px] mt-[16px] focus:outline-none">
  207.                                                 {% trans from 'tarif_choice' %}Немає в наявності{% endtrans %}
  208.                                             </button>
  209.                                         {% endif %}
  211.                                         <a href="{{ path('operator_tariff_page',{slug:tariff.operator.slug}) }}"
  212.                                            class="mt-auto w-full max-w-[250px]"
  213.                                         >
  214.                                             <button class=" 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] mt-[16px] focus:outline-none"
  215.                                                     style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  216.                                                 {% trans from 'tarif_choice' %}Обрати інший тариф{% endtrans %}
  217.                                             </button>
  218.                                         </a>
  219.                                     </div>
  220.                                 </div>
  221.                             </div>
  223.                             <div class="rounded-[16px] p-[18px] mt-[32px] w-full border border-[#E2E2E9] bg-[#ffffff]">
  224.                                 <div class="text-[18px] text-[#1B2028] font-medium">{% trans from 'tarif_choice' %}Детальна інформація{% endtrans %}</div>
  226.                                 <article class="mb-[10px]">
  227.                                     {% if tariff.detailedInfo is not empty %}
  228.                                         <div class="mt-[32px] text-[14px] text-[#5B5B5B] prose break-words">{{ tariff.detailedInfo|raw }}</div>
  229.                                     {% endif %}
  230.                                 </article>
  231.                             </div>
  232.                         </div>
  233.                     </div>
  234.                 {% endif %}
  235.             </div>
  237.         </div>
  238.     </div>
  240. </figure>
  242. <!-- 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 -->
  243. {% for modal in tariff.operator.tariffs %}
  244.     {% if modal.description is not empty %}
  245.         {% include '@App/shared/ui/modal/modal_web.html.twig' with {
  246.             id: modal.id,
  247.             name: modal.name,
  248.             image: modal.mainImage,
  249.             imageLink: modal.imageLink,
  250.             description: modal.description | raw,
  251.             showButton: true,
  252.         } %}
  253.     {% endif %}
  254. {% endfor %}
  256. <script>
  257. (function () {
  258.     // Only run on mobile (< 767px)
  259.     if (window.innerWidth >= 767) return;
  261.     // ── Accordion ──────────────────────────────────────────────
  262.     document.querySelectorAll('.tariff-accordion__toggle').forEach(function (btn) {
  263.         var body = btn.nextElementSibling;
  264.         var icon = btn.querySelector('.tariff-accordion__icon');
  265.         var isOpen = btn.getAttribute('aria-expanded') === 'true';
  267.         // Apply initial state
  268.         if (!isOpen) {
  269.             body.classList.add('hidden');
  270.             icon.style.transform = 'rotate(-90deg)';
  271.         } else {
  272.             body.classList.remove('hidden');
  273.             icon.style.transform = 'rotate(0deg)';
  274.         }
  276.         btn.addEventListener('click', function () {
  277.             var expanded = btn.getAttribute('aria-expanded') === 'true';
  278.             if (expanded) {
  279.                 btn.setAttribute('aria-expanded', 'false');
  280.                 body.classList.add('hidden');
  281.                 icon.style.transform = 'rotate(-90deg)';
  282.             } else {
  283.                 btn.setAttribute('aria-expanded', 'true');
  284.                 body.classList.remove('hidden');
  285.                 icon.style.transform = 'rotate(0deg)';
  286.             }
  287.         });
  288.     });
  290.     // ── Sticky bar ─────────────────────────────────────────────
  291.     var stickyBar = document.getElementById('tariff-sticky-bar');
  292.     var sentinel = document.getElementById('tariff-buttons-sentinel');
  294.     if (stickyBar && sentinel) {
  295.         var observer = new IntersectionObserver(function (entries) {
  296.             entries.forEach(function (entry) {
  297.                 if (entry.isIntersecting) {
  298.                     // Sentinel is visible — hide sticky bar
  299.                     stickyBar.style.transform = 'translateY(100%)';
  300.                     stickyBar.style.opacity = '0';
  301.                     stickyBar.style.pointerEvents = 'none';
  302.                 } else {
  303.                     // Sentinel not visible — show sticky bar
  304.                     stickyBar.style.transform = 'translateY(0)';
  305.                     stickyBar.style.opacity = '1';
  306.                     stickyBar.style.pointerEvents = '';
  307.                 }
  308.             });
  309.         }, { threshold: 0.1 });
  311.         observer.observe(sentinel);
  312.     }
  313. })();
  314. </script>