From 80f381d46d649ef345e996734121e7308d896888 Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Thu, 21 Nov 2024 11:26:40 +0100
Subject: [PATCH 1/4] fix style for hosted fields

---
 .../buckaroo_magento2_creditcards.html        | 111 +++++++++---------
 1 file changed, 57 insertions(+), 54 deletions(-)

diff --git a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
index babcc987c..7bc7be80f 100644
--- a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
+++ b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
@@ -8,13 +8,13 @@
                        data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
                 <label class="label" data-bind="attr: {'for': getCode()}">
                     <!-- ko text: getTitle() --><!-- /ko -->
-                    <!-- ko if: subtext !== null && subtext.length > 0 -->
+                    <!-- ko if: subtext && subtext.length -->
                     <p class="bk-description" data-bind="text: subtext, style: subTextStyle"></p>
                     <!-- /ko -->
                 </label>
             </div>
             <div class="bk-img-wrap">
-                <img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }" />
+                <img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }"/>
             </div>
         </div>
     </div>
@@ -23,79 +23,82 @@
         <div class="payment-method-billing-address">
             <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
             <!-- ko template: getTemplate() --><!-- /ko -->
-            <!--/ko-->
+            <!-- /ko -->
         </div>
 
-
         <div class="payment-method-second-col billing-address-form">
             <form class="bg-white px-8 pt-6 pb-8">
-                    <div class="mb-4">
-                        <label id="cc-name-label" class="text-gray-700 text-sm font-bold">
-                            Cardholder Name
-                        </label>
-                        <div id="cc-name-wrapper"
-                             class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                        </div>
-                        <p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-4">
+                    <label id="cc-name-label" class="label">
+                        <span data-bind="i18n: 'Cardholder Name:'"> </span>
+                    </label>
+                    <div id="cc-name-wrapper"
+                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
+                    <p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
+                </div>
 
-                    <div class="mb-4">
-                        <label id="cc-number-label" class="text-gray-700 text-sm font-bold">
-                            Card Number
-                        </label>
-                        <div id="cc-number-wrapper"
-                             class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                        </div>
-                        <p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-4">
+                    <label id="cc-number-label" class="label">
+                        <span data-bind="i18n: 'Card Number:'"> </span>
+                    </label>
+                    <div id="cc-number-wrapper"
+                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
+                    <p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
+                </div>
 
-                    <div class="mb-6">
-                        <div class="grid grid-cols-2 gap-4">
-                            <div class="col-span-1">
-                                <label id="cc-expiry-label" class="text-gray-700 text-sm font-bold">
-                                    Expiry Date
-                                </label>
-                                <div id="cc-expiry-wrapper"
-                                     class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                                </div>
-                                <p id="cc-expiry-error"  class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-6">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="col-span-1">
+                            <label id="cc-expiry-label" class="label">
+                                <span data-bind="i18n: 'Expiry Date:'"> </span>
+                            </label>
+                            <div id="cc-expiry-wrapper"
+                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                             </div>
-                            <div class="col-span-1">
-                                <label id="cc-cvc-label" class="text-gray-700 text-sm font-bold">
-                                    CVC
-                                </label>
-                                <div id="cc-cvc-wrapper"
-                                     class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                                </div>
-                                <p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
+                            <p id="cc-expiry-error" class="text-red-500 text-xs italic mt-1"></p>
+                        </div>
+                        <div class="col-span-1">
+                            <label id="cc-cvc-label" class="label">
+                                <span data-bind="i18n: 'CVC:'"> </span>
+                            </label>
+                            <div id="cc-cvc-wrapper"
+                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                             </div>
+                            <p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
                         </div>
                     </div>
+                </div>
 
-                    <div class="field">
-                        <span data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
-                    </div>
+                <div class="field">
+                    <span
+                        data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
+                </div>
 
-                    <div class="field oauth-token-error text-red-500" data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
-                    <div class="field payment-error text-red-500" data-bind="text: paymentError, visible: paymentError"></div>
+                <div class="field oauth-token-error text-red-500"
+                     data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
+                <div class="field payment-error text-red-500"
+                     data-bind="text: paymentError, visible: paymentError"></div>
 
-                    <div class="flex items-center justify-between">
-                        <button id="pay"
-                                class="bg-[#ff5555] hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-                                type="button">
-                            Submit
-                        </button>
-                        <a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#" data-bind="click: resetForm">
-                            Cancel
-                        </a>
-                    </div>
+                <div class="flex items-center justify-between">
+                    <button id="pay"
+                            class="action primary checkout"
+                            type="submit">
+                        <span data-bind="i18n: 'Place Order'"></span>
+                    </button>
+                    <a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#"
+                       data-bind="click: resetForm">
+                        Cancel
+                    </a>
+                </div>
             </form>
         </div>
 
         <div class="checkout-agreements-block">
             <!-- ko foreach: $parent.getRegion('before-place-order') -->
             <!-- ko template: getTemplate() --><!-- /ko -->
-            <!--/ko-->
+            <!-- /ko -->
         </div>
     </div>
 </div>

From f83f7b8d7c21f99ec876003085f7df3d52f2f0d8 Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Thu, 21 Nov 2024 11:29:24 +0100
Subject: [PATCH 2/4] fix style for hosted fields

---
 .../frontend/web/js/view/payment/method-renderer/creditcards.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
index 81f24cb73..741c3c612 100644
--- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js
+++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
@@ -132,7 +132,7 @@ define(
                             let disabled = !sdkClient.formIsValid();
                             payButton.disabled = disabled;
                             if (disabled) {
-                                payButton.style.backgroundColor = "#ff5555";
+                                payButton.style.backgroundColor = "";
                                 payButton.style.cursor = "not-allowed";
                                 payButton.style.opacity = "0.5";
                             } else {

From 06dca42aaa6cb33303a40a9f030d9a375ea51dac Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Thu, 21 Nov 2024 16:14:05 +0100
Subject: [PATCH 3/4] fix style for hosted fields

---
 .../payment/method-renderer/creditcards.js    | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
index 741c3c612..bf3318b9c 100644
--- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js
+++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
@@ -148,8 +148,8 @@ define(
                     let cardLogoStyling = {
                         height:"80%",
                         position: 'absolute',
-                        border: '1px soli gray',
-                        radius: '5px',
+                        border: '1px solid #d6d6d6',
+                        borderRadius: "4px",
                         opacity:'1',
                         transition:'all 0.3s ease',
                         right:'5px',
@@ -159,11 +159,18 @@ define(
                     // Define styling and mount hosted fields as needed...
                     let styling = {
                         fontSize: "14px",
-                        fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
+                        fontStyle: "normal",
+                        fontWeight: 400,
+                        fontFamily: 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif',
                         textAlign: 'left',
-                        background: 'inherit',
-                        color: 'black',
-                        placeholderColor: 'grey',
+                        background: '#fefefe',
+                        color: '#333333',
+                        placeholderColor: '#888888',
+                        borderRadius: '5px',
+                        padding: '8px 10px',
+                        boxShadow: 'none',
+                        transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                        border: '1px solid #d6d6d6',
                         cardLogoStyling: cardLogoStyling
                     };
 

From dad8c7c5065f162bee071e590929c19d3d6cb3a4 Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Mon, 25 Nov 2024 16:14:49 +0100
Subject: [PATCH 4/4] fix error message

---
 .../web/js/view/payment/method-renderer/creditcards.js        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
index bf3318b9c..df39bc0fe 100644
--- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js
+++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
@@ -77,7 +77,7 @@ define(
                     // Check for error field in response
                     if (response.error) {
                         // Display the error message in the observable
-                        this.oauthTokenError("Error getting OAuth token.");
+                        this.oauthTokenError("An error occurred, please try another payment method or try again later.");
                     } else {
                         const accessToken = response.data.access_token;
                         const issuers = response.data.issuers;
@@ -86,7 +86,7 @@ define(
                     }
                 } catch (error) {
                     // Catch any other errors (e.g., network issues)
-                    this.oauthTokenError("Error getting OAuth token.");
+                    this.oauthTokenError("An error occurred, please try another payment method or try again later.");
                 }
             },