From 340d5b20e119295cc78060424e4b7ec6af718812 Mon Sep 17 00:00:00 2001 From: manikantakailasa <manikanta.kailasa@gmail.com> Date: Thu, 15 Feb 2024 14:47:59 +0530 Subject: [PATCH 1/4] sync to Yith products to CTB --- includes/assets/js/NFDPluginsMarketplace.js | 303 ++++++++++++-------- 1 file changed, 176 insertions(+), 127 deletions(-) diff --git a/includes/assets/js/NFDPluginsMarketplace.js b/includes/assets/js/NFDPluginsMarketplace.js index 8a4df72..0d72d33 100644 --- a/includes/assets/js/NFDPluginsMarketplace.js +++ b/includes/assets/js/NFDPluginsMarketplace.js @@ -1,99 +1,128 @@ /** * Class to show Marketplace products (plugins) in a tab under plugin-install.php */ -class NFDPluginsMarketplace { - constructor() { - // Add event listener for when the DOM is loaded - window.addEventListener('DOMContentLoaded', () => { - this.setupContainer(); - - // Fetch data from the Marketplace API - fetch(nfdPremiumPluginsMarketplace.restApiRoot + '/newfold-marketplace/v1/marketplace', { - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json', - 'X-WP-Nonce': nfdPremiumPluginsMarketplace.restApiNonce - } - }) - .then((response) => response.json()) - .then((data) => { - if (! data.hasOwnProperty('products')) { - this.isError(); - } else { - this.isLoaded(); - this.showProducts(this.filterProducts(data.products.data)); - } - }) - }) - } - // Function that sets up the container for the plugin marketplace - setupContainer() { - const pluginsListTable = document.createElement('div'); - pluginsListTable.classList.add('wp-list-table', 'widefat', 'plugin-install', 'nfd-premium-plugins-marketplace'); - pluginsListTable.innerHTML = `<h2 class="screen-reader-text">Plugins list</h2> +const ctbAvailableProducts = [ + 'e2f4caa1-411c-468b-86b1-a3c4e4e8cec6', + 'ded80bbd-4662-48e4-85ca-a1af92164bc0', + 'ae909143-6549-46cd-8ed0-56aeeb5f3bf1', + '0391f4e6-b5b0-41b5-832d-9464e2390214', + '95e9b032-4c21-42c3-b9aa-8891253b64c2', +]; +class NFDPluginsMarketplace { + constructor() { + // Add event listener for when the DOM is loaded + window.addEventListener('DOMContentLoaded', () => { + this.setupContainer(); + + // Fetch data from the Marketplace API + fetch( + nfdPremiumPluginsMarketplace.restApiRoot + + '/newfold-marketplace/v1/marketplace', + { + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json', + 'X-WP-Nonce': nfdPremiumPluginsMarketplace.restApiNonce, + }, + } + ) + .then((response) => response.json()) + .then((data) => { + if (!data.hasOwnProperty('products')) { + this.isError(); + } else { + this.isLoaded(); + this.showProducts(this.filterProducts(data.products.data)); + } + }); + }); + } + + // Function that sets up the container for the plugin marketplace + setupContainer() { + const pluginsListTable = document.createElement('div'); + pluginsListTable.classList.add( + 'wp-list-table', + 'widefat', + 'plugin-install', + 'nfd-premium-plugins-marketplace' + ); + pluginsListTable.innerHTML = `<h2 class="screen-reader-text">Plugins list</h2> <p>${nfdPremiumPluginsMarketplace.marketplaceDescription}</p> <div id="the-list">${this.isLoading()}</div>`; - const filterArea = document.querySelector('.plugin-install-tab-premium-marketplace .wp-filter'); - filterArea.parentNode.insertBefore(pluginsListTable, filterArea.nextSibling); - } - - // Filter products to only show plugins - filterProducts(products) { - const plugins = products.filter(product => product.type == "plugin"); - - return plugins; + const filterArea = document.querySelector( + '.plugin-install-tab-premium-marketplace .wp-filter' + ); + filterArea.parentNode.insertBefore( + pluginsListTable, + filterArea.nextSibling + ); + } + + // Filter products to only show plugins + filterProducts(products) { + const plugins = products.filter((product) => product.type == 'plugin'); + + return plugins; + } + + // Returns whether the environment supports CTB + supportsCTB(products) { + if (ctbAvailableProducts.includes(poducts.clickToBuyId)) return true; + if (typeof nfdctb === 'undefined') { + return false; } - // Returns whether the environment supports CTB - supportsCTB() { - if (typeof nfdctb === 'undefined') { - return false; - } - - return nfdctb.supportsCTB; - } - - // Show the filtered products on the page - showProducts(products) { - - // Helper function to render the thumbnail for each product - const renderThumbnail = (product) => { - if (product.smallThumbnailUrl) { - return `<img src="${product.smallThumbnailUrl}" alt="${product.name} Thumbnail" width="128px" height="128px">`; - } - - const fallback = 'https://hiive-space-cdn.nyc3.cdn.digitaloceanspaces.com/marketplace/premium-plugins/fallback.svg'; - return `<img src="${fallback}" alt="${product.name} Thumbnail" width="128px" height="128px">`; - } - - // Helper function to render the action buttons for each product - const renderActions = (product) => { - const supportsCTB = this.supportsCTB(); - let actionButtons = []; - - if (product.primaryUrl && product.price) { - const primaryAction = `<a target="_blank" + return nfdctb.supportsCTB; + } + + // Show the filtered products on the page + showProducts(products) { + // Helper function to render the thumbnail for each product + const renderThumbnail = (product) => { + if (product.smallThumbnailUrl) { + return `<img src="${product.smallThumbnailUrl}" alt="${product.name} Thumbnail" width="128px" height="128px">`; + } + + const fallback = + 'https://hiive-space-cdn.nyc3.cdn.digitaloceanspaces.com/marketplace/premium-plugins/fallback.svg'; + return `<img src="${fallback}" alt="${product.name} Thumbnail" width="128px" height="128px">`; + }; + + // Helper function to render the action buttons for each product + const renderActions = (product) => { + const supportsCTB = this.supportsCTB(product); + let actionButtons = []; + + if (product.primaryUrl && product.price) { + const primaryAction = `<a target="_blank" href="${product.primaryUrl}" class="button button-primary nfd-ctb-btn" - ${supportsCTB && product.clickToBuyId ? 'data-action="load-nfd-ctb" data-ctb-id="' + product.clickToBuyId + '"' : ''}>Buy $${product.price}</a>`; + ${ + supportsCTB && product.clickToBuyId + ? 'data-action="load-nfd-ctb" data-ctb-id="' + + product.clickToBuyId + + '"' + : '' + }>Buy $${product.price}</a>`; - actionButtons.push(primaryAction); - } + actionButtons.push(primaryAction); + } - if (product.secondaryUrl) { - const secondaryAction = `<a target="_blank" href="${product.secondaryUrl}">More Details</a>`; + if (product.secondaryUrl) { + const secondaryAction = `<a target="_blank" href="${product.secondaryUrl}">More Details</a>`; - actionButtons.push(secondaryAction); - } - - return actionButtons.join(''); - } - - // Helper function to render a template for each product - const buildProduct = (product) => { - return `<div class="plugin-card"> + actionButtons.push(secondaryAction); + } + + return actionButtons.join(''); + }; + + // Helper function to render a template for each product + const buildProduct = (product) => { + return `<div class="plugin-card"> <div class="nfd-plugin-card-content"> <div class="nfd-plugin-card-thumbnail"> ${renderThumbnail(product)} @@ -109,20 +138,19 @@ class NFDPluginsMarketplace { </div> </div> </div>`; - } + }; - const render = products.map(product => buildProduct(product)).join(''); + const render = products.map((product) => buildProduct(product)).join(''); - const pluginsListTable = document.querySelector('.wp-list-table #the-list'); - return pluginsListTable.innerHTML = render; - } - - // Shows skeleton when the marketplace is loading API data - isLoading() { + const pluginsListTable = document.querySelector('.wp-list-table #the-list'); + return (pluginsListTable.innerHTML = render); + } - // Helper function to generate skeleton template - const skeleton = (styles, customClass) => { - return `<div class="nfd-skeleton ${customClass || ''}" + // Shows skeleton when the marketplace is loading API data + isLoading() { + // Helper function to generate skeleton template + const skeleton = (styles, customClass) => { + return `<div class="nfd-skeleton ${customClass || ''}" style=" width: ${styles.width || '100%'}; height: ${styles.height || 'auto'}; @@ -131,51 +159,72 @@ class NFDPluginsMarketplace { margin-bottom: ${styles.marginBottom || '0px'}; margin-right: ${styles.marginRight || '0px'}; "></div>`; - } + }; - // Helper function to build a product skeleton template - const buildSkeleton = () => { - return `<div class="plugin-card"> + // Helper function to build a product skeleton template + const buildSkeleton = () => { + return `<div class="plugin-card"> <div class="nfd-plugin-card-content"> <div class="nfd-plugin-card-thumbnail"> - ${skeleton({width:"128px", height:"128px"})} + ${skeleton({ width: '128px', height: '128px' })} </div> <div class="nfd-plugin-card-title"> - ${skeleton({width:"70%", height:"25px", marginBottom:"20px"})} + ${skeleton({ + width: '70%', + height: '25px', + marginBottom: '20px', + })} </div> <div class="nfd-plugin-card-actions"> - ${skeleton({width:"90px", height:"32px", marginRight:"0px", marginLeft:"auto"})} + ${skeleton({ + width: '90px', + height: '32px', + marginRight: '0px', + marginLeft: 'auto', + })} </div> <div class="nfd-plugin-card-desc"> - ${skeleton({width:"100%", height:"12px"})} - ${skeleton({width:"90%", height:"12px", marginTop:"8px"})} - ${skeleton({width:"100%", height:"12px", marginTop:"8px"})} - ${skeleton({width:"60%", height:"12px", marginTop:"8px"})} + ${skeleton({ width: '100%', height: '12px' })} + ${skeleton({ + width: '90%', + height: '12px', + marginTop: '8px', + })} + ${skeleton({ + width: '100%', + height: '12px', + marginTop: '8px', + })} + ${skeleton({ + width: '60%', + height: '12px', + marginTop: '8px', + })} </div> </div> </div>`; - } - - const items = 12; - let pluginCardsSkeleton = []; + }; - for (let i = 0; i < items; i++) { - pluginCardsSkeleton += buildSkeleton(); - } + const items = 12; + let pluginCardsSkeleton = []; - return pluginCardsSkeleton; + for (let i = 0; i < items; i++) { + pluginCardsSkeleton += buildSkeleton(); } - // Clears the marketplace container from skeleton HTML - isLoaded() { - const pluginsListTable = document.querySelector('.wp-list-table #the-list'); - pluginsListTable.innerHTML = ""; - } + return pluginCardsSkeleton; + } + + // Clears the marketplace container from skeleton HTML + isLoaded() { + const pluginsListTable = document.querySelector('.wp-list-table #the-list'); + pluginsListTable.innerHTML = ''; + } - // Shows error message when API fail - isError() { - const pluginsListTable = document.querySelector('.wp-list-table #the-list'); - pluginsListTable.innerHTML = `<div class="nfd-premium-marketplace-loading-error"> + // Shows error message when API fail + isError() { + const pluginsListTable = document.querySelector('.wp-list-table #the-list'); + pluginsListTable.innerHTML = `<div class="nfd-premium-marketplace-loading-error"> <div class="nfd-premium-marketplace-loading-error-content"> <img src="https://hiive-space-cdn.nyc3.cdn.digitaloceanspaces.com/marketplace/premium-plugins/error-loading.webp" alt="Error laoding content"> <h2>Oops, something went wrong.</h2> @@ -184,12 +233,12 @@ class NFDPluginsMarketplace { </div> </div>`; - document.addEventListener('mouseup', (e) => { - if (e.target.id === 'nfd-premium-marketplace-reload') { - location.reload(); - } - }) - } + document.addEventListener('mouseup', (e) => { + if (e.target.id === 'nfd-premium-marketplace-reload') { + location.reload(); + } + }); + } } const nfdPluginsMarketplace = new NFDPluginsMarketplace(); From 222a60239a9fe3228c05e645fe7804d19267db79 Mon Sep 17 00:00:00 2001 From: manikantakailasa <manikanta.kailasa@gmail.com> Date: Fri, 16 Feb 2024 17:37:51 +0530 Subject: [PATCH 2/4] bug fix --- includes/assets/js/NFDPluginsMarketplace.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/assets/js/NFDPluginsMarketplace.js b/includes/assets/js/NFDPluginsMarketplace.js index 0d72d33..8ab3f76 100644 --- a/includes/assets/js/NFDPluginsMarketplace.js +++ b/includes/assets/js/NFDPluginsMarketplace.js @@ -70,7 +70,7 @@ class NFDPluginsMarketplace { // Returns whether the environment supports CTB supportsCTB(products) { - if (ctbAvailableProducts.includes(poducts.clickToBuyId)) return true; + if (ctbAvailableProducts.includes(products.clickToBuyId)) return true; if (typeof nfdctb === 'undefined') { return false; } From 84d8889105a193a304b32afadc6fae69097ef6fa Mon Sep 17 00:00:00 2001 From: manikantakailasa <manikanta.kailasa@gmail.com> Date: Tue, 20 Feb 2024 18:11:12 +0530 Subject: [PATCH 3/4] fix --- includes/assets/js/NFDPluginsMarketplace.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/includes/assets/js/NFDPluginsMarketplace.js b/includes/assets/js/NFDPluginsMarketplace.js index 8ab3f76..cc9fce4 100644 --- a/includes/assets/js/NFDPluginsMarketplace.js +++ b/includes/assets/js/NFDPluginsMarketplace.js @@ -70,7 +70,7 @@ class NFDPluginsMarketplace { // Returns whether the environment supports CTB supportsCTB(products) { - if (ctbAvailableProducts.includes(products.clickToBuyId)) return true; + if (ctbAvailableProducts.includes(products?.clickToBuyId)) return true; if (typeof nfdctb === 'undefined') { return false; } @@ -101,9 +101,9 @@ class NFDPluginsMarketplace { href="${product.primaryUrl}" class="button button-primary nfd-ctb-btn" ${ - supportsCTB && product.clickToBuyId + supportsCTB && product?.clickToBuyId ? 'data-action="load-nfd-ctb" data-ctb-id="' + - product.clickToBuyId + + product?.clickToBuyId + '"' : '' }>Buy $${product.price}</a>`; From 55295378f67291dd985a2d3537fd3d3a697dcf3a Mon Sep 17 00:00:00 2001 From: manikantakailasa <manikanta.kailasa@gmail.com> Date: Fri, 23 Feb 2024 14:15:46 +0530 Subject: [PATCH 4/4] removing supportsCTB check --- includes/assets/js/NFDPluginsMarketplace.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/includes/assets/js/NFDPluginsMarketplace.js b/includes/assets/js/NFDPluginsMarketplace.js index cc9fce4..f4981dc 100644 --- a/includes/assets/js/NFDPluginsMarketplace.js +++ b/includes/assets/js/NFDPluginsMarketplace.js @@ -2,13 +2,6 @@ * Class to show Marketplace products (plugins) in a tab under plugin-install.php */ -const ctbAvailableProducts = [ - 'e2f4caa1-411c-468b-86b1-a3c4e4e8cec6', - 'ded80bbd-4662-48e4-85ca-a1af92164bc0', - 'ae909143-6549-46cd-8ed0-56aeeb5f3bf1', - '0391f4e6-b5b0-41b5-832d-9464e2390214', - '95e9b032-4c21-42c3-b9aa-8891253b64c2', -]; class NFDPluginsMarketplace { constructor() { // Add event listener for when the DOM is loaded @@ -69,8 +62,7 @@ class NFDPluginsMarketplace { } // Returns whether the environment supports CTB - supportsCTB(products) { - if (ctbAvailableProducts.includes(products?.clickToBuyId)) return true; + supportsCTB() { if (typeof nfdctb === 'undefined') { return false; } @@ -93,7 +85,6 @@ class NFDPluginsMarketplace { // Helper function to render the action buttons for each product const renderActions = (product) => { - const supportsCTB = this.supportsCTB(product); let actionButtons = []; if (product.primaryUrl && product.price) { @@ -101,7 +92,7 @@ class NFDPluginsMarketplace { href="${product.primaryUrl}" class="button button-primary nfd-ctb-btn" ${ - supportsCTB && product?.clickToBuyId + product?.clickToBuyId ? 'data-action="load-nfd-ctb" data-ctb-id="' + product?.clickToBuyId + '"'