@fayz-ai/plugin-courses 0.9.0 → 0.10.0

package/src/pages/CoursesListPage.tsx

@@ -1,137 +0,0 @@
-import * as React from 'react'
-import { Button, Badge, PageHeaderActions, useModuleLayout, Skeleton } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { getCoursesProvider, type Course } from '@fayz-ai/courses'
-import { useLimitGuard, invalidateLimit, PermissionGate, usePermissionOptional } from '@fayz-ai/saas'
-import { navigateTo } from '../nav'
-
-function statusVariant(status: Course['status']): 'success' | 'secondary' | 'outline' {
-  if (status === 'published') return 'success'
-  if (status === 'archived') return 'outline'
-  return 'secondary'
-}
-
-export function CoursesListPage() {
-  const t = useTranslation()
-  // When the app shell owns the page header (sidebar/GHL-style layouts), don't
-  // render our own title — and project the action button into the top bar.
-  const shellOwnsHeader = useModuleLayout() === 'tabs'
-  const [courses, setCourses] = React.useState<Course[] | null>(null)
-  const [creating, setCreating] = React.useState(false)
-  const guardCourses = useLimitGuard('courses')
-  const can = usePermissionOptional()
-
-  const load = React.useCallback(async () => {
-    setCourses(await getCoursesProvider().listCourses())
-  }, [])
-
-  React.useEffect(() => {
-    void load()
-  }, [load])
-
-  async function onCreate() {
-    // Defense in depth: never create without the role's `create` action.
-    if (!can('courses', 'create')) return
-    // Plan quantity guard (client-side, before the provider call). Opens the
-    // global UpgradeModal and aborts when the plan's course cap is reached.
-    if ((await guardCourses()) === 'blocked') return
-    setCreating(true)
-    try {
-      const course = await getCoursesProvider().createCourse({
-        title: t('courses.editor.untitledCourse') || 'Untitled course',
-        status: 'draft',
-      })
-      invalidateLimit('courses')
-      navigateTo(`/courses/${course.id}`)
-    } finally {
-      setCreating(false)
-    }
-  }
-
-  return (
-    <div className="mx-auto max-w-6xl p-6 md:p-8">
-      {shellOwnsHeader ? (
-        <PageHeaderActions>
-          <PermissionGate feature="courses" action="create">
-            <Button onClick={onCreate} disabled={creating}>
-              {t('courses.new') || 'New course'}
-            </Button>
-          </PermissionGate>
-        </PageHeaderActions>
-      ) : (
-        <div className="mb-6 flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-foreground">{t('courses.title') || 'Courses'}</h1>
-            {courses && (
-              <p className="mt-1 text-sm text-muted-foreground">
-                {(t('courses.count') || '{count} courses').replace('{count}', String(courses.length))}
-              </p>
-            )}
-          </div>
-          <PermissionGate feature="courses" action="create">
-            <Button onClick={onCreate} disabled={creating}>
-              {t('courses.new') || 'New course'}
-            </Button>
-          </PermissionGate>
-        </div>
-      )}
-
-      {courses && courses.length === 0 && (
-        <div className="rounded-xl border border-dashed border-border p-12 text-center text-muted-foreground">
-          {t('courses.empty') || 'No courses yet. Create your first one.'}
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {courses === null &&
-          Array.from({ length: 6 }).map((_, i) => <CourseCardSkeleton key={i} />)}
-        {courses?.map((course) => (
-          <button
-            key={course.id}
-            onClick={() => navigateTo(`/courses/${course.id}`)}
-            className="group overflow-hidden rounded-xl border border-border bg-card text-left transition hover:border-primary hover:shadow-md"
-          >
-            <div className="aspect-video w-full overflow-hidden bg-muted">
-              {course.thumbnailUrl && (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={course.thumbnailUrl} alt="" className="h-full w-full object-cover" />
-              )}
-            </div>
-            <div className="space-y-2 p-4">
-              <div className="flex items-start justify-between gap-2">
-                <h3 className="font-semibold text-foreground line-clamp-2">{course.title}</h3>
-                <Badge variant={statusVariant(course.status)}>
-                  {t(`courses.status.${course.status}`) || course.status}
-                </Badge>
-              </div>
-              {course.subtitle && (
-                <p className="text-sm text-muted-foreground line-clamp-2">{course.subtitle}</p>
-              )}
-              <p className="text-sm font-medium text-foreground">
-                {course.price > 0 ? `${course.currency} ${course.price.toFixed(2)}` : '—'}
-              </p>
-            </div>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-CoursesListPage.displayName = 'CoursesListPage'
-
-/** Loading placeholder mirroring the course card layout. */
-function CourseCardSkeleton() {
-  return (
-    <div className="overflow-hidden rounded-xl border border-border bg-card">
-      <Skeleton className="aspect-video w-full rounded-none" />
-      <div className="space-y-3 p-4">
-        <div className="flex items-start justify-between gap-2">
-          <Skeleton className="h-4 w-2/3" />
-          <Skeleton className="h-5 w-16 rounded-full" />
-        </div>
-        <Skeleton className="h-3 w-full" />
-        <Skeleton className="h-4 w-20" />
-      </div>
-    </div>
-  )
-}

package/src/pages/FinancialPage.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react'
-import { Badge, Button, toast } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { getCoursesProvider, type Payout, type FinancialSummary, type CreatorAccount } from '@fayz-ai/courses'
-import { PageContainer, StatCard, StatGrid, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
-import { formatMoney, formatDate, formatPercent } from '../lib/format'
-
-// No plan gate here on purpose. The page is registered as a shell ROUTE with
-// `permission: read('courses.finance')`, so the route guard already resolves
-// role AND plan for it — and whether `courses.finance` is a paid feature is the
-// APP's call (its billing.ts), never the plugin's. Hardcoding a gate here would
-// bake one product's packaging into the SDK.
-export function FinancialPage() {
-  const t = useTranslation()
-  const [summary, setSummary] = React.useState<FinancialSummary | null>(null)
-  const [payouts, setPayouts] = React.useState<Payout[] | null>(null)
-  const [account, setAccount] = React.useState<CreatorAccount | null>(null)
-
-  React.useEffect(() => {
-    const p = getCoursesProvider()
-    void p.getFinancialSummary().then(setSummary)
-    void p.listPayouts().then(setPayouts)
-    void p.getCreatorAccount().then(setAccount)
-  }, [])
-
-  const currency = summary?.currency ?? 'BRL'
-  const connected = !!account?.stripeAccountId && account.chargesEnabled
-
-  function connectStripe() {
-    // Wired to the real Stripe Connect onboarding edge function in Stage 3.
-    toast.info(t('courses.financial.connectSoon') || 'Stripe Connect onboarding wires up in Stage 3.')
-  }
-
-  const columns: SimpleColumn<Payout>[] = [
-    { key: 'date', header: t('courses.financial.date') || 'Date', render: (p) => <span className="text-muted-foreground">{formatDate(p.createdAt)}</span> },
-    { key: 'amount', header: t('courses.financial.amount') || 'Amount', align: 'right', render: (p) => <span className="font-medium text-foreground">{formatMoney(p.amount, p.currency)}</span> },
-    { key: 'status', header: t('courses.financial.status') || 'Status', align: 'right', render: (p) => (
-      <Badge variant={p.status === 'paid' ? 'success' : p.status === 'pending' ? 'secondary' : 'destructive'}>
-        {t(`courses.payoutStatus.${p.status}`) || p.status}
-      </Badge>
-    ) },
-  ]
-
-  return (
-    <PageContainer
-      title={t('courses.financial.title') || 'Financial settings'}
-      subtitle={t('courses.financial.subtitle') || 'Balance, payouts and your Stripe connection.'}
-      actions={
-        <Button variant={connected ? 'outline' : 'default'} onClick={connectStripe}>
-          {connected ? (t('courses.financial.connected') || 'Stripe connected') : (t('courses.financial.connect') || 'Connect Stripe')}
-        </Button>
-      }
-    >
-      {!connected && (
-        <div className="mb-6 rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-foreground">
-          {t('courses.financial.notConnected') || 'Connect your Stripe account to receive payouts. The platform fee is applied automatically on each sale.'}
-          {account && (
-            <span className="ml-1 text-muted-foreground">
-              ({t('courses.financial.platformFee') || 'Platform fee'}: {(account.platformFeeBps / 100).toFixed(2)}%)
-            </span>
-          )}
-        </div>
-      )}
-
-      <StatGrid>
-        <StatCard label={t('courses.financial.available') || 'Available balance'} value={formatMoney(summary?.availableBalance ?? 0, currency)} />
-        <StatCard label={t('courses.financial.pending') || 'Pending balance'} value={formatMoney(summary?.pendingBalance ?? 0, currency)} />
-        <StatCard label={t('courses.financial.revenue') || 'Total revenue'} value={formatMoney(summary?.totalRevenue ?? 0, currency)} />
-        <StatCard label={t('courses.financial.feeCollected') || 'Platform fees'} value={formatMoney(summary?.platformFeeTotal ?? 0, currency)} hint={summary ? formatPercent(summary.refundRate, 1) + ' ' + (t('courses.financial.refundRate') || 'refund rate') : undefined} />
-      </StatGrid>
-
-      <h2 className="mb-3 text-sm font-semibold text-foreground">{t('courses.financial.payouts') || 'Payouts'}</h2>
-      <SimpleTable
-        columns={columns}
-        rows={payouts ?? []}
-        empty={t('courses.financial.noPayouts') || 'No payouts yet.'}
-      />
-    </PageContainer>
-  )
-}
-FinancialPage.displayName = 'FinancialPage'

package/src/pages/ReportsPage.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from '@fayz-ai/core'
-import { getCoursesProvider, type Order, type Course } from '@fayz-ai/courses'
-import { PageContainer, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
-import { formatMoney } from '../lib/format'
-
-interface Row {
-  courseId: string
-  title: string
-  sales: number
-  revenue: number
-  currency: string
-}
-
-export function ReportsPage() {
-  const t = useTranslation()
-  const [rows, setRows] = React.useState<Row[] | null>(null)
-
-  React.useEffect(() => {
-    const p = getCoursesProvider()
-    void Promise.all([p.listCourses(), p.listOrders({ financialStatus: 'paid' })]).then(([courses, orders]) => {
-      setRows(buildRevenueByCourse(courses, orders))
-    })
-  }, [])
-
-  const columns: SimpleColumn<Row>[] = [
-    { key: 'title', header: t('courses.reports.course') || 'Course', render: (r) => <span className="font-medium text-foreground">{r.title}</span> },
-    { key: 'sales', header: t('courses.reports.sales') || 'Sales', align: 'right', render: (r) => <span>{r.sales}</span> },
-    { key: 'revenue', header: t('courses.reports.revenue') || 'Revenue', align: 'right', render: (r) => <span className="font-medium text-foreground">{formatMoney(r.revenue, r.currency)}</span> },
-  ]
-
-  return (
-    <PageContainer title={t('courses.reports.title') || 'Reports'} subtitle={t('courses.reports.subtitle') || 'Revenue by course.'}>
-      <h2 className="mb-3 text-sm font-semibold text-foreground">{t('courses.reports.byCourse') || 'Revenue by course'}</h2>
-      <SimpleTable
-        columns={columns}
-        rows={rows ?? []}
-        empty={t('courses.reports.empty') || 'No revenue yet.'}
-      />
-    </PageContainer>
-  )
-}
-ReportsPage.displayName = 'ReportsPage'
-
-function buildRevenueByCourse(courses: Course[], orders: Order[]): Row[] {
-  const byCourse = new Map<string, { sales: number; revenue: number; currency: string }>()
-  for (const o of orders) {
-    const agg = byCourse.get(o.courseId) ?? { sales: 0, revenue: 0, currency: o.currency }
-    agg.sales += 1
-    agg.revenue = Math.round((agg.revenue + o.total) * 100) / 100
-    byCourse.set(o.courseId, agg)
-  }
-  return courses
-    .map((c) => {
-      const agg = byCourse.get(c.id)
-      return { courseId: c.id, title: c.title, sales: agg?.sales ?? 0, revenue: agg?.revenue ?? 0, currency: agg?.currency ?? c.currency }
-    })
-    .sort((a, b) => b.revenue - a.revenue)
-}

package/src/pages/SalesPage.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { OrderListView, type OrderListColumn } from '@fayz-ai/saas'
-import { getCoursesProvider, type Order, type FinancialStatus } from '@fayz-ai/courses'
-import { formatMoney, formatDate } from '../lib/format'
-import { navigateTo } from '../nav'
-
-function statusVariant(s: FinancialStatus): 'success' | 'secondary' | 'destructive' | 'outline' {
-  if (s === 'paid') return 'success'
-  if (s === 'pending') return 'secondary'
-  if (s === 'refunded' || s === 'chargeback') return 'destructive'
-  return 'outline'
-}
-
-// Cache (fora do componente) — trocar de aba remonta a página; sem cache refaz a
-// consulta toda vez. Cache-first evita o refetch/skeleton ao voltar pra aba.
-let salesCache: Order[] | null = null
-
-export function SalesPage() {
-  const t = useTranslation()
-  const [orders, setOrders] = React.useState<Order[] | null>(salesCache)
-
-  React.useEffect(() => {
-    if (salesCache) return // cache hit → sem request
-    let alive = true
-    const p = getCoursesProvider()
-    // public.orders (via listCoreSales) é a fonte da verdade; listOrders é a
-    // projeção nativa do courses. Dedupe por id: uma venda espelhada aparece 1x,
-    // com a linha canônica (orders) ganhando.
-    void Promise.all([
-      p.listCoreSales().catch(() => [] as Order[]),
-      p.listOrders().catch(() => [] as Order[]),
-    ]).then(([core, store]) => {
-      if (!alive) return
-      const byId = new Map<string, Order>()
-      for (const o of store) byId.set(o.id, o)
-      for (const o of core) byId.set(o.id, o)
-      const list = [...byId.values()].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1))
-      salesCache = list
-      setOrders(list)
-    })
-    return () => { alive = false }
-  }, [])
-
-  const paid = (orders ?? []).filter((o) => o.financialStatus === 'paid')
-  const revenue = paid.reduce((s, o) => s + o.total, 0)
-  const currency = orders?.[0]?.currency ?? 'BRL'
-
-  const columns: OrderListColumn<Order>[] = [
-    { key: 'date', header: t('courses.sales.date') || 'Data', render: (o) => <span className="text-muted-foreground">{formatDate(o.createdAt)}</span> },
-    { key: 'customer', header: t('courses.sales.customer') || 'Cliente', render: (o) => (
-      <div>
-        <div className="font-medium text-foreground">{o.customerName ?? '—'}</div>
-        <div className="text-xs text-muted-foreground">{o.customerEmail}</div>
-      </div>
-    ) },
-    { key: 'method', header: t('courses.sales.method') || 'Forma', render: (o) => (
-      <span className="capitalize">
-        {o.paymentMethod ?? '—'}{o.installmentCount && o.installmentCount > 1 ? ` · ${o.installmentCount}x` : ''}
-      </span>
-    ) },
-    { key: 'status', header: t('courses.sales.status') || 'Status', render: (o) => (
-      <Badge variant={statusVariant(o.financialStatus)}>{t(`courses.financialStatus.${o.financialStatus}`) || o.financialStatus}</Badge>
-    ) },
-    { key: 'fee', header: t('courses.sales.fee') || 'Taxa', align: 'right', render: (o) => <span className="text-muted-foreground">{formatMoney(o.platformFee, o.currency)}</span> },
-    { key: 'total', header: t('courses.sales.amount') || 'Valor', align: 'right', render: (o) => <span className="font-medium text-foreground">{formatMoney(o.total, o.currency)}</span> },
-  ]
-
-  return (
-    <OrderListView<Order>
-      title={t('courses.sales.title') || 'Vendas'}
-      subtitle={t('courses.sales.subtitle') || 'Todas as transações dos seus cursos.'}
-      stats={[
-        { label: t('courses.sales.count') || 'Vendas', value: String(paid.length) },
-        { label: t('courses.sales.revenue') || 'Receita', value: formatMoney(revenue, currency) },
-      ]}
-      columns={columns}
-      rows={orders ?? []}
-      loading={orders === null}
-      empty={t('courses.sales.empty') || 'Nenhuma venda ainda.'}
-      onRowClick={(o) => navigateTo(`/courses/sales/${o.id}`)}
-    />
-  )
-}
-SalesPage.displayName = 'SalesPage'

package/src/pages/SubscriptionsPage.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { getCoursesProvider, type Subscription, type SubscriptionStatus } from '@fayz-ai/courses'
-import { PageContainer, StatCard, StatGrid, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
-import { formatMoney, formatDate } from '../lib/format'
-
-function statusVariant(s: SubscriptionStatus): 'success' | 'secondary' | 'destructive' {
-  if (s === 'active') return 'success'
-  if (s === 'past_due') return 'secondary'
-  return 'destructive'
-}
-
-export function SubscriptionsPage() {
-  const t = useTranslation()
-  const [subs, setSubs] = React.useState<Subscription[] | null>(null)
-
-  React.useEffect(() => {
-    void getCoursesProvider().listSubscriptions().then(setSubs)
-  }, [])
-
-  const active = (subs ?? []).filter((s) => s.status === 'active')
-  const mrr = active.reduce((sum, s) => sum + (s.interval === 'year' ? s.netValue / 12 : s.netValue), 0)
-  const currency = subs?.[0]?.currency ?? 'BRL'
-
-  const columns: SimpleColumn<Subscription>[] = [
-    { key: 'start', header: t('courses.subs.start') || 'Start date', render: (s) => <span className="text-muted-foreground">{formatDate(s.startedAt)}</span> },
-    { key: 'customer', header: t('courses.subs.customer') || 'Customer', render: (s) => (
-      <div>
-        <div className="font-medium text-foreground">{s.customerName ?? '—'}</div>
-        <div className="text-xs text-muted-foreground">{s.customerEmail}</div>
-      </div>
-    ) },
-    { key: 'status', header: t('courses.subs.status') || 'Status', render: (s) => (
-      <Badge variant={statusVariant(s.status)}>{t(`courses.subStatus.${s.status}`) || s.status}</Badge>
-    ) },
-    { key: 'value', header: t('courses.subs.value') || 'Net value', align: 'right', render: (s) => (
-      <span className="font-medium text-foreground">{formatMoney(s.netValue, s.currency)}<span className="text-xs text-muted-foreground"> / {t(`courses.interval.${s.interval}`) || s.interval}</span></span>
-    ) },
-  ]
-
-  return (
-    <PageContainer title={t('courses.subs.title') || 'Subscriptions'} subtitle={t('courses.subs.subtitle') || 'Recurring plans and MRR.'}>
-      <StatGrid>
-        <StatCard label={t('courses.subs.active') || 'Active subscriptions'} value={String(active.length)} />
-        <StatCard label={t('courses.subs.mrr') || 'Monthly recurring revenue'} value={formatMoney(mrr, currency)} />
-      </StatGrid>
-      <SimpleTable
-        columns={columns}
-        rows={subs ?? []}
-        empty={t('courses.subs.empty') || 'No subscriptions yet.'}
-      />
-    </PageContainer>
-  )
-}
-SubscriptionsPage.displayName = 'SubscriptionsPage'