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 +
                       '"'