// Pax8 Guides landing page enhancements // - Renames Recipes/Workflows UI text to Guides // - Categorizes the published guide cards on the Guides index page // - Adds a secondary CTA that links to the Marketplace version // - Hides the featured guide block above the custom intro $(window).on('pageLoad', function () { const MAX_ATTEMPTS = 30; const DELAY_MS = 250; const CATEGORY_ORDER = ['sales', 'onboarding', 'operations', 'financeRisk']; const GUIDE_CATEGORIES = { sales: { title: 'Sales', description: 'Guide patterns for quoting, storefronts, upsell opportunities, QBR preparation, and sales notifications.' }, onboarding: { title: 'Onboarding', description: 'Guide patterns for creating companies, placing orders, provisioning services, and onboarding users.' }, operations: { title: 'Operations', description: 'Guide patterns for documentation sync, subscription audits, lifecycle orchestration, and operational system alignment.' }, financeRisk: { title: 'Finance/Risk', description: 'Guide patterns for offboarding, cancellations, usage monitoring, invoice reconciliation, and billing risk detection.' } }; const GUIDE_MAP = { 'automated quoting and sales cycle': { title: 'Automated Quoting and Sales Cycle', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/ba9f1429-e8a1-4d87-8a1a-f626617d36d9' }, 'api-driven customer storefront': { title: 'API-Driven Customer Storefront', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/139979b5-55fa-46e8-ab82-15e31c65cd21' }, 'intelligent cross-sell and up-sell automation': { title: 'Intelligent Cross-Sell and Up-Sell Automation', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/87db50f5-63b8-45d1-8639-4199dee31a22' }, 'automated qbr data pull': { title: 'Automated QBR Data Pull', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/35c4dfae-170f-4aae-a65f-0ee9d2b544b1' }, 'real-time team notifications for high-value sales': { title: 'Real-time Team Notifications for High-Value Sales', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/9c198654-42f4-4878-98e6-fc6115d42c0d' }, 'onboarding a new company': { title: 'Onboarding a New Company', category: 'onboarding', platformUrl: 'https://app.pax8.com/integrations/guides/61513e50-a00e-43d0-90c9-b7c4ad445a7d' }, 'placing a new order': { title: 'Placing a New Order', category: 'onboarding', platformUrl: 'https://app.pax8.com/integrations/guides/70ef655d-26b5-4424-a107-b95569dda4e8' }, 'new sale provisioning kick-off': { title: 'New Sale Provisioning Kick-off', category: 'onboarding', platformUrl: 'https://app.pax8.com/integrations/guides/b80fe43a-0cf6-4d10-a8c1-d6d7961429de' }, 'new user onboarding and license assignment': { title: 'New User Onboarding and License Assignment', category: 'onboarding', platformUrl: 'https://app.pax8.com/integrations/guides/ea93289a-8de8-4baa-b127-227ade94f2de' }, 'automated environment documentation': { title: 'Automated Environment Documentation', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/d842a17c-c188-4e65-b6de-f44d8123285f' }, 'compare subscription quantities – pax8 vs. psa': { title: 'Compare Subscription Quantities – Pax8 vs. PSA', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/8bfff511-6201-4709-87e8-f798801c7ab4' }, 'compare subscription quantities - pax8 vs. psa': { title: 'Compare Subscription Quantities – Pax8 vs. PSA', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/8bfff511-6201-4709-87e8-f798801c7ab4' }, 'user offboarding license reclamation': { title: 'User Offboarding License Reclamation', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/17c6558e-5742-4093-80a9-b2efae8d5344' }, 'automated subscription cancellation workflow': { title: 'Automated Subscription Cancellation Workflow', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/5933a650-e34d-474e-a21d-ca613e957322' }, 'monitoring mid-month azure/aws usage': { title: 'Monitoring Mid-Month Azure/AWS Usage', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/e694ff7b-d539-4ed2-ab4d-aa61dc21e54e' }, 'end-of-month invoice reconciliation': { title: 'End-of-Month Invoice Reconciliation', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/9bc43b03-2c4f-40d8-b232-76fa9376fc49' }, 'ai-powered invoice discrepancy monitoring': { title: 'AI-Powered Invoice Discrepancy Monitoring', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/40daebab-497f-4362-89dc-008510dc20e7' }, // --- New guides (April 2026) --- 'sku bundle & dependency advisor': { title: 'SKU Bundle & Dependency Advisor', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/d988360b-2f58-4d26-bcee-255ef8f603c4' }, 'sku bundle & dependency advisor (sales tool)': { title: 'SKU Bundle & Dependency Advisor', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/d988360b-2f58-4d26-bcee-255ef8f603c4' }, 'maintain catalog margins with external system': { title: 'Maintain Catalog Margins with External System', category: 'sales', platformUrl: 'https://app.pax8.com/integrations/guides/498b8d16-d761-4962-aa38-bde97fb63b51' }, 'client onboarding & catalog eligibility gate': { title: 'Client Onboarding & Catalog Eligibility Gate', category: 'onboarding', platformUrl: 'https://app.pax8.com/integrations/guides/3aafc8b4-a528-459f-906f-7d7a053827dd' }, 'actionable alert routing & ticket enrichment': { title: 'Actionable Alert Routing & Ticket Enrichment', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/979de2f8-d717-4df5-938a-f92b88e559a1' }, 'trial-to-paid lifecycle orchestration': { title: 'Trial-to-Paid Lifecycle Orchestration', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/15255c43-d451-4916-8427-62f7d07ee00a' }, 'pax8 \u2194 psa company & subscription id sync': { title: 'Pax8 \u2194 PSA Company & Subscription ID Sync', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/b22e6124-da36-4ab4-b2c7-bd8d9eeedfbd' }, 'pax8 ↔ psa company & subscription id sync': { title: 'Pax8 ↔ PSA Company & Subscription ID Sync', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/b22e6124-da36-4ab4-b2c7-bd8d9eeedfbd' }, 'pax8 <-> psa company & subscription id sync': { title: 'Pax8 ↔ PSA Company & Subscription ID Sync', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/b22e6124-da36-4ab4-b2c7-bd8d9eeedfbd' }, 'commitment flip assistant (monthly \u2194 annual) with impact preview': { title: 'Commitment Flip Assistant (Monthly \u2194 Annual) with Impact Preview', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/96d35227-eb7f-4aa0-afa0-4a0dd6d9e484' }, 'commitment flip assistant (monthly ↔ annual) with impact preview': { title: 'Commitment Flip Assistant (Monthly ↔ Annual) with Impact Preview', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/96d35227-eb7f-4aa0-afa0-4a0dd6d9e484' }, 'commitment flip assistant (monthly <-> annual) with impact preview': { title: 'Commitment Flip Assistant (Monthly ↔ Annual) with Impact Preview', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/96d35227-eb7f-4aa0-afa0-4a0dd6d9e484' }, 'maintain subscription margins with external system': { title: 'Maintain Subscription Margins with External System', category: 'operations', platformUrl: 'https://app.pax8.com/integrations/guides/ff586750-f25e-458f-ba04-f5279952c82e' }, 'spend & usage transparency widgets': { title: 'Spend & Usage Transparency Widgets', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/531925fb-305c-4a3e-bbb1-f7e6137dd941' }, 'subscription changelog creation': { title: 'Subscription Changelog Creation', category: 'financeRisk', platformUrl: 'https://app.pax8.com/integrations/guides/6079ba57-4556-4bd0-adf1-0e58b8917eaa' } }; function isGuidesIndexPage() { const path = window.location.pathname; return /\/recipes\/?$/.test(path) || /\/branches\/[^/]+\/recipes\/?$/.test(path); } function normalizeText(text) { return (text || '') .replace(/\s+/g, ' ') .replace(/^guides?\s*/i, '') .trim() .toLowerCase(); } function replaceUiLabels() { const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); let node; while ((node = walker.nextNode())) { const parent = node.parentElement; if (!parent) continue; const tag = parent.tagName.toUpperCase(); if (tag === 'SCRIPT' || tag === 'STYLE') continue; node.textContent = node.textContent .replace(/\bRecipes\b/g, 'Guides') .replace(/\bRecipe\b/g, 'Guide') .replace(/\bWorkflows\b/g, 'Guides') .replace(/\bWorkflow\b/g, 'Guide'); } } function findGuideGrid() { const grids = Array.from(document.querySelectorAll('ul[class*="TutorialGrid"]')); if (!grids.length) return null; return ( grids.find((grid) => { const cards = Array.from(grid.querySelectorAll(':scope > li[class*="TutorialCard"]')); return cards.length >= 4; }) || null ); } function getCards(grid) { return Array.from(grid.querySelectorAll(':scope > li[class*="TutorialCard"]')); } function findTitleEl(card) { return ( card.querySelector('h2[class*="TutorialCard-Title"]') || card.querySelector('h2') || card.querySelector('h3') ); } function getGuideConfigFromTitle(rawTitle) { return GUIDE_MAP[normalizeText(rawTitle)] || null; } function buildIntroBlock() { const intro = document.createElement('div'); intro.className = 'pax8-guides-intro'; intro.innerHTML = `

Guides

Use these guides to understand common Pax8 integration patterns, then open the full guide in the Pax8 platform for more detailed steps and AI-friendly build flows.

The platform versions are the most complete source for step-by-step implementation guidance.

`; return intro; } function buildCategorySection(categoryKey) { const category = GUIDE_CATEGORIES[categoryKey]; const section = document.createElement('section'); section.className = 'pax8-guides-category'; section.dataset.category = categoryKey; const title = document.createElement('h2'); title.className = 'pax8-guides-category-title'; title.textContent = category.title; const desc = document.createElement('p'); desc.className = 'pax8-guides-category-description'; desc.textContent = category.description; const grid = document.createElement('ul'); grid.className = 'TutorialGrid26plsmAq5mws pax8-guides-grid'; section.appendChild(title); section.appendChild(desc); section.appendChild(grid); return section; } function enhanceGuideCard(card, guideConfig) { if (card.dataset.pax8GuideEnhanced === 'true') return; card.classList.add('pax8-guide-card'); const titleEl = findTitleEl(card); if (titleEl) { titleEl.textContent = guideConfig.title; } const oldFooter = card.querySelector('.pax8-guide-card-footer'); if (oldFooter) oldFooter.remove(); const footer = document.createElement('div'); footer.className = 'pax8-guide-card-footer'; footer.innerHTML = ` Open in Marketplace `; card.appendChild(footer); card.dataset.pax8GuideEnhanced = 'true'; } function injectMarketplaceButtonIntoPopup() { const dialogs = Array.from( document.querySelectorAll('[role="dialog"], .ModalWrapper, [class*="Modal"], [class*="Dialog"]') ); dialogs.forEach((dialog) => { // Hide the Avatar/emoji icon in the popup header const avatars = dialog.querySelectorAll('[class*="Avatar"]'); avatars.forEach((av) => { av.style.display = 'none'; }); const heading = dialog.querySelector('h1') || dialog.querySelector('h2') || dialog.querySelector('h3') || dialog.querySelector('[class*="Title"]'); if (!heading) return; const guideConfig = getGuideConfigFromTitle(heading.textContent); // Check if button already exists const existingLink = dialog.querySelector('.pax8-popup-marketplace-link'); if (!guideConfig) { // No matching guide — remove any stale button from a previous popup if (existingLink) existingLink.closest('.pax8-popup-marketplace-cta-wrap').remove(); return; } if (existingLink) { // Button exists — update its URL to match the current guide existingLink.href = guideConfig.platformUrl; return; } // No button yet — create and insert it const wrap = document.createElement('div'); wrap.className = 'pax8-popup-marketplace-cta-wrap'; wrap.innerHTML = ` `; // Place after the subtitle/description if one exists, // otherwise after the heading. const headerParent = heading.parentElement; const description = headerParent.querySelector('p, [class*="description"], [class*="Description"]'); const anchor = description || heading; if (anchor.nextSibling) { anchor.parentElement.insertBefore(wrap, anchor.nextSibling); } else { anchor.parentElement.appendChild(wrap); } }); } function buildGuidesLanding() { const originalGrid = findGuideGrid(); if (!originalGrid) return false; if (document.querySelector('.pax8-guides-main-container')) { return true; } const cards = getCards(originalGrid); if (!cards.length) return false; const categorized = { sales: [], onboarding: [], operations: [], financeRisk: [] }; let matchedCount = 0; cards.forEach((card) => { const titleEl = findTitleEl(card); const normalizedTitle = normalizeText(titleEl ? titleEl.textContent : ''); const guideConfig = GUIDE_MAP[normalizedTitle]; if (!guideConfig) return; enhanceGuideCard(card, guideConfig); categorized[guideConfig.category].push(card); matchedCount += 1; }); if (matchedCount === 0) return false; const main = document.createElement('div'); main.className = 'pax8-guides-main-container'; main.appendChild(buildIntroBlock()); CATEGORY_ORDER.forEach((categoryKey) => { if (!categorized[categoryKey].length) return; const section = buildCategorySection(categoryKey); const grid = section.querySelector('.pax8-guides-grid'); categorized[categoryKey].forEach((card) => { grid.appendChild(card); }); main.appendChild(section); }); originalGrid.replaceWith(main); return true; } function hideFeaturedGuideAboveCustomIntro() { const guidesMain = document.querySelector('.pax8-guides-main-container'); if (!guidesMain) return; // Hide every sibling above the custom container — // this catches the ReadMe h1, the featured recipe tile, and any // other chrome that ReadMe inserts before the grid. let prev = guidesMain.previousElementSibling; while (prev) { prev.style.display = 'none'; prev = prev.previousElementSibling; } } let popupObserverStarted = false; function initPopupObserver() { if (popupObserverStarted) return; popupObserverStarted = true; const observer = new MutationObserver(() => { injectMarketplaceButtonIntoPopup(); }); observer.observe(document.body, { childList: true, subtree: true }); injectMarketplaceButtonIntoPopup(); } function run(attempt = 1) { replaceUiLabels(); if (isGuidesIndexPage()) { const built = buildGuidesLanding(); if (built) { hideFeaturedGuideAboveCustomIntro(); } } initPopupObserver(); if (attempt < MAX_ATTEMPTS) { setTimeout(() => run(attempt + 1), DELAY_MS); } } run(); });