vibefast-cli 1.3.3 → 1.3.4

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

@@ -0,0 +1,161 @@
+'use client';
+
+import { useAction, useQuery } from 'convex/react';
+import { api } from '@vibefast/backend/_generated/api';
+import { Button } from '@/components/ui/button';
+import { CreditCard, ExternalLink, Settings, AlertCircle } from 'lucide-react';
+import { useState } from 'react';
+
+// ============================================================================
+// Billing Section Component
+// Displays user's subscription status and billing management options
+// ============================================================================
+
+export function BillingSection() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const subscription = useQuery(api.payments.getSubscription);
+  const createPortalSession = useAction(api.payments.createPortalSession);
+
+  const cancelAt =
+    typeof subscription?.cancelAt === 'number' ? subscription.cancelAt : null;
+  const hasActiveSubscription =
+    subscription?.status === 'active' || subscription?.status === 'trialing';
+  const isCanceling = Boolean(subscription?.cancelAtPeriodEnd || cancelAt);
+
+  const handleManageBilling = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await createPortalSession({
+        returnUrl: window.location.href,
+      });
+
+      if (result.url) {
+        window.location.href = result.url;
+      }
+    } catch (err) {
+      console.error('Portal error:', err);
+      setError(
+        err instanceof Error ? err.message : 'Failed to open billing portal',
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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">
+      {/* Current Subscription */}
+      <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>
+
+      {/* Actions */}
+      {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/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/apps/web/components/payments/PricingSection.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState } from 'react';
+import { useAction } from 'convex/react';
+import { api } from '@vibefast/backend/_generated/api';
+import { PricingCard } from './PricingCard';
+import { PLANS, type Plan } from '@/lib/plans';
+
+// ============================================================================
+// Pricing Section Component
+// Displays all available pricing plans with checkout functionality
+// Plans are imported from @/lib/plans.ts for single source of truth
+// ============================================================================
+
+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 [loadingPlan, setLoadingPlan] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const createCheckout = useAction(api.payments.createCheckout);
+
+  const handleSelectPlan = async (plan: (typeof PLANS)[0]) => {
+    setLoadingPlan(plan.id);
+    setError(null);
+
+    try {
+      const result = await createCheckout({
+        priceId: plan.priceId,
+        successUrl: `${window.location.origin}/billing?success=true`,
+        cancelUrl: `${window.location.origin}/pricing?canceled=true`,
+      });
+
+      if (result.url) {
+        window.location.href = result.url;
+      } else {
+        throw new Error('No checkout URL returned');
+      }
+    } 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/apps/web/components/payments/index.ts

@@ -0,0 +1,10 @@
+// ============================================================================
+// Payment Components Barrel Export
+// ============================================================================
+
+export { PricingCard } from './PricingCard';
+export { PricingSection } from './PricingSection';
+export { BillingSection } from './BillingSection';
+
+// Re-export plan config for convenience
+export { PLANS, type Plan, getPlanById, getPlanByPriceId } from '@/lib/plans';

package/recipes/stripe/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/packages/backend/convex/payments/config.ts

@@ -0,0 +1,127 @@
+import type { Plan } from './types';
+
+// ============================================================================
+// Payment Configuration
+// Define your pricing plans and provider settings here
+// ============================================================================
+
+/**
+ * Supported payment providers
+ */
+export type PaymentProvider = 'stripe' | 'lemonsqueezy';
+
+/**
+ * Get the active payment provider from environment
+ */
+export const getPaymentProvider = (): PaymentProvider => {
+  const provider = process.env.PAYMENT_PROVIDER as PaymentProvider;
+  if (!provider) {
+    throw new Error(
+      'PAYMENT_PROVIDER environment variable must be set to "stripe" or "lemonsqueezy"',
+    );
+  }
+  if (!['stripe', 'lemonsqueezy'].includes(provider)) {
+    throw new Error(
+      `Invalid PAYMENT_PROVIDER: "${provider}". Must be "stripe" or "lemonsqueezy"`,
+    );
+  }
+  return provider;
+};
+
+/**
+ * Get the site URL for redirects
+ */
+export const getSiteUrl = (): string => {
+  const url = process.env.SITE_URL;
+  if (!url) {
+    throw new Error('SITE_URL environment variable must be set');
+  }
+  return url.replace(/\/$/, ''); // Remove trailing slash
+};
+
+/**
+ * Default success/cancel URLs for checkout
+ */
+export const getCheckoutUrls = (
+  customSuccess?: string,
+  customCancel?: string,
+) => {
+  const siteUrl = getSiteUrl();
+  return {
+    successUrl: customSuccess ?? `${siteUrl}/billing?success=true`,
+    cancelUrl: customCancel ?? `${siteUrl}/pricing?canceled=true`,
+  };
+};
+
+// ============================================================================
+// Pricing Plans Configuration
+// Update these with your actual plan details and provider-specific price IDs
+// ============================================================================
+
+/**
+ * Define your pricing plans here.
+ * The `priceId` should be:
+ * - For Stripe: The Stripe Price ID (e.g., "price_1234...")
+ * - For LemonSqueezy: The Variant ID (e.g., "123456")
+ */
+export const PLANS: Plan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'Perfect for individuals getting started',
+    price: '$9/mo',
+    priceId: process.env.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: process.env.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: process.env.PLAN_ENTERPRISE_PRICE_ID ?? 'price_enterprise',
+    interval: 'month',
+    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/packages/backend/convex/payments/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Payment Functions Entry Point
+ *
+ * This file exports the active payment provider's functions.
+ * To switch providers, change the import below from './providers/stripe'
+ * to './providers/lemonsqueezy'. CLI tools modify this import line.
+ *
+ * All providers export the same interface:
+ * - createCheckout: Create a checkout session
+ * - createPortalSession: Create billing portal session
+ * - getSubscription: Get user's active subscription
+ * - cancelSubscription: Cancel a subscription
+ * - getPayments: Get payment history
+ */
+
+// ============================================================================
+// Provider Selection
+// CLI tools modify this line to switch providers.
+// Options: './providers/stripe' or './providers/lemonsqueezy'
+// ============================================================================
+export type PaymentProvider = 'stripe' | 'lemonsqueezy';
+
+// ACTIVE_PROVIDER: Change to 'lemonsqueezy' when switching providers
+export const ACTIVE_PROVIDER: PaymentProvider = 'stripe';
+
+// ============================================================================
+// Provider Exports
+// Change this import to switch providers:
+// - './providers/stripe' for Stripe
+// - './providers/lemonsqueezy' for LemonSqueezy
+// ============================================================================
+export {
+  createCheckout,
+  createPortalSession,
+  getSubscription,
+  cancelSubscription,
+  getPayments,
+} from './providers/stripe';
+
+// Re-export shared config and types for frontend use
+export {
+  PLANS,
+  getPlanById,
+  getPlanByPriceId,
+  getPaymentProvider,
+} from './config';
+export type {
+  Plan,
+  Subscription,
+  SubscriptionStatus,
+  BillingInterval,
+} from './types';