import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"; import { useLoaderData, useActionData, useSubmit, Form } from "react-router"; import { useEffect } from "react"; import { Page, Layout, Card, Text, BlockStack, InlineGrid, InlineStack, Badge, Banner, Button, Box, List, Divider, } from "@shopify/polaris"; import { authenticate } from "../shopify.server"; import prisma from "../db.server"; import { registerShop } from "../services/shop.server"; import { BillingService } from "../services/billing.server"; import { PLAN_CONFIGS, FEATURE_MATRIX_ROWS } from "../lib/billing-plans"; import { getActivePlans, getAllPlans } from "../services/plan-config.server"; import { FAIcon } from "../components/FAIcon"; 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 url = new URL(request.url); const syncRequested = url.searchParams.get("sync") === "true"; const chargeId = url.searchParams.get("charge_id"); const returnPlan = url.searchParams.get("plan"); let shopDomain = ""; let accessToken: string | undefined; try { const authResult = await authenticate.admin(request); shopDomain = authResult?.session?.shop || ""; accessToken = authResult?.session?.accessToken; } catch (authErr) { // Top-level browser return from Shopify charge approval } if (!shopDomain) { const rawShop = url.searchParams.get("shop"); if (rawShop) { shopDomain = rawShop.includes(".") ? rawShop.toLowerCase().trim() : `${rawShop.toLowerCase().trim()}.myshopify.com`; } } if (!shopDomain) { shopDomain = resolveShopDomainFromRequest(request); } if (!shopDomain || shopDomain === "digi-horizon.myshopify.com") { try { const recentShop = await prisma.shop.findFirst({ orderBy: { updatedAt: "desc" }, }); if (recentShop?.shopifyDomain) { shopDomain = recentShop.shopifyDomain; } } catch {} } // Ensure shop record exists in database let shopRecord: any = null; try { shopRecord = await registerShop({ shopifyDomain: shopDomain, accessToken: accessToken || "shpss_sample_token", scopes: "read_products,read_content", }); } catch (regErr) { console.warn("[Billing] Shop registration warning:", regErr); } // If returning from Shopify charge approval, activate the plan in database if (chargeId || (syncRequested && returnPlan)) { const targetPlan = (returnPlan || "STARTER").toUpperCase(); if (targetPlan && targetPlan !== "FREE") { try { const { SubscriptionService } = await import("../services/subscription.server"); const shop = shopRecord || (await prisma.shop.findUnique({ where: { shopifyDomain: shopDomain } })); if (shop) { await SubscriptionService.changePlan({ shopId: shop.id, newPlan: targetPlan as any, }); } } catch (e) { await prisma.shop.updateMany({ where: { shopifyDomain: shopDomain }, data: { activePlan: targetPlan as any, planHandle: targetPlan.toLowerCase(), subscriptionStatus: "ACTIVE", }, }).catch(() => null); } } // Break back into Shopify Admin embedded frame if opened as top-level window const isTopLevelWindow = !url.searchParams.get("host"); if (isTopLevelWindow && shopDomain) { const shopSubdomain = shopDomain.replace(/\.myshopify\.com$/i, ""); const appHandle = process.env.SHOPIFY_APP_HANDLE || "commercebot-ai"; const embeddedAppUrl = `https://admin.shopify.com/store/${shopSubdomain}/apps/${appHandle}/app/billing?sync=true&plan=${encodeURIComponent(targetPlan)}`; return new Response( ` Redirecting to Shopify Admin...
🎉

Subscription Activated!

Redirecting back to your Shopify app dashboard...

Click here to open app →
`, { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); } } // Fetch verified active subscription state with safe fallback let planInfo: any; try { planInfo = syncRequested ? await BillingService.syncSubscription(shopDomain) : await BillingService.getActiveSubscription(shopDomain); } catch (planErr: any) { console.warn("[Billing] Subscription lookup fallback:", planErr?.message); const fallbackPlan = PLAN_CONFIGS.FREE; planInfo = { shopDomain, shopId: shopRecord?.id || "", shopifyShopId: null, shopifyAppId: null, plan: "FREE", planHandle: "free", displayName: fallbackPlan.displayName, price: fallbackPlan.price, currency: "USD", billingPeriod: "EVERY_30_DAYS", status: "ACTIVE", statusState: "FREE", isTrial: false, trialEndsAt: null, cancelAtEndOfCycle: false, currentBillingCycleStart: null, currentBillingCycleEnd: null, lastSubscriptionSync: null, pricingPlansUrl: BillingService.getPricingUrl(shopDomain), features: fallbackPlan.features, }; } const pricingUrl = BillingService.getPricingUrl(shopDomain); let activePlans: any[] = []; try { activePlans = await getActivePlans(); } catch { activePlans = []; } if (!activePlans || activePlans.length < 2) { activePlans = [ { id: "plan_free", planKey: "FREE", displayName: "Free", price: 0.0, billingType: "RECURRING", billingInterval: "MONTHLY", aiUsageEnabled: false, aiMonthlyLimit: null, monthlyLimit: 0, description: "Shopify API catalog integration & product search", featureFlags: PLAN_CONFIGS.FREE.featureFlags, features: PLAN_CONFIGS.FREE.features, sortOrder: 1, isActive: true, }, { id: "plan_starter", planKey: "STARTER", displayName: "Starter", price: 29.0, billingType: "RECURRING", billingInterval: "MONTHLY", aiUsageEnabled: false, aiMonthlyLimit: null, monthlyLimit: 0, description: "Full Commerce, Cart & Shopify Checkout", featureFlags: PLAN_CONFIGS.STARTER.featureFlags, features: PLAN_CONFIGS.STARTER.features, sortOrder: 2, isActive: true, }, { id: "plan_pro", planKey: "PRO", displayName: "Pro", price: 79.0, billingType: "RECURRING", billingInterval: "MONTHLY", aiUsageEnabled: true, aiMonthlyLimit: null, monthlyLimit: 0, description: "AI Sales Assistant & BYOK (OpenAI / Gemini)", featureFlags: PLAN_CONFIGS.PRO.featureFlags, features: PLAN_CONFIGS.PRO.features, sortOrder: 3, isActive: true, }, ]; } const safeIso = (d: any): string | null => { if (!d) return null; try { const date = d instanceof Date ? d : new Date(d); return isNaN(date.getTime()) ? null : date.toISOString(); } catch { return null; } }; let hasValidToken = true; try { const { getShopWithDecryptedToken } = await import("../services/shop.server"); const shopWithToken = await getShopWithDecryptedToken(shopDomain); const tok = shopWithToken?.decryptedAccessToken || ""; const isUninstalled = Boolean(shopWithToken?.uninstalledAt); if (shopWithToken) { hasValidToken = Boolean(tok && tok !== "shpss_sample_token" && !isUninstalled); } else { hasValidToken = true; } } catch { hasValidToken = true; } const authUrl = `/auth?shop=${encodeURIComponent(shopDomain)}&returnTo=${encodeURIComponent("/app/billing")}`; return { shop: shopDomain, hasValidToken, authUrl, planInfo: { ...planInfo, pricingPlansUrl: pricingUrl, currentBillingCycleStart: safeIso(planInfo?.currentBillingCycleStart), currentBillingCycleEnd: safeIso(planInfo?.currentBillingCycleEnd), trialEndsAt: safeIso(planInfo?.trialEndsAt), lastSubscriptionSync: safeIso(planInfo?.lastSubscriptionSync), }, pricingPlansUrl: pricingUrl, allConfiguredPlans: activePlans, activePlans, }; }; export const action = async ({ request }: ActionFunctionArgs) => { let sessionShop = ""; let sessionAccessToken = ""; const formData = await request.formData(); const intent = formData.get("intent") as string; const requestedPlan = String(formData.get("plan") || "").toUpperCase(); const shopFromForm = String(formData.get("shop") || "").toLowerCase().trim(); try { const authResult = await authenticate.admin(request); sessionShop = authResult?.session?.shop || ""; sessionAccessToken = authResult?.session?.accessToken || ""; } catch (authErr) { const isMainDevStore = shopFromForm === "digi-horizon.myshopify.com" || shopFromForm === "digi-horizon"; if (authErr instanceof Response && intent !== "test_switch" && !isMainDevStore) { throw authErr; } } if (shopFromForm) { sessionShop = shopFromForm.includes(".") ? shopFromForm : `${shopFromForm}.myshopify.com`; } if (!sessionShop) { sessionShop = resolveShopDomainFromRequest(request); } if (intent === "sync") { try { const planInfo = await BillingService.syncSubscription(sessionShop); return { success: true, message: `Subscription state synchronized with Shopify. Active plan: ${planInfo.displayName}.` }; } catch (e: any) { return { success: false, message: `Subscription sync error: ${e?.message || "Unknown error"}` }; } } if (intent === "test_switch" || intent === "subscribe" || intent === "upgrade" || intent === "downgrade") { let shopRecord = await prisma.shop.findUnique({ where: { shopifyDomain: sessionShop }, }); if (!shopRecord) { try { shopRecord = await registerShop({ shopifyDomain: sessionShop, accessToken: sessionAccessToken || "shpss_sample_token", scopes: "read_products,read_content", }); } catch (err: any) { return { success: false, message: `Shop record error: ${err?.message}` }; } } // 1. Instant 1-Click Plan Switch STRICTLY & EXCLUSIVELY for main digi-horizon development store const isDigiHorizonTestStore = sessionShop.toLowerCase() === "digi-horizon.myshopify.com" || sessionShop.toLowerCase() === "digi-horizon"; if (isDigiHorizonTestStore) { try { const { SubscriptionService } = await import("../services/subscription.server"); await SubscriptionService.changePlan({ shopId: shopRecord.id, newPlan: (requestedPlan || "FREE") as any, }); const planName = requestedPlan === "PRO" ? "Pro ($79/mo - Full AI & BYOK)" : requestedPlan === "STARTER" ? "Starter ($29/mo - Cart & Checkout)" : "Free ($0)"; return { success: true, message: `[Test Mode] Store plan instantly switched to ${planName}! All plan features and API access are active with $0 charge.`, }; } catch (e: any) { return { success: false, message: `Failed to update test plan: ${e?.message || "Unknown error"}` }; } } // Reject test_switch intent for any other store if (intent === "test_switch") { return { success: false, message: "1-Click test switching is not permitted for this store." }; } // 2. Revert / Downgrade back to FREE plan if (requestedPlan === "FREE") { try { await BillingService.cancelSubscription(sessionShop); const { SubscriptionService } = await import("../services/subscription.server"); await SubscriptionService.changePlan({ shopId: shopRecord.id, newPlan: "FREE", }); } catch (e: any) { await prisma.shop.updateMany({ where: { shopifyDomain: sessionShop }, data: { activePlan: "FREE", planHandle: "free", subscriptionStatus: "ACTIVE" }, }).catch(() => null); } return { success: true, message: "Successfully reverted back to Free plan! All core catalog search capabilities remain active.", }; } // 3. Initiate official Shopify Recurring Application Charge via GraphQL (Shopify Manual Pricing) try { const appUrl = process.env.SHOPIFY_APP_URL || new URL(request.url).origin; const returnUrl = `${appUrl}/app/billing?sync=true&plan=${requestedPlan || "STARTER"}&shop=${encodeURIComponent(sessionShop)}`; const isTestStore = sessionShop.toLowerCase().includes("digi-horizon") || sessionShop.toLowerCase().includes("dev") || sessionShop.toLowerCase().includes("test") || process.env.SHOPIFY_BILLING_TEST === "true" || process.env.NODE_ENV !== "production"; const subResult = await BillingService.createSubscription({ shopDomainOrId: sessionShop, plan: requestedPlan || "STARTER", returnUrl, explicitAccessToken: sessionAccessToken, isTest: isTestStore, }); if (subResult?.confirmationUrl) { return { success: true, confirmationUrl: subResult.confirmationUrl, isRedirect: true, message: `Shopify subscription created! Redirecting to Shopify for approval...`, }; } } catch (err: any) { console.warn("[Billing createSubscription error]:", err?.message); const errMsg = err?.message || ""; const isMissingToken = errMsg.includes("No active access token found"); const isInvalidToken = errMsg.includes("401") || errMsg.includes("Invalid API key or access token") || errMsg.includes("unrecognized login") || errMsg.includes("wrong password"); const isDeprecationError = errMsg.includes("Non-expiring access tokens are no longer accepted") || errMsg.includes("non-expiring access tokens are deprecated") || errMsg.includes("re-authentication") || errMsg.includes("re-authorization"); const authUrl = `/auth?shop=${encodeURIComponent(sessionShop)}&returnTo=${encodeURIComponent(`/app/billing?plan=${requestedPlan || "STARTER"}`)}`; if (isMissingToken || isInvalidToken || isDeprecationError) { return { success: false, needsAuth: true, authUrl, message: `Shopify store re-authorization required after reinstall. Redirecting to Shopify to authorize and proceed with plan upgrade...`, }; } return { success: false, message: `Failed to create Shopify subscription charge: ${err?.message || "Please verify app permissions."}`, }; } return { success: false, message: "Could not obtain Shopify charge confirmation URL. Please ensure the app is installed from Shopify Admin.", }; } return { success: true, message: "Subscription state refreshed.", }; }; export default function BillingPage() { const { shop, hasValidToken, authUrl, planInfo, pricingPlansUrl, allConfiguredPlans = [], activePlans = [] } = useLoaderData(); const actionData = useActionData(); const submit = useSubmit(); const currentPlan = planInfo.plan; // FREE | STARTER | PRO const isFree = currentPlan === "FREE"; const isStarter = currentPlan === "STARTER"; const isPro = currentPlan === "PRO" || currentPlan === "GROWTH"; // Check which plans are enabled in the SaaS portal const activePlanKeys = new Set((activePlans || []).map((p: any) => String(p.planKey || p.name || "").toUpperCase())); const isStarterActive = activePlanKeys.has("STARTER"); const isProActive = activePlanKeys.has("PRO"); const hasPaidPlansActive = isStarterActive || isProActive; const starterPlanObj = (allConfiguredPlans || []).find((p: any) => String(p.planKey || p.name || "").toUpperCase() === "STARTER"); const proPlanObj = (allConfiguredPlans || []).find((p: any) => String(p.planKey || p.name || "").toUpperCase() === "PRO"); const freePlanObj = (allConfiguredPlans || []).find((p: any) => String(p.planKey || p.name || "").toUpperCase() === "FREE"); const starterDisplayName = starterPlanObj?.displayName || "Starter"; const proDisplayName = proPlanObj?.displayName || "Pro"; const freeDisplayName = freePlanObj?.displayName || "Free"; // Auto-redirect top window when authorization is required or confirmation URL is provided useEffect(() => { const targetUrl = actionData?.confirmationUrl || (actionData?.needsAuth ? actionData?.authUrl : (!hasValidToken ? authUrl : null)); if (targetUrl) { try { if (typeof window !== "undefined") { if ((window as any).shopify?.open) { (window as any).shopify.open(targetUrl, "_top"); } else if (window.top && window.top !== window) { window.top.location.href = targetUrl; } else { window.location.href = targetUrl; } } } catch (e) { console.warn("Automatic top-level redirect error:", e); } } }, [actionData, hasValidToken, authUrl]); const handleUpgrade = (plan: "STARTER" | "PRO" | "FREE" | string) => { submit({ intent: "subscribe", plan, shop }, { method: "post" }); }; const formatDate = (isoString?: string | null) => { if (!isoString) return "N/A"; try { return new Date(isoString).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric", }); } catch { return isoString; } }; if (!hasValidToken && authUrl) { return (