@carlonicora/nextjs-jsonapi 6.4.0 → 6.6.0

package/src/features/billing/components/containers/BillingDashboardContainer.tsx

@@ -10,7 +10,7 @@ import { PaymentMethodsContainer } from "../../stripe-customer/components";
 import { StripeInvoiceInterface, StripeInvoiceService } from "../../stripe-invoice";
 import { InvoicesContainer } from "../../stripe-invoice/components";
 import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../../stripe-subscription";
-import { SubscriptionsContainer } from "../../stripe-subscription/components";
+import { type RenderCancelDialog, SubscriptionsContainer } from "../../stripe-subscription/components";
 import { SubscriptionWizard } from "../../stripe-subscription/components/wizards";
 import { MeterInterface, MeterSummaryInterface, StripeUsageService } from "../../stripe-usage";
 import { UsageContainer } from "../../stripe-usage/components";
@@ -53,7 +53,7 @@ type ErrorState = {
   usage: string | null;
 };
 
-export function BillingDashboardContainer() {
+export function BillingDashboardContainer({ renderCancelDialog }: { renderCancelDialog?: RenderCancelDialog } = {}) {
   const t = useTranslations();
   const [data, setData] = useState<DataState>({
     customer: null,
@@ -482,6 +482,7 @@ export function BillingDashboardContainer() {
               hasActiveRecurringSubscription={hasActiveRecurringSubscription}
               subscriptions={data.subscriptions}
               onSubscriptionsChange={refreshData}
+              renderCancelDialog={renderCancelDialog}
             />
           </BillingDetailModal>
 

package/src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Button } from "../../../../../shadcnui";
 import { BillingAlertBanner } from "../../../components";
 import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../../data";
+import type { RenderCancelDialog } from "../details/SubscriptionDetails";
 import { SubscriptionsList } from "../lists";
 
 type SubscriptionsContainerProps = {
@@ -18,6 +19,8 @@ type SubscriptionsContainerProps = {
    */
   subscriptions?: StripeSubscriptionInterface[];
   onSubscriptionsChange?: () => void;
+  /** Replaces the library cancel dialog; absent, the library dialog renders. */
+  renderCancelDialog?: RenderCancelDialog;
 };
 
 export function SubscriptionsContainer({
@@ -25,6 +28,7 @@ export function SubscriptionsContainer({
   hasActiveRecurringSubscription,
   subscriptions: parentSubscriptions,
   onSubscriptionsChange,
+  renderCancelDialog,
 }: SubscriptionsContainerProps) {
   const t = useTranslations();
   const isControlled = parentSubscriptions !== undefined;
@@ -110,6 +114,7 @@ export function SubscriptionsContainer({
           subscriptions={subscriptions}
           onSubscriptionsChange={loadSubscriptions}
           onChangePlan={(sub) => onOpenWizard?.(sub)}
+          renderCancelDialog={renderCancelDialog}
         />
       )}
     </div>

package/src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
 import {
   type BillingFormatOptions,
@@ -57,12 +57,26 @@ function formatBillingAmount(
   return formatCurrency(price.unitAmount, price.currency, fmt);
 }
 
+/** Props an app receives when it replaces the library cancel dialog. */
+export type CancelDialogRenderProps = {
+  subscription: StripeSubscriptionInterface;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+  /** Opens the plan-change wizard for this subscription and closes the details. Undefined when the host gave no onChangePlan. */
+  openChangePlan?: () => void;
+};
+
+/** Optional replacement for the library cancel dialog. Absent, the library renders CancelSubscriptionDialog. */
+export type RenderCancelDialog = (props: CancelDialogRenderProps) => ReactNode;
+
 type SubscriptionDetailsProps = {
   subscription: StripeSubscriptionInterface;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSubscriptionChange: () => void;
   onChangePlan?: (subscription: StripeSubscriptionInterface) => void;
+  renderCancelDialog?: RenderCancelDialog;
 };
 
 export function SubscriptionDetails({
@@ -71,6 +85,7 @@ export function SubscriptionDetails({
   onOpenChange,
   onSubscriptionChange,
   onChangePlan,
+  renderCancelDialog,
 }: SubscriptionDetailsProps) {
   const t = useTranslations();
   const fmt = useBillingFormatOptions();
@@ -175,17 +190,34 @@ export function SubscriptionDetails({
       </Dialog>
 
       {/* Cancel Subscription Dialog */}
-      {showCancel && (
-        <CancelSubscriptionDialog
-          subscription={subscription}
-          open={showCancel}
-          onOpenChange={setShowCancel}
-          onSuccess={() => {
-            onSubscriptionChange();
-            setShowCancel(false);
-          }}
-        />
-      )}
+      {showCancel &&
+        (renderCancelDialog ? (
+          renderCancelDialog({
+            subscription,
+            open: showCancel,
+            onOpenChange: setShowCancel,
+            onSuccess: () => {
+              onSubscriptionChange();
+              setShowCancel(false);
+            },
+            openChangePlan: onChangePlan
+              ? () => {
+                  onChangePlan(subscription);
+                  onOpenChange(false);
+                }
+              : undefined,
+          })
+        ) : (
+          <CancelSubscriptionDialog
+            subscription={subscription}
+            open={showCancel}
+            onOpenChange={setShowCancel}
+            onSuccess={() => {
+              onSubscriptionChange();
+              setShowCancel(false);
+            }}
+          />
+        ))}
     </>
   );
 }

package/src/features/billing/stripe-subscription/components/details/__tests__/SubscriptionDetails.spec.tsx

@@ -0,0 +1,79 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { StripeSubscriptionInterface, SubscriptionStatus } from "../../../data";
+import { CancelDialogRenderProps, SubscriptionDetails } from "../SubscriptionDetails";
+
+vi.mock("../../forms/CancelSubscriptionDialog", () => ({
+  CancelSubscriptionDialog: () => <div data-testid="default-cancel" />,
+}));
+
+vi.mock("../../../../stripe-customer", () => ({
+  StripeCustomerService: { createPortalSession: vi.fn() },
+}));
+
+afterEach(cleanup);
+
+const sub = {
+  id: "sub-1",
+  status: SubscriptionStatus.ACTIVE,
+  cancelAtPeriodEnd: false,
+  currentPeriodStart: new Date("2026-10-01T00:00:00Z"),
+  currentPeriodEnd: new Date("2026-11-01T00:00:00Z"),
+} as unknown as StripeSubscriptionInterface;
+
+function renderDetails(props: Partial<Parameters<typeof SubscriptionDetails>[0]> = {}) {
+  const onOpenChange = vi.fn();
+  const onSubscriptionChange = vi.fn();
+  render(
+    <SubscriptionDetails
+      subscription={sub}
+      open
+      onOpenChange={onOpenChange}
+      onSubscriptionChange={onSubscriptionChange}
+      {...props}
+    />,
+  );
+  fireEvent.click(screen.getByText("ui.buttons.cancel"));
+  return { onOpenChange, onSubscriptionChange };
+}
+
+describe("SubscriptionDetails cancel dialog", () => {
+  it("renders the library dialog when no renderCancelDialog is given", () => {
+    renderDetails();
+    expect(screen.getByTestId("default-cancel")).toBeInTheDocument();
+  });
+
+  it("renders the app dialog with the subscription when renderCancelDialog is given", () => {
+    const renderCancelDialog = vi.fn((_props: CancelDialogRenderProps) => <div data-testid="app-cancel" />);
+    renderDetails({ renderCancelDialog });
+    expect(screen.getByTestId("app-cancel")).toBeInTheDocument();
+    expect(screen.queryByTestId("default-cancel")).not.toBeInTheDocument();
+    const props = renderCancelDialog.mock.calls.at(-1)![0];
+    expect(props.subscription).toBe(sub);
+    expect(props.open).toBe(true);
+  });
+
+  it("openChangePlan opens the wizard for this subscription and closes the details", () => {
+    const renderCancelDialog = vi.fn((_props: CancelDialogRenderProps) => <div data-testid="app-cancel" />);
+    const onChangePlan = vi.fn();
+    const { onOpenChange } = renderDetails({ renderCancelDialog, onChangePlan });
+    const props = renderCancelDialog.mock.calls.at(-1)![0];
+    expect(props.openChangePlan).toBeTypeOf("function");
+    props.openChangePlan!();
+    expect(onChangePlan).toHaveBeenCalledWith(sub);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("openChangePlan is undefined when no onChangePlan is given", () => {
+    const renderCancelDialog = vi.fn((_props: CancelDialogRenderProps) => <div data-testid="app-cancel" />);
+    renderDetails({ renderCancelDialog });
+    expect(renderCancelDialog.mock.calls.at(-1)![0].openChangePlan).toBeUndefined();
+  });
+
+  it("onSuccess refreshes the subscriptions", () => {
+    const renderCancelDialog = vi.fn((_props: CancelDialogRenderProps) => <div data-testid="app-cancel" />);
+    const { onSubscriptionChange } = renderDetails({ renderCancelDialog });
+    renderCancelDialog.mock.calls.at(-1)![0].onSuccess();
+    expect(onSubscriptionChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -12,7 +12,7 @@ import {
 } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeSubscriptionInterface, SubscriptionStatus } from "../../data";
-import { SubscriptionDetails } from "../details/SubscriptionDetails";
+import { type RenderCancelDialog, SubscriptionDetails } from "../details/SubscriptionDetails";
 import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
 
 /**
@@ -49,9 +49,15 @@ type SubscriptionsListProps = {
   subscriptions: StripeSubscriptionInterface[];
   onSubscriptionsChange: () => void;
   onChangePlan?: (subscription: StripeSubscriptionInterface) => void;
+  renderCancelDialog?: RenderCancelDialog;
 };
 
-export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChangePlan }: SubscriptionsListProps) {
+export function SubscriptionsList({
+  subscriptions,
+  onSubscriptionsChange,
+  onChangePlan,
+  renderCancelDialog,
+}: SubscriptionsListProps) {
   const t = useTranslations();
   const fmt = useBillingFormatOptions();
   const [selectedSub, setSelectedSub] = useState<StripeSubscriptionInterface | null>(null);
@@ -148,6 +154,7 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                 }
               : undefined
           }
+          renderCancelDialog={renderCancelDialog}
         />
       )}
     </>