[Shop][Checkout] Upgrade select shipping form to a component (#16818)

| Q               | A
|-----------------|-----
| Branch?         | bootstrap-shop
| Bug fix?        | no
| New feature?    | no
| BC breaks?      | no
| Deprecations?   | no
| Related tickets | -
| License         | MIT

.gitignore

@@ -59,6 +59,7 @@ docker-compose.override.yml
 /node_modules/
 /public/build/
 npm-debug.log
+pnpm-lock.yaml
 yarn-error.log
 yarn.lock
 package-lock.json

src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/checkout/select_shipping.yaml

@@ -4,24 +4,26 @@ twig_hooks:
             steps:
                 template: '@SyliusShop/checkout/shared/steps.html.twig'
             form:
-                template: '@SyliusShop/checkout/select_shipping/form.html.twig'
-                
+                component: 'sylius_shop:checkout:shipping:form'
+                props:
+                    order: '@=_context.order'
+
         'sylius_shop.checkout.select_shipping.form':
             shipments:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments.html.twig'
             navigation:
                 template: '@SyliusShop/checkout/select_shipping/form/navigation.html.twig'
-                
+
         'sylius_shop.checkout.select_shipping.form.shipments':
             shipment:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments/shipment.html.twig'
-#                
+
         'sylius_shop.checkout.select_shipping.form.shipments.shipment':
             header:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments/shipment/header.html.twig'
             choice:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments/shipment/choice.html.twig'
-                
+
         'sylius_shop.checkout.select_shipping.form.shipments.shipment#unavailable':
             unavailable:
                 template: '@SyliusShop/checkout/select_shipping/unavailable.html.twig'
@@ -31,7 +33,7 @@ twig_hooks:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments/shipment/choice/details.html.twig'
             fee:
                 template: '@SyliusShop/checkout/select_shipping/form/shipments/shipment/choice/fee.html.twig'
-                
+
         'sylius_shop.checkout.select_shipping.form.shipments.shipment.choice#unavailable':
             unavailable:
                 template: '@SyliusShop/checkout/select_shipping/unavailable.html.twig'

src/Sylius/Bundle/ShopBundle/Resources/config/services/twig/component/checkout.xml

@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <!--
-  ~ This file is part of the Sylius package.
-  ~
-  ~ (c) Sylius Sp. z o.o.
-  ~
-  ~ For the full copyright and license information, please view the LICENSE
-  ~ file that was distributed with this source code.
-  -->
+
+ This file is part of the Sylius package.
+
+ (c) Sylius Sp. z o.o.
+
+ For the full copyright and license information, please view the LICENSE
+ file that was distributed with this source code.
+
+-->
 
 <container xmlns="http://symfony.com/schema/dic/services" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
     <services>
@@ -44,5 +46,19 @@
                 template="@SyliusShop/checkout/address/form/addresses/address/address_book.html.twig"
             />
         </service>
+
+        <service
+            id="sylius_shop.twig.component.checkout.shipping.form"
+            class="Sylius\Bundle\ShopBundle\Twig\Component\Checkout\Shipping\FormComponent"
+        >
+            <argument type="service" id="form.factory" />
+            <argument>Sylius\Bundle\CoreBundle\Form\Type\Checkout\SelectShippingType</argument>
+
+            <tag
+                name="sylius.live_component"
+                key="sylius_shop:checkout:shipping:form"
+                template="@SyliusShop/checkout/select_shipping/form.html.twig"
+            />
+        </service>
     </services>
 </container>

src/Sylius/Bundle/ShopBundle/Twig/Component/Checkout/Shipping/FormComponent.php

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\ShopBundle\Twig\Component\Checkout\Shipping;
+
+use Sylius\Component\Core\Model\Order;
+use Sylius\TwigHooks\LiveComponent\HookableLiveComponentTrait;
+use Symfony\Component\Form\FormFactoryInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+class FormComponent
+{
+    use ComponentWithFormTrait;
+    use DefaultActionTrait;
+    use HookableLiveComponentTrait;
+
+    #[LiveProp(fieldName: 'order')]
+    public ?Order $order = null;
+
+    /** @param class-string $formClass */
+    public function __construct(
+        private readonly FormFactoryInterface $formFactory,
+        private readonly string $formClass,
+    ) {
+    }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->formFactory->create($this->formClass, $this->order);
+    }
+}

src/Sylius/Bundle/ShopBundle/templates/checkout/select_shipping/form.html.twig

@@ -1,12 +1,15 @@
-{% set form = hookable_metadata.context.form %}
+{# Rendered with \Sylius\Bundle\ShopBundle\Twig\Component\Checkout\ShippingStepFormComponent #}
 
 {% form_theme form '@SyliusShop/Form/theme.html.twig' %}
 
 <div>
     {{ form_start(form, {'action': path('sylius_shop_checkout_select_shipping'), 'attr': {'novalidate': 'novalidate'}}) }}
     {{ form_errors(form) }}
+
     <input type="hidden" name="_method" value="PUT" />
+
     {% hook 'form' %}
+
     {{ form_row(form._token) }}
     {{ form_end(form, {'render_rest': false}) }}
 </div>