@carlonicora/nextjs-jsonapi 1.14.0 → 1.16.0

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

@@ -0,0 +1,304 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertCircle, PlusIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { FormCheckbox, FormInput, FormSelect, FormTextarea } from "../../../../../components";
+import { CommonEditorButtons } from "../../../../../components/forms/CommonEditorButtons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormItem,
+  FormLabel,
+  Input,
+} from "../../../../../shadcnui";
+import { StripePriceInterface, StripePriceService } from "../../data";
+
+type PriceEditorProps = {
+  productId: string;
+  price?: StripePriceInterface;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+};
+
+type PriceFormValues = {
+  unitAmount: number;
+  currency: string;
+  interval: "one_time" | "day" | "week" | "month" | "year";
+  intervalCount?: number;
+  usageType?: "licensed" | "metered";
+  nickname?: string;
+  active: boolean;
+  description?: string;
+  features: string[];
+};
+
+export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }: PriceEditorProps) {
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const formSchema = z.object({
+    unitAmount: z.preprocess(
+      (val) => (typeof val === "string" ? parseFloat(val) : val),
+      z.number().min(0, { message: "Amount must be 0 or greater" }),
+    ),
+    currency: z.string().min(1, { message: "Currency is required" }),
+    interval: z.enum(["one_time", "day", "week", "month", "year"]),
+    intervalCount: z.preprocess(
+      (val) => (val === "" || val === undefined ? undefined : typeof val === "string" ? parseInt(val, 10) : val),
+      z.number().min(1).optional(),
+    ),
+    usageType: z.enum(["licensed", "metered"]).optional(),
+    nickname: z.string().optional(),
+    active: z.boolean(),
+    description: z.string().optional(),
+    features: z.array(z.string()),
+  });
+
+  const isEditMode = !!price;
+
+  // Convert cents to dollars for display
+  const defaultUnitAmount = price?.unitAmount ? price.unitAmount / 100 : 0;
+
+  const form = useForm<PriceFormValues>({
+    resolver: zodResolver(formSchema) as any,
+    defaultValues: {
+      unitAmount: defaultUnitAmount,
+      currency: price?.currency || "usd",
+      interval: price?.priceType === "one_time" ? "one_time" : price?.recurring?.interval || "month",
+      intervalCount: price?.recurring?.intervalCount || 1,
+      usageType: price?.recurring?.usageType || "licensed",
+      nickname: price?.nickname || "",
+      active: price?.active ?? true,
+      description: price?.description || "",
+      features: price?.features || [],
+    },
+  });
+
+  const watchInterval = form.watch("interval");
+  const isRecurring = watchInterval !== "one_time";
+
+  const onSubmit: SubmitHandler<PriceFormValues> = async (values) => {
+    setIsSubmitting(true);
+
+    try {
+      // Convert dollars to cents
+      const unitAmountInCents = Math.round(values.unitAmount * 100);
+
+      if (isEditMode) {
+        // Update existing price (nickname, description, features can be updated - Stripe fields are limited)
+        await StripePriceService.updatePrice({
+          id: price.id,
+          nickname: values.nickname || undefined,
+          description: values.description || undefined,
+          features: values.features.filter((f) => f.trim()) || undefined,
+        });
+      } else {
+        // Create new price
+        const createInput: any = {
+          id: v4(),
+          productId: productId,
+          currency: values.currency,
+          unitAmount: unitAmountInCents,
+        };
+
+        // Add recurring details if interval is not one_time
+        if (isRecurring) {
+          createInput.recurring = {
+            interval: values.interval as "day" | "week" | "month" | "year",
+            intervalCount: values.intervalCount || 1,
+            usageType: values.usageType || "licensed",
+          };
+        }
+
+        if (values.nickname) {
+          createInput.nickname = values.nickname;
+        }
+
+        if (values.description) {
+          createInput.description = values.description;
+        }
+
+        const filteredFeatures = values.features.filter((f) => f.trim());
+        if (filteredFeatures.length > 0) {
+          createInput.features = filteredFeatures;
+        }
+
+        await StripePriceService.createPrice(createInput);
+      }
+
+      onSuccess();
+      onOpenChange(false);
+    } catch (error) {
+      console.error("[PriceEditor] Failed to save price:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const currencyOptions = [
+    { id: "usd", text: "USD ($)" },
+    { id: "eur", text: "EUR (€)" },
+    { id: "gbp", text: "GBP (£)" },
+  ];
+
+  const intervalOptions = [
+    { id: "one_time", text: "One-time" },
+    { id: "day", text: "Daily" },
+    { id: "week", text: "Weekly" },
+    { id: "month", text: "Monthly" },
+    { id: "year", text: "Yearly" },
+  ];
+
+  const usageTypeOptions = [
+    { id: "licensed", text: "Licensed (per unit)" },
+    { id: "metered", text: "Metered (usage-based)" },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{isEditMode ? "Edit Price" : "Create Price"}</DialogTitle>
+          <DialogDescription>
+            {isEditMode
+              ? "Update the price details. Note: Only nickname and active status can be changed."
+              : "Create a new price for this product"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isEditMode && (
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex gap-x-3">
+            <AlertCircle className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-blue-800">
+              <p className="font-semibold mb-1">Stripe Price Immutability</p>
+              <p>
+                Due to Stripe's architecture, only the nickname and active status can be modified after creation. To
+                change amount, currency, or billing interval, create a new price.
+              </p>
+            </div>
+          </div>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+            <div className="grid grid-cols-2 gap-x-4">
+              <FormInput
+                form={form}
+                id="unitAmount"
+                name="Amount (in dollars)"
+                placeholder="9.99"
+                disabled={isEditMode}
+                isRequired
+              />
+
+              <FormSelect form={form} id="currency" name="Currency" values={currencyOptions} disabled={isEditMode} />
+            </div>
+
+            <FormSelect
+              form={form}
+              id="interval"
+              name="Billing Interval"
+              values={intervalOptions}
+              disabled={isEditMode}
+            />
+
+            {isRecurring && (
+              <div className="grid grid-cols-2 gap-x-4">
+                <FormInput
+                  form={form}
+                  id="intervalCount"
+                  name="Interval Count"
+                  placeholder="1"
+                  type="number"
+                  disabled={isEditMode}
+                />
+
+                <FormSelect
+                  form={form}
+                  id="usageType"
+                  name="Usage Type"
+                  values={usageTypeOptions}
+                  disabled={isEditMode}
+                />
+              </div>
+            )}
+
+            <FormInput
+              form={form}
+              id="nickname"
+              name="Nickname (optional)"
+              placeholder="e.g., Standard Plan, Pro Tier"
+            />
+
+            <FormTextarea
+              form={form}
+              id="description"
+              name="Description (optional)"
+              placeholder="Describe what this price tier includes..."
+              className="min-h-24"
+            />
+
+            {/* Features List */}
+            <FormItem>
+              <FormLabel>Features (optional)</FormLabel>
+              <div className="space-y-2">
+                {form.watch("features").map((_, index) => (
+                  <div key={index} className="flex gap-2">
+                    <FormControl>
+                      <Input
+                        {...form.register(`features.${index}`)}
+                        placeholder={`Feature ${index + 1}`}
+                        className="flex-1"
+                      />
+                    </FormControl>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        const currentFeatures = form.getValues("features");
+                        form.setValue(
+                          "features",
+                          currentFeatures.filter((_, i) => i !== index),
+                        );
+                      }}
+                    >
+                      <XIcon className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const currentFeatures = form.getValues("features");
+                    form.setValue("features", [...currentFeatures, ""]);
+                  }}
+                  className="mt-2"
+                >
+                  <PlusIcon className="h-4 w-4 mr-2" />
+                  Add Feature
+                </Button>
+              </div>
+            </FormItem>
+
+            <FormCheckbox form={form} id="active" name="Active" />
+
+            <CommonEditorButtons isEdit={isEditMode} form={form} disabled={isSubmitting} setOpen={onOpenChange} />
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from "./forms";
+export * from "./lists";

package/src/features/billing/stripe-price/components/lists/PricesList.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { Archive, DollarSign, Edit, RotateCcw } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+} from "../../../../../shadcnui";
+import { formatCurrency } from "../../../components/utils/currency";
+import { StripePriceService } from "../../data";
+import { StripePriceInterface } from "../../data/stripe-price.interface";
+import { PriceEditor } from "../forms/PriceEditor";
+
+type PricesListProps = {
+  productId: string;
+  onPricesChange: () => void;
+};
+
+export function PricesList({ productId, onPricesChange }: PricesListProps) {
+  const [prices, setPrices] = useState<StripePriceInterface[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [showCreatePrice, setShowCreatePrice] = useState<boolean>(false);
+  const [editingPrice, setEditingPrice] = useState<StripePriceInterface | null>(null);
+  const [priceToArchive, setPriceToArchive] = useState<StripePriceInterface | null>(null);
+  const [priceToReactivate, setPriceToReactivate] = useState<StripePriceInterface | null>(null);
+  const [archivingPriceId, setArchivingPriceId] = useState<string | null>(null);
+  const [reactivatingPriceId, setReactivatingPriceId] = useState<string | null>(null);
+
+  const loadPrices = async () => {
+    setLoading(true);
+    try {
+      const fetchedPrices = await StripePriceService.listPrices({ productId });
+      setPrices(fetchedPrices);
+    } catch (error) {
+      console.error("[PricesList] Failed to load prices:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPrices();
+  }, [productId]);
+
+  const handleArchive = async () => {
+    if (!priceToArchive) {
+      return;
+    }
+
+    setArchivingPriceId(priceToArchive.id);
+    try {
+      await StripePriceService.archivePrice({ id: priceToArchive.id });
+      setPriceToArchive(null); // Close dialog on success
+      await loadPrices();
+      onPricesChange();
+    } catch (error) {
+      console.error("[PricesList] Failed to archive price:", error);
+      // Keep dialog open on error so user can retry or cancel
+    } finally {
+      setArchivingPriceId(null);
+    }
+  };
+
+  const handleReactivate = async () => {
+    if (!priceToReactivate) {
+      return;
+    }
+
+    setReactivatingPriceId(priceToReactivate.id);
+    try {
+      await StripePriceService.reactivatePrice({ id: priceToReactivate.id });
+      setPriceToReactivate(null); // Close dialog on success
+      await loadPrices();
+      onPricesChange();
+    } catch (error) {
+      console.error("[PricesList] Failed to reactivate price:", error);
+      // Keep dialog open on error so user can retry or cancel
+    } finally {
+      setReactivatingPriceId(null);
+    }
+  };
+
+  const formatInterval = (price: StripePriceInterface): string => {
+    if (price.priceType === "one_time") {
+      return "one-time";
+    }
+
+    if (price.recurring) {
+      const count = price.recurring.intervalCount;
+      const interval = price.recurring.interval;
+
+      if (count === 1) {
+        return `/ ${interval}`;
+      } else {
+        return `/ ${count} ${interval}s`;
+      }
+    }
+
+    return "";
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-muted-foreground">Loading prices...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      <div className="flex items-center justify-between mb-4">
+        <h4 className="text-lg font-semibold">Prices</h4>
+        <Button size="sm" onClick={() => setShowCreatePrice(true)}>
+          Add Price
+        </Button>
+      </div>
+
+      {/* Empty State */}
+      {prices.length === 0 && (
+        <div className="bg-background flex flex-col items-center justify-center gap-y-3 rounded-lg border border-dashed p-8">
+          <DollarSign className="text-muted-foreground h-12 w-12" />
+          <p className="text-muted-foreground text-sm">No prices yet. Add a price to enable subscriptions.</p>
+          <Button size="sm" onClick={() => setShowCreatePrice(true)}>
+            Add Price
+          </Button>
+        </div>
+      )}
+
+      {/* Prices Grid */}
+      {prices.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {prices.map((price) => {
+            const isArchiving = archivingPriceId === price.id;
+            const isReactivating = reactivatingPriceId === price.id;
+
+            return (
+              <div key={price.id} className="border rounded-lg bg-white p-4 hover:shadow-sm transition-shadow">
+                <div className="flex items-start justify-between mb-3">
+                  <DollarSign className="h-5 w-5 text-primary" />
+                  <div className="flex gap-1">
+                    <Button variant="ghost" size="sm" onClick={() => setEditingPrice(price)} className="h-8 w-8 p-0">
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    {price.active ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setPriceToArchive(price)}
+                        className="h-8 w-8 p-0"
+                        disabled={isArchiving}
+                      >
+                        <Archive className="h-4 w-4" />
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setPriceToReactivate(price)}
+                        className="h-8 w-8 p-0"
+                        disabled={isReactivating}
+                      >
+                        <RotateCcw className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                <div className="mb-2">
+                  <div className="text-2xl font-bold">
+                    {formatCurrency(price.unitAmount, price.currency)}{" "}
+                    <span className="text-muted-foreground text-sm font-normal">{formatInterval(price)}</span>
+                  </div>
+                </div>
+
+                {price.metadata?.nickname && <p className="text-sm font-medium mb-2">{price.metadata.nickname}</p>}
+
+                <div className="flex flex-wrap gap-2">
+                  {price.active ? (
+                    <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">Active</span>
+                  ) : (
+                    <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium">Inactive</span>
+                  )}
+
+                  {price.recurring?.usageType === "metered" && (
+                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">Metered</span>
+                  )}
+
+                  <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase">
+                    {price.currency}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Create Price Modal */}
+      {showCreatePrice && (
+        <PriceEditor
+          productId={productId}
+          open={showCreatePrice}
+          onOpenChange={setShowCreatePrice}
+          onSuccess={() => {
+            loadPrices();
+            onPricesChange();
+          }}
+        />
+      )}
+
+      {/* Edit Price Modal */}
+      {editingPrice && (
+        <PriceEditor
+          productId={productId}
+          price={editingPrice}
+          open={!!editingPrice}
+          onOpenChange={(open) => !open && setEditingPrice(null)}
+          onSuccess={() => {
+            loadPrices();
+            onPricesChange();
+            setEditingPrice(null);
+          }}
+        />
+      )}
+
+      {/* Archive Price Confirmation Dialog */}
+      <AlertDialog open={!!priceToArchive} onOpenChange={(open) => !open && setPriceToArchive(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Archive Price</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to archive the price for{" "}
+              {priceToArchive && `${formatCurrency(priceToArchive.unitAmount, priceToArchive.currency)} ${formatInterval(priceToArchive)}`}
+              ? This will prevent new subscriptions but existing ones will continue.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={!!archivingPriceId}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleArchive}
+              disabled={!!archivingPriceId}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {archivingPriceId ? "Archiving..." : "Archive"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Reactivate Price Confirmation Dialog */}
+      <AlertDialog open={!!priceToReactivate} onOpenChange={(open) => !open && setPriceToReactivate(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Reactivate Price</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to reactivate the price for{" "}
+              {priceToReactivate && `${formatCurrency(priceToReactivate.unitAmount, priceToReactivate.currency)} ${formatInterval(priceToReactivate)}`}
+              ? This will allow new subscriptions again.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={!!reactivatingPriceId}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleReactivate}
+              disabled={!!reactivatingPriceId}
+              className="bg-green-600 hover:bg-green-700"
+            >
+              {reactivatingPriceId ? "Reactivating..." : "Reactivate"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,3 @@
+export * from "./stripe-price";
+export * from "./stripe-price.interface";
+export * from "./stripe-price.service";

package/src/features/billing/stripe-price/data/stripe-price.interface.ts

@@ -0,0 +1,48 @@
+import { ApiDataInterface } from "../../../../core";
+import { StripeProductInterface } from "../../stripe-product";
+
+// ============================================================================
+// Stripe Price Interfaces
+// ============================================================================
+
+export interface StripePriceInterface extends ApiDataInterface {
+  get stripePriceId(): string;
+  get productId(): string;
+  get product(): StripeProductInterface | undefined;
+  get active(): boolean;
+  get currency(): string;
+  get unitAmount(): number | undefined;
+  get recurring(): PriceRecurring | undefined;
+  get priceType(): "one_time" | "recurring";
+  get nickname(): string | undefined;
+  get lookupKey(): string | undefined;
+  get metadata(): Record<string, any> | undefined;
+  get description(): string | undefined;
+  get features(): string[] | undefined;
+}
+
+export interface PriceRecurring {
+  interval: "day" | "week" | "month" | "year";
+  intervalCount: number;
+  usageType?: "metered" | "licensed";
+}
+
+// ============================================================================
+// Stripe Price Input DTOs
+// ============================================================================
+
+export type StripePriceInput = {
+  id: string;
+  productId?: string; // Required for create, not for update
+  currency?: string; // Required for create, not for update
+  unitAmount?: number;
+  nickname?: string;
+  recurring?: {
+    interval: "day" | "week" | "month" | "year";
+    intervalCount?: number;
+    usageType?: "metered" | "licensed";
+  };
+  metadata?: Record<string, any>;
+  description?: string;
+  features?: string[];
+};