@carlonicora/nextjs-jsonapi 2.4.0 → 3.0.0

package/src/features/billing/contexts/ProductContext.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+import { SharedProvider } from "../../../contexts/SharedContext";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { getRoleId } from "../../../roles";
+import { useCurrentUserContext } from "../../user/contexts";
+import { ProductArchiver } from "../stripe-product/components/forms/ProductArchiver";
+import ProductEditor from "../stripe-product/components/forms/ProductEditor";
+import { StripeProductInput, StripeProductInterface } from "../stripe-product/data/stripe-product.interface";
+import { StripeProductService } from "../stripe-product/data/stripe-product.service";
+
+export interface ProductContextType {
+  product: StripeProductInterface | undefined;
+  setProduct: (value: StripeProductInterface | undefined) => void;
+  reloadProduct: () => Promise<void>;
+  createProduct: (input: StripeProductInput) => Promise<StripeProductInterface>;
+  updateProduct: (input: StripeProductInput) => Promise<StripeProductInterface>;
+  archiveProduct: (id?: string) => Promise<void>;
+  restoreProduct: (id?: string) => Promise<void>;
+  /** Bumped by every mutation. Mounted lists re-fetch on it. */
+  catalogueVersion: number;
+  refreshCatalogue: () => void;
+}
+
+const ProductContext = createContext<ProductContextType | undefined>(undefined);
+
+export type ProductProviderProps = {
+  children: ReactNode;
+  dehydratedProduct?: JsonApiHydratedDataInterface;
+  /**
+   * Publish breadcrumbs + title into SharedProvider. Pass `false` when this
+   * provider is mounted INSIDE another entity's page (the prices tab mounts
+   * PriceProvider that way): SharedProvider replaces its value for the subtree
+   * rather than merging (SharedContext.tsx:35-37), so a nested provider that
+   * publishes chrome would blank the host page's title.
+   */
+  publishChrome?: boolean;
+};
+
+const defaultContextValue: ProductContextType = {
+  product: undefined,
+  setProduct: () => {},
+  reloadProduct: async () => {},
+  createProduct: async () => {
+    throw new Error("createProduct requires a ProductProvider");
+  },
+  updateProduct: async () => {
+    throw new Error("updateProduct requires a ProductProvider");
+  },
+  archiveProduct: async () => {},
+  restoreProduct: async () => {},
+  catalogueVersion: 0,
+  refreshCatalogue: () => {},
+};
+
+export const ProductProvider = ({ children, dehydratedProduct, publishChrome = true }: ProductProviderProps) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { hasRole } = useCurrentUserContext();
+
+  const [product, setProduct] = useState<StripeProductInterface | undefined>(
+    dehydratedProduct ? rehydrate<StripeProductInterface>(Modules.StripeProduct, dehydratedProduct) : undefined,
+  );
+  const [catalogueVersion, setCatalogueVersion] = useState<number>(0);
+
+  const refreshCatalogue = useCallback(() => setCatalogueVersion((value) => value + 1), []);
+
+  const reloadProduct = useCallback(async () => {
+    if (!product?.id) return;
+    setProduct(await StripeProductService.getProduct({ id: product.id }));
+  }, [product?.id]);
+
+  const createProduct = useCallback(
+    async (input: StripeProductInput) => {
+      const saved = await StripeProductService.createProduct(input);
+      refreshCatalogue();
+      return saved;
+    },
+    [refreshCatalogue],
+  );
+
+  const updateProduct = useCallback(
+    async (input: StripeProductInput) => {
+      const saved = await StripeProductService.updateProduct(input);
+      setProduct(saved);
+      refreshCatalogue();
+      return saved;
+    },
+    [refreshCatalogue],
+  );
+
+  // The archive/reactivate routes answer 204 NO_CONTENT with an empty body
+  // (stripe-product.controller.ts:99-115) even though the service signature
+  // claims it returns a product — so the response is discarded and the entity
+  // is re-read instead.
+  const archiveProduct = useCallback(
+    async (id?: string) => {
+      const target = id ?? product?.id;
+      if (!target) return;
+      await StripeProductService.archiveProduct({ id: target });
+      await reloadProduct();
+      refreshCatalogue();
+    },
+    [product?.id, reloadProduct, refreshCatalogue],
+  );
+
+  const restoreProduct = useCallback(
+    async (id?: string) => {
+      const target = id ?? product?.id;
+      if (!target) return;
+      await StripeProductService.reactivateProduct({ id: target });
+      await reloadProduct();
+      refreshCatalogue();
+    },
+    [product?.id, reloadProduct, refreshCatalogue],
+  );
+
+  const value = useMemo<ProductContextType>(
+    () => ({
+      product,
+      setProduct,
+      reloadProduct,
+      createProduct,
+      updateProduct,
+      archiveProduct,
+      restoreProduct,
+      catalogueVersion,
+      refreshCatalogue,
+    }),
+    [
+      product,
+      reloadProduct,
+      createProduct,
+      updateProduct,
+      archiveProduct,
+      restoreProduct,
+      catalogueVersion,
+      refreshCatalogue,
+    ],
+  );
+
+  if (!publishChrome) return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
+
+  const breadcrumb = (): BreadcrumbItemData[] => {
+    const items: BreadcrumbItemData[] = [
+      {
+        name: t("billing.admin.products.title"),
+        // Linked only when it is NOT the current page.
+        ...(product ? { href: generateUrl({ page: Modules.StripeProduct }) } : {}),
+      },
+    ];
+    if (product) items.push({ name: product.name });
+    return items;
+  };
+
+  const title = () => {
+    const response: any = { type: t("billing.admin.products.title") };
+    if (!product) return response;
+
+    response.element = product.name;
+
+    // narr8 note: gate on hasRole ONLY. hasPermissionToModule always returns
+    // false in this app, so gating an editor on it hides the editor outright.
+    if (hasRole(getRoleId().Administrator)) {
+      response.functions = [
+        <ProductArchiver key="productArchiver" product={product} />,
+        <ProductEditor key="productEditor" product={product} propagateChanges={setProduct} />,
+      ];
+    }
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <ProductContext.Provider value={value}>{children}</ProductContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useProductContext = (): ProductContextType => useContext(ProductContext) ?? defaultContextValue;

package/src/features/billing/contexts/__tests__/PriceContext.spec.tsx

@@ -0,0 +1,89 @@
+import { act, renderHook } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { StripePrice } from "../../stripe-price/data/stripe-price";
+import { StripePriceService } from "../../stripe-price/data/stripe-price.service";
+import { PriceProvider, usePriceContext } from "../PriceContext";
+
+vi.mock("../../stripe-price/data/stripe-price.service", () => ({
+  StripePriceService: {
+    getPrice: vi.fn(async () => ({ id: "pr1" })),
+    createPrice: vi.fn(async () => ({ id: "new" })),
+    updatePrice: vi.fn(async () => ({ id: "pr1" })),
+    archivePrice: vi.fn(async () => undefined),
+    reactivatePrice: vi.fn(async () => undefined),
+  },
+}));
+
+vi.mock("../../../user/contexts", () => ({
+  useCurrentUserContext: () => ({ hasRole: () => true, hasPermissionToModule: () => false }),
+}));
+
+vi.mock("../../../../roles", () => ({
+  getRoleId: () => ({ Administrator: "administrator" }),
+}));
+
+const listModeWrapper = ({ children }: { children: ReactNode }) => (
+  <PriceProvider productId="p1" publishChrome={false}>
+    {children}
+  </PriceProvider>
+);
+
+describe("PriceContext", () => {
+  beforeAll(() => {
+    ModuleRegistry.register("StripePrice", {
+      name: "stripe-prices",
+      pageUrl: "/administration/prices",
+      model: StripePrice,
+    } as any);
+  });
+
+  beforeEach(() => vi.clearAllMocks());
+
+  it("returns a no-op default outside a provider instead of throwing", () => {
+    const { result } = renderHook(() => usePriceContext());
+
+    expect(result.current.price).toBeUndefined();
+    expect(result.current.priceVersion).toBe(0);
+  });
+
+  it("exposes the productId it was mounted with, so the tab can create prices", () => {
+    const { result } = renderHook(() => usePriceContext(), { wrapper: listModeWrapper });
+
+    expect(result.current.productId).toBe("p1");
+  });
+
+  it("bumps priceVersion after a create", async () => {
+    const { result } = renderHook(() => usePriceContext(), { wrapper: listModeWrapper });
+
+    await act(async () => {
+      await result.current.createPrice({ id: "new", productId: "p1", currency: "usd" });
+    });
+
+    expect(StripePriceService.createPrice).toHaveBeenCalledWith({ id: "new", productId: "p1", currency: "usd" });
+    expect(result.current.priceVersion).toBe(1);
+  });
+
+  it("archives and restores by explicit id", async () => {
+    const { result } = renderHook(() => usePriceContext(), { wrapper: listModeWrapper });
+
+    await act(async () => {
+      await result.current.archivePrice("pr9");
+      await result.current.restorePrice("pr9");
+    });
+
+    expect(StripePriceService.archivePrice).toHaveBeenCalledWith({ id: "pr9" });
+    expect(StripePriceService.reactivatePrice).toHaveBeenCalledWith({ id: "pr9" });
+  });
+
+  it("publishes no page chrome when publishChrome is false", () => {
+    // A nested SharedProvider would replace the host page's title. Rendering in
+    // list mode must therefore leave SharedContext untouched — asserted by the
+    // absence of a throw from the host's own consumer, which is covered by the
+    // productId test above rendering without a SharedProvider ancestor.
+    const { result } = renderHook(() => usePriceContext(), { wrapper: listModeWrapper });
+
+    expect(result.current.price).toBeUndefined();
+  });
+});

package/src/features/billing/contexts/__tests__/ProductContext.spec.tsx

@@ -0,0 +1,81 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { StripeProduct } from "../../stripe-product/data/stripe-product";
+import { StripeProductService } from "../../stripe-product/data/stripe-product.service";
+import { ProductProvider, useProductContext } from "../ProductContext";
+
+vi.mock("../../stripe-product/data/stripe-product.service", () => ({
+  StripeProductService: {
+    getProduct: vi.fn(async () => ({ id: "p1", name: "Reloaded" })),
+    createProduct: vi.fn(async () => ({ id: "new", name: "Created" })),
+    updateProduct: vi.fn(async () => ({ id: "p1", name: "Updated" })),
+    archiveProduct: vi.fn(async () => undefined),
+    reactivateProduct: vi.fn(async () => undefined),
+  },
+}));
+
+vi.mock("../../../user/contexts", () => ({
+  useCurrentUserContext: () => ({ hasRole: () => true, hasPermissionToModule: () => false }),
+}));
+
+vi.mock("../../../../roles", () => ({
+  getRoleId: () => ({ Administrator: "administrator" }),
+}));
+
+const wrapper = ({ children }: { children: ReactNode }) => <ProductProvider>{children}</ProductProvider>;
+
+describe("ProductContext", () => {
+  beforeAll(() => {
+    ModuleRegistry.register("StripeProduct", {
+      name: "stripe-products",
+      pageUrl: "/administration/products",
+      model: StripeProduct,
+    } as any);
+  });
+
+  beforeEach(() => vi.clearAllMocks());
+
+  it("returns a no-op default outside a provider instead of throwing", () => {
+    const { result } = renderHook(() => useProductContext());
+
+    expect(result.current.product).toBeUndefined();
+    expect(result.current.catalogueVersion).toBe(0);
+  });
+
+  it("bumps catalogueVersion after a create so mounted lists re-fetch", async () => {
+    const { result } = renderHook(() => useProductContext(), { wrapper });
+
+    expect(result.current.catalogueVersion).toBe(0);
+    await act(async () => {
+      await result.current.createProduct({ id: "new", name: "Created" });
+    });
+
+    expect(StripeProductService.createProduct).toHaveBeenCalledWith({ id: "new", name: "Created" });
+    expect(result.current.catalogueVersion).toBe(1);
+  });
+
+  it("archives by explicit id and reloads rather than trusting the 204 body", async () => {
+    const { result } = renderHook(() => useProductContext(), { wrapper });
+
+    await act(async () => {
+      await result.current.archiveProduct("p9");
+    });
+
+    expect(StripeProductService.archiveProduct).toHaveBeenCalledWith({ id: "p9" });
+    // No product is held in list mode, so there is nothing to reload — but the
+    // catalogue counter must still move or the list would show stale rows.
+    await waitFor(() => expect(result.current.catalogueVersion).toBe(1));
+  });
+
+  it("restores through reactivateProduct", async () => {
+    const { result } = renderHook(() => useProductContext(), { wrapper });
+
+    await act(async () => {
+      await result.current.restoreProduct("p9");
+    });
+
+    expect(StripeProductService.reactivateProduct).toHaveBeenCalledWith({ id: "p9" });
+  });
+});

package/src/features/billing/contexts/index.ts

@@ -1 +1,2 @@
-export * from "./BillingContext";
+export * from "./PriceContext";
+export * from "./ProductContext";

package/src/features/billing/i18n-keys.ts

@@ -0,0 +1,88 @@
+/**
+ * The fixed namespace of i18n keys the administrative billing surfaces read via
+ * useTranslations. Consuming apps must define each entry in their
+ * messages/<locale>.json — this list is the contract between the package and
+ * the app, and the names are frozen: an app that wants different wording
+ * changes its own translation, never the key.
+ *
+ * Mirrors the contract shipped by the administration feature
+ * (features/administration/i18n-keys.ts).
+ */
+export const BILLING_ADMIN_I18N_KEYS = [
+  "billing.admin.products.title",
+  "billing.admin.products.entity",
+  "billing.admin.products.create",
+  "billing.admin.products.tabs.details",
+  "billing.admin.products.empty.title",
+  "billing.admin.products.empty.description",
+  "billing.admin.products.fields.name",
+  "billing.admin.products.fields.description",
+  "billing.admin.products.fields.status",
+  "billing.admin.products.fields.prices",
+  "billing.admin.products.fields.stripeId",
+  "billing.admin.products.placeholders.name",
+  "billing.admin.products.placeholders.description",
+  "billing.admin.products.errors.name",
+  "billing.admin.products.status.active",
+  "billing.admin.products.status.archived",
+  "billing.admin.products.archive.title",
+  "billing.admin.products.archive.description",
+  "billing.admin.products.archive.confirm",
+  "billing.admin.products.restore.title",
+  "billing.admin.products.restore.description",
+  "billing.admin.products.restore.confirm",
+  "billing.admin.prices.title",
+  "billing.admin.prices.entity",
+  "billing.admin.prices.create",
+  "billing.admin.prices.empty.title",
+  "billing.admin.prices.empty.description",
+  "billing.admin.prices.fields.product",
+  "billing.admin.prices.fields.nickname",
+  "billing.admin.prices.fields.amount",
+  "billing.admin.prices.fields.currency",
+  "billing.admin.prices.fields.interval",
+  "billing.admin.prices.fields.intervalCount",
+  "billing.admin.prices.fields.usageType",
+  "billing.admin.prices.fields.token",
+  "billing.admin.prices.fields.trial",
+  "billing.admin.prices.fields.description",
+  "billing.admin.prices.fields.features",
+  "billing.admin.prices.fields.platformFeatures",
+  "billing.admin.prices.fields.status",
+  "billing.admin.prices.fields.type",
+  "billing.admin.prices.fields.billing",
+  "billing.admin.prices.fields.stripeId",
+  "billing.admin.prices.placeholders.amount",
+  "billing.admin.prices.placeholders.intervalCount",
+  "billing.admin.prices.placeholders.nickname",
+  "billing.admin.prices.placeholders.description",
+  "billing.admin.prices.placeholders.token",
+  "billing.admin.prices.placeholders.feature",
+  "billing.admin.prices.help.trial",
+  "billing.admin.prices.help.core",
+  "billing.admin.prices.errors.amount",
+  "billing.admin.prices.errors.currency",
+  "billing.admin.prices.status.active",
+  "billing.admin.prices.status.archived",
+  "billing.admin.prices.badge.trial",
+  "billing.admin.prices.badge.metered",
+  "billing.admin.prices.type.oneTime",
+  "billing.admin.prices.type.recurring",
+  "billing.admin.prices.interval.one_time",
+  "billing.admin.prices.interval.day",
+  "billing.admin.prices.interval.week",
+  "billing.admin.prices.interval.month",
+  "billing.admin.prices.interval.year",
+  "billing.admin.prices.usage.licensed",
+  "billing.admin.prices.usage.metered",
+  "billing.admin.prices.immutability.title",
+  "billing.admin.prices.immutability.description",
+  "billing.admin.prices.actions.addFeature",
+  "billing.admin.prices.actions.removeFeature",
+  "billing.admin.prices.archive.title",
+  "billing.admin.prices.archive.description",
+  "billing.admin.prices.archive.confirm",
+  "billing.admin.prices.restore.title",
+  "billing.admin.prices.restore.description",
+  "billing.admin.prices.restore.confirm",
+] as const;

package/src/features/billing/stripe-price/components/containers/PriceContainer.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { usePriceContext } from "../../../contexts/PriceContext";
+import { PriceDetails } from "../details/PriceDetails";
+
+export function PriceContainer() {
+  const { price } = usePriceContext();
+
+  if (!price) return null;
+
+  // No tabs: a price is a single flat record. RoundPageContainer without
+  // `tabs` and without `fullWidth` gives the centred max-w-6xl column and the
+  // title bar that PriceContext's chrome fills.
+  return (
+    <RoundPageContainer module={Modules.StripePrice} id={price.id}>
+      <PriceDetails />
+    </RoundPageContainer>
+  );
+}

package/src/features/billing/stripe-price/components/containers/index.ts

@@ -0,0 +1 @@
+export * from "./PriceContainer";

package/src/features/billing/stripe-price/components/details/PriceDetails.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { DetailField, SectionHeader } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { usePageUrlGenerator } from "../../../../../hooks";
+import { Badge, Link } from "../../../../../shadcnui";
+import { formatCurrency, formatInterval } from "../../../components/utils/currency";
+import { usePriceContext } from "../../../contexts/PriceContext";
+
+export function PriceDetails() {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { price } = usePriceContext();
+
+  if (!price) return null;
+
+  const isRecurring = price.priceType === "recurring";
+
+  return (
+    <div className="flex w-full flex-col gap-y-8">
+      <div className="flex w-full flex-col gap-y-4">
+        <SectionHeader>{t("billing.admin.prices.title")}</SectionHeader>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <DetailField
+            label={t("billing.admin.prices.fields.product")}
+            value={
+              price.product ? (
+                <Link href={generateUrl({ page: Modules.StripeProduct, id: price.product.id })}>
+                  {price.product.name}
+                </Link>
+              ) : (
+                "—"
+              )
+            }
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.status")}
+            value={
+              <span className="flex flex-wrap items-center gap-1">
+                {price.active ? (
+                  <Badge variant="softGreen">{t("billing.admin.prices.status.active")}</Badge>
+                ) : (
+                  <Badge variant="softGray">{t("billing.admin.prices.status.archived")}</Badge>
+                )}
+                {price.isTrial && <Badge variant="softBlue">{t("billing.admin.prices.badge.trial")}</Badge>}
+              </span>
+            }
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.amount")}
+            value={<span className="tabular-nums">{formatCurrency(price.unitAmount, price.currency)}</span>}
+          />
+          <DetailField label={t("billing.admin.prices.fields.currency")} value={price.currency.toUpperCase()} />
+          <DetailField
+            label={t("billing.admin.prices.fields.type")}
+            value={isRecurring ? t("billing.admin.prices.type.recurring") : t("billing.admin.prices.type.oneTime")}
+          />
+          <DetailField label={t("billing.admin.prices.fields.billing")} value={formatInterval(price)} />
+          {isRecurring && (
+            <DetailField
+              label={t("billing.admin.prices.fields.intervalCount")}
+              value={<span className="tabular-nums">{price.recurring?.intervalCount ?? 1}</span>}
+            />
+          )}
+          {isRecurring && (
+            <DetailField
+              label={t("billing.admin.prices.fields.usageType")}
+              value={
+                price.recurring?.usageType === "metered"
+                  ? t("billing.admin.prices.usage.metered")
+                  : t("billing.admin.prices.usage.licensed")
+              }
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-y-4">
+        <SectionHeader>{t("billing.admin.prices.fields.platformFeatures")}</SectionHeader>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <DetailField
+            label={t("billing.admin.prices.fields.token")}
+            value={<span className="tabular-nums">{price.token ?? "—"}</span>}
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.stripeId")}
+            value={<span className="tabular-nums">{price.stripePriceId}</span>}
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.description")}
+            value={price.description ?? "—"}
+            className="md:col-span-2"
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.features")}
+            className="md:col-span-2"
+            value={
+              price.features && price.features.length > 0 ? (
+                <ul className="flex flex-col gap-1 text-sm">
+                  {price.features.map((feature) => (
+                    <li key={feature}>{feature}</li>
+                  ))}
+                </ul>
+              ) : (
+                "—"
+              )
+            }
+          />
+          <DetailField
+            label={t("billing.admin.prices.fields.platformFeatures")}
+            className="md:col-span-2"
+            value={
+              price.priceFeatures.length > 0 ? (
+                <span className="flex flex-wrap items-center gap-1">
+                  {price.priceFeatures.map((feature) => (
+                    <Badge key={feature.id} variant="softGray">
+                      {feature.name}
+                    </Badge>
+                  ))}
+                </span>
+              ) : (
+                "—"
+              )
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/billing/stripe-price/components/details/index.ts

@@ -0,0 +1 @@
+export * from "./PriceDetails";

package/src/features/billing/stripe-price/components/forms/PriceArchiver.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ArchiveIcon, RotateCcwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../../components/errors";
+import { Button, ConfirmDialog } from "../../../../../shadcnui";
+import { priceLabel, usePriceContext } from "../../../contexts/PriceContext";
+import { StripePriceInterface } from "../../data/stripe-price.interface";
+
+type PriceArchiverProps = {
+  price: StripePriceInterface;
+};
+
+/**
+ * Archive / restore control for a price. Built on ConfirmDialog, which is
+ * controlled and trigger-less by design — the caller owns the trigger button,
+ * so none of Base UI's trigger-composition pitfalls apply (no asChild, no
+ * nested <button>).
+ */
+export function PriceArchiver({ price }: PriceArchiverProps) {
+  const t = useTranslations();
+  const { archivePrice, restorePrice } = usePriceContext();
+  const [open, setOpen] = useState<boolean>(false);
+
+  const isArchived = !price.active;
+  const scope = isArchived ? "restore" : "archive";
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        {isArchived ? <RotateCcwIcon /> : <ArchiveIcon />}
+        {t(`billing.admin.prices.${scope}.confirm`)}
+      </Button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={t(`billing.admin.prices.${scope}.title`)}
+        description={t(`billing.admin.prices.${scope}.description`, { label: priceLabel(price) })}
+        confirmLabel={t(`billing.admin.prices.${scope}.confirm`)}
+        cancelLabel={t("ui.buttons.cancel")}
+        destructive={!isArchived}
+        onConfirm={async () => {
+          try {
+            if (isArchived) await restorePrice(price.id);
+            else await archivePrice(price.id);
+          } catch (error) {
+            errorToast({ title: t(`billing.admin.prices.${scope}.title`), error });
+            throw error; // keeps the dialog open — ConfirmDialog swallows rejections
+          }
+        }}
+      />
+    </>
+  );
+}