templates/Context/Shop/RFQCategory/create.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% form_theme form '@SyliusShop/Form/theme.html.twig' %}
  5. {% block content %}
  6.     <script>
  7.           window.crfqTranslations = {
  8.           categoryRequired: '{{ 'open_marketplace.crfq.validation.category_required'|trans }}',
  9.           categoryRequiredHeader: '{{ 'open_marketplace.crfq.validation.category_required_header'|trans }}',
  10.           firstNameRequired: '{{ 'open_marketplace.crfq.validation.first_name_required'|trans }}',
  11.           firstNameRequiredHeader: '{{ 'open_marketplace.crfq.validation.first_name_required_header'|trans }}',
  12.           lastNameRequired: '{{ 'open_marketplace.crfq.validation.last_name_required'|trans }}',
  13.           lastNameRequiredHeader: '{{ 'open_marketplace.crfq.validation.last_name_required_header'|trans }}',
  14.           emailRequired: '{{ 'open_marketplace.crfq.validation.email_required'|trans }}',
  15.           emailRequiredHeader: '{{ 'open_marketplace.crfq.validation.email_required_header'|trans }}',
  16.           emailInvalid: '{{ 'open_marketplace.crfq.validation.email_invalid'|trans }}',
  17.           emailInvalidHeader: '{{ 'open_marketplace.crfq.validation.email_invalid_header'|trans }}',
  18.           companyRequired: '{{ 'open_marketplace.crfq.validation.company_required'|trans }}',
  19.           companyRequiredHeader: '{{ 'open_marketplace.crfq.validation.company_required_header'|trans }}',
  20.           agreeTermsRequired: '{{ 'open_marketplace.crfq.validation.agree_terms_required'|trans }}',
  21.           agreeTermsRequiredHeader: '{{ 'open_marketplace.crfq.validation.agree_terms_required_header'|trans }}',
  22.           registrationSuccess: '{{ 'open_marketplace.crfq.validation.registration_success'|trans }}',
  23.           registrationSuccessHeader: '{{ 'open_marketplace.crfq.validation.registration_success_header'|trans }}',
  24.           registrationFailed: '{{ 'open_marketplace.crfq.validation.registration_failed'|trans }}',
  25.           registrationFailedHeader: '{{ 'open_marketplace.crfq.validation.registration_failed_header'|trans }}',
  26.           registrationError: '{{ 'open_marketplace.crfq.validation.registration_error'|trans }}',
  27.           registrationErrorHeader: '{{ 'open_marketplace.crfq.validation.registration_error_header'|trans }}',
  28.           verificationCodeRequired: '{{ 'open_marketplace.crfq.validation.verification_code_required'|trans }}',
  29.           verificationCodeRequiredHeader: '{{ 'open_marketplace.crfq.validation.verification_code_required_header'|trans }}',
  30.           emailNotFound: '{{ 'open_marketplace.crfq.validation.email_not_found'|trans }}',
  31.           emailNotFoundHeader: '{{ 'open_marketplace.crfq.validation.email_not_found_header'|trans }}',
  32.           verificationFailed: '{{ 'open_marketplace.crfq.validation.verification_failed'|trans }}',
  33.           verificationFailedHeader: '{{ 'open_marketplace.crfq.validation.verification_failed_header'|trans }}',
  34.           verificationError: '{{ 'open_marketplace.crfq.validation.verification_error'|trans }}',
  35.           verificationErrorHeader: '{{ 'open_marketplace.crfq.validation.verification_error_header'|trans }}',
  36.           requiredField: '{{ 'open_marketplace.crfq.validation.required_field'|trans }}',
  37.           sellersRequired: '{{ 'open_marketplace.crfq.validation.sellers_required'|trans }}',
  38.           detailsMinCharacters: '{{ 'open_marketplace.crfq.validation.details_min_characters'|trans }}',
  39.           selectCategoryFirst: '{{ 'open_marketplace.crfq.dropdown.select_category_first'|trans }}',
  40.           selectSubcategory: '{{ 'open_marketplace.crfq.dropdown.select_subcategory'|trans }}',
  41.           noSubcategories: '{{ 'open_marketplace.crfq.dropdown.no_subcategories'|trans }}',
  42.           errorLoading: '{{ 'open_marketplace.crfq.dropdown.error_loading'|trans }}',
  43.           suppliers: '{{ 'app.ui.header.suppliers'|trans }}'
  44.       };
  45.     </script>
  47.     {% if not is_granted('IS_AUTHENTICATED_FULLY') %}
  48.         <div class="ui grid stackable">
  49.             <div
  50.                 class="eight wide computer sixteen wide mobile column crfq-intro-column">
  51.                 <!-- Top badge -->
  52.                 <div class="ui blue basic label crfq-badge">
  53.                     <i class="check circle icon"></i>
  54.                     {{ 'open_marketplace.crfq.wizard.verified_suppliers_badge'|trans }}
  55.                 </div>
  57.                 <!-- Main heading -->
  58.                 <h1 class="ui huge header crfq-main-heading">
  59.                     {{ 'open_marketplace.crfq.wizard.main_heading'|trans|raw }}
  60.                 </h1>
  62.                 <!-- Description text -->
  63.                 <p class="crfq-description">
  64.                     {{ 'open_marketplace.crfq.wizard.description'|trans|raw }}
  65.                 </p>
  67.                 <!-- Checkmark feature -->
  68.                 <div class="ui basic segment crfq-feature">
  69.                     <i class="big shield icon blue"></i>
  70.                     <strong>{{ 'open_marketplace.crfq.wizard.feature_verified'|trans }}</strong>
  71.                 </div>
  72.             </div>
  74.             <div class="one wide computer only column"></div>
  75.             <div
  76.                 class="seven wide computer floated right column">
  77.                 <!-- Placeholder for world map image -->
  78.                 <div class="ui fluid image">
  79.                     <img src="{{ asset('build/shop/images/suppliers_map.svg', 'shop') }}" alt="{{ 'open_marketplace.crfq.wizard.map_alt'|trans }}" class="logo"/>
  80.                 </div>
  81.             </div>
  82.         </div>
  84.         <!-- Steps section -->
  85.         <div class="ui hidden divider"></div>
  86.         <div class="ui hidden divider"></div>
  88.         <!-- Message container for displaying errors/success messages -->
  89.         <div id="message-container" style="display: none;">
  90.             <div class="ui message" id="notification-message">
  91.                 <i class="close icon"></i>
  92.                 <div class="header" id="message-header"></div>
  93.                 <p id="message-content"></p>
  94.             </div>
  95.         </div>
  97.         <div
  98.             class="ui basic segment steps-wrapper" data-authenticated="{{ is_granted('IS_AUTHENTICATED_FULLY') ? 'true' : 'false' }}">
  99.             <!-- Step 1: Category Selection -->
  100.             <div class="step step-1 active" data-step="1">
  101.                 <div class="ui equal width stackable grid">
  102.                     <div class="stretched row">
  103.                         <div class="twelve wide column">
  104.                             <h2>{{ 'open_marketplace.crfq.wizard.step1_title'|trans }}</h2>
  105.                         </div>
  106.                         <div class="middle aligned column">
  107.                             <h5 class="right floated column">{{ 'open_marketplace.crfq.wizard.step1of3'|trans }}</h5>
  108.                         </div>
  109.                     </div>
  110.                     <div class="stretched row">
  111.                         <div class="column">
  112.                             <div class="ui segment center aligned taxon taxon-selector active" data-taxon-code="components">{{ 'open_marketplace.crfq.wizard.machine_components'|trans }}</div>
  113.                         </div>
  114.                         <div class="column">
  115.                             <div class="ui segment center aligned taxon taxon-selector" data-taxon-code="equipment">{{ 'open_marketplace.crfq.wizard.equipment_production'|trans }}</div>
  116.                         </div>
  117.                         <div class="column">
  118.                             <div class="ui segment center aligned taxon taxon-selector" data-taxon-code="systems">{{ 'open_marketplace.crfq.wizard.complete_systems'|trans }}</div>
  119.                         </div>
  120.                         <div class="column">
  121.                             <div class="ui segment center aligned taxon taxon-selector" data-taxon-code="materials">{{ 'open_marketplace.crfq.wizard.materials'|trans }}</div>
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.                 <div class="ui hidden divider"></div>
  126.                 <div id="taxon-dropdown-wrapper" data-taxon-leafs-url="{{ path('app_crfq_taxon_leafs') }}">
  127.                     <div class="ui fluid search selection dropdown" id="taxon-child-dropdown">
  128.                         <input type="hidden" name="taxon" id="selected-taxon">
  129.                         <i class="dropdown icon"></i>
  130.                         <div class="default text">{{ 'open_marketplace.crfq.wizard.select_category_first'|trans }}</div>
  131.                         <div class="menu"></div>
  132.                     </div>
  133.                 </div>
  134.                 <div class="ui hidden divider computer only"></div>
  135.                 <div class="step-navigation">
  136.                     {% if not is_mobile() %}
  137.                         <button type="button" class="ui labeled icon button primary next-step" data-next="2">
  138.                             <i class="arrow right icon"></i>
  139.                             {{ 'open_marketplace.crfq.wizard.next'|trans }}
  140.                         </button>
  141.                     {% else %}
  142.                         <button type="button" class="ui button primary next-step" title="{{ 'open_marketplace.crfq.wizard.next'|trans }}" data-next="2">
  143.                             {{ 'open_marketplace.crfq.wizard.next'|trans }}
  144.                         </button>
  145.                     {% endif %}
  146.                 </div>
  147.             </div>
  149.             <!-- Step 2: Contact Details -->
  150.             <div class="step step-2" data-step="2" style="display: none;">
  152.                 <div class="ui equal width stackable grid">
  153.                     <div class="stretched row">
  154.                         <div class="twelve wide column">
  155.                             <h2 class="step-info">{{ 'open_marketplace.crfq.wizard.step2_info'|trans({'%count%': '<span class="suppliers-count"></span>'})|raw }}</h2>
  156.                         </div>
  157.                         <div class="middle aligned column">
  158.                             <h5 class="right floated column">{{ 'open_marketplace.crfq.wizard.step2of3'|trans }}</h5>
  159.                         </div>
  160.                     </div>
  161.                 </div>
  164.                 <p class="step-title">{{ 'open_marketplace.crfq.wizard.step2_title'|trans }}</p>
  166.                 <div class="ui form large contact-form">
  167.                     <div class="two fields">
  168.                         <div class="field">
  169.                             <input type="text" name="firstName" id="contact-first-name" placeholder="{{ 'open_marketplace.crfq.wizard.first_name'|trans }}" required>
  170.                         </div>
  171.                         <div class="field">
  172.                             <input type="text" name="lastName" id="contact-last-name" placeholder="{{ 'open_marketplace.crfq.wizard.last_name'|trans }}" required>
  173.                         </div>
  174.                     </div>
  176.                     <div class="two fields">
  177.                         <div class="field">
  178.                             <input type="email" name="email" id="contact-email" placeholder="{{ 'open_marketplace.crfq.wizard.email'|trans }}" required>
  179.                         </div>
  180.                         <div class="field">
  181.                             <input type="text" name="companyName" id="contact-company" placeholder="{{ 'open_marketplace.crfq.wizard.company_name'|trans }}" required>
  182.                         </div>
  183.                     </div>
  185.                     <div class="ui equal width stackable grid middle aligned">
  186.                         <div class="row">
  187.                             <div class="column">
  188.                                 <div class="ui checkbox">
  189.                                     <input type="checkbox" name="agreeTerms" id="agree-terms" required>
  190.                                     <label>{{ 'open_marketplace.crfq.wizard.agree_terms'|trans({'%privacy_policy%': '<a href="#" target="_blank">' ~ 'open_marketplace.crfq.wizard.privacy_policy'|trans ~ '</a>', '%terms_of_use%': '<a href="#" target="_blank">' ~ 'open_marketplace.crfq.wizard.terms_of_use'|trans ~ '</a>'})|raw }}</label>
  191.                                 </div>
  192.                             </div>
  193.                             <div class="right aligned column">
  194.                                 <a href="{{ path('sylius_shop_login') }}">{{ 'open_marketplace.crfq.wizard.sign_in'|trans }}</a>
  195.                                 {{ 'open_marketplace.crfq.wizard.sign_in_details'|trans }}
  196.                             </div>
  197.                         </div>
  198.                     </div>
  199.                 </div>
  201.                 <div class="ui hidden divider"></div>
  202.                 <div class="step-navigation">
  203.                     <button type="button" class="ui button back-step" data-prev="1">
  204.                         {{ 'open_marketplace.crfq.wizard.back'|trans }}
  205.                     </button>
  206.                     {% if not is_mobile() %}
  207.                         <button type="button" class="ui labeled icon button primary right floated next-step" data-next="3">
  208.                             <i class="arrow right icon"></i>
  209.                             {{ 'open_marketplace.crfq.wizard.next'|trans }}
  210.                         </button>
  211.                     {% else %}
  212.                         <button type="button" class="ui button primary right floated next-step" title="{{ 'open_marketplace.crfq.wizard.next'|trans }}" data-next="3">
  213.                             {{ 'open_marketplace.crfq.wizard.next'|trans }}
  214.                         </button>
  215.                     {% endif %}
  216.                 </div>
  217.             </div>
  218.             <!-- Step 3: Placeholder for future implementation -->
  219.             <div class="step step-3" data-step="3" style="display: none;">
  221.                 <div class="ui equal width stackable grid">
  222.                     <div class="stretched row">
  223.                         <div class="twelve wide column">
  224.                             <h2 class="step-info">{{ 'open_marketplace.crfq.wizard.step3_title'|trans }}</h2>
  225.                         </div>
  226.                         <div class="middle aligned column">
  227.                             <h5 class="right floated column">{{ 'open_marketplace.crfq.wizard.step3of3'|trans }}</h5>
  228.                         </div>
  229.                     </div>
  230.                 </div>
  233.                 <div class="ui hidden divider"></div>
  235.                 <div class="ui large form">
  236.                     <div class="six wide field">
  237.                         <input type="text" id="verification-code" name="app_crfq[verificationCode]" placeholder="{{ 'open_marketplace.crfq.wizard.code_placeholder'|trans }}" maxlength="20" required>
  238.                     </div>
  239.                 </div>
  241.                 <div class="ui hidden divider"></div>
  242.                 <div class="step-navigation">
  243.                     <button type="button" class="ui button back-step" data-prev="2">
  244.                         {{ 'open_marketplace.crfq.wizard.back'|trans }}
  245.                     </button>
  246.                     {% if not is_mobile() %}
  247.                         <button type="submit" class="ui labeled icon button primary right floated">
  248.                             <i class="arrow right icon"></i>
  249.                             {{ 'open_marketplace.crfq.wizard.show_suppliers'|trans }}
  250.                         </button>
  251.                     {% else %}
  252.                         <button type="submit" class="ui button primary right floated" title="{{ 'open_marketplace.crfq.wizard.next'|trans }}">
  253.                             {{ 'open_marketplace.crfq.wizard.next'|trans }}
  254.                         </button>
  255.                     {% endif %}
  256.                 </div>
  257.             </div>
  258.         </div>
  259.         <div class="ui hidden divider"></div>
  260.         <div class="ui hidden divider"></div>
  262.     {% else %}
  263.         <div class="suppliers">
  264.             {% set organization = app.user.customer.organization|default(null) %}
  265.             {% if organization %}
  266.                 {% set buyerConfiguration = buyer_crfq_configuration(organization) %}
  267.                 {% if not buyerConfiguration.hasSubscription %}
  268.                     {% if buyerConfiguration.hasFreeQuota %}
  269.                         <div class="ui message info">
  270.                             {{ 'app.ui.crfq.free_quota_available_to_create'|trans({
  271.                             '%freeQuotaUsed%': buyerConfiguration.freeQuotaUsed,
  272.                             '%freeQuotaMaxQuantity%': buyerConfiguration.freeQuotaMaxQuantity,
  273.                             '%url%': path('open_marketplace_vendor_seller_plan_index')
  274.                         })|raw }}
  275.                         </div>
  276.                     {% else %}
  277.                         <div class="ui message warning">
  278.                             {{ 'app.ui.crfq.free_quota_reached_to_create'|trans({
  279.                             '%freeQuotaUsed%': buyerConfiguration.freeQuotaUsed,
  280.                             '%freeQuotaMaxQuantity%': buyerConfiguration.freeQuotaMaxQuantity,
  281.                             '%url%': path('open_marketplace_vendor_seller_plan_index')
  282.                         })|raw }}
  283.                         </div>
  284.                     {% endif %}
  285.                 {% endif %}
  286.             {% endif %}
  288.             {% if not buyerConfiguration is defined or (buyerConfiguration is defined and buyerConfiguration.canCRFQ) %}
  289.                 {{ form_start(form, {
  290.                 'action': path('app_crfq_create'),
  291.                 'attr': {
  292.                     'class': 'ui loadable crfq-create hyfindr-form form',
  293.                     'novalidate': 'novalidate',
  294.                     'data-get-organization-list-url': path('app_crfq_create_organization_list')
  295.                 }
  296.             }) }}
  297.                 {% include 'Context/Shop/RFQCategory/_form.html.twig' %}
  298.                 {{ form_end(form, {'render_rest': false}) }}
  299.             {% endif %}
  300.         </div>
  301.     {% endif %}
  302. {% endblock %}