@carlonicora/nextjs-jsonapi 1.15.0 → 1.16.0

package/src/features/billing/data/billing.service.ts

@@ -0,0 +1,58 @@
+import { AbstractService, EndpointCreator, HttpMethod, Modules, NextRef, PreviousRef } from "../../../core";
+
+// Import from new sub-modules for backwards compatibility re-exports
+import { MeterInterface, MeterSummaryInterface } from "../stripe-usage/data/stripe-usage.interface";
+
+/**
+ * Legacy billing service - only contains meter methods
+ * @deprecated Use StripeUsageService for meter methods, StripeInvoiceService for invoices,
+ * StripeCustomerService for payment methods
+ */
+export class BillingService extends AbstractService {
+  // ============================================================================
+  // Meter Methods (kept here for backwards compatibility)
+  // ============================================================================
+
+  /**
+   * List all available usage meters
+   * @deprecated Use StripeUsageService.listMeters() instead
+   */
+  static async listMeters(params?: { next?: NextRef; prev?: PreviousRef }): Promise<MeterInterface[]> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+      childEndpoint: "meters",
+    });
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+      next: params?.next,
+      previous: params?.prev,
+    });
+  }
+
+  /**
+   * Get meter summaries for a specific time period
+   * @deprecated Use StripeUsageService.getMeterSummaries() instead
+   */
+  static async getMeterSummaries(params: {
+    meterId: string;
+    startTime: Date;
+    endTime: Date;
+  }): Promise<MeterSummaryInterface[]> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+      childEndpoint: `meters/${params.meterId}/summaries`,
+    });
+
+    endpoint.addAdditionalParam("startTime", params.startTime.toISOString());
+    endpoint.addAdditionalParam("endTime", params.endTime.toISOString());
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+}

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

@@ -0,0 +1,5 @@
+// Services
+export { BillingService } from "./billing.service";
+
+// Data classes
+export { Billing } from "./Billing";

package/src/features/billing/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./data";
+export * from "./modules";

package/src/features/billing/modules/billing.module.ts

@@ -0,0 +1,9 @@
+import { ModuleFactory } from "../../../permissions";
+import { Billing } from "../data/Billing";
+
+export const BillingModule = (factory: ModuleFactory) =>
+  factory({
+    name: "billing",
+    model: Billing,
+    moduleId: "3266b307-5a9a-46f9-b78d-631f672f8735",
+  });

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

@@ -0,0 +1 @@
+export { BillingModule } from "./billing.module";

package/src/features/billing/stripe-customer/components/containers/PaymentMethodsContainer.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { CreditCard } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "../../../../../shadcnui";
+import { PaymentMethodInterface, StripeCustomerService } from "../../data";
+import { PaymentMethodEditor } from "../forms/PaymentMethodEditor";
+import { PaymentMethodsList } from "../lists/PaymentMethodsList";
+
+export function PaymentMethodsContainer() {
+  const [paymentMethods, setPaymentMethods] = useState<PaymentMethodInterface[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [showAddPaymentMethod, setShowAddPaymentMethod] = useState<boolean>(false);
+
+  const loadPaymentMethods = async () => {
+    setLoading(true);
+    try {
+      const fetchedPaymentMethods = await StripeCustomerService.listPaymentMethods();
+      setPaymentMethods(fetchedPaymentMethods);
+    } catch (error) {
+      console.error("[PaymentMethodsContainer] Failed to load payment methods:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPaymentMethods();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-muted-foreground">Loading payment methods...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-x-3">
+          <CreditCard className="h-8 w-8" />
+          <h1 className="text-3xl font-bold">Payment Methods</h1>
+        </div>
+        <Button onClick={() => setShowAddPaymentMethod(true)}>Add Payment Method</Button>
+      </div>
+
+      {/* Empty State */}
+      {paymentMethods.length === 0 && (
+        <div className="flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12">
+          <CreditCard className="h-16 w-16 text-muted-foreground" />
+          <div className="text-center">
+            <h3 className="mb-2 text-xl font-semibold">No payment methods</h3>
+            <p className="mb-4 text-muted-foreground">
+              Add a payment method to enable subscriptions and secure checkout.
+            </p>
+            <Button onClick={() => setShowAddPaymentMethod(true)}>Add Your First Card</Button>
+          </div>
+        </div>
+      )}
+
+      {/* Payment Methods List */}
+      {paymentMethods.length > 0 && (
+        <PaymentMethodsList paymentMethods={paymentMethods} onUpdate={loadPaymentMethods} />
+      )}
+
+      {/* Add Payment Method Modal */}
+      {showAddPaymentMethod && (
+        <PaymentMethodEditor
+          open={showAddPaymentMethod}
+          onOpenChange={setShowAddPaymentMethod}
+          onSuccess={loadPaymentMethods}
+        />
+      )}
+    </div>
+  );
+}

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

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

package/src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { MoreVertical } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../../../shadcnui";
+import { PaymentMethodInterface, StripeCustomerInterface, StripeCustomerService } from "../../data";
+
+type PaymentMethodCardProps = {
+  paymentMethod: PaymentMethodInterface;
+  onUpdate: () => void;
+};
+
+// Card brand icons mapping
+const brandIcons: Record<string, string> = {
+  visa: "💳",
+  mastercard: "💳",
+  amex: "💳",
+  discover: "💳",
+};
+
+export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCardProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [customer, setCustomer] = useState<StripeCustomerInterface | null>(null);
+  const [showRemoveDialog, setShowRemoveDialog] = useState<boolean>(false);
+
+  // Load customer to check default payment method
+  useEffect(() => {
+    const loadCustomer = async () => {
+      try {
+        const fetchedCustomer = await StripeCustomerService.getCustomer();
+        setCustomer(fetchedCustomer);
+      } catch (error) {
+        console.error("[PaymentMethodCard] Failed to load customer:", error);
+      }
+    };
+
+    loadCustomer();
+  }, []);
+
+  const isDefault = customer?.defaultPaymentMethodId === paymentMethod.id;
+  const brand = paymentMethod.card?.brand || "card";
+  const last4 = paymentMethod.card?.last4 || "****";
+  const expMonth = paymentMethod.card?.expMonth || 0;
+  const expYear = paymentMethod.card?.expYear || 0;
+  const brandIcon = brandIcons[brand.toLowerCase()] || "💳";
+
+  const handleSetDefault = async () => {
+    setLoading(true);
+    try {
+      await StripeCustomerService.setDefaultPaymentMethod({ paymentMethodId: paymentMethod.id });
+      onUpdate();
+    } catch (error) {
+      console.error("[PaymentMethodCard] Failed to set as default:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    setLoading(true);
+    try {
+      await StripeCustomerService.removePaymentMethod({ paymentMethodId: paymentMethod.id });
+      setShowRemoveDialog(false);
+      onUpdate();
+    } catch (error) {
+      console.error("[PaymentMethodCard] Failed to remove:", error);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Card className="relative">
+        {/* Default Badge */}
+        {isDefault && (
+          <Badge className="absolute right-2 top-2 bg-green-100 text-green-800 hover:bg-green-100">Default</Badge>
+        )}
+
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <div className="flex items-center gap-x-2">
+            <span className="text-2xl">{brandIcon}</span>
+            <span className="text-sm font-medium capitalize">{brand}</span>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" disabled={loading} className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {!isDefault && (
+                <DropdownMenuItem onClick={handleSetDefault} disabled={loading}>
+                  Set as Default
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={() => setShowRemoveDialog(true)} disabled={loading} className="text-red-600">
+                Remove
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardHeader>
+
+        <CardContent>
+          <div className="flex flex-col gap-y-1">
+            <p className="text-lg font-semibold">•••• {last4}</p>
+            <p className="text-sm text-muted-foreground">
+              Expires {String(expMonth).padStart(2, "0")}/{expYear}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Remove Confirmation Dialog */}
+      <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove Payment Method</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove this payment method? This action cannot be undone.
+              {isDefault && " This is your default payment method."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleRemove} disabled={loading} className="bg-red-600 hover:bg-red-700">
+              {loading ? "Removing..." : "Remove"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

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

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

package/src/features/billing/stripe-customer/components/forms/PaymentMethodEditor.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Label,
+} from "../../../../../shadcnui";
+import { StripeCustomerService } from "../../data";
+
+type PaymentMethodEditorProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+};
+
+export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMethodEditorProps) {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [setupIntent, setSetupIntent] = useState<{ clientSecret: string } | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [setAsDefault, setSetAsDefault] = useState<boolean>(true);
+
+  // Fetch setup intent on component mount
+  useEffect(() => {
+    const fetchSetupIntent = async () => {
+      setLoading(true);
+      try {
+        const intent = await StripeCustomerService.createSetupIntent();
+        setSetupIntent(intent);
+      } catch (err) {
+        console.error("[PaymentMethodEditor] Failed to create setup intent:", err);
+        setError("Failed to initialize payment form. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (open) {
+      fetchSetupIntent();
+    }
+  }, [open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements || !setupIntent) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const cardElement = elements.getElement(CardElement);
+      if (!cardElement) {
+        throw new Error("Card element not found");
+      }
+
+      // Confirm card setup with Stripe
+      const { error: stripeError, setupIntent: confirmedSetupIntent } = await stripe.confirmCardSetup(
+        setupIntent.clientSecret,
+        {
+          payment_method: {
+            card: cardElement,
+          },
+        },
+      );
+
+      if (stripeError) {
+        console.error("[PaymentMethodEditor] Stripe error:", stripeError);
+        setError(stripeError.message || "Failed to add payment method. Please check your card details.");
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Set as default if checkbox is checked
+      if (setAsDefault && confirmedSetupIntent?.payment_method) {
+        await StripeCustomerService.setDefaultPaymentMethod({
+          paymentMethodId:
+            typeof confirmedSetupIntent.payment_method === "string"
+              ? confirmedSetupIntent.payment_method
+              : confirmedSetupIntent.payment_method.id,
+        });
+      }
+
+      onSuccess();
+      onOpenChange(false);
+    } catch (err: any) {
+      console.error("[PaymentMethodEditor] Error:", err);
+      setError(err.message || "An unexpected error occurred. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Payment Method</DialogTitle>
+          <DialogDescription>
+            Add a new payment method to your account. Your card information is securely processed by Stripe.
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading && (
+          <div className="flex items-center justify-center py-8">
+            <p className="text-muted-foreground">Loading payment form...</p>
+          </div>
+        )}
+
+        {!loading && setupIntent && (
+          <form onSubmit={handleSubmit} className="flex flex-col gap-y-4">
+            {/* Card Element */}
+            <div className="rounded-md border border-gray-300 p-3">
+              <CardElement
+                options={{
+                  style: {
+                    base: {
+                      fontSize: "16px",
+                      color: "#424770",
+                      "::placeholder": {
+                        color: "#aab7c4",
+                      },
+                    },
+                    invalid: {
+                      color: "#9e2146",
+                    },
+                  },
+                }}
+              />
+            </div>
+
+            {/* Set as Default Checkbox */}
+            <div className="flex items-center gap-x-2">
+              <Checkbox
+                id="setAsDefault"
+                checked={setAsDefault}
+                onCheckedChange={(checked) => setSetAsDefault(!!checked)}
+              />
+              <Label htmlFor="setAsDefault" className="text-sm font-normal">
+                Set as default payment method
+              </Label>
+            </div>
+
+            {/* Error Alert */}
+            {error && (
+              <Alert variant="destructive" className="bg-red-50 border-red-200">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex justify-end gap-x-2">
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={!stripe || isSubmitting}>
+                {isSubmitting ? "Processing..." : "Add Card"}
+              </Button>
+            </div>
+          </form>
+        )}
+
+        {/* Error State */}
+        {!loading && !setupIntent && error && (
+          <Alert variant="destructive" className="bg-red-50 border-red-200">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

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

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

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

package/src/features/billing/stripe-customer/components/lists/PaymentMethodsList.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { PaymentMethodInterface } from "../../data";
+import { PaymentMethodCard } from "../details/PaymentMethodCard";
+
+type PaymentMethodsListProps = {
+  paymentMethods: PaymentMethodInterface[];
+  onUpdate: () => void;
+};
+
+export function PaymentMethodsList({ paymentMethods, onUpdate }: PaymentMethodsListProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {paymentMethods.map((paymentMethod) => (
+        <PaymentMethodCard key={paymentMethod.id} paymentMethod={paymentMethod} onUpdate={onUpdate} />
+      ))}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,5 @@
+export * from "./payment-method";
+export * from "./payment-method.interface";
+export * from "./stripe-customer";
+export * from "./stripe-customer.interface";
+export * from "./stripe-customer.service";

package/src/features/billing/stripe-customer/data/payment-method.interface.ts

@@ -0,0 +1,27 @@
+// ============================================================================
+// Payment Method Interfaces
+// ============================================================================
+
+export interface PaymentMethodInterface {
+  id: string;
+  type: string;
+  card?: {
+    brand: string;
+    last4: string;
+    expMonth: number;
+    expYear: number;
+  };
+  billingDetails?: {
+    name?: string;
+    email?: string;
+    phone?: string;
+    address?: {
+      city?: string;
+      country?: string;
+      line1?: string;
+      line2?: string;
+      postalCode?: string;
+      state?: string;
+    };
+  };
+}