From ebe1e849073d661ab28342c341ec2dee83f591e5 Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Fri, 12 Nov 2021 18:27:47 +0200
Subject: [PATCH] Fix and refactor PayNow checkout UI too

Inherit PayNowBootstrap from CheckoutBootstap, they are almost the same
---
 .../ContextBootstrap/PayNowBootstrap.js       | 79 ++-----------------
 1 file changed, 5 insertions(+), 74 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/PayNowBootstrap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/PayNowBootstrap.js
index 7aa37ba03..cd52d4b9e 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/PayNowBootstrap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/PayNowBootstrap.js
@@ -1,86 +1,17 @@
-import ErrorHandler from '../ErrorHandler';
-import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
+import CheckoutBootstap from './CheckoutBootstap'
 
-class PayNowBootstrap {
+class PayNowBootstrap extends CheckoutBootstap {
     constructor(gateway, renderer, messages, spinner) {
-        this.gateway = gateway;
-        this.renderer = renderer;
-        this.messages = messages;
-        this.spinner = spinner;
+        super(gateway, renderer, messages, spinner)
     }
 
-    init() {
-
-        this.render();
-
-        jQuery(document.body).on('updated_checkout', () => {
-            this.render();
-        });
-
-        jQuery(document.body).
-        on('updated_checkout payment_method_selected', () => {
-            this.switchBetweenPayPalandOrderButton();
-        });
-        this.switchBetweenPayPalandOrderButton();
-    }
-
-    shouldRender() {
-        if (document.querySelector(this.gateway.button.cancel_wrapper)) {
-            return false;
-        }
-
-        return document.querySelector(this.gateway.button.wrapper) !== null || document.querySelector(this.gateway.hosted_fields.wrapper) !== null;
-    }
-
-    render() {
-        if (!this.shouldRender()) {
-            return;
-        }
-        if (document.querySelector(this.gateway.hosted_fields.wrapper + '>div')) {
-            document.querySelector(this.gateway.hosted_fields.wrapper + '>div').setAttribute('style', '');
-        }
-        const actionHandler = new CheckoutActionHandler(
-            PayPalCommerceGateway,
-            new ErrorHandler(this.gateway.labels.error.generic),
-            this.spinner
-        );
-
-        this.renderer.render(
-            this.gateway.button.wrapper,
-            this.gateway.hosted_fields.wrapper,
-            actionHandler.configuration(),
-        );
-    }
-
-    switchBetweenPayPalandOrderButton() {
+    updateUi() {
         const urlParams = new URLSearchParams(window.location.search)
         if (urlParams.has('change_payment_method')) {
             return
         }
 
-        const currentPaymentMethod = jQuery(
-            'input[name="payment_method"]:checked').val();
-
-        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('#place_order').show();
-        }
-        else {
-            jQuery('#place_order').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 (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);
-            }
-        }
+        super.updateUi();
     }
 }