Refactoring axo element handling

modules/ppcp-axo/resources/js/Components/DomElement.js

@@ -8,6 +8,7 @@ class DomElement {
         this.selector = this.config.selector;
         this.id = this.config.id || null;
         this.className = this.config.className || null;
+        this.attributes = this.config.attributes || null;
         this.anchorSelector = this.config.anchorSelector || null;
     }
 
@@ -19,12 +20,12 @@ class DomElement {
         this.$(document).on(action, this.selector, callable);
     }
 
-    hide(important = false) {
-        setVisible(this.selector, false, important);
+    hide() {
+        this.$(this.selector).hide();
     }
 
     show() {
-        setVisible(this.selector, true);
+        this.$(this.selector).show();
     }
 
     click() {

modules/ppcp-axo/resources/js/Components/DomElementCollection.js

@@ -23,6 +23,10 @@ class DomElementCollection {
             className: 'ppcp-axo-watermark-container'
         });
 
+        this.allFields = new DomElement({
+            selector: '#customer_details .form-row, #customer_details .woocommerce-shipping-fields'
+        });
+
         this.emailWidgetContainer = new DomElement({
             id: 'ppcp-axo-email-widget',
             selector: '#ppcp-axo-email-widget',
@@ -54,6 +58,27 @@ class DomElementCollection {
         this.submitButton = new DomElement({
             selector: '#ppcp-axo-submit-button-container button'
         });
+
+        this.changeShippingAddressLink = new DomElement({
+            selector: '*[data-ppcp-axo-change-shipping-address]',
+            attributes: 'data-ppcp-axo-change-shipping-address',
+        });
+
+        this.changeBillingAddressLink = new DomElement({
+            selector: '*[data-ppcp-axo-change-billing-address]',
+            attributes: 'data-ppcp-axo-change-billing-address',
+        });
+
+        this.changeCardLink = new DomElement({
+            selector: '*[data-ppcp-axo-change-card]',
+            attributes: 'data-ppcp-axo-change-card',
+        });
+
+        this.showGatewaySelectionLink = new DomElement({
+            selector: '*[data-ppcp-axo-show-gateway-selection]',
+            attributes: 'data-ppcp-axo-show-gateway-selection',
+        });
+
     }
 }
 

modules/ppcp-axo/resources/js/Components/FormFieldGroup.js

@@ -0,0 +1,98 @@
+
+class MockData {
+
+    constructor(config) {
+        this.data = {};
+
+        this.baseSelector = config.baseSelector;
+        this.contentSelector = config.contentSelector;
+        this.fields = config.fields || {};
+        this.template = config.template;
+
+        this.active = false;
+    }
+
+    setData(data) {
+        this.data = data;
+        this.refresh();
+    }
+
+    getDataValue(path) {
+        if (!path) {
+            return '';
+        }
+        const value = path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, this.data);
+        return value ? value : '';
+    }
+
+    activate() {
+        this.active = true;
+        this.refresh();
+    }
+
+    deactivate() {
+        this.active = false;
+        this.refresh();
+    }
+
+    toggle() {
+        this.active ? this.deactivate() : this.activate();
+    }
+
+    refresh() {
+        let content = document.querySelector(this.contentSelector);
+
+        if (!content) {
+            return;
+        }
+
+        content.innerHTML = '';
+
+        Object.keys(this.fields).forEach((key) => {
+            const field = this.fields[key];
+
+            if (this.active) {
+                this.hideField(field.selector);
+                //this.showField(this.contentSelector);
+            } else {
+                this.showField(field.selector);
+                //this.hideField(this.contentSelector);
+            }
+
+            if (typeof this.template === 'function') {
+                content.innerHTML = this.template({
+                    value: (valueKey) => {
+                        return this.getDataValue(this.fields[valueKey].valuePath);
+                    },
+                    isEmpty: () => {
+                        let isEmpty = true;
+                        Object.values(this.fields).forEach((valueField) => {
+                            if (this.getDataValue(valueField.valuePath)) {
+                                isEmpty = false;
+                                return false;
+                            }
+                        });
+                        return isEmpty;
+                    }
+                });
+            }
+
+        });
+    }
+
+    showField(selector) {
+        const field = document.querySelector(this.baseSelector + ' ' + selector);
+        if (field) {
+            field.classList.remove('ppcp-axo-field-hidden');
+        }
+    }
+
+    hideField(selector) {
+        const field = document.querySelector(this.baseSelector + ' ' + selector);
+        if (field) {
+            field.classList.add('ppcp-axo-field-hidden');
+        }
+    }
+}
+
+export default MockData;