BitBagCommerce · Glancu · Jul 8, 2025 · Jul 8, 2025 · Aug 1, 2025
diff --git a/src/Resources/config/app/config.yaml b/src/Resources/config/app/config.yaml
@@ -1,6 +1,7 @@
 imports:
     - { resource: "@SetonoSyliusFeedPlugin/Resources/config/grids/setono_sylius_feed_admin_feed.yaml" }
     - { resource: "@SetonoSyliusFeedPlugin/Resources/config/grids/setono_sylius_feed_admin_violation.yaml" }
+    - { resource: "@SetonoSyliusFeedPlugin/Resources/config/twig_hooks/*/*.yaml" }
 
 flysystem:
     storages:

diff --git a/src/Resources/config/routing/admin.yaml b/src/Resources/config/routing/admin.yaml
@@ -21,7 +21,7 @@ setono_sylius_feed_admin_feed_show:
         _sylius:
             section: admin
             permission: true
-            template: "@SetonoSyliusFeedPlugin/Admin/Feed/show.html.twig"
+            template: "@SyliusAdmin/shared/crud/show.html.twig"
 
 setono_sylius_feed_admin_feed_process:
     path: /feeds/{id}/process

diff --git a/src/Resources/config/twig_hooks/feed/show.yaml b/src/Resources/config/twig_hooks/feed/show.yaml
@@ -0,0 +1,42 @@
+sylius_twig_hooks:
+    hooks:
+        sylius_admin.feed.show.content:
+            sections:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/sections.html.twig'
+                priority: 0
+
+        'sylius_admin.feed.show.content.header':
+            breadcrumbs:
+                template: '@SyliusAdmin/shared/crud/show/content/header/breadcrumbs.html.twig'
+                priority: 0
+
+        sylius_admin.feed.show.content.header.title_block:
+            actions:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/header/title_block/actions.html.twig'
+                priority: 0
+
+        'sylius_admin.feed.show.content.header.title_block.actions':
+            generate_feed:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/header/title_block/actions/generate_feed.html.twig'
+                priority: 200
+            edit:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/header/title_block/actions/edit.html.twig'
+                priority: 100
+
+        sylius_admin.feed.show.content.sections:
+            state_info:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/sections/state_info.html.twig'
+                priority: 100
+            details:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/content/sections/details.html.twig'
+                priority: 0
+
+        sylius_admin.feed.show#javascripts:
+            scripts:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/scripts.html.twig'
+                priority: 0
+
+        sylius_admin.feed.show#stylesheets:
+            seo:
+                template: '@SetonoSyliusFeedPlugin/Admin/Feed/Show/stylesheets.html.twig'
+                priority: 0
diff --git a/src/Resources/views/Admin/Feed/Show/_breadcrumb.html.twig b/src/Resources/views/Admin/Feed/Show/_breadcrumb.html.twig
diff --git a/src/Resources/views/Admin/Feed/Show/content/header/title_block/actions.html.twig b/src/Resources/views/Admin/Feed/Show/content/header/title_block/actions.html.twig
@@ -0,0 +1,10 @@
+<div class="col-12 col-md-auto ms-auto">
+    <div class="dropdown">
+        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" {{ sylius_test_html_attribute('feed-actions') }}>
+            {{ 'sylius.ui.actions'|trans }}
+        </button>
+        <div class="dropdown-menu">
+            {% hook 'actions' %}
+        </div>
+    </div>
+</div>
diff --git a/src/Resources/views/Admin/Feed/Show/content/header/title_block/actions/edit.html.twig b/src/Resources/views/Admin/Feed/Show/content/header/title_block/actions/edit.html.twig
@@ -0,0 +1,4 @@
+<a class="dropdown-item" href="{{ path('setono_sylius_feed_admin_feed_update', {'id': hookable_metadata.context.resource.id}) }}">
+    {{ ux_icon('tabler:pencil', {'class': 'icon dropdown-item-icon'}) }}
+    {{ 'sylius.ui.edit'|trans }}
+</a>
diff --git a/...esources/views/Admin/Feed/Show/content/header/title_block/actions/generate_feed.html.twig b/...esources/views/Admin/Feed/Show/content/header/title_block/actions/generate_feed.html.twig
@@ -0,0 +1,4 @@
+<a class="dropdown-item" href="{{ path('setono_sylius_feed_admin_feed_process', {'id': hookable_metadata.context.resource.id}) }}">
+    {{ ux_icon('tabler:reload', {'class': 'icon dropdown-item-icon'}) }}
+    {{ 'setono_sylius_feed.ui.generate_feed'|trans }}
+</a>
diff --git a/...s/views/Admin/Feed/Show/_header.html.twig → ...ontent/header/title_block/title.html.twig b/...s/views/Admin/Feed/Show/_header.html.twig → ...ontent/header/title_block/title.html.twig
@@ -1,18 +1,20 @@
-{# @var \Setono\SyliusFeedPlugin\Model\FeedInterface feed #}
+{% import '@SyliusAdmin/shared/helper/header.html.twig' as header %}
 
-<h1 class="ui header">
-    <i class="circular cart icon"></i>
-    <div class="content">
+{% set feed = hookable_metadata.context.feed %}
+
+<div class="col-12 col-md-6">
+    <div class="d-md-flex gap-2 align-items-center" {{ sylius_test_html_attribute('feed-name') }}>
         {{ 'setono_sylius_feed.ui.feed'|trans }} {{ feed.name }}
+
         <div class="sub header">
             <div class="ui horizontal divided list">
                 <div class="item">
-                    {{ 'setono_sylius_feed.ui.feed_type'|trans ~ ': ' ~ feed.feedType }} {# todo output the label of the feed type #}
+                    {{ 'setono_sylius_feed.ui.feed_type'|trans ~ ': ' ~ feed.feedType }}
                 </div>
                 <div class="item">
                     <div class="ui label">{{ ('setono_sylius_feed.ui.' ~ feed.state)|trans }}</div>
                 </div>
             </div>
         </div>
     </div>
-</h1>
+</div>
diff --git a/src/Resources/views/Admin/Feed/Show/content/sections.html.twig b/src/Resources/views/Admin/Feed/Show/content/sections.html.twig
@@ -0,0 +1,5 @@
+<div class="page-body">
+    <div class="container-xl">
+        {% hook 'sections' with { feed: hookable_metadata.context.resource.feed|default(null) } %}
+    </div>
+</div>
diff --git a/src/Resources/views/Admin/Feed/Show/content/sections/details.html.twig b/src/Resources/views/Admin/Feed/Show/content/sections/details.html.twig
@@ -0,0 +1,67 @@
+{% set feed = hookable_metadata.context.resource %}
+
+{% if workflow_has_marked_place(feed, constant('Setono\\SyliusFeedPlugin\\Workflow\\FeedGraph::STATE_READY')) or workflow_has_marked_place(feed, constant('Setono\\SyliusFeedPlugin\\Workflow\\FeedGraph::STATE_PROCESSING')) %}
+    <div class="card pb-3 mb-3">
+        <table class="table card-table table-vcenter datatable" {{ sylius_test_html_attribute('feed-grid-table') }}>
+            <thead>
+            <tr>
+                <th class="text-body">{{ 'sylius.ui.channel'|trans }}</th>
+                <th class="text-body">{{ 'sylius.ui.locale'|trans }}</th>
+                <th class="text-body">{{ 'setono_sylius_feed.ui.link'|trans }}</th>
+            </tr>
+            </thead>
+            <tbody {{ sylius_test_html_attribute('feed-grid-table-body') }}>
+                {% for channel in feed.channels %}
+                    {% for locale in channel.locales %}
+                        <tr class="item">
+                            <td>
+                                <div class="fw-medium">
+                                    {{ channel.name }}
+                                </div>
+                            </td>
+                            <td>
+                                <div class="fw-medium">
+                                    {{ locale.name }}
+                                </div>
+                            </td>
+                            <td>
+                                <div class="ui icon input" style="width: 100%;position: relative;">
+                                    <div class="ui pointing below label teal link-copied-label"
+                                         id="link-copied-{{ loop.parent.loop.index }}-{{ loop.index }}">
+                                        {{ 'setono_sylius_feed.ui.link_copied'|trans }}
+                                    </div>
+                                    <input id="link-{{ loop.parent.loop.index }}-{{ loop.index }}" type="text"
+                                           value="{{ setono_sylius_feed_generate_feed_url(feed, channel, locale) }}"
+                                           readonly class="input-feed-url">
+                                    <i class="copy bi bi-copy copy-feed-link" data-link-id="link-{{ loop.parent.loop.index }}-{{ loop.index }}"
+                                       data-link-copied-id="link-copied-{{ loop.parent.loop.index }}-{{ loop.index }}"
+                                       data-content="{{ 'setono_sylius_feed.ui.click_to_copy'|trans }}"
+                                       data-position="top right">
+                                        {{ ux_icon('tabler:copy', {'class': 'icon', 'style': 'vertical-align: text-top;'}) }}
+                                    </i>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+{% else %}
+    <div class="alert alert-info">
+        <div class="col-12 col-md-4 fw-bold">{{ 'setono_sylius_feed.ui.unprocessed_feed_header'|trans }}</div>
+        <div class="col-12 col-md-8" {{ sylius_test_html_attribute('feed-info') }}>{{ 'setono_sylius_feed.ui.unprocessed_feed_body'|trans }}</div>
+    </div>
+{% endif %}
+
+{% if feed.violations|length > 0 %}
+    <div class="card mb-3">
+        <div class="card-body">
+        <h2 class="ui header">{{ 'setono_sylius_feed.ui.violation_summary'|trans }}</h2>
+
+        <p>{{ 'setono_sylius_feed.ui.view_all_violations'|trans({'%path%' : path('setono_sylius_feed_admin_feed_violations_index', {'id' : feed.id})})|raw }}</p>
+
+        {{ render(controller('setono_sylius_feed.controller.action.admin.severity_count', {'feed': feed.id})) }}
+        </div>
+    </div>
+{% endif %}
diff --git a/src/Resources/views/Admin/Feed/Show/content/sections/general.html.twig b/src/Resources/views/Admin/Feed/Show/content/sections/general.html.twig
@@ -0,0 +1,7 @@
+<div class="card mb-3">
+    <div class="card-body">
+        <div class="divide-y">
+            {% hook 'general' with { feed: hookable_metadata.context.resource } %}
+        </div>
+    </div>
+</div>
diff --git a/src/Resources/views/Admin/Feed/Show/content/sections/state_info.html.twig b/src/Resources/views/Admin/Feed/Show/content/sections/state_info.html.twig
@@ -0,0 +1,22 @@
+{% set feed = hookable_metadata.context.resource %}
+
+<div class="card mb-3">
+    <div class="card-body">
+        <div class="divide-y">
+            <div class="row">
+                <div class="col-12 col-md-4 fw-bold">{{ 'setono_sylius_feed.ui.feed'|trans }}</div>
+                <div class="col-12 col-md-8" {{ sylius_test_html_attribute('feed-name') }}>{{ feed.name }}</div>
+            </div>
+
+            <div class="row">
+                <div class="col-12 col-md-4 fw-bold">{{ 'setono_sylius_feed.ui.feed_type'|trans }}</div>
+                <div class="col-12 col-md-8" {{ sylius_test_html_attribute('feed-type') }}>{{ feed.feedType }}</div>
+            </div>
+
+            <div class="row">
+                <div class="col-12 col-md-4 fw-bold">{{ 'setono_sylius_feed.ui.state'|trans }}</div>
+                <div class="col-12 col-md-8" {{ sylius_test_html_attribute('feed-state') }}>{{ ('setono_sylius_feed.ui.' ~ feed.state)|trans }}</div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Resources/views/Admin/Feed/Show/scripts.html.twig b/src/Resources/views/Admin/Feed/Show/scripts.html.twig
@@ -0,0 +1,25 @@
+<script>
+    const timers = {};
+
+    Array.from(document.querySelectorAll('i.copy')).map((element) => {
+        element.addEventListener('click', (e) => {
+            const linkId = element.dataset.linkId;
+            const linkCopiedId = element.dataset.linkCopiedId;
+
+            const link = element.parentElement.querySelector('input');
+            const linkCopied = element.parentElement.querySelector('div#' + linkCopiedId);
+
+            link.select();
+            link.setSelectionRange(0, 9999);
+
+            document.execCommand('copy');
+
+            linkCopied.style.display = 'block';
+
+            clearTimeout(timers[linkId]);
+            timers[linkId] = setTimeout(function () {
+                linkCopied.style.display = 'none';
+            }, 3000);
+        });
+    })
+</script>
diff --git a/src/Resources/views/Admin/Feed/Show/stylesheets.html.twig b/src/Resources/views/Admin/Feed/Show/stylesheets.html.twig
@@ -0,0 +1,38 @@
+<style>
+    .link-copied-label {
+        position:absolute;
+        right: 10px;
+        top: -100%;
+        display: none;
+        margin-top: -0.51em;
+        margin-bottom: 1em;
+        background-color: #00B5AD;
+        border-color: #00B5AD;
+        color: #FFFFFF;
+        line-height: 1;
+        vertical-align: baseline;
+        padding: 0.5833em 0.833em;
+        font-weight: bold;
+        border-radius: 0.28571429rem;
+        transition: background 0.1s ease;
+        font-size: 0.85714286rem;z-index: 1;
+    }
+
+    .input-feed-url {
+        width: 100%;
+        font-size: 16px;
+        vertical-align: super;
+    }
+
+    .copy-feed-link {
+        position: absolute;
+        top: 3px;
+        right: 4px;
+        background: white;
+        height: 100%;
+        border-radius: 0em 0.28571429rem 0.28571429rem 0em;
+        width: 1.671429em;
+        text-align: center;
+        cursor: pointer;
+    }
+</style>
diff --git a/src/Resources/views/Admin/Feed/show.html.twig b/src/Resources/views/Admin/Feed/show.html.twig