From 6191541674d8ef8ee1f507f3b7d1f2144d95677b Mon Sep 17 00:00:00 2001
From: dinamiko <e.castells@inpsyde.com>
Date: Thu, 16 Sep 2021 12:29:30 +0200
Subject: [PATCH] Disable hosted fields when selecting saved credit card

---
 .../ContextBootstrap/CheckoutBootstap.js      |  8 ++---
 .../js/modules/Renderer/CreditCardRenderer.js | 30 +++++++++++++++++++
 .../resources/js/modules/Renderer/Renderer.js | 10 ++++++-
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
index ccbedc849..b027f2f7e 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
@@ -115,31 +115,27 @@ class CheckoutBootstap {
     disableCreditCardFields() {
         jQuery('label[for="ppcp-credit-card-gateway-card-number"]').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-number').addClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-number').attr("disabled", true)
         jQuery('label[for="ppcp-credit-card-gateway-card-expiry"]').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-expiry').addClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-expiry').attr("disabled", true)
         jQuery('label[for="ppcp-credit-card-gateway-card-cvc"]').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-cvc').addClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-cvc').attr("disabled", true)
         jQuery('label[for="vault"]').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-vault').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-vault').attr("disabled", true)
+        this.renderer.disableCreditCardFields()
     }
 
     enableCreditCardFields() {
         jQuery('label[for="ppcp-credit-card-gateway-card-number"]').removeClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-number').removeClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-number').attr("disabled", false)
         jQuery('label[for="ppcp-credit-card-gateway-card-expiry"]').removeClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-expiry').removeClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-expiry').attr("disabled", false)
         jQuery('label[for="ppcp-credit-card-gateway-card-cvc"]').removeClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-cvc').removeClass('ppcp-credit-card-gateway-form-field-disabled')
-        jQuery('#ppcp-credit-card-gateway-card-cvc').attr("disabled", false)
         jQuery('label[for="vault"]').removeClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-vault').removeClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-vault').attr("disabled", false)
+        this.renderer.enableCreditCardFields()
     }
 }
 
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
index 7005afa6a..6b8b79142 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
@@ -142,6 +142,36 @@ class CreditCardRenderer {
         )
     }
 
+    disableFields() {
+        this.currentHostedFieldsInstance.setAttribute({
+            field: 'number',
+            attribute: 'disabled'
+        })
+        this.currentHostedFieldsInstance.setAttribute({
+            field: 'cvv',
+            attribute: 'disabled'
+        })
+        this.currentHostedFieldsInstance.setAttribute({
+            field: 'expirationDate',
+            attribute: 'disabled'
+        })
+    }
+
+    enableFields() {
+        this.currentHostedFieldsInstance.removeAttribute({
+            field: 'number',
+            attribute: 'disabled'
+        })
+        this.currentHostedFieldsInstance.removeAttribute({
+            field: 'cvv',
+            attribute: 'disabled'
+        })
+        this.currentHostedFieldsInstance.removeAttribute({
+            field: 'expirationDate',
+            attribute: 'disabled'
+        })
+    }
+
     _submit(contextConfig) {
         this.spinner.block();
         this.errorHandler.clear();
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
index 357225a6c..5b884cc9e 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
@@ -43,6 +43,14 @@ class Renderer {
         domElement.style.display = 'block';
         return true;
     }
+
+    disableCreditCardFields() {
+        this.creditCardRenderer.disableFields();
+    }
+
+    enableCreditCardFields() {
+        this.creditCardRenderer.enableFields();
+    }
 }
 
-export default Renderer;
\ No newline at end of file
+export default Renderer;