@fayz-ai/plugin-courses 0.8.1 → 0.8.4

package/src/public/index.ts

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------------------------
+// @fayz-ai/plugin-courses/public — customer-facing course checkout surface.
+//
+// Separate entry from the admin plugin so a website/member host imports only the
+// lean checkout screen + data seam (no @fayz-ai/saas / courses admin graph).
+// Data: PublicCheckoutDataProvider — mock by default, Supabase RPC
+// (course_place_order_simulated) when a tenantId + global client are configured.
+// ---------------------------------------------------------------------------
+
+export { createPublicCheckoutPlugin } from './createPublicCheckoutPlugin'
+export type { PublicCheckoutOptions, PublicCheckoutPlugin } from './createPublicCheckoutPlugin'
+
+export { CheckoutScreen } from './CheckoutScreen'
+export type { CheckoutScreenProps } from './CheckoutScreen'
+
+// Data seam
+export { createMockCheckoutProvider } from './data'
+export { createSupabaseCheckoutProvider } from './data.supabase'
+export type { SupabaseCheckoutOptions } from './data.supabase'
+export type {
+  PublicCheckoutDataProvider,
+  PlaceOrderInput,
+  PlaceOrderResult,
+  CheckoutPaymentMethod,
+  MockCheckoutOptions,
+} from './data'

package/src/views/CourseOrderDetailView.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { useTranslation } from '@fayz-ai/core'
+import {
+  OrderDetailView as SharedOrderDetailView, OrderDetailSkeleton, PersonLink,
+  type OrderDetailData, type OrderDetailInstallment, type OrderDetailTone,
+} from '@fayz-ai/saas'
+import { getCoursesProvider, type OrderDetail, type FinancialStatus } from '@fayz-ai/courses'
+import { EmptyState } from '../components/CommerceUI'
+import { formatMoney, formatDate } from '../lib/format'
+import { navigateTo } from '../nav'
+
+const Page = ({ children }: { children: React.ReactNode }) => (
+  <div className="mx-auto max-w-6xl p-6 md:p-8">{children}</div>
+)
+
+// Cache por id (fora do componente) — trocar de aba remonta a view; sem cache
+// isso refaz o getOrder (skeleton + request) toda vez. Cache-first evita o refetch.
+const orderCache = new Map<string, OrderDetail>()
+
+function statusTone(s: FinancialStatus): OrderDetailTone {
+  if (s === 'paid') return 'success'
+  if (s === 'pending') return 'warning'
+  if (s === 'refunded' || s === 'chargeback') return 'destructive'
+  return 'muted'
+}
+function instTone(s: string): OrderDetailTone {
+  if (s === 'paid') return 'success'
+  if (s === 'overdue') return 'destructive'
+  return 'warning'
+}
+
+/** Order detail (`/courses/sales/:id`). Loads the canonical order and renders the
+ *  SHARED archetype OrderDetailView (@fayz-ai/saas) — same component the shop uses. */
+export function CourseOrderDetailView({ id }: { id?: string }) {
+  const t = useTranslation()
+  const [order, setOrder] = React.useState<OrderDetail | null>(() => (id ? orderCache.get(id) ?? null : null))
+  const [loading, setLoading] = React.useState(() => !(id && orderCache.has(id)))
+
+  React.useEffect(() => {
+    let alive = true
+    if (!id) { setLoading(false); return }
+    const cached = orderCache.get(id)
+    if (cached) { setOrder(cached); setLoading(false); return } // cache hit → sem request
+    setLoading(true)
+    void getCoursesProvider().getOrder(id).then((o) => {
+      if (!alive) return
+      if (o) orderCache.set(id, o)
+      setOrder(o); setLoading(false)
+    })
+    return () => { alive = false }
+  }, [id])
+
+  const back = () => navigateTo('/courses/sales')
+
+  if (loading) return <Page><OrderDetailSkeleton /></Page>
+  if (!order) {
+    return (
+      <Page>
+        <EmptyState
+          title={t('courses.order.notFound') || 'Pedido não encontrado'}
+          description=""
+          action={<button className="text-sm text-primary underline" onClick={back}>{t('common.back') || 'Voltar'}</button>}
+        />
+      </Page>
+    )
+  }
+
+  const cur = order.currency
+  const installments: OrderDetailInstallment[] = order.installments.map((m) => ({
+    number: m.installmentNumber,
+    amount: formatMoney(m.amount, cur),
+    status: m.status,
+    statusTone: instTone(m.status),
+    dueDate: m.dueDate ? formatDate(m.dueDate) : null,
+    paymentDate: m.paymentDate ? formatDate(m.paymentDate) : null,
+    note: m.cardBrand ? `${m.cardBrand}${m.cardInstallments ? ` ${m.cardInstallments}x` : ''}` : null,
+  }))
+
+  const data: OrderDetailData = {
+    title: `${t('courses.order.title') || 'Pedido'} #${order.id.slice(0, 8)}`,
+    subtitle: formatDate(order.createdAt),
+    badges: [
+      { label: t(`courses.financialStatus.${order.financialStatus}`) || order.financialStatus, tone: statusTone(order.financialStatus) },
+      ...(order.installmentCount && order.installmentCount > 1 ? [{ label: `${order.installmentCount}x`, tone: 'muted' as OrderDetailTone }] : []),
+    ],
+    customer: { name: order.customerName, email: order.customerEmail },
+    customerNode: (
+      <div className="space-y-1 text-sm">
+        {order.customerId ? (
+          <PersonLink
+            personId={order.customerId}
+            name={order.customerName ?? order.customerEmail ?? 'Cliente'}
+            className="font-medium"
+          />
+        ) : (
+          <p className="font-medium">{order.customerName ?? '—'}</p>
+        )}
+        {order.customerEmail && <p className="text-muted-foreground">{order.customerEmail}</p>}
+      </div>
+    ),
+    items: [{
+      name: order.courseTitle ?? '—',
+      description: order.offerName,
+      quantity: 1,
+      unitPrice: formatMoney(order.total, cur),
+      total: formatMoney(order.total, cur),
+    }],
+    totals: [
+      { label: 'Total', value: formatMoney(order.total, cur), strong: true },
+      ...(order.platformFee > 0 ? [{ label: 'Taxa', value: `− ${formatMoney(order.platformFee, cur)}`, muted: true }] : []),
+      { label: 'Líquido', value: formatMoney(order.netValue, cur) },
+    ],
+    paymentMethod: order.paymentMethod ?? undefined,
+    receivable: {
+      rows: [
+        { label: 'Recebido', value: formatMoney(order.paidAmount, cur) },
+        { label: 'Saldo', value: formatMoney(order.balance, cur), strong: order.balance > 0 },
+      ],
+      installments,
+      emptyLabel: t('courses.order.noInstallments') || 'Sem parcelas.',
+    },
+    onBack: back,
+    backLabel: t('courses.sales.title') || 'Vendas',
+  }
+
+  return (
+    <Page>
+      <SharedOrderDetailView {...data} />
+    </Page>
+  )
+}
+CourseOrderDetailView.displayName = 'CourseOrderDetailView'

package/dist/pages/MembersAreaPage.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export declare function MembersAreaPage(): React.JSX.Element;
-export declare namespace MembersAreaPage {
-    var displayName: string;
-}
-//# sourceMappingURL=MembersAreaPage.d.ts.map

package/dist/pages/MembersAreaPage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MembersAreaPage.d.ts","sourceRoot":"","sources":["../../src/pages/MembersAreaPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,wBAAgB,eAAe,sBA8B9B;yBA9Be,eAAe"}

package/src/pages/MembersAreaPage.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { getCoursesProvider, type Order, type Course } from '@fayz-ai/courses'
-import { PageContainer, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
-
-interface Row {
-  courseId: string
-  title: string
-  status: Course['status']
-  students: number
-}
-
-export function MembersAreaPage() {
-  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(buildMembersAreas(courses, orders))
-    })
-  }, [])
-
-  const columns: SimpleColumn<Row>[] = [
-    { key: 'title', header: t('courses.membersArea.name') || 'Members area', render: (r) => <span className="font-medium text-foreground">{r.title}</span> },
-    { key: 'status', header: t('courses.membersArea.status') || 'Status', render: (r) => (
-      <Badge variant={r.status === 'published' ? 'success' : r.status === 'archived' ? 'outline' : 'secondary'}>
-        {t(`courses.status.${r.status}`) || r.status}
-      </Badge>
-    ) },
-    { key: 'students', header: t('courses.membersArea.students') || 'Students', align: 'right', render: (r) => <span className="text-foreground">{r.students}</span> },
-  ]
-
-  return (
-    <PageContainer title={t('courses.membersArea.title') || 'Members area'} subtitle={t('courses.membersArea.subtitle') || 'One area per course; students land here after purchase.'}>
-      <SimpleTable
-        columns={columns}
-        rows={rows ?? []}
-        empty={t('courses.membersArea.empty') || 'No members areas yet.'}
-      />
-    </PageContainer>
-  )
-}
-MembersAreaPage.displayName = 'MembersAreaPage'
-
-function buildMembersAreas(courses: Course[], orders: Order[]): Row[] {
-  const students = new Map<string, Set<string>>()
-  for (const o of orders) {
-    const set = students.get(o.courseId) ?? new Set<string>()
-    if (o.customerId) set.add(o.customerId)
-    students.set(o.courseId, set)
-  }
-  return courses.map((c) => ({
-    courseId: c.id,
-    title: c.title,
-    status: c.status,
-    students: students.get(c.id)?.size ?? 0,
-  }))
-}