@carlonicora/nextjs-jsonapi 1.32.2 → 1.33.0

package/dist/{stripe-subscription.interface-BaZUngWe.d.ts → stripe-subscription.interface-Dm__xmvE.d.ts}

@@ -1,4 +1,5 @@
 import { A as ApiDataInterface } from './ApiDataInterface-DPP8s46n.js';
+import { F as FeatureInterface } from './feature.interface-CIWxo8NP.js';
 
 interface StripeUsageInterface extends ApiDataInterface {
     get subscriptionId(): string;
@@ -151,6 +152,7 @@ interface StripePriceInterface extends ApiDataInterface {
     get description(): string | undefined;
     get features(): string[] | undefined;
     get token(): number | undefined;
+    get priceFeatures(): FeatureInterface[];
 }
 interface PriceRecurring {
     interval: "day" | "week" | "month" | "year";
@@ -172,6 +174,7 @@ type StripePriceInput = {
     description?: string;
     features?: string[];
     token?: number;
+    featureIds?: string[];
 };
 
 declare enum SubscriptionStatus {

package/dist/{stripe-subscription.interface-Cm_It1fz.d.mts → stripe-subscription.interface-_VWPY2AA.d.mts}

@@ -1,4 +1,5 @@
 import { A as ApiDataInterface } from './ApiDataInterface-DPP8s46n.mjs';
+import { F as FeatureInterface } from './feature.interface-BxFFOPNq.mjs';
 
 interface StripeUsageInterface extends ApiDataInterface {
     get subscriptionId(): string;
@@ -151,6 +152,7 @@ interface StripePriceInterface extends ApiDataInterface {
     get description(): string | undefined;
     get features(): string[] | undefined;
     get token(): number | undefined;
+    get priceFeatures(): FeatureInterface[];
 }
 interface PriceRecurring {
     interval: "day" | "week" | "month" | "year";
@@ -172,6 +174,7 @@ type StripePriceInput = {
     description?: string;
     features?: string[];
     token?: number;
+    featureIds?: string[];
 };
 
 declare enum SubscriptionStatus {

package/dist/{useDataListRetriever-futhx3OP.d.mts → useDataListRetriever-BqJSFBck.d.mts}

@@ -8,6 +8,7 @@ type DataListRetriever<T> = {
     setReady: (state: boolean) => void;
     isLoaded: boolean;
     data: T[] | undefined;
+    total?: number;
     next?: (onlyNewRecords?: boolean) => Promise<void>;
     previous?: (onlyNewRecords?: boolean) => Promise<void>;
     search: (search: string) => Promise<void>;

package/dist/{useDataListRetriever-futhx3OP.d.ts → useDataListRetriever-BqJSFBck.d.ts}

@@ -8,6 +8,7 @@ type DataListRetriever<T> = {
     setReady: (state: boolean) => void;
     isLoaded: boolean;
     data: T[] | undefined;
+    total?: number;
     next?: (onlyNewRecords?: boolean) => Promise<void>;
     previous?: (onlyNewRecords?: boolean) => Promise<void>;
     search: (search: string) => Promise<void>;

package/dist/{useSocket-DUqGoPya.d.mts → useSocket-BILAdmZ0.d.mts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-D5MbtfZK.mjs';
+import { N as NotificationInterface } from './notification.interface-DIln2r7X.mjs';
 
 interface UseSocketOptions {
     token: string;

package/dist/{useSocket-QuHa0ZmO.d.ts → useSocket-awibcC9B.d.ts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-CmKmObIU.js';
+import { N as NotificationInterface } from './notification.interface-XARGKJAq.js';
 
 interface UseSocketOptions {
     token: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.32.2",
+  "version": "1.33.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/scripts/generate-web-module/templates/pages/detail-page.template.ts

@@ -51,7 +51,7 @@ export default async function ${names.pascalCase}Page(props: { params: Promise<{
   const params = await props.params;
   const ${names.camelCase}: ${names.pascalCase}Interface = await getCached${names.pascalCase}(params.id);
 
-  ServerSession.checkPermission({ module: Modules.${names.pascalCase}, action: Action.Read, data: ${names.camelCase} });
+  await ServerSession.checkPermission({ module: Modules.${names.pascalCase}, action: Action.Read, data: ${names.camelCase} });
 
   return (
     <${names.pascalCase}Provider dehydrated${names.pascalCase}={${names.camelCase}.dehydrate()}>

package/scripts/generate-web-module/templates/pages/list-page.template.ts

@@ -23,7 +23,7 @@ import { Action } from "@carlonicora/nextjs-jsonapi/core";
 import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
 
 export default async function ${names.pluralPascal}ListPage() {
-  ServerSession.checkPermission({ module: Modules.${names.pascalCase}, action: Action.Read });
+  await ServerSession.checkPermission({ module: Modules.${names.pascalCase}, action: Action.Read });
 
   return (
     <${names.pascalCase}Provider>

package/src/components/forms/DatePickerPopover.tsx

@@ -127,7 +127,7 @@ export const DatePickerPopover = ({
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className={cn("w-auto p-0", className)} align={align} onClick={(e) => e.stopPropagation()}>
+      <PopoverContent className={cn("p-0", className)} align={align} onClick={(e) => e.stopPropagation()}>
         <div className="p-3">
           {/* Manual Input */}
           <div className="relative mb-3">
@@ -169,8 +169,8 @@ export const DatePickerPopover = ({
                 setDisplayMonth(newDate);
               }}
             >
-              <SelectTrigger className="w-[130px]">
-                <SelectValue />
+              <SelectTrigger className="flex-1">
+                <SelectValue>{monthNames[displayMonth.getMonth()]}</SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {monthNames.map((month, index) => (
@@ -190,8 +190,8 @@ export const DatePickerPopover = ({
                 setDisplayMonth(newDate);
               }}
             >
-              <SelectTrigger className="w-[80px]">
-                <SelectValue />
+              <SelectTrigger className="flex-1">
+                <SelectValue>{displayMonth.getFullYear()}</SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {yearOptions.reverse().map((year) => (
@@ -204,16 +204,18 @@ export const DatePickerPopover = ({
           </div>
 
           {/* Calendar */}
-          <Calendar
-            mode="single"
-            selected={value}
-            onSelect={handleCalendarSelect}
-            disabled={(date) => (minDate && date < minDate ? true : false)}
-            locale={dateFnsLocale}
-            weekStartsOn={1}
-            month={displayMonth}
-            onMonthChange={setDisplayMonth}
-          />
+          <div className="flex justify-center">
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={handleCalendarSelect}
+              disabled={(date) => (minDate && date < minDate ? true : false)}
+              locale={dateFnsLocale}
+              weekStartsOn={1}
+              month={displayMonth}
+              onMonthChange={setDisplayMonth}
+            />
+          </div>
         </div>
       </PopoverContent>
     </Popover>

package/src/components/tables/ContentListTable.tsx

@@ -74,7 +74,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
 
   return (
     <div className="flex w-full flex-col">
-      <div className="overflow-hidden rounded-md border">
+      <div className="overflow-clip rounded-md border">
         <Table>
           <TableHeader className="bg-muted font-semibold">
             {props.title && (
@@ -140,7 +140,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                     </Button>
                     {data.pageInfo && (
                       <span className="text-muted-foreground text-xs">
-                        {data.pageInfo.startItem}-{data.pageInfo.endItem}
+                        {`${data.pageInfo.startItem}-${data.pageInfo.endItem}${data.total ? ` of ${data.total}` : ""}`}
                       </span>
                     )}
                     <Button

package/src/core/abstracts/AbstractService.ts

@@ -21,6 +21,21 @@ export interface SelfRef {
   self?: string;
 }
 
+export interface TotalRef {
+  total?: number;
+}
+
+// Store the last total from any API call - accessible by hooks
+let lastApiTotal: number | undefined = undefined;
+
+export function getLastApiTotal(): number | undefined {
+  return lastApiTotal;
+}
+
+export function clearLastApiTotal(): void {
+  lastApiTotal = undefined;
+}
+
 let globalErrorHandler: ((status: number, message: string) => void) | null = null;
 
 /**
@@ -79,6 +94,7 @@ export abstract class AbstractService {
     next?: NextRef;
     previous?: PreviousRef;
     self?: SelfRef;
+    total?: TotalRef;
   }): Promise<T> {
     return await this.callApi<T>({
       method: HttpMethod.GET,
@@ -87,6 +103,7 @@ export abstract class AbstractService {
       next: params.next,
       previous: params.previous,
       self: params.self,
+      total: params.total,
     });
   }
 
@@ -99,6 +116,7 @@ export abstract class AbstractService {
     next?: NextRef;
     previous?: PreviousRef;
     self?: SelfRef;
+    total?: TotalRef;
   }): Promise<T> {
     return await this.callApi<T>({
       method: HttpMethod.GET,
@@ -107,6 +125,7 @@ export abstract class AbstractService {
       next: params.next,
       previous: params.previous,
       self: params.self,
+      total: params.total,
     });
   }
 
@@ -123,6 +142,7 @@ export abstract class AbstractService {
     next?: NextRef;
     previous?: PreviousRef;
     self?: SelfRef;
+    total?: TotalRef;
     responseType?: ApiRequestDataTypeInterface;
     files?: { [key: string]: File | Blob } | File | Blob;
   }): Promise<T> {
@@ -214,6 +234,11 @@ export abstract class AbstractService {
     if (apiResponse.next && params.next) params.next.next = apiResponse.next;
     if (apiResponse.prev && params.previous) params.previous.previous = apiResponse.prev;
     if (apiResponse.self && params.self) params.self.self = apiResponse.self;
+    // Always store total for hooks to access, and also populate ref if provided
+    if (apiResponse.meta?.total !== undefined) {
+      lastApiTotal = apiResponse.meta.total;
+      if (params.total) params.total.total = apiResponse.meta.total;
+    }
 
     return apiResponse.data as T;
   }

package/src/core/abstracts/ClientAbstractService.ts

@@ -31,6 +31,10 @@ export interface ClientSelfRef {
   self?: string;
 }
 
+export interface ClientTotalRef {
+  total?: number;
+}
+
 let globalErrorHandler: ((status: number, message: string) => void) | null = null;
 
 /**
@@ -92,6 +96,7 @@ export abstract class ClientAbstractService {
     next?: ClientNextRef;
     previous?: ClientPreviousRef;
     self?: ClientSelfRef;
+    total?: ClientTotalRef;
   }): Promise<T> {
     return await this.callApi<T>({
       method: ClientHttpMethod.GET,
@@ -100,6 +105,7 @@ export abstract class ClientAbstractService {
       next: params.next,
       previous: params.previous,
       self: params.self,
+      total: params.total,
     });
   }
 
@@ -112,6 +118,7 @@ export abstract class ClientAbstractService {
     next?: ClientNextRef;
     previous?: ClientPreviousRef;
     self?: ClientSelfRef;
+    total?: ClientTotalRef;
   }): Promise<T> {
     return await this.callApi<T>({
       method: ClientHttpMethod.GET,
@@ -120,6 +127,7 @@ export abstract class ClientAbstractService {
       next: params.next,
       previous: params.previous,
       self: params.self,
+      total: params.total,
     });
   }
 
@@ -136,6 +144,7 @@ export abstract class ClientAbstractService {
     next?: ClientNextRef;
     previous?: ClientPreviousRef;
     self?: ClientSelfRef;
+    total?: ClientTotalRef;
     responseType?: ApiRequestDataTypeInterface;
     files?: { [key: string]: File | Blob } | File | Blob;
   }): Promise<T> {
@@ -216,6 +225,7 @@ export abstract class ClientAbstractService {
     if (apiResponse.next && params.next) params.next.next = apiResponse.next;
     if (apiResponse.prev && params.previous) params.previous.previous = apiResponse.prev;
     if (apiResponse.self && params.self) params.self.self = apiResponse.self;
+    if (apiResponse.meta?.total !== undefined && params.total) params.total.total = apiResponse.meta.total;
 
     return apiResponse.data as T;
   }

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

@@ -442,7 +442,10 @@ export function BillingDashboardContainer() {
             onOpenChange={handleModalClose}
             title={getModalTitle("subscriptions")}
           >
-            <SubscriptionsContainer onOpenWizard={handleOpenWizard} />
+            <SubscriptionsContainer
+              onOpenWizard={handleOpenWizard}
+              hasActiveRecurringSubscription={hasActiveRecurringSubscription}
+            />
           </BillingDetailModal>
 
           <BillingDetailModal

package/src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx

@@ -86,7 +86,7 @@ export function InvoiceDetails({ invoice, open, onOpenChange, onInvoiceChange }:
           {/* Line Items */}
           <div>
             <h4 className="text-sm font-medium text-muted-foreground mb-2">Line Items</h4>
-            <div className="border rounded-lg overflow-hidden">
+            <div className="border rounded-lg overflow-clip">
               <table className="w-full">
                 <thead className="bg-muted">
                   <tr>

package/src/features/billing/stripe-invoice/components/lists/InvoicesList.tsx

@@ -29,7 +29,7 @@ export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps)
 
   return (
     <>
-      <div className="border rounded-lg overflow-hidden">
+      <div className="border rounded-lg overflow-clip">
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>

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

@@ -19,6 +19,7 @@ import {
   Input,
   Label,
 } from "../../../../../shadcnui";
+import { FeatureInterface, FeatureService } from "../../../../feature";
 import { StripePriceInterface, StripePriceService } from "../../data";
 
 type PriceEditorProps = {
@@ -40,10 +41,25 @@ type PriceFormValues = {
   description?: string;
   features: string[];
   token: string;
+  featureIds: string[]; // Platform Feature entity IDs
 };
 
 export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }: PriceEditorProps) {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [allFeatures, setAllFeatures] = useState<FeatureInterface[]>([]);
+
+  // Fetch all platform features on mount
+  useEffect(() => {
+    const fetchFeatures = async () => {
+      try {
+        const features = await FeatureService.findMany({});
+        setAllFeatures(features);
+      } catch (error) {
+        console.error("[PriceEditor] Failed to fetch features:", error);
+      }
+    };
+    fetchFeatures();
+  }, []);
 
   const formSchema = z.object({
     unitAmount: z.preprocess(
@@ -62,6 +78,7 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
     description: z.string().optional(),
     features: z.array(z.string()),
     token: z.string(),
+    featureIds: z.array(z.string()),
   });
 
   const isEditMode = !!price;
@@ -69,6 +86,12 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
   // Convert cents to dollars for display
   const defaultUnitAmount = price?.unitAmount ? price.unitAmount / 100 : 0;
 
+  // Get core feature IDs that should always be selected
+  const coreFeatureIds = allFeatures.filter((f) => f.isCore).map((f) => f.id);
+
+  // Combine existing price features with core features (ensure no duplicates)
+  const defaultFeatureIds = [...new Set([...(price?.priceFeatures?.map((f) => f.id) ?? []), ...coreFeatureIds])];
+
   const form = useForm<PriceFormValues>({
     resolver: zodResolver(formSchema) as any,
     defaultValues: {
@@ -82,12 +105,19 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
       description: price?.description || "",
       features: price?.features || [],
       token: price?.token?.toString() ?? "",
+      featureIds: defaultFeatureIds,
     },
   });
 
   // Reset form when dialog opens to ensure fresh state
   useEffect(() => {
     if (open) {
+      // Recalculate core feature IDs with current allFeatures
+      const currentCoreFeatureIds = allFeatures.filter((f) => f.isCore).map((f) => f.id);
+      const resetFeatureIds = [
+        ...new Set([...(price?.priceFeatures?.map((f) => f.id) ?? []), ...currentCoreFeatureIds]),
+      ];
+
       form.reset({
         unitAmount: price?.unitAmount ? price.unitAmount / 100 : 0,
         currency: price?.currency || "usd",
@@ -99,9 +129,10 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
         description: price?.description || "",
         features: price?.features || [],
         token: price?.token?.toString() ?? "",
+        featureIds: resetFeatureIds,
       });
     }
-  }, [open, price?.id]);
+  }, [open, price?.id, allFeatures]);
 
   const watchInterval = form.watch("interval");
   const isRecurring = watchInterval !== "one_time";
@@ -121,6 +152,8 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
           description: values.description || undefined,
           features: values.features.filter((f) => f.trim()) || undefined,
           token: values.token ? parseInt(values.token, 10) : undefined,
+          // Only include featureIds for recurring prices (one-time prices don't support platform features)
+          ...(price?.priceType === "recurring" ? { featureIds: values.featureIds } : {}),
         });
       } else {
         // Create new price
@@ -157,6 +190,11 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
           createInput.token = parseInt(values.token, 10);
         }
 
+        // Add platform feature IDs only for recurring prices (Neo4j only, not sent to Stripe)
+        if (isRecurring && values.featureIds.length > 0) {
+          createInput.featureIds = values.featureIds;
+        }
+
         await StripePriceService.createPrice(createInput);
       }
 
@@ -317,6 +355,52 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
               </div>
             </div>
 
+            {/* Platform Features Checkbox List - Only show for recurring prices */}
+            {isRecurring && allFeatures.length > 0 && (
+              <div className="space-y-2">
+                <Label>Platform Features</Label>
+                <div className="border rounded-md p-4 space-y-2 max-h-48 overflow-y-auto">
+                  {allFeatures.map((feature) => {
+                    const isCore = feature.isCore;
+                    const isChecked = form.watch("featureIds").includes(feature.id);
+
+                    return (
+                      <div key={feature.id} className="flex items-center space-x-2">
+                        <input
+                          type="checkbox"
+                          id={`feature-${feature.id}`}
+                          checked={isChecked}
+                          disabled={isCore}
+                          onChange={(e) => {
+                            const currentIds = form.getValues("featureIds");
+                            if (e.target.checked) {
+                              form.setValue("featureIds", [...currentIds, feature.id]);
+                            } else {
+                              // Don't allow unchecking core features
+                              if (!isCore) {
+                                form.setValue(
+                                  "featureIds",
+                                  currentIds.filter((id) => id !== feature.id),
+                                );
+                              }
+                            }
+                          }}
+                          className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-50"
+                        />
+                        <label
+                          htmlFor={`feature-${feature.id}`}
+                          className={`text-sm ${isCore ? "text-muted-foreground" : ""}`}
+                        >
+                          {feature.name}
+                          {isCore && <span className="ml-2 text-xs text-muted-foreground">(Core - Required)</span>}
+                        </label>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
             <FormCheckbox form={form} id="active" name="Active" />
 
             <CommonEditorButtons isEdit={isEditMode} form={form} disabled={isSubmitting} setOpen={onOpenChange} />

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

@@ -1,5 +1,6 @@
 import { ApiDataInterface } from "../../../../core";
 import { StripeProductInterface } from "../../stripe-product";
+import { FeatureInterface } from "../../../feature";
 
 // ============================================================================
 // Stripe Price Interfaces
@@ -20,6 +21,7 @@ export interface StripePriceInterface extends ApiDataInterface {
   get description(): string | undefined;
   get features(): string[] | undefined;
   get token(): number | undefined;
+  get priceFeatures(): FeatureInterface[]; // Platform Feature entities linked to this price
 }
 
 export interface PriceRecurring {
@@ -47,4 +49,5 @@ export type StripePriceInput = {
   description?: string;
   features?: string[];
   token?: number;
+  featureIds?: string[]; // Feature entity IDs to link (Neo4j only, NOT sent to Stripe)
 };

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

@@ -1,5 +1,6 @@
 import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../../core";
 import { StripeProductInterface } from "../../stripe-product";
+import { FeatureInterface } from "../../../feature";
 import { PriceRecurring, StripePriceInput, StripePriceInterface } from "./stripe-price.interface";
 
 export class StripePrice extends AbstractApiData implements StripePriceInterface {
@@ -17,6 +18,7 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
   private _description?: string;
   private _features?: string[];
   private _token?: number;
+  private _priceFeatures: FeatureInterface[] = []; // Platform Feature entities
 
   get stripePriceId(): string {
     if (!this._stripePriceId) throw new Error("stripePriceId is not defined");
@@ -78,6 +80,10 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
     return this._token;
   }
 
+  get priceFeatures(): FeatureInterface[] {
+    return this._priceFeatures;
+  }
+
   rehydrate(data: JsonApiHydratedDataInterface): this {
     super.rehydrate(data);
 
@@ -118,6 +124,9 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
     // Hydrate product relationship
     this._product = this._readIncluded(data, "product", Modules.StripeProduct) as StripeProductInterface;
 
+    // Hydrate feature relationship (JSON:API key is "features")
+    this._priceFeatures = this._readIncluded(data, "features", Modules.Feature) as FeatureInterface[];
+
     return this;
   }
 
@@ -161,6 +170,15 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
       response.data.attributes.token = data.token;
     }
 
+    // Convert featureIds to JSON:API relationships format
+    if (data.featureIds && data.featureIds.length > 0) {
+      response.data.relationships = response.data.relationships || {};
+      response.data.relationships.features = data.featureIds.map((id) => ({
+        type: Modules.Feature.name,
+        id,
+      }));
+    }
+
     return response;
   }
 }

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

@@ -9,9 +9,10 @@ import { SubscriptionsList } from "../lists";
 
 type SubscriptionsContainerProps = {
   onOpenWizard?: (subscription?: StripeSubscriptionInterface) => void;
+  hasActiveRecurringSubscription?: boolean;
 };
 
-export function SubscriptionsContainer({ onOpenWizard }: SubscriptionsContainerProps) {
+export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }: SubscriptionsContainerProps) {
   const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -57,7 +58,9 @@ export function SubscriptionsContainer({ onOpenWizard }: SubscriptionsContainerP
           <h1 className="text-3xl font-bold">Subscriptions</h1>
         </div>
         {subscriptions.length > 0 && (
-          <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
+          <Button onClick={() => onOpenWizard?.()}>
+            {hasActiveRecurringSubscription ? "Purchase Add-ons" : "Subscribe to a Plan"}
+          </Button>
         )}
       </div>
 

package/src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
-import { FormCheckbox, FormTextarea } from "../../../../../components";
+import { FormTextarea } from "../../../../../components";
 import {
   Button,
   Dialog,
@@ -25,7 +25,6 @@ type CancelSubscriptionDialogProps = {
 };
 
 const formSchema = z.object({
-  cancelImmediately: z.boolean(),
   reason: z.string().optional(),
 });
 
@@ -40,20 +39,17 @@ export function CancelSubscriptionDialog({
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      cancelImmediately: false,
       reason: "",
     },
   });
 
-  const cancelImmediately = form.watch("cancelImmediately");
-
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
     setIsSubmitting(true);
 
     try {
       await StripeSubscriptionService.cancelSubscription({
         id: subscription.id,
-        cancelImmediately: values.cancelImmediately,
+        cancelImmediately: false,
       });
 
       onSuccess();
@@ -79,18 +75,9 @@ export function CancelSubscriptionDialog({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <FormCheckbox form={form} id="cancelImmediately" name="Cancel Immediately" />
-
-            {cancelImmediately ? (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-800">
-                Your subscription will be canceled immediately and you will lose access right away.
-              </div>
-            ) : (
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
-                Your subscription will remain active until {periodEndDate}. You can continue using the service until
-                then.
-              </div>
-            )}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
+              Your subscription will remain active until {periodEndDate}. You can continue using the service until then.
+            </div>
 
             <FormTextarea
               form={form}