@carlonicora/nextjs-jsonapi 1.28.0 → 1.29.0

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { Battery, BatteryFull, BatteryLow, BatteryMedium, PlusCircle } from "lucide-react";
+import Link from "next/link";
 
 import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../shadcnui";
+import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from "../../../../shadcnui";
 import { useCurrentUserContext } from "../../../user/contexts";
 
 interface TokenStatusIndicatorProps {
@@ -99,14 +100,23 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
           <span className="text-muted-foreground">{t("generic.tokens.available", { defaultValue: "Available" })}:</span>
           <span className={cn("font-medium", getStatusColor())}>{percentage.toFixed(0)}%</span>
         </div>
-        {showExtraPages && (
-          <div className="flex items-center justify-between gap-4 border-t pt-1 mt-1">
-            <span className="text-muted-foreground">
-              {t("generic.tokens.available_extra", { defaultValue: "Extra Pages" })}:
-            </span>
-            <span className="font-medium text-blue-500">{availableExtraTokens}</span>
-          </div>
-        )}
+        <Link href="/settings/billing?action=subscribe" className="w-full flex justify-end my-4">
+          <Button variant="outline" size="sm">
+            {t("generic.tokens.upgrade_plan", { defaultValue: "Upgrade plan" })}
+          </Button>
+        </Link>
+        <Separator />
+        <div className="flex items-center justify-between gap-4 pt-1 mt-1">
+          <span className="text-muted-foreground">
+            {t("generic.tokens.available_extra", { defaultValue: "Extra Pages" })}:
+          </span>
+          <span className="font-medium text-blue-500">{availableExtraTokens}</span>
+        </div>
+        <Link href="/settings/billing?action=subscribe" className="w-full flex justify-end my-4">
+          <Button variant="outline" size="sm">
+            {t("generic.tokens.purchase_extra", { defaultValue: "Purchase additional analysis" })}
+          </Button>
+        </Link>
       </div>
     </div>
   );

package/src/features/company/data/company.interface.ts

@@ -22,6 +22,8 @@ export interface CompanyInterface extends ApiDataInterface {
   get logo(): string | undefined;
   get logoUrl(): string | undefined;
 
+  get isActiveSubscription(): boolean;
+
   get monthlyTokens(): number;
   get availableMonthlyTokens(): number;
   get availableExtraTokens(): number;

package/src/features/company/data/company.ts

@@ -9,6 +9,8 @@ export class Company extends AbstractApiData implements CompanyInterface {
   private _logoUrl?: string;
   private _configurations?: any;
 
+  private _isActiveSubscription: boolean = false;
+
   private _monthlyTokens: number = 0;
   private _availableMonthlyTokens: number = 0;
   private _availableExtraTokens: number = 0;
@@ -29,6 +31,10 @@ export class Company extends AbstractApiData implements CompanyInterface {
     return this._logoUrl;
   }
 
+  get isActiveSubscription(): boolean {
+    return this._isActiveSubscription ?? false;
+  }
+
   get monthlyTokens(): number {
     return this._monthlyTokens ?? 0;
   }
@@ -62,6 +68,7 @@ export class Company extends AbstractApiData implements CompanyInterface {
       : undefined;
     this._logo = data.jsonApi.attributes.logo;
     this._logoUrl = data.jsonApi.attributes.logoUrl;
+    this._isActiveSubscription = data.jsonApi.attributes.isActiveSubscription ?? false;
     this._monthlyTokens = data.jsonApi.attributes.monthlyTokens ?? 0;
     this._availableMonthlyTokens = data.jsonApi.attributes.availableMonthlyTokens ?? 0;
     this._availableExtraTokens = data.jsonApi.attributes.availableExtraTokens ?? 0;

package/src/features/company/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useCompanyTableStructure";
+export * from "./useSubscriptionStatus";

package/src/features/company/hooks/useSubscriptionStatus.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useMemo } from "react";
+import { useCurrentUserContext } from "../../user/contexts/CurrentUserContext";
+
+export interface TrialSubscriptionStatus {
+  status: "loading" | "trial" | "active" | "expired";
+  trialEndsAt: Date | null;
+  daysRemaining: number;
+  isGracePeriod: boolean; // Last 3 days
+  isBlocked: boolean;
+}
+
+const TRIAL_DAYS = 14;
+const GRACE_DAYS = 3;
+
+export function useSubscriptionStatus(): TrialSubscriptionStatus {
+  const { company, currentUser } = useCurrentUserContext();
+
+  return useMemo(() => {
+    // Still loading user data - don't block yet
+    if (currentUser === null) {
+      return {
+        status: "loading",
+        trialEndsAt: null,
+        daysRemaining: 0,
+        isGracePeriod: false,
+        isBlocked: false,
+      };
+    }
+
+    // No company after loading = blocked
+    if (!company) {
+      return {
+        status: "expired",
+        trialEndsAt: null,
+        daysRemaining: 0,
+        isGracePeriod: false,
+        isBlocked: true,
+      };
+    }
+
+    // Has active subscription = never blocked
+    if (company.isActiveSubscription) {
+      return {
+        status: "active",
+        trialEndsAt: null,
+        daysRemaining: 0,
+        isGracePeriod: false,
+        isBlocked: false,
+      };
+    }
+
+    // Calculate trial status from createdAt
+    const createdAt = new Date(company.createdAt);
+    const trialEndsAt = new Date(createdAt);
+    trialEndsAt.setDate(trialEndsAt.getDate() + TRIAL_DAYS);
+
+    const now = new Date();
+    const msRemaining = trialEndsAt.getTime() - now.getTime();
+    const daysRemaining = Math.ceil(msRemaining / (1000 * 60 * 60 * 24));
+
+    return {
+      status: daysRemaining > 0 ? "trial" : "expired",
+      trialEndsAt,
+      daysRemaining: Math.max(0, daysRemaining),
+      isGracePeriod: daysRemaining > 0 && daysRemaining <= GRACE_DAYS,
+      isBlocked: daysRemaining <= 0,
+    };
+  }, [company, currentUser]);
+}

package/src/features/user/components/forms/UserEditor.tsx

@@ -23,7 +23,7 @@ import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
 import { Action } from "../../../../permissions";
 import { getRoleId } from "../../../../roles";
 import { Dialog, DialogContent, DialogTrigger, Form } from "../../../../shadcnui";
-import { CompanyInterface } from "../../../company";
+import { CompanyInterface } from "../../../company/data/company.interface";
 import { RoleInterface } from "../../../role";
 import { RoleService } from "../../../role/data/role.service";
 import { S3Interface } from "../../../s3";

package/src/features/user/components/lists/AdminUsersList.tsx

@@ -5,7 +5,7 @@ import { ContentListTable } from "../../../../components";
 import { useCompanyContext } from "../../../../contexts";
 import { Modules } from "../../../../core";
 import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
-import { CompanyInterface } from "../../../company";
+import { CompanyInterface } from "../../../company/data/company.interface";
 import { UserFields, UserInterface } from "../../data";
 import { UserService } from "../../data/user.service";
 import { UserEditor } from "../forms";

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -8,7 +8,7 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt
 import { Modules, rehydrate } from "../../../core";
 import { Action, checkPermissions, ModuleWithPermissions } from "../../../permissions";
 import { getRoleId } from "../../../roles";
-import { CompanyInterface } from "../../company";
+import { CompanyInterface } from "../../company/data/company.interface";
 import { FeatureInterface } from "../../feature";
 import { RoleInterface } from "../../role";
 import { UserInterface, UserService } from "../data";

package/src/features/user/data/user.ts

@@ -1,5 +1,5 @@
 import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../core";
-import { CompanyInterface } from "../../company";
+import { CompanyInterface } from "../../company/data/company.interface";
 import { ModuleInterface } from "../../module";
 import { RoleInterface } from "../../role";
 import { SearchResultInterface } from "../../search";