@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -5,6 +5,8 @@ import { Alert, AlertDescription, Button } from "../../../../../shadcnui";
 import { formatCurrency } from "../../../components/utils/currency";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { ProrationPreviewInterface } from "../../../stripe-invoice/data/stripe-invoice.interface";
+import { PromotionCodeValidationResult } from "../../../stripe-promotion-code";
+import { PromoCodeInput } from "../../../stripe-promotion-code/components/PromoCodeInput";
 import { StripeSubscriptionInterface } from "../../data";
 
 type WizardStepReviewProps = {
@@ -17,6 +19,14 @@ type WizardStepReviewProps = {
   onBack: () => void;
   onAddPaymentMethod: () => void;
   onConfirm: () => void;
+  // Promotion code props
+  promotionCode: PromotionCodeValidationResult | null;
+  isValidatingPromoCode: boolean;
+  promoCodeError: string | null;
+  onApplyPromoCode: (code: string) => void;
+  onRemovePromoCode: () => void;
+  // Trial upgrade flag
+  isTrialUpgrade: boolean;
 };
 
 export function WizardStepReview({
@@ -29,12 +39,16 @@ export function WizardStepReview({
   onBack,
   onAddPaymentMethod,
   onConfirm,
+  promotionCode,
+  isValidatingPromoCode,
+  promoCodeError,
+  onApplyPromoCode,
+  onRemovePromoCode,
+  isTrialUpgrade,
 }: WizardStepReviewProps) {
   if (!selectedPrice) {
     return (
-      <div className="text-center py-8 text-muted-foreground">
-        No plan selected. Please go back and select a plan.
-      </div>
+      <div className="text-center py-8 text-muted-foreground">No plan selected. Please go back and select a plan.</div>
     );
   }
 
@@ -46,6 +60,62 @@ export function WizardStepReview({
     return interval === "year" ? "yearly" : "monthly";
   };
 
+  // Calculate discounted price if promotion code is applied
+  const calculateDiscountedPrice = (): number | null => {
+    if (!promotionCode?.valid || !selectedPrice.unitAmount) return null;
+
+    const originalPrice = selectedPrice.unitAmount;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return originalPrice * (1 - promotionCode.discountValue / 100);
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      // amount_off is in cents, same as unitAmount
+      return Math.max(0, originalPrice - promotionCode.discountValue);
+    }
+
+    return null;
+  };
+
+  const discountedPrice = calculateDiscountedPrice();
+
+  // Calculate discounted immediate charge for proration preview
+  const calculateDiscountedImmediateCharge = (): number | null => {
+    if (!promotionCode?.valid || !prorationPreview?.immediateCharge) return null;
+
+    const originalCharge = prorationPreview.immediateCharge;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return originalCharge * (1 - promotionCode.discountValue / 100);
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      return Math.max(0, originalCharge - promotionCode.discountValue);
+    }
+
+    return null;
+  };
+
+  const discountedImmediateCharge = calculateDiscountedImmediateCharge();
+
+  // Format the discount description
+  const getDiscountDescription = (): string | null => {
+    if (!promotionCode?.valid) return null;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return `${promotionCode.discountValue}% off`;
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      return `${formatCurrency(promotionCode.discountValue, promotionCode.currency || selectedPrice.currency)} off`;
+    }
+
+    return null;
+  };
+
+  const discountDescription = getDiscountDescription();
+
   return (
     <div className="space-y-6">
       {/* Selected Plan Summary */}
@@ -54,14 +124,28 @@ export function WizardStepReview({
         <div className="flex justify-between items-center">
           <div>
             <p className="font-medium">{selectedPrice.product?.name}</p>
-            {selectedPrice.nickname && (
-              <p className="text-sm text-muted-foreground">{selectedPrice.nickname}</p>
-            )}
+            {selectedPrice.nickname && <p className="text-sm text-muted-foreground">{selectedPrice.nickname}</p>}
           </div>
           <div className="text-right">
-            <p className="font-semibold text-lg">
-              {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
-            </p>
+            {discountedPrice !== null ? (
+              <>
+                <p className="text-sm text-muted-foreground line-through">
+                  {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+                </p>
+                <p className="font-semibold text-lg text-green-600">
+                  {formatCurrency(discountedPrice, selectedPrice.currency)}
+                </p>
+                {discountDescription && (
+                  <span className="inline-block text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">
+                    {discountDescription}
+                  </span>
+                )}
+              </>
+            ) : (
+              <p className="font-semibold text-lg">
+                {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+              </p>
+            )}
             <p className="text-sm text-muted-foreground">{formatInterval(selectedPrice)}</p>
           </div>
         </div>
@@ -69,29 +153,59 @@ export function WizardStepReview({
 
       {/* Proration Preview (for plan changes) */}
       {isChangingPlan && prorationPreview && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2">
-          <h4 className="font-medium text-blue-800">Proration Summary</h4>
-          <p className="text-sm text-blue-700">
-            Your next charge will be adjusted to account for the plan change.
+        <div
+          className={`${isTrialUpgrade ? "bg-amber-50 border-amber-200" : "bg-blue-50 border-blue-200"} border rounded-lg p-4 space-y-2`}
+        >
+          <h4 className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+            {isTrialUpgrade ? "Trial Upgrade" : "Proration Summary"}
+          </h4>
+          <p className={`text-sm ${isTrialUpgrade ? "text-amber-700" : "text-blue-700"}`}>
+            {isTrialUpgrade
+              ? "Your trial will end immediately and you will be charged the full price."
+              : "Your next charge will be adjusted to account for the plan change."}
           </p>
           <div className="flex justify-between text-sm">
-            <span className="text-blue-600">Amount due now:</span>
-            <span className="font-medium text-blue-800">
-              {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
+            <span className={`${isTrialUpgrade ? "text-amber-600" : "text-blue-600"}`}>
+              {isTrialUpgrade ? "Amount to charge now:" : "Amount due now:"}
+            </span>
+            <span className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+              {discountedImmediateCharge !== null ? (
+                <>
+                  <span className="line-through text-muted-foreground mr-2">
+                    {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
+                  </span>
+                  <span className="text-green-600">
+                    {formatCurrency(discountedImmediateCharge, prorationPreview.currency)}
+                  </span>
+                </>
+              ) : (
+                formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)
+              )}
             </span>
           </div>
         </div>
       )}
 
+      {/* Promotion Code */}
+      <div className="border rounded-lg p-4 space-y-3">
+        <h4 className="font-medium">Promotion Code</h4>
+        <PromoCodeInput
+          appliedCode={promotionCode}
+          isValidating={isValidatingPromoCode}
+          error={promoCodeError}
+          onApply={onApplyPromoCode}
+          onRemove={onRemovePromoCode}
+          disabled={isProcessing}
+        />
+      </div>
+
       {/* Payment Method Status */}
       <div className="border rounded-lg p-4">
         <div className="flex justify-between items-center">
           <div>
             <h4 className="font-medium">Payment Method</h4>
             <p className="text-sm text-muted-foreground">
-              {hasPaymentMethod
-                ? "A payment method is on file"
-                : "No payment method on file"}
+              {hasPaymentMethod ? "A payment method is on file" : "No payment method on file"}
             </p>
           </div>
           {!hasPaymentMethod && (
@@ -115,10 +229,7 @@ export function WizardStepReview({
         <Button variant="outline" onClick={onBack} disabled={isProcessing}>
           Back
         </Button>
-        <Button
-          onClick={hasPaymentMethod ? onConfirm : onAddPaymentMethod}
-          disabled={isProcessing}
-        >
+        <Button onClick={hasPaymentMethod ? onConfirm : onAddPaymentMethod} disabled={isProcessing}>
           {isProcessing
             ? "Processing..."
             : hasPaymentMethod

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

@@ -48,6 +48,8 @@ export type StripeSubscriptionInput = {
   trialPeriodDays?: number;
   paymentMethodId?: string;
   metadata?: Record<string, any>;
+  // For CREATE and CHANGE-PLAN - optional promotion code
+  promotionCode?: string;
 };
 
 // ============================================================================

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

@@ -83,6 +83,9 @@ export class StripeSubscription extends AbstractApiData implements StripeSubscri
   }
 
   createJsonApi(data: StripeSubscriptionInput): any {
+    console.log("[StripeSubscription.createJsonApi] Input data:", JSON.stringify(data, null, 2));
+    console.log("[StripeSubscription.createJsonApi] promotionCode in input:", data.promotionCode);
+
     const response: any = {
       data: {
         type: Modules.StripeSubscription.name,
@@ -130,6 +133,11 @@ export class StripeSubscription extends AbstractApiData implements StripeSubscri
       response.data.attributes.metadata = data.metadata;
     }
 
+    if (data.promotionCode) {
+      response.data.attributes.promotionCode = data.promotionCode;
+    }
+
+    console.log("[StripeSubscription.createJsonApi] Final response:", JSON.stringify(response, null, 2));
     return response;
   }
 }

package/src/features/billing/stripe-subscription/hooks/useSubscriptionWizard.ts

@@ -5,8 +5,9 @@ import { v4 } from "uuid";
 import { StripeCustomerService } from "../../stripe-customer/data/stripe-customer.service";
 import { ProrationPreviewInterface } from "../../stripe-invoice/data/stripe-invoice.interface";
 import { StripePriceInterface } from "../../stripe-price/data/stripe-price.interface";
+import { PromotionCodeValidationResult, StripePromotionCodeService } from "../../stripe-promotion-code";
 import { BillingInterval } from "../components/widgets/IntervalToggle";
-import { StripeSubscriptionInterface, StripeSubscriptionService } from "../data";
+import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../data";
 
 export type WizardStep = "plan-selection" | "review" | "payment-method";
 
@@ -18,6 +19,12 @@ export type WizardState = {
   isProcessing: boolean;
   error: string | null;
   prorationPreview: ProrationPreviewInterface | null;
+  // Promotion code state
+  promotionCode: PromotionCodeValidationResult | null;
+  isValidatingPromoCode: boolean;
+  promoCodeError: string | null;
+  // Trial state
+  isTrialSubscription: boolean;
 };
 
 type WizardAction =
@@ -28,6 +35,10 @@ type WizardAction =
   | { type: "SET_PROCESSING"; isProcessing: boolean }
   | { type: "SET_ERROR"; error: string | null }
   | { type: "SET_PRORATION_PREVIEW"; preview: ProrationPreviewInterface | null }
+  | { type: "SET_PROMOTION_CODE"; code: PromotionCodeValidationResult | null }
+  | { type: "SET_VALIDATING_PROMO_CODE"; isValidating: boolean }
+  | { type: "SET_PROMO_CODE_ERROR"; error: string | null }
+  | { type: "SET_IS_TRIAL_SUBSCRIPTION"; isTrial: boolean }
   | { type: "RESET" };
 
 const initialState: WizardState = {
@@ -38,6 +49,10 @@ const initialState: WizardState = {
   isProcessing: false,
   error: null,
   prorationPreview: null,
+  promotionCode: null,
+  isValidatingPromoCode: false,
+  promoCodeError: null,
+  isTrialSubscription: false,
 };
 
 function wizardReducer(state: WizardState, action: WizardAction): WizardState {
@@ -56,6 +71,14 @@ function wizardReducer(state: WizardState, action: WizardAction): WizardState {
       return { ...state, error: action.error };
     case "SET_PRORATION_PREVIEW":
       return { ...state, prorationPreview: action.preview };
+    case "SET_PROMOTION_CODE":
+      return { ...state, promotionCode: action.code, promoCodeError: null };
+    case "SET_VALIDATING_PROMO_CODE":
+      return { ...state, isValidatingPromoCode: action.isValidating };
+    case "SET_PROMO_CODE_ERROR":
+      return { ...state, promoCodeError: action.error };
+    case "SET_IS_TRIAL_SUBSCRIPTION":
+      return { ...state, isTrialSubscription: action.isTrial };
     case "RESET":
       return initialState;
     default:
@@ -112,6 +135,23 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       // Check payment method first
       await checkPaymentMethod();
 
+      // Check if current subscription is trial
+      const isTrialUpgrade = subscription?.status === SubscriptionStatus.TRIALING;
+      dispatch({ type: "SET_IS_TRIAL_SUBSCRIPTION", isTrial: isTrialUpgrade });
+
+      // For trial upgrades, require payment method before review
+      if (isTrialUpgrade && !state.hasPaymentMethod) {
+        const methods = await StripeCustomerService.listPaymentMethods();
+        if (methods.length === 0) {
+          dispatch({ type: "SET_STEP", step: "payment-method" });
+          dispatch({
+            type: "SET_ERROR",
+            error: "A payment method is required to upgrade from your trial.",
+          });
+          return;
+        }
+      }
+
       // If editing subscription, get proration preview
       if (subscription && state.selectedPrice.id !== subscription.price?.id) {
         const preview = await StripeSubscriptionService.getProrationPreview({
@@ -128,27 +168,37 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, subscription, checkPaymentMethod]);
+  }, [state.selectedPrice, state.hasPaymentMethod, subscription, checkPaymentMethod]);
 
   const confirmSubscription = useCallback(async () => {
     if (!state.selectedPrice) return;
 
+    console.log("[useSubscriptionWizard] confirmSubscription called");
+    console.log("[useSubscriptionWizard] state.promotionCode:", JSON.stringify(state.promotionCode, null, 2));
+    console.log("[useSubscriptionWizard] promotionCodeId to send:", state.promotionCode?.promotionCodeId);
+
     dispatch({ type: "SET_PROCESSING", isProcessing: true });
     dispatch({ type: "SET_ERROR", error: null });
 
     try {
       if (subscription) {
         // Change existing subscription
-        await StripeSubscriptionService.changePlan({
+        const changePlanParams = {
           id: subscription.id,
           newPriceId: state.selectedPrice.id,
-        });
+          promotionCode: state.promotionCode?.promotionCodeId,
+        };
+        console.log("[useSubscriptionWizard] changePlan params:", JSON.stringify(changePlanParams, null, 2));
+        await StripeSubscriptionService.changePlan(changePlanParams);
       } else {
         // Create new subscription
-        await StripeSubscriptionService.createSubscription({
+        const createParams = {
           id: v4(),
           priceId: state.selectedPrice.id,
-        });
+          promotionCode: state.promotionCode?.promotionCodeId,
+        };
+        console.log("[useSubscriptionWizard] createSubscription params:", JSON.stringify(createParams, null, 2));
+        await StripeSubscriptionService.createSubscription(createParams);
       }
 
       onSuccessRef.current();
@@ -176,7 +226,7 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, subscription]);
+  }, [state.selectedPrice, state.promotionCode, subscription]);
 
   const handlePaymentMethodSuccess = useCallback(async () => {
     dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: true });
@@ -188,6 +238,38 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     dispatch({ type: "RESET" });
   }, []);
 
+  const validatePromoCode = useCallback(
+    async (code: string) => {
+      dispatch({ type: "SET_VALIDATING_PROMO_CODE", isValidating: true });
+      dispatch({ type: "SET_PROMO_CODE_ERROR", error: null });
+
+      try {
+        const result = await StripePromotionCodeService.validatePromotionCode({
+          code,
+          stripePriceId: state.selectedPrice?.id,
+        });
+
+        if (result.valid) {
+          dispatch({ type: "SET_PROMOTION_CODE", code: result });
+        } else {
+          dispatch({ type: "SET_PROMO_CODE_ERROR", error: result.errorMessage || "Invalid promotion code" });
+        }
+      } catch (error: any) {
+        console.error("[useSubscriptionWizard] Promo code validation error:", error);
+        dispatch({ type: "SET_PROMO_CODE_ERROR", error: error?.message || "Failed to validate promotion code" });
+      } finally {
+        dispatch({ type: "SET_VALIDATING_PROMO_CODE", isValidating: false });
+      }
+    },
+    [state.selectedPrice?.id],
+  );
+
+  const clearPromoCode = useCallback(() => {
+    dispatch({ type: "SET_PROMOTION_CODE", code: null });
+    dispatch({ type: "SET_PROMO_CODE_ERROR", error: null });
+    dispatch({ type: "SET_ERROR", error: null });
+  }, []);
+
   const actions = useMemo(
     () => ({
       selectPrice,
@@ -198,6 +280,8 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       handlePaymentMethodSuccess,
       checkPaymentMethod,
       reset,
+      validatePromoCode,
+      clearPromoCode,
     }),
     [
       selectPrice,
@@ -208,6 +292,8 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       handlePaymentMethodSuccess,
       checkPaymentMethod,
       reset,
+      validatePromoCode,
+      clearPromoCode,
     ],
   );
 

package/src/features/billing/stripe-usage/components/details/UsageSummaryCard.tsx

@@ -30,7 +30,7 @@ function formatDate(date: Date | undefined): string {
       month: "short",
       day: "numeric",
     }).format(new Date(date));
-  } catch (error) {
+  } catch (_error) {
     return "Invalid Date";
   }
 }

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -23,7 +23,7 @@ function formatDateTime(date: Date | string | undefined): string {
       hour: "numeric",
       minute: "2-digit",
     }).format(dateObj);
-  } catch (error) {
+  } catch (_error) {
     return "Invalid Date";
   }
 }

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

@@ -9,9 +9,9 @@ import { usePageUrlGenerator } from "../../../../hooks";
 import { useCompanyContext } from "../../contexts/CompanyContext";
 
 export function CompanyDetails() {
-  const t = useTranslations();
+  const _t = useTranslations();
   const { title } = useSharedContext();
-  const generateUrl = usePageUrlGenerator();
+  const _generateUrl = usePageUrlGenerator();
 
   const { company } = useCompanyContext();
   if (!company) return null;

package/src/features/company/components/forms/CompanyConfigurationSecurityForm.tsx

@@ -20,7 +20,7 @@ const providerConfig: Fields = {
 };
 
 export function CompanyConfigurationSecurityForm({ form }: SecurityConfigurationFormProps) {
-  const t = useTranslations();
+  const _t = useTranslations();
 
   const renderProviderFields = () => {
     const config = providerConfig;

package/src/features/index.ts

@@ -7,6 +7,7 @@ export * from "./billing/stripe-price";
 export * from "./billing/stripe-product";
 export * from "./billing/stripe-subscription";
 export * from "./billing/stripe-usage";
+export * from "./billing/stripe-promotion-code";
 export * from "./company";
 export * from "./content";
 export * from "./feature";

package/src/features/notification/components/containers/NotificationsListContainer.tsx

@@ -8,7 +8,7 @@ import { NotificationsList } from "../lists/NotificationsList";
 
 function NotificationsListContainerContent() {
   const t = useTranslations();
-  const { notifications, isLoading, error } = useNotificationContext();
+  const { notifications: _notifications, isLoading: _isLoading, error } = useNotificationContext();
 
   if (error) {
     return (

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -25,7 +25,7 @@ interface NotificationModalProps {
 }
 
 function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps) {
-  const instanceId = useRef(Math.random().toString(36).substr(2, 9));
+  const _instanceId = useRef(Math.random().toString(36).substr(2, 9));
   const {
     notifications,
     addNotification,
@@ -38,7 +38,11 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
     shouldRefresh,
     lastLoaded,
   } = useNotificationContext();
-  const { socketNotifications, removeSocketNotification, clearSocketNotifications } = useSocketContext();
+  const {
+    socketNotifications,
+    removeSocketNotification: _removeSocketNotification,
+    clearSocketNotifications,
+  } = useSocketContext();
   const t = useTranslations();
   const generateUrl = usePageUrlGenerator();
   const [newNotifications, setNewNotifications] = useState<boolean>(false);

package/src/features/notification/contexts/NotificationContext.tsx

@@ -101,9 +101,7 @@ export const NotificationContextProvider = ({ children }: NotificationContextPro
 
     // Skip for admin users
     if (isRolesConfigured()) {
-      const isAdmin = currentUser.roles?.some(
-        (role: RoleInterface) => role.id === getRoleId().Administrator,
-      );
+      const isAdmin = currentUser.roles?.some((role: RoleInterface) => role.id === getRoleId().Administrator);
       if (isAdmin) {
         setHasInitiallyLoaded(true);
         return;

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -31,16 +31,10 @@ export interface OAuthClientCardProps {
 /**
  * Card component for displaying an OAuth client in a list
  */
-export function OAuthClientCard({
-  client,
-  onClick,
-  onEdit,
-  onDelete,
-}: OAuthClientCardProps) {
+export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClientCardProps) {
   // Truncate client ID for display
-  const truncatedId = client.clientId.length > 12
-    ? `${client.clientId.slice(0, 8)}...${client.clientId.slice(-4)}`
-    : client.clientId;
+  const truncatedId =
+    client.clientId.length > 12 ? `${client.clientId.slice(0, 8)}...${client.clientId.slice(-4)}` : client.clientId;
 
   const createdAgo = client.createdAt
     ? formatDistanceToNow(new Date(client.createdAt), { addSuffix: true })
@@ -58,9 +52,7 @@ export function OAuthClientCard({
             <CardTitle className="text-lg">{client.name}</CardTitle>
           </div>
           <div className="flex items-center gap-2">
-            <Badge variant={client.isActive ? "default" : "secondary"}>
-              {client.isActive ? "Active" : "Inactive"}
-            </Badge>
+            <Badge variant={client.isActive ? "default" : "secondary"}>{client.isActive ? "Active" : "Inactive"}</Badge>
             {(onEdit || onDelete) && (
               <DropdownMenu>
                 <DropdownMenuTrigger onClick={(e) => e.stopPropagation()}>
@@ -70,14 +62,22 @@ export function OAuthClientCard({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   {onEdit && (
-                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit(); }}>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onEdit();
+                      }}
+                    >
                       <Pencil className="h-4 w-4 mr-2" />
                       Edit
                     </DropdownMenuItem>
                   )}
                   {onDelete && (
                     <DropdownMenuItem
-                      onClick={(e) => { e.stopPropagation(); onDelete(); }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete();
+                      }}
                       className="text-destructive"
                     >
                       <Trash2 className="h-4 w-4 mr-2" />
@@ -89,9 +89,7 @@ export function OAuthClientCard({
             )}
           </div>
         </div>
-        {client.description && (
-          <CardDescription className="line-clamp-2">{client.description}</CardDescription>
-        )}
+        {client.description && <CardDescription className="line-clamp-2">{client.description}</CardDescription>}
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">