@stevederico/skateboard-ui 3.0.0 → 3.0.2

package/.claude/worktrees/strange-feistel-abc494/styles.css

@@ -1,300 +0,0 @@
-@font-face {
-  font-family: 'Geist';
-  src: url('./fonts/GeistVF.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  src: url('./fonts/GeistMonoVF.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@import "tailwindcss";
-
-@source '../';
-
-@plugin 'tailwindcss-animate';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --color-app: var(--color-blue-500);
-}
-
-:root {
-  --background: oklch(0.985 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(0.985 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.96 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.965 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.92 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --sidebar-width: 12rem;
-}
-
-.dark {
-  --background: oklch(0.05 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.12 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.12 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.05 0 0);
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.18 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.2 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.32 0 0);
-  --input: oklch(0.30 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.18 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.22 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.35 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-/* Fallback: Apply dark theme before JS hydrates for users who prefer dark mode */
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    --background: oklch(0.05 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.12 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.12 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.05 0 0);
-    --secondary: oklch(0.18 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.18 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.2 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.396 0.141 25.723);
-    --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.32 0 0);
-    --input: oklch(0.30 0 0);
-    --ring: oklch(0.439 0 0);
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.18 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.22 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.35 0 0);
-    --sidebar-ring: oklch(0.439 0 0);
-  }
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--accordion-panel-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--accordion-panel-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
-  }
-  code, pre, kbd {
-    font-family: 'Geist Mono', ui-monospace, monospace;
-  }
-  ::selection {
-    background-color: color-mix(in oklch, var(--color-app) 20%, transparent);
-  }
-}
-
-@layer utilities {
-  .content-auto {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 200px;
-  }
-}
-
-#root {
-  opacity: 1;
-}
-
-/* Gradient button variant */
-.gradient-btn {
-  background-image: linear-gradient(to bottom right,
-    var(--color-app),
-    oklch(from var(--color-app) calc(l - 0.05) c h),
-    oklch(from var(--color-app) calc(l - 0.08) c h),
-    oklch(from var(--color-app) calc(l - 0.12) c h));
-  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--color-app) 40%, transparent 60%);
-}
-.gradient-btn:hover {
-  background-image: linear-gradient(to bottom right,
-    oklch(from var(--color-app) calc(l - 0.05) c h),
-    oklch(from var(--color-app) calc(l - 0.08) c h),
-    oklch(from var(--color-app) calc(l - 0.12) c h),
-    oklch(from var(--color-app) calc(l - 0.16) c h));
-}
-.gradient-btn::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
-  transform: translateX(-100%) skewX(12deg);
-  transition: transform 0.8s;
-}
-.gradient-btn:hover::after {
-  transform: translateX(100%) skewX(12deg);
-}
-
-/* Sidebar rail override - use transition-colors instead of transition-all */
-button[data-sidebar="rail"] {
-  transition-property: color, background-color, border-color !important;
-}
-button[data-sidebar="rail"]::after {
-  transition-property: color, background-color, border-color !important;
-}
-
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 96%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 28%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  /* Fallback for sidebar dark theme before JS hydrates */
-  @media (prefers-color-scheme: dark) {
-    :root:not(.light) {
-      --sidebar-background: 240 5.9% 10%;
-      --sidebar-foreground: 240 4.8% 95.9%;
-      --sidebar-primary: 224.3 76.3% 48%;
-      --sidebar-primary-foreground: 0 0% 100%;
-      --sidebar-accent: 240 3.7% 15.9%;
-      --sidebar-accent-foreground: 240 4.8% 95.9%;
-      --sidebar-border: 240 3.7% 28%;
-      --sidebar-ring: 217.2 91.2% 59.8%;
-    }
-  }
-}

package/.claude/worktrees/strange-feistel-abc494/views/LandingView.jsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useTheme } from 'next-themes';
-import { getState } from "../core/Context.jsx";
-import DynamicIcon from '../core/DynamicIcon.jsx';
-import { Sun, Moon, Check } from 'lucide-react';
-import { Button } from '../shadcn/ui/button.jsx';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../shadcn/ui/card.jsx';
-import { Badge } from '../shadcn/ui/badge.jsx';
-import { Separator } from '../shadcn/ui/separator.jsx';
-
-const CURRENT_YEAR = new Date().getFullYear();
-
-const DEFAULT_NAV_LINKS = [
-  { label: 'Features', href: '#features' },
-];
-
-const DEFAULT_NAV_LINKS_SUFFIX = [
-  { label: 'Terms', href: '/terms' },
-];
-
-const PRICING_LINK = { label: 'Pricing', href: '#pricing' };
-
-const PRIVACY_LINK = { label: 'Privacy', href: '/privacy' };
-const TERMS_LINK = { label: 'Terms', href: '/terms' };
-const EULA_LINK = { label: 'EULA', href: '/eula' };
-
-/**
- * Renders a feature icon from a name string or emoji.
- * If the name looks like an icon identifier (ASCII letters, digits, hyphens),
- * renders it via DynamicIcon with lazy loading. Otherwise treats it as
- * raw text (e.g. an emoji).
- *
- * @param {Object} props
- * @param {string} props.name - Icon name (kebab-case) or emoji string
- * @returns {JSX.Element} Icon component or text span
- */
-function FeatureIcon({ name }) {
-  const isIconName = /^[a-z][a-z0-9-]*$/i.test(name);
-  if (isIconName) return <DynamicIcon name={name} size={24} />;
-  return <span>{name}</span>;
-}
-
-/**
- * Default landing page with hero section, features grid, pricing card,
- * CTA section, and footer.
- *
- * Reads app branding, tagline, features, pricing, and layout from constants.
- * All sections are configurable via optional constants keys with sensible defaults.
- *
- * @returns {JSX.Element} Full landing page
- *
- * @example
- * import LandingView from '@stevederico/skateboard-ui/LandingView';
- *
- * // Used automatically by createSkateboardApp, or pass as landingPage prop:
- * createSkateboardApp({ constants, appRoutes, landingPage: <LandingView /> });
- */
-export default function LandingView() {
-  const { state } = getState();
-  const constants = state.constants;
-  const navigate = useNavigate();
-  const { theme, setTheme } = useTheme();
-  const isDarkMode = theme === 'dark';
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-
-      {/* Header */}
-      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-sm">
-        <nav className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
-          <div className="flex items-center gap-2">
-            <DynamicIcon name={constants.appIcon} size={28} className="text-primary" strokeWidth={2} />
-            <span className="text-2xl font-bold text-foreground">{constants.appName}</span>
-          </div>
-
-          <div className="hidden md:flex gap-6">
-            {(constants.navLinks || [
-              ...DEFAULT_NAV_LINKS,
-              ...(constants.stripeProducts?.length > 0 ? [PRICING_LINK] : []),
-              ...DEFAULT_NAV_LINKS_SUFFIX,
-            ]).map((link, index) => (
-              <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
-            ))}
-          </div>
-
-          <div className="flex gap-3 items-center">
-            <Button variant="outline" size="icon" onClick={() => setTheme(isDarkMode ? 'light' : 'dark')} aria-label="Toggle dark mode">
-              {isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
-            </Button>
-            <Button variant="default" onClick={() => navigate('/app')}>
-              {constants.cta}
-            </Button>
-          </div>
-        </nav>
-      </header>
-
-      <main>
-        {/* Hero Section */}
-        <section className="relative py-24 md:py-40 text-center overflow-hidden bg-app/15">
-          <div className="absolute inset-0 bg-app/25" style={{ maskImage: 'radial-gradient(ellipse at 20% 50%, black 0%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at 20% 50%, black 0%, transparent 70%)' }} />
-          <div className="absolute inset-0 bg-app/20" style={{ maskImage: 'radial-gradient(ellipse at 80% 30%, black 0%, transparent 60%)', WebkitMaskImage: 'radial-gradient(ellipse at 80% 30%, black 0%, transparent 60%)' }} />
-          <div className="relative max-w-4xl mx-auto px-6">
-            <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold mb-8 text-foreground leading-tight">
-              {constants.tagline}
-            </h1>
-            <Button variant="default" size="cta" onClick={() => navigate('/app')}>
-              {constants.cta}
-            </Button>
-          </div>
-        </section>
-
-        {/* Features Section */}
-        <section id="features" className="bg-muted py-16 md:py-24">
-          <div className="max-w-7xl mx-auto px-6">
-            <h2 className="text-center text-4xl md:text-5xl font-bold mb-16">{constants.features?.title || 'Features'}</h2>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-              {(constants.features?.items || []).map((feature, index) => (
-                <Card key={index} className="text-center">
-                  <CardHeader className="items-center">
-                    <div className="w-full flex justify-center">
-                      <Badge variant="secondary" className="text-2xl mb-2 h-auto px-3 py-1">
-                        <FeatureIcon name={feature.icon} />
-                      </Badge>
-                    </div>
-                    <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
-                    <CardDescription>{feature.description}</CardDescription>
-                  </CardHeader>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Pricing Section */}
-        {constants.stripeProducts?.length > 0 && (
-          <section id="pricing" className="py-16 md:py-24">
-            <div className="max-w-7xl mx-auto px-6">
-              <h2 className="text-center text-4xl md:text-5xl font-bold mb-16">{constants.pricing?.title || 'Pricing'}</h2>
-              <div className="max-w-md mx-auto">
-                <Card>
-                  <CardHeader className="text-center">
-                    <CardTitle className="text-2xl font-bold">{constants.stripeProducts[0]?.title || 'Monthly Plan'}</CardTitle>
-                    <CardDescription>per {constants.stripeProducts[0]?.interval || 'month'}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="text-center">
-                    <div className="text-5xl font-bold text-foreground mb-8">{constants.stripeProducts[0]?.price || '$5.00'}</div>
-                    <ul className="text-left space-y-4 mb-8">
-                      {(constants.stripeProducts[0]?.features || []).map((feature, index) => (
-                        <li key={index} className="flex items-center gap-2">
-                          <Check size={16} className="text-primary shrink-0" />
-                          {feature}
-                        </li>
-                      ))}
-                      {(constants.pricing?.extras || []).map((extra, index) => (
-                        <li key={`extra-${index}`} className="flex items-center gap-2">
-                          <Check size={16} className="text-primary shrink-0" />
-                          {extra}
-                        </li>
-                      ))}
-                    </ul>
-                  </CardContent>
-                  <CardFooter>
-                    <Button variant="default" size="cta" className="w-full" onClick={() => navigate('/app')}>
-                      {constants.cta}
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </div>
-            </div>
-          </section>
-        )}
-
-        {/* CTA Section */}
-        <section className="py-16 md:py-24">
-          <div className="max-w-7xl mx-auto px-6">
-            <Card className="bg-primary text-primary-foreground py-16 text-center">
-              <CardContent>
-                <h2 className="text-4xl md:text-5xl font-bold mb-10">{constants.ctaHeading || 'Ready To Build?'}</h2>
-                <Button variant="secondary" size="cta" onClick={() => navigate('/app')}>
-                  {constants.cta}
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </section>
-      </main>
-
-      {/* Footer */}
-      <footer className="py-10 bg-background">
-        <div className="max-w-7xl mx-auto px-6">
-          <Separator className="mb-8" />
-          <div className="flex justify-center gap-8 mb-6">
-            {(constants.footerLinks || [
-              ...(constants.privacyPolicy ? [PRIVACY_LINK] : []),
-              ...(constants.termsOfService ? [TERMS_LINK] : []),
-              ...(constants.EULA ? [EULA_LINK] : []),
-            ]).map((link, index) => (
-              <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
-            ))}
-          </div>
-          <p className="text-center text-muted-foreground">&copy; {CURRENT_YEAR} {constants.companyName}. {constants.copyrightText || 'All rights reserved.'}</p>
-        </div>
-      </footer>
-    </div>
-  );
-}

package/.claude/worktrees/strange-feistel-abc494/views/NotFound.jsx

@@ -1,27 +0,0 @@
-import { cn } from '../shadcn/lib/utils.js';
-import { Card, CardHeader, CardTitle, CardDescription } from '../shadcn/ui/card.jsx';
-
-/**
- * 404 page displayed for unmatched routes.
- *
- * @param {Object} props
- * @param {string} [props.className] - Additional CSS classes
- * @returns {JSX.Element} Not found message
- *
- * @example
- * import NotFound from '@stevederico/skateboard-ui/NotFound';
- *
- * <Route path="*" element={<NotFound />} />
- */
-export default function NotFound({ className, ...props }) {
-  return (
-    <div className={cn("flex items-center justify-center min-h-screen bg-background p-4", className)} {...props}>
-      <Card className="max-w-md w-full text-center">
-        <CardHeader>
-          <CardTitle className="text-4xl">404</CardTitle>
-          <CardDescription>Page not found. Are you sure you have the right URL?</CardDescription>
-        </CardHeader>
-      </Card>
-    </div>
-  );
-}

package/.claude/worktrees/strange-feistel-abc494/views/PaymentView.jsx

@@ -1,118 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { getState } from '../core/Context.jsx';
-import { getCurrentUser, getAppKey } from '../core/Utilities.js'
-import { Spinner } from '../shadcn/ui/spinner.jsx';
-
-// Whitelist of allowed redirect paths to prevent open redirect vulnerabilities
-const ALLOWED_REDIRECT_PREFIXES = ['/app/', '/'];
-const DEFAULT_REDIRECT = '/app/home';
-
-function isAllowedRedirect(path) {
-  try {
-    // Resolve relative to current origin; reject anything that escapes it.
-    const url = new URL(path, window.location.origin);
-    if (url.origin !== window.location.origin) return false;
-    return ALLOWED_REDIRECT_PREFIXES.some(prefix => url.pathname.startsWith(prefix));
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Post-payment redirect handler.
- *
- * Processes Stripe checkout success/cancel/portal return query params,
- * refreshes user data on successful payment, then redirects back to
- * the page the user was on before checkout.
- *
- * @returns {JSX.Element} Redirect loading screen
- *
- * @example
- * // Used internally by createSkateboardApp at /app/payment
- * <Route path="payment" element={<PaymentView />} />
- */
-export default function PaymentView() {
-  const { dispatch } = getState();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-
-  const fetchUser = useCallback(async () => {
-    try {
-      const data = await getCurrentUser();
-      if (data) {
-        dispatch({ type: 'SET_USER', payload: data });
-      }
-    } catch (error) {
-      console.error('Failed to fetch user after payment:', error);
-    }
-  }, [dispatch]);
-
-  useEffect(() => {
-    // Get query parameters
-    const success = searchParams.get('success') === 'true';
-    const canceled = searchParams.get('canceled') === 'true';
-    const portal = searchParams.get('portal') === 'return';
-
-    // Default redirect path
-    let redirectPath = DEFAULT_REDIRECT;
-
-    // Handle different cases
-    switch (true) {
-      case success:
-        redirectPath = localStorage.getItem(getAppKey('beforeCheckoutURL')) || redirectPath;
-        fetchUser();
-        break;
-      case canceled:
-        redirectPath = localStorage.getItem(getAppKey('beforeCheckoutURL')) || redirectPath;
-        break;
-      case portal:
-        redirectPath = localStorage.getItem(getAppKey('beforeManageURL')) || redirectPath;
-        break;
-      default:
-        redirectPath = localStorage.getItem(getAppKey('beforeCheckoutURL')) || redirectPath;
-        break;
-    }
-
-    // Normalize redirectPath: Strip any full URL to just the pathname
-    if (redirectPath.startsWith('http://') || redirectPath.startsWith('https://')) {
-      try {
-        const url = new URL(redirectPath);
-        redirectPath = url.pathname;
-      } catch (e) {
-        redirectPath = DEFAULT_REDIRECT;
-      }
-    }
-
-    // Ensure it starts with a '/'
-    if (!redirectPath.startsWith('/')) {
-      redirectPath = `/${redirectPath}`;
-    }
-
-    // Validate redirect path to prevent open redirect
-    if (!isAllowedRedirect(redirectPath)) {
-      redirectPath = DEFAULT_REDIRECT;
-    }
-
-    // Clear the stored URLs
-    localStorage.removeItem(getAppKey('beforeCheckoutURL'));
-    localStorage.removeItem(getAppKey('beforeManageURL'));
-
-    // Redirect after a delay
-    const timeoutId = setTimeout(() => {
-      navigate(redirectPath, { replace: true });
-    }, 1500);
-
-    // Cleanup timeout
-    return () => clearTimeout(timeoutId);
-  }, [navigate, searchParams, fetchUser]);
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-background">
-      <div className="flex flex-col items-center gap-3">
-        <Spinner className="size-6" />
-        <p className="text-sm text-muted-foreground">Redirecting...</p>
-      </div>
-    </div>
-  );
-}