templates/pages/tarif_choice/tarif_choice_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 class="text-[16px] text-[#5B5B5B]"
  41.                     >{% trans from 'tarif_choice' %}Ознайомтеся з доступними тарифами та оберіть оптимальний варіант.{% endtrans %}</div>
  42.                 </div>
  45.                 {% if faqs is defined and faqs is not empty %}
  46.                     {#                <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> #}
  47.                     <div class="absolute right-[-10px] top-[-10px] md:right-0 md:top-0">
  48.                         <div class="relative group">
  49.                             <button data-modal="#modal_faq"
  50.                                     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"
  51.                                     style="color: {{ companyStyles.linkTextColor }}; --custom-color: {{ companyStyles.buttonColor }}; background-color: rgba(from var(--custom-color) r g b / 0.2)">
  52.                                 <svg class="w-[20px] h-[20px]"
  53.                                      style="fill: {{ companyStyles.buttonColor }}; border-color: {{ companyStyles.buttonColor }}">
  54.                                     <use href="{{ asset('build/sprite.svg#question') }}"></use>
  55.                                 </svg>
  56.                             </button>
  58.                             <!-- Тултип -->
  59.                             <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">
  60.                                 {% trans from 'tarif_choice' %}Поширені питання та відповіді{% endtrans %}
  61.                                 <!-- Стрелка -->
  62.                                 <div class="absolute w-0 h-0 border-4 border-transparent border-l-[#1A1A1A] -right-2 top-1/2 -translate-y-1/2"></div>
  63.                             </div>
  64.                         </div>
  65.                     </div>
  66.                 {% endif %}
  67.             </div>
  69. {#            <div class="text-[16px] font-medium text-[#A0A4AE] mb-[20px] text-{{ companyStyles.descriptionTextAlign }}">#}
  70. {#                {% if is_granted('ROLE_FRONT_USER') %}{% trans from 'register' %}Крок 1/3{% endtrans %}{% else %}{% trans from 'register' %}Крок 1/5{% endtrans %}{% endif %}#}
  71. {#            </div>#}
  72.             <div class="grid grid-cols-1 md:grid-cols-2 gap-[10px] mt-[32px] pr-[8px]">
  73.                 {% if esimPresence is defined and esimPresence is not null and esimPresence == false %}
  74.                     <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#ffffff] mt-[40px]">
  75.                         <div class="text-[24px] font-semibold text-[#1B2028] mx-auto text-{{ companyStyles.descriptionTextAlign }} {% if companyStyles.descriptionTextAlign == 'center' %}max-w-[360px]{% endif %}"
  76.                         >{% trans from 'tarif_choice' %}На жаль, наразі немає доступних номерів. Спробуйте пізніше{% endtrans %}</div>
  77.                     </div>
  78.                 {% else %}
  79.                     {% for item in tariffs %}
  80.                         {% set tariffCard %}
  81.                             <div class="flex items-center content-start gap-[6px]">
  82.                                 {% if item.mainImage is not empty %}
  83.                                     <div class="w-[48px] h-[48px]">
  84.                                         {{ sonata_media(item.mainImage, 'reference') }}
  85.                                     </div>
  86.                                 {% elseif item.imageLink %}
  87.                                     <div class="w-[48px] h-[48px]">
  88.                                         <img src="{{ item.imageLink }}" alt="{{ item.name }}"/>
  89.                                     </div>
  90.                                 {% endif %}
  91.                                 <div class="flex flex-col content-start">
  92.                                     <div class="text-[20px] text-[#1B2028] font-medium">{{ item.name }}</div>
  93.                                     {% if operator.priceText is not empty %}
  94.                                         {% if operator.type == operatorLifecellType() %}{% else %}
  95.                                             <div class="text-[14px] text-[#5B5B5B] font-medium">{{ operator.priceText }}
  96.                                                 <span class="text-[#1B2028]">{{ item.price }}₴</span></div>
  97.                                         {% endif %}
  98.                                     {% else %}
  99.                                         {% if operator.type == operatorLifecellType() %}{% else %}
  100.                                             <div class="text-[14px] text-[#5B5B5B] font-medium">{% trans from 'tarif_choice' %}Вартість за перші 4 тижні:{% endtrans %}
  101.                                                 <span class="text-[#1B2028]">{{ item.price }}₴</span></div>
  102.                                         {% endif %}
  103.                                     {% endif %}
  104.                                 </div>
  106.                                 {% if item.detailsButtonText is not empty and item.detailsButtonUrl is not empty %}
  107.                                     <a href="/{{ item.detailsButtonUrl }}" class="text-[14px] ml-auto underline" style="color: {{ companyStyles.linkTextColor }}">{{ item.detailsButtonText }}</a>
  108.                                 {% endif %}
  109.                             </div>
  110.                             <hr class="h-px my-[8px] bg-[#E2E2E9] border-0 ">
  111.                             <article class="prose mb-[10px]">
  112.                                 {{ item.bottomDescription | raw }}
  113.                             </article>
  114.                             <span class="inline-block min-h-[32px] mb-[12px] bg-white text-[#909299] text-[14px] font-medium px-[12px] py-[6px] rounded-full text-balance w-fit border border-[#E2E2E9]">
  115.                                 {% if operator.type == operatorLifecellType() %}
  116.                                     {% trans from 'register' %}Вартість послуг на 4 тижні: {% endtrans %}
  117.                                 {% else %}
  118.                                     {% trans from 'tarif_choice' %}Абонплата за наступні 4 тижні: {% endtrans %}
  119.                                 {% endif %}
  120.                                 <span class="text-[#1B2028]">
  121.                                     {{ item.subscription }}
  122.                                     {% if operator.type == operatorLifecellType() %}{% else %} ₴{% endif %}
  123.                                 </span>
  124.                             </span>
  125.                             <a href="{{ path('tariff_selected_page',{tariff:item.id}) }}"
  126.                                class="mt-auto"
  127.                             >
  128.                                 <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"
  129.                                         style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}">
  130.                                     {% trans with {'%price%': item.price} from 'tarif_choice' %}Купити за %price%₴{% endtrans %}
  131.                                 </button>
  132.                             </a>
  133.                         {% endset %}
  135.                         <div class="{% if item.desktopSelectionImage is not empty %}md:col-span-2{% endif %} flex flex-col md:flex-row gap-[10px] items-stretch">
  136.                             {% if item.mobileSelectionImage is not empty %}
  137.                                 <div class="md:hidden w-full h-[84px] rounded-[16px] overflow-hidden [&_img]:w-full [&_img]:h-[84px] [&_img]:object-cover [&_img]:rounded-[16px]">
  138.                                     {{ sonata_media(item.mobileSelectionImage, 'reference') }}
  139.                                 </div>
  140.                             {% endif %}
  141.                             <div class="flex-1 rounded-[16px] p-[18px] flex flex-col border border-[#E2E2E9] bg-[#ffffff]">
  142.                                 {{ tariffCard }}
  143.                             </div>
  145.                             {% if item.desktopSelectionImage is not empty %}
  146.                                 <div class="p-[18px] max-md:hidden flex flex-1 min-h-[370px] rounded-[16px] border border-[#E2E2E9] bg-[#ffffff] items-center justify-center overflow-hidden">
  147.                                     {{ sonata_media(item.desktopSelectionImage, 'reference') }}
  148.                                 </div>
  149.                             {% endif %}
  150.                         </div>
  151.                     {% endfor %}
  152.                 {% endif %}
  153.             </div>
  155.         </div>
  156.     </div>
  158. </figure>
  160. <!-- 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 -->
  161. {% for modal in operator.tariffs %}
  162.     {% if modal.description is not empty %}
  163.         {% include '@App/shared/ui/modal/modal_web.html.twig' with {
  164.             id: modal.id,
  165.             name: modal.name,
  166.             image: modal.mainImage,
  167.             imageLink: modal.imageLink,
  168.             description: modal.description | raw,
  169.             showButton: true,
  170.         } %}
  171.     {% endif %}
  172. {% endfor %}