SYL-4225: UI improvements (#468)

| Q               | A
| --------------- | -----
| Branch?         | 2.0
| Bug fix?        | yes
| New feature?    | no
| Related tickets | 

### 1. Added condition for refund payments and now it will not be
visible if there are no refund payments available.
Payments without refund transactions:

![image](https://github.com/user-attachments/assets/e7d7c913-bd45-4e3e-999e-35c8de17209b)

Payments with refund transactions:

![image](https://github.com/user-attachments/assets/29351366-3c51-43a8-8d86-0f7ffdabc303)

### 2. Textarea
Reduced comment textarea heght:

![image](https://github.com/user-attachments/assets/773c26d6-ea48-4274-a365-d75af794932b)

.github/workflows/build.yaml

@@ -268,9 +268,9 @@ jobs:
                 name: Run Behat
                 run: |
                     if [ "${{ matrix.wkhtmltopdf }}" != "false" ]; then
-                      vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_disabled"
+                      vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_disabled" || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_disabled" --rerun || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_disabled" --rerun
                     else
-                      vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled"
+                      vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" --rerun || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" --rerun || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" --rerun || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" --rerun
                     fi
 
             -

assets/entrypoint.js

@@ -1 +1,3 @@
 import './js/refund-button';
+
+import './styles/main.scss';

assets/styles/main.scss

@@ -0,0 +1 @@
+@import 'refund';

assets/styles/refund.scss

@@ -0,0 +1,4 @@
+textarea.refund-comment {
+  min-height: 4rem;
+  height: 4rem;
+}

config/twig_hooks/admin/order/refund/show.yaml

@@ -117,7 +117,7 @@ sylius_twig_hooks:
         'sylius_refund.admin.order.refund.content.sections.form.fields':
             payment_method:
                 template: '@SyliusRefundPlugin/admin/order/refund/content/sections/form/fields/payment_method.html.twig'
-                priority: 100
+                priority: 0
             comment:
                 template: '@SyliusRefundPlugin/admin/order/refund/content/sections/form/fields/comment.html.twig'
-                priority: 0
+                priority: 100

config/twig_hooks/admin/order/show.yaml

@@ -42,6 +42,9 @@ sylius_twig_hooks:
                 priority: 0
 
         'sylius_admin.order.show.content.sections#left':
+            payments:
+                template: '@SyliusRefundPlugin/admin/order/content/sections/payments.html.twig'
+                priority: 100
             credit_memos:
                 template: '@SyliusRefundPlugin/admin/order/content/sections/credit_memos.html.twig'
                 priority: 50

templates/admin/credit_memo/show/content/sections/memo_details/table.html.twig

@@ -1,3 +1,5 @@
-<table class="table mb-0">
-    {% hook 'table' %}
-</table>
+<div class="table-responsive">
+    <table class="table mb-0">
+        {% hook 'table' %}
+    </table>
+</div>

templates/admin/order/content/sections/payments.html.twig

@@ -0,0 +1,6 @@
+{% set order = hookable_metadata.context.resource %}
+{% set refund_payments = get_all_refund_payments_by_order(order) %}
+
+<div class="card mb-3" {{ sylius_test_html_attribute('payments') }}>
+    {% hook 'payments' with { refund_payments } %}
+</div>

templates/admin/order/content/sections/payments/refund_header.html.twig

@@ -1,3 +1,7 @@
-<div class="card-header">
-    {% hook 'refund_header' %}
-</div>
+{% set refund_payments = hookable_metadata.context.refund_payments %}
+
+{% if refund_payments|length > 0 %}
+    <div class="card-header border-top">
+        {% hook 'refund_header' %}
+    </div>
+{% endif %}

templates/admin/order/content/sections/payments/refund_items.html.twig

@@ -1,20 +1,17 @@
-{% set order = hookable_metadata.context.resource %}
-{% set refund_payments = get_all_refund_payments_by_order(order) %}
+{% set refund_payments = hookable_metadata.context.refund_payments %}
 
-<div class="py-3">
-    {% if order.hasPayments %}
+{% if refund_payments|length > 0 %}
+    <div class="py-3">
         <div class="table-responsive">
             <table class="table table-vcenter table-borderless table-sm card-table">
                 <tbody>
                 {% for refund_payment in refund_payments %}
                     <tr {{ sylius_test_html_attribute('refund') }}>
-                        {% hook 'refund_item' with { resource: order, refund_payment } %}
+                        {% hook 'refund_item' with { refund_payment } %}
                     </tr>
                 {% endfor %}
                 </tbody>
             </table>
         </div>
-    {% else %}
-        <span class="px-3 text-secondary italic" {{ sylius_test_html_attribute('no-payments') }}>{{ 'sylius.ui.no_payments'|trans }}</span>
-    {% endif %}
-</div>
+    </div>
+{% endif %}

templates/admin/order/refund/content/sections/form/fields/comment.html.twig

@@ -1,6 +1,6 @@
-<div class="col-12 col-md-6">
+<div class="col-12 col-md-6 mb-3 mb-md-0">
     <div class="field">
         <label for="sylius-refund-comment" class="form-label">{{ 'sylius.ui.comment'|trans }}</label>
-        <textarea rows="3" name="sylius_refund_comment" id="sylius-refund-comment" class="form-control" style="height: 8rem;"></textarea>
+        <textarea rows="3" name="sylius_refund_comment" id="sylius-refund-comment" class="form-control refund-comment"></textarea>
     </div>
 </div>

templates/admin/order/refund/content/sections/form/fields/payment_method.html.twig

@@ -3,7 +3,7 @@
 {% set payment_methods = hookable_metadata.context.payment_methods %}
 {% set original_payment_method = order.lastPayment(completed).method %}
 
-<div class="col-12 col-md-6 mb-3">
+<div class="col-12 col-md-6">
     <div class="field">
         <label for="payment-methods" class="form-label">{{ 'sylius.ui.payment_method'|trans }}</label>
         <select id="payment-methods" name="sylius_refund_payment_method" class="form-select mb-1">

tests/Application/config/packages/_sylius.yaml

@@ -17,3 +17,7 @@ sylius_twig_hooks:
         'sylius_admin.base#javascripts':
             app_javascripts:
                 template: 'admin/javascripts.html.twig'
+
+        'sylius_admin.base#stylesheets':
+            app_stylesheets:
+                template: 'admin/stylesheets.html.twig'

tests/Application/templates/admin/stylesheets.html.twig

@@ -0,0 +1 @@
+{{ encore_entry_link_tags('app-admin-entry', null, 'app.admin') }}