This commit is contained in:
@@ -2,49 +2,73 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useTranslations, useFormatter } from "next-intl";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
|
||||
interface Props {
|
||||
tenantName: string;
|
||||
/**
|
||||
* Current suspend state — server-derived. The control toggles this
|
||||
* via PATCH /api/tenants/[name]/suspend, then refreshes the route
|
||||
* so server-component-side data (status badge, suspended notice)
|
||||
* re-renders.
|
||||
* Current suspend state — server-derived. Drives which control the
|
||||
* customer sees: "Cancel subscription" while active, the
|
||||
* resume-request flow while suspended.
|
||||
*/
|
||||
suspended: boolean;
|
||||
/**
|
||||
* True when the viewer has platform admin role. Platform users are
|
||||
* the only ones who can directly resume a tenant via PATCH; owners
|
||||
* must go through the resume-request flow. We use this in the
|
||||
* suspended branch to decide whether to render a direct "Resume"
|
||||
* button or the "Request reactivation" workflow.
|
||||
*/
|
||||
isPlatform: boolean;
|
||||
/**
|
||||
* If a resume request is currently pending for this tenant, its
|
||||
* id and submitted-at. The component renders an info card with
|
||||
* a cancel-request button instead of the request-reactivation
|
||||
* button. Only meaningful when `suspended === true`.
|
||||
*/
|
||||
pendingResumeRequest: { id: string; createdAt: string } | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* SubscriptionToggle — owner-side cancel/resume control (Bug 31).
|
||||
* SubscriptionToggle — owner-side cancel/resume control.
|
||||
*
|
||||
* Renders a single button that toggles between "Cancel subscription"
|
||||
* (when active) and "Resume subscription" (when suspended). Cancellation
|
||||
* is gated behind a confirmation modal because it's destructive
|
||||
* looking from the user's POV — even though no data is lost, the
|
||||
* AI assistant becomes unavailable until they resume. Resume has no
|
||||
* modal; it's a strict subset of cancellation in terms of risk.
|
||||
* Three render states:
|
||||
* 1. Active: "Cancel subscription" button + confirmation modal
|
||||
* (mentions 60-day retention before permanent deletion).
|
||||
* 2. Suspended, no pending resume request: "Request reactivation"
|
||||
* button + simple confirmation modal explaining admin review.
|
||||
* 3. Suspended, pending resume request: status card "Reactivation
|
||||
* requested X days ago" + "Cancel request" button.
|
||||
*
|
||||
* The control intentionally lives at the bottom of the tenant detail
|
||||
* page rather than next to the status badge — putting it near the
|
||||
* top would invite mis-clicks. Customers who want to cancel scroll
|
||||
* past the running configuration, billing-relevant info, and assigned
|
||||
* users first; that's the right friction level.
|
||||
* Platform admins viewing a suspended tenant get a fourth state in
|
||||
* place of #2/#3: a direct "Resume now" button (no admin queue, no
|
||||
* request flow). This is the admin escape hatch.
|
||||
*
|
||||
* Suspended tenants render a top-of-page banner separately (see the
|
||||
* detail page); this component focuses on the action itself.
|
||||
* The control intentionally lives at the bottom of the tenant
|
||||
* detail page rather than near the top — putting it next to the
|
||||
* status badge would invite mis-clicks.
|
||||
*/
|
||||
export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
export function SubscriptionToggle({
|
||||
tenantName,
|
||||
suspended,
|
||||
isPlatform,
|
||||
pendingResumeRequest,
|
||||
}: Props) {
|
||||
const t = useTranslations("tenantDetail");
|
||||
const tCommon = useTranslations("common");
|
||||
const f = useFormatter();
|
||||
const router = useRouter();
|
||||
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);
|
||||
const [confirmResumeOpen, setConfirmResumeOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const toggleSuspend = async (next: boolean) => {
|
||||
// Customer-side cancel: PATCH suspend=true. Same path as before.
|
||||
// The 60-day retention copy in the modal is the new bit (Bug 37b);
|
||||
// mechanics are unchanged.
|
||||
const cancel = async () => {
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
try {
|
||||
@@ -53,18 +77,14 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ suspend: next }),
|
||||
body: JSON.stringify({ suspend: true }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("subscriptionUpdateFailed"));
|
||||
}
|
||||
setConfirmOpen(false);
|
||||
// The status badge + suspended banner are server-rendered, so
|
||||
// a route refresh is the simplest way to reflect the new state.
|
||||
// Optimistic local toggle would diverge from the actual CR if
|
||||
// the operator hasn't observed the patch yet.
|
||||
setConfirmCancelOpen(false);
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
@@ -73,39 +93,217 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
// Owner-side resume request: POST a 'resume' tenant_request that
|
||||
// sits pending until admin acts. Different from cancel: no PATCH
|
||||
// on the CR — that happens only when admin approves.
|
||||
const requestResume = async () => {
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/tenants/${encodeURIComponent(tenantName)}/resume-request`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("subscriptionUpdateFailed"));
|
||||
}
|
||||
setConfirmResumeOpen(false);
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Customer cancels their own pending resume request.
|
||||
const cancelResumeRequest = async () => {
|
||||
if (!pendingResumeRequest) return;
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/onboarding/${pendingResumeRequest.id}`,
|
||||
{ method: "DELETE" }
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("subscriptionUpdateFailed"));
|
||||
}
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Platform admin: direct resume, bypassing the request flow.
|
||||
const adminResume = async () => {
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/tenants/${encodeURIComponent(tenantName)}/suspend`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ suspend: false }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("subscriptionUpdateFailed"));
|
||||
}
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ─── Suspended branch ───────────────────────────────────────────────
|
||||
|
||||
if (suspended) {
|
||||
// Platform admin sees direct resume. Independent of pending
|
||||
// resume — admin can always resume immediately.
|
||||
if (isPlatform) {
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={adminResume}
|
||||
disabled={submitting}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{submitting
|
||||
? tCommon("loading")
|
||||
: t("resumeSubscription")}
|
||||
</button>
|
||||
{pendingResumeRequest && (
|
||||
<p className="text-xs text-text-muted mt-2">
|
||||
{t("resumeRequestPendingNoteAdmin")}
|
||||
</p>
|
||||
)}
|
||||
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Owner with pending resume request: render the request status
|
||||
// card with cancel.
|
||||
if (pendingResumeRequest) {
|
||||
const submittedDate = new Date(pendingResumeRequest.createdAt);
|
||||
return (
|
||||
<div>
|
||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
|
||||
<div className="text-sm font-medium text-amber-400 mb-1">
|
||||
{t("resumeRequestPendingTitle")}
|
||||
</div>
|
||||
<div className="text-xs text-text-secondary">
|
||||
{t.rich("resumeRequestPendingDescription", {
|
||||
when: f.relativeTime(submittedDate),
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancelResumeRequest}
|
||||
disabled={submitting}
|
||||
className="mt-3 text-xs px-3 py-1.5 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
|
||||
>
|
||||
{submitting
|
||||
? tCommon("loading")
|
||||
: t("cancelResumeRequest")}
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Owner with no pending request: offer to create one.
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleSuspend(false)}
|
||||
disabled={submitting}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors disabled:opacity-50"
|
||||
onClick={() => setConfirmResumeOpen(true)}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors"
|
||||
>
|
||||
{submitting ? tCommon("loading") : t("resumeSubscription")}
|
||||
{t("requestReactivation")}
|
||||
</button>
|
||||
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
|
||||
{error && !confirmResumeOpen && (
|
||||
<p className="text-xs text-red-400 mt-2">{error}</p>
|
||||
)}
|
||||
|
||||
{confirmResumeOpen && (
|
||||
<Modal
|
||||
open={confirmResumeOpen}
|
||||
onClose={() => setConfirmResumeOpen(false)}
|
||||
ariaLabel={t("requestReactivationConfirmTitle")}
|
||||
>
|
||||
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
|
||||
{t("requestReactivationConfirmTitle")}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary mb-5">
|
||||
{t("requestReactivationConfirmDescription")}
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmResumeOpen(false)}
|
||||
disabled={submitting}
|
||||
className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
{tCommon("cancel")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={requestResume}
|
||||
disabled={submitting}
|
||||
className="text-sm px-4 py-2 rounded-lg bg-success text-white hover:bg-success/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{submitting
|
||||
? tCommon("loading")
|
||||
: t("requestReactivationConfirm")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Active branch ──────────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
onClick={() => setConfirmCancelOpen(true)}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors"
|
||||
>
|
||||
{t("cancelSubscription")}
|
||||
</button>
|
||||
{error && !confirmOpen && (
|
||||
{error && !confirmCancelOpen && (
|
||||
<p className="text-xs text-red-400 mt-2">{error}</p>
|
||||
)}
|
||||
|
||||
{confirmOpen && (
|
||||
{confirmCancelOpen && (
|
||||
<Modal
|
||||
open={confirmOpen}
|
||||
onClose={() => setConfirmOpen(false)}
|
||||
open={confirmCancelOpen}
|
||||
onClose={() => setConfirmCancelOpen(false)}
|
||||
ariaLabel={t("cancelConfirmTitle")}
|
||||
>
|
||||
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
|
||||
@@ -114,11 +312,17 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
<p className="text-sm text-text-secondary mb-3">
|
||||
{t("cancelConfirmDescription")}
|
||||
</p>
|
||||
<ul className="text-xs text-text-muted list-disc list-inside space-y-1 mb-5">
|
||||
<ul className="text-xs text-text-muted list-disc list-inside space-y-1 mb-3">
|
||||
<li>{t("cancelConfirmBullet1")}</li>
|
||||
<li>{t("cancelConfirmBullet2")}</li>
|
||||
<li>{t("cancelConfirmBullet3")}</li>
|
||||
</ul>
|
||||
{/* Bug 37b: 60-day retention warning. Distinct paragraph so it
|
||||
reads as a separate, more serious commitment than the
|
||||
regular bullets above. */}
|
||||
<div className="text-xs text-amber-400 bg-amber-400/10 border border-amber-400/20 rounded-lg px-3 py-2 mb-5">
|
||||
{t("cancelConfirmRetentionWarning")}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
|
||||
@@ -129,7 +333,7 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmOpen(false)}
|
||||
onClick={() => setConfirmCancelOpen(false)}
|
||||
disabled={submitting}
|
||||
className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
@@ -137,7 +341,7 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleSuspend(true)}
|
||||
onClick={cancel}
|
||||
disabled={submitting}
|
||||
className="text-sm px-4 py-2 rounded-lg bg-amber-500 text-white hover:bg-amber-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user