@fayz-ai/saas 0.1.6

package/src/shell/components/auth/SignupForm.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react'
+import { cn } from '../../lib/cn'
+import { useAuth } from '../../hooks/useAuth'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface SignupFormProps {
+  onSuccess?: () => void
+  termsUrl?: string
+  privacyUrl?: string
+  className?: string
+}
+
+export function SignupForm({
+  onSuccess,
+  termsUrl,
+  privacyUrl,
+  className,
+}: SignupFormProps) {
+  const { signUp, loading } = useAuth()
+  const { t } = useTranslation()
+  const [fullName, setFullName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(null)
+
+    if (password !== confirmPassword) {
+      setError(t('auth.signup.passwordsMismatch'))
+      return
+    }
+
+    if (password.length < 8) {
+      setError(t('auth.signup.passwordMinLength'))
+      return
+    }
+
+    try {
+      const result = await signUp(email, password, fullName)
+      if (result.requiresEmailVerification) {
+        setSuccess(t('auth.signup.emailVerification', { email }))
+        setPassword('')
+        setConfirmPassword('')
+        return
+      }
+      onSuccess?.()
+    } catch (err: any) {
+      setError(err.message ?? t('auth.signup.failedDefault'))
+    }
+  }
+
+  const inputClass =
+    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn('flex flex-col gap-4 w-full max-w-sm', className)}
+    >
+      {error && (
+        <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="rounded-md border border-success/20 bg-success/10 px-4 py-3 text-sm text-success">
+          {success}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="signup-name" className="text-sm font-medium text-foreground">
+          {t('auth.signup.fullName')}
+        </label>
+        <input
+          id="signup-name"
+          type="text"
+          value={fullName}
+          onChange={(e) => setFullName(e.target.value)}
+          placeholder={t('auth.signup.placeholder.name')}
+          required
+          autoComplete="name"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="signup-email" className="text-sm font-medium text-foreground">
+          {t('auth.email')}
+        </label>
+        <input
+          id="signup-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('auth.login.placeholder.email')}
+          required
+          autoComplete="email"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="signup-password" className="text-sm font-medium text-foreground">
+          {t('auth.password')}
+        </label>
+        <input
+          id="signup-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder={t('auth.signup.placeholder.password')}
+          required
+          minLength={8}
+          autoComplete="new-password"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="signup-confirm" className="text-sm font-medium text-foreground">
+          {t('auth.signup.confirmPassword')}
+        </label>
+        <input
+          id="signup-confirm"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          placeholder={t('auth.signup.placeholder.confirm')}
+          required
+          minLength={8}
+          autoComplete="new-password"
+          className={inputClass}
+        />
+      </div>
+
+      {(termsUrl || privacyUrl) && (
+        <p className="text-xs text-muted-foreground">
+          {t('auth.signup.termsAgreement')}{' '}
+          {termsUrl && (
+            <a href={termsUrl} target="_blank" rel="noopener noreferrer" className="underline hover:text-foreground">
+              {t('auth.signup.termsOfService')}
+            </a>
+          )}
+          {termsUrl && privacyUrl && ' and '}
+          {privacyUrl && (
+            <a href={privacyUrl} target="_blank" rel="noopener noreferrer" className="underline hover:text-foreground">
+              {t('auth.signup.privacyPolicy')}
+            </a>
+          )}
+          .
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="inline-flex items-center justify-center h-10 px-4 py-2 rounded-md bg-primary border border-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors disabled:opacity-50 disabled:pointer-events-none"
+      >
+        {loading ? t('auth.signup.creating') : t('auth.signup.title')}
+      </button>
+    </form>
+  )
+}

package/src/shell/components/auth/SplitLogin.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react'
+import { LoginForm } from './LoginForm'
+import { SignupForm } from './SignupForm'
+import { RecoveryForm } from './RecoveryForm'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { AuthProvider } from '../../types'
+
+interface SplitLoginProps {
+  appName: string
+  logo?: React.ReactNode
+  tagline?: string
+  description?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+  onSuccess?: () => void
+}
+
+type View = 'login' | 'signup' | 'recovery'
+
+export function SplitLogin({ appName, logo, tagline, description, showOAuth, oauthProviders, onSuccess }: SplitLoginProps) {
+  const [view, setView] = useState<View>('login')
+  const { t } = useTranslation()
+
+  const heading = view === 'login' ? t('auth.login.title') : view === 'signup' ? t('auth.signup.title') : t('auth.recovery.title')
+  const subtitle = view === 'login'
+    ? t('auth.login.enterCredentials')
+    : view === 'signup'
+      ? t('auth.signup.getStarted')
+      : t('auth.recovery.resetSubtitle')
+
+  return (
+    <div className="flex min-h-screen bg-sidebar">
+      {/* Left — Brand Panel (hidden on mobile) */}
+      <div className="relative hidden w-1/2 overflow-hidden lg:block">
+        {/* Gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-sidebar-accent/50 via-transparent to-sidebar/80" />
+
+        {/* Decorative circles */}
+        <div className="absolute -left-20 -top-20 h-80 w-80 rounded-full bg-primary/10" />
+        <div className="absolute -bottom-10 -right-10 h-60 w-60 rounded-full bg-primary/5" />
+        <div className="absolute right-1/4 top-1/3 h-40 w-40 rounded-full bg-primary/5" />
+
+        {/* Content */}
+        <div className="relative flex h-full flex-col justify-end p-12">
+          <div className="space-y-4">
+            <p className="text-sm font-medium text-sidebar-muted">{appName}</p>
+            <h2 className="text-3xl font-bold text-sidebar-foreground">
+              {tagline ?? t('auth.login.welcomeTo', { appName })}
+            </h2>
+            {description && (
+              <p className="max-w-md text-sm leading-relaxed text-sidebar-muted">
+                {description}
+              </p>
+            )}
+
+            {/* Social proof */}
+            <div className="mt-8 flex items-center gap-3 rounded-xl bg-sidebar-accent/40 p-4">
+              <div className="flex -space-x-2">
+                {['bg-primary', 'bg-success', 'bg-warning'].map((bg, i) => (
+                  <div key={i} className={`h-8 w-8 rounded-full ${bg} border-2 border-sidebar`} />
+                ))}
+              </div>
+              <p className="text-xs text-sidebar-foreground/80">
+                {t('auth.login.socialProof', { appName })}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right — Form in rounded frame */}
+      <div className="flex flex-1 flex-col p-3 pl-0 lg:pl-3">
+        <div className="flex flex-1 flex-col justify-center rounded-[1.25rem] bg-background px-6 py-12 lg:px-16">
+        <div className="mx-auto w-full max-w-sm">
+          {/* Logo */}
+          <div className="mb-8">
+            {logo}
+          </div>
+
+          {/* Heading */}
+          <div className="mb-8">
+            <h1 className="text-2xl font-bold text-foreground">{heading}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          </div>
+
+          {/* Form */}
+          {view === 'login' && (
+            <div className="space-y-6">
+              <LoginForm
+                onSuccess={onSuccess}
+                onForgotPassword={() => setView('recovery')}
+                showOAuth={showOAuth}
+                oauthProviders={oauthProviders}
+              />
+              <p className="text-center text-sm text-muted-foreground">
+                {t('auth.login.noAccount')}{' '}
+                <button type="button" onClick={() => setView('signup')} className="font-medium text-primary hover:underline">
+                  {t('auth.signUp')}
+                </button>
+              </p>
+            </div>
+          )}
+
+          {view === 'signup' && (
+            <div className="space-y-6">
+              <SignupForm onSuccess={onSuccess} />
+              <p className="text-center text-sm text-muted-foreground">
+                {t('auth.signup.hasAccount')}{' '}
+                <button type="button" onClick={() => setView('login')} className="font-medium text-primary hover:underline">
+                  {t('auth.signIn')}
+                </button>
+              </p>
+            </div>
+          )}
+
+          {view === 'recovery' && (
+            <RecoveryForm onBackToLogin={() => setView('login')} />
+          )}
+        </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/shell/components/auth/index.ts

@@ -0,0 +1,6 @@
+export { LoginForm } from './LoginForm'
+export { SignupForm } from './SignupForm'
+export { RecoveryForm } from './RecoveryForm'
+export { OAuthButtons } from './OAuthButtons'
+export { ProtectedRoute } from './ProtectedRoute'
+export { LoginPage } from './LoginPage'

package/src/shell/components/billing/BillingPage.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { PlanSelector } from './PlanSelector'
+import { SubscriptionCard } from './SubscriptionCard'
+import { useBillingStore } from '../../stores/billing.store'
+import { useBilling } from '../../hooks/useBilling'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { PlanInterval } from '../../types'
+
+interface BillingPageProps {
+  className?: string
+}
+
+export function BillingPage({ className }: BillingPageProps) {
+  const { plans, subscription, loading } = useBillingStore()
+  const billing = useBilling()
+  const { t } = useTranslation()
+  const [interval, setInterval] = React.useState<PlanInterval>('monthly')
+
+  // Fetch subscription on mount
+  React.useEffect(() => {
+    billing.fetchSubscription()
+  }, [])
+
+  const currentPlan = plans.find((p) => p.id === subscription?.planId)
+
+  return (
+    <div className={className ?? 'mx-auto max-w-5xl space-y-8'}>
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('billing.title')}</h1>
+        <p className="text-sm text-muted-foreground">
+          {t('billing.subtitle')}
+        </p>
+      </div>
+
+      {subscription && (
+        <SubscriptionCard
+          subscription={subscription as any}
+          plan={currentPlan as any}
+          onCancel={billing.cancelSubscription}
+          loading={loading}
+        />
+      )}
+
+      {plans.length > 0 && (
+        <PlanSelector
+          plans={plans as any}
+          currentPlanId={subscription?.planId}
+          interval={interval}
+          onIntervalChange={setInterval}
+          onSelectPlan={(planId) => billing.subscribe(planId, interval)}
+          loading={loading}
+        />
+      )}
+    </div>
+  )
+}

package/src/shell/components/billing/InvoiceList.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react'
+import { Download, FileText } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Badge } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Skeleton } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { Invoice } from '../../types'
+
+interface InvoiceListProps {
+  invoices: Invoice[]
+  loading?: boolean
+}
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  paid: 'default',
+  open: 'secondary',
+  draft: 'outline',
+  void: 'outline',
+  uncollectible: 'destructive',
+}
+
+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', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+export function InvoiceList({ invoices, loading }: InvoiceListProps) {
+  const { t } = useTranslation()
+  if (loading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-16 w-full" />
+        ))}
+      </div>
+    )
+  }
+
+  if (invoices.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <FileText className="mb-3 h-10 w-10 text-muted-foreground/50" />
+        <p className="text-sm text-muted-foreground">{t('billing.invoice.noInvoices')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-hidden rounded-md border">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b bg-muted/50">
+            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {t('billing.invoice.date')}
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {t('billing.invoice.amount')}
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {t('billing.invoice.status')}
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {t('billing.invoice.invoice')}
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y">
+          {invoices.map((invoice) => (
+            <tr
+              key={invoice.id}
+              className={cn(
+                'transition-colors hover:bg-muted/30'
+              )}
+            >
+              <td className="px-4 py-3 text-sm">
+                {formatDate(invoice.createdAt)}
+              </td>
+              <td className="px-4 py-3 text-sm font-medium">
+                {formatCurrency(invoice.amount, invoice.currency)}
+              </td>
+              <td className="px-4 py-3">
+                <Badge variant={STATUS_VARIANT[invoice.status] ?? 'outline'}>
+                  {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+                </Badge>
+              </td>
+              <td className="px-4 py-3 text-right">
+                {invoice.pdfUrl ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    asChild
+                  >
+                    <a
+                      href={invoice.pdfUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Download className="mr-1.5 h-3.5 w-3.5" />
+                      PDF
+                    </a>
+                  </Button>
+                ) : (
+                  <span className="text-xs text-muted-foreground">--</span>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/shell/components/billing/PaywallGate.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { Lock } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useBillingStore } from '../../stores/billing.store'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface PaywallGateProps {
+  requiredPlan?: string
+  requiredFeature?: string
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  onUpgrade?: () => void
+}
+
+export function PaywallGate({
+  requiredPlan,
+  requiredFeature,
+  children,
+  fallback,
+  onUpgrade,
+}: PaywallGateProps) {
+  const { subscription, plans } = useBillingStore()
+
+  const hasAccess = React.useMemo(() => {
+    if (!requiredPlan && !requiredFeature) return true
+    if (!subscription || subscription.status === 'canceled') return false
+
+    if (requiredPlan) {
+      const currentPlan = plans.find((p) => p.id === subscription.planId)
+      const requiredPlanData = plans.find((p) => p.id === requiredPlan)
+      if (!currentPlan || !requiredPlanData) return false
+
+      const currentIndex = plans.indexOf(currentPlan)
+      const requiredIndex = plans.indexOf(requiredPlanData)
+      return currentIndex >= requiredIndex
+    }
+
+    if (requiredFeature) {
+      const currentPlan = plans.find((p) => p.id === subscription.planId)
+      if (!currentPlan) return false
+      return currentPlan.features.some(
+        (f) => f.toLowerCase().includes(requiredFeature.toLowerCase())
+      )
+    }
+
+    return true
+  }, [subscription, plans, requiredPlan, requiredFeature])
+
+  if (hasAccess) {
+    return <>{children}</>
+  }
+
+  if (fallback) {
+    return <>{fallback}</>
+  }
+
+  const { t } = useTranslation()
+
+  return (
+    <Card className="border-dashed">
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+          <Lock className="h-6 w-6 text-muted-foreground" />
+        </div>
+        <CardTitle className="text-lg">{t('billing.paywall.upgradeRequired')}</CardTitle>
+        <CardDescription>
+          {requiredPlan
+            ? t('billing.paywall.requiresPlan', { plan: requiredPlan })
+            : t('billing.paywall.notAvailable')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex justify-center">
+        <Button onClick={onUpgrade}>
+          {t('billing.paywall.viewPlans')}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

package/src/shell/components/billing/PlanSelector.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { Plan, PlanInterval } from '../../types'
+
+interface PlanSelectorProps {
+  plans: Plan[]
+  currentPlanId?: string
+  interval: PlanInterval
+  onIntervalChange: (interval: PlanInterval) => void
+  onSelectPlan: (planId: string) => void
+  loading?: boolean
+}
+
+export function PlanSelector({
+  plans,
+  currentPlanId,
+  interval,
+  onIntervalChange,
+  onSelectPlan,
+  loading,
+}: PlanSelectorProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-center gap-3">
+        <button
+          type="button"
+          className={cn(
+            'rounded-full px-4 py-2 text-sm font-medium transition-colors',
+            interval === 'monthly'
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+          onClick={() => onIntervalChange('monthly')}
+        >
+          {t('billing.monthly')}
+        </button>
+        <button
+          type="button"
+          className={cn(
+            'rounded-full px-4 py-2 text-sm font-medium transition-colors',
+            interval === 'yearly'
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+          onClick={() => onIntervalChange('yearly')}
+        >
+          {t('billing.yearly')}
+          <span className="ml-1.5 text-xs opacity-80">{t('billing.yearlySave')}</span>
+        </button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {plans.map((plan) => {
+          const isCurrent = plan.id === currentPlanId
+          const price = interval === 'monthly' ? (plan.prices?.monthly ?? plan.priceMonthly) : (plan.prices?.yearly ?? plan.priceYearly)
+
+          return (
+            <Card
+              key={plan.id}
+              className={cn(
+                'relative flex flex-col',
+                plan.popular && 'border-primary shadow-md'
+              )}
+            >
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <Badge>{t('billing.mostPopular')}</Badge>
+                </div>
+              )}
+
+              <CardHeader>
+                <CardTitle className="text-xl">{plan.name}</CardTitle>
+                <CardDescription>{plan.description}</CardDescription>
+              </CardHeader>
+
+              <CardContent className="flex-1">
+                <div className="mb-6">
+                  <span className="text-4xl font-bold">
+                    ${price}
+                  </span>
+                  <span className="text-muted-foreground">
+                    /{interval === 'monthly' ? 'mo' : 'yr'}
+                  </span>
+                </div>
+
+                <ul className="space-y-3">
+                  {plan.features.map((feature) => (
+                    <li key={feature} 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>
+              </CardContent>
+
+              <CardFooter>
+                {isCurrent ? (
+                  <Button variant="outline" className="w-full" disabled>
+                    {t('billing.currentPlan')}
+                  </Button>
+                ) : (
+                  <Button
+                    className="w-full"
+                    variant={plan.popular ? 'default' : 'outline'}
+                    disabled={loading}
+                    onClick={() => onSelectPlan(plan.id)}
+                  >
+                    {loading ? t('billing.processing') : t('billing.getStarted')}
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}