import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"; import { useLoaderData, Form, useActionData, useSubmit, useNavigation, useRouteError, useNavigate } from "react-router"; import { Page, Layout, Card, Text, BlockStack, InlineGrid, Badge, Banner, Button, Box, ProgressBar, TextField, Select, Checkbox, Tag, Divider, Modal, } from "@shopify/polaris"; import { registerShop } from "../services/shop.server"; import { syncStoreCatalog } from "../services/catalog.server"; import { BillingService } from "../services/billing.server"; import { SubscriptionService } from "../services/subscription.server"; import { PLAN_CONFIGS, canUseFeature } from "../lib/billing-plans"; import { getSaaSKPIMetrics, getInstalledStores, getStoreDetails, exportStoresCSV } from "../services/admin.server"; import { getDynamicAIProviders, validateAndSanitizeAIModel, maskApiKey, type AIModelDefinition, type AIProviderDefinition } from "../services/ai-config.server"; import { encryptToken } from "../lib/security/encryption"; import { createNotification } from "../services/notification.server"; import type { PlanTier } from "@prisma/client"; import prisma from "../db.server"; import { useState, useEffect } from "react"; import { createPortal } from "react-dom"; import { FAIcon } from "../components/FAIcon"; import { parseWidgetSettings, serializeWidgetSettings } from "../services/widget-settings.server"; import { DEFAULT_WIDGET_TEXTS, type WidgetCustomTexts } from "../lib/widget-text-defaults"; import { resolveShopDomainFromRequest } from "../lib/security/tenant-context"; export const headers = () => { return { "X-Frame-Options": "ALLOWALL", "Content-Security-Policy": "frame-ancestors https://admin.shopify.com https://*.myshopify.com;", }; }; export const loader = async ({ request }: LoaderFunctionArgs) => { const shopDomain = resolveShopDomainFromRequest(request); const url = new URL(request.url); const search = url.searchParams.get("search") || ""; const planFilter = url.searchParams.get("planFilter") || "ALL"; const statusFilter = url.searchParams.get("statusFilter") || "ALL"; const sortBy = url.searchParams.get("sortBy") || "newest"; const selectedStoreId = url.searchParams.get("storeId") || ""; try { const shop = await registerShop({ shopifyDomain: shopDomain, accessToken: "shpss_sample_token", scopes: "read_products,read_content", }); const settings = await prisma.chatbotSettings.findUnique({ where: { shopId: shop.id }, }); const planInfo = await BillingService.getActiveSubscription(shop.shopifyDomain); const conversationCount = await prisma.chatSession.count({ where: { shopId: shop.id }, }).catch(() => 0); const totalRevenue = await prisma.chatSession.aggregate({ where: { shopId: shop.id, assistedSale: true }, _sum: { revenueValue: true }, }).catch(() => ({ _sum: { revenueValue: null } })); const productCount = await prisma.productCache.count({ where: { shopId: shop.id }, }).catch(() => 0); const { cleanupLegacyDummyData } = await import("../services/article.server"); await cleanupLegacyDummyData(shop.id); const articleCount = await prisma.articleCache.count({ where: { shopId: shop.id }, }).catch(() => 0); const storeArticles = await prisma.articleCache.findMany({ where: { shopId: shop.id }, orderBy: { publishedAt: "desc" }, take: 20, }).catch(() => []); const knowledgeItems = await prisma.knowledgeBase.findMany({ where: { shopId: shop.id }, orderBy: { createdAt: "desc" }, }).catch(() => []); const dynamicProviders = getDynamicAIProviders(); const modelsByProvider: Record = {}; dynamicProviders.forEach((p) => { modelsByProvider[p.id] = p.models; }); const billingSummary = await SubscriptionService.getBillingSummary(shop.id).catch(() => null); const { systemPromptText, widgetTexts } = parseWidgetSettings(settings); const isChatbotAdminDisabled = widgetTexts.adminDisabled === true; const { getPlansDictionary, getActivePlans } = await import("../services/plan-config.server"); const { getActiveHelplines } = await import("../services/helpline-config.server"); const { StoreIntelligenceService } = await import("../services/store-intelligence.server"); const storeProfile = await StoreIntelligenceService.getStoreProfile(shop.id, shop.shopifyDomain).catch(() => null); const themeContext = await StoreIntelligenceService.getThemeContext(shop.id, shop.shopifyDomain).catch(() => null); const plans = await getPlansDictionary().catch(() => PLAN_CONFIGS); const activePlansList = await getActivePlans().catch(() => []); const activeHelplines = await getActiveHelplines().catch(() => []); // Strict boolean resolution: enabled is true ONLY IF settings.enabled is explicitly true AND not adminDisabled const isEnabled = isChatbotAdminDisabled ? false : (settings?.enabled === true); return { shop: shop.shopifyDomain, storeId: shop.id, storeProfile, themeContext, botName: widgetTexts.botName || settings?.botName || "ShopPilot AI Assistant", welcomeMessage: settings?.welcomeMessage || "Hi! How can I help you find products, calculate shipping, or track orders today?", systemPrompt: systemPromptText, widgetTexts, primaryColor: settings?.primaryColor || "#4F46E5", secondaryColor: settings?.secondaryColor || "#4338CA", textColor: settings?.textColor || "#FFFFFF", botTextColor: settings?.botTextColor || "#1F2937", showPoweredBy: settings?.showPoweredBy ?? true, aiProvider: settings?.aiProvider || "openai", model: settings?.model || "gpt-4o-mini", openaiApiKeyMasked: maskApiKey(settings?.openaiApiKey), geminiApiKeyMasked: maskApiKey(settings?.geminiApiKey), temperature: settings?.temperature ?? 0.7, position: settings?.position || "bottom-right", isEnabled, isChatbotAdminDisabled, planTier: planInfo.plan, planInfo, pricingPlansUrl: planInfo.pricingPlansUrl, billingSummary, conversationCount, productCount, articleCount, articles: storeArticles.map((a) => { const rawUrl = a.url || `/blogs/${a.blogHandle || 'news'}/${a.handle}`; const absoluteUrl = rawUrl.startsWith("http") ? rawUrl : `https://${shop.shopifyDomain}${rawUrl.startsWith("/") ? "" : "/"}${rawUrl}`; return { id: a.id, shopifyArticleId: a.shopifyArticleId, blogHandle: a.blogHandle, blogTitle: a.blogTitle, title: a.title, handle: a.handle, summary: a.summary, url: absoluteUrl, publishedAt: a.publishedAt ? new Date(a.publishedAt).toLocaleDateString() : "", }; }), knowledgeCount: knowledgeItems.length, revenueGenerated: totalRevenue._sum?.revenueValue ? parseFloat(totalRevenue._sum.revenueValue.toString()) : 0.00, knowledgeItems: knowledgeItems.map((k) => ({ id: k.id, title: k.title, content: k.content, sourceType: k.sourceType, enabled: k.enabled, createdAt: new Date(k.createdAt).toLocaleDateString(), })), dynamicProviders, modelsByProvider, plans, activePlansList, activeHelplines, adminKPIs: { totalStores: 1, activeStores: 1, uninstalledStores: 0, trialStores: 0, mrr: 0, arpu: 0, planBreakdown: { FREE: 1, STARTER: 0, GROWTH: 0, PRO: 0 }, }, adminStoresData: { stores: [], totalCount: 0, page: 1, totalPages: 1, }, selectedStoreDetail: null, search, planFilter, statusFilter, sortBy, }; } catch (e) { console.error("LOADER TRY BLOCK FAILED WITH ERROR in app._index.tsx:", e); let dbSettings: any = null; let dbSub: any = null; try { dbSettings = await prisma.chatbotSettings.findFirst({ where: { shop: { shopifyDomain: shopDomain } }, }); dbSub = await prisma.subscription.findFirst({ where: { shop: { shopifyDomain: shopDomain }, status: "ACTIVE" }, orderBy: { createdAt: "desc" }, }); } catch (dbErr) {} const { systemPromptText, widgetTexts } = parseWidgetSettings(dbSettings); const isChatbotAdminDisabled = widgetTexts.adminDisabled === true; const fallbackIsEnabled = isChatbotAdminDisabled ? false : (dbSettings ? dbSettings.enabled === true : false); const dynamicProviders = getDynamicAIProviders(); const modelsByProvider: Record = {}; dynamicProviders.forEach((p) => { modelsByProvider[p.id] = p.models; }); let fallbackPlans = PLAN_CONFIGS; let fallbackActivePlansList: any[] = []; let fallbackActiveHelplines: any[] = []; try { const { getPlansDictionary, getActivePlans } = await import("../services/plan-config.server"); const { getActiveHelplines } = await import("../services/helpline-config.server"); fallbackPlans = (await getPlansDictionary()) || PLAN_CONFIGS; fallbackActivePlansList = await getActivePlans(); fallbackActiveHelplines = await getActiveHelplines(); } catch (planErr) { fallbackActivePlansList = []; fallbackActiveHelplines = []; } if (!fallbackActivePlansList || fallbackActivePlansList.length === 0) { fallbackActivePlansList = Object.values(fallbackPlans || PLAN_CONFIGS) .filter((p: any) => p.isActive !== false) .map((cfg: any, idx: number) => ({ id: `static_${cfg.name || cfg.planKey}`, planKey: cfg.name || cfg.planKey, displayName: cfg.displayName || cfg.name || cfg.planKey, price: cfg.price, billingType: cfg.billingType || (cfg.billingInterval === "ONE_TIME" ? "ONE_TIME" : "RECURRING"), billingInterval: cfg.billingInterval || "MONTHLY", aiUsageEnabled: cfg.aiUsageEnabled, aiMonthlyLimit: cfg.aiMonthlyLimit, monthlyLimit: cfg.monthlyLimit, description: cfg.description, features: cfg.features || [], isActive: true, sortOrder: idx + 1, })); } return { shop: shopDomain, storeId: dbSettings?.shopId || "local_dev_store", botName: widgetTexts.botName || dbSettings?.botName || "ShopPilot AI Assistant", welcomeMessage: dbSettings?.welcomeMessage || "Hi! How can I help you find products, calculate shipping, or track orders today?", systemPrompt: systemPromptText || "", widgetTexts, primaryColor: dbSettings?.primaryColor || "#4F46E5", secondaryColor: dbSettings?.secondaryColor || "#4338CA", textColor: dbSettings?.textColor || "#FFFFFF", botTextColor: dbSettings?.botTextColor || "#1F2937", showPoweredBy: dbSettings?.showPoweredBy ?? true, aiProvider: dbSettings?.aiProvider || "openai", model: dbSettings?.model || "gpt-4o-mini", temperature: dbSettings?.temperature ?? 0.7, position: dbSettings?.position || "bottom-right", isEnabled: fallbackIsEnabled, isChatbotAdminDisabled, planTier: (dbSub?.plan || "FREE") as PlanTier, monthlyLimit: dbSub?.monthlyLimit || 100, currentUsage: dbSub?.currentUsage || 0, creditBalance: { availableBalance: 0, totalAllocated: 0, totalUsed: 0, monthlyLimit: 0, monthlyUsed: 0, allocations: [], }, billingSummary: null, creditPackages: [], conversationCount: 0, productCount: 0, articleCount: 0, articles: [], knowledgeCount: 0, revenueGenerated: 0.00, knowledgeItems: [], dynamicProviders, modelsByProvider, plans: fallbackPlans, activePlansList: fallbackActivePlansList, activeHelplines: fallbackActiveHelplines, adminKPIs: { totalStores: 1, activeStores: 1, uninstalledStores: 0, trialStores: 0, mrr: 0, arpu: 0, planBreakdown: { FREE: 1, STARTER: 0, GROWTH: 0, PRO: 0 }, }, adminStoresData: { stores: [], totalCount: 0, page: 1, totalPages: 1, }, selectedStoreDetail: null, search: "", planFilter: "ALL", statusFilter: "ALL", sortBy: "newest", }; } }; export const action = async ({ request }: ActionFunctionArgs) => { try { const formData = await request.formData(); const intent = String(formData.get("_intent") || ""); const shopDomain = String(formData.get("shop") || resolveShopDomainFromRequest(request)).toLowerCase().trim(); if (intent === "export_csv") { const csvContent = await exportStoresCSV(); return new Response(csvContent, { status: 200, headers: { "Content-Type": "text/csv; charset=utf-8", "Content-Disposition": 'attachment; filename="ShopPilot_Installed_Stores.csv"', }, }); } const shop = await registerShop({ shopifyDomain: shopDomain, accessToken: "shpss_sample_token", scopes: "read_products,read_content", }); if (intent === "save_ai_settings") { const botName = String(formData.get("botName") || "ShopPilot AI Assistant"); const headerSubtext = String(formData.get("headerSubtext") || DEFAULT_WIDGET_TEXTS.headerSubtext); const headerInputPlaceholder = String(formData.get("headerInputPlaceholder") || DEFAULT_WIDGET_TEXTS.headerInputPlaceholder); const startHeading = String(formData.get("startHeading") || DEFAULT_WIDGET_TEXTS.startHeading); const startSubheading = String(formData.get("startSubheading") || DEFAULT_WIDGET_TEXTS.startSubheading); const starterPrompt1 = String(formData.get("starterPrompt1") || DEFAULT_WIDGET_TEXTS.starterPrompts[0]); const starterPrompt2 = String(formData.get("starterPrompt2") || DEFAULT_WIDGET_TEXTS.starterPrompts[1]); const starterPrompt3 = String(formData.get("starterPrompt3") || DEFAULT_WIDGET_TEXTS.starterPrompts[2]); const starterPrompt4 = String(formData.get("starterPrompt4") || DEFAULT_WIDGET_TEXTS.starterPrompts[3]); const starterPrompts = [starterPrompt1, starterPrompt2, starterPrompt3, starterPrompt4].filter((p) => p.trim().length > 0); const disclaimerText = String(formData.get("disclaimerText") || DEFAULT_WIDGET_TEXTS.disclaimerText); const disclaimerLinkText = String(formData.get("disclaimerLinkText") || DEFAULT_WIDGET_TEXTS.disclaimerLinkText); const disclaimerUrl = String(formData.get("disclaimerUrl") || DEFAULT_WIDGET_TEXTS.disclaimerUrl); const chatInputPlaceholder = String(formData.get("chatInputPlaceholder") || DEFAULT_WIDGET_TEXTS.chatInputPlaceholder); const footerTermsText = String(formData.get("footerTermsText") || DEFAULT_WIDGET_TEXTS.footerTermsText); const supportMenuItemText = String(formData.get("supportMenuItemText") || DEFAULT_WIDGET_TEXTS.supportMenuItemText); const clearMenuItemText = String(formData.get("clearMenuItemText") || DEFAULT_WIDGET_TEXTS.clearMenuItemText); const storeSupportEmail = String(formData.get("storeSupportEmail") || DEFAULT_WIDGET_TEXTS.storeSupportEmail || ""); const storeSupportPhone = String(formData.get("storeSupportPhone") || DEFAULT_WIDGET_TEXTS.storeSupportPhone || ""); const storeSupportHours = String(formData.get("storeSupportHours") || DEFAULT_WIDGET_TEXTS.storeSupportHours || ""); const storeAddress = String(formData.get("storeAddress") || DEFAULT_WIDGET_TEXTS.storeAddress || ""); const storeContactUrl = String(formData.get("storeContactUrl") || DEFAULT_WIDGET_TEXTS.storeContactUrl || ""); const freeShippingThreshold = String(formData.get("freeShippingThreshold") || DEFAULT_WIDGET_TEXTS.freeShippingThreshold || ""); const standardShippingFee = String(formData.get("standardShippingFee") || DEFAULT_WIDGET_TEXTS.standardShippingFee || ""); const estimatedDeliveryDays = String(formData.get("estimatedDeliveryDays") || DEFAULT_WIDGET_TEXTS.estimatedDeliveryDays || "2 - 5 business days"); const shippingPolicyUrl = String(formData.get("shippingPolicyUrl") || DEFAULT_WIDGET_TEXTS.shippingPolicyUrl || "/policies/shipping-policy"); const rawSystemPrompt = String(formData.get("systemPrompt") || ""); // --- Server-side Validation --- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (storeSupportEmail && !emailRegex.test(storeSupportEmail)) { return { success: false, error: "Please enter a valid support email address (e.g. support@yourstore.com)." }; } const phoneRegex = /^\+?[\d\s\-().]{7,25}$/; if (storeSupportPhone && !phoneRegex.test(storeSupportPhone)) { return { success: false, error: "Please enter a valid phone number (e.g. +1 555 234 5678)." }; } const urlRegex = /^(https?:\/\/|\/|#)/; if (storeContactUrl && !urlRegex.test(storeContactUrl)) { return { success: false, error: "Contact URL must start with http://, https://, or /." }; } if (shippingPolicyUrl && !urlRegex.test(shippingPolicyUrl)) { return { success: false, error: "Shipping Policy URL must start with http://, https://, or /." }; } if (disclaimerUrl && !urlRegex.test(disclaimerUrl)) { return { success: false, error: "Disclaimer URL must start with http://, https://, or /." }; } if (!botName.trim()) { return { success: false, error: "Bot name is required." }; } // --- End Validation --- const activeSub = await prisma.subscription.findFirst({ where: { shopId: shop.id, status: "ACTIVE" }, orderBy: { createdAt: "desc" }, }); const planTier = activeSub?.plan || "FREE"; const canRemoveBranding = planTier !== "FREE"; const canUseCustomerAuth = canUseFeature(planTier, "shopify.customer_auth"); const submittedCustomerAuth = formData.get("customerAuthEnabled") === "true"; // Backend Security: Only Starter and Pro merchants can enable Customer Login & Registration const customerAuthEnabled = canUseCustomerAuth ? submittedCustomerAuth : false; const showCartSummary = formData.get("showCartSummary") === "true"; const existingSettings = await prisma.chatbotSettings.findUnique({ where: { shopId: shop.id }, }); const existingParsed = parseWidgetSettings(existingSettings); const isChatbotAdminDisabled = existingParsed.widgetTexts.adminDisabled === true; const serializedSystemPrompt = serializeWidgetSettings(rawSystemPrompt, { botName, headerSubtext, headerInputPlaceholder, startHeading, startSubheading, starterPrompts, disclaimerText, disclaimerLinkText, disclaimerUrl, chatInputPlaceholder, footerTermsText, supportMenuItemText, clearMenuItemText, customerAuthEnabled, showCartSummary, storeSupportEmail, storeSupportPhone, storeSupportHours, storeAddress, storeContactUrl, freeShippingThreshold, standardShippingFee, estimatedDeliveryDays, shippingPolicyUrl, adminDisabled: isChatbotAdminDisabled, }); const primaryColor = String(formData.get("primaryColor") || "#4F46E5"); const secondaryColor = String(formData.get("secondaryColor") || "#4338CA"); const textColor = String(formData.get("textColor") || "#FFFFFF"); const botTextColor = String(formData.get("botTextColor") || "#1F2937"); const welcomeMessage = String(formData.get("welcomeMessage") || "Hi! How can I help you find products or track orders today?"); const submittedEnabled = formData.get("enabled") === "true"; const enabled = isChatbotAdminDisabled ? false : submittedEnabled; const position = String(formData.get("position") || "bottom-right"); const canUseAI = canUseFeature(planTier, "openai"); const aiProvider = canUseAI ? String(formData.get("aiProvider") || "openai") : "openai"; const submittedModel = String(formData.get("model") || (aiProvider === "gemini" ? "gemini-1.5-flash" : "gpt-4o-mini")); const rawOpenaiKey = formData.get("openaiApiKey"); const rawGeminiKey = formData.get("geminiApiKey"); const keyUpdateData: any = {}; if (canUseAI) { if (rawOpenaiKey !== null) { const k = String(rawOpenaiKey).trim(); if (k.length > 0 && !k.startsWith("••••")) { keyUpdateData.openaiApiKey = encryptToken(k); } } if (rawGeminiKey !== null) { const k = String(rawGeminiKey).trim(); if (k.length > 0 && !k.startsWith("••••")) { keyUpdateData.geminiApiKey = encryptToken(k); } } } const submittedShowPoweredBy = formData.get("showPoweredBy") === "true"; const showPoweredBy = canRemoveBranding ? submittedShowPoweredBy : true; const validated = validateAndSanitizeAIModel(aiProvider, submittedModel); const finalModel = validated.model; await prisma.chatbotSettings.upsert({ where: { shopId: shop.id }, update: { botName, primaryColor, secondaryColor, textColor, botTextColor, showPoweredBy, welcomeMessage, systemPrompt: serializedSystemPrompt, enabled, position, aiProvider, model: finalModel, ...(aiProvider === "openai" ? { openaiModel: finalModel } : {}), ...(aiProvider === "gemini" ? { geminiModel: finalModel } : {}), ...keyUpdateData, }, create: { shopId: shop.id, botName, primaryColor, secondaryColor, textColor, botTextColor, showPoweredBy, welcomeMessage, systemPrompt: serializedSystemPrompt, enabled, position, aiProvider, model: finalModel, openaiModel: aiProvider === "openai" ? finalModel : "gpt-4o-mini", geminiModel: aiProvider === "gemini" ? finalModel : "gemini-1.5-flash", ...keyUpdateData, }, }); await createNotification({ shopId: shop.id, type: "AI_CONFIG_UPDATED", title: "AI Configuration Updated", message: `Your AI provider (${aiProvider.toUpperCase()}) and model (${finalModel}) configuration were updated successfully.`, actionUrl: "/app", }); return { success: true, intent: "save_ai_settings", message: "Settings saved successfully!", savedData: { enabled, primaryColor, secondaryColor, textColor, botTextColor, showPoweredBy, position, aiProvider, model: finalModel, botName, welcomeMessage, systemPrompt: rawSystemPrompt, widgetTexts: { botName, headerSubtext, headerInputPlaceholder, startHeading, startSubheading, starterPrompts, disclaimerText, disclaimerLinkText, disclaimerUrl, chatInputPlaceholder, footerTermsText, supportMenuItemText, clearMenuItemText, customerAuthEnabled, showCartSummary, storeSupportEmail, storeSupportPhone, storeSupportHours, storeAddress, storeContactUrl, freeShippingThreshold, standardShippingFee, estimatedDeliveryDays, shippingPolicyUrl, adminDisabled: isChatbotAdminDisabled, }, }, }; } if (intent === "add_knowledge") { const title = String(formData.get("title") || "").trim(); const content = String(formData.get("content") || "").trim(); const sourceType = String(formData.get("sourceType") || "faq"); if (!title || !content) { return { success: false, error: "Please enter both Title and Content for the Knowledge Base entry." }; } await prisma.knowledgeBase.create({ data: { shopId: shop.id, title, content, sourceType, enabled: true }, }); return { success: true, message: `Added new Knowledge Base entry: "${title}"!` }; } if (intent === "update_knowledge") { const kId = String(formData.get("kId") || ""); const title = String(formData.get("title") || "").trim(); const content = String(formData.get("content") || "").trim(); const sourceType = String(formData.get("sourceType") || "faq"); if (!kId || !title || !content) { return { success: false, error: "Please provide valid Title and Content for updating." }; } await prisma.knowledgeBase.update({ where: { id: kId }, data: { title, content, sourceType }, }); return { success: true, message: `Updated Knowledge Base item: "${title}"!` }; } if (intent === "toggle_knowledge") { const kId = String(formData.get("kId") || ""); const currentEnabled = formData.get("enabled") === "true"; await prisma.knowledgeBase.update({ where: { id: kId }, data: { enabled: !currentEnabled }, }); return { success: true, message: "Knowledge Base item status updated!" }; } if (intent === "delete_knowledge") { const kId = String(formData.get("kId") || ""); await prisma.knowledgeBase.delete({ where: { id: kId } }); return { success: true, message: "Knowledge Base entry deleted." }; } if (intent === "sync_catalog") { await syncStoreCatalog(shopDomain); return { success: true, message: `Triggered live catalog & blog sync for store ${shopDomain}!` }; } if (intent === "sync_blogs" || intent === "sync_articles") { const { syncStoreArticles, syncStorePagesAndPolicies } = await import("../services/article.server"); const res = await syncStoreArticles(shopDomain); const extra = await syncStorePagesAndPolicies(shopDomain); const parts = []; if (res.syncedCount > 0) parts.push(`${res.syncedCount} blog articles`); if (extra.pagesCount > 0) parts.push(`${extra.pagesCount} pages`); if (extra.policiesCount > 0) parts.push(`${extra.policiesCount} legal policies`); const summary = parts.length > 0 ? parts.join(", ") : "0 items (none found on store)"; return { success: true, message: `Successfully synchronized ${summary} from Shopify store!` }; } if (intent === "change_plan") { const pricingUrl = BillingService.getPricingUrl(shopDomain); return { success: true, message: "Redirecting to Shopify Pricing Plans selection...", confirmationUrl: pricingUrl, }; } if (intent === "reanalyze_store") { const { StoreIntelligenceService } = await import("../services/store-intelligence.server"); const result = await StoreIntelligenceService.analyzeStoreAndBuildProfile(shop.id, shop.shopifyDomain); return { success: true, message: `Store intelligence successfully re-analyzed! Category: ${result.profile.category.toUpperCase()} (${Math.round(result.profile.categoryConfidence * 100)}% match).`, }; } if (intent === "purchase_credits") { return { success: false, error: "Message credits are not required. Store owners bring their own OpenAI/Gemini API keys.", }; } return null; } catch (error: any) { console.error("[Action Handler Error in app._index.tsx]:", error); return { success: false, error: error?.message || "An unexpected error occurred while processing your request. Please try again.", }; } }; export default function UnifiedSaaSDashboard() { const loaderData = useLoaderData(); const actionData = useActionData(); const navigate = useNavigate(); const { dynamicProviders, modelsByProvider } = loaderData; const availablePlans = (loaderData.activePlansList && Array.isArray(loaderData.activePlansList) && loaderData.activePlansList.length > 0) ? loaderData.activePlansList.filter((p: any) => p.isActive === true) : Object.values(loaderData.plans || PLAN_CONFIGS) .filter((p: any) => (p as any).isActive !== false) .map((cfg: any, idx: number) => ({ id: `static_${cfg.name || cfg.planKey}`, planKey: cfg.name || cfg.planKey, displayName: cfg.displayName || cfg.name || cfg.planKey, price: cfg.price, billingType: cfg.billingType || (cfg.billingInterval === "ONE_TIME" ? "ONE_TIME" : "RECURRING"), billingInterval: cfg.billingInterval || "MONTHLY", aiUsageEnabled: cfg.aiUsageEnabled, aiMonthlyLimit: cfg.aiMonthlyLimit, monthlyLimit: cfg.monthlyLimit, description: cfg.description, features: cfg.features || [], isActive: true, sortOrder: idx + 1, })); const currentPlanConfig = availablePlans.find((p: any) => (p.planKey || p.name) === loaderData.planTier) || (loaderData.plans && loaderData.plans[loaderData.planTier]) || (PLAN_CONFIGS as any)[loaderData.planTier] || PLAN_CONFIGS.FREE; const starterPlan = availablePlans.find((p: any) => String(p.planKey || p.name || "").toUpperCase() === "STARTER"); const proPlan = availablePlans.find((p: any) => String(p.planKey || p.name || "").toUpperCase() === "PRO"); const isStarterActive = Boolean(starterPlan && starterPlan.isActive !== false); const isProActive = Boolean(proPlan && proPlan.isActive !== false); const hasPaidPlansActive = isStarterActive || isProActive; const canRemoveBranding = loaderData.planTier !== "FREE"; const canUseAI = canUseFeature(loaderData.planTier, "openai"); const canUseCustomerAuth = canUseFeature(loaderData.planTier, "shopify.customer_auth"); const [botName, setBotName] = useState(loaderData.botName); const [primaryColor, setPrimaryColor] = useState(loaderData.primaryColor); const [secondaryColor, setSecondaryColor] = useState(loaderData.secondaryColor || "#4338CA"); const [textColor, setTextColor] = useState(loaderData.textColor || "#FFFFFF"); const [botTextColor, setBotTextColor] = useState(loaderData.botTextColor || "#1F2937"); const [showPoweredBy, setShowPoweredBy] = useState(loaderData.showPoweredBy ?? true); const [welcomeMessage, setWelcomeMessage] = useState(loaderData.welcomeMessage); const [systemPrompt, setSystemPrompt] = useState(loaderData.systemPrompt); const [enabled, setEnabled] = useState(loaderData.isEnabled); const [position, setPosition] = useState(loaderData.position || "bottom-right"); const [aiProvider, setAiProvider] = useState(loaderData.aiProvider); const [model, setModel] = useState(loaderData.model); const [openaiApiKey, setOpenaiApiKey] = useState(loaderData.openaiApiKeyMasked || ""); const [geminiApiKey, setGeminiApiKey] = useState(loaderData.geminiApiKeyMasked || ""); // Storefront Widget Customizable Texts State const initialTexts = loaderData.widgetTexts || DEFAULT_WIDGET_TEXTS; const [headerSubtext, setHeaderSubtext] = useState(initialTexts.headerSubtext || DEFAULT_WIDGET_TEXTS.headerSubtext); const [headerInputPlaceholder, setHeaderInputPlaceholder] = useState(initialTexts.headerInputPlaceholder || DEFAULT_WIDGET_TEXTS.headerInputPlaceholder); const [startHeading, setStartHeading] = useState(initialTexts.startHeading || DEFAULT_WIDGET_TEXTS.startHeading); const [startSubheading, setStartSubheading] = useState(initialTexts.startSubheading || DEFAULT_WIDGET_TEXTS.startSubheading); const [starterPrompt1, setStarterPrompt1] = useState(initialTexts.starterPrompts?.[0] || DEFAULT_WIDGET_TEXTS.starterPrompts[0]); const [starterPrompt2, setStarterPrompt2] = useState(initialTexts.starterPrompts?.[1] || DEFAULT_WIDGET_TEXTS.starterPrompts[1]); const [starterPrompt3, setStarterPrompt3] = useState(initialTexts.starterPrompts?.[2] || DEFAULT_WIDGET_TEXTS.starterPrompts[2]); const [starterPrompt4, setStarterPrompt4] = useState(initialTexts.starterPrompts?.[3] || DEFAULT_WIDGET_TEXTS.starterPrompts[3]); const [disclaimerText, setDisclaimerText] = useState(initialTexts.disclaimerText || DEFAULT_WIDGET_TEXTS.disclaimerText); const [disclaimerLinkText, setDisclaimerLinkText] = useState(initialTexts.disclaimerLinkText || DEFAULT_WIDGET_TEXTS.disclaimerLinkText); const [disclaimerUrl, setDisclaimerUrl] = useState(initialTexts.disclaimerUrl || DEFAULT_WIDGET_TEXTS.disclaimerUrl); const [chatInputPlaceholder, setChatInputPlaceholder] = useState(initialTexts.chatInputPlaceholder || DEFAULT_WIDGET_TEXTS.chatInputPlaceholder); const [footerTermsText, setFooterTermsText] = useState(initialTexts.footerTermsText || DEFAULT_WIDGET_TEXTS.footerTermsText); const [supportMenuItemText, setSupportMenuItemText] = useState(initialTexts.supportMenuItemText || DEFAULT_WIDGET_TEXTS.supportMenuItemText); const [clearMenuItemText, setClearMenuItemText] = useState(initialTexts.clearMenuItemText || DEFAULT_WIDGET_TEXTS.clearMenuItemText); const [customerAuthEnabled, setCustomerAuthEnabled] = useState(initialTexts.customerAuthEnabled === true); const [showCartSummary, setShowCartSummary] = useState(initialTexts.showCartSummary !== false); const [storeSupportEmail, setStoreSupportEmail] = useState(initialTexts.storeSupportEmail || DEFAULT_WIDGET_TEXTS.storeSupportEmail || ""); const [storeSupportPhone, setStoreSupportPhone] = useState(initialTexts.storeSupportPhone || DEFAULT_WIDGET_TEXTS.storeSupportPhone || ""); const [storeSupportHours, setStoreSupportHours] = useState(initialTexts.storeSupportHours || DEFAULT_WIDGET_TEXTS.storeSupportHours || ""); const [storeAddress, setStoreAddress] = useState(initialTexts.storeAddress || DEFAULT_WIDGET_TEXTS.storeAddress || ""); const [storeContactUrl, setStoreContactUrl] = useState(initialTexts.storeContactUrl || DEFAULT_WIDGET_TEXTS.storeContactUrl || ""); const [freeShippingThreshold, setFreeShippingThreshold] = useState(initialTexts.freeShippingThreshold || DEFAULT_WIDGET_TEXTS.freeShippingThreshold || ""); const [standardShippingFee, setStandardShippingFee] = useState(initialTexts.standardShippingFee || DEFAULT_WIDGET_TEXTS.standardShippingFee || ""); const [estimatedDeliveryDays, setEstimatedDeliveryDays] = useState(initialTexts.estimatedDeliveryDays || DEFAULT_WIDGET_TEXTS.estimatedDeliveryDays || "2 - 5 business days"); const [shippingPolicyUrl, setShippingPolicyUrl] = useState(initialTexts.shippingPolicyUrl || DEFAULT_WIDGET_TEXTS.shippingPolicyUrl || "/policies/shipping-policy"); // Client-side form validation errors const [formErrors, setFormErrors] = useState>({}); // Live Preview Mode Switcher State ("welcome" = Getting Started screen, "active" = Active Chat conversation) const [previewTab, setPreviewTab] = useState<"welcome" | "active">("welcome"); // Sync state whenever loaderData or actionData updates (after successful save, revalidation, or load) useEffect(() => { if (actionData?.intent === "save_ai_settings" && (actionData as any)?.savedData) { const data = (actionData as any).savedData; setAiProvider(data.aiProvider); setModel(data.model); setBotName(data.botName); setPrimaryColor(data.primaryColor || "#4F46E5"); setSecondaryColor(data.secondaryColor || "#4338CA"); setTextColor(data.textColor || "#FFFFFF"); setBotTextColor(data.botTextColor || "#1F2937"); setShowPoweredBy(data.showPoweredBy ?? true); setWelcomeMessage(data.welcomeMessage); setSystemPrompt(data.systemPrompt); setEnabled(data.enabled); setPosition(data.position || "bottom-right"); const txts = data.widgetTexts || DEFAULT_WIDGET_TEXTS; setHeaderSubtext(txts.headerSubtext || DEFAULT_WIDGET_TEXTS.headerSubtext); setHeaderInputPlaceholder(txts.headerInputPlaceholder || DEFAULT_WIDGET_TEXTS.headerInputPlaceholder); setStartHeading(txts.startHeading || DEFAULT_WIDGET_TEXTS.startHeading); setStartSubheading(txts.startSubheading || DEFAULT_WIDGET_TEXTS.startSubheading); setStarterPrompt1(txts.starterPrompts?.[0] || DEFAULT_WIDGET_TEXTS.starterPrompts[0]); setStarterPrompt2(txts.starterPrompts?.[1] || DEFAULT_WIDGET_TEXTS.starterPrompts[1]); setStarterPrompt3(txts.starterPrompts?.[2] || DEFAULT_WIDGET_TEXTS.starterPrompts[2]); setStarterPrompt4(txts.starterPrompts?.[3] || DEFAULT_WIDGET_TEXTS.starterPrompts[3]); setDisclaimerText(txts.disclaimerText || DEFAULT_WIDGET_TEXTS.disclaimerText); setDisclaimerLinkText(txts.disclaimerLinkText || DEFAULT_WIDGET_TEXTS.disclaimerLinkText); setDisclaimerUrl(txts.disclaimerUrl || DEFAULT_WIDGET_TEXTS.disclaimerUrl); setChatInputPlaceholder(txts.chatInputPlaceholder || DEFAULT_WIDGET_TEXTS.chatInputPlaceholder); setFooterTermsText(txts.footerTermsText || DEFAULT_WIDGET_TEXTS.footerTermsText); setSupportMenuItemText(txts.supportMenuItemText || DEFAULT_WIDGET_TEXTS.supportMenuItemText); setClearMenuItemText(txts.clearMenuItemText || DEFAULT_WIDGET_TEXTS.clearMenuItemText); setCustomerAuthEnabled(txts.customerAuthEnabled === true); setShowCartSummary(txts.showCartSummary !== false); setStoreSupportEmail(txts.storeSupportEmail || DEFAULT_WIDGET_TEXTS.storeSupportEmail || ""); setStoreSupportPhone(txts.storeSupportPhone || DEFAULT_WIDGET_TEXTS.storeSupportPhone || ""); setStoreSupportHours(txts.storeSupportHours || DEFAULT_WIDGET_TEXTS.storeSupportHours || ""); setStoreAddress(txts.storeAddress || DEFAULT_WIDGET_TEXTS.storeAddress || ""); setStoreContactUrl(txts.storeContactUrl || DEFAULT_WIDGET_TEXTS.storeContactUrl || ""); setFreeShippingThreshold(txts.freeShippingThreshold || DEFAULT_WIDGET_TEXTS.freeShippingThreshold || ""); setStandardShippingFee(txts.standardShippingFee || DEFAULT_WIDGET_TEXTS.standardShippingFee || ""); setEstimatedDeliveryDays(txts.estimatedDeliveryDays || DEFAULT_WIDGET_TEXTS.estimatedDeliveryDays || "2 - 5 business days"); setShippingPolicyUrl(txts.shippingPolicyUrl || DEFAULT_WIDGET_TEXTS.shippingPolicyUrl || "/policies/shipping-policy"); } else if (loaderData) { setAiProvider(loaderData.aiProvider); setModel(loaderData.model); setBotName(loaderData.botName); setPrimaryColor(loaderData.primaryColor || "#4F46E5"); setSecondaryColor(loaderData.secondaryColor || "#4338CA"); setTextColor(loaderData.textColor || "#FFFFFF"); setBotTextColor(loaderData.botTextColor || "#1F2937"); setShowPoweredBy(loaderData.showPoweredBy ?? true); setWelcomeMessage(loaderData.welcomeMessage); setSystemPrompt(loaderData.systemPrompt); setEnabled(loaderData.isEnabled); setPosition(loaderData.position || "bottom-right"); const txts = loaderData.widgetTexts || DEFAULT_WIDGET_TEXTS; setHeaderSubtext(txts.headerSubtext || DEFAULT_WIDGET_TEXTS.headerSubtext); setHeaderInputPlaceholder(txts.headerInputPlaceholder || DEFAULT_WIDGET_TEXTS.headerInputPlaceholder); setStartHeading(txts.startHeading || DEFAULT_WIDGET_TEXTS.startHeading); setStartSubheading(txts.startSubheading || DEFAULT_WIDGET_TEXTS.startSubheading); setStarterPrompt1(txts.starterPrompts?.[0] || DEFAULT_WIDGET_TEXTS.starterPrompts[0]); setStarterPrompt2(txts.starterPrompts?.[1] || DEFAULT_WIDGET_TEXTS.starterPrompts[1]); setStarterPrompt3(txts.starterPrompts?.[2] || DEFAULT_WIDGET_TEXTS.starterPrompts[2]); setStarterPrompt4(txts.starterPrompts?.[3] || DEFAULT_WIDGET_TEXTS.starterPrompts[3]); setDisclaimerText(txts.disclaimerText || DEFAULT_WIDGET_TEXTS.disclaimerText); setDisclaimerLinkText(txts.disclaimerLinkText || DEFAULT_WIDGET_TEXTS.disclaimerLinkText); setDisclaimerUrl(txts.disclaimerUrl || DEFAULT_WIDGET_TEXTS.disclaimerUrl); setChatInputPlaceholder(txts.chatInputPlaceholder || DEFAULT_WIDGET_TEXTS.chatInputPlaceholder); setFooterTermsText(txts.footerTermsText || DEFAULT_WIDGET_TEXTS.footerTermsText); setSupportMenuItemText(txts.supportMenuItemText || DEFAULT_WIDGET_TEXTS.supportMenuItemText); setClearMenuItemText(txts.clearMenuItemText || DEFAULT_WIDGET_TEXTS.clearMenuItemText); setCustomerAuthEnabled(txts.customerAuthEnabled === true); setShowCartSummary(txts.showCartSummary !== false); setStoreSupportEmail(txts.storeSupportEmail || DEFAULT_WIDGET_TEXTS.storeSupportEmail || ""); setStoreSupportPhone(txts.storeSupportPhone || DEFAULT_WIDGET_TEXTS.storeSupportPhone || ""); setStoreSupportHours(txts.storeSupportHours || DEFAULT_WIDGET_TEXTS.storeSupportHours || ""); setStoreAddress(txts.storeAddress || DEFAULT_WIDGET_TEXTS.storeAddress || ""); setStoreContactUrl(txts.storeContactUrl || DEFAULT_WIDGET_TEXTS.storeContactUrl || ""); setFreeShippingThreshold(txts.freeShippingThreshold || DEFAULT_WIDGET_TEXTS.freeShippingThreshold || ""); setStandardShippingFee(txts.standardShippingFee || DEFAULT_WIDGET_TEXTS.standardShippingFee || ""); setEstimatedDeliveryDays(txts.estimatedDeliveryDays || DEFAULT_WIDGET_TEXTS.estimatedDeliveryDays || "2 - 5 business days"); setShippingPolicyUrl(txts.shippingPolicyUrl || DEFAULT_WIDGET_TEXTS.shippingPolicyUrl || "/policies/shipping-policy"); } }, [loaderData, actionData]); // Knowledge Base Form States const [kTitle, setKTitle] = useState(""); const [kContent, setKContent] = useState(""); const [kType, setKType] = useState("faq"); // Knowledge Base Editing State const [editItem, setEditItem] = useState<{ id: string; title: string; content: string; sourceType: string } | null>(null); // Subscription History & Receipt Modal States const [selectedHistorySub, setSelectedHistorySub] = useState(null); const [selectedPaymentReceipt, setSelectedPaymentReceipt] = useState(null); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); // Dynamic Provider Options const providerOptions = dynamicProviders.map((p) => ({ label: `${p.name} (${p.badge})`, value: p.id, })); // Dynamic Models for currently selected Provider const currentModels = modelsByProvider[aiProvider] || []; const modelOptions = currentModels.map((m) => ({ label: m.label, value: m.value, })); const selectedProviderDetail = dynamicProviders.find((p) => p.id === aiProvider) || dynamicProviders[0]; const selectedModelDetail = currentModels.find((m) => m.value === model) || currentModels[0] || { label: model, value: model, description: "Custom AI engine model.", badge: "Active", speedRating: "Standard", }; const submit = useSubmit(); const navigation = useNavigation(); const isSaving = navigation.state === "submitting" || navigation.state === "loading"; const handleProviderChange = (newProvider: string) => { setAiProvider(newProvider); const availableModels = modelsByProvider[newProvider] || []; if (availableModels.length > 0) { const rec = availableModels.find((m) => m.recommended) || availableModels[0]; setModel(rec.value); } }; const handleModelChange = (newModel: string) => { setModel(newModel); }; const handleColorChange = (newColor: string) => { setPrimaryColor(newColor); }; const handleSecondaryColorChange = (newColor: string) => { setSecondaryColor(newColor); }; const handleTextColorChange = (newColor: string) => { setTextColor(newColor); }; const handleBotTextColorChange = (newColor: string) => { setBotTextColor(newColor); }; const handleShowPoweredByChange = (val: boolean) => { if (!canRemoveBranding) return; setShowPoweredBy(val); }; const handleSettingsSubmit = (e: React.FormEvent) => { const errors: Record = {}; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const phoneRegex = /^\+?[\d\s\-().]{7,25}$/; const urlRegex = /^(https?:\/\/|\/|#)/; if (!botName.trim()) { errors.botName = "Bot name is required."; } if (storeSupportEmail && !emailRegex.test(storeSupportEmail)) { errors.storeSupportEmail = "Please enter a valid email address."; } if (storeSupportPhone && !phoneRegex.test(storeSupportPhone)) { errors.storeSupportPhone = "Please enter a valid phone number (e.g. +1 555 234 5678)."; } if (storeContactUrl && !urlRegex.test(storeContactUrl)) { errors.storeContactUrl = "Must start with http://, https://, or /."; } if (shippingPolicyUrl && !urlRegex.test(shippingPolicyUrl)) { errors.shippingPolicyUrl = "Must start with http://, https://, or /."; } if (disclaimerUrl && !urlRegex.test(disclaimerUrl)) { errors.disclaimerUrl = "Must start with http://, https://, or /."; } setFormErrors(errors); if (Object.keys(errors).length > 0) { e.preventDefault(); } }; const isUnlimitedPlan = loaderData.monthlyLimit >= 99999 || loaderData.planTier === "PRO"; const usagePercentage = isUnlimitedPlan ? 5 : Math.min(100, Math.round((loaderData.currentUsage / Math.max(1, loaderData.monthlyLimit)) * 100)); const initialWidgetTexts = loaderData.widgetTexts || DEFAULT_WIDGET_TEXTS; const isDirty = botName !== loaderData.botName || primaryColor !== loaderData.primaryColor || secondaryColor !== (loaderData.secondaryColor || "#4338CA") || textColor !== (loaderData.textColor || "#FFFFFF") || botTextColor !== (loaderData.botTextColor || "#1F2937") || showPoweredBy !== (loaderData.showPoweredBy ?? true) || welcomeMessage !== loaderData.welcomeMessage || systemPrompt !== loaderData.systemPrompt || enabled !== loaderData.isEnabled || position !== (loaderData.position || "bottom-right") || aiProvider !== loaderData.aiProvider || model !== loaderData.model || headerSubtext !== (initialWidgetTexts.headerSubtext || DEFAULT_WIDGET_TEXTS.headerSubtext) || headerInputPlaceholder !== (initialWidgetTexts.headerInputPlaceholder || DEFAULT_WIDGET_TEXTS.headerInputPlaceholder) || startHeading !== (initialWidgetTexts.startHeading || DEFAULT_WIDGET_TEXTS.startHeading) || startSubheading !== (initialWidgetTexts.startSubheading || DEFAULT_WIDGET_TEXTS.startSubheading) || starterPrompt1 !== (initialWidgetTexts.starterPrompts?.[0] || DEFAULT_WIDGET_TEXTS.starterPrompts[0]) || starterPrompt2 !== (initialWidgetTexts.starterPrompts?.[1] || DEFAULT_WIDGET_TEXTS.starterPrompts[1]) || starterPrompt3 !== (initialWidgetTexts.starterPrompts?.[2] || DEFAULT_WIDGET_TEXTS.starterPrompts[2]) || starterPrompt4 !== (initialWidgetTexts.starterPrompts?.[3] || DEFAULT_WIDGET_TEXTS.starterPrompts[3]) || disclaimerText !== (initialWidgetTexts.disclaimerText || DEFAULT_WIDGET_TEXTS.disclaimerText) || disclaimerLinkText !== (initialWidgetTexts.disclaimerLinkText || DEFAULT_WIDGET_TEXTS.disclaimerLinkText) || disclaimerUrl !== (initialWidgetTexts.disclaimerUrl || DEFAULT_WIDGET_TEXTS.disclaimerUrl) || chatInputPlaceholder !== (initialWidgetTexts.chatInputPlaceholder || DEFAULT_WIDGET_TEXTS.chatInputPlaceholder) || footerTermsText !== (initialWidgetTexts.footerTermsText || DEFAULT_WIDGET_TEXTS.footerTermsText) || supportMenuItemText !== (initialWidgetTexts.supportMenuItemText || DEFAULT_WIDGET_TEXTS.supportMenuItemText) || clearMenuItemText !== (initialWidgetTexts.clearMenuItemText || DEFAULT_WIDGET_TEXTS.clearMenuItemText) || customerAuthEnabled !== (initialWidgetTexts.customerAuthEnabled === true) || showCartSummary !== (initialWidgetTexts.showCartSummary !== false) || storeSupportEmail !== (initialWidgetTexts.storeSupportEmail || DEFAULT_WIDGET_TEXTS.storeSupportEmail || "") || storeSupportPhone !== (initialWidgetTexts.storeSupportPhone || DEFAULT_WIDGET_TEXTS.storeSupportPhone || "") || storeSupportHours !== (initialWidgetTexts.storeSupportHours || DEFAULT_WIDGET_TEXTS.storeSupportHours || "") || storeAddress !== (initialWidgetTexts.storeAddress || DEFAULT_WIDGET_TEXTS.storeAddress || "") || storeContactUrl !== (initialWidgetTexts.storeContactUrl || DEFAULT_WIDGET_TEXTS.storeContactUrl || "") || freeShippingThreshold !== (initialWidgetTexts.freeShippingThreshold || DEFAULT_WIDGET_TEXTS.freeShippingThreshold || "") || standardShippingFee !== (initialWidgetTexts.standardShippingFee || DEFAULT_WIDGET_TEXTS.standardShippingFee || "") || estimatedDeliveryDays !== (initialWidgetTexts.estimatedDeliveryDays || DEFAULT_WIDGET_TEXTS.estimatedDeliveryDays || "2 - 5 business days") || shippingPolicyUrl !== (initialWidgetTexts.shippingPolicyUrl || DEFAULT_WIDGET_TEXTS.shippingPolicyUrl || "/policies/shipping-policy"); return (
{/* HEADER SECTION */}

ShopPilot AI — Control Panel

Configure AI engine, dynamic knowledge base, branding, and billing limits.

{/* NOTIFICATIONS / ACTION FEEDBACK BANNERS */} {actionData?.message && (

{actionData.message}
)} {actionData?.error && (

{actionData.error}
)} {/* 2-COLUMN DASHBOARD GRID */}
{/* MAIN 70% COLUMN */}
{/* AI ENGINE & BYOK API KEY MANAGEMENT CARD - EXCLUSIVE TO PRO TIER */} {canUseAI ? (
AI Engine & BYOK API Key Configuration
PRO PLAN ACTIVE {selectedProviderDetail.badge}

Connect your store's own OpenAI or Google Gemini API keys. You maintain full ownership of your API keys with no artificial message quotas or extra usage fees imposed by our app.

Selected provider: {selectedProviderDetail.name}
Available models dynamically loaded for {selectedProviderDetail.name}
{/* API KEY INPUTS (BYOK) */}
setOpenaiApiKey(e.target.value)} placeholder={loaderData.openaiApiKeyMasked || "sk-proj-..."} autoComplete="off" />
{loaderData.openaiApiKeyMasked ? `Saved & Encrypted: ${loaderData.openaiApiKeyMasked}` : "Enter your OpenAI secret key"}
setGeminiApiKey(e.target.value)} placeholder={loaderData.geminiApiKeyMasked || "AIzaSy..."} autoComplete="off" />
{loaderData.geminiApiKeyMasked ? `Saved & Encrypted: ${loaderData.geminiApiKeyMasked}` : "Enter your Google Gemini API key"}
{/* DYNAMIC SELECTED MODEL BOX */}
{selectedModelDetail.label}
{selectedModelDetail.badge && ( {selectedModelDetail.badge} )}
) : (
AI Engine & BYOK Configuration
PRO PLAN EXCLUSIVE

AI features (conversational sales assistant, smart recommendations, customer support, OpenAI & Gemini key integration) are available on the Pro plan.

{isProActive ? ( ) : (
Pro Plan Pending Shopify Review Will be enabled once the app review is approved and published.
)}
)} {/* CHATBOT BRANDING & STOREFRONT WIDGET SETTINGS CARD */}
Chatbot Branding & Storefront Widget Settings
Live Storefront Configurator Real-Time Sync
{/* SETTINGS FORM INPUTS */}
{/* SECTION 1: HEADER & BOT IDENTITY */}

1. Header & Bot Identity

setBotName(e.target.value)} autoComplete="off" placeholder="ShopPilot AI Assistant" />
Main title shown at the top of the chat widget header.
{formErrors.botName &&
{formErrors.botName}
}