Improve UI for 2.0

.github/workflows/build.yaml

@@ -204,11 +204,15 @@ jobs:
             -
                 name: Run Behat
                 run: |
+                    echo "➡️  Running PDF-specific scenarios"
                     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 --rerun;
+                        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
                     else
-                        vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --rerun;
+                        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
                     fi
+
+                    echo "➡️  Running all remaining scenarios (excluding PDF-specific)"
+                    vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags='~@pdf_enabled&&~@pdf_disabled' || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags='~@pdf_enabled&&~@pdf_disabled' --rerun
 
             -
                 name: Upload Behat logs

UPGRADE-2.1.md

@@ -0,0 +1,5 @@
+# UPGRADE FROM 2.0 TO 2.1
+
+### Twig hooks
+- `'sylius_admin.invoice.show.content.header.title_block.title.subtitle'`- hook has been deprecated and disabled. Content of this hook has been moved to `'sylius_admin.invoice.show.content.sections.details'`section
+- `'sylius_admin.invoice.show.content.sections.card'`- hook has been deprecated and disabled. Content of this hook has been moved to `'sylius_admin.invoice.show.content.sections.details'`section

config/twig_hooks/admin/invoice/show.yaml

@@ -20,6 +20,7 @@ sylius_twig_hooks:
             subtitle:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title/subtitle.html.twig'
                 priority: 0
+                enabled: false
 
         'sylius_admin.invoice.show.content.header.title_block.actions':
             back_to_index:
@@ -34,6 +35,9 @@ sylius_twig_hooks:
                 priority: 0
 
         'sylius_admin.invoice.show.content.sections':
+            details:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details.html.twig'
+                priority: 300
             buyer:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer.html.twig'
                 priority: 200
@@ -44,6 +48,52 @@ sylius_twig_hooks:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card.html.twig'
                 priority: 0
 
+        'sylius_admin.invoice.show.content.sections.details':
+            date:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/date.html.twig'
+                priority: 300
+            order:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/order.html.twig'
+                priority: 200
+            channel:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/channel.html.twig'
+                priority: 100
+            paid:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/paid.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.details.date':
+            label:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/date/label.html.twig'
+                priority: 100
+            value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/date/value.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.details.order':
+            label:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/order/label.html.twig'
+                priority: 100
+            value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/order/value.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.details.channel':
+            label:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/channel/label.html.twig'
+                priority: 100
+            value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/channel/value.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.details.paid':
+            label:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/paid/label.html.twig'
+                priority: 100
+            value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/details/paid/value.html.twig'
+                priority: 0
+
         'sylius_admin.invoice.show.content.sections.buyer':
             first_name:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/first_name.html.twig'
@@ -94,6 +144,7 @@ sylius_twig_hooks:
             footer:
                 template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/footer.html.twig'
                 priority: 0
+                enabled: false
 
         'sylius_admin.invoice.show.content.sections.card.body':
             table:

features/managing_invoices/sending_invoice_when_order_is_paid.feature

@@ -24,9 +24,9 @@ Feature: Sending invoice when order is paid
     @ui
     Scenario: Receiving an email containing invoice when the order is paid
         When the order "#00000666" has just been paid
-        Then an email containing invoice generated for order "#00000666" should be sent to "sylius@example.com"
+        Then an email containing invoice generated for order "#00000666" should be sent to "shop@example.com"
 
     @ui
     Scenario: Not receiving an email containing invoice when the order is not paid
         When the order "#00000667" was cancelled
-        Then an email containing invoice generated for order "#00000667" should not be sent to "sylius@example.com"
+        Then an email containing invoice generated for order "#00000667" should not be sent to "shop@example.com"

templates/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig

@@ -1,3 +1,3 @@
-<a {{ sylius_test_html_attribute('back') }} href="{{ path('sylius_invoicing_admin_invoice_index') }}" class="btn">
+<a {{ sylius_test_html_attribute('back') }} href="{{ path('sylius_invoicing_admin_invoice_index') }}" class="btn btn-icon">
     {{ ux_icon('tabler:arrow-left', {'class': 'icon'}) }}
 </a>

templates/admin/invoice/show/content/header/title_block/title/subtitle.html.twig

@@ -1,3 +1,5 @@
+{% deprecated 'The "subtitle.html.twig" template is deprecated. Content has been moved to details section.' %}
+
 {% set invoice = hookable_metadata.context.resource %}
 
 <div class="mt-1">

templates/admin/invoice/show/content/sections/buyer.html.twig

@@ -1,5 +1,5 @@
-<div class="col">
-    <div class="card mb-3">
+<div class="col-12 col-md-4 mb-3">
+    <div class="card h-full">
         <div class="card-header">
             <div class="card-title">
                 {{ 'sylius_invoicing.ui.buyer'|trans }}

templates/admin/invoice/show/content/sections/buyer/first_name.html.twig

@@ -1,3 +1,5 @@
 {% set billing_data = hookable_metadata.context.resource.billingData %}
 
-<strong>{{ billing_data.firstName }} {{ billing_data.lastName }}</strong>
+<div>
+    <strong>{{ billing_data.firstName }} {{ billing_data.lastName }}</strong>
+</div>

templates/admin/invoice/show/content/sections/card.html.twig

@@ -1,5 +1,5 @@
 {% set invoice = hookable_metadata.context.resource %}
 
-<div class="card mb-3 mb-2">
+<div class="col-12">
     {% hook 'card' %}
 </div>

templates/admin/invoice/show/content/sections/card/body.html.twig

@@ -1,3 +1,3 @@
-<div class="card-body">
+<div class="card">
     {% hook 'body' %}
 </div>

templates/admin/invoice/show/content/sections/card/body/table.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-bordered table-striped table-sm">
+    <table class="table" {{ sylius_test_html_attribute('invoice-items') }}>
         {% hook 'table' %}
     </table>
 </div>

templates/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig

@@ -1 +1 @@
-<td>{{ hookable_metadata.context.resource.currencyCode }}</td>
+<td class="text-center">{{ hookable_metadata.context.resource.currencyCode }}</td>

templates/admin/invoice/show/content/sections/card/body/table/body/no.html.twig

@@ -1 +1 @@
-<td>{{ hookable_metadata.context.loop.index }}</td>
+<td class="text-center">{{ hookable_metadata.context.loop.index }}</td>

templates/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-total" scope="col">{{ 'sylius.ui.currency'|trans }}</th>
+<th class="sylius-table-column-total text-center text-wrap" scope="col">{{ 'sylius.ui.currency'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-discounted-unit-net-price" scope="col">{{ 'sylius_invoicing.ui.discounted_unit_net_price'|trans }}</th>
+<th class="sylius-table-column-discounted-unit-net-price text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.discounted_unit_net_price'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-total" scope="col">{{ 'sylius_invoicing.ui.gross_value'|trans }}</th>
+<th class="sylius-table-column-total text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.gross_value'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/name.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-name" scope="col">{{ 'sylius.ui.name'|trans }}</th>
+<th class="sylius-table-column-name text-wrap" scope="col">{{ 'sylius.ui.name'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-subtotal" scope="col">{{ 'sylius_invoicing.ui.net_value'|trans }}</th>
+<th class="sylius-table-column-subtotal text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.net_value'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/no.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-number" scope="col">{{ 'sylius_invoicing.ui.no'|trans }}</th>
+<th class="sylius-table-column-number text-center text-wrap" scope="col">{{ 'sylius_invoicing.ui.no'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-quantity" scope="col">{{ 'sylius.ui.quantity'|trans }}</th>
+<th class="sylius-table-column-quantity text-end text-wrap" scope="col">{{ 'sylius.ui.quantity'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-tax_total" scope="col">{{ 'sylius_invoicing.ui.tax_amount'|trans }}</th>
+<th class="sylius-table-column-tax_total text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.tax_amount'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-tax-rate" scope="col">{{ 'sylius_invoicing.ui.tax_rate'|trans }}</th>
+<th class="sylius-table-column-tax-rate text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.tax_rate'|trans }}</th>

templates/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig

@@ -1 +1 @@
-<th class="sylius-table-column-unit-net-price" scope="col">{{ 'sylius_invoicing.ui.unit_net_price'|trans }}</th>
+<th class="sylius-table-column-unit-net-price text-end text-wrap" scope="col">{{ 'sylius_invoicing.ui.unit_net_price'|trans }}</th>

templates/admin/invoice/show/content/sections/card/footer.html.twig

@@ -1,3 +1,5 @@
+{% deprecated 'The "footer.html.twig" template is deprecated. Content has been moved to details section.' %}
+
 <div class="card-footer text-end">
     <div class="d-inline-block" {{ sylius_test_html_attribute('invoice-is-paid') }}>
         <strong>{{ 'sylius_invoicing.ui.payment.paid'|trans }}: </strong>

templates/admin/invoice/show/content/sections/details.html.twig

@@ -0,0 +1,14 @@
+<div class="col-12 col-md-4 mb-3">
+    <div class="card h-full">
+        <div class="card-header">
+            <div class="card-title">
+                {{ 'sylius.ui.details'|trans }}
+            </div>
+        </div>
+        <div class="card-body">
+            <table class="table table-sm table-borderless">
+                {% hook 'details' %}
+            </table>
+        </div>
+    </div>
+</div>

templates/admin/invoice/show/content/sections/details/channel.html.twig

@@ -0,0 +1,3 @@
+<tr>
+    {% hook 'channel' %}
+</tr>

templates/admin/invoice/show/content/sections/details/channel/label.html.twig

@@ -0,0 +1 @@
+<td><strong>{{ 'sylius_invoicing.ui.issued_from'|trans }}:</strong></td>

templates/admin/invoice/show/content/sections/details/channel/value.html.twig

@@ -0,0 +1,5 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<td {{ sylius_test_html_attribute('channel') }}>
+    {% include '@SyliusAdmin/shared/grid/field/channel.html.twig' with {'data': invoice.channel} %}
+</td>

templates/admin/invoice/show/content/sections/details/date.html.twig

@@ -0,0 +1,3 @@
+<tr>
+    {% hook 'date' %}
+</tr>

templates/admin/invoice/show/content/sections/details/date/label.html.twig

@@ -0,0 +1 @@
+<td><strong>{{ 'sylius_invoicing.ui.issued_at'|trans }}:</strong></td>

templates/admin/invoice/show/content/sections/details/date/value.html.twig

@@ -0,0 +1,3 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<td><span {{ sylius_test_html_attribute('issued-at') }}>{{ invoice.issuedAt|format_datetime }}</span></td>

templates/admin/invoice/show/content/sections/details/order.html.twig

@@ -0,0 +1,3 @@
+<tr>
+    {% hook 'order' %}
+</tr>

templates/admin/invoice/show/content/sections/details/order/label.html.twig

@@ -0,0 +1 @@
+<td><strong>{{ 'sylius_invoicing.ui.issued_for_order'|trans }}:</strong></td>

templates/admin/invoice/show/content/sections/details/order/value.html.twig

@@ -0,0 +1,3 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<td>#{{ invoice.order.number }}</td>

templates/admin/invoice/show/content/sections/details/paid.html.twig

@@ -0,0 +1,3 @@
+<tr {{ sylius_test_html_attribute('invoice-is-paid') }}>
+    {% hook 'paid' %}
+</tr>

templates/admin/invoice/show/content/sections/details/paid/label.html.twig

@@ -0,0 +1 @@
+<td><strong>{{ 'sylius_invoicing.ui.payment.paid'|trans }}: </strong></td>

templates/admin/invoice/show/content/sections/details/paid/value.html.twig

@@ -0,0 +1,10 @@
+{% set invoice = hookable_metadata.context.resource %}
+{% set payment_state_completed = constant('Sylius\\InvoicingPlugin\\Entity\\InvoiceInterface::PAYMENT_STATE_COMPLETED') %}
+
+<td>
+    {% if invoice.paymentState == payment_state_completed %}
+        <span class="text-success">{{ 'sylius_invoicing.ui.payment.yes'|trans }}</span>
+    {% else %}
+        <span class="text-danger">{{ 'sylius_invoicing.ui.payment.no'|trans }}</span>
+    {% endif %}
+</td>

templates/admin/invoice/show/content/sections/seller.html.twig

@@ -1,8 +1,8 @@
 {% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
 
 {% if shop_billing_data %}
-    <div class="col">
-        <div class="card mb-3">
+    <div class="col-12 col-md-4 mb-3">
+        <div class="card h-full">
             <div class="card-header">
                 <div class="card-title">
                     {{ 'sylius_invoicing.ui.seller'|trans }}

templates/admin/invoice/show/content/sections/seller/company.html.twig

@@ -1,3 +1,7 @@
 {% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
 
-{% if shop_billing_data.company %}<strong>{{ shop_billing_data.company }}</strong>{% endif %}
+{% if shop_billing_data.company %}
+    <div>
+        <strong>{{ shop_billing_data.company }}</strong>
+    </div>
+{% endif %}

templates/admin/order/show/content/sections/invoices/table.html.twig

@@ -4,7 +4,9 @@
             {{ 'sylius_invoicing.ui.invoices'|trans }}
         </div>
     </div>
-    <table class="table table-borderless align-middle mb-0">
-        {% hook 'table' %}
-    </table>
+    <div class="table-responsive">
+        <table class="table table-hover table-vcenter card-table">
+            {% hook 'table' %}
+        </table>
+    </div>
 </div>

templates/admin/order/show/content/sections/invoices/table/body/actions.html.twig

@@ -1,3 +1,5 @@
 <td>
-    {% hook 'actions' %}
+    <div class="d-flex gap-1 justify-content-end">
+        {% hook 'actions' %}
+    </div>
 </td>

templates/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig

@@ -1,3 +1,3 @@
-<td {{ sylius_test_html_attribute('issued-at') }}>
+<td class="text-end" {{ sylius_test_html_attribute('issued-at') }}>
     {{ hookable_metadata.context.invoice.issuedAt|format_date }}
 </td>

templates/admin/order/show/content/sections/invoices/table/head/actions.html.twig

@@ -1 +1 @@
-<th>{{ 'sylius.ui.actions'|trans }}</th>
+<th class="text-end">{{ 'sylius.ui.actions'|trans }}</th>

templates/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig

@@ -1 +1 @@
-<th>{{ 'sylius_invoicing.ui.issued_at'|trans }}</th>
+<th class="text-end">{{ 'sylius_invoicing.ui.issued_at'|trans }}</th>

tests/Application/.env.test

@@ -14,3 +14,8 @@ SYLIUS_MESSENGER_TRANSPORT_MAIN_FAILED_DSN=sync://
 SYLIUS_MESSENGER_TRANSPORT_CATALOG_PROMOTION_REMOVAL_DSN=sync://
 SYLIUS_MESSENGER_TRANSPORT_CATALOG_PROMOTION_REMOVAL_FAILED_DSN=sync://
 ###< symfony/messenger ###
+
+###> lexik/jwt-authentication-bundle ###
+JWT_SECRET_KEY=%kernel.project_dir%/config/jwt/private-test.pem
+JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public-test.pem
+###< lexik/jwt-authentication-bundle ###

tests/Behat/Page/Admin/Invoice/ShowPage.php

@@ -145,7 +145,7 @@ public function getChannel(): string
 
     public function download(): void
     {
-        $this->getDocument()->clickLink('Download');
+        $this->getElement('download_button')->click();
     }
 
     public function resend(): void
@@ -165,7 +165,7 @@ public function isPaid(): bool
 
     public function hasDownloadButton(): bool
     {
-        return $this->getDocument()->hasLink('Download');
+        return $this->hasElement('download_button');
     }
 
     protected function getDefinedElements(): array
@@ -174,6 +174,7 @@ protected function getDefinedElements(): array
             'back' => '[data-test-back]',
             'billing_address' => '[data-test-billing-data]',
             'channel' => '[data-test-channel]',
+            'download_button' => '[data-test-download-button]',
             'invoice_net_total' => '[data-test-invoice-net-total]',
             'invoice_net_total_currency_code' => '[data-test-invoice-net-total-currency-code]',
             'invoice_taxes_total' => '[data-test-invoice-taxes-total]',
@@ -183,7 +184,7 @@ protected function getDefinedElements(): array
             'issued_at' => '[data-test-issued-at]',
             'paid' => '[data-test-invoice-is-paid]',
             'shop_billing_data' => '[data-test-shop-billing-data]',
-            'table' => '.table',
+            'table' => '[data-test-invoice-items]',
         ]);
     }