From 936451b73ed24d0b14b393111c28f6f64512ed69 Mon Sep 17 00:00:00 2001
From: Lars Kusch <lars@lars-kusch.de>
Date: Sat, 10 Dec 2022 06:47:48 +0100
Subject: [PATCH] Show name field, when payment could fail

---
 .../js/clients/payments/stripe-klarna.js      | 72 ++++++++++---------
 .../gateways/stripe/klarna/klarna.blade.php   |  8 +++
 .../gateways/stripe/klarna/pay.blade.php      |  2 +
 3 files changed, 50 insertions(+), 32 deletions(-)
 create mode 100644 resources/views/portal/ninja2020/gateways/stripe/klarna/klarna.blade.php

diff --git a/resources/js/clients/payments/stripe-klarna.js b/resources/js/clients/payments/stripe-klarna.js
index 851bab296e5d..f4a123b301aa 100644
--- a/resources/js/clients/payments/stripe-klarna.js
+++ b/resources/js/clients/payments/stripe-klarna.js
@@ -32,7 +32,7 @@ class ProcessKlarna {
 
         return this;
     };
-    
+
     handleError = (message) => {
         document.getElementById('pay-now').disabled = false;
         document.querySelector('#pay-now > svg').classList.add('hidden');
@@ -42,42 +42,50 @@ class ProcessKlarna {
         this.errors.textContent = message;
         this.errors.hidden = false;
     };
-    
+
     handle = () => {
         document.getElementById('pay-now').addEventListener('click', (e) => {
             let errors = document.getElementById('errors');
-
-            document.getElementById('pay-now').disabled = true;
-            document.querySelector('#pay-now > svg').classList.remove('hidden');
-            document.querySelector('#pay-now > span').classList.add('hidden');
-
-            this.stripe.confirmKlarnaPayment(
-                document.querySelector('meta[name=pi-client-secret').content,
-                {
-                    payment_method: {
-                        billing_details: {
-                            name: document.querySelector('meta[name=name]').content.replace(",", ""),
-                            email: document.querySelector('meta[name=email]').content,
-                            address: {
-                                line1: document.querySelector('meta[name=address-1]').content,
-                                line2: document.querySelector('meta[name=address-2]').content,
-                                city: document.querySelector('meta[name=city]').content,
-                                postal_code: document.querySelector('meta[name=plz]').content,
-                                state: document.querySelector('meta[name=state]').content,
-                                country: document.querySelector('meta[name=country]').content,
-                            }
+            let name = document.querySelector('meta[name=name]').content;
+            if (! "/^[A-Za-z\s]*$/".test(name)){
+                document.getElementById('klarna-name').textContent = name.replace("/^[A-Za-z\s]*$/", "")
+                document.getElementById('klarna-name').focus();
+                errors.textContent = document.querySelector(
+                    'meta[name=translation-email-required]'
+                ).content;
+                errors.hidden = false;
+            }
+            else {
+                document.getElementById('pay-now').disabled = true;
+                document.querySelector('#pay-now > svg').classList.remove('hidden');
+                document.querySelector('#pay-now > span').classList.add('hidden');
+                this.stripe.confirmKlarnaPayment(
+                    document.querySelector('meta[name=pi-client-secret').content,
+                    {
+                        payment_method: {
+                            billing_details: {
+                                name: name,
+                                email: document.querySelector('meta[name=email]').content,
+                                address: {
+                                    line1: document.querySelector('meta[name=address-1]').content,
+                                    line2: document.querySelector('meta[name=address-2]').content,
+                                    city: document.querySelector('meta[name=city]').content,
+                                    postal_code: document.querySelector('meta[name=plz]').content,
+                                    state: document.querySelector('meta[name=state]').content,
+                                    country: document.querySelector('meta[name=country]').content,
+                                }
+                            },
                         },
-                    },
-                    return_url: document.querySelector(
-                        'meta[name="return-url"]'
-                    ).content,
-                }
-                ).then((result) => {
-                if (result.hasOwnProperty('error')) {
-                    return this.handleError(result.error.message);
-                }
+                        return_url: document.querySelector(
+                            'meta[name="return-url"]'
+                        ).content,
+                    }
+                    ).then((result) => {
+                    if (result.hasOwnProperty('error')) {
+                        return this.handleError(result.error.message);
+                    }
 
-            });
+                });}
         });
     };
 }
diff --git a/resources/views/portal/ninja2020/gateways/stripe/klarna/klarna.blade.php b/resources/views/portal/ninja2020/gateways/stripe/klarna/klarna.blade.php
new file mode 100644
index 000000000000..4668535f81eb
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/klarna/klarna.blade.php
@@ -0,0 +1,8 @@
+<div id="stripe--payment-container">
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.name')])
+        <div class="form-group mb-[10px]">
+            <input class="input w-full" id="klarna-name" type="text" placeholder="{{ ctrans('texts.bank_account_holder') }}" value="{{ $gateway->client->present()->name()}}" hidden>
+        </div>
+
+    @endcomponent
+</div>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
index e42e078b2c2e..c582cce5da91 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/klarna/pay.blade.php
@@ -19,6 +19,7 @@
     <meta name="state" content="{{ $gateway->client->state }}">
     <meta name="plz" content="{{ $gateway->client->postal_code }}">
     <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
+    <meta name="translation-name-without-special-characters" content="{{ ctrans('texts.name_without_special_characters') }}">
 @endsection
 
 @section('gateway_content')
@@ -29,6 +30,7 @@
     @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
         {{ ctrans('texts.klarna') }} ({{ ctrans('texts.bank_transfer') }})
     @endcomponent
+    @include('portal.ninja2020.gateways.stripe.klarna.klarna')
     @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection