vibefast-cli 1.3.4 → 1.3.5

package/recipes/stripe-supabase/apps/web/components/payments/BillingSection.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { CreditCard, ExternalLink, Settings, AlertCircle } from 'lucide-react';
+import { useAuth, useSupabaseClient } from '@/lib/supabase-provider';
+
+type Subscription = {
+  id: string;
+  provider: string;
+  status: string;
+  planId?: string;
+  priceId?: string;
+  currentPeriodEnd?: number;
+  cancelAt?: number;
+  cancelAtPeriodEnd?: boolean;
+};
+
+// ============================================================================
+// Billing Section Component (Supabase)
+// Displays user's subscription status and billing management options
+// ============================================================================
+
+export function BillingSection() {
+  const { isAuthenticated, isLoading } = useAuth();
+  const supabase = useSupabaseClient();
+  const [subscription, setSubscription] = useState<Subscription | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isAuthenticated || isLoading) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const loadSubscription = async () => {
+      try {
+        const { data, error: invokeError } = await supabase.functions.invoke(
+          'payments',
+          { body: { action: 'subscription' } },
+        );
+
+        if (invokeError) {
+          throw invokeError;
+        }
+
+        if (!data?.ok) {
+          throw new Error(data?.message || 'Failed to load subscription');
+        }
+
+        if (!cancelled) {
+          setSubscription(data.subscription ?? null);
+        }
+      } catch (err) {
+        console.error('Subscription error:', err);
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : 'Failed to load subscription',
+          );
+        }
+      }
+    };
+
+    loadSubscription();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isAuthenticated, isLoading, supabase]);
+
+  const handleManageBilling = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { data, error: invokeError } = await supabase.functions.invoke(
+        'payments',
+        {
+          body: {
+            action: 'portal',
+            returnUrl: window.location.href,
+          },
+        },
+      );
+
+      if (invokeError) {
+        throw invokeError;
+      }
+
+      if (!data?.ok || !data.url) {
+        throw new Error(data?.message || 'No portal URL returned');
+      }
+
+      window.location.href = data.url;
+    } catch (err) {
+      console.error('Portal error:', err);
+      setError(
+        err instanceof Error ? err.message : 'Failed to open billing portal',
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const cancelAt = typeof subscription?.cancelAt === 'number'
+    ? subscription.cancelAt
+    : null;
+  const hasActiveSubscription =
+    subscription?.status === 'active' || subscription?.status === 'trialing';
+  const isCanceling = Boolean(subscription?.cancelAtPeriodEnd || cancelAt);
+
+  const formatDate = (timestamp?: number) => {
+    if (!timestamp) return 'N/A';
+    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="rounded-lg border bg-card p-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <CreditCard className="h-5 w-5 text-muted-foreground" />
+            <h3 className="font-semibold">Subscription</h3>
+          </div>
+          <span
+            className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
+              hasActiveSubscription
+                ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+                : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300'
+            }`}
+          >
+            {hasActiveSubscription
+              ? subscription?.status === 'trialing'
+                ? 'Trial'
+                : isCanceling
+                  ? 'Canceling'
+                  : 'Active'
+              : 'No Plan'}
+          </span>
+        </div>
+
+        {subscription && hasActiveSubscription && (
+          <div className="mt-4 rounded-md bg-muted p-4">
+            <div className="grid gap-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Plan</span>
+                <span className="font-medium">
+                  {subscription.planId || 'Custom Plan'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">
+                  {isCanceling ? 'Ends' : 'Renews'}
+                </span>
+                <span className="font-medium">
+                  {formatDate(
+                    isCanceling && cancelAt
+                      ? cancelAt
+                      : subscription.currentPeriodEnd,
+                  )}
+                </span>
+              </div>
+              {isCanceling && (
+                <div className="mt-2 flex items-center gap-2 text-amber-600 dark:text-amber-400">
+                  <AlertCircle className="h-4 w-4" />
+                  <span className="text-xs">Scheduled to cancel</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {!hasActiveSubscription && (
+          <p className="mt-4 text-sm text-muted-foreground">
+            You don&apos;t have an active subscription. Choose a plan to get
+            started.
+          </p>
+        )}
+      </div>
+
+      {error && (
+        <div className="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3 sm:flex-row">
+        {hasActiveSubscription && (
+          <Button
+            onClick={handleManageBilling}
+            disabled={loading}
+            variant="outline"
+            className="flex-1"
+          >
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                Opening...
+              </span>
+            ) : (
+              <>
+                <Settings className="mr-2 h-4 w-4" />
+                Manage Billing
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button variant={hasActiveSubscription ? 'outline' : 'default'} asChild>
+          <a href="/pricing">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            {hasActiveSubscription ? 'Change Plan' : 'View Plans'}
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/recipes/stripe-supabase/apps/web/components/payments/PricingCard.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// ============================================================================
+// Pricing Card Component
+// Reusable card for displaying a single pricing plan
+// ============================================================================
+
+interface PricingCardProps {
+  name: string;
+  price: string;
+  description?: string;
+  features: string[];
+  popular?: boolean;
+  onSelect: () => void;
+  loading?: boolean;
+  buttonText?: string;
+  disabled?: boolean;
+}
+
+export function PricingCard({
+  name,
+  price,
+  description,
+  features,
+  popular,
+  onSelect,
+  loading,
+  buttonText = 'Get Started',
+  disabled,
+}: PricingCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col rounded-2xl border bg-card p-6 shadow-sm transition-all',
+        popular && 'border-primary shadow-lg ring-1 ring-primary',
+        'hover:shadow-md',
+      )}
+    >
+      {popular && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
+          Most Popular
+        </div>
+      )}
+
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold">{name}</h3>
+        {description && (
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      <div className="mb-6">
+        <span className="text-3xl font-bold">{price}</span>
+      </div>
+
+      <ul className="mb-6 flex-1 space-y-3">
+        {features.map((feature, index) => (
+          <li key={index} className="flex items-start gap-2 text-sm">
+            <Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+            <span>{feature}</span>
+          </li>
+        ))}
+      </ul>
+
+      <Button
+        onClick={onSelect}
+        disabled={loading || disabled}
+        className="w-full"
+        variant={popular ? 'default' : 'outline'}
+        size="lg"
+      >
+        {loading ? (
+          <span className="flex items-center gap-2">
+            <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+            Processing...
+          </span>
+        ) : (
+          buttonText
+        )}
+      </Button>
+    </div>
+  );
+}

package/recipes/stripe-supabase/apps/web/components/payments/PricingSection.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState } from 'react';
+import { PricingCard } from './PricingCard';
+import { PLANS, type Plan } from '@/lib/plans';
+import { useAuth, useSupabaseClient } from '@/lib/supabase-provider';
+
+// ============================================================================
+// Pricing Section Component (Supabase)
+// Displays all available pricing plans with checkout functionality
+// ============================================================================
+
+interface PricingSectionProps {
+  plans?: Plan[];
+  title?: string;
+  subtitle?: string;
+}
+
+export function PricingSection({
+  plans = PLANS,
+  title = 'Simple, Transparent Pricing',
+  subtitle = 'Choose the plan that fits your needs. Cancel anytime.',
+}: PricingSectionProps) {
+  const { isAuthenticated } = useAuth();
+  const supabase = useSupabaseClient();
+  const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSelectPlan = async (plan: (typeof PLANS)[0]) => {
+    if (!isAuthenticated) {
+      setError('Please sign in to continue.');
+      return;
+    }
+
+    setLoadingPlan(plan.id);
+    setError(null);
+
+    try {
+      const { data, error: invokeError } = await supabase.functions.invoke(
+        'payments',
+        {
+          body: {
+            action: 'checkout',
+            priceId: plan.priceId,
+            successUrl: `${window.location.origin}/billing?success=true`,
+            cancelUrl: `${window.location.origin}/pricing?canceled=true`,
+          },
+        },
+      );
+
+      if (invokeError) {
+        throw invokeError;
+      }
+
+      if (!data?.ok || !data.url) {
+        throw new Error(data?.message || 'No checkout URL returned');
+      }
+
+      window.location.href = data.url;
+    } catch (err) {
+      console.error('Checkout error:', err);
+      setError(
+        err instanceof Error ? err.message : 'Failed to start checkout',
+      );
+    } finally {
+      setLoadingPlan(null);
+    }
+  };
+
+  return (
+    <section className="py-16">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
+        <p className="mt-2 text-muted-foreground">{subtitle}</p>
+      </div>
+
+      {error && (
+        <div className="mx-auto mt-6 max-w-md rounded-lg border border-destructive bg-destructive/10 p-4 text-center text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="mt-10 grid gap-6 md:grid-cols-3">
+        {plans.map((plan) => (
+          <PricingCard
+            key={plan.id}
+            name={plan.name}
+            description={plan.description}
+            price={plan.price}
+            features={plan.features}
+            popular={plan.popular}
+            loading={loadingPlan === plan.id}
+            disabled={loadingPlan !== null && loadingPlan !== plan.id}
+            onSelect={() => handleSelectPlan(plan)}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/recipes/stripe-supabase/apps/web/components/payments/index.ts

@@ -0,0 +1,2 @@
+export { PricingSection } from './PricingSection';
+export { BillingSection } from './BillingSection';

package/recipes/stripe-supabase/apps/web/lib/plans.ts

@@ -0,0 +1,84 @@
+// ============================================================================
+// Shared Plans Configuration (Frontend)
+// Single source of truth for pricing plans in the web app
+// ============================================================================
+
+/**
+ * Plan definition for pricing display
+ */
+export interface Plan {
+  id: string;
+  name: string;
+  description?: string;
+  price: string;
+  priceId: string;
+  features: string[];
+  popular?: boolean;
+}
+
+/**
+ * Pricing plans configuration
+ * Update these with your actual pricing plans from Stripe/LemonSqueezy
+ *
+ * Note: Uses NEXT_PUBLIC_ prefixed env vars for client-side access
+ * The backend config.ts uses non-prefixed versions for server-side
+ */
+export const PLANS: Plan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'Perfect for individuals getting started',
+    price: '$9/mo',
+    priceId: process.env.NEXT_PUBLIC_PLAN_STARTER_PRICE_ID ?? 'price_starter',
+    features: [
+      '100 AI credits per month',
+      'Basic support',
+      'Single project',
+      'Community access',
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    description: 'Best for professionals and growing teams',
+    price: '$29/mo',
+    priceId: process.env.NEXT_PUBLIC_PLAN_PRO_PRICE_ID ?? 'price_pro',
+    features: [
+      'Unlimited AI credits',
+      'Priority support',
+      'Unlimited projects',
+      'API access',
+      'Advanced analytics',
+    ],
+    popular: true,
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'For large teams with custom needs',
+    price: '$99/mo',
+    priceId:
+      process.env.NEXT_PUBLIC_PLAN_ENTERPRISE_PRICE_ID ?? 'price_enterprise',
+    features: [
+      'Everything in Pro',
+      'Dedicated support',
+      'Custom integrations',
+      'SLA guarantee',
+      'SSO & advanced security',
+    ],
+  },
+];
+
+/**
+ * Get a plan by its ID
+ */
+export const getPlanById = (planId: string): Plan | undefined => {
+  return PLANS.find((plan) => plan.id === planId);
+};
+
+/**
+ * Get a plan by its provider-specific price ID
+ */
+export const getPlanByPriceId = (priceId: string): Plan | undefined => {
+  return PLANS.find((plan) => plan.priceId === priceId);
+};

package/recipes/stripe-supabase/packages/backend/supabase/functions/payments/config.ts

@@ -0,0 +1,92 @@
+import type { PaymentProvider, Plan } from './types';
+
+export const getPaymentProvider = (): PaymentProvider => {
+  const provider = (Deno.env.get('PAYMENT_PROVIDER') ||
+    '') as PaymentProvider;
+  if (!provider) {
+    throw new Error(
+      'PAYMENT_PROVIDER environment variable must be set to "stripe" or "lemonsqueezy"',
+    );
+  }
+  if (provider !== 'stripe' && provider !== 'lemonsqueezy') {
+    throw new Error(
+      `Invalid PAYMENT_PROVIDER: "${provider}". Must be "stripe" or "lemonsqueezy"`,
+    );
+  }
+  return provider;
+};
+
+export const getSiteUrl = (): string => {
+  const url = Deno.env.get('SITE_URL');
+  if (!url) {
+    throw new Error('SITE_URL environment variable must be set');
+  }
+  return url.replace(/\/$/, '');
+};
+
+export const getCheckoutUrls = (
+  customSuccess?: string,
+  customCancel?: string,
+) => {
+  const siteUrl = getSiteUrl();
+  return {
+    successUrl: customSuccess ?? `${siteUrl}/billing?success=true`,
+    cancelUrl: customCancel ?? `${siteUrl}/pricing?canceled=true`,
+  };
+};
+
+export const PLANS: Plan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'Perfect for individuals getting started',
+    price: '$9/mo',
+    priceId: Deno.env.get('PLAN_STARTER_PRICE_ID') ?? 'price_starter',
+    interval: 'month',
+    features: [
+      '100 AI credits per month',
+      'Basic support',
+      'Single project',
+      'Community access',
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    description: 'Best for professionals and growing teams',
+    price: '$29/mo',
+    priceId: Deno.env.get('PLAN_PRO_PRICE_ID') ?? 'price_pro',
+    interval: 'month',
+    features: [
+      'Unlimited AI credits',
+      'Priority support',
+      'Unlimited projects',
+      'API access',
+      'Advanced analytics',
+    ],
+    popular: true,
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'For large teams with custom needs',
+    price: '$99/mo',
+    priceId: Deno.env.get('PLAN_ENTERPRISE_PRICE_ID') ?? 'price_enterprise',
+    interval: 'month',
+    features: [
+      'Everything in Pro',
+      'Dedicated support',
+      'Custom integrations',
+      'SLA guarantee',
+      'SSO & advanced security',
+    ],
+  },
+];
+
+export const getPlanById = (planId: string): Plan | undefined => {
+  return PLANS.find((plan) => plan.id === planId);
+};
+
+export const getPlanByPriceId = (priceId: string): Plan | undefined => {
+  return PLANS.find((plan) => plan.priceId === priceId);
+};