From 209129332da11c947b1d6243bd4d6a201d8c82e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Andr=C3=A9s=20Moreno=20Rubio?= Date: Thu, 11 Mar 2021 02:51:53 +0100 Subject: [PATCH] Fixed bugs --- html/modals/purchase-modal.html | 4 +-- html/sample-content/ecommerce.html | 2 +- js/engine.js | 38 ++++++++++++++------------- js/ui.js | 41 +++++++++++++++++++++--------- 4 files changed, 53 insertions(+), 32 deletions(-) diff --git a/html/modals/purchase-modal.html b/html/modals/purchase-modal.html index a28179c..c3ae29a 100644 --- a/html/modals/purchase-modal.html +++ b/html/modals/purchase-modal.html @@ -119,10 +119,10 @@

Sizes

- + Buy Product For - + Cancel diff --git a/html/sample-content/ecommerce.html b/html/sample-content/ecommerce.html index cfb0587..a91959a 100644 --- a/html/sample-content/ecommerce.html +++ b/html/sample-content/ecommerce.html @@ -25,7 +25,7 @@

Overview

-
{{data.purchasedProducts}}
+
{{data.wallet.purchasedProducts}}
Adquired Products
diff --git a/js/engine.js b/js/engine.js index c838f1e..6ed9ffe 100644 --- a/js/engine.js +++ b/js/engine.js @@ -16,8 +16,9 @@ const query = document.querySelector.bind(document); const queryAll = document.querySelectorAll.bind(document); const logConfigFile = false; // Shows/hides config file into the console -var showLog = false; -var showEventsLog = false; +var LOGS = true; +var showLog = LOGS; +var showEventsLog = LOGS; var currentUser = null; /** *****************************************************/ @@ -113,7 +114,7 @@ function initPage(user) { const url = window.location.href; if (url.indexOf("edit-profile") <= 0) { user.data.memberType = - user.data.purchasedProducts && user.data.purchasedProducts < 5 ? + user.data.wallet.purchasedProducts && user.data.wallet.purchasedProducts < 5 ? "Standard" : "Golden"; user.data.since = user.created.substr(0, 10); @@ -143,28 +144,31 @@ function purchaseProduct(element) { ); purchaseModalButton.classList.add("is-loading"); - const purchasedProducts = Number(currentUser.data.purchasedProducts + 1); + const purchasedProducts = Number(currentUser.data.wallet.purchasedProducts + 1); const price = Number( element.parentElement.parentElement .querySelector("#quickview-price") .innerText.trim() .substr(1) ); - const credits = Number(currentUser.data.credits - price); + const credits = Number(currentUser.data.wallet.credits - price); const uid = currentUser.UID; - gigya.accounts.setAccountInfo({ - data: { purchasedProducts, credits }, - callback: function(event) { - log("Product bought", "SET ACCOUNT INFO"); - purchaseModalButton.classList.remove("is-loading"); - hideModal("purchase"); - // We update the session currentUser and then send it to - currentUser.data.purchasedProducts = purchasedProducts; - currentUser.data.credits = credits; - initPage(currentUser); - }, - }); + // Checking from frontend. BAD + if (credits && purchasedProducts) { + gigya.accounts.setAccountInfo({ + data: { "wallet": { purchasedProducts, credits } }, + callback: function(event) { + log("Product bought", "SET ACCOUNT INFO"); + purchaseModalButton.classList.remove("is-loading"); + hideModal("purchase"); + // We update the session currentUser and then send it to + currentUser.data.wallet.purchasedProducts = purchasedProducts; + currentUser.data.wallet.credits = credits; + initPage(currentUser); + }, + }); + } // THIS IS THE GOOD WAY!!! BACKEND // const id_token = 'whatever'; // generate a token with getJWT diff --git a/js/ui.js b/js/ui.js index b9d412b..3184d1e 100644 --- a/js/ui.js +++ b/js/ui.js @@ -124,12 +124,12 @@ function includeConfigCss(config) { */ function showLoggedHTML(user) { // Put some dummy data if this does not exist - if (!user.data.purchasedProducts) { - user.data.purchasedProducts = 4; + if (!user.data.wallet.purchasedProducts) { + user.data.wallet.purchasedProducts = 4; } - if (!user.data.credits) { - user.data.credits = 165; + if (!user.data.wallet.credits) { + user.data.wallet.credits = 165; } /* Hide Registration Screenset */ @@ -313,12 +313,12 @@ function loadSampleContent(user) { // Get price and fix currency if needed let fixedCurrency = "$10000"; let classCurrency = ""; - if (user.data && user.data.credits) { + if (user.data && user.data.wallet.credits) { fixedCurrency = - user.data.credits > 0 ? - "$" + user.data.credits : - "-$" + user.data.credits * -1; - classCurrency = user.data.credits > 0 ? "" : "has-text-danger"; + user.data.wallet.credits > 0 ? + "$" + user.data.wallet.credits : + "-$" + user.data.wallet.credits * -1; + classCurrency = user.data.wallet.credits > 0 ? "" : "has-text-danger"; } if (!user.data) { user.data = {}; @@ -669,10 +669,17 @@ function showPurchaseModal(element) { const imagePath = content && content.querySelector('img').getAttribute('src'); const title = content && content.querySelector(".product-info h3").innerText; const description = content && content.querySelector(".product-info p").innerText; - const buttonText = sourceElement.srcElement.innerText; + const buttonText = sourceElement && sourceElement.srcElement.parentElement.innerText; + const price = buttonText ? Number(buttonText.substr(1)) : "-"; + const hasCredits = currentUser && currentUser.data && currentUser.data.wallet && currentUser.data.wallet.credits - price > 0; + const isLogged = currentUser && currentUser.status !== "FAIL"; + const enabledButton = !isLogged || hasCredits; + const priceClass = enabledButton ? "accent-button" : "red-button"; + if (!imagePath || !title || !description || !buttonText) { + debugger; + } // Get proper text for button - const isLogged = currentUser && currentUser.status !== "FAIL"; const textForButton = isLogged ? "Buy product for  " + buttonText : "LOGIN to buy this product"; // inject the card content into the modal @@ -682,7 +689,17 @@ function showPurchaseModal(element) { purchaseModal.querySelector("#quickview-price").innerText = buttonText; purchaseModal.querySelector(".product-image img").src = imagePath; - purchaseModal.querySelector(".purchase-button span").innerHTML = textForButton; + const purchaseButton = purchaseModal.querySelector(".purchase-button"); + purchaseButton.querySelector("span").innerHTML = textForButton; + purchaseButton.classList.remove("is-loading"); + + // Check the status of the button (first we clean it from previous state) + purchaseButton.classList.remove("is-disabled", "red-button", "accent-button"); + purchaseButton.classList.add(priceClass); + if (!enabledButton) { + purchaseButton.classList.add('is-disabled'); + } + }); }