Handle visa mobile retry payment

assets/shop/js/_visa_mobile.js

@@ -3,7 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const MOBILE_PHONE_MAX_LENGTH = 15;
 
   let form = document.querySelector('[name="sylius_checkout_complete"]');
-  let phoneNumber = form.querySelector('#sylius_checkout_complete_tpay_visa_mobile_phone_number');
+  let phoneNumber = form.querySelector('#sylius_checkout_complete_tpay_visa_mobile_phone_number') ??
+    document.querySelector("[id^='sylius_checkout_select_payment_payments_'][id$='_tpay_visa_mobile_phone_number']");
 
   if (null === phoneNumber) {
     return;

config/config/sylius_template_events.php

@@ -41,6 +41,10 @@
                         'template' => '@CommerceWeaversSyliusTpayPlugin/shop/order/pay/_apple_pay_regulations.html.twig',
                         'priority' => 5,
                     ],
+                    'visa_mobile' => [
+                        'template' => '@CommerceWeaversSyliusTpayPlugin/shop/order/pay/_visaMobile.html.twig',
+                        'priority' => 10,
+                    ]
                 ],
             ],
             'sylius.shop.checkout.complete.summary' => [

templates/shop/cart/complete/_visaMobile.html.twig

@@ -1,6 +1,6 @@
 {% set payment = order.lastCartPayment() %}
 
-{% if cw_tpay_get_gateway_config_value(payment.method.gatewayConfig, 'type') == 'visa_mobile' %}
+{% if cw_tpay_get_gateway_config_value(payment.method.gatewayConfig, 'type') == constant('CommerceWeavers\\SyliusTpayPlugin\\Tpay\\PaymentType::VISA_MOBILE') %}
     <div class="ui stackable grid">
         <div class="ui column eight wide">
             <div class="ui small icon message">
@@ -12,7 +12,6 @@
                             <div class="ui label">+</div>
                             {{ form_widget(form.tpay.visa_mobile_phone_number, {
                                 attr: {
-                                    'data-locale': app.request.locale|slice(3, 2),
                                     'data-validation-error-min-length': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.min_length'|trans({}, 'validators'),
                                     'data-validation-error-max-length': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.max_length'|trans({}, 'validators'),
                                     'data-validation-error-required': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.required'|trans({}, 'validators'),

templates/shop/order/pay/_visaMobile.html.twig

@@ -0,0 +1,7 @@
+{% if cw_tpay_get_gateway_config_value(method.gatewayConfig, 'type') == constant('CommerceWeavers\\SyliusTpayPlugin\\Tpay\\PaymentType::VISA_MOBILE')
+    and form.vars.value.state != 'cart'
+%}
+    <div class="ui stackable grid" style="display: none;" data-payment-details="visa_mobile">
+        {% include '@CommerceWeaversSyliusTpayPlugin/shop/payment/_visaMobile.html.twig' %}
+    </div>
+{% endif %}

templates/shop/payment/_visaMobile.html.twig

@@ -0,0 +1,31 @@
+<div class="ui column eight wide">
+    <div class="ui small icon message">
+        <i class="payment icon"></i>
+        <div class="content">
+            <div class="field required" data-tpay-field>
+                {{ form_label(form.tpay.visa_mobile_phone_number) }}
+                <div class="ui left labeled input">
+                    <div class="ui label">+</div>
+                    {{ form_widget(form.tpay.visa_mobile_phone_number, {
+                        attr: {
+                            'data-validation-error-min-length': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.min_length'|trans({}, 'validators'),
+                            'data-validation-error-max-length': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.max_length'|trans({}, 'validators'),
+                            'data-validation-error-required': 'commerce_weavers_sylius_tpay.shop.pay.visa_mobile.required'|trans({}, 'validators'),
+                        }
+                    }) }}
+                </div>
+                <div data-tpay-error-container>{{ form_errors(form.tpay.visa_mobile_phone_number) }}</div>
+            </div>
+            <div class="field">
+                {{ 'commerce_weavers_sylius_tpay.shop.pay.policy'|trans({
+                    '%url%': tpayPolicyUrl
+                })|raw }}
+            </div>
+            <div class="field">
+                {{ 'commerce_weavers_sylius_tpay.shop.pay.regulations'|trans({
+                    '%url%': tpayRegulationsUrl
+                })|raw }}
+            </div>
+        </div>
+    </div>
+</div>

tests/E2E/Order/TpayRetryOrChangePaymentOrderTest.php

@@ -99,4 +99,19 @@ public function test_it_changes_payment_to_pay_by_link(): void
 
         self::assertPageTitleContains('Thank you');
     }
+
+    public function test_it_changes_payment_to_visa_mobile(): void
+    {
+        $this->loadFixtures(['visa_mobile_unpaid_order.yaml']);
+
+        $this->loginShopUser('[email protected]', 'sylius');
+
+        $this->client->get('/en_US/order/tokenValue1');
+        $form = $this->client->getCrawler()->selectButton('Pay')->form();
+        $form->getElement()->findElement(WebDriverBy::xpath("//label[contains(text(),'Visa mobile (Tpay)')]"))->click();
+        $this->fillVisaMobile(self::SELECT_FIRST_PAYMENT_FORM_ID, '123123123');
+        $this->client->submitForm('Pay');
+
+        self::assertPageTitleContains('Waiting for payment');
+    }
 }

tests/E2E/Resources/fixtures/visa_mobile_unpaid_order.yaml

@@ -0,0 +1,151 @@
+include:
+    - common/channel.yaml
+    - common/country.yaml
+    - common/customer.yaml
+    - common/payment_method.yaml
+    - common/shipping_category.yaml
+    - common/shipping_method.yaml
+    - common/tax_category.yaml
+
+Sylius\Component\Core\Model\Product:
+    product:
+        fallbackLocale: en_US
+        currentLocale: en
+        code: 'MUG_SW'
+        translations:
+            - '@product_translation'
+
+Sylius\Component\Core\Model\ProductTranslation:
+    product_translation:
+        name: 'Mug'
+        slug: 'mug'
+        locale: 'en_US'
+        translatable: '@product'
+
+Sylius\Component\Product\Model\ProductVariantTranslation:
+    product_variant_translation:
+        name: 'Mug'
+        locale: en_US
+        translatable: '@product_variant'
+    product_variant_2_translation:
+        name: 'Mug 2'
+        locale: en_US
+        translatable: '@product_variant_2'
+
+Sylius\Component\Core\Model\ProductVariant:
+    product_variant:
+        code: 'MUG'
+        version: 1
+        product: '@product'
+        fallbackLocale: en_US
+        currentLocale: en
+        position: 1
+        optionValues: ['@product_option_value_color_blue']
+        channelPricings:
+            channel_web: '@product_variant_channel_web_pricing'
+        translations:
+            - '@product_variant_translation'
+        enabled: true
+        tracked: true
+        onHold: 0
+        onHand: 10
+        weight: 100.50
+        width: 100.50
+        height: 100.50
+        depth: 100.50
+        taxCategory: '@tax_category_default'
+        shippingCategory: '@shipping_category_default'
+        shippingRequired: true
+    product_variant_2:
+        code: 'MUG_2'
+        product: '@product'
+        fallbackLocale: en_US
+        currentLocale: en
+        position: 2
+        channelPricings:
+            channel_web: '@product_variant_2_channel_web_pricing'
+        translations:
+            - '@product_variant_2_translation'
+
+Sylius\Component\Core\Model\ChannelPricing:
+    product_variant_channel_web_pricing:
+        channelCode: 'WEB'
+        price: 2000
+    product_variant_2_channel_web_pricing:
+        channelCode: 'WEB'
+        price: 3000
+
+Sylius\Component\Product\Model\ProductOption:
+    product_option_color:
+        code: 'COLOR'
+        currentLocale: 'en_US'
+        translations:
+            - '@product_option_translation_en_EN'
+
+Sylius\Component\Product\Model\ProductOptionTranslation:
+    product_option_translation_en_EN:
+        locale: 'en_US'
+        name: 'Color'
+        translatable: '@product_option_color'
+
+Sylius\Component\Product\Model\ProductOptionValue:
+    product_option_value_color_blue:
+        code: 'COLOR_BLUE'
+        currentLocale: 'en_US'
+        fallbackLocale: 'en_US'
+        option: '@product_option_color'
+        translations:
+            - '@product_option_value_translation_blue'
+    product_option_value_color_red:
+        code: 'COLOR_RED'
+        currentLocale: 'en_US'
+        fallbackLocale: 'en_US'
+        option: '@product_option_color'
+        translations:
+            - '@product_option_value_translation_red'
+
+Sylius\Component\Product\Model\ProductOptionValueTranslation:
+    product_option_value_translation_blue:
+        locale: 'en_US'
+        value: 'Blue'
+        translatable: '@product_option_value_color_blue'
+    product_option_value_translation_red:
+        locale: 'en_US'
+        value: 'Red'
+        translatable: '@product_option_value_color_red'
+
+App\Entity\Order:
+    unpaid_order:
+        number: '000000001'
+        tokenValue: 'tokenValue1'
+        channel: '@channel_web'
+        currencyCode: 'USD'
+        localeCode: 'en_US'
+        customer: '@customer_tony'
+        state: 'new'
+        checkoutState: 'completed'
+        paymentState: 'awaiting_payment'
+        shippingState: 'ready'
+        createdByGuest: false
+        shippingAddress: '@address_tony'
+        billingAddress: '@address_tony'
+        __calls:
+            - addItem: ["@order_item"]
+
+Sylius\Component\Core\Model\OrderItem:
+    order_item:
+        variant: '@product_variant'
+
+Sylius\Component\Core\Model\OrderItemUnit:
+    order_item_unit:
+        __construct: ['@order_item']
+
+Sylius\Component\Core\Model\Payment:
+    unpaid_order_payment_tpay_visa_mobile:
+        method: '@tpay_visa_mobile'
+        order: '@unpaid_order'
+        currency_code: 'USD'
+        amount: 100
+        state: new
+        details: '[]'
+