@empline/preflight 1.1.0

package/dist/checks/integrations/integration-status-display.js

@@ -0,0 +1,945 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Integration Status Display Preflight
+ *
+ * Ensures integrations have proper status display infrastructure:
+ * 1. API endpoint to fetch all integration statuses for a store
+ * 2. Integrations list page shows connected status and last sync
+ * 3. Each integration shows management view when connected
+ *
+ * These three elements are imperative for a consistent user experience.
+ *
+ * Usage:
+ *   pnpm preflight:integration-status-display
+ *   pnpm preflight:integration-status-display --verbose
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requires = exports.tags = exports.blocking = exports.category = exports.description = exports.name = exports.id = void 0;
+exports.run = run;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+// METADATA
+exports.id = "integrations/integration-status-display";
+exports.name = "Integration Status Display";
+exports.description = "Validates integration status display infrastructure";
+exports.category = "integrations";
+exports.blocking = true;
+exports.tags = ["integrations", "status", "ui", "management"];
+exports.requires = ["trading-card-system"];
+// Integrations that are NOT marketplace integrations (don't need management view pattern)
+// These are utility/infrastructure integrations with different UX patterns
+const EXCLUDED_INTEGRATIONS = new Set([
+    "api", // API key management - different pattern
+    "csv", // CSV import - one-time action, no connection state
+    "reconcile", // Reconciliation tool - different pattern
+    "rest-api", // REST API config - different pattern
+    "webhook", // Webhook config - different pattern
+    "shippo", // Shipping provider - different pattern
+    "shipstation", // Shipping provider - different pattern
+]);
+/**
+ * Auto-discover marketplace integrations by scanning the integrations directory
+ * for folders containing *IntegrationClient.tsx or *Client.tsx files
+ */
+function discoverIntegrations() {
+    const integrationsDir = path.join(process.cwd(), "app/store/integrations");
+    const integrations = [];
+    if (!fs.existsSync(integrationsDir)) {
+        return integrations;
+    }
+    const folders = fs.readdirSync(integrationsDir, { withFileTypes: true })
+        .filter(dirent => dirent.isDirectory())
+        .map(dirent => dirent.name);
+    for (const folder of folders) {
+        // Skip excluded integrations
+        if (EXCLUDED_INTEGRATIONS.has(folder)) {
+            continue;
+        }
+        const folderPath = path.join(integrationsDir, folder);
+        const files = fs.readdirSync(folderPath);
+        // Look for *IntegrationClient.tsx or *Client.tsx files
+        const clientFile = files.find(f => (f.endsWith("IntegrationClient.tsx") || f.endsWith("Client.tsx")) &&
+            !f.startsWith("."));
+        if (clientFile) {
+            // Convert folder name to display name (e.g., "tiktok-shop" -> "TikTok Shop")
+            const displayName = folder
+                .split("-")
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(" ");
+            integrations.push({
+                name: displayName,
+                slug: folder,
+                clientFile: `app/store/integrations/${folder}/${clientFile}`,
+                apiBasePath: `app/api/store/integrations/${folder}`,
+            });
+        }
+    }
+    return integrations;
+}
+class IntegrationStatusDisplayPreflight {
+    verbose;
+    integrations;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.integrations = discoverIntegrations();
+    }
+    fileExists(filePath) {
+        return fs.existsSync(path.join(process.cwd(), filePath));
+    }
+    readFile(filePath) {
+        const fullPath = path.join(process.cwd(), filePath);
+        if (!fs.existsSync(fullPath))
+            return null;
+        return fs.readFileSync(fullPath, "utf-8");
+    }
+    /**
+     * Check 1: API endpoint to fetch all integration statuses
+     */
+    checkStatusApiEndpoint() {
+        const result = {
+            name: "Integration Status API Endpoint",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const statusRoutePath = "app/api/store/integrations/status/route.ts";
+        if (!this.fileExists(statusRoutePath)) {
+            result.errors.push(`Missing: ${statusRoutePath}`);
+            result.errors.push("Need API endpoint to fetch all integration statuses for a store");
+            return result;
+        }
+        const content = this.readFile(statusRoutePath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${statusRoutePath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            { pattern: /export async function GET/i, desc: "GET handler" },
+            { pattern: /jobsIntegration|integrations/i, desc: "Integration query" },
+            { pattern: /enabled|status/i, desc: "Enabled/status field" },
+            { pattern: /lastSync/i, desc: "Last sync timestamp" },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} Has ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing ${desc} in status API`);
+            }
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 2: Integrations list page shows connected status
+     */
+    checkIntegrationsListPage() {
+        const result = {
+            name: "Integrations List Page Status Display",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const listPagePath = "app/store/integrations/page.tsx";
+        if (!this.fileExists(listPagePath)) {
+            result.errors.push(`Missing: ${listPagePath}`);
+            return result;
+        }
+        const content = this.readFile(listPagePath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${listPagePath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            {
+                pattern: /\/api\/store\/integrations\/status|integrationStatuses|IntegrationStatus/i,
+                desc: "Fetches integration statuses"
+            },
+            {
+                pattern: /IntegrationStatusBadge|CheckCircle.*enabled|connected.*indicator/i,
+                desc: "Shows connected indicator"
+            },
+            {
+                pattern: /lastSync|last.*sync/i,
+                desc: "Shows last sync time"
+            },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing: ${desc}`);
+            }
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 3: Integration pages show management view when connected
+     */
+    checkManagementViews() {
+        const result = {
+            name: "Integration Management Views",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            // Skip if client file doesn't exist (integration not implemented)
+            if (!this.fileExists(integration.clientFile)) {
+                result.details.push(`${console_chars_1.emoji.info} ${integration.name}: Not implemented yet (skipped)`);
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                result.errors.push(`${integration.name}: Cannot read ${integration.clientFile}`);
+                result.passed = false;
+                continue;
+            }
+            // Check for management view patterns
+            const hasManagementView = /IntegrationManagementView|management.*view|viewMode.*management/i.test(content) ||
+                /enabled.*\?.*management|connected.*\?.*dashboard/i.test(content) ||
+                // Alternative: Check for conditional rendering based on enabled state
+                (/config\.enabled|integration\.enabled/i.test(content) &&
+                    /sync.*inventory|sync.*prices|disconnect/i.test(content));
+            const hasViewModeToggle = /viewMode|setViewMode|wizard.*management/i.test(content) ||
+                /showWizard|showManagement|isConnected/i.test(content);
+            if (hasManagementView || hasViewModeToggle) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Has management view`);
+            }
+            else {
+                result.errors.push(`${integration.name}: Missing management view when connected. ` +
+                    `Should show sync actions, stats, and settings instead of setup wizard.`);
+                result.passed = false;
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 4: IntegrationStatusBadge component exists
+     */
+    checkStatusBadgeComponent() {
+        const result = {
+            name: "IntegrationStatusBadge Component",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const badgePath = "components/shared/integration/IntegrationStatusBadge.tsx";
+        if (!this.fileExists(badgePath)) {
+            result.errors.push(`Missing: ${badgePath}`);
+            result.errors.push("Need shared component to display integration status consistently");
+            return result;
+        }
+        const content = this.readFile(badgePath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${badgePath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            { pattern: /enabled.*boolean/i, desc: "enabled prop" },
+            { pattern: /lastSync/i, desc: "lastSync prop" },
+            { pattern: /CheckCircle|check.*icon/i, desc: "Connected indicator icon" },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} Has ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing ${desc} in status badge`);
+            }
+        }
+        // Check it's exported from index
+        const indexPath = "components/shared/integration/index.ts";
+        const indexContent = this.readFile(indexPath);
+        if (indexContent && /IntegrationStatusBadge/i.test(indexContent)) {
+            result.details.push(`${console_chars_1.emoji.success} Exported from index`);
+        }
+        else {
+            result.errors.push("IntegrationStatusBadge not exported from index.ts");
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 5: IntegrationManagementView component exists
+     */
+    checkManagementViewComponent() {
+        const result = {
+            name: "IntegrationManagementView Component",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const viewPath = "components/shared/integration/IntegrationManagementView.tsx";
+        if (!this.fileExists(viewPath)) {
+            result.errors.push(`Missing: ${viewPath}`);
+            result.errors.push("Need shared component for integration management dashboard");
+            return result;
+        }
+        const content = this.readFile(viewPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${viewPath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            { pattern: /onSyncInventory|syncInventory/i, desc: "Sync inventory action" },
+            { pattern: /onSyncPrices|syncPrices/i, desc: "Sync prices action" },
+            { pattern: /onDisconnect|disconnect/i, desc: "Disconnect action" },
+            { pattern: /lastSync/i, desc: "Last sync display" },
+            { pattern: /stats|statistics/i, desc: "Statistics display" },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} Has ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing ${desc} in management view`);
+            }
+        }
+        // Check it's exported from index
+        const indexPath = "components/shared/integration/index.ts";
+        const indexContent = this.readFile(indexPath);
+        if (indexContent && /IntegrationManagementView/i.test(indexContent)) {
+            result.details.push(`${console_chars_1.emoji.success} Exported from index`);
+        }
+        else {
+            result.errors.push("IntegrationManagementView not exported from index.ts");
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 6: Integration pages have loading state (no flash of wizard)
+     */
+    checkLoadingState() {
+        const result = {
+            name: "Integration Loading State",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            // Skip if client file doesn't exist
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check for loading state that prevents flash of wizard before data loads
+            const hasLoadingState = /isInitialLoading|initialLoading|isLoadingConfig/i.test(content) ||
+                // Check for conditional render that waits for data
+                (/useState.*null|useState.*undefined/i.test(content) &&
+                    /if\s*\(\s*!.*\)\s*return|loading.*skeleton|CircularProgress/i.test(content));
+            if (hasLoadingState) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Has loading state`);
+            }
+            else {
+                result.errors.push(`${integration.name}: Missing loading state. ` +
+                    `Should not show wizard before checking if already connected.`);
+                result.passed = false;
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 7: Buttons are inside cards (no lingering buttons)
+     */
+    checkButtonsInCards() {
+        const result = {
+            name: "Buttons Inside Cards",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            // Skip if client file doesn't exist
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check for buttons outside of cards in management view section
+            // Pattern: viewMode === "management" followed by Box with Button but no Card wrapper
+            const managementViewMatch = content.match(/viewMode\s*===?\s*["']management["'].*?(?=viewMode|$)/s);
+            if (managementViewMatch) {
+                const managementSection = managementViewMatch[0];
+                // Check for standalone buttons outside cards
+                // Bad pattern: <Box className="flex justify-end"><Button...
+                // Good pattern: <Card>...<Button... or IntegrationManagementView (which has cards)
+                const hasStandaloneButtons = /<Box[^>]*className[^>]*flex[^>]*justify-end[^>]*>\s*<Button/i.test(managementSection) &&
+                    !/<Card[^>]*>[\s\S]*?<Box[^>]*className[^>]*flex[^>]*justify-end[^>]*>\s*<Button/i.test(managementSection);
+                // Also check if using IntegrationManagementView (which properly contains buttons in cards)
+                const usesManagementView = /IntegrationManagementView/i.test(managementSection);
+                if (hasStandaloneButtons && !usesManagementView) {
+                    result.errors.push(`${integration.name}: Has buttons outside of cards in management view. ` +
+                        `All buttons must be inside Card components.`);
+                    result.passed = false;
+                }
+                else {
+                    result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Buttons properly contained`);
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 8: Settings mode hides stepper (no full wizard shown for settings)
+     */
+    checkSettingsModeNoStepper() {
+        const result = {
+            name: "Settings Mode Hides Stepper",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            // Skip if client file doesn't exist
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check if integration has settings mode handling
+            const hasSettingsMode = /wizardMode.*settings|settingsMode|isSettingsView/i.test(content);
+            const hasConditionalStepper = /wizardMode\s*!==?\s*["']settings["'].*IntegrationStepper/is.test(content) ||
+                /settings.*\?.*null.*:.*Stepper/i.test(content) ||
+                // Or doesn't show stepper at all in settings
+                !(/onSettings.*setActiveStep\(0\)/i.test(content) && /IntegrationStepper/i.test(content));
+            // If integration has onSettings that goes to step 0, it should hide stepper
+            const hasOnSettingsToStep0 = /onSettings.*setActiveStep\(0\)|handleOpenSettings/i.test(content);
+            if (hasOnSettingsToStep0) {
+                if (hasSettingsMode || hasConditionalStepper) {
+                    result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Settings mode properly handled`);
+                }
+                else {
+                    result.errors.push(`${integration.name}: Settings mode should hide stepper. ` +
+                        `Full wizard stepper should not be shown when editing settings.`);
+                    result.passed = false;
+                }
+            }
+            else {
+                result.details.push(`${console_chars_1.emoji.info} ${integration.name}: No settings mode (skipped)`);
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 9: IntegrationManagementView has hasImportedProducts prop for disabling sync buttons
+     */
+    checkSyncButtonsDisabledWithoutProducts() {
+        const result = {
+            name: "Sync Buttons Disabled Without Products",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const viewPath = "components/shared/integration/IntegrationManagementView.tsx";
+        const content = this.readFile(viewPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${viewPath}`);
+            return result;
+        }
+        // Check for hasImportedProducts prop
+        const hasImportedProductsProp = /hasImportedProducts/i.test(content);
+        // Check that sync buttons are disabled when no products
+        const syncButtonsDisabled = /disabled=\{.*\|\|.*!hasImportedProducts/i.test(content) ||
+            /disabled=\{.*!hasImportedProducts/i.test(content);
+        // Check for helper text when no products
+        const hasHelperText = /Import products first/i.test(content);
+        if (hasImportedProductsProp) {
+            result.details.push(`${console_chars_1.emoji.success} Has hasImportedProducts prop`);
+        }
+        else {
+            result.errors.push("Missing hasImportedProducts prop");
+        }
+        if (syncButtonsDisabled) {
+            result.details.push(`${console_chars_1.emoji.success} Sync buttons disabled when no products`);
+        }
+        else {
+            result.errors.push("Sync buttons should be disabled when hasImportedProducts is false");
+        }
+        if (hasHelperText) {
+            result.details.push(`${console_chars_1.emoji.success} Has helper text for disabled state`);
+        }
+        else {
+            result.errors.push("Should show helper text explaining why buttons are disabled");
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 10: Store Connection step has required buttons (Test, Save/Connect, Back)
+     */
+    checkStoreConnectionButtons() {
+        const result = {
+            name: "Store Connection Required Buttons",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            // Skip if client file doesn't exist
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check for Test Connection button
+            const hasTestConnection = /Test.*Connection|handleTestConnection|testConnection/i.test(content);
+            // Check for Save/Connect button (after successful test)
+            const hasSaveOrConnect = /Save.*Connection|Connect.*Store|handleConnect|saveIntegrationConfig/i.test(content);
+            // Check for Back button in settings mode (to return to dashboard)
+            const hasBackButton = /Back.*Dashboard|← Back|handleBack|setViewMode.*management/i.test(content);
+            if (hasTestConnection) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Has Test Connection`);
+            }
+            else {
+                result.errors.push(`${integration.name}: Missing Test Connection button`);
+                result.passed = false;
+            }
+            if (hasSaveOrConnect) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Has Save/Connect`);
+            }
+            else {
+                result.errors.push(`${integration.name}: Missing Save/Connect button`);
+                result.passed = false;
+            }
+            if (hasBackButton) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Has Back button`);
+            }
+            else {
+                result.errors.push(`${integration.name}: Missing Back to Dashboard button in settings`);
+                result.passed = false;
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 11: Button icon spacing (gap between icon and text)
+     */
+    checkButtonIconSpacing() {
+        const result = {
+            name: "Button Icon Spacing",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const viewPath = "components/shared/integration/IntegrationManagementView.tsx";
+        const content = this.readFile(viewPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${viewPath}`);
+            return result;
+        }
+        // Check for proper gap in flex-col buttons (gap-2 or higher for vertical layout)
+        const hasProperGap = /flex-col\s+gap-2|flex-col\s+gap-3|flex-col\s+gap-4/i.test(content);
+        // Check that startIcon buttons have proper spacing (handled by Button component)
+        const usesStartIcon = /startIcon=/i.test(content);
+        if (hasProperGap) {
+            result.details.push(`${console_chars_1.emoji.success} Vertical buttons have proper gap spacing`);
+        }
+        else {
+            result.errors.push("Vertical buttons should use gap-2 or higher for icon spacing");
+        }
+        if (usesStartIcon) {
+            result.details.push(`${console_chars_1.emoji.success} Uses startIcon prop for horizontal buttons`);
+        }
+        result.passed = hasProperGap;
+        return result;
+    }
+    /**
+     * Check 12: IntegrationCard shared component exists and is used
+     */
+    checkIntegrationCardComponent() {
+        const result = {
+            name: "IntegrationCard Shared Component",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const cardPath = "components/shared/integration/IntegrationCard.tsx";
+        if (!this.fileExists(cardPath)) {
+            result.errors.push(`Missing: ${cardPath}`);
+            result.errors.push("Need shared IntegrationCard component for consistent integration listings");
+            return result;
+        }
+        const content = this.readFile(cardPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${cardPath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            { pattern: /MarketplaceLogo/i, desc: "Uses MarketplaceLogo" },
+            { pattern: /IntegrationStatusBadge/i, desc: "Uses IntegrationStatusBadge" },
+            { pattern: /syncCapabilities|SyncCapability/i, desc: "Supports sync capabilities" },
+            { pattern: /onClick/i, desc: "Has click handler" },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing: ${desc}`);
+            }
+        }
+        // Check it's exported from index
+        const indexPath = "components/shared/integration/index.ts";
+        const indexContent = this.readFile(indexPath);
+        if (indexContent && /IntegrationCard/i.test(indexContent)) {
+            result.details.push(`${console_chars_1.emoji.success} Exported from index`);
+        }
+        else {
+            result.errors.push("IntegrationCard not exported from index.ts");
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 13: Integrations list page uses IntegrationCard (not inline cards)
+     */
+    checkIntegrationsListUsesSharedCard() {
+        const result = {
+            name: "Integrations List Uses Shared Card",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const listPagePath = "app/store/integrations/page.tsx";
+        const content = this.readFile(listPagePath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${listPagePath}`);
+            return result;
+        }
+        // Check if using IntegrationCard component
+        const usesIntegrationCard = /import.*IntegrationCard.*from.*@\/components\/shared\/integration/i.test(content) ||
+            /<IntegrationCard\s/i.test(content);
+        // Check for inline card patterns (bad)
+        const hasInlineCardPattern = /className=\{`group cursor-pointer.*rounded-\[var\(--radius-lg\)\].*border.*bg-\[var\(--bg-primary\)\]/i.test(content) ||
+            /className="group cursor-pointer.*rounded.*border.*bg-\[var/i.test(content);
+        if (usesIntegrationCard) {
+            result.details.push(`${console_chars_1.emoji.success} Uses IntegrationCard shared component`);
+            result.passed = true;
+        }
+        else if (hasInlineCardPattern) {
+            result.errors.push("Integrations list page has inline card patterns. " +
+                "Use IntegrationCard from @/components/shared/integration instead.");
+            result.errors.push("Import: import { IntegrationCard } from '@/components/shared/integration';");
+        }
+        else {
+            result.errors.push("Could not determine card pattern - verify IntegrationCard is used");
+        }
+        return result;
+    }
+    /**
+     * Check 14: FeatureSelectionCard shared component exists
+     */
+    checkFeatureSelectionCardComponent() {
+        const result = {
+            name: "FeatureSelectionCard Shared Component",
+            passed: false,
+            details: [],
+            errors: [],
+        };
+        const cardPath = "components/shared/integration/FeatureSelectionCard.tsx";
+        if (!this.fileExists(cardPath)) {
+            result.errors.push(`Missing: ${cardPath}`);
+            result.errors.push("Need shared FeatureSelectionCard for consistent feature selection UI");
+            return result;
+        }
+        const content = this.readFile(cardPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${cardPath}`);
+            return result;
+        }
+        // Check for required patterns
+        const requiredPatterns = [
+            { pattern: /Checkbox/i, desc: "Uses Checkbox" },
+            { pattern: /selected.*boolean|checked/i, desc: "Has selected state" },
+            { pattern: /onChange/i, desc: "Has change handler" },
+            { pattern: /cursor-pointer/i, desc: "Has clickable styling" },
+        ];
+        for (const { pattern, desc } of requiredPatterns) {
+            if (pattern.test(content)) {
+                result.details.push(`${console_chars_1.emoji.success} ${desc}`);
+            }
+            else {
+                result.errors.push(`Missing: ${desc}`);
+            }
+        }
+        // Check it's exported from index
+        const indexPath = "components/shared/integration/index.ts";
+        const indexContent = this.readFile(indexPath);
+        if (indexContent && /FeatureSelectionCard/i.test(indexContent)) {
+            result.details.push(`${console_chars_1.emoji.success} Exported from index`);
+        }
+        else {
+            result.errors.push("FeatureSelectionCard not exported from index.ts");
+        }
+        result.passed = result.errors.length === 0;
+        return result;
+    }
+    /**
+     * Check 15: Integration wizards use FeatureSelectionCard (not inline cards)
+     */
+    checkWizardsUseFeatureSelectionCard() {
+        const result = {
+            name: "Wizards Use FeatureSelectionCard",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check for inline feature selection card pattern (bad)
+            // Pattern: Card with cursor-pointer + Checkbox inside
+            const hasInlineFeatureCard = /<Card[^>]*className[^>]*cursor-pointer[^>]*>[\s\S]*?<Checkbox[\s\S]*?<\/Card>/i.test(content) ||
+                /Card.*cursor-pointer.*transition-all.*border-primary.*ring-primary/i.test(content);
+            // Check if using FeatureSelectionCard (good)
+            const usesFeatureSelectionCard = /import.*FeatureSelectionCard.*from.*@\/components\/shared\/integration/i.test(content) ||
+                /<FeatureSelectionCard\s/i.test(content);
+            if (hasInlineFeatureCard && !usesFeatureSelectionCard) {
+                result.errors.push(`${integration.name}: Has inline feature selection cards. ` +
+                    `Use FeatureSelectionCard from @/components/shared/integration instead.`);
+                result.passed = false;
+            }
+            else if (usesFeatureSelectionCard) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Uses FeatureSelectionCard`);
+            }
+            else {
+                result.details.push(`${console_chars_1.emoji.info} ${integration.name}: No feature selection cards`);
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 16: Connected integrations use IntegrationManagementView
+     */
+    checkUsesIntegrationManagementView() {
+        const result = {
+            name: "Uses IntegrationManagementView",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        for (const integration of this.integrations) {
+            if (!this.fileExists(integration.clientFile)) {
+                continue;
+            }
+            const content = this.readFile(integration.clientFile);
+            if (!content) {
+                continue;
+            }
+            // Check if using IntegrationManagementView (good)
+            const usesManagementView = /import.*IntegrationManagementView.*from.*@\/components\/shared\/integration/i.test(content) ||
+                /<IntegrationManagementView\s/i.test(content);
+            // Check for inline dashboard patterns (bad) - stat cards built inline
+            const hasInlineDashboard = /renderDashboard|function.*Dashboard/i.test(content) &&
+                !usesManagementView;
+            // Check for inline stat cards (bad pattern)
+            const hasInlineStatCards = /<Card>[\s\S]*?<CardContent>[\s\S]*?variant="h4"[\s\S]*?Total Listings|Pending Orders|Synced Orders/i.test(content) &&
+                !usesManagementView;
+            if (usesManagementView) {
+                result.details.push(`${console_chars_1.emoji.success} ${integration.name}: Uses IntegrationManagementView`);
+            }
+            else if (hasInlineDashboard || hasInlineStatCards) {
+                result.errors.push(`${integration.name}: Has inline dashboard/stat cards. ` +
+                    `Use IntegrationManagementView from @/components/shared/integration instead.`);
+                result.passed = false;
+            }
+            else {
+                result.details.push(`${console_chars_1.emoji.info} ${integration.name}: No management dashboard`);
+            }
+        }
+        return result;
+    }
+    /**
+     * Check 17: No "Quick Actions" label (should be just "Actions" or "Sync Actions")
+     */
+    checkNoQuickActionsLabel() {
+        const result = {
+            name: "No 'Quick Actions' Label",
+            passed: true,
+            details: [],
+            errors: [],
+        };
+        // Check the shared component
+        const viewPath = "components/shared/integration/IntegrationManagementView.tsx";
+        const content = this.readFile(viewPath);
+        if (!content) {
+            result.errors.push(`Cannot read: ${viewPath}`);
+            return result;
+        }
+        // Check for "Quick Actions" (bad - should be just "Actions" or "Sync Actions")
+        if (/Quick Actions/i.test(content)) {
+            result.errors.push(`IntegrationManagementView uses "Quick Actions" label. ` +
+                `Should be "Actions" or "Sync Actions" - they're not particularly quick.`);
+            result.passed = false;
+        }
+        else {
+            result.details.push(`${console_chars_1.emoji.success} Uses appropriate action label`);
+        }
+        return result;
+    }
+    async run() {
+        const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(exports.name);
+        console.log((0, console_chars_1.createDivider)(60, "heavy"));
+        console.log("  Integration Status Display");
+        console.log((0, console_chars_1.createDivider)(60, "heavy"));
+        console.log();
+        console.log("  Validates integration UX requirements:");
+        console.log("  1. API endpoint to fetch all integration statuses");
+        console.log("  2. Integrations list shows connected status & last sync");
+        console.log("  3. Integration pages show management view when connected");
+        console.log("  4. Loading state prevents flash of wizard before data loads");
+        console.log("  5. All buttons must be inside Card components");
+        console.log("  6. Settings mode hides stepper (no full wizard shown)");
+        console.log("  7. Sync buttons disabled until products imported");
+        console.log("  8. Store Connection has Test, Save, and Back buttons");
+        console.log("  9. Button icons have proper spacing");
+        console.log("  10. IntegrationCard shared component exists");
+        console.log("  11. Integrations list uses IntegrationCard (not inline)");
+        console.log("  12. FeatureSelectionCard shared component exists");
+        console.log("  13. Wizards use FeatureSelectionCard (not inline)");
+        console.log("  14. Connected integrations use IntegrationManagementView");
+        console.log("  15. No 'Quick Actions' label (use 'Actions' instead)");
+        console.log();
+        const results = [];
+        let allPassed = true;
+        // Run all checks
+        const checks = [
+            this.checkStatusApiEndpoint(),
+            this.checkStatusBadgeComponent(),
+            this.checkManagementViewComponent(),
+            this.checkIntegrationsListPage(),
+            this.checkManagementViews(),
+            this.checkLoadingState(),
+            this.checkButtonsInCards(),
+            this.checkSettingsModeNoStepper(),
+            this.checkSyncButtonsDisabledWithoutProducts(),
+            this.checkStoreConnectionButtons(),
+            this.checkButtonIconSpacing(),
+            this.checkIntegrationCardComponent(),
+            this.checkIntegrationsListUsesSharedCard(),
+            this.checkFeatureSelectionCardComponent(),
+            this.checkWizardsUseFeatureSelectionCard(),
+            this.checkUsesIntegrationManagementView(),
+            this.checkNoQuickActionsLabel(),
+        ];
+        for (const result of checks) {
+            results.push(result);
+            if (!result.passed) {
+                allPassed = false;
+            }
+            // Print result
+            const status = result.passed ? `${console_chars_1.emoji.success} PASS` : `${console_chars_1.emoji.error} FAIL`;
+            console.log(`  ${status} ${result.name}`);
+            if (this.verbose && result.details.length > 0) {
+                for (const detail of result.details) {
+                    console.log(`    ${detail}`);
+                }
+            }
+            if (result.errors.length > 0) {
+                for (const error of result.errors) {
+                    console.log(`    ${console_chars_1.emoji.error} ${error}`);
+                }
+            }
+            console.log();
+        }
+        console.log((0, console_chars_1.createDivider)(60, "light"));
+        console.log("  Summary");
+        console.log((0, console_chars_1.createDivider)(60, "light"));
+        if (!allPassed) {
+            console.log(`${console_chars_1.emoji.error} Integration status display requirements not met!`);
+            console.log();
+            console.log(`${console_chars_1.emoji.info} Required infrastructure:`);
+            console.log(`   1. app/api/store/integrations/status/route.ts - Status API`);
+            console.log(`   2. components/shared/integration/IntegrationStatusBadge.tsx`);
+            console.log(`   3. components/shared/integration/IntegrationManagementView.tsx`);
+            console.log(`   4. components/shared/integration/IntegrationCard.tsx`);
+            console.log(`   5. components/shared/integration/FeatureSelectionCard.tsx`);
+            console.log(`   6. Integrations list page must use IntegrationCard`);
+            console.log(`   7. Integration wizards must use FeatureSelectionCard`);
+            console.log(`   8. Loading state to prevent flash of wizard before data loads`);
+            console.log(`   9. All buttons must be inside Card components (no lingering buttons)`);
+            console.log();
+        }
+        else {
+            console.log(`${console_chars_1.emoji.success} All integration status display requirements met!`);
+        }
+        return { passed: allPassed, results };
+    }
+}
+// Export run function for framework compatibility
+async function run() {
+    const args = process.argv.slice(2);
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const preflight = new IntegrationStatusDisplayPreflight({ verbose });
+    const { passed } = await preflight.run();
+    return passed;
+}
+// Allow direct execution
+if (require.main === module) {
+    run().then((passed) => {
+        process.exit(passed ? 0 : 1);
+    }).catch((error) => {
+        console.error("Preflight error:", error);
+        process.exit(1);
+    });
+}
+//# sourceMappingURL=integration-status-display.js.map