From d055d109a46a2be6303288d065a030a8a5f78ee2 Mon Sep 17 00:00:00 2001
From: Jacob Tobiasz <jakub.tobiasz@icloud.com>
Date: Thu, 31 Oct 2024 10:40:27 +0100
Subject: [PATCH] Prevent providing BLIK code longer than 6 characters and with
 non-digits

---
 assets/shop/checkout_complete_entrypoint.js |  1 +
 assets/shop/js/blik_code.js                 | 19 +++++++++++++++++++
 assets/shop/order_show_entrypoint.js        |  1 +
 templates/shop/payment/_blik.html.twig      |  2 +-
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 assets/shop/js/blik_code.js

diff --git a/assets/shop/checkout_complete_entrypoint.js b/assets/shop/checkout_complete_entrypoint.js
index 3426a66c..eb4e31b3 100644
--- a/assets/shop/checkout_complete_entrypoint.js
+++ b/assets/shop/checkout_complete_entrypoint.js
@@ -3,6 +3,7 @@ import './scss/style.scss';
 import './js/_pay_by_link';
 import './js/_visa_mobile';
 import './js/apple_pay';
+import './js/blik_code';
 import {CardForm} from "./js/card_form";
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/assets/shop/js/blik_code.js b/assets/shop/js/blik_code.js
new file mode 100644
index 00000000..dc05f500
--- /dev/null
+++ b/assets/shop/js/blik_code.js
@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const BLIK_CODE_LENGTH = 6;
+
+  let blikCode = document.querySelector('[data-blik-code-input]');
+
+  if (null === blikCode) {
+    return;
+  }
+
+  blikCode.addEventListener('keypress', function(e) {
+    if (!/[0-9]/.test(e.key)) {
+      e.preventDefault();
+    }
+
+    if (blikCode.value.length + 1 > BLIK_CODE_LENGTH) {
+      e.preventDefault();
+    }
+  });
+});
diff --git a/assets/shop/order_show_entrypoint.js b/assets/shop/order_show_entrypoint.js
index edf46f62..fe0daf0a 100644
--- a/assets/shop/order_show_entrypoint.js
+++ b/assets/shop/order_show_entrypoint.js
@@ -1,6 +1,7 @@
 import './js/retry_payment';
 import './scss/style.scss';
 import './js/_pay_by_link';
+import './js/blik_code';
 import {CardForm} from "./js/card_form";
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/templates/shop/payment/_blik.html.twig b/templates/shop/payment/_blik.html.twig
index 03cdcc43..3ac480fe 100644
--- a/templates/shop/payment/_blik.html.twig
+++ b/templates/shop/payment/_blik.html.twig
@@ -2,7 +2,7 @@
     <div class="ui small icon message">
         <i class="payment icon"></i>
         <div class="content">
-            {{ form_row(form.tpay.blik_token) }}
+            {{ form_row(form.tpay.blik_token, { 'attr': { 'data-blik-code-input': '' } }) }}
             {% include '@CommerceWeaversSyliusTpayPlugin/shop/partial/_policies.html.twig' %}
         </div>
     </div>