Phase2.5: Skill SetUp Process

src/components/packages/package-card.tsx

@@ -1,8 +1,14 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import type { PackageDef } from "@/lib/packages";
+import type {
+  SkillActivationRequest,
+  SkillPricing,
+} from "@/types";
+import { SkillCostDialog } from "./skill-cost-dialog";
 
 interface Props {
   pkg: PackageDef;
@@ -12,6 +18,18 @@ interface Props {
   onToggled: () => void;
   /** Slice 5: when false, the enable/disable button is hidden. */
   canEdit?: boolean;
+  /**
+   * Phase 2.5 — most recent non-terminal activation request for this
+   * skill on this tenant, if any. Drives the "Manual review pending"
+   * and "Activation rejected" inline states. Approved/withdrawn rows
+   * never reach the client side.
+   */
+  activationRequest?: SkillActivationRequest | null;
+  /**
+   * Phase 2.5 — pricing for this skill if it has any. Triggers the
+   * cost-disclosure dialog before enable.
+   */
+  pricing?: SkillPricing | null;
 }
 
 export function PackageCard({
@@ -21,15 +39,33 @@ export function PackageCard({
   tenantName,
   onToggled,
   canEdit = true,
+  activationRequest = null,
+  pricing = null,
 }: Props) {
   const t = useTranslations();
+  const router = useRouter();
   const [showModal, setShowModal] = useState(false);
   const [secrets, setSecrets] = useState<Record<string, string>>({});
   const [accepted, setAccepted] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Phase 2.5: cost-disclosure flow + activation-request flow.
+  const [showCostDialog, setShowCostDialog] = useState(false);
+  const isPriced =
+    (pricing?.dailyPriceChf ?? 0) > 0 || (pricing?.setupFeeChf ?? 0) > 0;
 
-  async function handleEnable() {
+  function handleEnable() {
+    // Phase 2.5: gate priced skills behind the cost-disclosure dialog.
+    // Confirm → proceedWithEnable. Cancel → bail.
+    if (isPriced) {
+      setError(null);
+      setShowCostDialog(true);
+      return;
+    }
+    void proceedWithEnable();
+  }
+
+  async function proceedWithEnable() {
     if (pkg.customProvisioning) {
       // Platform-side provisioning, then add to packages list.
       setSaving(true);
@@ -112,6 +148,39 @@ export function PackageCard({
     }
   }
 
+  // Phase 2.5: withdraw a still-pending activation request. The
+  // request row flips to 'withdrawn' (server-side); router.refresh()
+  // re-renders the tenant page without the pending state, leaving
+  // the toggle re-enabled if the user wants to retry.
+  async function withdrawRequest() {
+    if (!activationRequest || activationRequest.status !== "pending") return;
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `/api/skills/requests/${activationRequest.id}/withdraw`,
+        { method: "POST" }
+      );
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // Phase 2.5: retry after a rejection. Same flow as a fresh
+  // enable; the rejected row stays in the DB as audit trail but a
+  // new pending row will be created by the PATCH.
+  function tryAgainAfterRejection() {
+    setError(null);
+    handleEnable();
+  }
+
   async function handleSubmitSecrets() {
     if (pkg.disclaimerKey && !accepted) return;
 
@@ -170,7 +239,38 @@ export function PackageCard({
           {pkg.requiresSecrets && (
             <span className="text-[10px] text-text-muted">{t("packages.requiresApiKey")}</span>
           )}
-          {canEdit ? (
+          {/* Phase 2.5: pending or rejected request takes precedence
+              over the toggle. Approved/withdrawn never reach here. */}
+          {canEdit && activationRequest?.status === "pending" ? (
+            <div className="ml-auto flex items-center gap-2">
+              <span className="text-[10px] text-warning italic">
+                {t("packages.manualReviewPending")}
+              </span>
+              <button
+                onClick={withdrawRequest}
+                disabled={saving}
+                className="rounded-lg px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary bg-surface-3 hover:bg-surface-2 disabled:opacity-50 cursor-pointer"
+              >
+                {saving ? "…" : t("packages.withdraw")}
+              </button>
+            </div>
+          ) : canEdit && activationRequest?.status === "rejected" ? (
+            <div className="ml-auto flex flex-col items-end gap-1">
+              <span
+                className="text-[10px] text-error italic max-w-[220px] truncate"
+                title={activationRequest.rejectionReason ?? ""}
+              >
+                {t("packages.activationRejected")}: {activationRequest.rejectionReason}
+              </span>
+              <button
+                onClick={tryAgainAfterRejection}
+                disabled={saving}
+                className="rounded-lg px-3 py-1.5 text-xs font-medium bg-accent text-surface-0 hover:bg-accent-dim disabled:opacity-50 cursor-pointer shadow-lg shadow-accent/20"
+              >
+                {saving ? "…" : t("packages.tryAgain")}
+              </button>
+            </div>
+          ) : canEdit ? (
             <button
               onClick={enabled ? handleDisable : handleEnable}
               disabled={saving}
@@ -194,6 +294,20 @@ export function PackageCard({
         </div>
       </div>
 
+      {/* Phase 2.5: cost-disclosure modal for priced skills. */}
+      <SkillCostDialog
+        open={showCostDialog}
+        onClose={() => setShowCostDialog(false)}
+        onConfirm={() => {
+          setShowCostDialog(false);
+          void proceedWithEnable();
+        }}
+        skillName={pkg.name}
+        dailyPriceChf={pricing?.dailyPriceChf ?? 0}
+        setupFeeChf={pricing?.setupFeeChf ?? 0}
+        busy={saving}
+      />
+
       {showModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
           <div className="w-full max-w-md bg-surface-1 border border-border rounded-2xl p-6 space-y-4 shadow-2xl shadow-black/40">