@fayz-ai/plugin-courses 0.9.0 → 0.10.0

package/src/public/CheckoutScreen.tsx

@@ -1,279 +0,0 @@
-// ---------------------------------------------------------------------------
-// CheckoutScreen — the public "comprar curso" surface.
-//
-// Loads a published course + its default offer by slug, collects name/email/
-// payment method, and records a (simulated-paid) sale via the data provider.
-// Dependency-light: React + lucide + Tailwind only — no @fayz-ai/saas.
-// ---------------------------------------------------------------------------
-
-import { useEffect, useMemo, useState, type FC, type FormEvent } from 'react'
-import { CheckCircle2, CreditCard, Loader2, Lock, QrCode, ShieldCheck } from 'lucide-react'
-import type { Course, Offer } from '@fayz-ai/courses'
-import type { CheckoutPaymentMethod, PublicCheckoutDataProvider } from './data'
-
-export interface CheckoutScreenProps {
-  slug: string
-  provider: PublicCheckoutDataProvider
-  /** Accent color (CSS) for buttons/highlights. Default emerald. */
-  accent?: string
-  /** Where "acessar área de membros" points after success. Default '#/'. */
-  memberAreaHref?: string
-  /** Fired after a successful order with the resulting order id + email. */
-  onSuccess?: (info: { orderId: string; email: string }) => void
-}
-
-function formatMoney(value: number, currency = 'BRL', locale = 'pt-BR'): string {
-  try {
-    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value)
-  } catch {
-    return `R$ ${value.toFixed(2)}`
-  }
-}
-
-export const CheckoutScreen: FC<CheckoutScreenProps> = ({
-  slug,
-  provider,
-  accent = '#10b981',
-  memberAreaHref = '#/',
-  onSuccess,
-}) => {
-  const [course, setCourse] = useState<Course | null>(null)
-  const [offer, setOffer] = useState<Offer | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [loadError, setLoadError] = useState<string | null>(null)
-
-  const [name, setName] = useState('')
-  const [email, setEmail] = useState('')
-  const [method, setMethod] = useState<CheckoutPaymentMethod>('pix')
-
-  const [submitting, setSubmitting] = useState(false)
-  const [submitError, setSubmitError] = useState<string | null>(null)
-  const [orderId, setOrderId] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    setLoadError(null)
-    ;(async () => {
-      try {
-        const c = await provider.getCourseBySlug(slug)
-        if (!c) throw new Error('Curso não encontrado.')
-        const o = await provider.getDefaultOffer(c.id)
-        if (cancelled) return
-        setCourse(c)
-        setOffer(o)
-      } catch (err) {
-        if (!cancelled) setLoadError(err instanceof Error ? err.message : 'Falha ao carregar o curso.')
-      } finally {
-        if (!cancelled) setLoading(false)
-      }
-    })()
-    return () => {
-      cancelled = true
-    }
-  }, [slug, provider])
-
-  const price = offer?.price ?? course?.price ?? 0
-  const currency = offer?.currency ?? course?.currency ?? 'BRL'
-  const isSubscription = offer?.kind === 'subscription'
-  const intervalLabel = offer?.recurringInterval === 'year' ? '/ano' : '/mês'
-
-  const canSubmit = useMemo(
-    () => !!offer && !!email.trim() && /.+@.+\..+/.test(email.trim()) && !submitting,
-    [offer, email, submitting],
-  )
-
-  async function handleSubmit(e: FormEvent) {
-    e.preventDefault()
-    if (!offer || !canSubmit) return
-    setSubmitting(true)
-    setSubmitError(null)
-    try {
-      const { orderId: id } = await provider.placeOrder(offer.id, {
-        email: email.trim(),
-        name: name.trim() || undefined,
-        paymentMethod: method,
-      })
-      setOrderId(id)
-      onSuccess?.({ orderId: id, email: email.trim() })
-    } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : 'Não foi possível concluir a compra. Tente novamente.')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-      </div>
-    )
-  }
-
-  if (loadError || !course) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
-        <div className="max-w-md text-center">
-          <p className="text-lg font-semibold text-gray-900">Ops!</p>
-          <p className="mt-2 text-gray-600">{loadError ?? 'Curso indisponível.'}</p>
-          <a href="#/" className="mt-4 inline-block text-sm font-medium underline" style={{ color: accent }}>
-            Voltar
-          </a>
-        </div>
-      </div>
-    )
-  }
-
-  // Success state ----------------------------------------------------------
-  if (orderId) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
-        <div className="max-w-md w-full bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
-          <div
-            className="mx-auto w-14 h-14 rounded-full flex items-center justify-center"
-            style={{ backgroundColor: `${accent}1a` }}
-          >
-            <CheckCircle2 className="w-8 h-8" style={{ color: accent }} />
-          </div>
-          <h1 className="mt-4 text-xl font-bold text-gray-900">Compra confirmada!</h1>
-          <p className="mt-2 text-gray-600">
-            Seu acesso a <strong>{course.title}</strong> já está liberado. Enviamos os detalhes para{' '}
-            <strong>{email.trim()}</strong>.
-          </p>
-          <p className="mt-1 text-xs text-gray-400">Pedido {orderId}</p>
-          <a
-            href={memberAreaHref}
-            className="mt-6 inline-flex w-full items-center justify-center rounded-xl px-4 py-3 font-semibold text-white"
-            style={{ backgroundColor: accent }}
-          >
-            Acessar área de membros
-          </a>
-        </div>
-      </div>
-    )
-  }
-
-  // Checkout form ----------------------------------------------------------
-  return (
-    <div className="min-h-screen bg-gray-50 py-10 px-4">
-      <div className="max-w-3xl mx-auto grid gap-6 md:grid-cols-5">
-        {/* Order summary */}
-        <aside className="md:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm p-6 h-fit">
-          {course.thumbnailUrl && (
-            <img
-              src={course.thumbnailUrl}
-              alt={course.title}
-              className="w-full aspect-video object-cover rounded-xl mb-4"
-            />
-          )}
-          <h2 className="text-lg font-bold text-gray-900">{course.title}</h2>
-          {course.subtitle && <p className="mt-1 text-sm text-gray-500">{course.subtitle}</p>}
-          <div className="mt-4 border-t border-gray-100 pt-4">
-            <div className="flex items-baseline justify-between">
-              <span className="text-sm text-gray-500">{offer?.name ?? 'Acesso ao curso'}</span>
-              <span className="text-xl font-bold text-gray-900">
-                {formatMoney(price, currency)}
-                {isSubscription && <span className="text-sm font-normal text-gray-400"> {intervalLabel}</span>}
-              </span>
-            </div>
-          </div>
-          <div className="mt-4 flex items-center gap-2 text-xs text-gray-400">
-            <ShieldCheck className="w-4 h-4" />
-            Pagamento seguro · acesso imediato
-          </div>
-        </aside>
-
-        {/* Payment form */}
-        <form onSubmit={handleSubmit} className="md:col-span-3 bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
-          <h1 className="text-xl font-bold text-gray-900">Finalizar compra</h1>
-          <p className="mt-1 text-sm text-gray-500">Preencha seus dados para liberar o acesso.</p>
-
-          <label className="block mt-6 text-sm font-medium text-gray-700">
-            Nome completo
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Seu nome"
-              className="mt-1 w-full rounded-xl border border-gray-200 px-3 py-2.5 focus:outline-none focus:ring-2"
-              style={{ ['--tw-ring-color' as string]: accent }}
-            />
-          </label>
-
-          <label className="block mt-4 text-sm font-medium text-gray-700">
-            E-mail *
-            <input
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="voce@email.com"
-              className="mt-1 w-full rounded-xl border border-gray-200 px-3 py-2.5 focus:outline-none focus:ring-2"
-              style={{ ['--tw-ring-color' as string]: accent }}
-            />
-          </label>
-
-          <fieldset className="mt-4">
-            <legend className="text-sm font-medium text-gray-700">Forma de pagamento</legend>
-            <div className="mt-2 grid grid-cols-2 gap-3">
-              {(
-                [
-                  { id: 'pix' as const, label: 'Pix', icon: QrCode },
-                  { id: 'card' as const, label: 'Cartão', icon: CreditCard },
-                ]
-              ).map(({ id, label, icon: Icon }) => {
-                const active = method === id
-                return (
-                  <button
-                    key={id}
-                    type="button"
-                    onClick={() => setMethod(id)}
-                    className="flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm font-medium transition"
-                    style={
-                      active
-                        ? { borderColor: accent, backgroundColor: `${accent}0f`, color: accent }
-                        : { borderColor: '#e5e7eb', color: '#374151' }
-                    }
-                  >
-                    <Icon className="w-4 h-4" />
-                    {label}
-                  </button>
-                )
-              })}
-            </div>
-          </fieldset>
-
-          {submitError && (
-            <p className="mt-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-xl px-3 py-2">
-              {submitError}
-            </p>
-          )}
-
-          <button
-            type="submit"
-            disabled={!canSubmit}
-            className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 font-semibold text-white disabled:opacity-50"
-            style={{ backgroundColor: accent }}
-          >
-            {submitting ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" /> Processando…
-              </>
-            ) : (
-              <>
-                <Lock className="w-4 h-4" /> Pagar {formatMoney(price, currency)}
-                {isSubscription && ` ${intervalLabel}`}
-              </>
-            )}
-          </button>
-          <p className="mt-3 text-center text-xs text-gray-400">
-            Ambiente de demonstração — pagamento simulado, sem cobrança real.
-          </p>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-CheckoutScreen.displayName = 'CheckoutScreen'

package/src/public/createPublicCheckoutPlugin.tsx

@@ -1,88 +0,0 @@
-// ---------------------------------------------------------------------------
-// createPublicCheckoutPlugin — the public "landing → checkout" seam for courses.
-//
-// Mirrors plugin-agenda/src/public/createPublicBookingPlugin: resolve a data
-// provider (injected → Supabase when a tenantId is set → loud mock), expose a
-// ready-to-mount CheckoutScreen + a PluginManifest with a public route. A host
-// app (e.g. course-members) either mounts the manifest route or renders
-// CheckoutScreen directly in its own router.
-// ---------------------------------------------------------------------------
-
-import { createElement, type FC } from 'react'
-import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core'
-import { createMockCheckoutProvider, type PublicCheckoutDataProvider } from './data'
-import { createSupabaseCheckoutProvider } from './data.supabase'
-import { CheckoutScreen, type CheckoutScreenProps } from './CheckoutScreen'
-
-export interface PublicCheckoutOptions {
-  /** Mount path for the public checkout route. Default '/checkout'. Slug is appended as ':slug'. */
-  basePath?: string
-  /**
-   * Tenant this checkout sells for. REQUIRED when a Supabase client is
-   * configured (setGlobalSupabaseClient) — it scopes the catalog + the RPC.
-   */
-  tenantId?: string
-  /** Accent color forwarded to CheckoutScreen. */
-  accent?: string
-  /** Inject a custom provider (overrides the mock/Supabase resolver). */
-  dataProvider?: PublicCheckoutDataProvider
-  scope?: PluginScope
-  verticalId?: VerticalId
-}
-
-export interface PublicCheckoutPlugin {
-  manifest: PluginManifest
-  dataProvider: PublicCheckoutDataProvider
-  /** CheckoutScreen bound to the resolved provider — pass `slug` (+ optional onSuccess). */
-  CheckoutScreen: FC<Omit<CheckoutScreenProps, 'provider'>>
-}
-
-export function createPublicCheckoutPlugin(options: PublicCheckoutOptions = {}): PublicCheckoutPlugin {
-  const basePath = options.basePath ?? '/checkout'
-
-  // Resolution: explicit dataProvider → Supabase whenever a tenantId is declared
-  // (app's global client if registered, else Fayz Cloud) → seeded mock (LOUD).
-  let provider: PublicCheckoutDataProvider
-  if (options.dataProvider) {
-    provider = options.dataProvider
-  } else if (options.tenantId) {
-    provider = createSupabaseCheckoutProvider({ tenantId: options.tenantId })
-  } else {
-    if (typeof console !== 'undefined') {
-      console.warn(
-        '[plugin-courses/public] no `tenantId` and no `dataProvider` — falling back to the MOCK checkout provider. ' +
-          'Pass `tenantId` to sell against the real DB, or inject a dataProvider.',
-      )
-    }
-    provider = createMockCheckoutProvider()
-  }
-
-  const BoundCheckoutScreen: FC<Omit<CheckoutScreenProps, 'provider'>> = (props) =>
-    createElement(CheckoutScreen, { ...props, provider, accent: props.accent ?? options.accent })
-  BoundCheckoutScreen.displayName = 'BoundCheckoutScreen'
-
-  // Route component for manifest-driven hosts (slug injected via route params).
-  // course-members renders BoundCheckoutScreen directly instead.
-  const RouteScreen: FC<unknown> = (props) => {
-    const slug = (props as { slug?: string }).slug ?? ''
-    return createElement(BoundCheckoutScreen, { slug, accent: options.accent })
-  }
-  RouteScreen.displayName = 'CourseCheckoutScreen'
-
-  const manifest: PluginManifest = {
-    id: 'course-checkout',
-    name: 'Checkout de curso',
-    icon: 'ShoppingCart',
-    version: '0.1.0',
-    scope: options.scope ?? 'universal',
-    verticalId: options.verticalId,
-    scaffolds: ['member', 'website', 'landing_page'],
-    defaultEnabled: true,
-    dependencies: [],
-    navigation: [],
-    routes: [{ path: `${basePath}/:slug`, component: RouteScreen, guard: 'public' }],
-    widgets: [],
-  }
-
-  return { manifest, dataProvider: provider, CheckoutScreen: BoundCheckoutScreen }
-}

package/src/public/data.supabase.ts

@@ -1,63 +0,0 @@
-// ---------------------------------------------------------------------------
-// Supabase implementation of PublicCheckoutDataProvider — anon-safe.
-//
-// Public checkout runs with the publishable (anon) key and (usually) no user
-// session, so it only touches objects designed for anon access:
-//   - plg_courses_courses / plg_courses_offers  (published catalog is anon-
-//     readable via the storefront RLS — read here through the shared
-//     @fayz-ai/courses Supabase provider)
-//   - course_place_order_simulated (SECURITY DEFINER RPC: places the order and
-//     simulates a confirmed payment — paid order + enrollment [+ subscription])
-// Shipped by packages/courses/migrations/0009_course_place_order_simulated.sql.
-// ---------------------------------------------------------------------------
-
-import { getSupabaseClientOptional } from '@fayz-ai/core'
-import { createSupabaseCoursesProvider } from '@fayz-ai/courses'
-import type { PublicCheckoutDataProvider, PlaceOrderInput } from './data'
-
-export interface SupabaseCheckoutOptions {
-  /** Tenant this checkout sells for (RPC arg — required). */
-  tenantId: string
-}
-
-interface SupabaseLikeClient {
-  rpc(fn: string, args: Record<string, unknown>): PromiseLike<{ data: unknown; error: { message: string } | null }>
-}
-
-function getClient(): SupabaseLikeClient {
-  const client = getSupabaseClientOptional()
-  if (!client) throw new Error('No Supabase client registered — call setGlobalSupabaseClient() at app startup.')
-  return client as SupabaseLikeClient
-}
-
-export function createSupabaseCheckoutProvider(options: SupabaseCheckoutOptions): PublicCheckoutDataProvider {
-  const { tenantId } = options
-  // Catalog reads reuse the courses provider (tenant scoping comes from the
-  // host's setCoursesTenantResolver + storefront RLS on published rows).
-  const courses = createSupabaseCoursesProvider()
-
-  return {
-    async getCourseBySlug(slug: string) {
-      return courses.getCourse(slug)
-    },
-
-    async getDefaultOffer(courseId: string) {
-      const offers = await courses.listOffers(courseId)
-      return offers.find((o) => o.isDefault) ?? offers[0] ?? null
-    },
-
-    async placeOrder(offerId: string, input: PlaceOrderInput) {
-      const email = input.email.trim()
-      const { data, error } = await getClient().rpc('course_place_order_simulated', {
-        p_tenant_id: tenantId,
-        p_offer_id: offerId,
-        p_customer_email: email,
-        p_customer_name: input.name?.trim() || null,
-        p_payment_method: input.paymentMethod ?? 'pix',
-      })
-      if (error) throw new Error(`[plugin-courses/public] placeOrder: ${error.message}`)
-      const orderId = Array.isArray(data) ? (data[0] as string) : (data as string)
-      return { orderId: String(orderId) }
-    },
-  }
-}

package/src/public/data.ts

@@ -1,89 +0,0 @@
-// ---------------------------------------------------------------------------
-// Data seam for the public course checkout surface.
-//
-// Mirrors plugins/plugin-agenda/src/public/data.ts: a small provider interface
-// with a mock default (dev without a backend) and a Supabase implementation
-// (data.supabase.ts) that reads the anon-visible catalog and calls the
-// course_place_order_simulated RPC. Kept dependency-light on purpose — the
-// public surface must NOT drag in @fayz-ai/saas or the courses admin graph.
-// ---------------------------------------------------------------------------
-
-import type { Course, Offer } from '@fayz-ai/courses'
-
-export type CheckoutPaymentMethod = 'pix' | 'card'
-
-export interface PlaceOrderInput {
-  email: string
-  name?: string
-  paymentMethod?: CheckoutPaymentMethod
-}
-
-export interface PlaceOrderResult {
-  orderId: string
-}
-
-export interface PublicCheckoutDataProvider {
-  /** Published course by slug (or id). Null when not found / not published. */
-  getCourseBySlug(slug: string): Promise<Course | null>
-  /** The offer pre-selected on the checkout (isDefault, else the first). */
-  getDefaultOffer(courseId: string): Promise<Offer | null>
-  /** Records the (simulated-paid) sale + enrollment. Returns the order id. */
-  placeOrder(offerId: string, input: PlaceOrderInput): Promise<PlaceOrderResult>
-}
-
-export interface MockCheckoutOptions {
-  course?: Partial<Course>
-  offer?: Partial<Offer>
-}
-
-/**
- * Loud mock: usable for a UI-only dev run with no backend. It fabricates a
- * single course + offer and a fake order id so the flow renders end-to-end.
- */
-export function createMockCheckoutProvider(opts: MockCheckoutOptions = {}): PublicCheckoutDataProvider {
-  const course: Course = {
-    id: 'mock-course',
-    slug: 'curso-demo',
-    title: 'Curso Demo',
-    subtitle: 'Um curso de demonstração',
-    description: 'Conteúdo de exemplo para validar o fluxo de checkout.',
-    thumbnailUrl: null,
-    price: 197,
-    currency: 'BRL',
-    status: 'published',
-    sortOrder: 0,
-    createdAt: '2026-01-01T00:00:00.000Z',
-    updatedAt: '2026-01-01T00:00:00.000Z',
-    ...(opts.course as Partial<Course>),
-  } as Course
-  const offer: Offer = {
-    id: 'mock-offer',
-    courseId: course.id,
-    name: course.title,
-    price: course.price,
-    currency: course.currency,
-    kind: 'one_time',
-    recurringInterval: null,
-    isDefault: true,
-    isOrderBump: false,
-    sortOrder: 0,
-    ...(opts.offer as Partial<Offer>),
-  } as Offer
-
-  let seq = 0
-  return {
-    async getCourseBySlug(slug: string) {
-      return { ...course, slug: slug || course.slug }
-    },
-    async getDefaultOffer() {
-      return offer
-    },
-    async placeOrder() {
-      seq += 1
-      if (typeof console !== 'undefined') {
-        console.warn('[plugin-courses/public] MOCK placeOrder — no sale was recorded. Pass a tenantId for the real DB.')
-      }
-      return { orderId: `mock-order-${seq}` }
-    },
-  }
-}

package/src/public/index.ts

@@ -1,26 +0,0 @@
-// ---------------------------------------------------------------------------
-// @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/settings/CoursesSettings.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from '@fayz-ai/core'
-import { PluginSettingsPanel, SettingsGroup, SelectRow, ToggleRow } from '@fayz-ai/saas'
-
-// The course plugin's Settings tab. Reuses the saas settings shell
-// (PluginSettingsPanel + SettingsGroup/SelectRow/ToggleRow) instead of
-// hand-rolling a settings layout — same chrome as every other plugin. Stripe
-// Connect lives in the "Integrations" tab (a connector), not here.
-
-function CoursesGeneralSettings() {
-  const t = useTranslation()
-  const [currency, setCurrency] = React.useState('BRL')
-  const [methods, setMethods] = React.useState({ card: true, pix: true, boleto: true })
-
-  return (
-    <div className="space-y-6">
-      <SettingsGroup
-        title={t('courses.settings.payments') || 'Payments'}
-        description={t('courses.settings.paymentsHelp') || 'Connect Stripe in the Integrations tab; the platform fee applies automatically.'}
-      >
-        <SelectRow
-          label={t('courses.settings.currency') || 'Default currency'}
-          value={currency}
-          onChange={setCurrency}
-          options={[
-            { value: 'BRL', label: 'BRL (R$)' },
-            { value: 'USD', label: 'USD ($)' },
-            { value: 'EUR', label: 'EUR (€)' },
-          ]}
-        />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('courses.settings.methods') || 'Payment methods'}>
-        <ToggleRow label={t('courses.editor.payCard') || 'Credit card'} checked={methods.card} onChange={(v) => setMethods((m) => ({ ...m, card: v }))} />
-        <ToggleRow label={t('courses.editor.payPix') || 'Pix'} checked={methods.pix} onChange={(v) => setMethods((m) => ({ ...m, pix: v }))} />
-        <ToggleRow label={t('courses.editor.payBoleto') || 'Boleto'} checked={methods.boleto} onChange={(v) => setMethods((m) => ({ ...m, boleto: v }))} />
-      </SettingsGroup>
-    </div>
-  )
-}
-CoursesGeneralSettings.displayName = 'CoursesGeneralSettings'
-
-export function CoursesSettingsTab() {
-  const t = useTranslation()
-  return (
-    <PluginSettingsPanel
-      title={t('courses.settings.title') || 'Course settings'}
-      subtitle={t('courses.settings.subtitle') || 'Payments, currency and checkout methods'}
-      generalSettings={<CoursesGeneralSettings />}
-      hostPluginId="courses"
-      routeBase="/settings/courses"
-    />
-  )
-}
-CoursesSettingsTab.displayName = 'CoursesSettingsTab'