@stevederico/skateboard-ui 2.22.0 → 3.0.0

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

@@ -0,0 +1,300 @@
+@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

@@ -0,0 +1,207 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,118 @@
+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>
+  );
+}