Public Cloud FAQ update, faq links connected

_includes/pricing/prices/add-ons-pricing.json

@@ -1,15 +1,25 @@
 {
   "public-cloud": {
     "edge": {
-      "faq": "",
-      "price": "$9/month"
+      "faq": "edge-addon-cloud-what-is",
+      "price": {
+        "usd": "$9/month",
+        "eur": "€9/month"
+      }
     },
     "trendz": {
-      "faq": "",
-      "price": "$29/month"
+      "faq": "trendz-what-is",
+      "price": {
+        "usd": "$29/month",
+        "eur": "€28/month"
+      }
     },
     "wl": {
-      "faq": ""
+      "faq": "tb-cloud-what-is-included-in-the-white-labeled-mobile-app-add-on",
+      "price": {
+        "usd": "<span>$99/month</span> ($1 000 one time setup fee)",
+        "eur": "<span>€95/month</span> (€969 one time setup fee)"
+      }
     }
   },
   "private-cloud": {
@@ -22,7 +32,8 @@
       "price": "$449/month"
     },
     "wl": {
-      "faq": ""
+      "faq": "",
+      "price": "<span>$99/month</span> ($1 000 one time setup fee)"
     }
   },
   "pay-as-you-go": {
@@ -35,7 +46,8 @@
       "price": "$12/month"
     },
     "wl": {
-      "faq": ""
+      "faq": "",
+      "price": "<span>$99/month</span> ($1 000 one time setup fee)"
     }
   }
 }

_layouts/pricing.html

@@ -29,7 +29,6 @@
 
     jqueryDefer(function () {
         initPricingState();
-        generateAddOnsCards();
     });
 
     function initPricingState() {
@@ -59,9 +58,11 @@
                 document.querySelectorAll(`#thingsboard-cloud .billing-toggle.solution-selector .label-text`).forEach(elem => elem.classList.toggle('selected'));
             }
             setTopUpsCurrency('eur');
+            generateAddOnsCards('eur');
         } else {
             document.getElementById('Pricing_PE_Cloud_NorthAmerica')?.classList.add("defaultselection");
             setTopUpsCurrency('usd');
+            generateAddOnsCards('usd');
         }
     }
 
@@ -134,10 +135,12 @@
             solutionId = 'cloud-north-america';
             cookieValue = '/docs/paas/';
             setTopUpsCurrency('usd');
+            generateAddOnsCards('usd');
         } else {
             solutionId = 'cloud-europe';
             cookieValue = '/docs/paas/eu/';
             setTopUpsCurrency('eur');
+            generateAddOnsCards('eur');
         }
         setCookie("cloudServer", cookieValue, {expires: 365, path: '/'});
         setCloudServerHref();
@@ -416,11 +419,25 @@
         window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + '?section=thingsboard-pe-options&product=thingsboard-private-cloud'
     }
 
-    function generateAddOnsCards() {
+    function generateAddOnsCards(currency = 'usd') {
         document.querySelectorAll('.add-ons').forEach(elem => {
             const product = elem.dataset.productName;
             const addOnsPricing = {{ addons }};
 
+            const getPrice = (item) => {
+                if (item && item.price) {
+                    if (typeof item.price === 'object') {
+                        return item.price[currency] || item.price['usd'];
+                    }
+                    return item.price;
+                }
+                return "<span>$99/month</span> ($1 000 one time setup fee)";
+            };
+
+            const edgePrice = getPrice(addOnsPricing[product].edge);
+            const trendzPrice = getPrice(addOnsPricing[product].trendz);
+            const wlPrice = getPrice(addOnsPricing[product].wl);
+
             elem.innerHTML = `
                 <h2>Add-ons</h2>
                 <p>Customize your deployment with optional features to suit your business needs.</p>
@@ -430,28 +447,28 @@ <h2>Add-ons</h2>
                         <div class="text">
                             <h3 data-faq-id="${addOnsPricing[product].edge.faq}" data-faq-link-size="50%">Edge Computing</h3>
                             <p>Process data where it is collected</p>
-                            <p>Starting from <span>${addOnsPricing[product].edge.price}</span></p>
+                            <p>Starting from <span>${edgePrice}</span></p>
                         </div>
                     </div>
                     <div class="card">
                         <img src="/images/pricing/trendz-add-on-icon.svg" alt="Trendz add on icon">
                         <div class="text">
                             <h3 data-faq-id="${addOnsPricing[product].trendz.faq}" data-faq-link-size="50%">Trendz Analytics</h3>
                             <p>Advanced analytics for your solution</p>
-                            <p>Starting from <span>${addOnsPricing[product].trendz.price}</span></p>
+                            <p>Starting from <span>${trendzPrice}</span></p>
                         </div>
                     </div>
                     <div class="card">
                         <img src="/images/pricing/wl-add-on-icon.svg" alt="White-labeling add on icon">
                         <div class="text">
                             <h3 data-faq-id="${addOnsPricing[product].wl.faq}" data-faq-link-size="50%">White-labeled Mobile App</h3>
                             <p>Сustomizable mobile application </p>
-                            <p><span>$99/month</span> ($1 000 one time setup fee)</p>
+                            <p>${wlPrice}</p>
                         </div>
                     </div>
                 </div>
             `
-            });
+        });
     }
 
 

js/script.js

@@ -167,8 +167,10 @@ var tb = (function () {
 				const sectionId = sectionIdArr[sectionIdArr.length -1];
 				switchFaqSection(sectionId);
 				const questionEl = document.querySelector(`div[data-item-id="${nodeId}"]`);
-				if (Array.from(questionEl.parentNode.children).indexOf(questionEl) > 6) {
-					loadMoreFaq(questionEl.parentNode.children[6]);
+				var $parent = $(questionEl).parent();
+				var $loadMoreBtn = $parent.find('.load-more');
+				if ($(questionEl).hasClass('hidden') && $loadMoreBtn.length) {
+					loadMoreFaq($loadMoreBtn[0]);
 				}
                 setTimeout(()=>openFaqNode(nodeId));
             });