1. Refactoring form objects and database objects to use inheritance and abstract base class for consistency and reduced redundancy.\n2. Contact us page button links updated to resolve error of missing link causing page refresh instead of expected functionality.

2024-09-10 12:09:50 +01:00
parent b3e801e1ec
commit 2d55fe6239
709 changed files with 5158 additions and 1512 deletions
--- a/static/js/pages/store/basket.js
+++ b/static/js/pages/store/basket.js
@@ -0,0 +1,191 @@
+import { BasePage } from "../base.js";
+
+export class PageStoreBasket extends BasePage {
+    static hash = hashPageStoreBasket;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupStoreCardsInfo();
+        this.hookupOverlaysStoreBasketInfo();
+        this.hookupButtonCheckoutSession();
+    }
+
+    
+    hookupStoreCardsInfo() {
+        
+        document.querySelectorAll(idContainerInfoDelivery).addEventListener("click", function(event) {
+            console.log("delivery modal display method");
+            document.querySelectorAll(idOverlayInfoDelivery).css('display', 'block');
+        });
+        
+        document.querySelectorAll(idContainerInfoBilling).addEventListener("click", function(event) {
+            console.log("billing modal display method");
+            document.querySelectorAll(idOverlayInfoBilling).css('display', 'block');
+        });
+    }
+
+    hookupOverlaysStoreBasketInfo() {
+
+        let elOverlay, elForm;
+
+        // Delivery
+        elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
+        elForm = elOverlay.querySelector('form');
+        
+        hookupOverlay(elOverlay);
+        initialiseEventHandler(elForm, flagInitialised, function() {
+            elForm.submit(function(event) {
+                elForm = document.querySelectorAll(elForm);
+                event.preventDefault();
+                console.log("delivery submit method");
+                
+                ajaxData = {};
+                ajaxData[keyInfoType] = keyInfoDelivery;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery); 
+
+                ajaxJSONData('info delivery', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
+                // document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
+            });
+        });
+
+        // Billing
+        elOverlay = document.querySelectorAll(idOverlayInfoBilling);
+        elForm = elOverlay.querySelector('form');
+
+        hookupOverlay(elOverlay);
+        initialiseEventHandler(elForm, flagInitialised, function() {
+            elForm.submit(function(event) {
+                event.preventDefault();
+                console.log("billing submit method");
+                
+                ajaxData = {};
+                ajaxData[keyInfoType] = keyInfoBilling;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
+
+                ajaxJSONData('info billing', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
+                // document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
+            });
+        });
+        let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyCity, keyCounty];
+        for (var k in keys) {
+            elForm.querySelector('#' + keys[k]).removeAttr('required');
+        }
+    }
+
+    loadInfoAddress(response) {
+        
+        console.log('ajax:'); console.log(response.data);
+        let infoType = response.data[keyInfoType];
+        let infoAddress = response.data[infoType];
+        setLocalStorage(infoType, infoAddress);
+
+        // update webpage elements in background
+        if (infoType == keyInfoBilling) {
+
+            let container = document.querySelectorAll(idContainerInfoBilling);
+            if (infoAddress[keyInfoIdentical]) {
+                container.querySelector('div').innerHTML = "Same as delivery address";
+            } else {
+                container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
+            }
+
+            document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
+
+            document.querySelectorAll(idOverlayInfoBilling).querySelector('form').classList.add(flagSubmitted);
+        } else {
+
+            let container = document.querySelectorAll(idContainerInfoDelivery);
+            container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
+
+            document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
+
+            document.querySelectorAll(idOverlayInfoDelivery).querySelector('form').classList.add(flagSubmitted);
+        }
+    }
+
+    convertFormBilling2JSON(ajaxData, idOverlayInfo) {
+        
+        let elOverlay, elForm, elOverlayDelivery, elFormDelivery;
+        
+        elOverlay = document.querySelectorAll(idOverlayInfo);
+        elForm = elOverlay.querySelector('form');
+        elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
+        elForm = elOverlay.querySelector('form');
+        
+        console.log('converting billing form to json\nform ID: ' + elForm.id);
+        ajaxData[keyForm] = convertForm2JSON(elForm); // formData; // form.serialize();
+        let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
+        console.log('ajaxData:');
+        console.log(ajaxData);
+        ajaxData[keyForm][keyInfoIdentical] = getElementCurrentValue(elForm.querySelector('#' + keyInfoIdentical));
+        for (var k in keys) {
+            if (idOverlayInfo == idOverlayInfoBilling && ajaxData[keyForm][keyInfoIdentical]) {
+                ajaxData[keyForm][keys[k]] = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
+            } else {
+                ajaxData[keyForm][keys[k]] = getElementCurrentValue(elForm.querySelector('#' + keys[k]));
+            }
+        }
+        console.log('ajaxData:');
+        console.log(ajaxData);
+        return ajaxData;
+    }
+
+    hookupButtonCheckoutSession() {
+        let btnCheckout = document.querySelectorAll(idButtonCheckout);
+        btnCheckout.classList.remove(flagInitialised);
+        initialiseEventHandler(idButtonCheckout, flagInitialised, function() {
+
+            btnCheckout.removeEventListener("click");
+            btnCheckout.addEventListener("click", function(event) {
+                
+                
+                //setupPageLocalStorageNext(hashPageStoreBasket);
+                let basket = getLocalStorage(keyBasket);
+                // goToPage(hashPageStoreBasket);
+                let ajaxData = {};
+                ajaxData[keyBasket] = basket;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling);
+                ajaxData[key_code_currency] = getCurrencySelected();
+                // ajaxData[keyIsSubscription] = false; // only checkout one-time payment items for now
+
+                ajaxJSONData('checkout session', mapHashToController(hashPageStoreCheckout), ajaxData, handleResponseCheckout, false);
+            });
+        });
+    }
+
+    handleResponseCheckout(response) {
+        // let tmpData = {};
+        // tmpData[keyIdCheckout] = response.data[keyIdCheckout]
+        // goToPage(hashPageStoreCheckoutSession, tmpData);
+        window.location.href = response.data[keyUrlCheckout]
+    }
+
+    hookupButtonFormBillingCopy() {
+
+        // let elButton = document.querySelectorAll(idButtonFormBillingCopy);
+
+        initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
+            document.querySelectorAll(idButtonFormBillingCopy).addEventListener("click", function (event) {
+                
+                let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
+
+                let elFormBilling = document.querySelectorAll(idOverlayInfoBilling).querySelector('form');
+                let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
+
+                for (var k in keys) {
+                    elFormBilling.querySelector('#' + keys[k]).value = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
+                }
+            });
+        });
+    }
+
+
+    leave() {
+        super.leave();
+    }
+}