@carlonicora/nextjs-jsonapi 2.4.0 → 3.0.0

package/src/features/billing/stripe-product/components/forms/ProductArchiver.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 { useProductContext } from "../../../contexts/ProductContext";
+import { StripeProductInterface } from "../../data/stripe-product.interface";
+
+type ProductArchiverProps = {
+  product: StripeProductInterface;
+};
+
+/**
+ * Archive / restore control for a product. 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 ProductArchiver({ product }: ProductArchiverProps) {
+  const t = useTranslations();
+  const { archiveProduct, restoreProduct } = useProductContext();
+  const [open, setOpen] = useState<boolean>(false);
+
+  const isArchived = !product.active;
+  const scope = isArchived ? "restore" : "archive";
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        {isArchived ? <RotateCcwIcon /> : <ArchiveIcon />}
+        {t(`billing.admin.products.${scope}.confirm`)}
+      </Button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={t(`billing.admin.products.${scope}.title`)}
+        description={t(`billing.admin.products.${scope}.description`, { name: product.name })}
+        confirmLabel={t(`billing.admin.products.${scope}.confirm`)}
+        cancelLabel={t("ui.buttons.cancel")}
+        destructive={!isArchived}
+        onConfirm={async () => {
+          try {
+            if (isArchived) await restoreProduct(product.id);
+            else await archiveProduct(product.id);
+          } catch (error) {
+            errorToast({ title: t(`billing.admin.products.${scope}.title`), error });
+            throw error; // keeps the dialog open — ConfirmDialog swallows rejections
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/features/billing/stripe-product/components/forms/ProductEditor.tsx

@@ -1,100 +1,111 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo } from "react";
+import { useForm } from "react-hook-form";
 import { v4 } from "uuid";
 import { z } from "zod";
-import { FormCheckbox, FormInput, FormTextarea } from "../../../../../components";
-import { CommonEditorButtons } from "../../../../../components/forms/CommonEditorButtons";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Form } from "../../../../../shadcnui";
+import { EditorSheet, FormInput, FormTextarea } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { useI18nRouter } from "../../../../../i18n";
+import { useProductContext } from "../../../contexts/ProductContext";
 import { StripeProductInterface } from "../../data/stripe-product.interface";
-import { StripeProductService } from "../../data/stripe-product.service";
 
-type ProductEditorProps = {
+export type ProductEditorProps = {
   product?: StripeProductInterface;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess: () => void;
+  propagateChanges?: (product: StripeProductInterface) => void;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
 };
 
-export function ProductEditor({ product, open, onOpenChange, onSuccess }: ProductEditorProps) {
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+function ProductEditorInternal({
+  product,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: ProductEditorProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const { createProduct, updateProduct } = useProductContext();
+  const isEdit = !!product;
 
-  const formSchema = z.object({
-    name: z.string().min(1, { message: "Product name is required" }),
-    description: z.string().min(1, { message: "Description is required" }),
-    active: z.boolean(),
-  });
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        name: z.string().min(1, { message: t("billing.admin.products.errors.name") }),
+        description: z.string().optional(),
+      }),
+    [t],
+  );
+
+  // `active` is deliberately absent: archiving is the single deactivation path
+  // (ProductArchiver), and a second toggle here would let the two disagree.
+  const getDefaultValues = useCallback(
+    () => ({
+      id: product?.id ?? v4(),
+      name: product?.name ?? "",
+      description: product?.description ?? "",
+    }),
+    [product],
+  );
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: product?.name || "",
-      description: product?.description || "",
-      active: product?.active ?? true,
-    },
+    defaultValues: getDefaultValues(),
   });
 
-  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
-    setIsSubmitting(true);
-
-    try {
-      if (product) {
-        // Update existing product
-        await StripeProductService.updateProduct({
-          id: product.id,
-          name: values.name,
-          description: values.description,
-          active: values.active,
-        });
-      } else {
-        // Create new product
-        await StripeProductService.createProduct({
-          id: v4(),
-          name: values.name,
-          description: values.description,
-          active: values.active,
-        });
-      }
-
-      onSuccess();
-      onOpenChange(false);
-    } catch (error) {
-      console.error("[ProductEditor] Failed to save product:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>{product ? "Edit Product" : "Create Product"}</DialogTitle>
-          <DialogDescription>
-            {product ? `Update the details for ${product.name}` : "Create a new product to offer to your customers"}
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <FormInput form={form} id="name" name="Product Name" placeholder="Enter product name" isRequired />
-
-            <FormTextarea
-              form={form}
-              id="description"
-              name="Description"
-              placeholder="Enter product description"
-              className="min-h-32"
-            />
-
-            <FormCheckbox form={form} id="active" name="Active" />
-
-            <CommonEditorButtons isEdit={!!product} form={form} disabled={isSubmitting} setOpen={onOpenChange} />
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
+    <EditorSheet
+      form={form}
+      entityType={t("billing.admin.products.entity")}
+      entityName={product?.name}
+      isEdit={isEdit}
+      module={Modules.StripeProduct}
+      size="md"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => {
+        const payload = { id: values.id, name: values.name, description: values.description };
+        return isEdit ? await updateProduct(payload) : await createProduct(payload);
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput
+          form={form}
+          id="name"
+          name={t("billing.admin.products.fields.name")}
+          placeholder={t("billing.admin.products.placeholders.name")}
+          isRequired
+        />
+        <FormTextarea
+          form={form}
+          id="description"
+          name={t("billing.admin.products.fields.description")}
+          placeholder={t("billing.admin.products.placeholders.description")}
+          className="min-h-32"
+        />
+      </div>
+    </EditorSheet>
   );
 }
+
+export default function ProductEditor(props: ProductEditorProps) {
+  return <ProductEditorInternal {...props} />;
+}

package/src/features/billing/stripe-product/components/forms/index.ts

@@ -1 +1,3 @@
-export * from "./ProductEditor";
+export * from "./ProductArchiver";
+export { default as ProductEditor } from "./ProductEditor";
+export type { ProductEditorProps } from "./ProductEditor";

package/src/features/billing/stripe-product/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./containers";
+export * from "./details";
 export * from "./forms";
 export * from "./lists";

package/src/features/billing/stripe-product/components/lists/ProductsList.tsx

@@ -1,203 +1,61 @@
 "use client";
 
-import { Archive, ChevronDown, ChevronUp, Edit, Package, RefreshCw } from "lucide-react";
-import { useState } from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  Badge,
-  Button,
-} from "../../../../../shadcnui";
-import { PricesList } from "../../../stripe-price/components/lists/PricesList";
+import { PackageIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect } from "react";
+import { ContentListTable } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../../hooks";
+import { EmptyState } from "../../../../../shadcnui";
+import { useProductContext } from "../../../contexts/ProductContext";
+import { StripeProductFields } from "../../data/stripe-product.fields";
 import { StripeProductInterface } from "../../data/stripe-product.interface";
 import { StripeProductService } from "../../data/stripe-product.service";
-import { ProductEditor } from "../forms/ProductEditor";
+import ProductEditor from "../forms/ProductEditor";
 
 type ProductsListProps = {
-  products: StripeProductInterface[];
-  onProductsChange: () => void;
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell.
+   */
+  fullWidth?: boolean;
 };
 
-export function ProductsList({ products, onProductsChange }: ProductsListProps) {
-  const [expandedProductId, setExpandedProductId] = useState<string | null>(null);
-  const [editingProduct, setEditingProduct] = useState<StripeProductInterface | null>(null);
-  const [archivingProductId, setArchivingProductId] = useState<string | null>(null);
-  const [reactivatingProductId, setReactivatingProductId] = useState<string | null>(null);
-  const [productToArchive, setProductToArchive] = useState<StripeProductInterface | null>(null);
-  const [productToReactivate, setProductToReactivate] = useState<StripeProductInterface | null>(null);
+export function ProductsList({ fullWidth }: ProductsListProps = {}) {
+  const t = useTranslations();
+  const { catalogueVersion } = useProductContext();
 
-  const handleArchive = async () => {
-    if (!productToArchive) {
-      return;
-    }
+  const data: DataListRetriever<StripeProductInterface> = useDataListRetriever({
+    retriever: (params) => StripeProductService.listProducts(params),
+    retrieverParams: {},
+    module: Modules.StripeProduct,
+  });
 
-    setArchivingProductId(productToArchive.id);
-    try {
-      const _archivedProduct = await StripeProductService.archiveProduct({ id: productToArchive.id });
-      setProductToArchive(null); // Close dialog on success
-      onProductsChange();
-    } catch (_error) {
-      console.error("[ProductsList] Failed to archive product:", _error);
-      // Keep dialog open on error so user can retry or cancel
-    } finally {
-      setArchivingProductId(null);
-    }
-  };
+  // Archiving and restoring happen on the detail page, so the list has to learn
+  // about them through the provider's counter rather than a direct callback.
+  useEffect(() => {
+    if (catalogueVersion > 0) void data.refresh();
+  }, [catalogueVersion]);
 
-  const handleReactivate = async () => {
-    if (!productToReactivate) {
-      return;
-    }
-
-    setReactivatingProductId(productToReactivate.id);
-    try {
-      const _reactivatedProduct = await StripeProductService.reactivateProduct({ id: productToReactivate.id });
-      setProductToReactivate(null); // Close dialog on success
-      onProductsChange();
-    } catch (_error) {
-      // Keep dialog open on error so user can retry or cancel
-    } finally {
-      setReactivatingProductId(null);
-    }
-  };
-
-  const toggleExpand = (productId: string) => {
-    setExpandedProductId(expandedProductId === productId ? null : productId);
-  };
+  const functions: ReactNode[] = [<ProductEditor key="create-product" />];
 
   return (
-    <div className="flex flex-col gap-y-4">
-      {products.map((product) => {
-        const isExpanded = expandedProductId === product.id;
-        const isArchiving = archivingProductId === product.id;
-        const isReactivating = reactivatingProductId === product.id;
-
-        return (
-          <div key={product.id} className="border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow">
-            {/* Product Card Header */}
-            <div className="flex items-center justify-between p-6">
-              <div className="flex items-center gap-x-4 flex-1">
-                <Package className="h-6 w-6 text-primary" />
-                <div className="flex-1">
-                  <div className="flex items-center gap-x-3">
-                    <h3 className="text-sm font-medium">{product.name}</h3>
-                    {product.active ? (
-                      <Badge variant="softGreen">Active</Badge>
-                    ) : (
-                      <Badge variant="softGray">Inactive</Badge>
-                    )}
-                  </div>
-                  {product.description && <p className="text-muted-foreground text-sm mt-1">{product.description}</p>}
-                </div>
-              </div>
-
-              {/* Action Buttons */}
-              <div className="flex items-center gap-x-2">
-                <Button variant="outline" size="sm" onClick={() => setEditingProduct(product)}>
-                  <Edit className="h-4 w-4 mr-1" />
-                  Edit
-                </Button>
-                {product.active ? (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setProductToArchive(product)}
-                    disabled={isArchiving}
-                  >
-                    <Archive className="h-4 w-4 mr-1" />
-                    {isArchiving ? "Archiving..." : "Archive"}
-                  </Button>
-                ) : (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setProductToReactivate(product)}
-                    disabled={isReactivating}
-                  >
-                    <RefreshCw className="h-4 w-4 mr-1" />
-                    {isReactivating ? "Reactivating..." : "Reactivate"}
-                  </Button>
-                )}
-                <Button variant="ghost" size="sm" onClick={() => toggleExpand(product.id)}>
-                  {isExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
-                </Button>
-              </div>
-            </div>
-
-            {/* Expandable Prices Section */}
-            {isExpanded && (
-              <div className="border-t bg-muted/30 p-6">
-                <PricesList productId={product.id} onPricesChange={onProductsChange} />
-              </div>
-            )}
-          </div>
-        );
-      })}
-
-      {/* Edit Product Modal */}
-      {editingProduct && (
-        <ProductEditor
-          product={editingProduct}
-          open={!!editingProduct}
-          onOpenChange={(open) => !open && setEditingProduct(null)}
-          onSuccess={() => {
-            onProductsChange();
-            setEditingProduct(null);
-          }}
+    <ContentListTable
+      data={data}
+      fields={[StripeProductFields.name, StripeProductFields.status, StripeProductFields.prices]}
+      tableGeneratorType={Modules.StripeProduct}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("billing.admin.products.title")}
+      emptyState={
+        <EmptyState
+          icon={PackageIcon}
+          title={t("billing.admin.products.empty.title")}
+          description={t("billing.admin.products.empty.description")}
         />
-      )}
-
-      {/* Archive Product Confirmation Dialog */}
-      <AlertDialog open={!!productToArchive} onOpenChange={(open) => !open && setProductToArchive(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Archive Product</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to archive &quot;{productToArchive?.name}&quot;? This will deactivate it and it will
-              no longer be available for new subscriptions.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={!!archivingProductId}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleArchive}
-              disabled={!!archivingProductId}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              {archivingProductId ? "Archiving..." : "Archive"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Reactivate Product Confirmation Dialog */}
-      <AlertDialog open={!!productToReactivate} onOpenChange={(open) => !open && setProductToReactivate(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Reactivate Product</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to reactivate &quot;{productToReactivate?.name}&quot;? This will make it available
-              for new subscriptions again.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={!!reactivatingProductId}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleReactivate}
-              disabled={!!reactivatingProductId}
-              className="bg-green-600 hover:bg-green-700"
-            >
-              {reactivatingProductId ? "Reactivating..." : "Reactivate"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+      }
+    />
   );
 }

package/src/features/billing/stripe-product/data/index.ts

@@ -1,3 +1,4 @@
 export * from "./stripe-product";
+export * from "./stripe-product.fields";
 export * from "./stripe-product.interface";
 export * from "./stripe-product.service";

package/src/features/billing/stripe-product/data/stripe-product.fields.ts

@@ -0,0 +1,6 @@
+export enum StripeProductFields {
+  stripeProductId = "stripeProductId",
+  name = "name",
+  status = "status",
+  prices = "prices",
+}

package/src/features/billing/stripe-product/hooks/useStripeProductTableStructure.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { Badge, Link } from "../../../../shadcnui";
+import { Modules } from "../../../../core";
+import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../../hooks";
+import { StripeProductFields } from "../data/stripe-product.fields";
+import { StripeProductInterface } from "../data/stripe-product.interface";
+
+export const useStripeProductTableStructure: UseTableStructureHook<StripeProductInterface, StripeProductFields> = (
+  params,
+) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  const tableData = useMemo(() => {
+    return params.data.map((product: StripeProductInterface) => {
+      const entry: TableContent<StripeProductInterface> = { jsonApiData: product };
+      entry[StripeProductFields.stripeProductId] = product.id;
+      params.fields.forEach((field) => {
+        entry[field] = (product as any)[field as keyof StripeProductInterface];
+      });
+      return entry;
+    });
+  }, [params.data, params.fields]);
+
+  const fieldColumnMap: Partial<Record<StripeProductFields, () => any>> = {
+    [StripeProductFields.name]: () => ({
+      id: "name",
+      accessorKey: "name",
+      header: t("billing.admin.products.fields.name"),
+      cell: ({ row }: { row: TableContent<StripeProductInterface> }) => {
+        const product: StripeProductInterface = row.original.jsonApiData;
+        return <Link href={generateUrl({ page: Modules.StripeProduct, id: product.id })}>{product.name}</Link>;
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripeProductFields.status]: () => ({
+      id: "status",
+      accessorKey: "status",
+      header: t("billing.admin.products.fields.status"),
+      cell: ({ row }: { row: TableContent<StripeProductInterface> }) => {
+        const product: StripeProductInterface = row.original.jsonApiData;
+        return product.active ? (
+          <Badge variant="softGreen">{t("billing.admin.products.status.active")}</Badge>
+        ) : (
+          <Badge variant="softGray">{t("billing.admin.products.status.archived")}</Badge>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripeProductFields.prices]: () => ({
+      id: "prices",
+      accessorKey: "prices",
+      header: t("billing.admin.products.fields.prices"),
+      cell: ({ row }: { row: TableContent<StripeProductInterface> }) => {
+        const product: StripeProductInterface = row.original.jsonApiData;
+        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER
+        // font-mono — no monospace font is loaded in these apps.
+        return <span className="block text-xs tabular-nums text-right">{product.stripePrices.length}</span>;
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+  };
+
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<StripeProductInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl]);
+
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};
+
+registerTableGenerator("stripe-products", useStripeProductTableStructure);

package/src/features/billing/stripe-product/stripe-product.module.ts

@@ -4,7 +4,11 @@ import { StripeProduct } from "./data";
 export const StripeProductModule = (factory: ModuleFactory) =>
   factory({
     name: "stripe-products",
-    pageUrl: "/stripe-products",
+    // The administration route this entity is served at. `name` above stays the
+    // API endpoint; this drives generateUrl / rewriteUrl / EditorSheet
+    // navigation, so it must match the real Next.js route or RoundPageContainer
+    // rewrites the URL to a 404 on the first tab change.
+    pageUrl: "/administration/products",
     model: StripeProduct,
     moduleId: "f8c4a1e9-3b2d-4f7a-9e5c-1d8a6b3c9f2e",
   });