vibecarbon 0.1.0

package/carbon/src/client/pages/settings/Billing.tsx

@@ -0,0 +1,473 @@
+import { type Plan, type PlanId, plans } from '@shared/pricing';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AlertCircle, Check, CreditCard, ExternalLink, Loader2, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { PageHeader } from '@/components/PageHeader';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { supabase } from '@/lib/supabase';
+import { ContentPanel } from '../../components/ContentPanel';
+
+interface BillingStatus {
+  configured: boolean;
+}
+
+interface PricesResponse {
+  configured: boolean;
+  plans: (Plan & {
+    stripePriceIds: { monthly?: string } | null;
+  })[];
+}
+
+interface Subscription {
+  id: string;
+  status: string;
+  priceId: string;
+  planId: PlanId;
+  currentPeriodEnd: string;
+  cancelAtPeriodEnd: boolean;
+  product: {
+    id: string;
+    name: string;
+    description?: string;
+  };
+  price: {
+    id: string;
+    unitAmount: number;
+    currency: string;
+    interval: string;
+  };
+}
+
+interface SubscriptionResponse {
+  subscription: Subscription | null;
+  status: string;
+}
+
+async function getAuthHeaders() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  return {
+    'Content-Type': 'application/json',
+    Authorization: session ? `Bearer ${session.access_token}` : '',
+  };
+}
+
+async function fetchBillingStatus(): Promise<BillingStatus> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/status', { headers });
+  if (!response.ok) throw new Error('Failed to fetch billing status');
+  return response.json();
+}
+
+async function fetchPrices(): Promise<PricesResponse> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/prices', { headers });
+  if (!response.ok) throw new Error('Failed to fetch prices');
+  return response.json();
+}
+
+async function fetchSubscription(): Promise<SubscriptionResponse> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/subscription?type=user', { headers });
+  if (!response.ok) throw new Error('Failed to fetch subscription');
+  return response.json();
+}
+
+async function createCheckout(priceId: string): Promise<{ url: string }> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/checkout', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ priceId, type: 'user' }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to create checkout');
+  }
+  return response.json();
+}
+
+async function createSetupSession(): Promise<{ url: string }> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/setup', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ type: 'user' }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to create setup session');
+  }
+  return response.json();
+}
+
+async function createPortalSession(): Promise<{ url: string }> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/billing/portal', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ type: 'user' }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to create portal session');
+  }
+  return response.json();
+}
+
+function formatCurrency(amount: number, currency: string): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency.toUpperCase(),
+  }).format(amount / 100);
+}
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export default function Billing() {
+  const { t } = useTranslation();
+  const { session } = useAuth();
+
+  const { data: billingStatus, isLoading: isLoadingStatus } = useQuery({
+    queryKey: ['billing-status'],
+    queryFn: fetchBillingStatus,
+    enabled: !!session,
+  });
+
+  const { data: pricesData } = useQuery({
+    queryKey: ['billing-prices'],
+    queryFn: fetchPrices,
+    enabled: !!session,
+  });
+
+  const { data: subscriptionData, isLoading: isLoadingSubscription } = useQuery({
+    queryKey: ['subscription'],
+    queryFn: fetchSubscription,
+    enabled: !!session && billingStatus?.configured,
+  });
+
+  const checkoutMutation = useMutation({
+    mutationFn: createCheckout,
+    onSuccess: (data) => {
+      window.location.href = data.url;
+    },
+  });
+
+  const portalMutation = useMutation({
+    mutationFn: createPortalSession,
+    onSuccess: (data) => {
+      window.location.href = data.url;
+    },
+  });
+
+  const setupMutation = useMutation({
+    mutationFn: createSetupSession,
+    onSuccess: (data) => {
+      window.location.href = data.url;
+    },
+  });
+
+  const isLoading = isLoadingStatus || isLoadingSubscription;
+  const subscription = subscriptionData?.subscription;
+  const hasActiveSubscription =
+    subscription && (subscription.status === 'active' || subscription.status === 'trialing');
+  const currentPlanId: PlanId = subscription?.planId ?? 'free';
+
+  type DisplayPlan = Plan & { stripePriceIds?: { monthly?: string } | null };
+  const displayPlans: DisplayPlan[] = pricesData?.plans ?? plans;
+
+  function getPriceId(plan: DisplayPlan): string | undefined {
+    return plan.stripePriceIds?.monthly;
+  }
+
+  return (
+    <>
+      <PageHeader title={t('billing.title')} description={t('billing.description')} />
+
+      <ContentPanel variant="narrow">
+        {!billingStatus?.configured && !isLoadingStatus && (
+          <Alert>
+            <AlertCircle className="size-4" />
+            <AlertDescription>
+              Billing is not configured. Set{' '}
+              <code className="bg-muted px-1 rounded">STRIPE_SECRET_KEY</code> and{' '}
+              <code className="bg-muted px-1 rounded">STRIPE_WEBHOOK_SECRET</code> in your
+              environment to enable billing.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* Current subscription status */}
+        {hasActiveSubscription && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('billing.currentPlan')}</CardTitle>
+              <CardDescription>
+                You are on the{' '}
+                <span className="font-semibold text-foreground">{subscription.product.name}</span>{' '}
+                plan.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <p className="font-semibold">{subscription.product.name}</p>
+                    {subscription.status === 'trialing' && (
+                      <Badge variant="secondary">{t('billing.trial')}</Badge>
+                    )}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {formatCurrency(subscription.price.unitAmount, subscription.price.currency)}/
+                    {subscription.price.interval}
+                  </p>
+                  {subscription.cancelAtPeriodEnd && (
+                    <p className="text-sm text-warning mt-1">
+                      {t('billing.cancelsOn', {
+                        date: formatDate(subscription.currentPeriodEnd),
+                      })}
+                    </p>
+                  )}
+                </div>
+                <Button
+                  variant="outline"
+                  onClick={() => portalMutation.mutate()}
+                  disabled={portalMutation.isPending}
+                >
+                  {portalMutation.isPending ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : (
+                    <ExternalLink className="mr-2 size-4" />
+                  )}
+                  {t('common.manage')}
+                </Button>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {subscription.cancelAtPeriodEnd
+                  ? 'Your subscription will end on '
+                  : 'Next billing date: '}
+                {formatDate(subscription.currentPeriodEnd)}
+              </p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Plan selection */}
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {hasActiveSubscription ? t('billing.changePlan') : t('billing.choosePlan')}
+            </CardTitle>
+            <CardDescription>
+              {hasActiveSubscription
+                ? t('billing.changePlanDescription')
+                : t('billing.choosePlanDescription')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <>
+                {/* Plan cards */}
+                <div className="grid gap-4 md:grid-cols-3">
+                  {displayPlans.map((plan) => {
+                    const isCurrentPlan = plan.id === currentPlanId;
+                    const priceId = getPriceId(plan);
+                    const price = plan.price.monthly;
+
+                    return (
+                      <div
+                        key={plan.id}
+                        className={`relative rounded-lg border p-5 flex flex-col ${
+                          plan.popular ? 'border-primary shadow-sm' : ''
+                        } ${isCurrentPlan ? 'bg-muted/50' : ''}`}
+                      >
+                        {plan.popular && (
+                          <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                            <Badge>{t('common.popular')}</Badge>
+                          </div>
+                        )}
+                        <div className="mb-4">
+                          <h3 className="font-semibold text-lg">{plan.name}</h3>
+                          <p className="text-sm text-muted-foreground mt-1">{plan.description}</p>
+                        </div>
+                        <div className="mb-4">
+                          <span className="text-3xl font-bold">
+                            {price === 0 ? t('common.free') : `$${(price / 100).toFixed(0)}`}
+                          </span>
+                          {price > 0 && <span className="text-muted-foreground text-sm">/mo</span>}
+                        </div>
+                        <ul className="space-y-2 mb-6 flex-1">
+                          {plan.features.map((feature) => (
+                            <li key={feature.text} className="flex items-center gap-2 text-sm">
+                              {feature.included ? (
+                                <Check className="size-4 text-primary shrink-0" />
+                              ) : (
+                                <X className="size-4 text-muted-foreground/50 shrink-0" />
+                              )}
+                              <span className={feature.included ? '' : 'text-muted-foreground/50'}>
+                                {feature.text}
+                              </span>
+                            </li>
+                          ))}
+                        </ul>
+                        {isCurrentPlan ? (
+                          <Button variant="outline" disabled className="w-full">
+                            {t('billing.currentPlanButton')}
+                          </Button>
+                        ) : hasActiveSubscription ? (
+                          <Button
+                            variant={plan.popular ? 'default' : 'outline'}
+                            className="w-full"
+                            onClick={() => portalMutation.mutate()}
+                            disabled={portalMutation.isPending}
+                          >
+                            {portalMutation.isPending && (
+                              <Loader2 className="mr-2 size-4 animate-spin" />
+                            )}
+                            {t('billing.switchPlan')}
+                          </Button>
+                        ) : plan.id === 'free' ? (
+                          <Button variant="outline" disabled className="w-full">
+                            {t('billing.currentPlanButton')}
+                          </Button>
+                        ) : (
+                          <Button
+                            variant={plan.popular ? 'default' : 'outline'}
+                            className="w-full"
+                            onClick={() => priceId && checkoutMutation.mutate(priceId)}
+                            disabled={
+                              checkoutMutation.isPending || !billingStatus?.configured || !priceId
+                            }
+                          >
+                            {checkoutMutation.isPending && (
+                              <Loader2 className="mr-2 size-4 animate-spin" />
+                            )}
+                            {t('billing.upgrade')}
+                          </Button>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {checkoutMutation.error && (
+                  <p className="text-sm text-destructive text-center">
+                    {checkoutMutation.error.message}
+                  </p>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Payment method */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('billing.paymentMethod')}</CardTitle>
+            <CardDescription>{t('billing.paymentMethodDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {hasActiveSubscription ? (
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+                    <CreditCard className="size-5 text-muted-foreground" />
+                  </div>
+                  <div>
+                    <p className="font-medium">{t('billing.paymentOnFile')}</p>
+                    <p className="text-sm text-muted-foreground">{t('billing.manageInPortal')}</p>
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  onClick={() => portalMutation.mutate()}
+                  disabled={portalMutation.isPending}
+                >
+                  {portalMutation.isPending ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : (
+                    <ExternalLink className="mr-2 size-4" />
+                  )}
+                  {t('common.update')}
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between rounded-lg border border-dashed p-6">
+                <div className="flex items-center gap-3">
+                  <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+                    <CreditCard className="size-5 text-muted-foreground" />
+                  </div>
+                  <div>
+                    <p className="font-medium">{t('billing.noPaymentMethod')}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {t('billing.addCardDescription')}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  onClick={() => setupMutation.mutate()}
+                  disabled={setupMutation.isPending || !billingStatus?.configured}
+                >
+                  {setupMutation.isPending ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : (
+                    <CreditCard className="mr-2 size-4" />
+                  )}
+                  {t('billing.addCard')}
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Billing history */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('billing.billingHistory')}</CardTitle>
+            <CardDescription>{t('billing.billingHistoryDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {hasActiveSubscription ? (
+              <div className="flex flex-col items-center justify-center py-6 text-center">
+                <p className="text-muted-foreground mb-4">{t('billing.viewInPortal')}</p>
+                <Button
+                  variant="outline"
+                  onClick={() => portalMutation.mutate()}
+                  disabled={portalMutation.isPending}
+                >
+                  {portalMutation.isPending ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : (
+                    <ExternalLink className="mr-2 size-4" />
+                  )}
+                  {t('billing.viewInvoices')}
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <p className="text-muted-foreground">{t('billing.noBillingHistory')}</p>
+                <p className="text-sm text-muted-foreground">{t('billing.invoicesAppearHere')}</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </ContentPanel>
+    </>
+  );
+}

package/carbon/src/client/pages/settings/Profile.tsx

@@ -0,0 +1,160 @@
+import { useMutation } from '@tanstack/react-query';
+import { Loader2, TriangleAlert } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { ContentPanel } from '@/components/ContentPanel';
+import { AvatarUpload } from '@/components/FileUpload';
+import { PageHeader } from '@/components/PageHeader';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { getAuthHeaders } from '@/lib/api';
+import { supabase } from '@/lib/supabase';
+
+async function deleteAccount(): Promise<void> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/me', {
+    method: 'DELETE',
+    headers,
+  });
+  if (!response.ok) {
+    const data = await response.json();
+    throw new Error(data.error || 'Failed to delete account');
+  }
+}
+
+export default function Profile() {
+  const { t } = useTranslation();
+  const { user, isSuperAdmin, signOut } = useAuth();
+  const navigate = useNavigate();
+  const displayName = user?.user_metadata?.full_name || '';
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteAccount,
+    onSuccess: async () => {
+      await signOut();
+      navigate('/login');
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  async function handleAvatarUpload(url: string) {
+    await supabase.auth.updateUser({ data: { avatar_url: url } });
+  }
+
+  return (
+    <>
+      <PageHeader title={t('profile.title')} description={t('profile.description')} />
+
+      <ContentPanel variant="narrow">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('profile.profileInfo')}</CardTitle>
+            <CardDescription>{t('profile.profileInfoDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {user && (
+              <AvatarUpload
+                userId={user.id}
+                currentUrl={user.user_metadata?.avatar_url}
+                onUpload={handleAvatarUpload}
+              />
+            )}
+
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="name">{t('profile.fullName')}</Label>
+                <Input
+                  id="name"
+                  defaultValue={displayName}
+                  placeholder={t('profile.namePlaceholder')}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="email">{t('profile.email')}</Label>
+                <Input id="email" type="email" defaultValue={user?.email || ''} disabled />
+                <p className="text-xs text-muted-foreground">{t('profile.emailChangeHint')}</p>
+              </div>
+            </div>
+
+            <Button>{t('common.save')}</Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('profile.account')}</CardTitle>
+            <CardDescription>{t('profile.accountDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">{t('dashboard.userId')}</p>
+                <code className="text-sm text-muted-foreground">{user?.id}</code>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">{t('profile.deleteAccount')}</p>
+                <p className="text-sm text-muted-foreground">
+                  {t('profile.deleteAccountDescription')}
+                </p>
+              </div>
+              <Button variant="destructive" size="sm" onClick={() => setDeleteDialogOpen(true)}>
+                {t('common.delete')}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </ContentPanel>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogMedia className="bg-destructive/10">
+              <TriangleAlert className="text-destructive" />
+            </AlertDialogMedia>
+            <AlertDialogTitle>{t('profile.deleteAccountConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {isSuperAdmin
+                ? t('profile.superAdminCannotDelete')
+                : t('profile.deleteAccountConfirmDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            {!isSuperAdmin && (
+              <AlertDialogAction
+                variant="destructive"
+                disabled={deleteMutation.isPending}
+                onClick={() => deleteMutation.mutate()}
+              >
+                {deleteMutation.isPending && <Loader2 className="mr-2 size-4 animate-spin" />}
+                {t('profile.deleteAccountConfirmButton')}
+              </AlertDialogAction>
+            )}
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}