PPSYL-136 - sylius v2 - Adapt Account > Saved cards to upgrade

config/twig_hooks/shop.yaml

@@ -7,4 +7,15 @@ sylius_twig_hooks:
         'sylius_shop.cart.index.content.form.sections.general#right':
             pay_with_oney:
                 template: '@PayPlugSyliusPayPlugPlugin/oney/cart/pay_with_oney.html.twig'
-                priority: 1
+                priority: 1
+        'sylius_shop.account.saved_card#stylesheets':
+            payplug_styles:
+                template: '@PayPlugSyliusPayPlugPlugin/stylesheets/saved_cards.html.twig'
+                priority: 1
+        'sylius.shop.account.saved_cards.index.subcontent':
+            header:
+                template: '@PayPlugSyliusPayPlugPlugin/Account/SavedCards/Index/_header.html.twig'
+                priority: 20
+            subcontent:
+                template: "@PayPlugSyliusPayPlugPlugin/Account/SavedCards/Index/_subcontent.html.twig"
+                priority: 10

config/ui.yaml

@@ -21,34 +21,6 @@ sylius_ui:
             blocks:
                 oney_common:
                     template: '@PayPlugSyliusPayPlugPlugin/stylesheets/oney_common.html.twig'
-        sylius.shop.account.saved_cards.index.header.content:
-            blocks:
-                legacy:
-                    template: "@SyliusUi/Block/_legacySonataEvent.html.twig"
-                    context:
-                        event: sylius.shop.account.saved_cards.index.header
-        sylius.shop.account.saved_cards.layout.stylesheets:
-            blocks:
-                saved_cards:
-                    template: '@PayPlugSyliusPayPlugPlugin/stylesheets/saved_cards.html.twig'
-        sylius.shop.account.saved_cards.index.subcontent:
-            blocks:
-                header:
-                    template: '@SyliusShop/Account/SavedCards/Index/_header.html.twig'
-                    priority: 20
-                after_content_header_legacy:
-                    template: "@SyliusUi/Block/_legacySonataEvent.html.twig"
-                    priority: 15
-                    context:
-                        event: sylius.shop.account.order.index.after_content_header
-                subcontent:
-                    template: "@SyliusShop/Account/SavedCards/Index/_subcontent.html.twig"
-                    priority: 10
-                after_grid_legacy:
-                    template: "@SyliusUi/Block/_legacySonataEvent.html.twig"
-                    priority: 5
-                    context:
-                        event: sylius.shop.account.order.index.after_grid
         sylius.admin.payment_method.create.stylesheets: &cssEvt
             blocks:
                 payment_methods_css:
@@ -60,4 +32,4 @@ sylius_ui:
                     template: '@PayPlugSyliusPayPlugPlugin/stylesheets/select_payment_css.html.twig'
                 select_payment_js:
                     template: '@PayPlugSyliusPayPlugPlugin/javascripts/select_payment_js.html.twig'
-        sylius.shop.order.select_payment.before_form: *selectPayment
+        sylius.shop.order.select_payment.before_form: *selectPayment

src/EventListener/AccountMenuListener.php

@@ -19,7 +19,7 @@ public function addAccountMenuItems(MenuBuilderEvent $event): void
             ])
             ->setAttribute('type', 'link')
             ->setLabel('payplug_sylius_payplug_plugin.ui.account.saved_cards.title')
-            ->setLabelAttribute('icon', 'credit card')
+            ->setLabelAttribute('icon', 'tabler:credit-card')
         ;
     }
 }

templates/Account/SavedCards/Index/_header.html.twig

@@ -0,0 +1,4 @@
+<h1 class="ui header">
+    {{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.title'|trans }}
+</h1>
+<div class="sub header">{{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.sub_title'|trans }}</div>

templates/SyliusShopBundle/Account/SavedCards/Index/_subcontent.html.twig → templates/Account/SavedCards/Index/_subcontent.html.twig

@@ -1,5 +1,6 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-{% import '@SyliusUi/Macro/messages.html.twig' as messages %}
+{% import '@SyliusShop/shared/buttons.html.twig' as buttons %}
+{% import '@SyliusShop/shared/messages.html.twig' as messages %}
+{% set savedCards = get_hookable_context().savedCards %}
 
 <div class="ui hidden divider"></div>
 <div class="sylius-grid-wrapper">

templates/card/index.html.twig

@@ -1,10 +1,10 @@
 {% extends '@PayPlugSyliusPayPlugPlugin/card/layout.html.twig' %}
 
-{% import '@SyliusUi/Macro/messages.html.twig' as messages %}
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
+{% import '@SyliusShop/shared/messages.html.twig' as messages %}
+{% import '@SyliusShop/shared/buttons.html.twig' as buttons %}
 
 {% block title %}{{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.title'|trans }} | {{ parent() }}{% endblock %}
 
 {% block subcontent %}
-    {{ sylius_template_event('sylius.shop.account.saved_cards.index.subcontent', {'savedCards': savedCards}) }}
+    {% hook 'sylius.shop.account.saved_cards.index.subcontent' with { _prefixes: [], savedCards: savedCards } %}
 {% endblock %}

templates/card/layout.html.twig

@@ -1,32 +1,29 @@
-{% extends '@SyliusShop/Account/layout.html.twig' %}
+{% extends '@SyliusShop/account/common/index.html.twig' %}
 
-{% block stylesheets %}
-    {{ parent() }}
-    {{ sylius_template_event('sylius.shop.account.saved_cards.layout.stylesheets') }}
-{% endblock %}
+{% set prefixes = ['sylius_shop.account.saved_card'] %}
+{% from '@SyliusShop/shared/breadcrumbs.html.twig' import breadcrumbs as breadcrumbs %}
 
 {% block content %}
-    {% block breadcrumb %}
-        <div class="ui breadcrumb">
-            <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
-            <div class="divider"> / </div>
-            <a href="{{ path('sylius_shop_account_dashboard') }}" class="section">{{ 'sylius.ui.my_account'|trans }}</a>
-            <div class="divider"> / </div>
-            <div class="active section">{{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.title'|trans }}</div>
-        </div>
-    {% endblock %}
-
-    <div class="ui stackable grid">
-        <div class="four wide column">
-            {{ sylius_template_event('sylius.shop.account.layout.menu') }}
-        </div>
-        <div class="twelve wide column">
-            {{ sylius_template_event('sylius.shop.account.layout.before_subcontent') }}
-
-            {% block subcontent %}
+    <div class="container mb-auto">
+        <div class="row my-4">
+            {% block breadcrumb %}
+                <div class="col-12">
+                    {{ breadcrumbs([
+                        { label: 'sylius.ui.home'|trans, path: path('sylius_shop_homepage')},
+                        { label: 'sylius.ui.my_account'|trans, path: path('sylius_shop_account_dashboard')},
+                        { label: 'payplug_sylius_payplug_plugin.ui.account.saved_cards.title'|trans, active: true}
+                    ]) }}
+                </div>
             {% endblock %}
 
-            {{ sylius_template_event('sylius.shop.account.layout.after_subcontent') }}
+            <div class="col-12 col-md-3 mb-4 mb-md-0">
+                {% hook 'sylius_shop.account.common.index.content.menu' %}
+            </div>
+
+            <div class="col-12 col-md-9">
+                {% block subcontent %}
+                {% endblock %}
+            </div>
         </div>
     </div>
 {% endblock %}

templates/stylesheets/saved_cards.html.twig

@@ -1 +1 @@
-{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/payplugsyliuspayplugplugin/assets/shop/account/index.css'} %}
+<link rel="stylesheet" href="{{ asset('bundles/payplugsyliuspayplugplugin/assets/shop/account/index.css') }}">