From 8fc4833503912b889d9833b1ddf0ecabf5536fad Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <ecastells@MacBook-Air-de-Emili.local>
Date: Wed, 15 Nov 2023 15:43:15 +0100
Subject: [PATCH] Add styles to fields

---
 .../js/modules/Renderer/CreditCardRenderer.js | 92 +++++++++++++++----
 .../ppcp-card-fields/src/CardFieldsModule.php |  5 +-
 2 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
index 326f9d806..0346cdd63 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
@@ -184,27 +184,33 @@ class CreditCardRenderer {
             });
 
             if (cardField.isEligible()) {
-                const nameFieldContainer = document.getElementById('ppcp-credit-card-gateway-card-name')?.parentNode;
-                if(nameFieldContainer) {
-                    const nameField = cardField.NameField();
-                    nameField.render(nameFieldContainer);
-                    document.getElementById("ppcp-credit-card-gateway-card-name").remove();
+                const nameField = document.getElementById('ppcp-credit-card-gateway-card-name');
+                if(nameField) {
+                    let styles = this.cardFieldStyles(nameField);
+                    cardField.NameField({style: {'input': styles}}).render(nameField.parentNode);
+                    nameField.remove();
                 }
 
-                const numberFieldContainer = document.getElementById('ppcp-credit-card-gateway-card-number').parentNode;
-                const numberField = cardField.NumberField();
-                numberField.render(numberFieldContainer);
-                document.getElementById("ppcp-credit-card-gateway-card-number").remove();
+                const numberField = document.getElementById('ppcp-credit-card-gateway-card-number');
+                if(numberField) {
+                    let styles = this.cardFieldStyles(numberField);
+                    cardField.NumberField({style: {'input': styles}}).render(numberField.parentNode);
+                    numberField.remove();
+                }
 
-                const expiryFieldContainer = document.getElementById('ppcp-credit-card-gateway-card-expiry').parentNode;
-                const expiryField = cardField.ExpiryField();
-                expiryField.render(expiryFieldContainer);
-                document.getElementById("ppcp-credit-card-gateway-card-expiry").remove();
+                const expiryField = document.getElementById('ppcp-credit-card-gateway-card-expiry');
+                if(expiryField) {
+                    let styles = this.cardFieldStyles(expiryField);
+                    cardField.ExpiryField({style: {'input': styles}}).render(expiryField.parentNode);
+                    expiryField.remove();
+                }
 
-                const cvvFieldContainer = document.getElementById('ppcp-credit-card-gateway-card-cvc').parentNode;
-                const cvvField = cardField.CVVField();
-                cvvField.render(cvvFieldContainer);
-                document.getElementById("ppcp-credit-card-gateway-card-cvc").remove();
+                const cvvField = document.getElementById('ppcp-credit-card-gateway-card-cvc');
+                if(cvvField) {
+                    let styles = this.cardFieldStyles(cvvField);
+                    cardField.CVVField({style: {'input': styles}}).render(cvvField.parentNode);
+                    cvvField.remove();
+                }
 
                 document.dispatchEvent(new CustomEvent("hosted_fields_loaded"));
             }
@@ -233,6 +239,58 @@ class CreditCardRenderer {
         wrapperElement.parentNode.removeChild(wrapperElement);
     }
 
+    cardFieldStyles(field) {
+        const allowedProperties = [
+            'appearance',
+            'color',
+            'direction',
+            'font',
+            'font-family',
+            'font-size',
+            'font-size-adjust',
+            'font-stretch',
+            'font-style',
+            'font-variant',
+            'font-variant-alternates',
+            'font-variant-caps',
+            'font-variant-east-asian',
+            'font-variant-ligatures',
+            'font-variant-numeric',
+            'font-weight',
+            'letter-spacing',
+            'line-height',
+            'opacity',
+            'outline',
+            'padding',
+            'padding-bottom',
+            'padding-left',
+            'padding-right',
+            'padding-top',
+            'text-shadow',
+            'transition',
+            '-moz-appearance',
+            '-moz-osx-font-smoothing',
+            '-moz-tap-highlight-color',
+            '-moz-transition',
+            '-webkit-appearance',
+            '-webkit-osx-font-smoothing',
+            '-webkit-tap-highlight-color',
+            '-webkit-transition',
+        ];
+
+        const stylesRaw = window.getComputedStyle(field);
+        const styles = {};
+        Object.values(stylesRaw).forEach((prop) => {
+            console.log(prop)
+            if (!stylesRaw[prop] || !allowedProperties.includes(prop)) {
+                return;
+            }
+            styles[prop] = '' + stylesRaw[prop];
+        });
+
+        return styles;
+    }
+
     disableFields() {
         if (this.currentHostedFieldsInstance) {
             this.currentHostedFieldsInstance.setAttribute({
diff --git a/modules/ppcp-card-fields/src/CardFieldsModule.php b/modules/ppcp-card-fields/src/CardFieldsModule.php
index fa047f5bc..8c89a12fd 100644
--- a/modules/ppcp-card-fields/src/CardFieldsModule.php
+++ b/modules/ppcp-card-fields/src/CardFieldsModule.php
@@ -63,7 +63,10 @@ class CardFieldsModule implements ModuleInterface {
 			'woocommerce_credit_card_form_fields',
 			function( $default_fields, $id ) {
 				if ( CreditCardGateway::ID === $id && apply_filters( 'woocommerce_paypal_payments_enable_cardholder_name_field', false ) ) {
-					$default_fields['card-name-field'] = '<p class="form-row form-row-wide"><label for="ppcp-credit-card-gateway-card-name"><input class="ppcp-credit-card-gateway-card-name" type="text" id="ppcp-credit-card-gateway-card-name" name="ppcp-credit-card-gateway-card-name"/></p>';
+					$default_fields['card-name-field'] = '<p class="form-row form-row-wide">
+						<label for="ppcp-credit-card-gateway-card-name">Card Name</label>
+						<input id="ppcp-credit-card-gateway-card-name" class="input-text wc-credit-card-form-card-expiry" type="text" placeholder="' . esc_attr__( 'Cardholder Name (optional)', 'woocommerce-paypal-payments' ) . '" name="ppcp-credit-card-gateway-card-name">
+					</p>';
 
 					// Moves new item to first position.
 					$new_field = $default_fields['card-name-field'];