{% macro transitionAttributes(transitionData, checkout, componentOptions) %}
{% apply spaceless %}
    {% import '@OroUI/macros.html.twig' as UI %}
    {# Simplified transitions handler specific for checkout logic #}
    {% set transition = transitionData.transition %}

    {% set pageComponentModule = transition.frontendOptions.page_component_module|default('orocheckout/js/app/components/transition-button-component') %}
    {% set pageComponentOptions = transition.frontendOptions.page_component_options|default({}) %}
    {% if componentOptions is iterable %}
        {% set pageComponentOptions = pageComponentOptions|merge(componentOptions) %}
    {% endif %}

    {{ UI.renderPageComponentAttributes({
        module: pageComponentModule,
        options: pageComponentOptions|merge({
            'enabled': transitionData.isAllowed,
            'hasForm': transition.hasForm(),
            'transitionUrl': path(
                'oro_checkout_frontend_checkout',
                {
                    id: checkout.id,
                    transition: transition.name
                }
            )
        })
    }) }}
{% endapply %}
{% endmacro %}

{% macro conditionMessages(transitionData) %}
    {% import _self as layout %}
    {% set hasErrors = transitionData.errors|length > 0 %}
    {% if hasErrors %}
        data-toggle="tooltip"
        data-title="{{ layout.transitionConditionMessages(transitionData) }}"
        data-html="true"
        data-container="body"
        data-placement="{% if isMobileVersion() %}bottom{% else %}left{% endif %}"
    {% endif %}
{% endmacro %}

{% macro transitionConditionMessages(transitionData) %}
    {%- apply spaceless -%}
        <div>{{ 'oro.checkout.workflow.unavailable_transition.message'|trans }}</div>
        <ul>
            {% for error in transitionData.errors %}
                <li>{{ error.message|trans(error.parameters)|nl2br }}</li>
            {% endfor %}
        </ul>
    {%- endapply -%}
{% endmacro %}

{% block checkout_transition_back_widget %}
    {% import _self as layout %}

    {% if transitionData is defined and transitionData %}
    {% set transitionUrl = path(
        'oro_checkout_frontend_checkout',
        {
            id: checkout.id,
            transition: transitionData.transition.name
        })
    %}
    <a href="{{ transitionUrl }}"
        {{ layout.transitionAttributes(transitionData, checkout) }}
        {{ layout.conditionMessages(transitionData) }}
    >
        <span class="fa-angle-left" aria-hidden="true"></span>{{ 'oro.checkout.workflow.b2b_flow_checkout.transition.back.label'|trans }}
    </a>
    {% endif %}
{% endblock %}

{% block checkout_transition_continue_widget %}
    {% import _self as layout %}

    {% if transitionData is defined and transitionData %}
        <div class="tooltip-container" {{ layout.conditionMessages(transitionData) }}>
            <button type="submit"
                class="btn btn--info{% if not transitionData.isAllowed %} btn--disabled{% endif %} btn--size-m checkout-form__submit"
                disabled="disabled"
                {{ layout.transitionAttributes(transitionData, checkout, componentOptions) }}
            >
                {{ transitionData.transition.label|trans({},'workflows') }}&nbsp;<span class="fa-angle-right fa--no-offset" aria-hidden="true"></span>
            </button>
        </div>
    {% endif %}
{% endblock %}

{% block checkout_transition_step_edit_widget %}
    {% import _self as layout %}

    {% if transitionData is defined and transitionData %}
    {% set transitionUrl = path(
        'oro_checkout_frontend_checkout',
        {
            id: checkout.id,
            transition: transitionData.transition.name
        })
    %}
    {% if transitionData.errors|length > 0 %}
        {% set transitionLabel = layout.transitionConditionMessages(transitionData) %}
    {% else %}
        {% set transitionLabel = transitionData.transition.label|trans({},'workflows') %}
    {% endif %}
    <a href="{{ transitionUrl }}" class="btn--plain"
       data-toggle="tooltip"
       data-title="{{ transitionLabel }}"
       data-html="true"
       data-container="body"
       aria-label="{{ transitionLabel }}"
       {{ layout.transitionAttributes(transitionData, checkout) }}
    >
        <span class="fa-pencil fa--no-offset tooltip-trigger" aria-hidden="true"></span>
    </a>
    {% endif %}
{% endblock %}