From 9ad48d5f1300b150159f90590fe3d9ee97c2909f Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Thu, 11 Nov 2021 15:20:21 +0200
Subject: [PATCH] Optimize checkout elements hiding

Remove duplicated calls like hidden -> show() -> hide() during some updates
and make code more clear
---
 .../ContextBootstrap/CheckoutBootstap.js      | 71 ++++++-------------
 1 file changed, 23 insertions(+), 48 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
index 1a7ce920e..f3a06c7ab 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
@@ -24,21 +24,17 @@ class CheckoutBootstap {
             this.render()
         });
 
-        jQuery(document.body).
-          on('updated_checkout payment_method_selected', () => {
-              this.switchBetweenPayPalandOrderButton()
-              this.displayPlaceOrderButtonForSavedCreditCards()
-
-          })
+        jQuery(document.body).on('updated_checkout payment_method_selected', () => {
+            this.updateUi();
+        });
 
         jQuery(document).on('hosted_fields_loaded', () => {
             jQuery('#saved-credit-card').on('change', () => {
-                this.displayPlaceOrderButtonForSavedCreditCards()
+                this.updateUi();
             })
         });
 
-        this.switchBetweenPayPalandOrderButton()
-        this.displayPlaceOrderButtonForSavedCreditCards()
+        this.updateUi();
     }
 
     shouldRender() {
@@ -69,49 +65,28 @@ class CheckoutBootstap {
         );
     }
 
-    switchBetweenPayPalandOrderButton() {
+    updateUi() {
         const currentPaymentMethod = this.currentPaymentMethod();
+        const isPaypal = currentPaymentMethod === 'ppcp-gateway';
+        const isCard = currentPaymentMethod === 'ppcp-credit-card-gateway';
+        const isSavedCard = isCard && this.isSavedCardSelected();
+        const isNotOurGateway = !isPaypal && !isCard;
 
-        if (currentPaymentMethod !== 'ppcp-gateway' && currentPaymentMethod !== 'ppcp-credit-card-gateway') {
-            this.renderer.hideButtons(this.gateway.button.wrapper);
-            this.renderer.hideButtons(this.gateway.messages.wrapper);
-            this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
-            jQuery(this.standardOrderButtonSelector).show();
+        jQuery(this.standardOrderButtonSelector).toggle(isNotOurGateway || isSavedCard);
+        jQuery(this.gateway.button.wrapper).toggle(isPaypal);
+        jQuery(this.gateway.messages.wrapper).toggle(isPaypal);
+        jQuery(this.gateway.hosted_fields.wrapper).toggle(isCard && !isSavedCard);
+
+        if (isPaypal) {
+            this.messages.render();
         }
-        else {
-            jQuery(this.standardOrderButtonSelector).hide();
-            if (currentPaymentMethod === 'ppcp-gateway') {
-                this.renderer.showButtons(this.gateway.button.wrapper);
-                this.renderer.showButtons(this.gateway.messages.wrapper);
-                this.messages.render()
-                this.renderer.hideButtons(this.gateway.hosted_fields.wrapper)
+
+        if (isCard) {
+            if (isSavedCard) {
+                this.disableCreditCardFields();
+            } else {
+                this.enableCreditCardFields();
             }
-            if (currentPaymentMethod === 'ppcp-credit-card-gateway') {
-                this.renderer.hideButtons(this.gateway.button.wrapper)
-                this.renderer.hideButtons(this.gateway.messages.wrapper)
-                this.renderer.showButtons(this.gateway.hosted_fields.wrapper)
-            }
-        }
-    }
-
-    displayPlaceOrderButtonForSavedCreditCards() {
-        const currentPaymentMethod = this.currentPaymentMethod();
-        if (currentPaymentMethod !== 'ppcp-credit-card-gateway') {
-            return;
-        }
-
-        if (this.isSavedCardSelected()) {
-            this.renderer.hideButtons(this.gateway.button.wrapper)
-            this.renderer.hideButtons(this.gateway.messages.wrapper)
-            this.renderer.hideButtons(this.gateway.hosted_fields.wrapper)
-            jQuery(this.standardOrderButtonSelector).show()
-            this.disableCreditCardFields()
-        } else {
-            jQuery(this.standardOrderButtonSelector).hide()
-            this.renderer.hideButtons(this.gateway.button.wrapper)
-            this.renderer.hideButtons(this.gateway.messages.wrapper)
-            this.renderer.showButtons(this.gateway.hosted_fields.wrapper)
-            this.enableCreditCardFields()
         }
     }